/**
 * StreamVerse — Live Channels Carousel
 *
 * REDESIGNED again per request: a large, logo-only square tile — no
 * visible text at all (name/category live only in each card's
 * aria-label now). Movies/Sports are the "big content" carousels;
 * Channels is intentionally the small, dense, quick-access one — a
 * row of channel logos, not a poster carousel and not a text-labeled
 * chip anymore either. The logo itself is now the entire visible
 * card, enlarged and centered, with a stronger violet glow + border +
 * subtle scale on hover/active — the same visual language as Movies'/
 * Sports' focus state, just tuned down to a scale appropriate for a
 * small tile (1.03-1.05) rather than a large poster (up to 1.15).
 *
 * Still the same underlying architecture as Movies/Sports (fixed
 * viewport + moving track, real-geometry center detection, seamless
 * loop) — only the CARD's own visual design changes here, not the
 * carousel mechanism itself.
 */

.channels-carousel {
  position: relative;
  /* No background-color here — same reasoning as Movies/Sports: this
     section sits directly on the single global page background. No
     overflow:hidden here either, for the same seam-avoidance reason
     documented at length on those two sections. */
  padding-top: var(--space-4); /* reduced from --space-5 — per request,
                                   this section's whole footprint should
                                   be noticeably more compact than
                                   Movies/Sports, starting with less air
                                   above the heading. */
  padding-bottom: var(--space-6); /* reduced from --space-7 */
}

.channels-carousel__inner {
  max-width: var(--grid-max-width);
  margin-inline: auto;
  padding-inline: var(--space-5);
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .channels-carousel__inner {
    padding-inline: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .channels-carousel__inner {
    padding-inline: var(--space-7);
  }
}

.channels-carousel__header {
  margin-bottom: var(--space-3); /* reduced from --space-4 — heading
                                     sits closer to the tiles below it,
                                     per "reduce unnecessary vertical
                                     spacing" */
}

.channels-carousel__title {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  line-height: var(--text-h2-line-height);
  font-weight: 700;
  color: var(--color-text-primary);
}

.channels-carousel__subtitle {
  margin-top: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: #A3AED0; /* per request: all section subtitles/descriptions
                      use this exact color */
}

/* ------------------------------------------------------------------
 * Fixed viewport — identical mechanism to Movies/Sports.
 * ------------------------------------------------------------------ */

.channels-carousel__track-wrap {
  position: relative;
}

.channels-carousel__viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  /* Smaller padding-block than Movies/Sports (--space-6/32px) — the
     hover/active lift on these tiles is deliberately tiny (see below),
     so it needs far less breathing room above/below the row. Keeping
     this tight is part of what makes the section compact. */
  padding-block: var(--space-3);
  margin-block: calc(-1 * var(--space-3));
  touch-action: pan-y;
  cursor: grab;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    black 24px,
    black calc(100% - 24px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    black 24px,
    black calc(100% - 24px),
    transparent 100%
  );
}

.channels-carousel__viewport:active {
  cursor: grabbing;
}

.channels-carousel__track {
  display: flex;
  /* Wider gap than the previous landscape-tile version (was --space-3,
     12px) — items got noticeably narrower once the text column was
     removed and the logo enlarged, so the gap was widened to keep
     roughly the same number of tiles visible per the request, while
     also giving the bigger logos the "generous whitespace" they need
     to read as premium rather than cramped. */
  gap: var(--space-5);
  width: max-content;
  will-change: transform;
  transition: opacity var(--duration-micro) var(--ease-standard);
}

.channels-carousel__track.is-jumping {
  transition:
    transform var(--duration-transition) var(--ease-standard),
    opacity var(--duration-micro) var(--ease-standard);
}

@media (prefers-reduced-motion: reduce) {
  .channels-carousel__track.is-jumping {
    transition: none;
  }
}

.channels-carousel__item {
  flex: 0 0 auto;
  /* Now just wide enough for the enlarged, centered logo tile itself
     (no text column anymore) — deliberately unrelated to Movies'/
     Sports' 140/160/200px poster-card widths, since a bare logo tile
     is a fundamentally smaller, simpler UI element than a content
     poster, not a shrunk version of one. */
  width: 96px;
}

@media (min-width: 480px) {
  .channels-carousel__item {
    width: 112px;
  }
}

@media (min-width: 1024px) {
  .channels-carousel__item {
    width: 132px;
  }
}

.channels-carousel__item:has(.js-channels-card.is-active) {
  position: relative;
  z-index: 3;
}

/* ------------------------------------------------------------------
 * Card — now just a single, enlarged, centered logo tile (no text
 * row anymore). The glass/surface treatment (translucent fill + soft
 * border) is unchanged from the previous version — that's still what
 * distinguishes Channels as UI chrome (a quick-access tile) rather
 * than the borderless/shadow-only artwork treatment Movies/Sports use
 * for their posters.
 * ------------------------------------------------------------------ */

.channels-carousel__card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1; /* square tile — the logo is the whole card now,
                           not a landscape row sharing space with text */
  padding: var(--space-3);
  /* Per explicit request: a white background inside each individual
     logo tile only, so logos (many of which are designed for a light
     background) stay clearly visible — the dark glass fill
     (rgba(22, 29, 43, 0.55)) this replaced is kept nowhere else on the
     page, and everything surrounding this card (section, viewport,
     track) still sits on the normal dark page background. Literal
     solid white rather than any existing token — there is no white
     background token in tokens.css (--color-text-primary is an
     off-white meant for text, not a background fill), and the ask is
     specifically a clean, neutral white behind the logo, not a tinted
     or off-white surface. Border, radius, and padding are untouched. */
  background-color: #FFFFFF;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  transition:
    background-color var(--duration-micro) var(--ease-standard),
    border-color var(--duration-micro) var(--ease-standard),
    box-shadow var(--duration-micro) var(--ease-standard),
    transform var(--duration-micro) var(--ease-standard);
}

@media (min-width: 1024px) {
  .channels-carousel__card {
    padding: var(--space-4); /* more generous whitespace around the
                                 logo at the larger desktop tile size */
  }
}

/* Hover/active — same visual language as Movies'/Sports' focus state
   (soft violet glow + brand-accent border + a small scale-up), just
   tuned down to a scale range appropriate for a small UI tile rather
   than a large poster (1.03-1.05 here vs. up to 1.15 on a poster).
   transform-origin is the default center, which is safe here — unlike
   a Movies poster, there's no title sitting below this tile that a
   center-scale could ever grow into. */
.channels-carousel__card:hover,
.channels-carousel__card.is-active {
  /* Stays white on hover/active too — the point of this change is a
     consistently visible logo, so the tile shouldn't flip back to a
     dark fill the moment it's focused. Border-color, glow, and scale
     (the actual hover "effect") are exactly as before. */
  background-color: #FFFFFF;
  border-color: var(--color-accent);
  box-shadow: 0 0 18px 2px var(--color-accent-glow);
  transform: scale(1.03);
}

.channels-carousel__card.is-active {
  transform: scale(1.04);
}

.channels-carousel__card.is-active:hover {
  box-shadow: 0 0 24px 3px var(--color-accent-glow);
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .channels-carousel__card {
    transition: background-color var(--duration-transition) var(--ease-standard),
      border-color var(--duration-transition) var(--ease-standard),
      box-shadow var(--duration-transition) var(--ease-standard);
  }

  .channels-carousel__card:hover,
  .channels-carousel__card.is-active,
  .channels-carousel__card.is-active:hover {
    transform: none; /* scale is purely decorative motion; the glow +
                         border still make the active/hover state clear
                         without it */
  }
}

/* Logo — enlarged and centered, filling nearly the whole card, with
   the card's own padding (above) providing the "comfortable
   whitespace" around it. object-fit:contain still guarantees the full
   logo stays visible and undistorted regardless of its own aspect
   ratio, never cropped. */
.channels-carousel__media-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.channels-carousel__image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ------------------------------------------------------------------
 * Prev/Next controls — same mechanism as Movies/Sports, sized down to
 * stay proportional to the smaller tiles (per request: "subtle and
 * proportional to the smaller cards").
 * ------------------------------------------------------------------ */

.channels-carousel__nav {
  display: none;
}

@media (min-width: 768px) {
  .channels-carousel__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px; /* was 40px on Movies/Sports */
    height: 32px;
    border-radius: var(--radius-full);
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-border-strong);
    color: var(--color-text-primary);
    z-index: 2;
    transition: background-color var(--duration-micro) var(--ease-standard);
  }

  .channels-carousel__nav:hover {
    background-color: var(--color-bg-elevated-hover);
  }

  .channels-carousel__nav--prev {
    left: calc(-1 * var(--space-4));
  }

  .channels-carousel__nav--next {
    right: calc(-1 * var(--space-4));
  }
}

@media (min-width: 1024px) {
  .channels-carousel__nav--prev {
    left: calc(-1 * var(--space-5));
  }

  .channels-carousel__nav--next {
    right: calc(-1 * var(--space-5));
  }
}

.channels-carousel__nav-icon {
  width: 14px; /* was 18px */
  height: 14px;
}