/* ==========================================================================
   SUNPRIME — Homepage
   ========================================================================== */

/* ---------- Hero ---------- */
.hero {
  position: relative;
  /* Figma: l'hero occupa il 100% dell'altezza dello schermo */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  color: var(--c-white);
}
.hero-media { position: absolute; inset: 0; background: var(--c-navy); }
.hero-media img,
.hero-media .hero-video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Il video di sfondo e' decorativo: nessun controllo, nessuna interazione.
   NON si nasconde mai. Safari rifiuta l'autoplay di un video che non e'
   visibile, e opacity: 0 vale come invisibile: il video restava fermo finche'
   non lo si sbloccava con un clic. */
.hero-video { pointer-events: none; }

/* A coprirlo e' il fermo immagine, che sta sopra e si dissolve quando la
   riproduzione parte davvero (classe .is-playing da js/main.js). Se l'autoplay
   e' bloccato resta li', e la hero e' comunque piena — senza il poster nativo
   del <video>, che su mobile fa comparire il pulsante Play. */
.hero-poster {
  position: absolute; inset: 0;
  background: var(--c-navy) url("../assets/img/hero-poster.jpg") center / cover no-repeat;
  transition: opacity .8s var(--ease);
}
.hero-media.is-playing .hero-poster { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .hero-poster { transition: none; }
}
/* Nessun comando nativo, su nessun WebKit: il pulsante Play che iOS disegna
   sopra un video non ancora partito e' l'unica cosa che l'utente vedrebbe
   come «da avviare», ed e' esattamente quello che non deve esserci. */
.hero-video::-webkit-media-controls,
.hero-video::-webkit-media-controls-container,
.hero-video::-webkit-media-controls-panel,
.hero-video::-webkit-media-controls-overlay-play-button,
.hero-video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
  appearance: none;
  opacity: 0;
  pointer-events: none;
}
/* Il fermo immagine non intercetta il puntatore: sopra la hero non deve
   esserci niente che si comporti come un comando. */
.hero-poster, .hero-scrim { pointer-events: none; }
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0) 34%, rgba(0,0,0,0.5) 100%);
}
.hero-content { position: relative; z-index: 2; padding-bottom: 64px; width: 100%; }
/* Barra progress: linea bianca piena larghezza con riempimento lime che scorre da sinistra */
.hero-progress { position: relative; width: 100%; height: 2px; background: rgba(255,255,255,0.4); overflow: hidden; }
.hero-progress-fill {
  position: absolute; left: 0; top: 0; height: 100%; width: 0;
  background: var(--c-lime);
  animation: heroFill 18s linear infinite;
}
@keyframes heroFill { 0% { width: 0; } 100% { width: 100%; } }
/* Le quattro frasi vivono tutte nella stessa cella di griglia: la riga prende
   da sola l'altezza della piu' alta, e la barra lime sopra non si sposta mai.
   Prima l'altezza la riservava il JavaScript misurando ogni frase, e bastava
   che il font arrivasse dopo la misura perche' il conto fosse sbagliato. */
.hero-text-row { display: grid; padding-top: 24px; }
.hero-slide {
  grid-area: 1 / 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  opacity: 0;
  visibility: hidden;
  /* La visibilita' cambia a dissolvenza finita: cosi' la frase spenta esce
     davvero dal flusso della lettura assistita e non resta cliccabile. */
  transition: opacity .45s var(--ease), visibility 0s linear .45s;
}
.hero-slide.is-on { opacity: 1; visibility: visible; transition: opacity .45s var(--ease), visibility 0s; }
/* Senza JavaScript resta la prima frase, che e' gia' .is-on nel markup. */
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-progress-fill { animation: none; width: 100%; }
}
.hero-slide .h1 { max-width: 16ch; margin: 0; }
.hero-slide .lead { max-width: 34ch; text-align: left; padding-bottom: 4px; margin: 0; }
.lead.on-dark { color: rgba(255,255,255,0.82); }

@media (max-width: 900px) {
  .hero { min-height: 100svh; }
  .hero-slide { flex-direction: column; align-items: flex-start; gap: 20px; }
  .hero-slide .lead { max-width: none; }
}

/* ---------- Mission + Numeri ---------- */
.mission { background: var(--c-blue); color: var(--c-white); }
/* L'occhiello e' bianco su tutto il sito: vedi base.css */

/* Figma: il blocco blu ha gli angoli INFERIORI arrotondati (r 32px, misurato sul
   frame HOMEPAGE 20). Quelli superiori restano vivi contro l'hero.
   La sezione scura successiva risale di 32px così l'arco scopre il navy. */
.mission-rounded {
  border-bottom-left-radius: 32px;
  border-bottom-right-radius: 32px;
  position: relative;
  z-index: 1;
}
.mission-rounded + .platform-dark {
  margin-top: -32px;
  padding-top: calc(var(--section-gap) + 32px);
}
/* Misure prese dal frame Figma HOMEPAGE 20 (canvas 1920, contenuto 1749 da x=91).
   Tutto il testo di questa sezione è BIANCO nel Figma, occhiello incluso. */
.mission .eyebrow { color: var(--c-white); }
/* Corpi calibrati sulla larghezza reale delle righe nel Figma, con Roobert caricato:
   lead 39px (righe da 667 e 506px), testo 63,5px (righe da 1141 e 694px). */
.mission-lead {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.03vw, 39px);
  font-weight: 400;
  color: var(--c-white);
  line-height: 1.05;
  max-width: 700px;
  letter-spacing: 0;
}
.mission-text {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.31vw, 63.5px);
  font-weight: 500;
  line-height: 1.1;
  max-width: 1349px;      /* Figma: nodo 2593:1447 */
  margin-top: clamp(24px, 5.1vw, 98px);
}
/* Figma: nessuna linea sopra "NUMERI", solo spazio.
   Occhiello a sinistra, paragrafo nella metà destra (nodo 2678:842: x=879, w=870, h=220 → 5 righe). */
.numeri-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 40px;
  margin-top: clamp(48px, 11.4vw, 219px);
  border-top: none;
  padding-top: 0;
}
/* L'occhiello aveva 2px di padding-top e bastavano a farlo sedere piu' in
   basso della prima riga del paragrafo accanto: dal feedback del 21/09 le due
   colonne partono dalla stessa linea. L'allineamento lo fa align-items:start
   sulla griglia, non uno scarto a mano. */
.numeri-intro {
  font-family: var(--font-display);
  font-size: clamp(17px, 2.08vw, 40px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--c-white);
  max-width: 870px;
}
@media (max-width: 900px) {
  .numeri-row { grid-template-columns: 1fr; gap: 16px; margin-top: 48px; }
}

/* Il Figma teneva i 4 numeri nella meta' destra (x=875 di 1749) e li impilava.
   Alla revisione del 21/09 il cliente ha letto quella colonna sinistra vuota
   come una dimenticanza — "sembra che manchi un'immagine" — e aveva ragione:
   una colonna di quattro cifre su fondo piatto lascia mezza sezione di blu
   senza niente da guardare, e su schermo largo la sproporzione peggiora.

   Le cifre passano a due colonne e occupano la sezione intera. Restano
   impilate a coppie, quindi ognuna ha ancora il suo spazio e non si leggono
   come una tabella; ma il peso e' distribuito, e le forme di .sfondo-forme
   lavorano dietro invece che accanto al vuoto. */
.numeri-list {
  margin-top: clamp(28px, 4.7vw, 90px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(24px, 3.3vw, 64px);
  row-gap: clamp(28px, 4.6vw, 88px);
}
/* Qui i numeri sono la sezione, quindi vanno piu' grandi che altrove. Peso e
   interlinea li porta ormai .stat-callout: erano dichiarati qui, ed e' per
   questo che sul resto del sito sembravano di un altro carattere. */
.numeri-list .stat-callout .num { font-size: clamp(36px, 4.87vw, 93.5px); }
@media (max-width: 900px) {
  .numeri-list { grid-template-columns: 1fr; row-gap: 32px; margin-top: 36px; }
}

/* ---------- Effetto "riempimento" del testo allo scroll (Figma) ----------
   Prima si riempie la descrizione parola per parola, poi entrano i numeri.
   Le classi js-* vengono aggiunte da JS: senza JS il contenuto resta pienamente visibile. */
.js-fill-text .fw {
  color: rgba(255, 255, 255, 0.26);
  transition: color .35s var(--ease);
}
.js-fill-text .fw.is-on { color: var(--c-white); }

/* Lo stato a riposo e' quello visibile: nascosto e' una condizione che
   main.js impone e poi toglie, non il punto di partenza. Al contrario — come
   era prima — bastava una transizione che non gira (scheda in secondo piano,
   servizio di anteprima, stampa) per far sparire il contenuto sul serio.
   .senza-attesa e' la rete di sicurezza: toglie la transizione di mezzo. */
.js-stagger > * {
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.js-stagger > *.da-rivelare { opacity: 0; transform: translateY(18px); }
.js-stagger > *.senza-attesa { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .js-fill-text .fw { color: var(--c-white); }
  .js-stagger > *,
  .js-stagger > *.da-rivelare { opacity: 1; transform: none; transition: none; }
}

/* Su carta non c'e' scorrimento e non ci sono transizioni: tutto visibile. */
@media print {
  .js-stagger > *.da-rivelare { opacity: 1; transform: none; }
}

/* ---------- Piattaforma (sfondo Navy, blocchi impilati con icona) ---------- */
.platform-dark { background: var(--c-navy); color: var(--c-white); }
.platform-dark .lead { max-width: 40ch; }

/* ---------- Sezioni: head comune ----------
   Riprende il pattern confermato nell'hero Figma: barra lime + riga con
   bordo superiore + titolo a sinistra / testo di supporto a destra. */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 48px;
  flex-wrap: wrap;
  position: relative;
  border-top: 1px solid var(--c-line);
  padding-top: 28px;
}
.section-head::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 64px;
  height: 3px;
  background: var(--c-lime);
}
.section-head.on-dark { border-top-color: rgba(255, 255, 255, 0.24); }
@media (max-width: 900px) {
  .section-head { flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 22px; margin-bottom: 36px; }
}

/* ---------- Progetti (sfondo blu, testo bianco — come Figma) ---------- */
.projects { background: var(--c-blue); color: var(--c-white); }
.projects .eyebrow { color: var(--c-white); }
/* Figma: testata senza bordo superiore né barra lime */
.projects .section-head { align-items: start; border-top: none; padding-top: 0; }
.projects .section-head::before { content: none; }
.projects-head-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(14px, 1.5vw, 26px);
  width: 50%;
  max-width: 873px;
  margin-left: auto;
}
.projects-head-right .h2 { font-size: clamp(24px, 2.3vw, 44px); line-height: 1.15; font-weight: 400; }
.projects-head-right .lead { font-size: clamp(16px, 1.56vw, 30px); line-height: 1.3; color: var(--c-white); max-width: 100%; }
/* Il pulsante chiude la sezione e va a destra, il testo resta a sinistra.
   Dichiarato qui perche' home.css viene caricato dopo components.css: una
   regola generica piu' su non arriverebbe mai in pagina. */
.projects-head-right .btn,
.news-head-right .btn { align-self: flex-end; }
.projects-head-right .btn { margin-top: clamp(8px, 1vw, 18px); }
@media (max-width: 900px) { .projects-head-right { width: 100%; margin-left: 0; } }
@media (max-width: 900px) { .projects-head-right { gap: 16px; } }

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 1100px) { .project-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .project-grid { grid-template-columns: 1fr; } }

/* ---------- News ----------
   Figma: sezione su fondo blu, testata con occhiello a sinistra e paragrafo + CTA
   a destra, card da 872px in carosello orizzontale (2 visibili + anteprima). */
.news { background: var(--c-blue); color: var(--c-white); }
.news .eyebrow { color: var(--c-white); }
.news-head { border-top: none; padding-top: 0; align-items: start; }
.news-head::before { content: none; }
.news-head-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(18px, 2vw, 34px);
  max-width: 873px;
  margin-left: auto;
  width: 50%;
}
.news-head-right .lead { max-width: 873px; font-size: clamp(16px, 1.56vw, 30px); line-height: 1.3; color: var(--c-white); }

.news-grid {
  display: flex;
  gap: 32px;
  overflow-x: auto;
  /* overflow-y esplicito. Dichiarando solo overflow-x: auto, il CSS calcola
     overflow-y come "auto" e non come "visible": basta una riga di testo in
     piu' o un font che arriva tardi perche' dentro al nastro compaia uno
     scorrimento verticale di pochi pixel. Segnalato il 22/09 — "questa
     tipologia di sezioni non deve mai avere scorrimento verticale". */
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 8px;
}
.news-grid::-webkit-scrollbar { display: none; }
/* Quando l'avanzamento è guidato dallo scorrimento della pagina lo snap va
   disattivato, altrimenti riporterebbe il nastro sulla card precedente. */
.news-grid.js-news-auto { scroll-snap-type: none; scroll-behavior: auto; }
.news-grid .news-card { flex: 0 0 calc(50% - 16px); max-width: 872px; scroll-snap-align: start; gap: clamp(12px, 1.04vw, 20px); }
.news .news-card .thumb { position: relative; aspect-ratio: 872 / 490; border-radius: clamp(8px, 0.63vw, 12px); }

/* Figma: targhetta categoria navy in basso a sinistra, con l'angolo alto-destro
   molto arrotondato, e pulsante bianco con freccia in basso a destra */
/* Figma nodo 2593:1483 — la targhetta è un asset vettoriale ("Intersect"),
   265.388×201.222 ancorato all'angolo basso-sinistro dell'immagine 872×490.
   Il contenitore copre tutta la thumb, così le percentuali sono su quella. */
.news-cat {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  padding: 0 0 clamp(10px, 1.3vw, 25px) clamp(14px, 1.82vw, 35px);
  color: var(--c-white);
  font-size: clamp(12px, 1.04vw, 20px);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0;
  font-variation-settings: "MONO" 100, "wght" 400;
  pointer-events: none;
}
/* Revisione 21/09: la forma navy entrava gia' fatta insieme alla fotografia,
   e il cliente ha chiesto che si vedesse arrivare. Cresce dal suo angolo in
   basso a sinistra, che e' il punto in cui la forma e' ancorata alla card:
   sembra che si apra da li' invece di comparire.
   Parte solo quando la sezione entra in vista (.e-in-vista, messa da main.js) e
   resta ferma se e' stato chiesto meno movimento. Senza JavaScript la classe
   non arriva mai e la targhetta e' semplicemente gia' al suo posto. */
/* Nessun fill-mode, ed e' deliberato. Con "both" l'animazione tiene il primo
   fotogramma finche' non parte, e il primo fotogramma e' opacity: 0 — in una
   scheda in secondo piano, dove i fotogrammi non vengono prodotti, la forma
   resterebbe invisibile per sempre. E' lo stesso inciampo gia' descritto per
   [data-stagger] qui sotto. Senza fill l'elemento sta nel suo stato normale
   prima e dopo: l'animazione e' un passaggio, non uno stato. */
.news.e-in-vista .news-cat::before {
  animation: news-cat-entra .62s var(--ease-morbido);
}
.news.e-in-vista .news-card:nth-child(2) .news-cat::before { animation-delay: .1s; }
.news.e-in-vista .news-card:nth-child(3) .news-cat::before { animation-delay: .2s; }
@keyframes news-cat-entra {
  from { transform: scale(.34); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .news.e-in-vista .news-cat::before { animation: none; }
}
.news-cat::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  bottom: 0;
  transform-origin: left bottom;
  width: 30.43%;    /* 265.388 / 872 */
  height: 41.07%;   /* 201.222 / 490 */
  background-image: url("../assets/img/news-cat-shape.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* Figma: 80×80, radius 16, a 9px dal bordo destro e 12px dal fondo */
.news-go {
  position: absolute;
  right: clamp(6px, 0.47vw, 9px);
  bottom: clamp(8px, 0.63vw, 12px);
  width: clamp(44px, 4.17vw, 80px);
  height: clamp(44px, 4.17vw, 80px);
  border-radius: clamp(10px, 0.83vw, 16px);
  background: var(--c-white);
  color: var(--c-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s var(--ease);
}
.news-go:hover { background: #e9ecf5; }

/* Sotto l'immagine: data in mono, titolo, descrizione */
.news .news-card .date {
  color: var(--c-white);
  font-size: clamp(13px, 1.25vw, 24px);
  line-height: 1.3;
  letter-spacing: 0;
  font-variation-settings: "MONO" 100, "wght" 400;
}
.news .news-card h3 { color: var(--c-white); font-size: clamp(20px, 2.08vw, 40px); line-height: 1.25; font-weight: 500; margin-top: 0; }
.news .news-card p { color: var(--c-white); font-size: clamp(14px, 1.25vw, 24px); line-height: 1.25; font-weight: 500; }
@media (max-width: 1200px) { .news-head-right { width: 60%; } }

/* Su mobile lo stesso carosello, con una card alla volta e anteprima della successiva */
@media (max-width: 900px) {
  .news-head-right { width: 100%; margin-left: 0; }
  .news-grid {
    display: flex;
    grid-template-columns: none;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    /* esce dal gutter per far intravedere la card successiva a filo schermo */
    margin-inline: calc(-1 * clamp(var(--pad-mobile), 5.5vw, var(--pad-desktop)));
    padding-inline: clamp(var(--pad-mobile), 5.5vw, var(--pad-desktop));
    padding-bottom: 6px;
    scroll-padding-inline-start: clamp(var(--pad-mobile), 5.5vw, var(--pad-desktop));
  }
  .news-grid::-webkit-scrollbar { display: none; }
  .news-grid .news-card {
    flex: 0 0 84%;
    max-width: 360px;
    scroll-snap-align: start;
  }
}

/* ---------- CTA banner ---------- */
.cta-banner { background: var(--c-navy); color: var(--c-white); }
.cta-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; text-align: left; }
.cta-inner .h2 { max-width: 20ch; }
.cta-inner .lead { max-width: 46ch; }