/* ============================================================
   Villa San Vigilio — PAGINA STORIA
   Figma 99:7219 (1920×4100). 1rem = 16px @1920.
   Accento: --c-terracotta #9a4431 · --c-cream #f1e7e5 · --c-wine #5a0028 (in tokens.css)
   ============================================================ */

/* ---------------- HEADER (override locale) ----------------
   Su Storia la nav sta sopra l'immagine scura + pannello terracotta:
   nel Figma il testo nav è chiaro (#d9d9d9 = --c-on-navy), non navy.
   Override SCOPED alla pagina (il componente condiviso resta navy altrove). */
body[data-page="storia"] .site-nav__link,
body[data-page="storia"] .nav-toggle-label { color: var(--c-on-navy); }


/* ---------------- 1. SPLIT-HERO ---------------- */
.storia-hero {
  position: relative;
  display: flex;
  min-height: 79.9375rem;          /* 1279px */
}

/* colonna immagine (sinistra) — 50% esatto e flush */
.storia-hero__media {
  position: relative;
  flex: 0 0 50%;
  max-width: 50%;
  overflow: hidden;
}
.storia-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.storia-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(22, 22, 22, 0.4);   /* Rectangle 14 */
  pointer-events: none;
}

/* colonna pannello terracotta (destra) — 50% esatto */
.storia-hero__panel {
  flex: 0 0 50%;
  max-width: 50%;
  background: var(--c-terracotta);
  position: relative;
}
.storia-hero__text {
  position: absolute;
  top: 13.875rem;                  /* y222 */
  left: 26.0625rem;                /* x1376 - 959 = 417px dentro il pannello */
  width: 31.5rem;                  /* 504px */
  font-size: var(--fs-lead);       /* 26px */
  line-height: var(--lh-body);     /* 1.46 */
  color: var(--c-white);
}

/* titolo "La Villa" — centrato sulla giunzione (centro pagina), bianco, 150px */
.storia-hero__title {
  position: absolute;
  top: 35.3125rem;                 /* y565 */
  left: 0;
  right: 0;
  margin: 0;
  font-family: var(--font-serif);
  font-size: calc((9.375rem) * var(--fs-scale));             /* 150px */
  font-weight: 400;
  line-height: var(--lh-tight);    /* 1.16 */
  color: var(--c-white);
  text-align: center;
  white-space: nowrap;
}

/* ---------------- 2. SEZIONE "I GIARDINI" (incorniciata) ---------------- */
.storia-gardens {
  background: var(--c-cream);
  padding-block: 2.1875rem 2.25rem;   /* 35px top (1314-1279) · 36px bottom (2459-2423) */
  padding-inline: 2.0625rem;          /* 33px — margine laterale cornice */
}
.storia-gardens__frame {
  position: relative;
  border: 1px solid var(--c-wine);    /* #5a0028 */
  border-radius: 5px;
  min-height: 69.3125rem;             /* 1109px (floor; con testo più alto la cornice cresce) */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: 8.75rem 7.75rem;     /* 140px sopra (apollo) · 124px sotto (respiro testo→bordo, come Figma) */
}
.storia-gardens__apollo {
  width: 27rem;                       /* 432px */
  height: 18.0625rem;                 /* 289px */
  object-fit: cover;
  border-radius: var(--radius);       /* 3px */
}
.storia-gardens__title {
  margin: 0;
  margin-top: 5.4375rem;              /* 87px (1830 - 1743 apollo-bottom) */
  font-family: var(--font-serif);
  font-size: calc((9.375rem) * var(--fs-scale));                /* 150px */
  font-weight: 400;
  line-height: var(--lh-tight);       /* 1.16 */
  color: var(--c-terracotta);
  text-align: center;
}
.storia-gardens__text {
  margin-top: 5.4375rem;              /* 87px (2071 - 1984 heading-bottom) */
  width: 81.625rem;                   /* 1306px */
  max-width: 100%;
  font-size: var(--fs-lead);          /* 26px */
  line-height: var(--lh-body);        /* 1.46 */
  color: var(--c-terracotta);
  text-align: center;
}
.storia-gardens__text p { margin: 0; }

/* ---------------- 3. IMMAGINE GIARDINO full-bleed ---------------- */
.storia-garden-photo {
  line-height: 0;
}
.storia-garden-photo__img {
  width: 100%;
  height: 79.875rem;                  /* 1278px */
  object-fit: cover;
  object-position: center;
}

/* ============================================================
   MOBILE (<=1024px) — reflow: no design Figma, curato a mano.
   Split-hero impilato · sezione singola colonna · immagini adattate.
   ============================================================ */
@media (max-width: 1024px) {

  /* split-hero -> impilato (immagine sopra, pannello sotto). Griglia invece di
     flex column: così il titolo può stare nella stessa cella della foto. */
  .storia-hero {
    display: grid;
    grid-template-columns: 100%;
    min-height: 0;
  }
  .storia-hero__media {
    grid-area: 1 / 1;
    max-width: 100%;
    width: 100%;
    aspect-ratio: 3 / 4;
    /* lascia spazio sotto l'header assoluto (banda ~109px scala a 4.5rem su mobile) */
    position: relative;
  }
  /* La scritta MENU è chiara e sta sopra questa foto. Sotto i 560px dietro c'è la
     montagna scura (7,1:1), ma fra 561 e 1024 il crop scopre il cielo grigio e il
     contrasto scende a 2,4:1 — sotto la soglia AA di 4,5 per il testo normale.
     Velatura sfumata sulla sola fascia alta. Non tocca l'inquadratura della foto.
     0,55 e non 0,45: a 0,45 il punto peggiore (1024px) si fermava a 4,49. */
  .storia-hero__media::after {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 9rem;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
    pointer-events: none;
  }
  .storia-hero__panel {
    grid-area: 2 / 1;
    max-width: 100%;
    width: 100%;
  }
  .storia-hero__text {
    position: static;
    width: auto;
    top: auto; left: auto;
    padding: 2.5rem 1.5rem 3rem;
    font-size: 1.05rem;
  }
  /* titolo in fondo alla FOTO: nella sua stessa cella di griglia (prima finiva
     in fondo alla sezione, cioè sopra il testo del pannello) */
  .storia-hero__title {
    position: static;
    grid-area: 1 / 1;
    align-self: end;
    z-index: 2;
    padding-bottom: 1.5rem;
    font-size: clamp(3rem, 16vw, 5rem);
    white-space: normal;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
  }

  /* sezione Giardini */
  .storia-gardens {
    padding-inline: 1rem;
    padding-block: 1.5rem;
  }
  .storia-gardens__frame {
    min-height: 0;
    padding: 2.5rem 1.25rem 3rem;
  }
  .storia-gardens__apollo {
    width: 100%;
    max-width: 22rem;
    height: auto;
    aspect-ratio: 432 / 289;
  }
  .storia-gardens__title {
    margin-top: 2rem;
    font-size: clamp(2.75rem, 13vw, 5rem);
  }
  .storia-gardens__text {
    margin-top: 2rem;
    width: 100%;
    font-size: 1.05rem;
  }
  .storia-gardens__text p + p { margin-top: 1em; }

  /* giardino full-bleed */
  .storia-garden-photo__img {
    height: auto;
    aspect-ratio: 3 / 2;
  }
}

@media (max-width: 560px) {
  .storia-hero__media { aspect-ratio: 4 / 5; }
  .storia-hero__title { font-size: clamp(2.5rem, 15vw, 4rem); }
}