/* ============================================================
   Villa San Vigilio — PAGINA MATRIMONI ED EVENTI
   Figma 99:7264 (1920×1642). 1rem = 16px @1920.
   Layout: immagine a sinistra piena altezza (956×1280) + pannello destro
   rosa cipria (--c-blush #fae7e8) con heading/testi rosa antico (--c-rosewood #b05e5f).
   ============================================================ */

/* ---------------- HERO: 2 colonne full-bleed ----------------
   Colonna sx = immagine 956px. Colonna dx = pannello colorato (resto).
   Altezza fissa 1280px (Figma). Sfora il container di proposito (full-bleed). */
/* Le proporzioni orizzontali sono in PERCENTUALE, non in rem: la scala tipografica
   (--fs-scale, /140) rimpicciolisce il testo ma il pannello resta largo quanto il viewport,
   quindi con misure in rem il testo occupava il 60% del pannello invece dell'80% del Figma
   (e sui monitor larghi scendeva al 37%). In % le proporzioni del Figma tengono a ogni larghezza. */
.mat-hero {
  --mat-inset-left: 15.8714%;            /* 153/964: x1109 dal bordo del pannello */
  --mat-inset-right: 4.1494%;            /* 40/964: gutter destro come il container */
  display: grid;
  grid-template-columns: 49.7917% 50.2083%;  /* 956 | 964 su frame 1920 */
  height: 80rem;                          /* 1280px */
  background: var(--c-blush);             /* pannello destro (copre eventuale gap) */
}

/* --- colonna sinistra: immagine --- */
.mat-hero__media {
  overflow: hidden;
  line-height: 0;
}
.mat-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* --- colonna destra: pannello rosa cipria --- */
.mat-hero__panel {
  position: relative;
  background: var(--c-blush);
}
/* Contenuto ancorato ai TOP assoluti del Figma.
   Il pannello parte a x956; il testo Figma a x1109 -> offset sx 153px = 9.5625rem.
   Il bordo destro del contenuto si allinea al gutter del container (x1880 = 40px dal frame):
   dal bordo destro del pannello (x1920) sono 40px = 2.5rem. */
.mat-hero__content {
  position: absolute;
  inset: 0;
  padding-left: var(--mat-inset-left);
  padding-right: var(--mat-inset-right);
}

/* H1 "Matrimoni ed Eventi" — x1109 y280 w766, Bodoni 130px, LH 0.95, rosewood */
.mat-hero__title {
  position: absolute;
  top: 17.5rem;               /* y280 */
  left: var(--mat-inset-left);
  width: 79.4606%;            /* 766/964 del pannello */
  margin: 0;
  font-family: var(--font-serif);
  font-size: calc((8.125rem) * var(--fs-scale));        /* 130px */
  font-weight: 400;
  line-height: 0.95;
  color: var(--c-rosewood);
}

/* Testo intro — x1109 y580 w775, 26px, LH 1.46, rosewood */
.mat-hero__intro {
  position: absolute;
  top: 36.25rem;              /* y580 */
  left: var(--mat-inset-left);
  width: 80.3942%;            /* 775/964 */
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-lead);  /* 26px */
  font-weight: 400;
  line-height: var(--lh-body);/* 1.46 */
  color: var(--c-rosewood);
}

/* H2 "Gli Spazi" — x1109 y895 w438, Bodoni 130px, LH 0.95, rosewood.
   Su UNA riga come nel Figma (nowrap: il sostituto Bodoni Moda rende più largo del box 438). */
.mat-hero__subtitle {
  position: absolute;
  top: 55.9375rem;            /* y895 */
  left: var(--mat-inset-left);
  width: 45.4357%;            /* 438/964 */
  margin: 0;
  font-family: var(--font-serif);
  font-size: calc((8.125rem) * var(--fs-scale));        /* 130px */
  font-weight: 400;
  line-height: 0.95;
  color: var(--c-rosewood);
  white-space: nowrap;
}

/* Testo "Gli Spazi" — x1109 y1106 w769, 26px, LH 1.46, rosewood (2 frasi) */
.mat-hero__body {
  position: absolute;
  top: 69.125rem;             /* y1106 */
  left: var(--mat-inset-left);
  width: 79.7718%;            /* 769/964 */
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-lead);  /* 26px */
  font-weight: 400;
  line-height: var(--lh-body);/* 1.46 */
  color: var(--c-rosewood);
}

/* ---------------- HEADER (override locale) ----------------
   Nav in banda 109px, a cavallo: sopra l'immagine scura (sx) = testo chiaro,
   sopra il pannello rosa (dx) = testo rosewood.
   Header condiviso 6 link, "matrimoni" omesso -> 5 colonne 1fr (384px cad.):
   il terzo link cade ESATTAMENTE sul confine, quindi non basta colorarlo per intero.
   Fallback per browser senza background-clip: colore per singolo link. */
body[data-page="matrimoni"] .site-nav__link { color: var(--c-rosewood); }
body[data-page="matrimoni"] .site-nav__link[data-page="home"],
body[data-page="matrimoni"] .site-nav__link[data-page="storia"] { color: var(--c-blush); }

/* Il testo della nav viene dipinto con lo stesso taglio del layout: chiaro fino al confine
   dell'immagine, rosewood dopo. Cosi il link a cavallo cambia colore a meta parola e resta
   leggibile su entrambi i fondi, a qualsiasi larghezza.
   SOLO da desktop: sotto i 1024px la nav diventa il pannello dell'hamburger e il
   background-clip:text renderebbe trasparente il suo fondo (link illeggibili sulla foto). */
@media (min-width: 1025px) {
  @supports (-webkit-background-clip: text) or (background-clip: text) {
    body[data-page="matrimoni"] .site-nav__list {
      background-image: linear-gradient(
        to right,
        var(--c-blush) 0 49.7917%,
        var(--c-rosewood) 49.7917% 100%
      );
      -webkit-background-clip: text;
      background-clip: text;
    }
    body[data-page="matrimoni"] .site-nav__link,
    body[data-page="matrimoni"] .site-nav__link[data-page="home"],
    body[data-page="matrimoni"] .site-nav__link[data-page="storia"] { color: transparent; }
  }
}

/* ============================================================
   MOBILE (<=1024px) — reflow: immagine sopra, contenuto sotto, singola colonna.
   Niente design Figma per il mobile: leggibile e comodo, no overflow.
   ============================================================ */
@media (max-width: 1024px) {
  .mat-hero {
    display: block;
    height: auto;
    background: var(--c-blush);
  }
  .mat-hero__media {
    width: 100%;
    aspect-ratio: 956 / 1080;   /* portrait accorciato per il mobile */
  }
  .mat-hero__panel { position: static; }

  /* contenuto: da absolute a flusso normale, dentro un padding comodo */
  .mat-hero__content {
    position: static;
    inset: auto;
    padding: 3rem var(--gutter) 3.5rem;
  }
  .mat-hero__title,
  .mat-hero__intro,
  .mat-hero__subtitle,
  .mat-hero__body {
    position: static;
    left: auto; top: auto;
    width: auto;
  }
  .mat-hero__title {
    font-size: clamp(3rem, 13vw, 6rem);
    margin-bottom: 1.75rem;
  }
  .mat-hero__intro {
    font-size: 1.05rem;
    max-width: 40rem;
    margin-bottom: 2.75rem;
  }
  .mat-hero__subtitle {
    font-size: clamp(2.6rem, 11vw, 5rem);
    margin-bottom: 1.5rem;
  }
  .mat-hero__body {
    font-size: 1.05rem;
    max-width: 40rem;
  }

  /* mobile: la nav sta sopra l'immagine scura (in cima) -> tutta chiara.
     (l'hamburger apre un pannello --c-sky dal components.css, che riporta i link a navy) */
  body[data-page="matrimoni"] .site-nav__link,
  body[data-page="matrimoni"] .site-nav__link[data-page="home"],
  body[data-page="matrimoni"] .site-nav__link[data-page="storia"] { color: var(--c-blush); }
  body[data-page="matrimoni"] .nav-toggle-label { color: var(--c-blush); }
}