/* Filmele demo ale platformei, filmate din producție cu Playwright (ops/video/).
   Regula de greutate: un film web are 3-8 MB, deci NIMIC nu se preîncarcă. Fiecare video
   pornește de la posterul lui .webp (sub 200 KB) și se descarcă abia când omul apasă play.
   Singura excepție e filmul-vedeta din capul paginii, marcat cu .film-auto, care înlocuiește
   o animație ce pornea singură. */

.film {
  margin: 22px 0 0;
  border-radius: 16px;
  overflow: hidden;
  /* rama filmului urmează pagina deschisă; filmul din ea rămâne cum e filmat */
  background: #F1F2F5;
  border: 1px solid #E4E6EB;
}

.film video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #0D0E10;
}

.film figcaption {
  padding: 10px 14px 12px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #8A8D95;
}

.film figcaption b { color: #0D0E10; font-weight: 600; }

/* pe fundal întunecat (landing) legenda trebuie să rămână lizibilă */
.harta .film figcaption, section.alt .film figcaption, #demo .film figcaption { color: #A3B1CC; }
.harta .film figcaption b, section.alt .film figcaption b, #demo .film figcaption b { color: #fff; }

/* banda de filme din „Cum funcționează": două pe rând pe desktop, unul pe telefon */
.film-banda {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 26px;
}

.film-banda .film { margin: 0; }

@media (max-width: 860px) {
  .film-banda { grid-template-columns: 1fr; }
}

/* Cine cere mișcare redusă nu primește film pornit singur. Atributul `autoplay` se scoate din
   JS (vezi film.js) pentru că un `@media` nu poate opri redarea; regula de aici doar oprește
   orice tranziție rămasă. */
@media (prefers-reduced-motion: reduce) {
  .film video { transition: none; }
}