/*
 * Episode player layout, lifted verbatim from page 4520 on 15 Sep 2026.
 * That page was the prototype; this file is the version under version control.
 * The Google Fonts @import was dropped, the theme already loads its faces.
 */

/*
 * Tokens point at the theme's own presets, with the prototype's values as
 * fallbacks. If the theme repalettes or swaps a typeface, this product
 * follows along instead of drifting out of step with the rest of the site.
 *
 * Mapped from onsite-media/theme.json:
 *   red-100  #B90302   body font  Inter 400 / 1.5 / 0.01em
 *   grey-700 #515151   headings   Cabin 700 / 1.3 / -0.01em
 *   grey-200 #D8D8D8   links      red-100, no underline
 */
/* Tokens on every root the plugin renders: the three screens, and the
   Now Playing block, which sits on the homepage outside those screens. */
.om-video-series-page,
.om-np {
  --om-red: var(--wp--preset--color--red-100, #b90302);
  --om-dark-red: var(--wp--preset--color--red-100-hover, #e04e4d);
  --om-black: var(--wp--preset--color--black, #000000);
  --om-gray: var(--wp--preset--color--grey-700, #515151);
  --om-light-gray: var(--wp--preset--color--grey-200, #d8d8d8);
  --om-border: var(--wp--preset--color--grey-200, #d8d8d8);
  --om-white: var(--wp--preset--color--white, #ffffff);

  --om-font-body: var(--wp--preset--font-family--inter, Inter, sans-serif);
  --om-font-heading: var(--wp--preset--font-family--cabin, Cabin, sans-serif);

  /* The theme constrains content to this; the grid should line up with it. */
  --om-content-width: var(--wp--style--global--content-size, 1440px);
}

.om-video-series-page {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: var(--om-white);

  font-family: var(--om-font-body);
  line-height: 1.5;
  letter-spacing: 0.01em;

  /*
   * clip, not hidden. overflow-x: hidden turns this element into a scroll
   * container, and a sticky descendant then sticks to it instead of the
   * viewport — it scrolls away with the page, and the sticky player below
   * did exactly that. clip stops horizontal overflow without creating a
   * scroll container, so position: sticky still works.
   */
  overflow-x: clip;
}

.om-video-series-page *,
.om-video-series-page *::before,
.om-video-series-page *::after {
  box-sizing: border-box;
}

.om-video-series-container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
  background: var(--om-white);
}

.om-video-series-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 600px;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  background: var(--om-white);
  align-items: stretch;
}

.om-video-player-column {
  display: flex;
  align-items: flex-start;
  justify-content: center;

  min-width: 0;
  padding: 48px 35px;

  background: var(--om-white);
}

.om-vertical-video-wrapper {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: min(100%, 650px);
  margin: 0 auto;
}

.om-vertical-video-player {
  display: block;

  width: auto;
  height: min(82vh, 900px);

  max-width: 100%;

  aspect-ratio: 9 / 16;

  background: #111111;
  object-fit: cover;

  border: 0;
  border-radius: 0;

  outline: none;
}

.om-video-info-column {
  display: flex;
  flex-direction: column;
  gap: 14px;

  min-width: 0;

  padding: 48px 35px;

  background: var(--om-white);

  border-left: 1px solid #e1e1e1;

  overflow: hidden;
}

.om-video-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 2px;
  color: #888888;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.om-video-breadcrumbs a {
  color: #000000;
  text-decoration: none;
  transition: color 0.15s ease;
}

.om-video-breadcrumbs a:hover {
  color: var(--om-red);
}

.om-breadcrumb-separator {
  color: #888888;
}

.om-breadcrumb-current {
  color: #000000;
}

.om-video-main-title {
  margin: 0;

  color: var(--om-black);

  font-family: var(--om-font-heading);

  font-size: var(--wp--preset--font-size--h-2, clamp(1.5rem, 1rem + 1.5vw, 2rem));
  font-weight: 700;

  line-height: 1.15;

  letter-spacing: -0.01em;

  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}

.om-video-description {
  margin: 2px 0 0;
  padding: 0 0 30px;

  color: var(--om-gray);

  font-size: 14px;
  font-weight: 400;

  line-height: 1.45;

  border-bottom: 1px solid var(--om-light-gray);
}

.om-video-actions-bar {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  margin: 12px 0 8px;
}

.om-action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  color: #555555;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition:
    color 0.15s ease,
    transform 0.15s ease;
}

.om-action-item:hover {
  color: var(--om-red);
}

.om-action-item:focus-visible {
  outline: 2px solid var(--om-red);
  outline-offset: 4px;
}

.om-action-item:active {
  transform: scale(0.96);
}

.om-action-item svg {
  display: block;

  width: 20px;
  height: 20px;

  fill: currentColor;
}

.om-playlist-section {
  display: flex;
  flex-direction: column;

  min-width: 0;
}

.om-playlist-tab-header {
  display: flex;
  align-items: center;

  margin-top: 14px;
  padding: 0;

  border-bottom: 1px solid var(--om-light-gray);
}

.om-playlist-tab-title {
  position: relative;

  display: inline-block;

  padding: 0 0 14px;

  color: var(--om-black);

  font-family: var(--om-font-heading);

  font-size: 15px;
  font-weight: 700;

  line-height: 1.2;
}

.om-playlist-tab-title::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 6px;

  width: 45px;
  height: 3px;

  background: var(--om-dark-red);

  border-radius: 0;
}

.om-playlist-list {
  display: flex;
  flex-direction: column;

  width: 100%;
  max-height: 560px;

  gap: 12px;

  padding-top: 16px;
  padding-right: 4px;

  overflow-x: hidden;
  overflow-y: auto;
}

.om-playlist-list::-webkit-scrollbar {
  width: 5px;
}

.om-playlist-list::-webkit-scrollbar-track {
  background: transparent;
}

.om-playlist-list::-webkit-scrollbar-thumb {
  background: #cccccc;
  border-radius: 4px;
}

.om-playlist-list {
  scrollbar-width: thin;
  scrollbar-color: #cccccc transparent;
}

.om-playlist-item {
  position: relative;

  display: flex;
  align-items: flex-start;

  width: 100%;
  min-height: 88px;

  padding: 0;

  background: #ffffff;

  color: var(--om-black);

  border: 1px solid var(--om-border);
  border-radius: 8px;

  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);

  cursor: pointer;

  overflow: hidden;

  text-align: left;

  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.om-playlist-item:hover {
  background: #fafafa;
}

.om-playlist-item:focus-visible {
  outline: 2px solid var(--om-red);
  outline-offset: 2px;
}

.om-playlist-item-active {
  background: #fff5f5;

  border: 2px solid var(--om-red);

  box-shadow: none;
}

.om-playlist-thumb {
  position: relative;

  flex: 0 0 142px;

  width: 142px;
  height: 76px;

  margin: 4px;

  background-color: #dddddd;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  border-radius: 5px;

  overflow: hidden;
}


/* PLAY ICON */

.om-playlist-thumb::after {
  content: "▶";

  position: absolute;

  left: 50%;
  top: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 30px;
  height: 30px;

  transform: translate(-50%, -50%);

  padding-left: 1px;

  background: rgba(0, 0, 0, 0.68);

  color: #ffffff;

  border-radius: 50%;

  font-size: 11px;
  line-height: 1;
}

.om-playlist-info {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;

  min-width: 0;

  gap: 4px;

  padding: 9px 9px 8px 7px;
}


.om-playlist-title {
  display: -webkit-box;

  margin: 0;

  color: var(--om-black);

  font-family: var(--om-font-heading);

  font-size: 13px;
  font-weight: 700;

  line-height: 1.25;

  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  overflow: hidden;
}

.om-playlist-item-active .om-playlist-title {
  color: var(--om-red);
}


.om-playlist-meta {
  margin: 0;

  color: #777777;

  font-size: 11px;
  font-weight: 400;

  line-height: 1.25;
}


.om-playlist-duration {
  margin: 0;

  color: #666666;

  font-size: 11px;
  font-weight: 600;

  line-height: 1.25;
}


@media (max-width: 1440px) {
.om-video-series-layout {
    grid-template-columns: minmax(0, 1fr) 500px;
}}

@media (max-width: 1024px) {
.om-video-series-layout {
    grid-template-columns: minmax(0, 1fr) 450px;
}}

@media (max-width: 992px) {

  .om-video-series-layout {
    grid-template-columns: 1fr;
  }

  .om-video-player-column {
    padding: 40px 25px;
  }

  .om-video-info-column {
    padding: 32px 25px;

    border-top: 1px solid #e1e1e1;
    border-left: 0;
  }

  .om-vertical-video-wrapper {
    width: min(100%, 500px);
  }

  .om-vertical-video-player {
    height: min(75vh, 750px);
  }

}


@media (max-width: 768px) {

  .om-video-player-column {
    padding: 20px 12px;
  }

  .om-video-info-column {
    padding: 20px 12px;

    gap: 10px;
  }

  .om-vertical-video-wrapper {
    width: 100%;
  }

  .om-vertical-video-player {
    /*
     * max-height and aspect-ratio fight each other: the cap wins, the ratio
     * is ignored, and a 9:16 player renders as a near-square box that then
     * crops the video even harder through object-fit: cover.
     *
     * Measured at 768px before this fix: 744x717, a ratio of 1.04.
     *
     * The product spec asks for full-bleed 9:16 with no letterboxing, so
     * width leads and height follows. A tall player on a phone is correct;
     * the page scrolls.
     */
    /*
     * Tablet: let the viewport height decide the width, so the frame stays
     * 9:16 without turning into a 1300px tall column. Phones get full bleed
     * in the 576px block below.
     */
    width: min(100%, calc(72vh * 9 / 16));
    width: min(100%, calc(72dvh * 9 / 16));
    height: auto;
    max-height: none;

    aspect-ratio: 9 / 16;
  }

  .om-video-actions-bar {
    gap: 20px;

    margin-top: 8px;
    margin-bottom: 4px;
  }

  .om-playlist-tab-header {
    margin-top: 8px;
  }

  .om-playlist-list {
    gap: 8px;

    padding-top: 10px;
  }

}


@media (max-width: 576px) {

  /* Full-bleed 9:16 on phones, no letterboxing. Height follows the ratio. */
  .om-vertical-video-player {
    width: 100%;
  }

  .om-video-main-title {
    line-height: 1.22;
  }

  .om-video-description {
    font-size: 13px;

    padding-bottom: 22px;
  }

  .om-playlist-item {
    min-height: 78px;
  }

  .om-playlist-thumb {
    flex: 0 0 110px;

    width: 110px;
    height: 68px;
  }

  .om-playlist-info {
    padding: 7px 7px 6px 6px;
  }

  .om-playlist-title {
    font-size: 12px;
  }

  .om-playlist-meta,
  .om-playlist-duration {
    font-size: 10px;
  }

}



@media (max-width: 380px) {

  .om-playlist-thumb {
    flex: 0 0 95px;

    width: 95px;
    height: 64px;
  }

  .om-playlist-thumb::after {
    width: 26px;
    height: 26px;

    font-size: 10px;
  }

  .om-playlist-title {
    font-size: 11px;
  }

}

/* ------------------------------------------------------------------ *
 * Screens 1 and 2 from the wireframe: series grid and series detail.
 * These did not exist on the prototype page, which only built screen 3.
 * They reuse the same custom properties declared on .om-video-series-page.
 * ------------------------------------------------------------------ */

.om-vs-wrap {
  width: 100%;
  max-width: var(--om-content-width);
  margin: 0 auto;
  padding: 40px 35px 64px;
}

/* --- shared page heading --- */

.om-vs-heading {
  margin: 0 0 6px;
  color: var(--om-black);
  font-family: var(--om-font-heading);
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.om-vs-intro {
  max-width: 62ch;
  margin: 0 0 32px;
  color: var(--om-gray);
  font-size: 14px;
  line-height: 1.5;
}

/* --- screen 1: series grid --- */

.om-vs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px 26px;
}

.om-vs-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  transition: transform 0.22s ease;
}

.om-vs-card:hover,
.om-vs-card:focus-visible {
  transform: translateY(-4px);
}

.om-vs-card:focus-visible {
  outline: none;
}

.om-vs-card:focus-visible .om-vs-card-media {
  outline: 2px solid var(--om-red);
  outline-offset: 3px;
}

/* --- card artwork --- */

.om-vs-card-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #d8d8d8;
  border-radius: 4px;
  box-shadow:
    0 1px 2px rgba(17, 17, 17, 0.08),
    0 4px 12px rgba(17, 17, 17, 0.1);
  overflow: hidden;
  transition: box-shadow 0.22s ease;
}

.om-vs-card:hover .om-vs-card-media,
.om-vs-card:focus-visible .om-vs-card-media {
  box-shadow:
    0 2px 4px rgba(17, 17, 17, 0.1),
    0 14px 30px rgba(17, 17, 17, 0.2);
}

/* Separate element so the artwork can scale without dragging the badge with it. */
.om-vs-card-img {
  position: absolute;
  inset: 0;
  background: #d8d8d8 center/cover no-repeat;
  transform: scale(1);
  transition: transform 0.4s ease;
}

.om-vs-card:hover .om-vs-card-img,
.om-vs-card:focus-visible .om-vs-card-img {
  transform: scale(1.06);
}

/* Bottom scrim keeps the episode count legible on pale artwork. */
.om-vs-card-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.12) 38%, rgba(0, 0, 0, 0) 68%);
  transition: background 0.22s ease;
}

.om-vs-card:hover .om-vs-card-media::before,
.om-vs-card:focus-visible .om-vs-card-media::before {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.22) 100%);
}

/* Play affordance, matching the one already used on playlist thumbnails. */
.om-vs-card-media::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 46px;
  height: 46px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M8 5v14l11-7z'/%3E%3C/svg%3E")
    var(--om-red) center/18px 18px no-repeat;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.82);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.om-vs-card:hover .om-vs-card-media::after,
.om-vs-card:focus-visible .om-vs-card-media::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.om-vs-card-count {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 3;
  padding: 5px 10px;
  background: rgba(0, 0, 0, 0.66);
  color: var(--om-white);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

/* --- card text --- */

.om-vs-card-title {
  margin: 14px 0 5px;
  color: var(--om-black);
  font-family: var(--om-font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  transition: color 0.15s ease;
}

.om-vs-card:hover .om-vs-card-title,
.om-vs-card:focus-visible .om-vs-card-title {
  color: var(--om-red);
}

.om-vs-card-desc {
  margin: 0;
  color: var(--om-gray);
  font-size: 13px;
  line-height: 1.45;
}

/* --- screen 2: series hero --- */

.om-vs-back {
  display: inline-block;
  margin: 0 0 16px;
  color: var(--om-gray);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}

.om-vs-back:hover {
  color: var(--om-red);
}

.om-vs-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 320px;
  margin: 0 0 28px;
  padding: 28px;
  background: #24303c center/cover no-repeat;
  color: var(--om-white);
  overflow: hidden;
}

.om-vs-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 0.1) 100%);
}

.om-vs-hero > * {
  position: relative;
  z-index: 1;
}

.om-vs-hero-chip {
  align-self: flex-start;
  margin: 0 0 12px;
  padding: 4px 10px;
  background: var(--om-red);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.om-vs-hero-title {
  max-width: 18ch;
  margin: 0 0 10px;
  font-family: var(--om-font-heading);
  font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.01em;
}

.om-vs-hero-desc {
  max-width: 52ch;
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.92;
}

.om-vs-hero-count {
  position: absolute;
  right: 28px;
  bottom: 28px;
  font-size: 12px;
  font-weight: 600;
}

.om-vs-trailer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 10px 18px;
  background: var(--om-red);
  color: var(--om-white);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease;
}

.om-vs-trailer:hover {
  background: var(--om-dark-red);
}

.om-vs-trailer svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* --- screen 2: tabs --- */

.om-vs-tabs {
  display: flex;
  gap: 26px;
  margin: 0 0 18px;
  border-bottom: 1px solid var(--om-border);
}

.om-vs-tab {
  padding: 0 0 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--om-gray);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.om-vs-tab[aria-selected="true"] {
  border-bottom-color: var(--om-red);
  color: var(--om-black);
}

.om-vs-panel[hidden] {
  display: none;
}

.om-vs-about {
  max-width: 68ch;
  color: var(--om-gray);
  font-size: 14px;
  line-height: 1.6;
}

/* --- empty player state --- */

.om-vertical-video-player--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111111 center/cover no-repeat;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.om-vertical-video-player--connatix {
  display: block;
  width: 100%;
  max-width: 420px;
  background: #111111;
}

/* --- playlist items are real links --- */

.om-playlist-item {
  color: inherit;
  text-decoration: none;
}

/* --- responsive --- */

@media (max-width: 992px) {
  .om-vs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .om-vs-hero-title {
    max-width: 22ch;
  }
}

@media (max-width: 768px) {
  .om-vs-wrap {
    padding: 24px 12px 44px;
  }
  .om-vs-intro {
    font-size: 13px;
  }
  .om-vs-hero {
    min-height: 240px;
    padding: 20px;
  }
  /*
   * Absolute positioning puts the count in the hero's bottom right corner,
   * which works while the description is one or two lines. On a narrow
   * screen it wraps to four and the two collide. Let it flow instead.
   */
  .om-vs-hero-count {
    position: static;
    align-self: flex-start;
    margin-top: 2px;
  }

  .om-vs-hero-desc {
    margin-bottom: 12px;
  }
  .om-vs-tabs {
    gap: 18px;
  }
}

@media (max-width: 576px) {
  .om-vs-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .om-vs-hero-title {
    max-width: none;
  }
}

/* ------------------------------------------------------------------ *
 * Polish pass. Depth and motion only; no layout or spacing changes, so
 * the prototype design above stays exactly as it was approved.
 * ------------------------------------------------------------------ */

/* --- series hero --- */

.om-vs-hero {
  border-radius: 4px;
  box-shadow:
    0 2px 6px rgba(17, 17, 17, 0.12),
    0 16px 36px rgba(17, 17, 17, 0.16);
}

.om-vs-hero-title {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

.om-vs-trailer {
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(201, 0, 0, 0.42);
  transition: background 0.15s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.om-vs-trailer:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(201, 0, 0, 0.5);
}

.om-vs-trailer:active {
  transform: translateY(0);
}

/* --- tabs --- */

.om-vs-tab {
  transition: color 0.15s ease, border-color 0.15s ease;
}

.om-vs-tab:hover {
  color: var(--om-black);
}

.om-vs-tab:focus-visible {
  outline: 2px solid var(--om-red);
  outline-offset: 3px;
}

/* --- playlist rows --- */

.om-playlist-item {
  border-radius: 4px;
  transition: background-color 0.15s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.om-playlist-item:hover {
  background-color: #fafafa;
  box-shadow:
    0 1px 2px rgba(17, 17, 17, 0.06),
    0 6px 16px rgba(17, 17, 17, 0.1);
  transform: translateX(2px);
}

.om-playlist-item:focus-visible {
  outline: 2px solid var(--om-red);
  outline-offset: 2px;
}

.om-playlist-item-active {
  box-shadow: inset 3px 0 0 var(--om-red);
}

.om-playlist-thumb {
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(17, 17, 17, 0.14);
}

.om-playlist-thumb::after {
  transition: transform 0.18s ease, background-color 0.18s ease;
}

.om-playlist-item:hover .om-playlist-thumb::after {
  transform: translate(-50%, -50%) scale(1.12);
}

/* --- player column --- */

.om-vertical-video-player {
  box-shadow:
    0 4px 12px rgba(17, 17, 17, 0.16),
    0 20px 48px rgba(17, 17, 17, 0.22);
}

.om-vertical-video-player--empty {
  border-radius: 2px;
}

/* --- action buttons --- */

.om-action-item {
  border-radius: 999px;
  transition: color 0.15s ease, transform 0.15s ease;
}

.om-action-item:hover {
  transform: translateY(-1px);
}

.om-action-item:focus-visible {
  outline: 2px solid var(--om-red);
  outline-offset: 3px;
}

/*
 * Anyone who has asked their system to reduce motion gets the depth cues
 * without the movement. Colour and shadow still convey state.
 */
@media (prefers-reduced-motion: reduce) {
  .om-vs-card,
  .om-vs-card-img,
  .om-vs-card-media::after,
  .om-vs-trailer,
  .om-playlist-item,
  .om-playlist-thumb::after,
  .om-action-item {
    transition-duration: 0.01ms;
  }

  .om-vs-card:hover,
  .om-vs-card:focus-visible,
  .om-vs-trailer:hover,
  .om-playlist-item:hover,
  .om-action-item:hover {
    transform: none;
  }

  .om-vs-card:hover .om-vs-card-img,
  .om-vs-card:focus-visible .om-vs-card-img,
  .om-playlist-item:hover .om-playlist-thumb::after {
    transform: none;
  }

  .om-vs-card-media::after {
    transform: translate(-50%, -50%);
  }
}

/* --- share dialog --- */

/*
 * Opened with showModal(), so the browser renders it in the top layer. It is
 * not in document flow at all: nothing behind it moves when it opens.
 */
.om-share-dialog {
  width: min(92vw, 420px);
  padding: 24px;
  border: 0;
  border-radius: 6px;
  background: var(--om-white);
  color: var(--om-black);
  font-family: var(--om-font-body);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32);
}

.om-share-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}

/*
 * The entrance animates transform only, never opacity.
 *
 * A dialog whose visibility depends on an animation finishing is a trap: if
 * the animation is paused, skipped or interrupted, the reader gets an
 * invisible dialog over a dimmed page with no way to tell what happened.
 * Movement is decoration, so only movement is animated.
 */
.om-share-dialog[open] {
  animation: om-share-in 0.18s ease;
}

@keyframes om-share-in {
  from {
    transform: translateY(10px) scale(0.985);
  }
  to {
    transform: translateY(0) scale(1);
  }
}

.om-share-dialog-close {
  position: absolute;
  top: 10px;
  right: 12px;
  padding: 2px 8px;
  border: 0;
  background: none;
  color: var(--om-gray);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  border-radius: 999px;
}

.om-share-dialog-close:hover {
  color: var(--om-red);
}

.om-share-dialog-close:focus-visible {
  outline: 2px solid var(--om-red);
  outline-offset: 2px;
}

.om-share-dialog-title {
  margin: 0 0 4px;
  font-family: var(--om-font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}

.om-share-dialog-sub {
  display: -webkit-box;
  margin: 0 0 18px;
  overflow: hidden;
  color: var(--om-gray);
  font-size: 13px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* --- copy row --- */

.om-share-copy {
  display: flex;
  gap: 8px;
  margin: 0 0 20px;
}

.om-share-url {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--om-border);
  border-radius: 4px;
  background: #fafafa;
  color: var(--om-gray);
  font-family: inherit;
  font-size: 12px;
  text-overflow: ellipsis;
}

.om-share-url:focus-visible {
  outline: 2px solid var(--om-red);
  outline-offset: 1px;
}

.om-share-copy-btn {
  flex: 0 0 auto;
  padding: 9px 16px;
  border: 0;
  border-radius: 4px;
  background: var(--om-red);
  color: var(--om-white);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.om-share-copy-btn:hover {
  background: var(--om-dark-red);
}

.om-share-copy-btn.is-done {
  background: #1f7a3d;
}

.om-share-copy-btn:focus-visible {
  outline: 2px solid var(--om-black);
  outline-offset: 2px;
}

/* --- social row --- */

.om-share-socials {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--om-border);
}

.om-share-social {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--om-gray);
  text-decoration: none;
}

.om-share-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--om-light-gray);
  transition: transform 0.16s ease, background 0.16s ease;
}

.om-share-social svg {
  width: 20px;
  height: 20px;
  fill: var(--om-white);
}

.om-share-social:hover .om-share-social-icon,
.om-share-social:focus-visible .om-share-social-icon {
  transform: translateY(-2px);
}

.om-share-social:focus-visible {
  outline: none;
}

.om-share-social:focus-visible .om-share-social-icon {
  outline: 2px solid var(--om-red);
  outline-offset: 3px;
}

.om-share-social-name {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
}

.om-share-social--whatsapp .om-share-social-icon { background: #25d366; }
.om-share-social--facebook .om-share-social-icon { background: #1877f2; }
.om-share-social--x .om-share-social-icon { background: #000000; }
.om-share-social--linkedin .om-share-social-icon { background: #0a66c2; }
.om-share-social--email .om-share-social-icon { background: var(--om-gray); }

/* Only rendered when the device actually has a share sheet. */
.om-share-native {
  width: 100%;
  margin-top: 18px;
  padding: 11px;
  border: 1px solid var(--om-border);
  border-radius: 4px;
  background: var(--om-white);
  color: var(--om-black);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.om-share-native:hover {
  border-color: var(--om-black);
}

@media (max-width: 400px) {
  .om-share-dialog {
    padding: 20px 16px;
  }
  .om-share-social-icon {
    width: 38px;
    height: 38px;
  }
  .om-share-social-name {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .om-share-dialog[open] {
    animation: none;
  }
  .om-share-social:hover .om-share-social-icon,
  .om-share-social:focus-visible .om-share-social-icon {
    transform: none;
  }
}

/* --- Connatix consent placeholder --- */

/*
 * Sits behind the player, not instead of it. Connatix renders its own
 * container as a child of ours, so the placeholder is pushed underneath with
 * z-index rather than removed. Browsers that support :has() drop it from the
 * layout entirely once the player exists; the rest simply have it covered.
 */
.om-vertical-video-player--connatix {
  position: relative;
}

.om-cnx-placeholder {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  color: rgba(255, 255, 255, 0.86);
  text-align: center;
}

.om-vertical-video-player--connatix .cnx-main-container {
  position: relative;
  z-index: 1;
}

.om-vertical-video-player--connatix:has(.cnx-main-container) .om-cnx-placeholder {
  display: none;
}

.om-cnx-placeholder-title {
  margin: 0;
  font-family: var(--om-font-heading);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.om-cnx-placeholder-text {
  max-width: 30ch;
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  opacity: 0.8;
}

.om-cnx-consent-btn {
  margin-top: 4px;
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--om-red);
  color: var(--om-white);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.om-cnx-consent-btn:hover {
  background: var(--om-dark-red);
}

.om-cnx-consent-btn:focus-visible {
  outline: 2px solid var(--om-white);
  outline-offset: 2px;
}

/* --- email capture --- */

/*
 * Selectors here are doubled up on purpose. The theme styles every email
 * field globally with input[type=email] { height: 3.5rem; font-size: 1rem },
 * and an attribute selector plus an element beats a single class. Two classes
 * win it back without resorting to !important.
 */

.om-vs-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Hidden from people, left in the DOM for scripts to fall into. */
.om-vs-signup .om-vs-signup-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.om-vs-signup {
  margin: 4px 0 10px;
  padding: 16px;
  background: #fafafa;
  border: 1px solid var(--om-border);
  border-radius: 4px;
}

.om-vs-signup .om-vs-signup-title {
  margin: 0 0 5px;
  color: var(--om-black);
  font-family: var(--om-font-heading);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}

.om-vs-signup .om-vs-signup-text {
  margin: 0 0 12px;
  color: var(--om-gray);
  font-size: 12px;
  line-height: 1.45;
}

.om-vs-signup .om-vs-signup-form {
  display: flex;
  gap: 8px;
}

.om-vs-signup .om-vs-signup-form[hidden] {
  display: none;
}

.om-vs-signup .om-vs-signup-email {
  flex: 1 1 auto;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--om-border);
  border-radius: 4px;
  background: var(--om-white);
  color: var(--om-black);
  font-family: var(--om-font-body);
  font-size: 14px;
  line-height: 40px;
}

.om-vs-signup .om-vs-signup-email::placeholder {
  color: var(--om-gray);
  font-size: 14px;
  opacity: 0.7;
}

.om-vs-signup .om-vs-signup-email:focus-visible {
  outline: 2px solid var(--om-red);
  outline-offset: 1px;
}

.om-vs-signup .om-vs-signup-btn {
  flex: 0 0 auto;
  height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 4px;
  background: var(--om-red);
  color: var(--om-white);
  font-family: var(--om-font-body);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease;
}

.om-vs-signup .om-vs-signup-btn:hover:not(:disabled) {
  background: var(--om-dark-red);
}

.om-vs-signup .om-vs-signup-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.om-vs-signup .om-vs-signup-btn:focus-visible {
  outline: 2px solid var(--om-black);
  outline-offset: 2px;
}

.om-vs-signup .om-vs-signup-status {
  margin: 9px 0 0;
  color: #1f7a3d;
  font-size: 12px;
  line-height: 1.4;
}

.om-vs-signup .om-vs-signup-status:empty {
  display: none;
}

.om-vs-signup .om-vs-signup-status.is-error {
  color: var(--om-red);
}

/* In the dialog the panel is the dialog, so it needs no frame of its own. */
.om-vs-signup-dialog .om-vs-signup {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}

.om-vs-signup-dialog .om-vs-signup-title {
  padding-right: 28px;
  font-size: 1.1rem;
}

.om-vs-signup-dialog .om-vs-signup-text {
  margin-bottom: 14px;
  font-size: 12px;
}

.om-vs-signup-dialog .om-vs-signup-email,
.om-vs-signup-dialog .om-vs-signup-btn {
  height: 44px;
  font-size: 14px;
}

@media (max-width: 480px) {
  .om-vs-signup .om-vs-signup-form {
    flex-direction: column;
  }
  .om-vs-signup .om-vs-signup-btn {
    width: 100%;
  }
}

/* --- title row with inline share --- */

.om-video-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

/* The heading already carries its own margins; the row must not add more. */
.om-video-title-row .om-video-main-title {
  flex: 1 1 auto;
  min-width: 0;
}

/*
 * Laid out as a row here rather than the stacked icon-over-label of the old
 * actions bar, so it reads as one small control beside the title instead of
 * a second column competing with it.
 */
.om-action-item--inline {
  flex: 0 0 auto;
  flex-direction: row;
  gap: 6px;
  margin-top: 4px;
  padding: 6px 12px;
  border: 1px solid var(--om-border);
  border-radius: 999px;
  color: var(--om-gray);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.om-action-item--inline svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.om-action-item--inline:hover {
  border-color: var(--om-red);
  color: var(--om-red);
  transform: none;
}

.om-action-item--inline.om-action-item--done {
  border-color: var(--om-red);
}

@media (max-width: 576px) {
  .om-action-item--inline {
    padding: 5px 10px;
    font-size: 11px;
  }
  .om-action-item--inline .om-share-label {
    display: none;
  }
  .om-action-item--inline.om-action-item--done .om-share-label,
  .om-action-item--inline.om-action-item--failed .om-share-label {
    display: inline;
  }
}

/* --- previous / next episode --- */

.om-episode-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: min(100%, 650px);
  margin: 14px auto 0;
}

.om-episode-nav-link {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 48%;
  padding: 9px 12px;
  border: 1px solid var(--om-border);
  border-radius: 999px;
  background: var(--om-white);
  color: var(--om-black);
  font-size: 12px;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.om-episode-nav-link--next {
  flex-direction: row-reverse;
  text-align: right;
}

.om-episode-nav-link svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.om-episode-nav-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.om-episode-nav-label {
  color: var(--om-gray);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.om-episode-nav-title {
  overflow: hidden;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.om-episode-nav-title:empty {
  display: none;
}

a.om-episode-nav-link:hover,
a.om-episode-nav-link:focus-visible {
  border-color: var(--om-red);
  color: var(--om-red);
}

a.om-episode-nav-link:focus-visible {
  outline: 2px solid var(--om-red);
  outline-offset: 2px;
}

/* No neighbour: keep the slot so the other button stays where it is. */
.om-episode-nav-link.is-disabled {
  color: var(--om-gray);
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

@media (max-width: 768px) {
  .om-episode-nav {
    width: 100%;
    margin-top: 12px;
  }
}

@media (max-width: 480px) {
  .om-episode-nav-link {
    padding: 8px 10px;
  }
  .om-episode-nav-title {
    display: none;
  }
  .om-episode-nav-label {
    font-size: 11px;
    letter-spacing: 0.03em;
  }
}

/*
 * The player column is a flex row from the prototype, which was fine while
 * the player was its only child. Adding Previous / Next beneath the player
 * put them beside it instead and squeezed the video to a sliver. Stack the
 * column so anything added under the player actually goes under it.
 */
.om-video-player-column {
  flex-direction: column;
  align-items: center;
  /* The prototype's justify-content: center meant "centre horizontally" on
     a row. On a column it means vertical, and with the column stretched to
     match the info column that floated the player 170px down. */
  justify-content: flex-start;
}

/* --- Connatix: size the frame to the player, not the other way round --- */

/*
 * The base player rule forces a 9:16 box because the MP4 player needs one.
 * Connatix brings its own container with its own height, so forcing a box
 * around it left a band of empty black underneath. Once the player exists,
 * the wrapper simply wraps it. Until it exists, keep the 9:16 box so the
 * consent placeholder has somewhere to sit.
 */
.om-vertical-video-player--connatix:has(.cnx-main-container) {
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  background: transparent;
  box-shadow: none;
}

.om-vertical-video-player--connatix:not(:has(.cnx-main-container)) {
  aspect-ratio: 9 / 16;
}

/* The mobile rules derive width from the viewport height for the MP4 frame;
   Connatix decides its own height, so just give it the column. */
@media (max-width: 768px) {
  .om-vertical-video-player--connatix {
    width: 100%;
    max-width: 420px;
  }
}

/* --- now playing --- */

/* Three bars that bounce while the row is the one playing. */
.om-now-playing-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  width: 12px;
  height: 11px;
}

.om-now-playing-bars i {
  display: block;
  width: 2.5px;
  height: 100%;
  border-radius: 1px;
  background: currentColor;
  transform-origin: bottom;
  animation: om-eq 0.9s ease-in-out infinite;
}

.om-now-playing-bars i:nth-child(2) {
  animation-delay: 0.2s;
}

.om-now-playing-bars i:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes om-eq {
  0%, 100% { transform: scaleY(0.35); }
  50%      { transform: scaleY(1); }
}

/* Eyebrow above the title. */
.om-now-playing-line {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 4px;
  color: var(--om-red);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.om-now-playing-sep {
  color: var(--om-gray);
  font-weight: 400;
}

#om-now-playing-pos {
  color: var(--om-gray);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Badge on the active playlist row, in the slot the duration normally uses. */
.om-now-playing-badge {
  display: none;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  color: var(--om-red);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.om-playlist-item-active .om-now-playing-badge {
  display: inline-flex;
}

.om-playlist-item-active .om-playlist-duration {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .om-now-playing-bars i {
    animation: none;
    transform: scaleY(0.7);
  }
}

/* --- keep the player in view while the playlist scrolls --- */

/*
 * A 9:16 player is taller than a laptop viewport. Left in normal flow it
 * cannot be seen whole: scroll to reach the controls and the top of the
 * picture leaves the screen, scroll back and the controls do. Two fixes,
 * together.
 *
 * One, the player column sticks. The right column, with the playlist, scrolls
 * past it. Two, the player is sized to the space that is actually visible:
 * the viewport minus the theme's fixed header (170px once the page has
 * scrolled), a gap, and the Previous / Next row beneath the player.
 */
.om-video-series-layout {
  --om-header-fixed: 170px;
  --om-player-budget: calc(100vh - var(--om-header-fixed) - 150px);
}

@media (min-width: 993px) {
  .om-video-player-column {
    position: sticky;
    top: calc(var(--om-header-fixed) + 20px);
    align-self: start;
  }

  /* MP4: height leads, width follows the 9:16 ratio. */
  .om-vertical-video-player {
    height: min(var(--om-player-budget), 900px);
  }

  /* Connatix decides its own height from the width it is given, so cap the
     width at what a 9:16 frame of the budgeted height would be. */
  .om-vertical-video-player--connatix {
    max-width: min(420px, calc(min(var(--om-player-budget), 900px) * 9 / 16));
  }

  .om-vertical-video-wrapper {
    width: 100%;
  }
}

/* --- long playlist, pinned player --- */

/*
 * Two ways to fit a tall player and a long playlist on a laptop screen.
 *
 * Cap both columns to the viewport and scroll the playlist inside itself: on
 * an 870px screen that left the list 120px tall, one episode, once the
 * title, blurb and signup form had taken their share. Tried and rejected.
 *
 * Or let the right column run as long as the playlist needs and pin the
 * player beside it. The list is fully visible, nothing scrolls inside a box,
 * and because the column is now much taller than the player the sticky
 * player has room to hold while the reader scrolls the episodes past it.
 * This is what YouTube does with its sidebar, and it is what is done here.
 */
@media (min-width: 993px) {
  .om-playlist-list {
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
  }
}

/* --- Connatix placeholder states --- */

.om-cnx-state {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.om-cnx-placeholder.is-consent .om-cnx-state--consent,
.om-cnx-placeholder.is-loading .om-cnx-state--loading,
.om-cnx-placeholder.is-failed  .om-cnx-state--failed {
  display: flex;
}

.om-cnx-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: var(--om-white);
  border-radius: 50%;
  animation: om-spin 0.8s linear infinite;
}

@keyframes om-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .om-cnx-spinner {
    animation: none;
    border-top-color: rgba(255, 255, 255, 0.25);
  }
}

/* ==========================================================================
   YouTube source
   ========================================================================== */

/*
 * The facade is a button the exact size of the player, holding the
 * thumbnail and a play badge. When pressed, the script replaces it with the
 * iframe, which then fills the same box — so nothing around it moves.
 */
.om-vertical-video-player--youtube {
  position: relative;
  display: block;
  width: 100%;
  background: #111111;
  overflow: hidden;
}

.om-vertical-video-player--youtube iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.om-yt-facade {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #111111;
  cursor: pointer;
}

.om-yt-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.om-yt-facade:hover .om-yt-thumb,
.om-yt-facade:focus-visible .om-yt-thumb {
  transform: scale(1.03);
}

/* The familiar red pill, so it reads as "this is a YouTube video". */
.om-yt-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 48px;
  background: #ff0000;
  border-radius: 14px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
  transform: translate(-50%, -50%);
  transition: background 0.2s ease, transform 0.2s ease;
}

.om-yt-play svg {
  width: 24px;
  height: 24px;
  fill: #ffffff;
}

.om-yt-facade:hover .om-yt-play,
.om-yt-facade:focus-visible .om-yt-play {
  background: var(--om-red);
  transform: translate(-50%, -50%) scale(1.06);
}

.om-yt-facade:focus-visible {
  outline: 3px solid var(--om-red);
  outline-offset: -3px;
}

/* On a vertical series the YouTube box keeps the tall frame like the others. */
.om-video-series-layout--vertical .om-vertical-video-player--youtube {
  aspect-ratio: 9 / 16;
  max-width: 420px;
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  .om-yt-thumb,
  .om-yt-play {
    transition: none;
  }
  .om-yt-facade:hover .om-yt-thumb {
    transform: none;
  }
}

/* ==========================================================================
   Horizontal series
   ========================================================================== */

/*
 * Same markup as the vertical page, different proportions. The player gets
 * most of the width and a 16:9 frame; the info column narrows and sits
 * beside it like a video site's sidebar. Everything below 993px is already
 * a single column, so the phone and tablet layouts need no second copy.
 */
@media (min-width: 993px) {
  .om-video-series-layout--horizontal {
    grid-template-columns: minmax(0, 1fr) 400px;
  }

  .om-video-series-layout--horizontal .om-video-player-column {
    padding: 40px 28px 40px 35px;
  }

  .om-video-series-layout--horizontal .om-video-info-column {
    padding: 40px 30px;
  }
}

@media (min-width: 1200px) {
  .om-video-series-layout--horizontal {
    grid-template-columns: minmax(0, 1fr) 420px;
  }
}

/* The frame: width leads, height follows 16:9, whichever the source. */
.om-video-series-layout--horizontal .om-vertical-video-wrapper {
  width: 100%;
  max-width: none;
}

.om-video-series-layout--horizontal .om-vertical-video-player {
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border-radius: 4px;
}

/* The base rule sizes the MP4 frame by height on desktop; a wide frame
   sized by height would overflow its column, so width leads here too. */
@media (min-width: 993px) {
  .om-video-series-layout--horizontal .om-vertical-video-player {
    height: auto;
    max-height: none;
  }

  .om-video-series-layout--horizontal .om-vertical-video-player--connatix {
    max-width: none;
  }
}

.om-video-series-layout--horizontal .om-vertical-video-player--connatix:not(:has(.cnx-main-container)) {
  aspect-ratio: 16 / 9;
}

.om-video-series-layout--horizontal .om-vertical-video-player--youtube,
.om-video-series-layout--horizontal .om-vertical-video-player--empty {
  aspect-ratio: 16 / 9;
  max-width: none;
}

/* Phones and tablets: the vertical rules derive the frame's width from the
   viewport height. A wide frame just takes the column. */
@media (max-width: 992px) {
  .om-video-series-layout--horizontal .om-vertical-video-wrapper,
  .om-video-series-layout--horizontal .om-vertical-video-player {
    width: 100%;
    max-width: none;
    height: auto;
    max-height: none;
  }
}

/* The Previous / Next row spans the wide player instead of the 650px cap. */
.om-video-series-layout--horizontal .om-episode-nav {
  width: 100%;
}

/* ==========================================================================
   Empty states
   ========================================================================== */

/*
 * One component for every "nothing here yet" moment. Built from the same
 * tokens as the rest of the page — Cabin for the heading, Inter for the
 * copy, the site red for the accent — so it reads as part of the design,
 * not as a system message. The dotted backdrop and the soft ring around
 * the icon give it some presence without competing with real content.
 */
.om-vs-empty {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 560px;
  margin: 8px auto 0;
  padding: 56px 32px 48px;
  text-align: center;
  color: var(--om-black);
  background:
    radial-gradient(circle at 50% 0%, rgba(185, 3, 2, 0.06) 0%, rgba(185, 3, 2, 0) 60%),
    radial-gradient(rgba(17, 17, 17, 0.07) 1px, transparent 1px) 0 0 / 14px 14px,
    var(--om-white);
  border: 1px solid var(--om-border);
  border-radius: 12px;
  box-shadow:
    0 1px 2px rgba(17, 17, 17, 0.04),
    0 12px 32px rgba(17, 17, 17, 0.06);
  overflow: hidden;
}

.om-vs-empty::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--om-red), #f31917 60%, rgba(243, 25, 23, 0.25));
}

.om-vs-empty--compact {
  max-width: 720px;
  padding: 36px 24px 32px;
}

/* Inside the episode page's side column it takes the column's width. */
.om-video-info-column .om-vs-empty--compact {
  max-width: none;
}

/* Icon in a ring, with a faint second ring so it feels lifted. */
.om-vs-empty-icon {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin-bottom: 6px;
  color: var(--om-red);
  background: var(--om-white);
  border-radius: 50%;
  box-shadow:
    0 0 0 1px var(--om-border),
    0 0 0 8px rgba(185, 3, 2, 0.05),
    0 8px 20px rgba(17, 17, 17, 0.08);
}

.om-vs-empty-icon svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
}

.om-vs-empty--compact .om-vs-empty-icon {
  width: 56px;
  height: 56px;
}

.om-vs-empty--compact .om-vs-empty-icon svg {
  width: 26px;
  height: 26px;
}

.om-vs-empty-title {
  margin: 0;
  font-family: var(--om-font-heading);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.om-vs-empty--compact .om-vs-empty-title {
  font-size: 19px;
}

.om-vs-empty-text {
  max-width: 42ch;
  margin: 0;
  font-family: var(--om-font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--om-gray);
}

.om-vs-empty--compact .om-vs-empty-text {
  font-size: 14px;
}

.om-vs-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}

/* Matches the theme's button: black pill, white text, red on hover. */
.om-vs-empty-btn {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 22px;
  font-family: var(--om-font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--om-white);
  background: var(--om-black);
  border: 1px solid var(--om-black);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.om-vs-empty-btn:hover,
.om-vs-empty-btn:focus-visible {
  color: var(--om-white);
  background: var(--om-red);
  border-color: var(--om-red);
  transform: translateY(-1px);
}

.om-vs-empty-btn:focus-visible {
  outline: 2px solid var(--om-red);
  outline-offset: 3px;
}

@media (max-width: 576px) {
  .om-vs-empty {
    padding: 40px 20px 36px;
    border-radius: 10px;
  }
  .om-vs-empty-title {
    font-size: 21px;
  }
  .om-vs-empty-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .om-vs-empty-btn {
    justify-content: center;
  }
}

/* --- player frame with no video yet --- */

/*
 * Same frame the video would occupy, poster dimmed behind a message. Replaces
 * the earlier single word in the middle of a black box, which looked like
 * the player had failed to load rather than like an episode that is on its
 * way. The signup form is directly under it, so the copy points there.
 */
.om-vertical-video-player--empty {
  position: relative;
  padding: 24px;
  color: var(--om-white);
  text-transform: none;
  letter-spacing: 0;
}

.om-vertical-video-player--empty::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 55%, rgba(17, 17, 17, 0.9) 0%, rgba(17, 17, 17, 0.55) 60%, rgba(17, 17, 17, 0.35) 100%),
    linear-gradient(180deg, rgba(17, 17, 17, 0.45) 0%, rgba(17, 17, 17, 0.8) 100%);
}

.om-vs-soon {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 300px;
  text-align: center;
}

.om-vs-soon-badge {
  display: inline-block;
  padding: 6px 12px;
  font-family: var(--om-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--om-white);
  background: var(--om-red);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(185, 3, 2, 0.4);
}

.om-vs-soon-title {
  margin: 4px 0 0;
  font-family: var(--om-font-heading);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.om-vs-soon-text {
  margin: 0;
  font-family: var(--om-font-body);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}

@media (prefers-reduced-motion: reduce) {
  .om-vs-empty-btn {
    transition: none;
  }
  .om-vs-empty-btn:hover {
    transform: none;
  }
}

/* ==========================================================================
   Now Playing (homepage block)
   ========================================================================== */

/*
 * The design that was approved as a static block, now driven by episodes.
 * Big widescreen player on the left, Up Next list on the right; stacks on
 * phones. The player inside is whichever om_vs_render_player() gives — a
 * video tag, a YouTube facade or a Connatix embed — so the frame rules
 * below override the episode page's tall defaults for all three.
 */
.om-np {
  --np-red: var(--om-red);
  --np-red-bright: #f31917;
  --np-line: #a2a2a2;
  margin: 0 0 48px;
  font-family: var(--om-font-body);
  color: var(--om-black);
}

.om-np *,
.om-np *::before,
.om-np *::after {
  box-sizing: border-box;
}

.om-np-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 8px;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--om-black);
}

.om-np-heading {
  margin: 0;
  font-family: var(--om-font-heading);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.om-np-more {
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--np-red);
  text-decoration: none;
  white-space: nowrap;
}

.om-np-more:hover,
.om-np-more:focus-visible {
  color: var(--np-red);
  text-decoration: underline;
}

.om-np-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  /* Both columns the same height, so the list panel ends where the
     player's caption ends instead of leaving a bare border below. */
  align-items: stretch;
}

.om-np-main {
  min-width: 0;
}

/* --- the frame --- */

.om-np-player {
  position: relative;
  width: 100%;
  background: #000;
  border-radius: 4px;
  overflow: hidden;
}

/* Every player kind becomes a widescreen frame here. */
.om-np-player .om-vertical-video-player {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 0;
  object-fit: contain;
}

.om-np-player .om-vertical-video-player--youtube,
.om-np-player .om-vertical-video-player--empty,
.om-np-player .om-vertical-video-player--connatix:not(:has(.cnx-main-container)) {
  aspect-ratio: 16 / 9;
  max-width: none;
}

.om-np-player .om-vertical-video-player--connatix {
  max-width: none;
}

.om-np-eyebrow {
  margin: 10px 0 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--np-red-bright);
}

.om-np-title {
  margin: 0;
  font-family: var(--om-font-heading);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}

.om-np-title a {
  color: inherit;
  text-decoration: none;
}

.om-np-title a:hover,
.om-np-title a:focus-visible {
  color: var(--np-red);
}

/* --- Up Next --- */

.om-np-next {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--om-white);
  border: 1px solid var(--np-line);
}

.om-np-next-head {
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--om-white);
  background: var(--om-black);
}

.om-np-card {
  /* Grow to share the panel's height, but never into a billboard. */
  flex: 1 1 auto;
  max-height: 150px;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--np-line);
  border-left: 3px solid transparent;
  transition: background 0.15s ease;
}

.om-np-card:last-of-type {
  border-bottom: 0;
}

/* Small "now playing" line under the active card's title, using the same
   animated bars as the episode page's playlist. */
.om-np-card-badge {
  display: none;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--np-red);
}

.om-np-card.is-active .om-np-card-badge {
  display: inline-flex;
}


.om-np-card:hover,
.om-np-card:focus-visible {
  background: #f7f7f7;
}

.om-np-card:focus-visible {
  outline: 2px solid var(--np-red);
  outline-offset: -2px;
}

.om-np-card.is-active {
  background: #faf3f3;
  border-left-color: var(--np-red-bright);
}

.om-np-card-thumb {
  flex: 0 0 34%;
  width: 34%;
  min-width: 0;
  aspect-ratio: 16 / 9;
  background: #ddd center/cover no-repeat;
  border-radius: 2px;
}

.om-np-card-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.om-np-card-show {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--np-red-bright);
}

.om-np-card-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.om-np-card:hover .om-np-card-title {
  color: var(--np-red);
}

/* The Up Next panel's own empty state sits inside the bordered box. */
.om-np-next .om-vs-empty {
  margin: 12px;
  box-shadow: none;
}

/* Editor-only note when the section has nothing to show. */
.om-np--editor-note {
  padding: 16px 20px;
  font-size: 14px;
  line-height: 1.5;
  color: #1e1e1e;
  background: #fff8e5;
  border: 1px solid #f0c36d;
  border-left-width: 4px;
  border-radius: 4px;
}

@media (max-width: 781px) {
  .om-np-grid {
    grid-template-columns: 1fr;
  }
  .om-np-heading {
    font-size: 24px;
  }
  .om-np-card-thumb {
    flex-basis: 38%;
    width: 38%;
  }
}

@media (max-width: 781px) {
  .om-np-card {
    max-height: none;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .om-np-card {
    transition: none;
  }
}

/* One quiet line under a short episode list, in place of a full panel. */
.om-playlist-note {
  margin: 14px 2px 0;
  padding-top: 12px;
  border-top: 1px solid var(--om-border);
  font-family: var(--om-font-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--om-gray);
}