/* ==========================================================================
   OTN theme: Where to watch and listen's lead tile, and the Watch page's
   main action (DESIGN.md 6.15, 8.2), ported from the mockups'
   assets/css/pages/wtw.css.

   1. The lead tile (.otn-wtw__tile--lead: OTN's streaming site, first in
      otn-where-to-watch's tiles on Home, About and Watch). It extends 6.15
      (components.css) without changing the other tiles.
   2. The Watch page's main action (.otn-watch-main: the otn/watch-main
      pattern) with the "On now" line above its button.
   Role tokens only, so the same rules work in the dark and the light design.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Lead tile: OTN streaming site
   Phones (below 600px): the same compact grid as every tile, a bigger icon
   and name, then the "Watch now" button full width under them.
   From 600px: it spans the whole row in one line: icon | name over detail
   | button at the right. The 6px orange left bar is the lower-third mark
   (decorative). The tile's one link is the button.
   -------------------------------------------------------------------------- */

.otn-wtw__tile.otn-wtw__tile--lead {
  grid-template-columns: minmax(2.75rem, max-content) minmax(min-content, 1fr);
  padding: var(--otn-space-4);
  border-left: var(--otn-bar-lt) solid var(--otn-bar);
}

.otn-wtw__tile--lead .otn-wtw__icon {
  width: 2.5rem;
  height: 2.5rem;
}

/* The name as a lower-third heading: Block Condensed, capitals from CSS */
:root .otn-wtw__tile--lead .otn-wtw__name {
  font-family: var(--otn-font-display);
  font-size: var(--otn-fs-display-s);
  font-weight: var(--otn-fw-display);
  line-height: var(--otn-lh-heading);
  letter-spacing: var(--otn-ls-heading);
  text-transform: uppercase;
}

:root .otn-wtw__tile--lead .otn-wtw__detail {
  font-size: var(--otn-fs-body);
  line-height: var(--otn-lh-small);
}

/* Phones: a full-width button on its own row under the text */
.otn-wtw__tile--lead .otn-wtw__cta {
  grid-row: 3;
  grid-column: 1 / -1;
  margin-top: var(--otn-space-3);
}

@media (min-width: 600px) {
  /* Back to a grid (components.css makes tiles flex columns from 600px),
     across the whole row */
  .otn-wtw__tile.otn-wtw__tile--lead {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    align-items: center;
    gap: var(--otn-space-1) var(--otn-space-4);
    min-height: 0;
    padding: var(--otn-space-4) var(--otn-space-5);
  }

  .otn-wtw__tile--lead .otn-wtw__icon {
    grid-row: 1 / span 2;
    grid-column: 1;
    margin-bottom: 0;
  }

  :root .otn-wtw__tile--lead .otn-wtw__name {
    grid-row: 1;
    grid-column: 2;
    align-self: end;
  }

  :root .otn-wtw__tile--lead .otn-wtw__detail {
    grid-row: 2;
    grid-column: 2;
    align-self: start;
  }

  .otn-wtw__tile--lead .otn-wtw__cta {
    grid-row: 1 / span 2;
    grid-column: 3;
    margin-top: 0;
  }
}

@media (min-width: 900px) {
  .otn-wtw__tile.otn-wtw__tile--lead {
    column-gap: var(--otn-space-5);
    padding: var(--otn-space-5) var(--otn-space-6);
  }
}


/* --------------------------------------------------------------------------
   2. Watch page: the main action in the page head (otn/watch-main)
   The "On now" line, the primary button "Watch on OTN’s streaming site",
   then one 15px line saying what else the streaming site has. 24px under
   the dek. The button group goes full width below 480px (.otn-actions).
   -------------------------------------------------------------------------- */

.otn-watch-main {
  margin-top: var(--otn-space-5);
}

/* "On now" (otn-schedule's otn/on-now): one line above the main button,
   hidden until its script fills it, and when nothing more is listed.
   Body size, the page's text colour, the label and show in Bold
   (.otn-onnow, components.css); it wraps as it needs on phones. 12px
   above the button. */
.otn-watch-main__now,
:root .otn-watch-main .otn-watch-main__now {
  max-width: none;
  margin: 0 0 var(--otn-space-3);
  font-size: var(--otn-fs-body);
  line-height: var(--otn-lh-small);
}

.otn-watch-main__line,
:root p.otn-watch-main__line {
  margin: var(--otn-space-3) 0 0;
  font-size: var(--otn-fs-small);
  line-height: var(--otn-lh-small);
}