/* BME Julejakten – filmene (stående 9:16). Brukes på forsiden og Julejakten-sidene. */
.jj-film { margin: 0; width: 100%; max-width: 320px; }
.jj-film-ramme {
  position: relative; display: block; width: 100%; aspect-ratio: 9 / 16;
  border: 3px solid #F5BD45; border-radius: 8px; overflow: hidden;
  background: #0E2A18; box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
}
.jj-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #0E2A18; }
.jj-film-spill {
  position: absolute; inset: 0; z-index: 1; width: 100%; padding: 0; border: 0; cursor: pointer;
  background: linear-gradient(to top, rgba(14, 42, 24, .55), rgba(14, 42, 24, 0) 45%);
  display: grid; place-items: center;
}
.jj-film-spill span {
  width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center;
  background: #E5483B; box-shadow: 0 0 0 5px #F5BD45, 0 8px 24px rgba(0, 0, 0, .4);
  transition: transform .2s ease;
}
.jj-film-spill svg { width: 36px; height: 36px; fill: #fff; margin-left: 6px; }
.jj-film-spill:hover span { transform: scale(1.08); }
.jj-film-spill:focus-visible { outline: 3px solid #F5BD45; outline-offset: -6px; }
.jj-film-spill .lengde {
  position: absolute; right: 10px; bottom: 10px; width: auto; height: auto; border-radius: 4px;
  background: rgba(14, 42, 24, .85); box-shadow: none; color: #fff; font: 700 13px/1 system-ui, sans-serif; padding: 5px 7px;
}
.jj-film.spiller .jj-film-spill { display: none; }
.jj-film figcaption { margin-top: 10px; font-weight: 700; }
.jj-film figcaption small { display: block; font-weight: 500; opacity: .8; }
@media (prefers-reduced-motion: reduce) { .jj-film-spill span { transition: none; } }