/* Hero: foto a tutta larghezza + punteggi fluttuanti. */

  /* ============ Hero editoriale (composizione, non full-bleed) ============ */
  /* ============ Hero con foto a tutta larghezza ============ */
  /* La foto sta sulla hero-zone (hero + collina di raccordo): così la collina verde
     "emerge" dalla fotografia invece di tagliarla con una linea. */
  .hero-zone{ position:relative; isolation:isolate; }
  .hero-zone__bg{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
  .hero-zone__bg img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; }
  /* Lo scrim non è un vezzo: il testo bianco cade sul prato chiaro, che da solo
     dà ~3,5:1. Il velo a sinistra lo porta oltre soglia senza spegnere la foto. */
  .hero-zone__scrim{ position:absolute; inset:0; z-index:-1; background:
    linear-gradient(103deg, rgba(var(--scrim-rgb),.84) 0%, rgba(var(--scrim-rgb),.66) 30%, rgba(var(--scrim-rgb),.3) 58%, rgba(var(--scrim-rgb),.08) 100%),
    linear-gradient(180deg, rgba(var(--scrim-rgb),.3) 0%, rgba(var(--scrim-rgb),0) 24%, rgba(var(--scrim-rgb),0) 60%, rgba(var(--scrim-rgb),.28) 100%); }

  .hero{ position:relative; display:flex; align-items:center;
    min-height:min(90vh,740px);
    padding-block:clamp(6rem,12vw,8.5rem) clamp(2.4rem,6vw,4rem); color:var(--on-photo); }
  .hero__grid{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(1.6rem,5vw,3.6rem); align-items:center; width:100%; }
  .hero__mark{ width:50px; height:50px; margin-bottom:1.2rem;
    filter:brightness(0) invert(1) drop-shadow(0 2px 10px rgba(var(--photo-shadow-rgb),.45)); }
  .hero h1{ font-size:clamp(2.5rem,6.6vw,4.5rem); line-height:1.0; margin:0 0 .9rem; max-width:12ch; }
  /* "Villa Azalea" va a capo intero (br nel markup) e non si spezza mai,
     nemmeno da mobile */
  .h1-brand{ white-space:nowrap; color:var(--on-photo);
    text-shadow:0 2px 26px rgba(var(--photo-shadow-rgb),.45); }
  .hero__sub{ font-size:22px; line-height:24px; max-width:44ch; color:var(--on-photo-sub); margin:0 0 .55rem;
    text-shadow:0 1px 14px rgba(var(--photo-shadow-rgb),.5); }
/* Due paragrafi distinti ma con le STESSE misure del primo (22/24): a separarli
 e' solo lo stacco verticale, non un corpo diverso. */
.hero__io{ font-size:22px; line-height:24px; max-width:44ch; color:var(--on-photo-note);
  margin:.9rem 0 0; text-shadow:0 1px 14px rgba(var(--photo-shadow-rgb),.5); }
/* Corpo e interlinea coincidono (24/24): le due frasi si leggono come UN blocco
   solo e non come due paragrafi. Vale a ogni larghezza, non solo su telefono. */
  /* "Io sono Roberto, il proprietario e il gestore": la presentazione che Roberto
     ha messo nel suo documento, subito sotto il sottotitolo e prima delle CTA */
  .hero__cta{ display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; margin-top:50px; }
  .hero__sign{ font-family:'Caveat',cursive; font-size:2rem; line-height:1; color:var(--on-photo); margin:15px 0 0;
    text-shadow:0 2px 14px rgba(var(--photo-shadow-rgb),.5); }
  /* sulla foto il pulsante secondario torna in versione chiara */
  .hero .btn--ghost{ --btn-fg:var(--on-photo); border-color:color-mix(in srgb, var(--on-photo) 72%, transparent); backdrop-filter:blur(2px); }
  .hero .btn--ghost:hover{ --btn-bg:color-mix(in srgb, var(--on-photo) 16%, transparent); border-color:var(--on-photo); }

  /* con la navbar fixed gli ancoraggi finirebbero sotto la pill */
  section[id]{ scroll-margin-top:5.5rem; }

  /* ============ Punteggi in hero ============ */
  /* Stesso componente .badge della sezione "Dicono di noi": un solo modo di
     mostrare un punteggio in tutta la pagina. Qui cambia solo il contesto —
     fluttuano su una foto, quindi ombra più profonda e galleggiamento. */
  .hero__cards{ display:flex; flex-direction:column; align-items:flex-end; gap:1rem; }
  .hero__cards .badge{
    box-shadow:0 22px 46px -22px rgba(var(--shadow-rgb),.55), 0 2px 6px rgba(var(--shadow-rgb),.06);
    animation:cardFloat 5.5s ease-in-out infinite;
  }
  .hero__cards .badge:nth-of-type(1){ margin-right:2.2rem; animation-delay:0s; }
  .hero__cards .badge:nth-of-type(2){ margin-right:-.4rem; animation-delay:1.1s; }
  @keyframes cardFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }