/* =========================================================================
   Savorita Hero 2027 (variante 8)
   Specifica: docs/home-2027.md §2 · Mockup: mockups/home-hero-2027/

   Regole di scrittura (le stesse di savorita-onboarding-full):
   - ogni selettore parte da .sv-hero.sv-hero
   - responsive a container: la radice è il contenitore. Sotto 1000
     l'impaginazione del telefono (il tablet verticale è un telefono grande,
     con misure più ampie fra 700 e 999); da 1000 le due colonne (il tablet
     orizzontale è un laptop piccolo). Le misure fluide in larghezza usano
     cqw, non vw
   - l'hero riempie lo schermo: le misure in altezza seguono vh, così su un
     laptop basso logo, titolo e foto si stringono e la fascia delle card
     resta nella prima schermata
   - le variabili che cambiano con il contenitore stanno sui discendenti
   - niente !important su display

   Stati sulla radice:
   - nessuno     stato finale (quello che disegna il server)
   - is-one      apertura: solo logo, titolo e riga sotto, al centro
   - is-wait     posa d'apertura in attesa della pagina pronta: nascosta
   - is-in       fa partire le entrate [data-a]
   - is-novis    nessuna foto: una colonna sola
   ========================================================================= */

.sv-hero.sv-hero{
  container-type:inline-size;
  container-name:svhero;
  line-height:1.4; /* il kit dà al body un'interlinea fissa (30px) che i testi piccoli erediterebbero */
  position:relative; overflow:hidden; box-sizing:border-box;
  display:flex; flex-direction:column;
  width:100%;
  min-height:max(480px, calc(100vh - var(--sv-bar-h)));
  margin:0;
  color:#fff;
  background:linear-gradient(170deg, var(--sv-navy) 0%, #1f4a36 55%, var(--sv-green) 100%);
  font-family:Nunito, "Nunito Sans", system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  text-align:left;
}
@supports (height:100svh){
  .sv-hero.sv-hero{ min-height:max(480px, calc(100svh - var(--sv-bar-h))); }
}
.sv-hero.sv-hero *,
.sv-hero.sv-hero *::before,
.sv-hero.sv-hero *::after{ box-sizing:border-box; }

.sv-hero.sv-hero .svhe-main,
.sv-hero.sv-hero .svhe-band{
  --pad:clamp(16px, 3.4cqw, 56px);
  --out:cubic-bezier(.2,.8,.2,1);
}

/*
 * Segnale per hero.js: il foglio vero è attivo. Sta dentro una regola a
 * contenitore apposta: il "CSS critico" di LiteSpeed le regole a contenitore
 * le butta, quindi finché c'è solo quello la variabile manca e l'apertura non
 * misura niente. Non spostarla fuori.
 */
@container svhero (min-width:0px){
  .sv-hero.sv-hero .svhe-main{ --svhe-css:1; }
}

/* ---------- impaginazione finale: due colonne ---------- */
.sv-hero.sv-hero .svhe-main{
  flex:1; width:100%; max-width:1320px; margin:0 auto;
  padding:clamp(16px,3.2vh,48px) var(--pad) clamp(12px,2.4vh,36px);
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,5cqw,80px); align-items:center;
}
.sv-hero.sv-hero.is-novis .svhe-main{ grid-template-columns:minmax(0,1fr); }
.sv-hero.sv-hero .svhe-copy{ width:100%; display:grid; gap:clamp(8px,1.7vh,20px); justify-items:start; }

.sv-hero.sv-hero .svhe-logo{ display:block; height:clamp(56px,11vh,140px); width:auto; max-width:none; }
.sv-hero.sv-hero .svhe-h1{
  margin:0; font-weight:900; font-size:clamp(32px, min(4.8cqw, 7.4vh), 72px); line-height:1; letter-spacing:-.03em;
  text-wrap:balance; color:#fff;
}
.sv-hero.sv-hero .svhe-h1 em{ font-style:normal; color:var(--sv-yellow); }

/* "Be Authentic Italian": riga sobria con barra tricolore */
.sv-hero.sv-hero .svhe-bai{
  justify-self:center; display:inline-flex; align-items:center; gap:12px; color:#fff;
  font-weight:800; font-size:13px; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap;
}
.sv-hero.sv-hero .svhe-bai::before{
  content:""; width:30px; height:4px; border-radius:2px;
  background:linear-gradient(90deg,#1a9a3a 0 33.3%,#fff 33.3% 66.6%,#EC1B30 66.6%);
}
.sv-hero.sv-hero .svhe-copy > .svhe-bai{ justify-self:start; }

/* ---------- paragrafo che diventa elenco ---------- */
.sv-hero.sv-hero .svhe-morph{ position:relative; display:grid; gap:12px; }
.sv-hero.sv-hero .svhe-text{
  margin:0; font-weight:600; font-size:clamp(15px, min(1.35cqw, 2.4vh), 20px); line-height:1.5;
  color:rgba(255,255,255,.88); text-wrap:wrap;
}
/* la frase fino ai due punti non si muove mai: niente balance */
.sv-hero.sv-hero .svhe-morph .w{ opacity:0; filter:blur(3px); transition:opacity .28s ease, filter .28s ease; }
.sv-hero.sv-hero .svhe-morph .w.on{ opacity:1; filter:none; }
.sv-hero.sv-hero .svhe-morph .k{
  border-radius:4px; -webkit-box-decoration-break:clone; box-decoration-break:clone;
  transition:color .25s ease, background-color .7s ease, box-shadow .7s ease;
}
.sv-hero.sv-hero .svhe-morph .k.hl{ color:var(--sv-yellow); }
.sv-hero.sv-hero .svhe-morph .k.pulse{
  background-color:rgba(255,204,55,.2); box-shadow:0 0 0 3px rgba(255,204,55,.2);
  animation:svhe-pulse .55s cubic-bezier(.2,.8,.2,1);
}
@keyframes svhe-pulse{
  0%{ background-color:rgba(255,204,55,.6); box-shadow:0 0 0 7px rgba(255,204,55,.4); }
  100%{ background-color:rgba(255,204,55,.2); box-shadow:0 0 0 3px rgba(255,204,55,.2); }
}
.sv-hero.sv-hero .svhe-morph .tail.sep-out{ color:transparent; transition:color .35s ease; }
.sv-hero.sv-hero .svhe-morph .tail.sep-out .k{ color:var(--sv-yellow); }

.sv-hero.sv-hero .svhe-list{
  list-style:none; margin:0; padding:0; display:none; gap:clamp(4px,1vh,10px);
  font-weight:700; font-size:clamp(15px, min(1.3cqw, 2.3vh), 19px); line-height:1.35; color:#fff;
}
.sv-hero.sv-hero .svhe-list li{ display:grid; grid-template-columns:26px 1fr; gap:10px; align-items:start; margin:0; padding:0; }
.sv-hero.sv-hero .svhe-list svg{ width:22px; height:22px; margin-top:1px; color:var(--sv-yellow); }
.sv-hero.sv-hero .svhe-morph.is-list .tail{ display:none; }
.sv-hero.sv-hero .svhe-morph.is-list .svhe-list{ display:grid; }
.sv-hero.sv-hero .svhe-list .lt{ transition:opacity .25s ease; }
.sv-hero.sv-hero .svhe-morph.is-flying .svhe-list .lt{ opacity:0; }
.sv-hero.sv-hero .svhe-list path{ stroke-dasharray:20; stroke-dashoffset:0; }
.sv-hero.sv-hero .svhe-morph.is-drawing .svhe-list path{ stroke-dashoffset:20; }
.sv-hero.sv-hero .svhe-morph.is-list:not(.is-drawing) .svhe-list path{
  transition:stroke-dashoffset .5s ease; transition-delay:calc(.75s + var(--i, 0) * .12s);
}
.sv-hero.sv-hero .svhe-clone{
  position:absolute; z-index:3; font-weight:700; line-height:1.4; color:var(--sv-yellow); pointer-events:none;
}
.sv-hero.sv-hero .svhe-caret{
  display:inline-block; width:2px; height:1.05em; margin-left:3px; background:var(--sv-yellow);
  vertical-align:-.16em; animation:svhe-blink 1s steps(1) infinite;
}
@keyframes svhe-blink{ 50%{ opacity:0; } }

/* ---------- bottoni ---------- */
.sv-hero.sv-hero .svhe-acts{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.sv-hero.sv-hero .svhe-cta{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:12px;
  background:var(--sv-yellow); color:var(--sv-navy); text-decoration:none;
  border:0; border-radius:999px; padding:clamp(12px,2vh,17px) 30px;
  font-weight:900; font-size:16px; line-height:1.1; letter-spacing:.01em;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.5);
  transition:transform .35s var(--out, ease), box-shadow .35s;
}
.sv-hero.sv-hero .svhe-cta svg{ width:18px; height:18px; transition:transform .35s ease; animation:svhe-nudge 4.8s ease-in-out infinite 2s; }
.sv-hero.sv-hero .svhe-cta:hover{ transform:translateY(-2px); box-shadow:0 18px 34px -14px rgba(0,0,0,.55); color:var(--sv-navy); }
/* riflesso in loop */
.sv-hero.sv-hero .svhe-cta::after{
  content:""; position:absolute; top:-20%; bottom:-20%; left:-40%; width:30%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);
  transform:skewX(-18deg); animation:svhe-shine 4.8s ease-in-out infinite 2s;
}
@keyframes svhe-shine{ 0%,62%{ left:-40%; } 82%,100%{ left:130%; } }
@keyframes svhe-nudge{ 0%,64%,84%,100%{ transform:none; } 72%{ transform:translateX(5px); } }

/* link ai percorsi, con la linea che si riempie in sincronia con la foto */
.sv-hero.sv-hero .svhe-seg{ display:flex; flex-wrap:wrap; gap:6px 22px; }
.sv-hero.sv-hero .svhe-seg a{
  position:relative; display:inline-flex; align-items:center; gap:7px;
  color:#fff; text-decoration:none; font-weight:800; font-size:14px; line-height:1.2;
  padding:8px 0 10px; opacity:.78; transition:opacity .3s;
}
.sv-hero.sv-hero .svhe-seg a svg{ width:14px; height:14px; transition:transform .3s ease; }
.sv-hero.sv-hero .svhe-seg a::before,
.sv-hero.sv-hero .svhe-seg a::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:2px; border-radius:2px;
}
.sv-hero.sv-hero .svhe-seg a::before{ background:rgba(255,255,255,.28); }
.sv-hero.sv-hero .svhe-seg a::after{ background:var(--sv-yellow); transform:scaleX(0); transform-origin:0 50%; }
.sv-hero.sv-hero .svhe-seg a.on,
.sv-hero.sv-hero .svhe-seg a:hover{ opacity:1; color:#fff; }
.sv-hero.sv-hero .svhe-seg a:hover svg{ transform:translateX(3px); }
.sv-hero.sv-hero .svhe-seg a.on::after{ animation:svhe-prog var(--ms, 4.8s) linear forwards; }
.sv-hero.sv-hero .svhe-seg a:hover::after{ animation:none; transform:none; }
@keyframes svhe-prog{ to{ transform:scaleX(1); } }
.sv-hero.sv-hero .svhe-seg.m-only{ display:none; }

/* ---------- foto ---------- */
.sv-hero.sv-hero .svhe-visual{ position:relative; align-self:center; display:block; }
.sv-hero.sv-hero .svhe-slides{
  position:relative; width:100%; height:clamp(200px,46vh,520px); border-radius:28px; overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6); background:#1d2430;
}
.sv-hero.sv-hero .svhe-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease; }
.sv-hero.sv-hero .svhe-slide.on{ opacity:1; }
.sv-hero.sv-hero .svhe-slide img{
  width:100%; height:100%; max-width:none; object-fit:cover; display:block;
  transform:scale(1.1); transition:transform 7s linear;
}
.sv-hero.sv-hero .svhe-slide.on img{ transform:scale(1); }
.sv-hero.sv-hero .svhe-tags{ position:absolute; left:0; right:0; top:0; height:clamp(200px,46vh,520px); pointer-events:none; }
.sv-hero.sv-hero .svhe-tags > *{
  position:absolute; opacity:0; transform:translateY(12px);
  transition:opacity .6s ease, transform .8s cubic-bezier(.2,.8,.2,1);
}
.sv-hero.sv-hero .svhe-tags > .on{ opacity:1; transform:none; transition-delay:.35s; }
.sv-hero.sv-hero .svhe-tags .t-a{ left:-26px; top:12%; }
.sv-hero.sv-hero .svhe-tags .t-b{ right:-18px; bottom:11%; }
.sv-hero.sv-hero .svhe-caption{ display:flex; flex-direction:column; align-items:center; gap:clamp(8px,1.4vh,14px); margin-top:clamp(8px,1.6vh,18px); min-height:0; }
.sv-hero.sv-hero .svhe-caption .svhe-bai{ font-size:12px; }

/* segnaposto in editor */
.sv-hero.sv-hero .svhe-empty{
  display:grid; place-items:center; width:100%; height:100%; min-height:90px; padding:12px;
  border:2px dashed rgba(255,255,255,.45); border-radius:inherit; color:rgba(255,255,255,.8);
  font-weight:800; font-size:13px; text-align:center;
}
.sv-hero.sv-hero span.svhe-logo.svhe-empty{ width:140px; border-radius:14px; }

/* ---------- card (sulle foto e nella fascia) ---------- */
.sv-hero.sv-hero .svhe-card{
  display:flex; align-items:center; gap:7px; flex:none; white-space:nowrap;
  border:1px solid #dde2e6; border-radius:100px; background:#fff; padding:7px 14px 7px 9px;
  box-shadow:0 1px 2px rgba(41,50,65,.05), 0 10px 26px -14px rgba(0,0,0,.45);
  font-family:Nunito, "Nunito Sans", sans-serif; font-size:12.5px; line-height:1.2;
}
.sv-hero.sv-hero .svhe-card b{ font-weight:800; color:var(--sv-navy); }
.sv-hero.sv-hero .svhe-card i{ font-style:normal; color:#8d95a2; }
.sv-hero.sv-hero .svhe-flag{ font-size:14px; line-height:1; }

/* ---------- fascia bassa ---------- */
.sv-hero.sv-hero .svhe-band{
  position:relative; display:grid; gap:6px;
  padding:clamp(6px,1vh,14px) 0 calc(clamp(10px,2vh,28px) + env(safe-area-inset-bottom, 0px));
}
.sv-hero.sv-hero .svhe-band-label{
  max-width:1320px; width:100%; margin:0 auto; padding:0 var(--pad);
  font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.62);
}
.sv-hero.sv-hero .svhe-mq{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.sv-hero.sv-hero .svhe-row{ display:flex; gap:8px; width:max-content; padding:4px 0; animation:svhe-slide 38s linear infinite; }
.sv-hero.sv-hero .svhe-row.rev{ animation-duration:46s; animation-direction:reverse; }
@keyframes svhe-slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* =========================================================================
   Apertura (is-one): solo logo, titolo e riga sotto, al centro
   ========================================================================= */
.sv-hero.sv-hero.is-one .svhe-main{ grid-template-columns:minmax(0,1fr); }
.sv-hero.sv-hero.is-one .svhe-copy{ justify-items:center; text-align:center; }
.sv-hero.sv-hero.is-one .svhe-copy > .svhe-bai{ justify-self:center; }
.sv-hero.sv-hero.is-one .svhe-logo{ height:clamp(100px,22vh,230px); }
.sv-hero.sv-hero.is-one .svhe-visual{ position:absolute; visibility:hidden; }
.sv-hero.sv-hero.is-one .svhe-morph,
.sv-hero.sv-hero.is-one .svhe-acts{ display:none; }

/* in attesa della pagina pronta: la posa c'è ma non si vede, niente gira */
.sv-hero.sv-hero.is-wait [data-a],
.sv-hero.sv-hero.is-wait .svhe-band{ opacity:0; }

/* entrate */
.sv-hero.sv-hero.is-in [data-a]{ animation:svhe-up .9s cubic-bezier(.2,.8,.2,1) both; animation-delay:var(--d, 0s); }
.sv-hero.sv-hero.is-in [data-a="logo"]{ animation:svhe-logo 1.2s cubic-bezier(.2,.8,.2,1) both; }
.sv-hero.sv-hero.is-in .svhe-morph,
.sv-hero.sv-hero.is-in .svhe-acts{ animation:none; }
.sv-hero.sv-hero.is-in .svhe-band{ animation:svhe-fade 1.2s ease both; animation-delay:.9s; }
.sv-hero.sv-hero .svhe-visual.enter .svhe-slides{ animation:svhe-reveal 1.1s cubic-bezier(.7,0,.2,1) both; }
@keyframes svhe-up{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
@keyframes svhe-logo{ from{ opacity:0; transform:scale(.82) rotate(-6deg); } 60%{ opacity:1; } to{ opacity:1; transform:none; } }
@keyframes svhe-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes svhe-reveal{
  from{ clip-path:inset(-20% -20% 100% -20%); transform:translateY(24px); }
  to{ clip-path:inset(-20% -20% -20% -20%); transform:none; }
}

/* =========================================================================
   Sotto 1000 (telefono e tablet verticale): foto piccola accanto al logo,
   link sotto il bottone. Contenuto allineato in alto: lo spazio che avanza
   va sotto, non fra le righe (prima si apriva un vuoto sotto il titolo).
   ========================================================================= */
@container svhero (max-width:999px){
  .sv-hero.sv-hero .svhe-main{
    --logo-h:60px; --vis-w:130px; --vis-h:96px;
    max-width:760px;
    padding-top:14px; padding-bottom:10px;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"logo vis" "h1 h1" "text text" "act act";
    column-gap:14px; row-gap:10px; align-items:center; align-content:start;
  }
  .sv-hero.sv-hero.is-novis .svhe-main{ grid-template-columns:minmax(0,1fr); grid-template-areas:"logo" "h1" "bai" "text" "act"; }
  .sv-hero.sv-hero .svhe-copy{ display:contents; }
  .sv-hero.sv-hero .svhe-logo{ grid-area:logo; height:var(--logo-h); }
  .sv-hero.sv-hero .svhe-h1{ grid-area:h1; font-size:clamp(28px, 8.4cqw, 54px); }
  .sv-hero.sv-hero .svhe-copy > .svhe-bai{ grid-area:bai; }
  .sv-hero.sv-hero .svhe-morph{ grid-area:text; }
  .sv-hero.sv-hero .svhe-text{ font-size:clamp(15px, 2.2cqw, 18px); }
  .sv-hero.sv-hero .svhe-list{ font-size:clamp(15px, 2.1cqw, 18px); gap:6px; }
  .sv-hero.sv-hero .svhe-acts{ grid-area:act; }
  .sv-hero.sv-hero .svhe-visual{ grid-area:vis; width:var(--vis-w); justify-self:end; }
  .sv-hero.sv-hero .svhe-slides,
  .sv-hero.sv-hero .svhe-tags{ height:var(--vis-h); }
  .sv-hero.sv-hero .svhe-slides{ border-radius:18px; }
  .sv-hero.sv-hero .svhe-tags .svhe-card{ display:none; }
  /* a destra, sotto la foto: la scritta è più larga della foto e al centro
     sbordava oltre il bordo dello schermo; così l'eccedenza va a sinistra */
  .sv-hero.sv-hero .svhe-caption{ margin-top:8px; gap:8px; align-items:flex-end; }
  .sv-hero.sv-hero .svhe-caption .svhe-bai{ font-size:9.5px; letter-spacing:.14em; gap:7px; }
  .sv-hero.sv-hero .svhe-caption .svhe-bai::before{ width:20px; height:3px; }
  .sv-hero.sv-hero .svhe-caption .svhe-seg{ display:none; }
  .sv-hero.sv-hero .svhe-seg.m-only{ display:flex; flex-basis:100%; justify-content:center; }

  .sv-hero.sv-hero.is-one .svhe-main{ grid-template-columns:minmax(0,1fr); grid-template-areas:"logo" "h1" "bai" "text" "act"; justify-items:center; text-align:center; }
  .sv-hero.sv-hero.is-one .svhe-logo{ height:clamp(96px,16vh,150px); }
  .sv-hero.sv-hero.is-one .svhe-visual{ grid-area:auto; }
}

/* solo telefono: bottone a tutta larghezza */
@container svhero (max-width:699px){
  .sv-hero.sv-hero .svhe-cta{ flex-basis:100%; justify-content:center; padding:14px 24px; font-size:15px; }
}

/* tablet verticale: lo stesso, più grande */
@container svhero (min-width:700px) and (max-width:999px){
  /* contenuto al centro in verticale: in alto lasciava mezzo schermo vuoto */
  .sv-hero.sv-hero .svhe-main{ --logo-h:96px; --vis-w:260px; --vis-h:170px; padding-top:28px; row-gap:16px; column-gap:24px; align-content:center; }
  .sv-hero.sv-hero .svhe-caption .svhe-bai{ font-size:12px; letter-spacing:.18em; }
  .sv-hero.sv-hero .svhe-caption .svhe-bai::before{ width:26px; height:4px; }
  .sv-hero.sv-hero .svhe-seg.m-only{ justify-content:flex-start; flex-basis:auto; }
}

/* =========================================================================
   Corazza: le proprietà che il kit di Elementor tocca sempre su titoli,
   paragrafi e link.
   ========================================================================= */
.sv-hero.sv-hero .svhe-h1,
.sv-hero.sv-hero .svhe-text,
.sv-hero.sv-hero .svhe-cta,
.sv-hero.sv-hero .svhe-seg a{
  font-family:Nunito, "Nunito Sans", system-ui, sans-serif!important;
  text-transform:none!important;
  text-decoration:none!important;
}
.sv-hero.sv-hero .svhe-h1,
.sv-hero.sv-hero .svhe-text{ margin:0!important; }

/* movimento ridotto: niente apertura, niente scorrimento delle card */
@media (prefers-reduced-motion:reduce){
  .sv-hero.sv-hero *,
  .sv-hero.sv-hero *::before,
  .sv-hero.sv-hero *::after{ animation-duration:1ms!important; animation-delay:0ms!important; animation-iteration-count:1!important; }
  .sv-hero.sv-hero .svhe-row{ transform:none!important; }
}

/* chiuso vuol dire spento */
.sv-hero.sv-hero [hidden]{ display:none!important; }