/* film.css — a featured challenge film with its explanation (H06), and
   a testimonial with its clip (H10).

   .film-feature   the choices and task text first in the source (choose,
                   read, watch); from 1024 px the film (5 columns) sits to
                   the left of them (6). A grid of .choice buttons picks the
                   challenge; the film and its task panel change together
                   (assets/js/film.js). Without JS every task text shows as
                   a list. One film at a time, no looping previews: motion
                   only when someone presses play.
   .quote          pull quote in the editorial italic, attribution upright.

   Players: .media[data-player] shows a poster and a .play button; pressing
   it swaps in a native <video controls> with sound (assets/js/player.js).
   Without JS the poster links straight to the film file. The testimonial
   clips and, since 10 Oct 2026, the class film use it. */
.film-feature { align-items: start; row-gap: var(--space-6); }
.film-feature__text, .film-feature__media { grid-column: 1 / -1; }
.film-feature__media .media { aspect-ratio: 4 / 5; width: 100%; max-width: 440px; }
@media (min-width: 1024px) {
  .film-feature__media { grid-column: 1 / span 5; grid-row: 1; }
  .film-feature__text { grid-column: 7 / span 6; grid-row: 1; }
}
@media (max-width: 1023px) {
  .film-feature__media .media { aspect-ratio: 1 / 1; max-width: 520px; }
}
.film-feature h2 { margin: 0 0 var(--space-6); }
.film-feature__choices { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-6); }
@media (min-width: 1024px) { .film-feature__choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); } }
.film-feature__detail { padding-top: var(--space-5); border-top: 1px solid var(--on-line); }
.film-feature__detail h3 { margin: 0 0 var(--space-2); }
.film-feature__detail p { max-width: var(--measure); margin: 0; }
.film-feature__task + .film-feature__task { margin-top: var(--space-5); } /* no-JS list */
.film-feature__harder { color: var(--on-text); }
.film-feature__harder strong { font-weight: var(--weight-strong); }

.quote-feature { align-items: center; row-gap: var(--space-6); }
.quote-feature .media { aspect-ratio: 4 / 5; width: 100%; max-width: 480px; }
.quote { margin: 0 0 var(--space-5); }
.quote p {
  margin: 0;
  font-size: var(--text-h3);
  line-height: 1.3;
  max-width: 28ch;
}
.quote__who { margin: 0; font-size: var(--text-ui); }
.quote__who strong { font-weight: var(--weight-strong); }

/* players: the poster is cropped to the frame; once playing, the whole
   9:16 film shows, captions included (a user-started change of size) */
.media[data-player] > video.media__film { background: var(--color-brand-ink); object-fit: contain; }
/* portrait only for the 9:16 clips; the class film (self-hosted since
   10 Oct 2026, 16:9) keeps its frame */
.media[data-player][data-src].is-playing:not(.class-film .media) { aspect-ratio: 9 / 16; max-height: 85vh; max-height: 85svh; }   /* svh: on a phone the film and its controls stay above the browser's bars */
/* a film that cannot load (10 Oct 2026, player.js): the play tab, in its
   own colours, carries one short line instead, regular weight in the muted
   reading colour, wrapping inside the frame; pressing it tries again */
.media.is-failed .play { max-width: calc(100% - 2 * var(--space-5)); padding: var(--space-2) var(--space-4); color: var(--color-text-muted-reading); font-weight: var(--weight-regular); line-height: 1.4; text-align: left; }
.media__fallback { position: absolute; inset: 0; }
.js .media__fallback { display: none; }

/* closing focal field */
.closing { align-items: end; row-gap: var(--space-6); }
.closing h2 { margin: 0 0 var(--space-4); }
.closing p { max-width: 46ch; margin: 0; }
@media (min-width: 1024px) { .closing__action { justify-self: end; } }

/* testimonial posters carry burned-in captions in their lower third: show
   the top of the frame (face) and keep the caption out of the cropped still */
.quote-feature .media > img { object-position: 50% 0%; }

/* without JS only the first challenge and its film link are offered */
html:not(.js) .film-feature__choices { display: none; }