/* Keep programming in the card's reserved row, without covering the logo. */
.channel-item[data-kind='live'] { min-height: 0; }
.channel-item[data-kind='live'] .channel-now {
  position: static; inset: auto; display: grid; height: 77px; padding: 10px 2px 0;
  opacity: 1; visibility: visible; pointer-events: auto; border: 0;
  border-radius: 0; background: transparent; box-shadow: none; gap: 4px; align-content: start;
}
.channel-item :is(.channel-quality-link, .channel-quality-note) {
  display: block; height: 24px; min-height: 24px; margin: 3px 0 0; padding: 3px 0;
  color: var(--text-muted); font-size: 10px; line-height: 18px;
}
.channel-now[data-state='unavailable'] strong { color: var(--text-muted); font-weight: 450; }
.channel-now[data-state='loading'] { grid-template-columns: 12px 1fr; align-items: center; gap: 8px; }
.channel-now .live-preview-loading { width: 10px; height: 12px; background: var(--accent); clip-path: polygon(0 0, 100% 50%, 0 100%); animation: hls-soft-pulse 1.3s ease-in-out infinite; }
.channel-now .live-preview-status { color: var(--text-muted); font-size: 10px; }

/* Horizontal scene from the approved football composition. */
.sh-hero-football { height: clamp(235px, 17vw, 280px); }
.sh-hero-football .sh-football-atmosphere { display: none; }
.sh-hero-football .sh-hero-art {
  inset: 0 25% 0 auto; width: auto; max-width: 70%; height: 100%; object-fit: contain;
  object-position: center; mask-image: linear-gradient(90deg, transparent, #000 13%, #000 91%, transparent);
}
.sh-hero-football::after {
  background: linear-gradient(90deg, #050607dc 0%, #0506079c 23%, #05060714 47%, transparent 67%, #050607d9 91%, #050607f5), linear-gradient(0deg, #05060735, transparent 45%);
}

/* Real media and data requests share the app's quiet red play signal. */
:is(#content-presentation, #content-progress) img[data-image], .dx-poster-image, .sh-hero-art {
  transition: opacity 240ms ease;
}
.channel-artwork img { transition: opacity 240ms ease; }
.channel-artwork[data-image='loading'] img { opacity: 0; }
.channel-artwork[data-image='loading'] .channel-initials { color: var(--accent); animation: hls-soft-pulse 1.3s ease-in-out infinite; }
:is(#content-presentation, #content-progress) img[data-image='loading'],
.dx-poster-image[data-image='loading'], .sh-hero-art[data-image='loading'] { opacity: 0; }
.cp-hero[data-loading='true']::after {
  content: ''; position: absolute; top: 28px; right: 24px; width: 17px; height: 20px;
  background: var(--accent); clip-path: polygon(0 0, 100% 50%, 0 100%);
  animation: hls-soft-pulse 1.3s ease-in-out infinite;
}
:is(.dx-poster, .universal-poster, .hs-poster)[data-image='loading']::before,
.cp-cover[data-loading='true']::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, #e313320b 45%, #ffffff09 50%, transparent 70%);
  background-size: 250% 100%; animation: hls-media-shimmer 1.6s ease-in-out infinite;
}
:is(.cp-episode-row)[data-loading='true']::before {
  background: linear-gradient(100deg, var(--surface) 20%, var(--surface-elevated) 48%, var(--surface) 75%);
  background-size: 250% 100%; animation: hls-media-shimmer 1.6s ease-in-out infinite;
}
.dx-status[data-loading='true']::before,
.dx-guide-progress[data-loading='true']::before,
.universal-results[data-loading='true'] .universal-message::before {
  content: ''; display: inline-block; width: 10px; height: 12px; margin-right: 10px; vertical-align: -2px;
  background: var(--accent); clip-path: polygon(0 0, 100% 50%, 0 100%); animation: hls-soft-pulse 1.3s ease-in-out infinite;
}
.sh-hero-football[data-art-loading='true'], .sh-art-panel[data-art-loading='true'] {
  background: linear-gradient(100deg, #090a0c 20%, #191a1d 48%, #090a0c 75%);
  background-size: 250% 100%; animation: hls-media-shimmer 1.6s ease-in-out infinite;
}
@keyframes hls-media-shimmer { to { background-position-x: -180%; } }

@keyframes hls-soft-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
/* A verified landscape film still keeps the same card dimensions without cropping the source. */
img[src^="/assets/featured/reviewed-"][src$="-still.png"] { object-fit: contain !important; background: #090a0d; }
@media (max-width: 740px) {
  .sh-hero-football .sh-hero-art { inset: 0; width: 100%; max-width: none; object-fit: cover; object-position: 62% 70%; }
  .sh-hero-football::after { background: linear-gradient(90deg, #050607df, #05060791 36%, #05060717 70%, #05060740); }
}
@media (prefers-reduced-motion: reduce) {
  .channel-now .live-preview-loading { animation: none; opacity: .8; }
  .channel-artwork .channel-initials { animation: none; }
  :is(.cp-hero, .cp-cover, .cp-episode-row, .dx-status, .dx-guide-progress, .dx-poster, .universal-poster, .hs-poster, .universal-message)::before,
  .cp-hero::after, .sh-hero-football, .sh-art-panel { animation: none !important; }
}