/* ==========================================================================
   Hello Hubble — il tema della pagina /hellohubble/

   La pagina e' la home di Hubble con un altro abito: stessi componenti, stessa
   griglia, stesso JS. Questo foglio fa due cose sole:

   1. ridefinisce i token sotto `.theme-hello`, cosi' tutto cio' che nella home
      e' viola qui diventa rosso-arancio senza toccare un componente;
   2. disegna le poche parti che in Hello Hubble sono diverse davvero: l'hero,
      la foto al posto del video, le cifre della selezione, la CTA, il footer.

   Tutto e' sotto `.theme-hello`: caricato per errore sulla home non
   cambierebbe niente. Valori misurati sulla fonte (post-1451.css e valori
   calcolati della pagina dal vivo, 1440x900).
   ========================================================================== */

.theme-hello {
  --color-primary: #CC4018;              /* fondi, eyebrow, accenti          */
  --color-orange: #F2960C;               /* coda dei gradienti               */
  --color-orange-band: #F2870C;          /* fascia del carosello             */
  --color-ink-warm: #170B00;             /* testo sui bottoni gialli         */
  --color-cta: #FFCE3A;                  /* Apply Now                        */
  --color-cta-border: #E0AE1C;
  --color-cta-hover: #FFD95E;
  --color-footer-bar: #000000;
  --color-nav-surface: rgba(204, 64, 24, 0.88);
  --color-nav-border: rgba(155, 40, 7, 0.88);
  --color-nav-item: #9B2807;
  --color-nav-item-active: #B5330D;
  --color-nav-item-border: #8A2306;

  --gradient-benefit: linear-gradient(140deg, #CC4018 0%, #F2960C 100%);
  --gradient-stat: linear-gradient(to left bottom, #F2960C 0%, #CC4018 100%);
  --gradient-carousel-band: linear-gradient(var(--color-orange-band) 0%, var(--color-orange-band) 80%, #FFFFFF 80%, #FFFFFF 100%);
}

/* --------------------------------------------------------------------------
   Hero — video cosmico a tutto schermo, marchio pixel, tre loghi bianchi
   -------------------------------------------------------------------------- */
.hh-hero {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: #000;
}
.hh-hero__media {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hh-hero__video { position: absolute; }
/* Due classi, non una: il video porta anche `.hero__video` (lo script della
   home lo cerca per quel nome), e le regole della home per il telescopio lo
   centrano con `translate(-50%, -50%)` e da 1024 in giu' lo ancorano in basso
   con `object-fit: contain`. Qui va solo steso su tutto l'hero. */
.hh-hero .hero__video {
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
  object-fit: cover;
  object-position: center;
}
/* La lastra della fonte: una foto di nebulosa moltiplicata sul video, che
   scurisce i bianchi del clip e lo tinge di rosso. */
.hh-hero__plate {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: url("../assets/hello/hero-bg.webp") center / cover no-repeat;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.hh-hero__container {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: calc(var(--container-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* 768 su 1320 a desktop, contenuto centrato in verticale: misurato, il blocco
   va da 206 a 693 su 900, cioe' esattamente in mezzo. */
.hh-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  width: min(768px, 100%);
  padding: 10px;
}
.hh-hero__logo { margin: 0; }
.hh-hero__logo img { width: 598px; max-width: 100%; height: auto; }
.hh-hero__tagline {
  font-family: var(--font-display);
  font-size: 2.8rem;                     /* 44.8px */
  line-height: 4.2rem;                   /* 67.2px */
  font-weight: 400;
  color: var(--color-white);
}
.hh-hero__partners {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-5);
}
.hh-hero__partners img { width: 169px; height: auto; }

@media (max-width: 1024px) {
  .hh-hero__logo img { width: 460px; }
  .hh-hero__tagline { font-size: var(--type-body-xl-size); line-height: 2.5rem; }
  .hh-hero__partners img { width: 140px; }
}
/* Telefono, misurato sulla fonte a 375: hero alto 682 su 812 (84%), marchio
   264, tagline 25.6/38.4, loghi da 80 a 12px l'uno dall'altro. */
@media (max-width: 767px) {
  .hh-hero { min-height: 84vh; min-height: 84svh; }
  .hh-hero__container { padding-inline: var(--gutter); }
  .hh-hero__copy { padding: 0; gap: var(--space-6); }
  .hh-hero__logo img { width: 264px; }
  .hh-hero__tagline { font-size: 1.6rem; line-height: 2.4rem; }
  .hh-hero__partners { gap: 12px; }
  .hh-hero__partners img { width: 80px; }
}

/* --------------------------------------------------------------------------
   Programma — una fotografia dove la home ha il video YouTube
   -------------------------------------------------------------------------- */
/* Riusa la cornice del video per la colonna e la posizione, ma la foto e' 3:2
   e non ha l'ombra viola del lettore. */
.theme-hello .hh-programma__photo {
  aspect-ratio: 3 / 2;
  background: none;
  box-shadow: none;
}
.theme-hello .hh-programma__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Percorso — titolo e tappe nel colore del programma, fascia con gli studenti
   -------------------------------------------------------------------------- */
.theme-hello .percorso__title { color: var(--color-primary); }
.theme-hello .percorso__title b { font-weight: 700; }
.theme-hello .timeline-step__title { color: var(--color-primary); }
.theme-hello .timeline-step__body { color: var(--color-black); }
/* La home ha un razzo in parallasse; qui la foto scorre con la pagina, come
   nella fonte (`background-attachment: scroll`). */
.theme-hello .percorso__band {
  background-image: url("../assets/hello/band-studenti.webp");
  background-attachment: scroll;
}

/* --------------------------------------------------------------------------
   Selezione — tre cifre in gradiente invece di due in viola
   -------------------------------------------------------------------------- */
.theme-hello .stat__value {
  font-size: 5rem;                       /* 80px */
  line-height: 6rem;                     /* 96px */
  background: var(--gradient-stat);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.theme-hello .stat__label {
  font-size: 1.8rem;                     /* 28.8px */
  line-height: 2.5rem;                   /* 40px */
  color: var(--color-black);
}
@media (max-width: 767px) {
  .theme-hello .stat__value { font-size: 3rem; line-height: 3rem; }
  .theme-hello .stat__label { font-size: 1.4rem; line-height: 2.5rem; }
}

/* --------------------------------------------------------------------------
   CTA — Cestello in rosso, marchio pixel, bottone giallo
   -------------------------------------------------------------------------- */
.theme-hello .cta { background-image: url("../assets/hello/cta-cestello.webp"); }
.theme-hello .cta__visual { background-image: url("../assets/hello/hello-hubble-logo.png"); }
/* Sul telefono la fonte toglie il marchio: il blocco finisce sul bottone. */
@media (max-width: 767px) {
  .theme-hello .cta__visual { display: none; }
}

.theme-hello .btn--primary,
.theme-hello .btn--compact { color: var(--color-ink-warm); }
.theme-hello .btn--compact { color: var(--color-black); }
.theme-hello .btn--primary:hover,
.theme-hello .btn--compact:hover { background: var(--color-cta-hover); }

/* --------------------------------------------------------------------------
   Menu a tutto schermo e popup di candidatura
   -------------------------------------------------------------------------- */
.theme-hello .menu-overlay { background: var(--color-primary); }
.theme-hello .menu-overlay__link { color: var(--color-white); }
.theme-hello .menu-overlay__link:hover { color: var(--color-cta); }
.theme-hello .menu-overlay__close { color: var(--color-white); }

.theme-hello .btn--modal { color: var(--color-ink-warm); background: var(--color-cta); }
.theme-hello .btn--modal:hover { background: var(--color-cta-hover); }

/* --------------------------------------------------------------------------
   Footer — nero, loghi gia' bianchi
   -------------------------------------------------------------------------- */
.theme-hello .site-footer__main { background: var(--color-black); }
/* La home ottiene le sagome bianche con un filtro sui file scuri; qui i file
   sono gia' bianchi, e il filtro li spegnerebbe. */
.theme-hello .site-footer__brand,
.theme-hello .site-footer__logos { filter: none; }
.theme-hello .site-footer__brand img { max-width: 261px; }
/* I tre loghi della home, sotto i 1025, sono tarati uno per uno sull'imbottitura
   dei file scuri (altezze e margini negativi in `--ink`, decisione 29). Questi
   file bianchi sono ritagliati a filo e piu' larghi: con quelle regole il terzo
   usciva dallo schermo di 59px a 375. Qui una regola sola a ogni larghezza:
   194px come nella fonte, che si stringono insieme quando manca posto.
   `:nth-child(n)` serve solo a pesare quanto le regole che sostituisce. */
/* `min-width: 0` sulla colonna: senza, a tablet la riga dei loghi la
   allargava fino a 974px su 834 invece di stringere i loghi. */
.theme-hello .site-footer__promoters { min-width: 0; }
.theme-hello .site-footer__logos {
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: var(--space-5);
}
.theme-hello .site-footer__logos img:nth-child(n) {
  flex: 0 1 194px;
  width: auto;
  min-width: 0;
  max-width: 194px;
  height: auto;
  margin-inline: 0;
}
@media (max-width: 767px) {
  .theme-hello .site-footer__logos { gap: var(--space-3); }
}
.theme-hello .btn-footer:hover { color: var(--color-black); }