/* SCRIM DEGLI HERO — un solo componente per Home, The Intelligence e Capital View.
   6 settembre 2026.

   Perche' esiste. Sopra un video o una fotografia il contrasto del testo non e'
   una proprieta' del CSS: e' una proprieta' del FOTOGRAMMA, e cambia mentre il
   video scorre. Misurato su iPhone 390px, campionando i pixel dietro il testo:
     home            "London Property, Decoded"            3,26:1
     intelligence    titolo dell'hero                      1,02:1   bianco su pietra chiara
     intelligence    sommario sotto il titolo              1,05:1
     capital-view    sommario sotto il titolo              1,07:1
   La soglia leggibile e' 4,5:1. Un colore dichiarato bianco non dice niente su
   cosa ci sia sotto, ed e' per questo che il difetto non si vede da desktop
   guardando il codice.

   Cosa fa: una velatura scura fra il media e il testo, piu' densa in alto (dove
   sta la barra) e in basso (dove stanno i bottoni), leggera al centro perche'
   l'immagine deve restare l'immagine. Il testo torna bianco pieno con
   un'ombra corta, che regge anche sul fotogramma piu' chiaro.

   NON e' un ritocco per telefono: la stessa velatura vale a ogni larghezza,
   perche' il difetto dipende dal video e non dallo schermo. Su mobile e' un
   po' piu' densa, perche' li' il testo e' grande e occupa quasi tutto l'hero. */

.video-hero, section.hero { position: relative; }

.video-hero::after,
section.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;              /* sopra il media (1), sotto il testo (3) */
  pointer-events: none;    /* non deve rubare i tocchi ai bottoni sotto */
  background:
    linear-gradient(to bottom,
      rgba(8, 16, 32, 0.58) 0%,
      rgba(8, 16, 32, 0.26) 42%,
      rgba(8, 16, 32, 0.74) 100%),
    linear-gradient(to right,
      rgba(8, 16, 32, 0.50) 0%,
      rgba(8, 16, 32, 0.08) 68%);
}

/* Il testo DEVE stare sopra la velatura. Lo dichiaro qui per tutte e tre le
   pagine invece di fidarmi degli z-index che ognuna si e' data per conto suo:
   erano 2 su capital-view e 3 su intelligence, e un componente condiviso che
   dipende da quale pagina lo ospita non e' condiviso. */
.video-hero-inner,
.video-hero .video-hero-ctas,
section.hero .hero-content,
section.hero .container { position: relative; z-index: 3; }

.video-hero-title,
.video-hero-lead,
section.hero .hero-content h1,
section.hero .hero-content h2,
section.hero .hero-content p,
section.hero .hero-content li {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 16px rgba(0, 0, 0, 0.38);
}

/* Il sopratitolo resta del colore del marchio: e' un'etichetta, non prosa, e
   sulla velatura arriva gia' sopra la soglia. L'ombra la porta comunque. */
.video-hero .eyebrow,
section.hero .eyebrow,
section.hero .hero-eyebrow {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

@media (max-width: 860px) {
  .video-hero::after,
  section.hero::after {
    background:
      /* MISURATA, non scelta a occhio. Con 0,66/0,38/0,80 il titolo della home
         restava a 3,63:1 sopra un fotogramma chiaro: sotto la soglia di 4,5.
         La densita' qui sotto e' quella che porta il caso peggiore sopra la
         soglia, non quella che "sembra giusta". */
      linear-gradient(to bottom,
        rgba(8, 16, 32, 0.78) 0%,
        rgba(8, 16, 32, 0.62) 45%,
        rgba(8, 16, 32, 0.86) 100%);
  }
}

/* IL TASTO PLAY — compare solo se il video e' rimasto fermo (vedi hero-play.js).
   Area di tocco 48px in LARGHEZZA E ALTEZZA: una verifica che guarda solo
   l'altezza approva una scheggia larga 36px. */
.hero-play-btn {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 4;                        /* sopra la velatura e sopra il testo */
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  min-width: 132px;
  justify-content: center;
  padding: 12px 20px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: rgba(8, 16, 32, 0.72);
  color: #ffffff;
  font: 600 14px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.hero-play-btn:hover, .hero-play-btn:focus-visible { background: rgba(8, 16, 32, 0.88); }
.hero-play-btn svg { flex: 0 0 auto; }
.hero-play-btn--fallito { opacity: .55; }