/* The one-minute film on the Educator Hub's public page.
   It is not a video file. The browser draws it as it plays (film.js, built
   from lesson-videos/src/hub), so it takes the shape of the box it is given
   here and brings its own controls. Those controls are the case films'
   (/cases/film.css), kept to this box. */

/* ── The band, and the box the film is drawn in ─────────────────────────── */
.hub-filmband {
    background: #0e1724;      /* the film's first colour, so nothing flashes while it arrives */
}

.hub-film {
    --lf-ink: #18211f;
    --lf-muted: #56605b;
    --lf-line: rgba(24, 33, 31, 0.12);
    --lf-brand: #234d6f;
    --lf-surface: #ffffff;
    --lf-bar: 53px;           /* how tall the controls are */
    /* The whole width of the page, and as much height as leaves the controls
       in view under the page's header. Never narrower than a film (16:9): a
       box that is wider only shows more of the room. */
    --lf-picture: min(56.25vw, calc(100svh - 9rem));
}

/* The controls follow the page's theme. The picture does not: it is a film. */
.dark .hub-film {
    --lf-ink: #f9fafb;
    --lf-muted: #a7b0bd;
    --lf-line: #374151;
    --lf-brand: #7fb3dd;
    --lf-surface: #1f2937;
}

/* Before film.js arrives: the film's first frame, as a picture, in the box the
   film will take. It is drawn as wide as a frame gets and cropped at the sides,
   the way the film itself fills a box. */
.hub-film:not(.is-live) {
    height: calc(var(--lf-picture) + var(--lf-bar));
    background: #0e1724 url("poster-wide.jpg") center top / auto var(--lf-picture) no-repeat;
}

.hub-film .lf-stage {
    width: 100%;
    height: var(--lf-picture);
}

/* A phone held upright: the film stands upright too, and takes the screen. */
@media (max-width: 700px) and (orientation: portrait) {
    .hub-film {
        --lf-picture: calc(100svh - var(--lf-bar) - 4.25rem);
    }

    .hub-film:not(.is-live) {
        background-image: url("poster-tall.jpg");
        background-size: 100% auto;
    }
}

/* A phone held sideways: the film is the page. */
@media (orientation: landscape) and (max-height: 520px) {
    .hub-film {
        --lf-picture: calc(100svh - var(--lf-bar));
    }
}

/* ── The film: the picture, and its controls underneath ─────────────────── */
.hub-film .lf {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* It takes the focus when it is started, so that the keyboard is its own
   (Space, the arrows, M, C, F); that is not something to draw a ring round. */
.hub-film .lf:focus {
    outline: none;
}

.hub-film .lf-key:focus-visible {
    outline: 3px solid var(--lf-brand);
    outline-offset: 2px;
}

/* Full screen. Where the browser offers the real thing, the film uses it. An
   iPhone offers it to videos only, so there the film takes over the browser
   window instead. Either way it gets this class. */
.hub-film .lf.lf-full {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    touch-action: none;
}

.hub-film .lf.lf-full .lf-stage {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
}

/* Clear of the notch at the sides and the home bar at the foot. */
.hub-film .lf.lf-full .lf-bar {
    padding: 6px max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
}

/* A phone held sideways has no height to spare. The controls lie over the
   foot of the picture, and are put away while the film plays. */
.hub-film .lf.lf-over .lf-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-top: 0;
    background: color-mix(in srgb, var(--lf-surface) 94%, transparent);
    transition: opacity 0.2s ease, transform 0.2s ease;
    /* Just clear of the home bar: the full strip an iPhone asks for would cost the picture too much. */
    padding-bottom: max(6px, min(12px, env(safe-area-inset-bottom)));
}

.hub-film .lf.lf-over.lf-playing .lf-bar {
    opacity: 0;
    transform: translateY(100%);
    pointer-events: none;
}

/* Measures the strip an iPhone keeps at the foot of the screen for its home bar. */
.hub-film .lf-safe {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: env(safe-area-inset-bottom, 0px);
    visibility: hidden;
    pointer-events: none;
}

/* While the film fills the window, the page behind it stays put. (It also
   takes the film's colour then: film.js sets that.) */
html.lf-locked,
html.lf-locked body {
    overflow: hidden;
}

.hub-film .lf-bar {
    display: flex;
    align-items: center;
    gap: 2px;
    box-sizing: border-box;
    min-height: var(--lf-bar);
    padding: 6px max(8px, calc((100% - 1180px) / 2));     /* in line with the page's own column */
    border-top: 1.5px solid var(--lf-line);
    background: var(--lf-surface);
    color: var(--lf-ink);
    font: 400 15px/1.4 Outfit, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.hub-film .lf-key {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--lf-ink);
    font: inherit;
    cursor: pointer;
}

.hub-film .lf-key:hover {
    background: color-mix(in srgb, var(--lf-ink) 9%, transparent);
}

/* Shown in place of the pause sign while the film waits for its sound. */
.hub-film .lf-spin {
    width: 18px;
    height: 18px;
    border: 2.5px solid color-mix(in srgb, var(--lf-ink) 22%, transparent);
    border-top-color: var(--lf-ink);
    border-radius: 50%;
    animation: hub-film-spin 0.8s linear infinite;
}

@keyframes hub-film-spin {
    to {
        transform: rotate(360deg);
    }
}

.hub-film .lf-cc {
    width: auto;
    height: 26px;
    margin: 0 7px;
    padding: 0 7px;
    border: 1.5px solid var(--lf-ink);
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.hub-film .lf-cc[aria-pressed="true"],
.hub-film .lf-cc[aria-pressed="true"]:hover {
    background: var(--lf-ink);
    color: var(--lf-surface);
}

.hub-film .lf-track {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-width: 60px;
    height: 40px;
    margin: 0 8px 0 6px;
}

.hub-film .lf-track input {
    width: 100%;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.hub-film .lf-track input:focus-visible {
    outline: 3px solid var(--lf-brand);
    outline-offset: -8px;
    border-radius: 12px;
}

.hub-film .lf-track input::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right, var(--lf-brand) var(--done, 0%), color-mix(in srgb, var(--lf-ink) 16%, transparent) var(--done, 0%));
}

.hub-film .lf-track input::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--lf-ink) 16%, transparent);
}

.hub-film .lf-track input::-moz-range-progress {
    height: 6px;
    border-radius: 3px;
    background: var(--lf-brand);
}

.hub-film .lf-track input::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    margin-top: -5px;
    border: 0;
    border-radius: 50%;
    background: var(--lf-brand);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    -webkit-appearance: none;
}

.hub-film .lf-track input::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 0;
    border-radius: 50%;
    background: var(--lf-brand);
}

.hub-film .lf-time {
    flex: none;
    margin-right: 2px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--lf-muted);
    white-space: nowrap;
}

/* A phone has its own volume keys; the room goes to the track instead. */
@media (max-width: 480px) {
    .hub-film .lf-mute {
        display: none;
    }
}

/* And on the narrowest the clock goes too: the track says as much. */
@media (max-width: 380px) {
    .hub-film .lf-time {
        display: none;
    }
}