/* ==========================================================================
   FONDOPRO — HERO.CSS
   Sezione Hero della Home: video fullscreen, testo in overlay.
   Il CTA "Aderisci ora" e il pulsante "torna su" vivono ora in
   sticky-actions.css (sono condivisi con News/Footer sotto l'Hero).
   ========================================================================== */

/* --------------------------------------------------------------------------
   CONTENITORE + VIDEO
   -------------------------------------------------------------------------- */
.fp-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--color-blue-primary-dark); /* colore di attesa mentre il video carica */
}

.fp-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.fp-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scaleX(-1);
}

.fp-hero__video--wide {
  margin-top: 32px;
}
/* Video diverso per schermi 9:16 o più stretti di un quadrato: il video
   desktop (16:9) perde l'impatto emozionale se ritagliato in verticale.
   "max-aspect-ratio: 1/1" corrisponde esattamente a "rapporto ≤ 1", cioè
   quadrato o più stretto (9:16 e oltre). hero.js si occupa di caricare
   davvero solo il video effettivamente visibile, per non scaricare
   entrambi i file in parallelo. */
.fp-hero__video--tall {
  display: none;
}
@media (max-aspect-ratio: 1/1) {
  .fp-hero__video--wide {
    display: none;
  }
  .fp-hero__video--tall {
    object-position: right;
    display: block;
  }
}

/* --------------------------------------------------------------------------
   SCRIM — velo scurente a gradiente verticale
   Il velo copre la parte inferiore dello schermo dal basso verso l'alto:
   più scuro (35%) sul bordo inferiore per dare contrasto, sfuma in modo
   deciso ma non assoluto fino a diventare totalmente trasparente (0%)
   appena sopra la metà dello schermo (50.5%). */
.fp-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.15) 47.5%, rgba(0, 0, 0, 0.0) 50.5%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   CONTENUTO TESTUALE
   -------------------------------------------------------------------------- */
.fp-hero__content {
  position: relative;
  z-index: 1;
  /* Offset FISSO, volutamente sganciato da --navbar-height: il token ora
     riporta l'altezza reale della testata (134px su desktop, era 84px),
     ma la posizione attuale di logo e testi nell'Hero è quella approvata
     dal cliente — qui resta quindi il valore storico (84px desktop,
     proporzionale su mobile, vedi RESPONSIVE), che la mantiene identica. */
  --hero-offset-top: 84px;
  padding-top: var(--hero-offset-top);
  padding-bottom: var(--space-7);
  /* .container-xl di Bootstrap centra il box coi suoi auto-margin di
     default: qui li annulliamo (margin-left:0, margin-right:auto).
     Niente più max-width: con un logo di 200px di altezza, un max-width
     stretto (640px) ne forzava una riduzione sproporzionata (larghezza
     limitata dal contenitore, altezza ancora fissa a 200px: il logo ne
     usciva deformato). Il paragrafo (.fp-hero__text) ha comunque il suo
     max-width in ch, quindi resta leggibile anche senza un limite qui.
     Padding sinistro fluido (clamp, non un valore fisso): scala con la
     larghezza dello schermo invece di saltare bruscamente tra due sole
     misure desktop/mobile — 24px al minimo, 8% della larghezza fino a un
     tetto di 120px sugli schermi molto larghi. */
  margin-left: 0;
  margin-right: auto;
  padding-left: clamp(1.5rem, 6vw, 7.5rem);
  color: #ffffff;
  /* Alone scuro morbido attorno alle lettere (al posto della vecchia
     ombra grigia da 1px): sul video il fondo dietro al testo è spesso
     cielo/mare molto chiaro — misurato sui fotogrammi più luminosi, il
     bianco su fondo nudo scende fino a ~1,3:1. Nessun riquadro scuro:
     tre livelli di ombra, dal contorno stretto (che fa da bordo alle
     lettere) a un alone largo e leggero che scurisce solo l'aria intorno
     ai caratteri. Tecnica riconosciuta per testo su immagini variabili. */
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.75),
    0 1px 3px rgba(0, 0, 0, 0.6),
    0 0 14px rgba(0, 0, 0, 0.45);
}

/* Il bottone "Scarica la brochure" ha già il suo fondo bianco pieno: niente
   alone sul testo blu, che ne risulterebbe sporcato. */
.fp-hero__content .btn {
  text-shadow: none;
}

/* Box nero classico, alpha appena percettibile: al posto dell'ombra dura
   sulle singole lettere del logo (tolta, non funzionava bene), un pannello
   scuro dietro all'intero blocco (logo+testi+CTA) gli dà un contorno
   netto rispetto al video, senza dover intervenire lettera per lettera.
   Il padding-top di .fp-hero__content sopra resta FUORI dal pannello
   (serve solo a spingere il blocco sotto la testata fissa): il nero
   comincia da qui, non da lì, altrimenti si vedrebbe un rettangolo scuro
   anche nella fascia vuota tra header e contenuto. */
.fp-hero__title {
  margin: 0 0 var(--space-4) 0;
  line-height: 0; /* evita spazio extra sotto l'immagine dovuto al line-height ereditato */
}

/* Logo A COLORI (non più bianco) grande come elemento centrale dell'Hero,
   su richiesta esplicita del cliente dopo revisione — unica eccezione
   alle regole standard del logo (navbar/footer restano come sono). Stesso
   file nuovo usato in navbar (img/logo/logo-color-payoff.svg), qui
   semplicemente più grande.
   Altezza "target" 200px, non rigida: max-width qui è quello di default
   (100%, ereditato dal reset globale immagini) invece del solito
   max-width:none — se il logo a 200px risultasse più largo dello spazio
   disponibile (schermi molto stretti), si restringe proporzionalmente
   (altezza inclusa) invece di sforare fuori dal contenitore. */
.fp-hero__logo {
  height: 200px;
  width: auto;
}

.fp-hero__subtitle {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: #ffffff;
  margin-bottom: var(--space-3);
}

.fp-hero__text {
  font-size: var(--fs-body);
  color: #ffffff;
  margin-bottom: var(--space-4);
  max-width: 52ch;
}

/* Il bottone CTA "Scarica la brochure" usa già .btn-outline-light-fp
   (definito in style.css): niente da ridichiarare qui. */

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .fp-hero__content {
    /* Offset PROPORZIONALE all'altezza dello schermo: l'Hero prende come
       spazio superiore quello che resta libero una volta sistemati logo,
       testi, bottone, freccia e barra "Aderisci ora" (~680px in tutto),
       così il blocco scende il più possibile senza mai spingere l'Hero
       oltre lo schermo (che nasconderebbe la freccia dietro la barra).
       Minimo 112px = altezza della testata fissa; massimo 290px, il
       valore desiderato, raggiunto dagli schermi alti almeno ~970px.
       Esempi: 844px di altezza -> 164px, 915px -> 235px.
       Versione in vh per i browser che non conoscono svh; svh (altezza
       "piccola" della viewport, con barre del browser visibili) evita
       salti quando la barra degli indirizzi compare/scompare. */
    --hero-offset-top: clamp(112px, calc(100vh - 680px), 290px);
    padding-right: var(--space-2); /* il container-xl ha già il suo gutter */
    padding-bottom: calc(var(--space-8) + 112px); /* spazio per non finire sotto la barra CTA */
  }
  .fp-hero__text {
    line-height: 1.45; /* era 1.6 (ereditato dal corpo testo) */
  }
  .fp-hero__logo {
    height: 110px; /* stessa rete di sicurezza (max-width ereditato) della versione desktop qui sopra */
  }
  .fp-hero__subtitle {
    font-size: 1.72rem; 
    line-height: normal;
  }
}

/* Mobile: svh dove supportato (vedi commento su --hero-offset-top) e
   velo scurente più esteso verso l'alto (fino al 55,5% invece del 50,5%). */
@supports (height: 100svh) {
  @media (max-width: 767.98px) {
    .fp-hero__content {
      --hero-offset-top: clamp(112px, calc(100svh - 680px), 290px);
    }
  }
}
@media (max-width: 767.98px) {
  .fp-hero__scrim {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.30) 52.5%, rgba(0, 0, 0, 0.0) 55.5%);
  }
}


/* --------------------------------------------------------------------------
   CONTROLLI IN FONDO ALL'HERO — freccia di scroll + pausa video
   Entrambi appoggiati sulla stessa linea, SEMPRE sopra la barra fissa
   "Aderisci ora" (sticky-actions.css), che all'apertura della Home copre
   gli ultimi 68px dell'Hero: il loro "bottom" parte dall'altezza della
   barra più un distacco, così non si sovrappongono mai.
   -------------------------------------------------------------------------- */
.fp-hero {
  --hero-cta-bar-h: 68px;              /* = min-height di .fp-cta-bar */
  --hero-controls-gap: var(--space-4); /* distacco sopra la barra */
  --hero-controls-bottom: calc(var(--hero-cta-bar-h) + var(--hero-controls-gap));
}

/* -- Freccia di scroll: puramente decorativa (aria-hidden nel markup) --
   Tre chevron PIENI impilati (più grandi e visibili del singolo chevron a
   linea di prima). L'animazione è una "cascata": ogni chevron compare
   dall'alto, scende e sfuma, con un ritardo di 0,2s sul precedente, così
   i due superiori fanno da scia ("ghost") a quello principale.
   Durata: 3 cicli da 1,4s dopo 0,8s (~5s in tutto), poi si ferma — un
   loop infinito oltre i 5 secondi richiederebbe un comando di pausa
   (WCAG 2.2.2). A riposo (dopo l'animazione, o subito per chi ha
   "riduci movimento") i tre chevron restano fermi a opacità decrescente
   verso l'alto. Sparisce in dissolvenza allo scroll (.fp-scrolled). */
.fp-hero__scroll-cue {
  position: absolute;
  left: 50%;
  bottom: var(--hero-controls-bottom);
  z-index: 1;
  --cue-w: 64px;
  --cue-h: 32px;
  --cue-step: 18px; /* distanza verticale tra un chevron e il successivo */
  width: var(--cue-w);
  height: calc(var(--cue-h) + 2 * var(--cue-step));
  margin-left: calc(var(--cue-w) / -2);
  color: #ffffff;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.fp-hero__scroll-cue-arrow {
  position: absolute;
  left: 0;
  width: var(--cue-w);
  height: var(--cue-h);
  animation: fp-scroll-cue 1.4s ease-in-out 3 backwards;
}
/* Dall'alto al basso: scia leggera, scia media, chevron principale */
.fp-hero__scroll-cue-arrow:nth-child(1) {
  top: 0;
  opacity: 0.35;
  animation-delay: 0.8s;
}
.fp-hero__scroll-cue-arrow:nth-child(2) {
  top: var(--cue-step);
  opacity: 0.65;
  animation-delay: 1s;
}
.fp-hero__scroll-cue-arrow:nth-child(3) {
  top: calc(2 * var(--cue-step));
  opacity: 1;
  animation-delay: 1.2s;
}
@keyframes fp-scroll-cue {
  0%   { opacity: 0; transform: translateY(-12px); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(14px); }
}
body.fp-scrolled .fp-hero__scroll-cue {
  opacity: 0;
}

/* -- Pulsante pausa/riproduci del video (WCAG 2.2.2): sobrio, allineato
   a destra alla griglia del sito, stessa linea della freccia. Logica in
   hero.js (alterna pause()/play(), icona ed etichetta accessibile).
   Cerchio traslucido scuro + bordo bianco: icona bianca su fondo
   scurito, leggibile su qualunque fotogramma. -- */
.fp-hero__video-toggle {
  position: absolute;
  right: clamp(1.5rem, 6vw, 7.5rem); /* speculare al padding sinistro del contenuto */
  bottom: var(--hero-controls-bottom);
  z-index: 1;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.35);
  color: #ffffff;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.fp-hero__video-toggle:hover {
  background-color: rgba(0, 0, 0, 0.55);
  border-color: #ffffff;
}
.fp-hero__video-toggle svg {
  width: 16px;
  height: 16px;
}
.fp-hero__video-toggle-icon[hidden] {
  display: none;
}

/* Schermi bassi (es. laptop in orizzontale con barre del browser): il
   blocco logo+testi, centrato in verticale, scende vicino al fondo e la
   freccia (ora più alta, tre chevron) rischierebbe di toccarlo. Lì la freccia si nasconde; il
   pulsante pausa, piccolo e laterale, resta. Su smartphone in verticale
   non serve: il contenuto ha già un ampio padding inferiore. */
@media (min-width: 768px) and (max-height: 760px) {
  .fp-hero__scroll-cue {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .fp-hero__scroll-cue {
    --cue-w: 52px;
    --cue-h: 26px;
    --cue-step: 15px;
  }
  .fp-hero__video-toggle {
    right: var(--space-3);
  }
}

/* "Riduci movimento": nessuna animazione né ritardo, la freccia compare
   subito nel suo stato di riposo a tre gradini. */
@media (prefers-reduced-motion: reduce) {
  .fp-hero__scroll-cue-arrow {
    animation: none;
  }
}