/* ============================================================
   Villa San Vigilio — PAGINA CULTURA
   Figma 99:7312 (1920×2516). 1rem = 16px @1920.
   Fondo: --c-forest-bg #d9d7cb (verde-grigio chiaro) · Testo/heading/festival/nav: --c-forest #2a3224
   Tutti i blocchi di testo sono CENTRATI nel container (text-align:center).
   Solo l'immagine e' full-bleed. Nessun position:absolute: blocchi in flusso centrati.
   ============================================================ */

/* fondo pagina verde-grigio chiaro (scoped al body, non tocca il resto del sito) */
body[data-page="cultura"] { background: var(--c-forest-bg); }

/* ---------------- HEADER (override locale) ----------------
   Nav sopra il fondo salvia: nel Figma il testo nav e' verde scuro #2a3224.
   Override SCOPED alla pagina (il componente condiviso resta navy altrove). */
body[data-page="cultura"] .site-nav__link,
body[data-page="cultura"] .nav-toggle-label { color: var(--c-forest); }

/* ============================================================
   1. HEADING "Cultura" — x300 y181 w1320 h190, Bodoni 130px, CENTER, forest.
   Blocco centrato nel container: x300 = (1920-1320)/2 → margin auto + width 1320.
   Il main parte a y0; l'header (banda 109px) e' absolute e si sovrappone.
   ============================================================ */
.cultura-intro__title {
  margin: 0 auto;
  width: 82.5rem;                      /* 1320px */
  max-width: 100%;
  padding-top: 11.3125rem;             /* y181 assoluto (contenuto sotto la nav absolute) */
  font-family: var(--font-serif);
  font-size: calc((8.125rem) * var(--fs-scale));                 /* 130px */
  font-weight: 400;
  line-height: var(--lh-body);         /* 1.46 (dal design_context) */
  text-align: center;
  color: var(--c-forest);
}

/* ============================================================
   2. INTRO — x352 y443 w1217 h175, Bodoni 24px, CENTER, forest, 2 paragrafi.
   Blocco centrato: x352 ≈ (1920-1217)/2. Gap heading-bottom(371)→intro(443) = 72.
   ============================================================ */
.cultura-intro__lead {
  margin: 0 auto;
  width: 76.0625rem;                   /* 1217px */
  max-width: 100%;
  margin-top: 4.5rem;                  /* 72px: gap dal bottom del heading */
  font-family: var(--font-serif);
  font-size: calc((1.5rem) * var(--fs-scale));                   /* 24px (dal design_context, NON 26) */
  font-weight: 400;
  line-height: var(--lh-body);         /* 1.46 */
  text-align: center;
  color: var(--c-forest);
}
.cultura-intro__lead p { margin: 0; }

/* ============================================================
   3. FESTIVAL A SCORRIMENTO (card-stack, come le foto in home).
   Ogni festival = foto full-bleed (Figma 1920×1080) + didascalia CENTRATA sotto
   (Bodoni Medium 24px, forest; 3 righe: titolo upper · data upper · link lowercase;
   gap foto→testo 60px come nel Figma). Le card sono sticky top:0 su fondo opaco:
   scrollando la successiva sale dal basso e copre la precedente.
   ============================================================ */
.cultura-festivals {
  position: relative;
  margin-top: 8.25rem;                 /* 132px: gap dal bottom dell'intro (come la vecchia foto) */
  background: var(--c-forest-bg);
  --festival-ratio: 16 / 9;            /* box foto del Figma: 1920×1080 */
  --festival-caption-space: 14rem;     /* spazio sotto la foto: gap 60px + didascalia fino a 4 righe */
}
.festival-card {
  position: sticky;
  top: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--c-forest-bg);      /* opaco: copre la card precedente salendo */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.festival-card__inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.festival-card__img {
  /* Il box tiene il ratio del Figma e si restringe quanto serve per stare nel viewport
     insieme alla didascalia: cosi la foto si vede intera invece di essere tagliata sopra e sotto. */
  aspect-ratio: var(--festival-ratio);
  width: min(100%, calc((100svh - var(--festival-caption-space)) * var(--festival-ratio)));
  height: auto;
  margin-inline: auto;
  object-fit: cover;
  object-position: center top;         /* i fill del Figma sono ancorati in alto */
  display: block;
}
.festival-card__caption {
  margin: 0 auto;
  width: 37.125rem;                    /* 594px */
  max-width: 100%;
  padding-top: 3.75rem;                /* 60px: gap foto→testo (Figma) */
  padding-inline: var(--gutter);
  font-family: var(--font-serif);
  font-size: calc((1.5rem) * var(--fs-scale));                   /* 24px */
  font-weight: 500;                    /* Bodoni Moda Medium */
  line-height: var(--lh-body);         /* 1.46 */
  text-align: center;
  color: var(--c-forest);
}
.festival-card__name,
.festival-card__when,
.festival-card__link {
  display: block;
}
.festival-card__name,
.festival-card__when {
  text-transform: uppercase;           /* estetica festival (transform, non contenuto) */
}
.festival-card__link {
  text-transform: none;
  word-break: break-word;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: from-font;
}
.festival-card__link:hover { opacity: .65; }

/* ============================================================
   MOBILE (<=1024px) — reflow: singola colonna, no design Figma.
   Heading e intro impilati e comodi · immagine adattata al ratio nativo · festival centrato.
   ============================================================ */
@media (max-width: 1024px) {

  .cultura-intro__title {
    width: auto;
    padding-top: 6.5rem;               /* spazio sotto header assoluto */
    font-size: clamp(3rem, 13vw, 6rem);
  }
  .cultura-intro__lead {
    width: auto;
    margin-top: 1.5rem;
    max-width: 44rem;
    font-size: 1.05rem;
  }
  .cultura-intro__lead p + p { margin-top: 1rem; }

  /* Festival: niente sticky su mobile → flusso normale, foto a ratio nativo, didascalia sotto. */
  .cultura-festivals {
    margin-top: 2.5rem;
  }
  .festival-card {
    position: static;
    min-height: 0;
    padding-block: 1.5rem 3rem;
  }
  .festival-card__img {
    width: 100%;                       /* niente sticky qui: la foto non deve stare in un viewport */
  }
  .festival-card__caption {
    width: auto;
    max-width: 32rem;
    padding-top: 2rem;
    font-size: 1.05rem;
  }
}