/* NOWNA WatchTV — SOURCE DRILL-DOWN (Author direction 2026-09-25 + Amendment 1, responsive episode history).
 * Scope: ONLY the principal viewer (#player-temp) while it is in drill-down mode (.is-drill, set when a NOW source card
 * opened it). Every other use of the viewer is untouched. Nothing here names a source: GMA and CNA render identically.
 * Breakpoint: WatchTV's own mobile breakpoint, max-width 576px (144 rules in index.css; the viewer already stacks there).
 *   <= 576px  MOBILE  : episode history is a HORIZONTAL, swipeable, snapping rail of portrait cards.
 *   >  576px  DESKTOP / TABLET : the existing VERTICAL episode list beside the player (index.css), current marked. */

/* ---- drill bar: what is playing, from which source, how to go back, how to switch source -------------------- */
.player-temp.is-drill .drill-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 10px;
  padding-right: 64px;               /* clear of the viewer's own close control */
  min-width: 0;
}
.player-temp.is-drill .drill-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 0 14px 0 10px;
  border: 1px solid #2d3342;
  border-radius: 22px;
  background: #171a23;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.player-temp.is-drill .drill-back span { font-size: 22px; line-height: 1; color: #00a693; }
.player-temp.is-drill .drill-back:hover, .player-temp.is-drill .drill-back:focus-visible { border-color: #98d8d0; outline: none; }
.player-temp.is-drill .drill-source { display: flex; flex-direction: column; min-width: 0; }
.player-temp.is-drill .player-wrapper .drill-source-name { font-size: 15px; font-weight: 700; color: #fff; }
.player-temp.is-drill .player-wrapper .drill-position { font-size: 12px; color: #9ea6b8; }
.player-temp.is-drill .drill-switch { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.player-temp.is-drill .drill-chip {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #2d3342;
  border-radius: 22px;
  background: transparent;
  color: #d8dbe2;
  font-size: 13px;
  cursor: pointer;
}
.player-temp.is-drill .drill-chip.is-active { border-color: #00a693; background: rgba(0, 166, 147, 0.16); color: #fff; }
.player-temp.is-drill .drill-chip:focus-visible { outline: 2px solid #98d8d0; outline-offset: 2px; }

/* ---- the current episode, in both layouts ----------------------------------------------------------------- */
.player-temp.is-drill .player-wrapper .player-list .videos-list-wrapper .videos.is-current {
  border-color: #00a693;
  background: #13302d;
  box-shadow: inset 3px 0 0 #00a693;
  cursor: default;
}
.player-temp.is-drill .player-wrapper .player-list .videos-list-wrapper .videos:focus-visible { outline: 2px solid #98d8d0; outline-offset: 1px; }
.player-temp.is-drill .player-wrapper .player-list .videos-list-wrapper .videos .related-video-media {
  background: #22262f url("/assets/images/default-thumbnail.jpg") center / cover no-repeat;   /* thumbnail fallback */
  border-radius: 5px;
}
.player-temp.is-drill .player-wrapper .player-list .videos-list-wrapper .videos .drill-now {
  position: absolute;
  left: 4px;
  top: 4px;
  z-index: 2;
  padding: 1px 6px;
  border-radius: 3px;
  background: #00a693;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ---- personalization / action strip: the customer's own shelves, moved in under the history ----------------- */
.player-temp.is-drill .drill-actions { margin-top: 16px; padding-top: 12px; border-top: 1px solid #2d3342; min-width: 0; }
.player-temp.is-drill .drill-actions > section { margin-left: 0; margin-right: 0; max-width: 100%; }

/* rolling NOW items carry no channel picture (the registry logos are the known-missing NS-213 assets): no empty ring */
.player-temp.is-drill .content-details .image:has(> img:not([src])) { display: none; }

/* ---- DESKTOP / TABLET (> 576px): vertical history, the column scrolls vertically, shelves below the list ------ */
@media (min-width: 577px) {
  .player-temp.is-drill .player-wrapper .player-list { overflow-y: auto; overflow-x: hidden; }
  .player-temp.is-drill .player-wrapper .player-list .videos-list-wrapper {
    flex: 0 0 auto;
    max-height: min(58vh, 640px);
  }
}
/* TABLET (577–991px, 992 being WatchTV's own next breakpoint): the established side-by-side viewer leaves the history
 * column ~260px wide, so a drill-down card stacks its picture over its title — still a VERTICAL list, still vertical scroll. */
@media (min-width: 577px) and (max-width: 991px) {
  .player-temp.is-drill .player-wrapper .player-list .videos-list-wrapper .videos { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .player-temp.is-drill .player-wrapper .player-list .videos-list-wrapper .videos .related-video-media { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .player-temp.is-drill .player-wrapper .player-list .videos-list-wrapper .videos .related-video-title { -webkit-line-clamp: 3; }
}

/* ---- MOBILE (<= 576px): horizontal swipe rail of portrait cards, adjacent card peeking ----------------------- */
@media (max-width: 576px) {
  .player-temp.is-drill .player-wrapper .player-list .videos-list-wrapper {
    display: flex;
    flex-direction: row;
    gap: 12px;
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    padding: 6px 2px 14px;
    scrollbar-width: none;
  }
  .player-temp.is-drill .player-wrapper .player-list .videos-list-wrapper::-webkit-scrollbar { display: none; }
  .player-temp.is-drill .player-wrapper .player-list .videos-list-wrapper .videos {
    flex: 0 0 76%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 8px;
    scroll-snap-align: center;
    min-height: 44px;
  }
  .player-temp.is-drill .player-wrapper .player-list .videos-list-wrapper .videos:hover { transform: none; }
  .player-temp.is-drill .player-wrapper .player-list .videos-list-wrapper .videos .related-video-media {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .player-temp.is-drill .player-wrapper .player-list .videos-list-wrapper .videos .related-video-title { font-size: 14px; -webkit-line-clamp: 3; }
  .player-temp.is-drill .player-wrapper .player-list .videos-list-wrapper .videos.is-current { box-shadow: inset 0 3px 0 #00a693; }
  .player-temp.is-drill .player-wrapper .player-list .videos-list-wrapper .related-videos-empty,
  .player-temp.is-drill .player-wrapper .player-list .videos-list-wrapper .btn-group { flex: 0 0 auto; align-self: center; }
  .player-temp.is-drill .drill-bar { padding-right: 56px; }
  .player-temp.is-drill .drill-switch { margin-left: 0; }
  .player-temp.is-drill .player-wrapper .player-list { min-height: 0; padding-bottom: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .player-temp.is-drill .player-wrapper .player-list .videos-list-wrapper { scroll-behavior: auto; }
}