/* ── Shared film controls ────────────────────────────────────────────────────
   The control row for the three framed players: the founder's note on
   Home, the practice film on About, the studio film on Team.

   The FRAME is what goes fullscreen, not the <video>. That keeps the house
   play and sound discs sitting over the picture instead of handing the viewer
   the browser's own player chrome halfway through a film. iOS Safari has no
   element fullscreen at all, so the script falls back to the video's native
   one there and the system player takes over; that is the only place the
   experience differs. */

/* The button ships hidden and the script reveals it only where the API exists,
   so a browser without fullscreen never gets a disc that does nothing. */
[data-act="fullscreen"][hidden] { display: none !important; }

[data-act="fullscreen"] svg { width: 11px; height: 11px; flex-shrink: 0; display: block; }
[data-act="fullscreen"] svg[hidden] { display: none; }

/* The frame is normally a sized 16/9 box inside the page grid. As the
   fullscreen element it has to give that sizing up, and the picture moves from
   cover to contain so a film whose aspect does not match the screen is shown
   whole rather than cropped. */
.filmband__frame:fullscreen,
.founder-video:fullscreen {
  width: 100vw; height: 100vh;
  max-width: none; max-height: none;
  aspect-ratio: auto;
  border: 0; border-radius: 0; box-shadow: none;
  background: #000;
}
.filmband__frame:fullscreen video,
.founder-video:fullscreen video { object-fit: contain; }

/* A corner inset tuned for a 1040px frame reads as cramped at 2560px. */
.filmband__frame:fullscreen .filmband__controls,
.founder-video:fullscreen .founder-controls { left: 1.75rem; bottom: 1.75rem; }

/* Safari still answers to the prefixed pseudo-class only, and it needs its own
   rule: one selector the engine does not know drops the whole list. */
.filmband__frame:-webkit-full-screen,
.founder-video:-webkit-full-screen {
  width: 100vw; height: 100vh;
  max-width: none; max-height: none;
  aspect-ratio: auto;
  border: 0; border-radius: 0; box-shadow: none;
  background: #000;
}
.filmband__frame:-webkit-full-screen video,
.founder-video:-webkit-full-screen video { object-fit: contain; }
.filmband__frame:-webkit-full-screen .filmband__controls,
.founder-video:-webkit-full-screen .founder-controls { left: 1.75rem; bottom: 1.75rem; }

/* The team film's controls are lettered pills rather than discs. A third pill
   reading FULLSCREEN pushes the row past the frame at phone width, so there the
   control keeps its icon only; its name stays on the button for screen readers. */
@media (max-width: 720px) {
  [data-act="fullscreen"] > [data-label] { display: none; }
  [data-act="fullscreen"] { gap: 0; }
}

/* ── Desktop control row ─────────────────────────────────────────────────────
   Prem, 2026-09-11: on a desktop pointer the custom cursor already turns into a
   play or pause glyph over the picture, so the play control is redundant there
   and the row is down to sound and fullscreen. It is hidden rather than deleted
   — the markup and each page's own play wiring stay exactly as they were, and a
   pointer is not the only way in. Keyboard users have no hover cursor to read,
   so the control is only visually hidden and comes back at full size the moment
   it takes focus. Touch keeps it outright: no hover, no cursor, no substitute. */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  #founder-video .founder-control[data-act="play"],
  #about-film .filmband__control[data-act="play"],
  #studio-film .filmband__control[data-act="play"] {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }

  /* The two disc players read a touch small beside the picture at this size. */
  #founder-video .founder-control,
  #about-film .filmband__control { width: 34px; height: 34px; }
  #founder-video .founder-control svg,
  #about-film .filmband__control svg { width: 14px; height: 14px; }
  #founder-video .founder-control [data-icon],
  #about-film .filmband__control [data-icon] { width: 10px; height: 10px; }

  /* The focus reveal sits ABOVE the row rather than rejoining it. Put back in
     flow, it widened the row, and the reflow the moment focus left landed
     between a mouse's down and up on the next control: the row moved out from
     under the pointer and the click was swallowed. Absolute keeps the two
     visible controls still. */
  #founder-video .founder-control[data-act="play"]:focus-visible,
  #about-film .filmband__control[data-act="play"]:focus-visible {
    width: 34px; height: 34px;
    left: 0; bottom: calc(100% + 0.4rem);
    margin: 0; clip-path: none; overflow: visible;
    border: 1px solid rgba(255, 255, 255, 0.16);
  }

  /* The team film's lettered pills take the same step up. */
  #studio-film .filmband__control {
    font-size: 0.74rem; padding: 0.62rem 1.05rem;
  }
  #studio-film .filmband__control svg { width: 11px; height: 11px; }
  #studio-film .filmband__control[data-act="play"]:focus-visible {
    width: auto; height: auto;
    left: 0; bottom: calc(100% + 0.5rem);
    margin: 0; padding: 0.62rem 1.05rem;
    clip-path: none; overflow: visible;
    border: 1px solid rgba(255, 255, 255, 0.15);
  }
}