/* ============================================================
   FESTIVAL DEL LIBRO Y LA CULTURA DOMINICANA
   Hero — "media wall" variant (recap-as-hero)
   ------------------------------------------------------------
   The first fold is the recap: past-edition photos/videos drift
   upward in counter-moving columns, a deep Azul-900 veil holds
   the type at AA contrast, and the headline + next-edition date
   + CTAs sit on top. The photographs are the decoration; nothing
   is layered over them that they do not already say.

   Layer order (local z-scale, no arbitrary values):
     0 wall media · 1 veil · 2 copy
   Motion is CSS-only and additive: with JS off, or under
   prefers-reduced-motion, the wall renders as a static mosaic
   and every word is already visible.
   ============================================================ */

.hero--wall {
  --wall-gap: clamp(8px, 1.1vw, 16px);
  --z-wall: 0;
  --z-veil: 1;
  --z-copy: 2;

  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--azul-900);
  color: #fff;
  /* Top clears the fixed nav. */
  padding: clamp(104px, 13vh, 142px) 0 clamp(78px, 10vh, 104px);
  overflow: clip;
  isolation: isolate;
}

/* ---------- 0 · the wall ---------- */
.hero__wall {
  position: absolute;
  /* Overscan: columns drift, so their ends must never enter frame. */
  inset: -8% -2%;
  z-index: var(--z-wall);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--wall-gap);
  pointer-events: none;
  animation: wall-settle 1.15s cubic-bezier(.16, 1, .3, 1) both;
}
@media (min-width: 700px)  { .hero__wall { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1300px) { .hero__wall { grid-template-columns: repeat(4, 1fr); } }

/* Narrow viewports show fewer columns; the extra ones are dropped rather
   than squeezed, so tiles keep a photographic size instead of turning
   into confetti. Their images are lazy, so nothing is paid for twice. */
.hero__wall-col:nth-child(3) { display: none; }
.hero__wall-col:nth-child(4) { display: none; }
@media (min-width: 700px)  { .hero__wall-col:nth-child(3) { display: flex; } }
@media (min-width: 1300px) { .hero__wall-col:nth-child(4) { display: flex; } }

.hero__wall-col {
  display: flex;
  flex-direction: column;
  gap: var(--wall-gap);
  animation: wall-drift var(--dur, 60s) linear infinite;
  will-change: transform;
}
/* The tile set is rendered twice; translating by half the column plus half a
   gap lands the loop exactly on the duplicate, so the seam is invisible. */
@keyframes wall-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, calc(-50% - (var(--wall-gap) / 2)), 0); }
}
@keyframes wall-settle {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 1; transform: scale(1); }
}

.hero__tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  aspect-ratio: 4 / 5;
  flex: none;
  background: color-mix(in srgb, var(--azul-700) 55%, #000);
}
/* Uneven ratios so the wall reads as a mosaic of moments, not a card grid. */
.hero__tile:nth-child(3n + 2) { aspect-ratio: 1 / 1; }
.hero__tile:nth-child(4n + 3) { aspect-ratio: 3 / 4; }
.hero__tile > img,
.hero__tile > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.04) brightness(.94);
}

/* ---------- 1 · the veil ----------
   Two stacked gradients. Behind the copy the combined alpha is ~.84, which
   keeps white text at 6.3:1 even over a pure-white photo; toward the edges
   it drops to ~.40 so the photographs stay legible as photographs. */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: var(--z-veil);
  pointer-events: none;
  background:
    radial-gradient(96% 86% at 34% 52%,
      rgba(2, 55, 107, .80) 0%,
      rgba(2, 55, 107, .72) 40%,
      rgba(2, 55, 107, .46) 68%,
      rgba(2, 55, 107, .28) 100%),
    linear-gradient(180deg,
      rgba(2, 55, 107, .58) 0%,
      rgba(2, 55, 107, .18) 30%,
      rgba(2, 55, 107, .16) 58%,
      rgba(2, 55, 107, .74) 100%);
}

/* ---------- 2 · the copy ---------- */
/* Split fold: the words on the left, the bloom re-assembling on the right,
   both over the drifting photographs. .hero__grid carries the columns. */
.hero__wallin {
  position: relative;
  z-index: var(--z-copy);
  width: 100%;
  /* Flex children floor at min-content; the organiser lockup is ~500px wide
     intrinsically and would push the copy column past a 390px viewport. */
  min-width: 0;
}
.hero__say { min-width: 0; }
.hero__wall-title {
  margin: 0;
  font-size: clamp(2.8rem, 7vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -.022em;
  color: #fff;
  text-wrap: balance;
}
.hero__wall-title em {
  font-style: italic;
  font-weight: 500;
  /* Amarillo Festivo carries the flourish word — 8.5:1 on the veil. */
  color: var(--amarillo);
}
.hero__wall-lead {
  margin: 18px 0 0;
  max-width: 46ch;
  /* Light type on dark reads lighter; give it more room to breathe. */
  line-height: 1.7;
  color: color-mix(in srgb, #fff 88%, var(--azul-200));
  text-wrap: pretty;
}

/* The ledger: 2026 closed, 2027 dated. A definition list because that is
   what it is — a year and its state. The past row is dimmed and the next row
   is at full strength, so the state change is legible before it is read. */
.hero__ledger {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  align-items: baseline;
  margin: 26px 0 0;
  font-family: var(--font-brand);
  font-size: 15px;
}
.hero__ledger-k {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .5);
  font-variant-numeric: tabular-nums;
}
.hero__ledger-v {
  margin: 0;
  font-weight: 600;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}
/* The closed edition: stated, not shouted. */
.hero__ledger-v--past { font-weight: 500; color: rgba(255, 255, 255, .62); }
.hero__ledger .hero__when-date { color: var(--amarillo); }
.hero__where { color: color-mix(in srgb, #fff 76%, var(--azul-200)); font-weight: 500; }
@media (max-width: 480px) {
  .hero__ledger { font-size: 14px; gap: 4px 12px; }
}

.hero__cta--wall { justify-content: flex-start; margin-top: 30px; }
/* On a dark photographic field the brand blue loses its edge, so the primary
   action goes white and reserves Amarillo for the hover flourish. */
.hero--wall .btn-primary {
  background: #fff;
  color: var(--azul-900);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
}
.hero--wall .btn-primary:hover,
.hero--wall .btn-primary:focus-visible {
  background: var(--amarillo);
  color: var(--azul-900);
}
.hero--wall .btn-secondary {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .5);
  color: #fff;
}
.hero--wall .btn-secondary:hover,
.hero--wall .btn-secondary:focus-visible {
  background: rgba(255, 255, 255, .2);
  color: #fff;
}

/* ---------- responsive ---------- */
/* Most traffic lands here from Instagram, so the whole proposition — dates,
   venue and both CTAs — has to survive one 844px-tall phone screen. Every
   value below is bought back from vertical rhythm, not from content. */
@media (max-width: 700px) {
  .hero--wall { padding: clamp(96px, 12vh, 118px) 0 clamp(72px, 9vh, 92px); }
  .hero__wall-title { font-size: clamp(2.5rem, 11vw, 3.2rem); }
  .hero__wall-lead {
    margin-top: 16px;
    max-width: 34ch;
    font-size: 1rem;
    line-height: 1.6;
  }
  .hero__ledger { margin-top: 20px; }
  .hero__cta--wall { margin-top: 22px; gap: 10px; }
  /* Trimmed pills so both actions sit on one row at 390px instead of stacking. */
  .hero--wall .btn { padding: 13px 18px; font-size: 14px; }

}

/* ---------- reduced motion / no-anim ----------
   Content is never gated on the animation, so switching it all off leaves a
   complete, legible static mosaic. */
@media (prefers-reduced-motion: reduce) {
  .hero__wall,
  .hero__wall-col { animation: none !important; }
  .hero__wall { opacity: 1; transform: none; }
}
.no-anim .hero__wall,
.no-anim .hero__wall-col { animation: none !important; }
.no-anim .hero__wall { opacity: 1; transform: none; }