/* ==========================================================================
   FILM PAGE — Level 2 (FE2-Film, FE2-Mobile-Film).
   Replaces otbtv_theme's film-detail.css and video-player.css, which
   otbtv_stage.info.yml switches off.

   Stage   the player at full width; title; one access card
   Page    the programme note in one reading column; details, credits and
           links in a side rail
   Stage   more like this

   Phones (< 670px): the player runs edge to edge, the card loses its
   surface, every target is 44px and the rail's lists stack.
   ========================================================================== */

/* page--performance.html.twig: <main> is Stage (frame.css clears .main's
   ground) and the bands carry their own spacing. */
.main--film {
  padding: 0;
  background: var(--color-bg-primary);
}

/* Staff tabs above the film keep the frame's gutters. */
.main--film .block-local-tasks-block,
.main--film .block-local-actions-block {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: var(--space-4) var(--container-padding-mobile) 0;
}

/* Shared heading: Jost H2 (28px). */
.otb-film__heading {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-normal);
  line-height: var(--h2-line-height);
  color: var(--color-text-heading);
}

/* An eyebrow set on a heading keeps the text face. */
.otb-film__label {
  font-family: var(--font-family-base);
}

/* ---------- STAGE: PLAYER ---------- */

.otb-film__stage {
  padding: 0 0 var(--space-10);
}

.otb-film__player {
  margin: 0 calc(-1 * var(--container-padding-mobile));
  background: var(--color-bg-sunk);
}

.otb-player {
  position: relative;
  width: 100%;
}

.otb-player mux-player,
.otb-player__poster {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.otb-player__poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 670px) {
  .otb-film__stage {
    padding-top: var(--space-2);
  }

  .otb-film__player {
    margin: 0;
    overflow: hidden;
    border-radius: var(--border-radius-lg);
    background: var(--color-bg-surface);
  }
}

/* ---------- STAGE: TITLE AND ACCESS ---------- */

.otb-film__intro {
  display: grid;
  gap: var(--space-6);
  padding-top: var(--space-5);
}

.otb-film__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0;
}

.otb-film__facts {
  margin: 0;
}

.otb-film__title {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-display-s);
  font-weight: var(--font-weight-light);
  line-height: 1.05;
  color: var(--color-text-heading);
  overflow-wrap: anywhere;
}

.otb-film__artist {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

.otb-film__artist a,
.otb-film__more-link,
.otb-film__links a {
  color: var(--color-text-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.otb-film__artist a:hover,
.otb-film__more-link:hover,
.otb-film__links a:hover {
  color: var(--color-primary);
}

.otb-film__subtitle {
  margin: 0;
  color: var(--color-text-muted);
}

.otb-film__header .otb-notice {
  margin: 0;
}

/* The card: a surface from 670px; on phones its rows sit on the ground. */
.otb-film__access {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.otb-film__access > h2 {
  margin: 0;
}

/* Rental end, renewal date, "Yours to keep". */
.otb-film__terms {
  margin: 0;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  color: var(--color-text-muted);
}

/* Added by film-toggle.js when the full film's token cannot be had. */
.otb-film__panel-note--error {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-status-error-text);
}

.otb-film__wide {
  width: 100%;
}

/* Full film / Trailer: one pressed, film-source.js keeps it so. */
.otb-film__choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1);
  padding: var(--space-1);
  border: var(--border-width-thin) solid var(--color-border-light);
  border-radius: calc(var(--border-radius-md) + var(--space-1));
  background: var(--color-bg-sunk);
}

.otb-film__choice-option {
  min-height: var(--control-height);
  margin: 0;
  padding: 0 var(--space-3);
  border: var(--border-width-control) solid transparent;
  border-radius: var(--border-radius-md);
  background: transparent;
  color: var(--color-text-muted);
  font-family: var(--font-family-base);
  font-size: var(--font-size-ui);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.otb-film__choice-option:hover {
  color: var(--color-text-primary);
}

.otb-film__choice-option[aria-pressed="true"] {
  border-color: var(--color-text-primary);
  background: var(--color-text-primary);
  color: var(--color-bg-primary);
}

/* Rent, buy, subscribe: name and detail, price, action. */
.otb-film__offers {
  margin: 0;
  padding: 0;
  list-style: none;
}

.otb-film__offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin: 0;
  padding: var(--space-4) 0;
}

.otb-film__offer + .otb-film__offer {
  border-top: var(--border-width-thin) solid var(--color-border-light);
}

.otb-film__offer-what {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.otb-film__offer-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--h3-line-height);
}

.otb-film__offer-detail,
.otb-film__offer-terms {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  color: var(--color-text-muted);
}

.otb-film__offer-price {
  min-width: 3.5rem;
  font-family: var(--font-family-display);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-light);
  line-height: 1;
  text-align: right;
}

.otb-film__offer-action {
  width: 7.75rem;
}

.otb-film__offer-terms {
  grid-column: 1 / -1;
}

/* Campus access is the violet signal. */
.otb-film__campus {
  margin: var(--space-1) 0 0;
  padding: 0.875rem var(--space-4);
  border-radius: var(--border-radius-md);
  background: var(--color-status-campus-bg);
  color: var(--color-status-campus-text);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
}

.otb-film__campus a {
  color: inherit;
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

@media (min-width: 670px) {
  .otb-film__intro {
    padding-top: var(--space-10);
  }

  .otb-film__title {
    font-size: var(--font-size-display-l);
    line-height: var(--line-height-display);
  }

  .otb-film__access {
    padding: var(--space-7);
    border-radius: var(--border-radius-lg);
    background: var(--color-bg-card);
  }
}

@media (min-width: 995px) {
  .otb-film__stage {
    padding-bottom: var(--space-20);
  }

  .otb-film__intro {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
  }

  .otb-film__header {
    grid-column: span 7;
    gap: var(--space-4);
    padding-top: var(--space-2);
  }

  .otb-film__access {
    grid-column: span 5;
  }
}

/* ---------- PAGE: PROGRAMME NOTE AND RAIL ---------- */

.otb-film__page {
  padding: var(--space-8) 0 var(--space-12);
}

.otb-film__reading {
  display: grid;
  gap: var(--space-8);
}

.otb-film__note {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

/* Programme notes: 18px in one column no wider than 680. */
.otb-film__prose {
  max-width: 680px;
  font-size: var(--font-size-md);
  line-height: 1.7;
  overflow-wrap: break-word;
}

.otb-film__prose :where(p, ul, ol, blockquote) {
  margin: 0 0 var(--space-5);
}

.otb-film__prose :where(p, ul, ol, blockquote):last-child {
  margin-bottom: 0;
}

.otb-film__rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  min-width: 0;
}

.otb-film__rail-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Details and credits: label above value on phones, so long names wrap
   instead of scrolling. */
.otb-film__list {
  margin: 0;
  border-top: var(--border-width-thin) solid var(--color-border-light);
}

.otb-film__list > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: 0.875rem 0;
  border-bottom: var(--border-width-thin) solid var(--color-border-light);
}

.otb-film__list dt {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.otb-film__list dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.otb-film__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-ui);
  line-height: var(--line-height-normal);
}

.otb-film__links li {
  margin: 0;
}

.otb-film__after {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  min-width: 0;
}

/* About the artist: a white card on the Page ground. */
.otb-film__artist-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
  border: var(--border-width-thin) solid var(--color-border-light);
  border-radius: var(--border-radius-lg);
  background: var(--color-bg-card);
}

.otb-film__artist-card .otb-eyebrow {
  margin: 0;
}

.otb-film__artist-bio {
  max-width: 640px;
  line-height: var(--line-height-body);
}

.otb-film__artist-bio p {
  margin: 0 0 var(--space-3);
}

.otb-film__artist-bio p:last-child {
  margin-bottom: 0;
}

.otb-film__more-link {
  font-size: var(--font-size-ui);
  font-weight: var(--font-weight-medium);
}

/* Phones: the note's title is a label; every link is a 44px target. */
@media (max-width: 669px) {
  .otb-film__note-title {
    font-family: var(--font-family-base);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    letter-spacing: var(--letter-spacing-eyebrow);
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .otb-film__artist a,
  .otb-film__more-link,
  .otb-film__links a,
  .otb-film__campus a {
    display: inline-flex;
    align-items: center;
    min-height: var(--control-height);
  }

  .otb-film__links {
    gap: 0;
  }
}

@media (min-width: 670px) {
  .otb-film__artist-card {
    padding: var(--space-7);
  }
}

@media (min-width: 995px) {
  .otb-film__page {
    padding: var(--space-20) 0 var(--space-24);
  }

  /* Note and what follows it in seven columns; the rail in the last four,
     beside both. */
  .otb-film__reading {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    gap: var(--space-12) var(--space-6);
    align-items: start;
  }

  .otb-film__note {
    grid-column: 1 / span 7;
    grid-row: 1;
    gap: var(--space-6);
  }

  .otb-film__after {
    grid-column: 1 / span 7;
    grid-row: 2;
    gap: var(--space-12);
  }

  .otb-film__rail {
    grid-column: 9 / span 4;
    grid-row: 1 / span 2;
    gap: var(--space-7);
  }

  .otb-film__rail-group + .otb-film__rail-group {
    padding-top: var(--space-7);
    border-top: var(--border-width-thin) solid var(--color-border-light);
  }

  /* In the rail, group titles are labels and lists are two columns. */
  .otb-film__rail-title {
    font-family: var(--font-family-base);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    letter-spacing: var(--letter-spacing-eyebrow);
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .otb-film__list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    border-top: 0;
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
  }

  /* 148px at 1440, narrower with the rail. */
  .otb-film__list > div {
    display: grid;
    grid-template-columns: 36% minmax(0, 1fr);
    gap: var(--space-4);
    padding: 0;
    border-bottom: 0;
  }

  .otb-film__list dt {
    font-size: inherit;
    font-weight: var(--font-weight-normal);
    line-height: inherit;
    letter-spacing: 0;
    text-transform: none;
  }
}

/* ---------- PAGE: EXTRAS ---------- */

.otb-film__extras {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.otb-extras__player {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--border-radius-md);
  background: var(--color-dark);
}

.otb-extras__player mux-player {
  display: block;
  width: 100%;
  height: 100%;
}

/* extras-tabs.js sets --audio for an audio extra: a short bar, not 16:9. */
.otb-extras--audio .otb-extras__player {
  height: 132px;
  aspect-ratio: auto;
}

.otb-extras__audio-overlay {
  position: absolute;
  inset: 0 0 48px;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-400);
  pointer-events: none;
}

.otb-extras--audio .otb-extras__audio-overlay {
  display: flex;
}

.otb-extras__tabs {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-2);
  border-top: var(--border-width-thin) solid var(--color-border-light);
}

.otb-extras__tab {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-bottom: var(--border-width-thin) solid var(--color-border-light);
  background: transparent;
  color: var(--color-text-muted);
  font-family: var(--font-family-base);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-align: left;
  cursor: pointer;
}

.otb-extras__tab:hover {
  color: var(--color-text-primary);
}

.otb-extras__tab.is-active {
  background: var(--color-bg-card);
  color: var(--color-text-primary);
}

.otb-extras__tab-icon {
  flex: none;
}

/* ---------- STAGE: MORE LIKE THIS ---------- */

.otb-film__related {
  padding: var(--space-10) 0;
}

.otb-film__related .otb-film__heading {
  margin-bottom: var(--space-4);
}

/* Two stills to a row on phones, as on the board. */
@media (max-width: 599px) {
  .otb-film__related .otb-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6) var(--space-3);
  }
}

@media (min-width: 670px) {
  .main--film .block-local-tasks-block,
  .main--film .block-local-actions-block {
    padding-inline: var(--container-padding-medium);
  }
}

@media (min-width: 995px) {
  .main--film .block-local-tasks-block,
  .main--film .block-local-actions-block {
    padding-inline: var(--container-padding-desktop);
  }

  .otb-film__related {
    padding: var(--space-22) 0 var(--space-24);
  }

  .otb-film__related .otb-film__heading {
    margin-bottom: var(--space-7);
  }
}