/* Site-local Editorial Mosaic: ordered articles, CSS-only 2–9 item recipes.
   Without :has() the simple 1/2/3-column grid remains readable. */
.editorial-mosaic {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(0.9rem, 2vw, 1.5rem);
}
.editorial-mosaic > * { min-width: 0; scroll-margin-top: 7rem; }

.editorial-mosaic__card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  background: linear-gradient(145deg, rgba(var(--sea-rgb), 0.08), transparent 75%), var(--slab-background);
  color: inherit;
  text-decoration: none;
}
.editorial-mosaic__media {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--deep);
}
.editorial-mosaic__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.editorial-mosaic__media--contain img { object-fit: contain; padding: 0.5rem; }
.editorial-mosaic__copy { display: block; min-width: 0; padding: var(--space-4); }
.editorial-mosaic__copy h3 {
  margin: 0 0 0.35rem;
  font-family: var(--font-editorial);
  font-size: var(--type-subhead);
  font-weight: 400;
  line-height: 1.2;
  overflow-wrap: break-word;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.editorial-mosaic__copy > span {
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 0.875rem;
}

/* The first photo leads on phones, too. A wide closing photo balances count 5/8. */
:is(.editorial-mosaic > :first-child,
    .editorial-mosaic:has(> :nth-child(5):last-child) > :last-child,
    .editorial-mosaic:has(> :nth-child(8):last-child) > :last-child) .editorial-mosaic__card {
  min-height: clamp(20rem, 68vw, 26rem);
}
:is(.editorial-mosaic > :first-child,
    .editorial-mosaic:has(> :nth-child(5):last-child) > :last-child,
    .editorial-mosaic:has(> :nth-child(8):last-child) > :last-child) .editorial-mosaic__card::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(var(--ink-rgb), 0.91) 100%);
  pointer-events: none;
}
:is(.editorial-mosaic > :first-child,
    .editorial-mosaic:has(> :nth-child(5):last-child) > :last-child,
    .editorial-mosaic:has(> :nth-child(8):last-child) > :last-child) .editorial-mosaic__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}
:is(.editorial-mosaic > :first-child,
    .editorial-mosaic:has(> :nth-child(5):last-child) > :last-child,
    .editorial-mosaic:has(> :nth-child(8):last-child) > :last-child) .editorial-mosaic__copy {
  position: relative;
  z-index: 2;
  width: min(100%, 36ch);
  margin-top: auto;
  padding: var(--space-5);
  text-shadow: 0 2px 12px rgba(var(--ink-rgb), 0.8);
}
:is(.editorial-mosaic > :first-child,
    .editorial-mosaic:has(> :nth-child(5):last-child) > :last-child,
    .editorial-mosaic:has(> :nth-child(8):last-child) > :last-child) .editorial-mosaic__copy h3 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}


/* The ordered article itself moves subtly as it crosses the viewport. Its
   media stays clipped by the shared card surface; the book cover is uncropped.
   Unsupported view timelines and Reduced Motion retain static cards. */
@keyframes mosaic-card-parallax {
  from { transform: translateY(var(--mosaic-parallax-distance)); }
  to { transform: translateY(calc(-1 * var(--mosaic-parallax-distance))); }
}
@supports (animation-timeline: view(block)) {
  @media (prefers-reduced-motion: no-preference) {
    .editorial-mosaic > article {
      --mosaic-parallax-distance: 0.5rem;
      animation: mosaic-card-parallax auto linear both;
      animation-timeline: view(block);
      animation-range: entry 0% exit 100%;
    }
    @media (min-width: 42rem) {
      .editorial-mosaic > article { --mosaic-parallax-distance: 0.75rem; }
    }
  }
}

/* Compact, varied phone photos, never slices of a compressed desktop grid. */
@media (max-width: 41.99rem) {
  .editorial-mosaic > :nth-child(even) .editorial-mosaic__media:not(.editorial-mosaic__media--contain) {
    aspect-ratio: 2 / 1;
  }
}
@media (min-width: 42rem) {
  .editorial-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .editorial-mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@supports selector(.editorial-mosaic:has(> :nth-child(2):last-child)) {
  /* Mid six-track recipes: five items = 6 / 3+3 / 2+4. */
  @media (min-width: 42rem) and (max-width: 63.99rem) {
    .editorial-mosaic { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .editorial-mosaic > * { grid-column: span 3; }
    .editorial-mosaic:has(> :only-child) > * { grid-column: 1 / -1; }
    .editorial-mosaic:has(> :nth-child(3):last-child) > :first-child,
    .editorial-mosaic:has(> :nth-child(5):last-child) > :first-child,
    .editorial-mosaic:has(> :nth-child(6):last-child) > :first-child,
    .editorial-mosaic:has(> :nth-child(7):last-child) > :first-child,
    .editorial-mosaic:has(> :nth-child(9):last-child) > :first-child {
      grid-column: 1 / -1;
    }
    .editorial-mosaic:has(> :nth-child(4):last-child) > :first-child,
    .editorial-mosaic:has(> :nth-child(8):last-child) > :first-child,
    .editorial-mosaic:has(> :nth-child(5):last-child) > :last-child {
      grid-column: span 4;
    }
    .editorial-mosaic:has(> :nth-child(4):last-child) > :nth-child(2),
    .editorial-mosaic:has(> :nth-child(8):last-child) > :nth-child(2),
    .editorial-mosaic:has(> :nth-child(5):last-child) > :nth-child(4),
    .editorial-mosaic:has(> :nth-child(6):last-child) > :nth-child(n + 4) {
      grid-column: span 2;
    }
  }

  /* Wide six-track recipes: five items = 4+2 / 4+2 / 2+4 in DOM order. */
  @media (min-width: 64rem) {
    .editorial-mosaic { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .editorial-mosaic > * { grid-column: span 2; }
    .editorial-mosaic:has(> :only-child) > * { grid-column: 1 / -1; }
    .editorial-mosaic:has(> :nth-child(2):last-child) > *,
    .editorial-mosaic:has(> :nth-child(4):last-child) > * { grid-column: span 3; }
    .editorial-mosaic:has(> :nth-child(3):last-child) > :first-child,
    .editorial-mosaic:has(> :nth-child(5):last-child) > :first-child,
    .editorial-mosaic:has(> :nth-child(6):last-child) > :first-child,
    .editorial-mosaic:has(> :nth-child(7):last-child) > :first-child,
    .editorial-mosaic:has(> :nth-child(8):last-child) > :first-child,
    .editorial-mosaic:has(> :nth-child(9):last-child) > :first-child {
      grid-column: span 4;
      grid-row: span 2;
    }
    .editorial-mosaic:has(> :nth-child(5):last-child) > :last-child { grid-column: span 4; }
    .editorial-mosaic:has(> :nth-child(7):last-child) > :nth-child(n + 4),
    .editorial-mosaic:has(> :nth-child(8):last-child) > :nth-child(n + 4):not(:last-child) {
      grid-column: span 3;
    }
    .editorial-mosaic:has(> :nth-child(8):last-child) > :last-child { grid-column: 1 / -1; }
  }
}