/* ============================================================
   Villa San Vigilio — HOMEPAGE (page-home.css)
   Pixel-perfect @1920. Token/container/componenti condivisi = base.css/tokens.css/components.css.
   Misure: px Figma / 16 = rem (1rem = 16px @1920). Nodo Figma 99:7111.
   ============================================================ */

/* Sfondo pagina sotto l'hero = sky */
body[data-page="home"] { background: var(--c-sky); }

/* ---------------- 1. HERO (box 1920x1279 full-bleed) ---------------- */
.home-hero {
  position: relative;
  height: 79.9375rem;              /* 1279px */
  height: min(79.9375rem, 100svh); /* non supera mai il viewport → la freccia resta sempre dentro */
  overflow: hidden;
}
.home-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* blocco titolo+anno: ancorato al top del Figma (titolo y346) e centrato in orizzontale */
.home-hero__inner {
  position: absolute;
  top: 21.625rem;                  /* 346px — top del titolo */
  left: 50%;
  transform: translateX(-50%);
  width: 85.6875rem;               /* 1371px */
  max-width: calc(100% - (2 * var(--gutter)));
  text-align: center;
  z-index: 2;
}
.home-hero__title {
  font-family: var(--font-serif);
  font-size: var(--fs-hero);       /* 180px */
  font-weight: 400;
  line-height: var(--lh-tight);    /* 1.16 */
  color: var(--c-navy);
  margin: 0;
}
.home-hero__year {
  font-family: var(--font-serif);
  font-size: var(--fs-1520);       /* 80px */
  font-weight: 400;
  line-height: var(--lh-tight);    /* 1.16 */
  color: var(--c-blue-deep);
  margin: 0;
  /* Figma: anno top y545. La line-height 1.16 del titolo (180px) gonfia il box:
     compensata con margin negativo per portare l'anno a y545 (misurato). */
  margin-top: -0.6125rem;          /* -9.8px */
}
/* emblema/scroll indicator: 109px, cliccabile (scroll all'intro), alzato dal bordo (feedback cliente) */
html { scroll-behavior: smooth; }
@keyframes vsv-emblem-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(0.5rem); }
}
.home-hero__emblem {
  position: absolute;
  bottom: 4rem;                    /* ancorata al fondo del viewport: sempre visibile, mai tagliata */
  top: auto;
  left: 50%;
  transform: translateX(-50%);
  width: 6.8125rem;                /* 109px */
  height: 6.8125rem;
  z-index: 2;
  display: block;
  cursor: pointer;
  transition: opacity .2s ease;
  animation: vsv-emblem-bob 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .home-hero__emblem { animation: none; }
}
.home-hero__emblem:hover { opacity: .7; }
.home-hero__emblem img { display: block; width: 100%; height: 100%; }

/* ---------------- 2. INTRO (bg sky) ---------------- */
.home-intro {
  background: var(--c-sky);
  text-align: center;
  padding-top: 6.8125rem;          /* 109px: fine hero(1279) -> crest top(1388) */
  /* Figma gap testo->colonnato = 170px. Bodoni Moda rende il testo ~1 riga piu' alto
     del Bodoni 72 del Figma (8 righe vs 7): compenso -37.6px cosi' il colonnato resta a y2209. */
  padding-bottom: 8.27rem;         /* ~132.4px (170 - 37.6) */
}
.home-intro__crest {
  width: 16.4375rem;               /* 263px */
  height: 16.4375rem;
  margin: 0 auto;
}
.home-intro__text {
  font-family: var(--font-serif);
  font-size: var(--fs-lead);       /* 26px */
  font-weight: 400;
  line-height: var(--lh-body);     /* 1.46 */
  color: var(--c-navy);
  width: 85.6875rem;               /* 1371px */
  max-width: calc(100% - (2 * var(--gutter)));
  margin: 0 auto;
  margin-top: 7.625rem;            /* 122px: crest bottom(1651) -> testo top(1773) */
}

/* ---------------- 3. COLONNATO (box 1919x1282 full-bleed, radius 3px) ---------------- */
.home-colonnato { line-height: 0; }
.home-colonnato__img {
  width: 100%;
  height: 80.125rem;               /* 1282px */
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius);    /* 3px */
}

/* ---------------- 4. CIELO + NAV-LIST (box 1919x1155, attaccato, gap 0) ---------------- */
.home-explore {
  position: relative;
  height: 72.1875rem;              /* 1155px */
  overflow: hidden;
}
.home-explore__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;     /* immagine portrait scalata h~208% allineata in alto */
}
/* navlist: box Figma y3889-4249 (h360), centro y4069. Img explore top 3491.
   top navlist dentro l'img = 3889 - 3491 = 398px. */
.home-explore__nav {
  position: absolute;
  left: 50%;
  top: 24.875rem;                  /* 398px */
  transform: translateX(-50%);
  z-index: 2;
}

/* ============================================================
   MOBILE reflow (<=1024px) — nessun design Figma: singola colonna, no overflow.
   ============================================================ */
@media (max-width: 1024px) {
  .home-hero {
    height: auto;
    /* 90vh e il fallback per i browser senza svh (iOS <=15.3, Chrome <=107):
       si avvicina al pieno schermo senza spingere la freccia sotto la piega,
       come farebbe 100vh dove vh = viewport con le barre ritratte. */
    min-height: 90vh;
    min-height: 100svh;              /* foto a tutta pagina entrando nel sito */
  }
  .home-hero__inner {
    position: static;
    transform: none;
    left: auto;
    width: 100%;
    max-width: 100%;
    padding: 0 1.5rem;
    /* 32% dell'altezza dell'hero: stessa unita' (svh) di min-height, cosi' il
       titolo resta a un terzo della foto su ogni telefono. NON usare dvh:
       ridimensionerebbe hero e freccia mentre la barra url si ritrae. */
    padding-top: 32vh;
    padding-top: 32svh;
  }
  .home-hero {
    display: flex;
    flex-direction: column;
  }
  .home-hero__title { font-size: clamp(2.75rem, 13vw, 4rem); }
  .home-hero__year  { font-size: clamp(1.5rem, 7vw, 2.25rem); margin-top: 1rem; }
  .home-hero__emblem {
    position: absolute;
    top: auto;
    bottom: 2.5rem;
    width: 3.75rem;
    height: 3.75rem;
  }
  /* telefono in orizzontale: l'hero e alto ~330px e la freccia arriverebbe
     sull'anno. Rimpicciolita e avvicinata al bordo resta sotto il "1520". */
  @media (max-height: 480px) {
    .home-hero__emblem { bottom: 1rem; width: 2.5rem; height: 2.5rem; }
  }

  .home-intro {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
  .home-intro__crest { width: 8rem; height: 8rem; }
  .home-intro__text {
    width: 100%;
    max-width: 100%;
    padding: 0 1.5rem;
    margin-top: 2rem;
    font-size: 1.0625rem;          /* 17px comodo su mobile */
  }

  .home-colonnato__img { height: 60vw; min-height: 220px; }

  /* la foto è chiara solo nella metà alta (sotto c'è la siepe scura): la fascia
     resta più bassa della foto così ne mostra solo la parte chiara e i link
     restano leggibili */
  .home-explore {
    height: auto;
    min-height: 0;
    aspect-ratio: 10 / 6.25;
    max-height: 62vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .home-explore__nav {
    position: static;
    transform: none;
    left: auto;
    top: auto;
    padding: 1rem 1.5rem;
  }
  .home-explore__nav .navlist__link { font-size: clamp(1rem, 5.2vw, 2.25rem); }
}