/* ==========================================================================
   OTN theme: Watch page layout (DESIGN.md 8.2), ported from the mockups'
   assets/css/pages/watch.css. Used by the page-watch template.
   Page-specific layout only. Everything else (page head, player, schedule,
   where to watch, FAQ, poster row) comes from components.css.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Page head: a LIVE badge as the kicker (8px above the H1, like every
   kicker). Flex, so the line box is exactly the badge's 24px.
   -------------------------------------------------------------------------- */

.otn-watch__kicker,
:root p.otn-watch__kicker {
  display: flex;
}


/* --------------------------------------------------------------------------
   The outage message (only during an outage), above the theatre, on the
   page colour: no text of ours on black
   -------------------------------------------------------------------------- */

.otn-watch__notice {
  padding-bottom: var(--otn-space-5);
}


/* --------------------------------------------------------------------------
   Theatre: a full-bleed black band holding only the live player.
   Padding 24px (48px from 900px); the player at most 1280px wide, centred.
   Phones (below 600px): the player runs the full screen width with square
   corners, so the band keeps only its top and bottom padding.
   The screen's edge: a 1px Light Gray outline (--otn-screen-edge, 9.92:1
   on black; decorative), which takes no space and stays round the video
   after the press.
   -------------------------------------------------------------------------- */

.otn-theatre,
:root .otn-section.otn-theatre {
  padding: var(--otn-space-5) 0;
}

.otn-theatre > *,
.otn-theatre > .otn-player {
  max-width: var(--otn-w-wide);
  margin-inline: auto;
}

.otn-theatre .otn-player__frame {
  border-radius: 0;
  outline: 1px solid var(--otn-screen-edge);
}

/* The player's note line follows below the band, on navy, in the container */
.otn-theatre__note {
  padding-bottom: var(--otn-space-6);
}


/* --------------------------------------------------------------------------
   Frequently asked questions: "See all questions" under the open item
   -------------------------------------------------------------------------- */

.otn-watch__more,
:root .otn-main--watch #questions .otn-morelink {
  margin: var(--otn-space-4) 0 0;
}


@media (min-width: 600px) {
  .otn-theatre,
  :root .otn-section.otn-theatre {
    padding-inline: var(--otn-space-5);
  }

  .otn-theatre .otn-player__frame {
    border-radius: var(--otn-radius-m);
  }
}

@media (min-width: 900px) {
  .otn-theatre,
  :root .otn-section.otn-theatre {
    padding: var(--otn-space-7);
  }
}