/**
 * Shared loading skeleton + load-more spinner.
 *
 * Shown while an AJAX reload (search / filter / badge / sort) replaces a result
 * list, and as a small spinner while infinite scroll fetches the next page.
 * Used by Galleries, News, Blog, Exhibitions. JS injects the skeleton markup
 * into the result container on reset; the response then overwrites it.
 *
 * Tokens are referenced with literal fallbacks (no theme :root defines them).
 */

/* Gentle single sweep (one band per cycle, right → left). Renamed from
   pwpps-shimmer so it can't collide with the faster events-modal keyframes
   of the same name when both stylesheets load on one page. */
@keyframes pwpps-skeleton-shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes pwpps-spin {
  to { transform: rotate(360deg); }
}

/* ── Skeleton card ───────────────────────────────────────────────────────── */

.pwpps-skeleton-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
}

.pwpps-skeleton__img,
.pwpps-skeleton__line {
  background: linear-gradient(
    90deg,
    var(--color-neutral-200, #E6E6E6) 25%,
    var(--color-neutral-300, #CCCCCC) 50%,
    var(--color-neutral-200, #E6E6E6) 75%
  );
  background-size: 400% 100%;
  animation: pwpps-skeleton-shimmer 2.8s ease-in-out infinite;
}

.pwpps-skeleton__img {
  width: 100%;
  aspect-ratio: 1 / 1; /* default: Galleries square; per-page modifiers below */
}

.pwpps-skeleton__img--wide     { aspect-ratio: 16 / 10; }
.pwpps-skeleton__img--portrait { aspect-ratio: 4 / 5; }

.pwpps-skeleton__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
}

.pwpps-skeleton__line {
  height: 12px;
  border-radius: var(--radius-sm, 4px);
}

.pwpps-skeleton__line--lg { width: 80%; animation-delay: 0.1s; }
.pwpps-skeleton__line--md { width: 55%; animation-delay: 0.2s; }
.pwpps-skeleton__line--sm { width: 35%; animation-delay: 0.3s; }

/* ── Row variant — News (mirrors .pwpps-news__card: 262px image left, 250px) ─ */

.pwpps-skeleton-card--row {
  flex-direction: row;
  gap: var(--space-4, 16px);
  width: 100%;
  max-width: 792px;
  height: 250px;
}

.pwpps-skeleton-card--row .pwpps-skeleton__img {
  flex: 0 0 262px;
  width: 262px;
  height: 100%;
  aspect-ratio: auto;
}

.pwpps-skeleton-card--row .pwpps-skeleton__body {
  flex: 1 1 auto;
  justify-content: center;
  gap: var(--space-3, 12px);
}

/* News card stacks to a column on tablet/mobile (1023px breakpoint), matching
   .pwpps-news__card-link's flex-direction switch. */
@media (max-width: 1023px) {
  .pwpps-skeleton-card--row {
    flex-direction: column;
    height: auto;
  }

  .pwpps-skeleton-card--row .pwpps-skeleton__img {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 16 / 9;
  }
}

/* ── Load-more spinner — toggled on the infinite-scroll sentinel ──────────── */

.pwpps-loading-more {
  position: relative;
  min-height: 56px;
  /* The sentinel is normally height:1px; visibility:hidden — override both so the
     spinner shows. !important beats the later-loaded per-page sentinel rule. */
  visibility: visible !important;
}

.pwpps-loading-more::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 2px solid var(--color-neutral-200, #E6E6E6);
  border-top-color: var(--color-neutral-700, #4D4D4D);
  border-radius: 50%;
  animation: pwpps-spin 0.7s linear infinite;
}

/* ── Screen-reader-only loading message ──────────────────────────────────── */

.pwpps-skeleton__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .pwpps-skeleton__img,
  .pwpps-skeleton__line,
  .pwpps-loading-more::after {
    animation: none;
  }

  .pwpps-skeleton__img,
  .pwpps-skeleton__line {
    background: var(--color-neutral-200, #E6E6E6);
  }
}