/* Hero video full-bleed a tutta finestra.
   Estratto da css/in-abbonamento.css (righe 34-94) e rinominato .abb-hero-* ->
   .hero-video-*, così da poter essere riusato da più pagine. Caricato solo dai
   template che lo chiedono (theme://css/hero-video.css), mai globalmente.
   Tutto è namespaced sotto .hero-video-* per non collidere con Spectre o con
   il tema: qui non si ridefinisce nulla di globale.

   Differenze rispetto all'originale di in-abbonamento:
   1. altezza a tutta finestra (min-height: 100vh/100svh);
   2. il poster in prefers-reduced-motion ora si vede davvero — arriva come
      background-image inline dal template, qui c'è solo il colore di fallback;
   3. niente compensazione dell'header fisso: questa pagina usa
      `header-dark header-transparent`, quindi l'header galleggia sopra il
      video invece di occupare spazio in cima. */

.hero-video-container {
  --hero-video-dark: #2A2E35;
  --hero-video-cream: #F4F1EE;
  --hero-video-veil: rgba(42, 46, 53, 0.72);
  --hero-video-text: #FFFFFF;
  --hero-video-lead: #D7DBE2;
  --hero-video-eyebrow: #BFD8FA;

  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;

  /* A tutta finestra. Prima 100vh come fallback per chi non conosce svh, poi
     100svh: sui browser mobili svh è la finestra *piccola*, quella con le
     barre del browser visibili, quindi l'hero non finisce mai tagliato sotto
     la barra degli indirizzi come farebbe con vh. */
  min-height: 100vh;
  min-height: 100svh;

  /* Il padding non serve a compensare l'header (qui è trasparente e
     sovrapposto): serve alle finestre basse — telefono in orizzontale, finestra
     desktop schiacciata — dove il contenuto centrato arriverebbe a toccare la
     barra di navigazione. */
  padding: 5rem 0 4rem;

  /* Fallback quando il poster manca o non è ancora arrivato. Il
     background-image col poster lo mette il template inline, perché il path
     sta nel frontmatter. */
  background-color: var(--hero-video-dark);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.hero-video-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Velo scuro: senza, il testo bianco sparisce ogni volta che nella clip passa
   un muro chiaro o un lampione. */
.hero-video-overlay {
  position: absolute;
  inset: 0;
  background: var(--hero-video-veil);
  z-index: 1;
}

.hero-video-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

/* ---------- copy dentro l'hero ---------- */

/* Ultimo aiuto alla leggibilita' dove lo sfondo resta mosso: un'ombra morbida,
   non un contorno — sul velo scuro non si vede, separa e basta. */
.hero-video-container--video .hero-video-title,
.hero-video-container--video .hero-video-lead {
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

.hero-video-eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hero-video-eyebrow);
  margin: 0 0 18px;
}

/* Il tema, con body_classes `title-h1h2`, imposta `.title-h1h2 h1 {
   font-weight: 100 }`: su un titolo grande sopra un video notturno il peso 100
   si sfilaccia. Il selettore piu' lungo basta a vincere, senza !important —
   stessa scelta fatta in in-abbonamento.css. */
.hero-video-container .hero-video-title {
  font-size: 44px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--hero-video-text);
  margin: 0 0 20px;
}

.hero-video-lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--hero-video-lead);
  margin: 0 auto;
  max-width: 520px;
}

/* ---------- segnale di scorrimento ---------- */

.hero-video-cue {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
}

.hero-video-cue span {
  display: block;
  width: 13px;
  height: 13px;
  border-right: 2px solid rgba(255, 255, 255, 0.75);
  border-bottom: 2px solid rgba(255, 255, 255, 0.75);
  transform: rotate(45deg);
  animation: hero-video-cue-bob 1.8s ease-in-out infinite;
}

@keyframes hero-video-cue-bob {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.5; }
  50%      { transform: rotate(45deg) translate(4px, 4px); opacity: 1; }
}

/* ---------- mobile ---------- */

@media (max-width: 640px) {
  /* Sul telefono la clip viene ritagliata piu' stretta e i muri chiari
     salgono proprio dietro al titolo: il velo va alzato. Stessa correzione,
     e stesso motivo, di in-abbonamento.css. */
  .hero-video-overlay { background: rgba(42, 46, 53, 0.8); }

  .hero-video-container { padding: 4.5rem 0 3.5rem; }
  .hero-video-container .hero-video-title { font-size: 31px; }
  .hero-video-lead { font-size: 15.5px; }
}

/* ---------- meno animazioni ---------- */

/* Chi ha chiesto meno animazioni si tiene il poster fermo. Basta nascondere il
   <video>: sotto c'e' gia' il background-image col poster, messo inline dal
   template, e sotto ancora il colore di fallback qui sopra. La regola
   originale provava a rimettere il poster da CSS
   (`background: var(--abb-dark) center/cover no-repeat`) ma senza url(): non
   mostrava mai niente, restava il grigio piatto. */
@media (prefers-reduced-motion: reduce) {
  .hero-video-media { display: none; }
  .hero-video-cue span { animation: none; opacity: 0.8; }
}

/* ---------- logo sopra il video ---------- */

/* Con `header-dark` il tema schiarisce il logo con
   `.header-dark #header:not(.scrolled) .logo svg path { fill: #fff }`, ma qui
   il logo non e' un SVG inline: partials/logo.html.twig lo stampa come
   <img src=".../Logo-Grigio.svg"> perche' il tema ha `custom_logo`
   configurato. Su un <img> quella regola non arriva, e il logo grigio resta
   grigio sopra il video: illeggibile. Il filtro lo porta a bianco pieno
   qualunque sia il colore di partenza, e smette di applicarsi appena
   site.js aggiunge .scrolled e l'header torna opaco.
   Vale solo per le pagine che caricano questo file. */
.header-dark #header:not(.scrolled) .logo img {
  filter: brightness(0) invert(1);
}

/* ---------- raccordo col contenuto sotto ---------- */

/* Il tema mette `.header-fixed #body-wrapper { padding-top: 4rem }` per
   liberare l'header fisso. Dopo un hero alto quanto la finestra quei 4rem sono
   un buco: l'header sta gia' sopra l'hero. Il tema stesso fa lo stesso
   azzeramento per il proprio hero (`.header-fixed .hero + #start > #body-wrapper`),
   qui serve la variante per il nostro. */
.header-fixed .hero-video-container + #body-wrapper { padding-top: 0; }