/* ==========================================================================
   HERO — Level 2. Replaces otbtv_theme's hero.css.

   .otb-hero    "a film on Stage" as a contained card: a still that fades
                into the ground, the film's title over the fade (the
                catalogue's featured film)
   .otb-watch   the home page hero, "watch first" (FE2-HomeC-Watch): the
                montage (partial/home-hero.html.twig), a calling card over
                trailer clips with a credit. The feature mode and its
                picker left on 2026-10-23; the "picker" grid area is the
                credit's.

   Text over a still or footage holds 4.5:1 against a white frame: wherever
   text sits, the ground covers at least 62% (--hero-scrim; 4.5:1 for
   --color-text-primary over 38% white).
   ========================================================================== */

.otb-hero,
.otb-watch {
  --hero-scrim: color-mix(in srgb, var(--color-bg-primary) 62%, transparent);
}

/* ---------- CONTAINED CARD ---------- */

.otb-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 400px;
  overflow: hidden;
  border-radius: var(--border-radius-lg);
  background: var(--color-bg-surface);
}

.otb-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* The bottom fade. Title, artist and actions sit in its dense part. */
.otb-hero::after {
  content: "";
  position: absolute;
  inset: 20% 0 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in srgb, var(--color-bg-primary) 88%, transparent) 30%,
    var(--color-bg-primary) 100%
  );
}

.otb-hero__content {
  position: relative;
  z-index: var(--z-base);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: var(--space-7) var(--space-5) var(--space-5);
}

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

.otb-hero__title {
  margin: var(--space-2) 0 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-display-m);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-display);
  text-transform: none;
}

.otb-hero__artist {
  margin: var(--space-2) 0 0;
  line-height: var(--line-height-normal);
}

/* The card has no summary; the subscribe link joins the actions when they
   sit in a row. */
.otb-hero__summary,
.otb-hero__subscribe {
  display: none;
}

.otb-hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  margin-top: var(--space-5);
}

@media (min-width: 769px) {
  .otb-hero__content {
    padding: var(--space-7) var(--space-8);
  }

  .otb-hero__title {
    margin-top: var(--space-3);
    font-size: var(--font-size-display-l);
  }

  .otb-hero__artist {
    margin-top: var(--space-3);
  }

  .otb-hero__subscribe {
    display: inline;
    margin-left: var(--space-3);
  }

  .otb-hero__actions {
    flex-flow: row wrap;
    align-items: center;
    width: auto;
    margin-top: var(--space-7);
  }
}

/* ---------- HOME HERO ---------- */
/* Layers, bottom up: each slide's still, the motion (trailer players),
   the scrim (::after), then text and controls. The container and the
   slides are not positioned, so stills and players fill the whole hero. */

.otb-watch {
  position: relative;
  display: flex;
  min-height: 560px;
  overflow: hidden;
  background: var(--color-bg-primary);
}

.otb-watch__inner {
  display: grid;
  grid-template-areas: "pause" "text" "picker";
  grid-template-rows: auto 1fr auto;
  gap: var(--space-5);
  padding-top: var(--space-4);
  padding-bottom: var(--space-8);
}

.otb-watch__still,
.otb-watch__motion,
.otb-watch__player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.otb-watch__still {
  z-index: 0;
  object-fit: cover;
  object-position: center 25%;
}

.otb-watch__motion {
  z-index: 1;
}

/* mux-player as a moving picture: no controls, no spinner, cover. */
.otb-watch__player {
  display: block;
  aspect-ratio: auto;
  opacity: 0;
  transition: opacity 0.9s ease;
  --controls: none;
  --loading-indicator: none;
  --dialog: none;
  --media-object-fit: cover;
  --media-object-position: center 25%;
}

.otb-watch__player.is-showing {
  opacity: 1;
}

.otb-watch::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 20% 0 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in srgb, var(--color-bg-primary) 88%, transparent) 30%,
    var(--color-bg-primary) 100%
  );
  pointer-events: none;
}

.otb-watch__text,
.otb-watch__pause,
.otb-watch__credit {
  position: relative;
  z-index: 3;
}

.otb-watch__slide,
.otb-watch__text {
  grid-area: text;
  align-self: end;
}

.otb-watch__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Phones and tablets: the text block brings its own scrim, so a title of
   any length stays on 88% ground. */
@media (max-width: 994px) {
  .otb-watch__text::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: calc(-1 * var(--space-12)) calc(-1 * var(--container-padding-medium)) calc(-1 * var(--space-8));
    background: linear-gradient(
      to bottom,
      transparent,
      color-mix(in srgb, var(--color-bg-primary) 88%, transparent) var(--space-12)
    );
  }
}

/* Full-strength text over footage, like the title. */
.otb-watch__text .otb-eyebrow {
  color: var(--color-text-primary);
}

.otb-watch__title {
  margin: var(--space-2) 0 0;
  color: var(--color-text-heading);
  font-family: var(--font-family-display);
  font-size: var(--font-size-display-m);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-display);
}

.otb-watch__title--long,
.otb-watch__title--card {
  font-size: var(--font-size-display-s);
}

/* The montage's line: kept narrow and low, over the densest scrim, so the
   footage shows; about two lines on wide screens. */
.otb-watch__title--card {
  max-width: 14em;
}

/* A featured film's title leads to its page. */
.otb-watch__title-link {
  color: inherit;
  text-decoration: none;
}

.otb-watch__title-link:hover {
  text-decoration: underline;
  text-decoration-thickness: var(--border-width-thin);
  text-underline-offset: 0.12em;
}

.otb-watch__meta {
  margin: var(--space-3) 0 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
}

.otb-watch__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  margin-top: var(--space-6);
}

/* "Pause motion" (WCAG 2.2.2): a small round icon button, first in the
   hero's focus order. Its name is the label, which shows beside it on
   hover and keyboard focus; otherwise it is read but not seen. */
.otb-watch__pause {
  grid-area: pause;
  justify-self: end;
  align-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  padding: 0;
  border: var(--border-width-thin) solid color-mix(in srgb, var(--color-text-primary) 35%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-bg-primary) 65%, transparent);
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.otb-watch__pause[hidden] {
  display: none;
}

.otb-watch__pause:hover,
.otb-watch__pause:focus-visible {
  border-color: var(--color-text-primary);
}

.otb-watch__pause-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.otb-watch__pause:hover .otb-watch__pause-label,
.otb-watch__pause:focus-visible .otb-watch__pause-label {
  top: 50%;
  right: calc(100% + var(--space-2));
  width: auto;
  height: auto;
  padding: var(--space-1) var(--space-2);
  overflow: visible;
  clip: auto;
  border-radius: var(--border-radius-sm);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  transform: translateY(-50%);
  pointer-events: none;
}

.otb-watch__play-icon,
.otb-watch__pause.is-paused .otb-watch__pause-icon {
  display: none;
}

.otb-watch__pause.is-paused .otb-watch__play-icon {
  display: block;
}

/* The montage's "Clip from <film>". */
.otb-watch__credit {
  grid-area: picker;
  justify-self: end;
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.otb-watch__credit a {
  color: var(--color-text-primary);
}

@media (min-width: 769px) {
  .otb-watch__title {
    margin-top: var(--space-3);
    font-size: var(--font-size-display-l);
  }

  .otb-watch__title--long,
  .otb-watch__title--card {
    font-size: var(--font-size-display-m);
  }

  .otb-watch__actions {
    flex-flow: row wrap;
    align-items: center;
    width: auto;
    margin-top: var(--space-7);
  }

  .otb-watch__actions .otb-hero__subscribe {
    display: inline;
    margin-left: var(--space-3);
  }
}

/* Desktop: the header lies over the hero. Text bottom left inside the left
   scrim; pause control, picker and credit bottom right over the bottom
   fade. */
@media (min-width: 995px) {
  .otb-watch {
    min-height: clamp(640px, 88vh, 800px);
  }

  .otb-watch__inner {
    grid-template-areas: "text pause" "text picker";
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 1fr auto;
    column-gap: var(--space-12);
    row-gap: var(--space-4);
    padding-top: calc(var(--header-height) + var(--space-8));
    padding-bottom: var(--space-16);
  }

  .otb-watch__pause {
    align-self: end;
  }

  .otb-watch::after {
    inset: 0;
    background:
      linear-gradient(to bottom, transparent calc(100% - 520px), color-mix(in srgb, var(--color-bg-primary) 92%, transparent) calc(100% - 260px), var(--color-bg-primary)),
      linear-gradient(to bottom, var(--hero-scrim) var(--header-height), transparent calc(2 * var(--header-height))),
      linear-gradient(to right, var(--hero-scrim) 58%, transparent 85%);
  }

  .otb-watch__text {
    max-width: min(680px, 50vw);
  }

  .otb-watch__title {
    margin-top: var(--space-4);
    font-size: var(--font-size-display-xl);
    line-height: var(--line-height-display-xl);
  }

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

  .otb-watch__title--card {
    font-size: var(--font-size-display-m);
    line-height: var(--line-height-display);
  }

  .otb-watch__meta {
    margin-top: var(--space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .otb-watch__player,
  .otb-watch__pause {
    transition: none;
  }
}