/* fa-lab-reel — stile dello showreel nel capitolo #storytelling. Solo selettori .fa-reel*. */

/* stage: 16:9, larghezza piena della figura, sfondo #101111, nessun bordo aggiunto, spazio riservato (niente CLS). */
.fa-reel .fa-reel-stage {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #101111;
  background-image: none;
  overflow: hidden;
  perspective: none;
  margin-inline: auto;
}
.fa-reel .fa-reel-poster,
.fa-reel .fa-reel-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* i due video si sovrappongono al poster; scambio istantaneo (le giunzioni sono fotogrammi P identici, niente fade). */
.fa-reel .fa-reel-video { opacity: 0; transition: none; pointer-events: none; }
.fa-reel .fa-reel-video.is-visible { opacity: 1; }

/* didascalia: il sito nasconde .theme-caption (display:none!important); qui la mostriamo con specificità maggiore. */
.fa-reel .fa-reel-caption {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 2px 0;
  margin: 0;
  border: 0;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;               /* la famiglia si eredita */
  color: #d9d9d2;                 /* AA su #101111 */
}
.fa-reel .fa-reel-caption > span { min-width: 0; }
.fa-reel .fa-reel-caption strong { color: #f5f5f2; font-weight: 600; }

/* bottone: coerente con i bottoni testuali del sito (cfr. .theme-replay), area ≥ 24×24, focus visibile, AA. */
.fa-reel .fa-reel-toggle {
  flex-shrink: 0;
  border: 0;
  background: none;
  color: #ff9233;
  font: inherit;
  font-weight: 600;
  min-width: 24px;
  min-height: 24px;
  padding: 6px 8px;
  cursor: pointer;
}
.fa-reel .fa-reel-toggle[hidden] { display: none; }
.fa-reel .fa-reel-toggle:hover { color: #ffa65a; }
.fa-reel .fa-reel-toggle:focus-visible { outline: 2px solid #ff9233; outline-offset: 2px; border-radius: 2px; }
/* area toccabile >=44x44 solo su puntatore grosso (touch); l'aspetto desktop resta invariato */
@media (pointer: coarse) { .fa-reel .fa-reel-toggle { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } }

/* vincolo anti-overflow: sotto una certa altezza della finestra (desktop) la figura si restringe mantenendo 16:9,
   così .chapter-intro non sfora. Minimo 384 px. Su mobile (≤700px, modalità statica) resta a larghezza piena. */
@media (min-width: 701px) and (max-height: 820px) {
  .fa-reel .fa-reel-stage {
    /* mantiene aspect-ratio 16/9 (height segue): limita la LARGHEZZA in funzione dell'altezza disponibile,
       così lo stage resta 16:9 e .chapter-intro non sfora. 430px ≈ testo del capitolo + barre. Minimo 384px. */
    width: min(100%, calc((100vh - 430px) * 16 / 9));
    min-width: 384px;
    margin-inline: auto;
  }
}