/* =========================================================================
   Hero della landing: incavo in fondo, il bottone "esce" dall'immagine.

   Nato come variante "V3" e diventato l'unica versione in produzione. Resta
   un file a parte perché è tutto ciò che distingue questa hero da quella
   messa da parte in archive/hero-v1.html: se un giorno si farà un A/B test,
   la differenza è qui dentro e non sparsa in styles.css.
   ========================================================================= */

:root { --notch-r: 38px; }   /* raggio dei raccordi concavi */

/* il blocco di testo lascia spazio all'incavo, senza esagerare */
.hero { min-height: calc(100vh - var(--hero-offset, var(--header-h)));
        min-height: calc(100dvh - var(--hero-offset, var(--header-h))); }
.hero .hero__inner { padding-bottom: clamp(6.5rem, 12vw, 9rem); }

/* ---------- il blocco in fondo: promessa + sagoma col bottone ----------
   Ancorato in basso al centro. La promessa resta SULLA foto, la sagoma
   sotto di lei mangia il bordo dell'immagine. */
.hero__bottom {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  z-index: 4;
  display: flex; flex-direction: column; align-items: center;
  width: max-content; max-width: calc(100% - 2rem);
}

/* ---------- la sagoma ---------- */
.hero__notch {
  position: relative;                /* la posizione la dà .hero__bottom */
  background: var(--cream);          /* stesso colore della sezione sotto */
  /* l'aria sotto stacca il bottone dal bordo dello schermo: la parte
     di crema sotto si fonde con la sezione seguente, quindi non si vede */
  padding: 13px 15px 17px;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
}

/* raccordi concavi: fanno leggere la sagoma come scavata nella foto */
.hero__notch::before,
.hero__notch::after {
  content: ""; position: absolute; bottom: 0;
  width: var(--notch-r); height: var(--notch-r);
}
.hero__notch::before {
  left: calc(var(--notch-r) * -1);
  background: radial-gradient(circle at 0 0,
    transparent var(--notch-r), var(--cream) calc(var(--notch-r) + 0.5px));
}
.hero__notch::after {
  right: calc(var(--notch-r) * -1);
  background: radial-gradient(circle at 100% 0,
    transparent var(--notch-r), var(--cream) calc(var(--notch-r) + 0.5px));
}

/* ---------- il bottone: 15% più grande della V1 ----------
   Corpo, imbottitura e larghezza minima cresciuti tutti della stessa
   quantità, altrimenti il bottone si deforma invece di ingrandirsi. */
.hero__notch .btn--outline {
  background: var(--cypress);
  border: 1.5px solid rgba(20, 13, 2, 0.35);   /* stesso bordo degli altri .btn */
  border-radius: 14px;                          /* +15% anche il raggio */
  padding: 1.035rem 3.9rem;
  min-width: 414px;
  color: #fff;
  font-size: 1.17rem;
  line-height: 1.15;
  backdrop-filter: none;
  box-shadow: var(--shadow-sm);
}
.hero__notch .btn--outline:hover {
  background: var(--cypress-dark);
  color: #fff;
  transform: translateY(-2px) scale(1.045);
  box-shadow: var(--shadow-md);
}

@media (max-width: 560px) {
  :root { --notch-r: 20px; }
  .hero__bottom { max-width: calc(100% - 1.5rem); width: 100%; }
  .hero__notch { padding: 10px 12px 0; width: 100%; }
  .hero__notch .btn--outline { width: 100%; min-width: 0; padding: 0.92rem 1.2rem; font-size: 1.05rem; }
}

/* Il sottotitolo va a capo dove diciamo noi: con Playfair a 21px i 680px
   della V1 lo spezzavano in tre righe invece delle due volute. */
.hero .hero__sub { max-width: 900px; }
.hero .hero__sub br { display: block; }
@media (max-width: 940px) { .hero .hero__sub br { display: none; } }

/* =========================================================================
   Titolo dell'hero in calligrafico (Pinyon Script)
   Il corsivo ha tratto sottile e altezza-x bassa: serve un corpo molto più
   grande del serif, interlinea stretta e un'ombra più marcata per reggere
   sulla foto.
   ========================================================================= */
.hero h1 {
  font-family: "Pinyon Script", cursive;
  font-weight: 400;
  font-size: clamp(2.7rem, 7.2vw, 5.4rem);
  line-height: 1.04;
  max-width: 22ch;
  text-shadow: 0 3px 32px rgba(0, 0, 0, 0.5);
  margin-bottom: 1.4rem;
}
.hero h1 span { display: block; }

/* =========================================================================
   Due soli caratteri nella hero: Pinyon Script per il titolo, Playfair
   Display per TUTTO il resto. Niente Poppins qui dentro.

   Playfair ha grazie sottili: su una foto, a corpo piccolo, si sfilaccia.
   Perciò il testo cresce, il peso sale a 500 (il più leggero caricato) e
   l'ombra diventa un alone che stacca le lettere dallo sfondo invece di
   limitarsi a scurirle.
   ========================================================================= */
.hero .hero__sub,
.hero .trust-bar__text,
.hero .hero__benefit {
  font-family: var(--font-head);
}

.hero .hero__sub {
  font-weight: 500;
  font-size: clamp(1.1rem, 1.75vw, 1.35rem);
  line-height: 1.5;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.55), 0 4px 22px rgba(0, 0, 0, 0.7);
}
.hero .trust-bar__text {
  font-weight: 500;
  font-size: clamp(0.95rem, 1.25vw, 1.05rem);
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.55), 0 4px 18px rgba(0, 0, 0, 0.65);
}
.hero .trust-bar__text strong { font-weight: 700; }

/* La promessa sta sulla foto, appena sopra il bottone: è l'ultima cosa che
   si legge prima di cliccare, quindi va vista, non intuita. */
.hero__bottom .hero__benefit {
  font-weight: 500; font-style: normal;
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  color: #fff;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6), 0 4px 20px rgba(0, 0, 0, 0.7);
  margin: 0 0 0.95rem;
  text-align: center;
}

/* =========================================================================
   Testo ancorato ai punti della foto

   Sul Balbianello la villa sta in mezzo e il rumore è tutto lì: tetti,
   terrazze, cipressi. Sopra c'è il cielo, sotto il lago, entrambi lisci.
   Quindi il titolo sale fino a chiudere sul profilo della villa, e il
   sottotitolo scende sotto il promontorio, sull'acqua.

   Le due quote arrivano da js/hero.js, che le ricalcola a ogni resize
   perché il ritaglio di object-fit: cover cambia con la finestra.
   ========================================================================= */
/* .hero__inner torna STATICO: è un flex item alto 0, quindi ancorarci sopra
   i due blocchi li mandava fuori schermo. Così si ancorano alla hero, che è
   l'unico riquadro con l'altezza giusta. */
.hero--ancorata .hero__inner {
  position: static;
  padding: 0;
  display: block;
}
.hero--ancorata .hero__top,
.hero--ancorata .hero__mid {
  position: absolute; z-index: 2;
  left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--container);
  padding: 0 clamp(1.2rem, 4vw, 2.5rem);
  display: flex; flex-direction: column; align-items: center;
}
/* il titolo appoggia col fondo sul profilo della villa */
.hero--ancorata .hero__top {
  top: 0; height: var(--sky-y, 42%);
  justify-content: flex-end;
}
.hero--ancorata .hero__top h1 { margin-bottom: 0; }

/* il resto comincia dove finisce il promontorio */
/* il resto comincia dove finisce il promontorio, con le spaziature strette:
   qui sotto lo spazio è poco e ogni rem conta */
.hero--ancorata .hero__mid { top: var(--water-y, 74%); }
.hero--ancorata .hero__sub { margin-bottom: 0.55rem; }
.hero--ancorata .trust-bar { margin-bottom: 0; padding-top: 0.7rem; }

/* Su schermo stretto tutto il testo sta nel cielo, che è alto ma non
   infinito: qui ogni riga risparmiata è quella che evita il taglio. */
@media (max-width: 720px) {
  .hero--ancorata .hero__top h1 { font-size: clamp(2.1rem, 8.6vw, 2.9rem); }
  .hero--ancorata .hero__sub { font-size: 1rem; line-height: 1.4; margin-bottom: 0.3rem; }
  .hero--ancorata .trust-bar { padding-top: 0.5rem; gap: 0.6rem; }
}

/* Il velo può calare: il testo non sta più sopra la parte movimentata,
   quindi la foto può respirare. */
.hero { --hero-veil: 0.58; }

/* Un secondo velo, più scuro in basso, dove stanno promessa e bottone. */
.hero .hero__bg::after {
  background:
    radial-gradient(ellipse 78% 62% at 50% 46%,
      rgba(16, 10, 2, var(--hero-veil)) 0%,
      rgba(16, 10, 2, calc(var(--hero-veil) * 0.82)) 55%,
      rgba(16, 10, 2, calc(var(--hero-veil) * 0.58)) 100%),
    linear-gradient(to bottom,
      rgba(16, 10, 2, 0.45) 0%, rgba(16, 10, 2, 0.12) 20%,
      rgba(16, 10, 2, 0.18) 62%, rgba(16, 10, 2, 0.62) 100%);
}