/* ─── Enhanced Login / Register Icons ─────────────────────────── */

.user-menu-login,
.user-menu-register {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.user-menu-login::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='5' r='3' fill='black'/><path d='M2 15c0-3.314 2.686-6 6-6s6 2.686 6 6' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='5' r='3' fill='black'/><path d='M2 15c0-3.314 2.686-6 6-6s6 2.686 6 6' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/></svg>") center / contain no-repeat;
}

.user-menu-register::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='6.5' cy='5' r='2.8' fill='black'/><path d='M1 14c0-3.038 2.462-5.5 5.5-5.5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/><line x1='12.5' y1='8.5' x2='12.5' y2='13.5' stroke='black' stroke-width='1.7' stroke-linecap='round'/><line x1='10' y1='11' x2='15' y2='11' stroke='black' stroke-width='1.7' stroke-linecap='round'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='6.5' cy='5' r='2.8' fill='black'/><path d='M1 14c0-3.038 2.462-5.5 5.5-5.5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/><line x1='12.5' y1='8.5' x2='12.5' y2='13.5' stroke='black' stroke-width='1.7' stroke-linecap='round'/><line x1='10' y1='11' x2='15' y2='11' stroke='black' stroke-width='1.7' stroke-linecap='round'/></svg>") center / contain no-repeat;
}

/* ─── Auth Dialog Brand Icon ─────────────────────────────────── */

.auth-brand-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-top: 8px;
  border-radius: 16px;
  background: linear-gradient(145deg, #3b82f6 0%, #6366f1 100%);
  box-shadow: 0 8px 28px rgba(99, 102, 241, 0.38), 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  transition: background 380ms var(--ease), box-shadow 380ms var(--ease);
  animation: authIconIn 380ms var(--ease) both;
}

@keyframes authIconIn {
  from { transform: scale(0.7) translateY(-8px); opacity: 0; }
  to   { transform: scale(1) translateY(0);      opacity: 1; }
}

.auth-brand-icon::before {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  background: rgba(255, 255, 255, 0.93);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='11' width='18' height='11' rx='3' fill='black'/><path d='M7 11V7a5 5 0 0110 0v4' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='11' width='18' height='11' rx='3' fill='black'/><path d='M7 11V7a5 5 0 0110 0v4' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/></svg>") center / contain no-repeat;
  transition: opacity 220ms ease;
}

.auth-brand-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 55%);
  pointer-events: none;
}

/* Register mode — green gradient + person-plus icon */
.auth-dialog:has([data-auth-mode="register"].active) .auth-brand-icon {
  background: linear-gradient(145deg, #10b981 0%, #3b82f6 100%);
  box-shadow: 0 8px 28px rgba(16, 185, 129, 0.36), 0 2px 8px rgba(0, 0, 0, 0.1);
}

.auth-dialog:has([data-auth-mode="register"].active) .auth-brand-icon::before {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='10' cy='8' r='4' fill='black'/><path d='M2 20c0-4.418 3.582-8 8-8' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/><line x1='19' y1='13' x2='19' y2='19' stroke='black' stroke-width='2.4' stroke-linecap='round'/><line x1='16' y1='16' x2='22' y2='16' stroke='black' stroke-width='2.4' stroke-linecap='round'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='10' cy='8' r='4' fill='black'/><path d='M2 20c0-4.418 3.582-8 8-8' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/><line x1='19' y1='13' x2='19' y2='19' stroke='black' stroke-width='2.4' stroke-linecap='round'/><line x1='16' y1='16' x2='22' y2='16' stroke='black' stroke-width='2.4' stroke-linecap='round'/></svg>") center / contain no-repeat;
}

/* Dark mode glow boost */
html[data-theme="dark"] .auth-brand-icon {
  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.52), 0 2px 8px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .auth-dialog:has([data-auth-mode="register"].active) .auth-brand-icon {
  box-shadow: 0 8px 32px rgba(16, 185, 129, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Tighten gap between icon and title */
.auth-dialog .auth-brand-icon ~ h2 {
  margin-top: 14px;
}

/* ─── YouTube Section ─────────────────────────────────────────── */

.yt-section {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: 64px;
  align-items: center;
  max-width: 1220px;
  margin: 0 auto;
  padding: 100px 32px;
  background: var(--surface);
  box-shadow: 0 0 0 100vmax var(--surface);
  clip-path: inset(0 -100vmax);
}

.yt-kicker {
  color: #ff0000;
}

html[data-theme="dark"] .yt-kicker {
  color: #ff4545;
}

.yt-copy h2 {
  margin-top: 14px;
  font-size: 56px;
  line-height: 1.06;
  letter-spacing: -0.028em;
}

.yt-copy p {
  margin-top: 22px;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.62;
}

.yt-embed-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 28px 76px var(--poster-shadow);
  transition: transform 340ms var(--ease-spring), box-shadow 260ms var(--ease);
}

.yt-embed-wrap:hover {
  transform: translateY(-3px);
  box-shadow: 0 34px 90px var(--poster-shadow-hover);
}

.yt-embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

@media (max-width: 1100px) {
  .yt-section {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 72px 32px;
  }

  .yt-copy h2 {
    font-size: 46px;
  }
}

@media (max-width: 600px) {
  .yt-section {
    padding: 60px 20px;
  }

  .yt-copy h2 {
    font-size: 36px;
  }

  .yt-embed-wrap {
    border-radius: 14px;
  }
}

/* ─── Currently Watching — Apple-Homepage Style Showcase ─────── */

.watchlist-section {
  /* Override prior pure-black bg so it integrates with the theme like apple.com */
  background: var(--surface-alt);
  box-shadow: 0 0 0 100vmax var(--surface-alt);
  clip-path: inset(0 -100vmax);
  color: var(--ink);
  padding-bottom: 96px;
}

html[data-theme="dark"] .watchlist-section {
  background: #0a0a0c;
  box-shadow: 0 0 0 100vmax #0a0a0c;
}

.watchlist-section .section-kicker {
  color: var(--muted);
}

.watchlist-section h2 {
  color: var(--ink);
}

.watchlist-section .section-note {
  color: var(--muted);
}

.watchlist-head {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

/* === The Showcase Container === */
.watch-showcase {
  position: relative;
  margin-top: 52px;
  /* Break out of the inherited section padding so the track can full-bleed */
  margin-left: calc(50% - 50vw + 17px);
  margin-right: calc(50% - 50vw + 17px);
}

/* === The Scrollable Track === */
.watch-showcase-track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-inline: clamp(16px, calc(50vw - 540px), 50vw);
  scroll-padding-inline: clamp(16px, calc(50vw - 540px), 50vw);
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.watch-showcase-track::-webkit-scrollbar {
  display: none;
}

/* === Individual Hero Card === */
.watch-hero {
  position: relative;
  flex: 0 0 min(1080px, calc(100vw - 64px));
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 28px;
  background: #0a0a0c;
  color: #fff;
  text-decoration: none;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  isolation: isolate;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.32), 0 4px 14px rgba(0, 0, 0, 0.14);
  transition: transform 420ms var(--ease-spring), box-shadow 280ms var(--ease);
}

html[data-theme="dark"] .watch-hero {
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55), 0 4px 14px rgba(0, 0, 0, 0.3);
}

.watch-hero:hover {
  transform: translateY(-4px);
}

/* Poster image fills card */
.watch-hero-art {
  position: absolute;
  inset: 0;
}

.watch-hero-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transform: scale(1.02);
  transition: transform 800ms var(--ease);
}

/* Per-show poster framing — each vertical poster has its own visual center */
.watch-hero[data-show="euphoria"] .watch-hero-art img { object-position: center 38%; }
.watch-hero[data-show="boys"] .watch-hero-art img { object-position: center 26%; }
.watch-hero[data-show="invincible"] .watch-hero-art img { object-position: center 24%; }

.watch-hero:hover .watch-hero-art img {
  transform: scale(1.06);
}

/* Cinematic bottom-to-top vignette so text reads cleanly */
.watch-hero-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.32) 0%,
      rgba(0, 0, 0, 0) 30%,
      rgba(0, 0, 0, 0) 45%,
      rgba(0, 0, 0, 0.55) 78%,
      rgba(0, 0, 0, 0.85) 100%);
  pointer-events: none;
}

/* Top-left: plain brand wordmark, just like Apple's "Apple TV" / "Apple Music" */
.watch-hero-brand {
  position: absolute;
  top: clamp(20px, 3vw, 32px);
  left: clamp(22px, 3.4vw, 36px);
  z-index: 2;
  color: rgba(255, 255, 255, 0.96);
  font-size: clamp(13px, 1.05vw, 15px);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

/* Bottom layout: CTA pill on the left, info text to its right */
.watch-hero-foot {
  position: absolute;
  bottom: clamp(20px, 3vw, 32px);
  left: clamp(22px, 3.4vw, 36px);
  right: clamp(22px, 3.4vw, 36px);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* Solid white pill CTA — pure Apple homepage */
.watch-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: #1d1d1f;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  transition: background 180ms ease, transform 180ms var(--ease);
}

.watch-hero:hover .watch-hero-cta {
  background: #ffffff;
  transform: translateY(-1px);
}

.watch-hero-cta-arrow {
  display: inline-block;
  font-size: 12px;
  transform: translate(1px, -1px);
  transition: transform 220ms var(--ease-spring);
}

.watch-hero:hover .watch-hero-cta-arrow {
  transform: translate(2px, -2px);
}

/* Info column next to the CTA */
.watch-hero-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.watch-hero-title {
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.watch-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

.watch-meta-chip {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 500;
}

.watch-meta-sep {
  color: rgba(255, 255, 255, 0.36);
}

.watch-meta-rating {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 400;
}

.watch-meta-rating i {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rc, #30d158);
  box-shadow: 0 0 6px color-mix(in srgb, var(--rc, #30d158) 70%, transparent);
  font-style: normal;
}

.watch-meta-rating b {
  color: #fff;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.watch-meta-rating em {
  color: rgba(255, 255, 255, 0.62);
  font-style: normal;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* === Bottom navigation: prev / dots / next === */
.watch-showcase-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  padding-inline: 24px;
}

.watch-showcase-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--pill-surface, rgba(0, 0, 0, 0.06));
  color: var(--ink);
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, transform 220ms var(--ease-spring), opacity 220ms ease;
}

.watch-showcase-arrow:hover {
  background: var(--pill-surface-hover, rgba(0, 0, 0, 0.1));
  transform: scale(1.05);
}

.watch-showcase-arrow:disabled {
  opacity: 0.32;
  cursor: default;
  pointer-events: none;
}

.watch-showcase-arrow svg {
  width: 16px;
  height: 16px;
}

html[data-theme="dark"] .watch-showcase-arrow {
  background: rgba(255, 255, 255, 0.1);
  color: #f5f5f7;
}

html[data-theme="dark"] .watch-showcase-arrow:hover {
  background: rgba(255, 255, 255, 0.16);
}

.watch-showcase-dots {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.watch-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 22%, transparent);
  cursor: pointer;
  transition: width 240ms var(--ease-spring), background 200ms ease, transform 220ms var(--ease);
}

.watch-dot:hover {
  background: color-mix(in srgb, var(--ink) 38%, transparent);
}

.watch-dot.is-active {
  width: 22px;
  border-radius: 999px;
  background: var(--ink);
}

html[data-theme="dark"] .watch-dot {
  background: rgba(255, 255, 255, 0.22);
}

html[data-theme="dark"] .watch-dot:hover {
  background: rgba(255, 255, 255, 0.4);
}

html[data-theme="dark"] .watch-dot.is-active {
  background: #f5f5f7;
}

/* Responsive */
@media (max-width: 760px) {
  .watch-hero {
    aspect-ratio: 5 / 4;
    border-radius: 22px;
  }

  .watch-hero-cta {
    height: 34px;
    padding: 0 14px;
    font-size: 13px;
  }

  .watch-hero-title {
    font-size: 16px;
  }

  .watch-hero-meta {
    font-size: 11.5px;
  }
}

@media (max-width: 480px) {
  .watch-hero {
    aspect-ratio: 4 / 3.6;
    flex-basis: calc(100vw - 48px);
  }

  .watch-hero-foot {
    gap: 12px;
  }

  .watch-meta-rating em {
    display: none; /* hide "RT Critics" label, keep the colored dot + number */
  }

  .watch-showcase-arrow {
    display: none; /* on phone, swipe is enough */
  }
}

@media (prefers-reduced-motion: reduce) {
  .watch-showcase-track {
    scroll-behavior: auto;
  }

  .watch-hero,
  .watch-hero-art img,
  .watch-hero-cta,
  .watch-hero-cta-arrow {
    transition: none;
  }
}

/* ─── Entertainment — Apple Homepage Style Integrated Strip ─────── */

.entertainment-section {
  position: relative;
  overflow: hidden;
  padding: 78px 0 84px;
  color: #1d1d1f;
  background: #f5f5f7;
  box-shadow: 0 0 0 100vmax #f5f5f7;
  clip-path: inset(0 -100vmax);
}

html[data-theme="dark"] .entertainment-section {
  color: #f5f5f7;
  background: #101012;
  box-shadow: 0 0 0 100vmax #101012;
}

.entertainment-copy {
  max-width: 980px;
  margin: 0 auto 44px;
  padding: 0 24px;
  text-align: center;
}

.entertainment-kicker {
  margin: 0 0 14px;
  color: var(--muted);
}

html[data-theme="dark"] .entertainment-kicker {
  color: rgba(245, 245, 247, 0.62);
}

.entertainment-copy h2 {
  margin: 0;
  color: currentColor;
  font-size: clamp(48px, 6vw, 84px);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.entertainment-copy .entertainment-desc {
  max-width: 640px;
  margin: 18px auto 0;
  color: #6e6e73;
  font-size: 17px;
  line-height: 1.5;
}

html[data-theme="dark"] .entertainment-copy .entertainment-desc {
  color: #a1a1a6;
}

.entertainment-stage {
  position: relative;
}

/* Full-bleed horizontal rail, Apple-style */
.entertainment-scroll {
  overflow: hidden;
  padding-inline: max(22px, calc((100vw - 1260px) / 2));
  scroll-padding-inline: max(22px, calc((100vw - 1260px) / 2));
  scroll-snap-type: none;
  scroll-behavior: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: auto;
  overscroll-behavior-x: none;
  touch-action: pan-y;
}

.entertainment-scroll::-webkit-scrollbar {
  display: none;
}

/* Single row of uniform tiles */
.entertainment-rail {
  display: flex;
  gap: 18px;
  width: max-content;
  align-items: flex-start;
  will-change: transform;
}

.entertainment-scroll.is-marquee-ready .entertainment-rail {
  animation: entertainmentMarquee var(--entertainment-loop-duration, 58s) linear infinite;
}

@keyframes entertainmentMarquee {
  to {
    transform: translate3d(calc(var(--entertainment-loop-distance, 0px) * -1), 0, 0);
  }
}

/* Uniform tall portrait card, ~ Apple TV+ tile */
.entertainment-card {
  position: relative;
  height: clamp(320px, 30vw, 420px);
  width: auto;
  aspect-ratio: var(--media-ratio, 4 / 5);
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 18px;
  background: #0a0a0c;
  color: #fff;
  text-decoration: none;
  scroll-snap-align: start;
  isolation: isolate;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
  transition:
    transform 380ms var(--ease, cubic-bezier(0.16, 1, 0.3, 1)),
    box-shadow 280ms ease;
}

.entertainment-video-card {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.08), transparent 36%),
    linear-gradient(180deg, #101012 0%, #050506 100%);
}

html[data-theme="dark"] .entertainment-card {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.3);
}

.entertainment-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.26), 0 4px 10px rgba(0, 0, 0, 0.12);
}

/* Background artwork fills the whole tile */
.entertainment-card img,
.entertainment-card .entertainment-card-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 800ms var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.entertainment-card .entertainment-card-video {
  object-fit: contain;
  object-position: center center;
  transform: none;
  filter: brightness(0.72) contrast(0.88) saturate(0.82);
  background: transparent;
}

.entertainment-card:hover img,
.entertainment-card:hover .entertainment-card-video {
  transform: scale(1.06);
}

.entertainment-card:hover .entertainment-card-video {
  transform: none;
}

/* Feature card — wider lead tile with motion video background (Lady Gaga) */
.entertainment-card-feature {
  aspect-ratio: var(--media-ratio, 4 / 3);
  background: #050505;
}

.entertainment-card-feature::after {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0) 28%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0.65) 76%, rgba(0, 0, 0, 0.92) 100%);
}

.entertainment-card-eyebrow {
  margin: 0 0 2px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.entertainment-card-feature .entertainment-card-copy strong {
  font-size: 24px;
  line-height: 1.08;
  letter-spacing: -0.012em;
}

.entertainment-card-feature .entertainment-card-copy span {
  font-size: 13.5px;
  -webkit-line-clamp: 3;
}

.entertainment-card-feature .entertainment-brand {
  font-size: 14px;
}

/* Cinematic gradient so text stays legible */
.entertainment-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0) 30%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.62) 78%, rgba(0, 0, 0, 0.88) 100%);
  pointer-events: none;
}

/* Brand wordmark — top-left, Apple-style */
.entertainment-brand {
  position: absolute;
  top: 18px;
  left: 20px;
  z-index: 3;
  color: rgba(255, 255, 255, 0.96);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.34);
}

/* Footer stack: title + meta on top, CTA pill at the bottom */
.entertainment-card-footer {
  position: absolute;
  inset: auto 20px 20px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.entertainment-card-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  width: 100%;
}

.entertainment-card-copy strong {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.005em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.42);
}

.entertainment-card-copy span {
  color: rgba(255, 255, 255, 0.82);
  font-size: 12.5px;
  line-height: 1.32;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.42);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Solid white pill CTA — pure Apple homepage */
.entertainment-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: #ffffff;
  color: #1d1d1f;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
  transition:
    background 180ms ease,
    transform 220ms var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.entertainment-cta-arrow {
  display: inline-block;
  font-size: 12px;
  transform: translate(2px, -1px);
  transition: transform 240ms var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.entertainment-card:hover .entertainment-cta {
  background: #f5f5f7;
}

.entertainment-card:hover .entertainment-cta-arrow {
  transform: translate(5px, -1px);
}

/* The rescue card has its own background flavor on top of the poster */
.entertainment-rescue-card {
  background: #1c1816;
}

.entertainment-rescue-card img {
  filter: brightness(0.72) saturate(118%) contrast(0.92);
  transform: scale(1.18);
  opacity: 0.85;
}

.entertainment-rescue-card .entertainment-card-video {
  filter: brightness(0.7) contrast(0.88) saturate(0.8);
  object-position: center center;
}

.entertainment-rescue-card:hover img {
  transform: scale(1.22);
}

.entertainment-rescue-card::after {
  background:
    radial-gradient(circle at 78% 22%, rgba(255, 214, 10, 0.22), rgba(255, 214, 10, 0) 40%),
    linear-gradient(180deg, rgba(10, 10, 12, 0.62) 0%, rgba(10, 10, 12, 0.22) 30%, rgba(10, 10, 12, 0.72) 78%, rgba(10, 10, 12, 0.92) 100%);
}

/* Series poster tiles keep the source poster ratio instead of the uniform crop. */
.entertainment-card-poster:not(.entertainment-rescue-card) {
  aspect-ratio: var(--media-ratio, 2 / 3);
}

.entertainment-card-poster:not(.entertainment-rescue-card) img {
  object-position: center center;
  transform: none;
}

.entertainment-card-poster:not(.entertainment-rescue-card):hover img {
  transform: scale(1.025);
}

.entertainment-music-card img,
.entertainment-soft-card img,
.entertainment-night-card img {
  background: #151518;
  object-position: center center;
}

.entertainment-music-card .entertainment-card-video {
  filter: brightness(0.72) contrast(0.88) saturate(0.84);
  object-position: center center;
}

.entertainment-soft-card .entertainment-card-video {
  filter: brightness(0.68) contrast(0.88) saturate(0.76);
  object-position: center center;
}

.entertainment-night-card .entertainment-card-video {
  filter: brightness(0.7) contrast(0.88) saturate(0.8);
  object-position: center center;
}

.entertainment-daily-card img {
  object-position: center center;
}

/* === Nav row: arrow / dots / arrow === */
.entertainment-nav {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin-top: 36px;
  padding-inline: 24px;
}

.entertainment-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(29, 29, 31, 0.08);
  color: #1d1d1f;
  cursor: pointer;
  transition:
    background 180ms ease,
    color 180ms ease,
    transform 220ms var(--ease, cubic-bezier(0.16, 1, 0.3, 1)),
    opacity 220ms ease;
}

.entertainment-arrow:hover {
  background: rgba(29, 29, 31, 0.14);
  transform: scale(1.05);
}

.entertainment-arrow:disabled {
  opacity: 0.32;
  cursor: default;
  pointer-events: none;
}

.entertainment-arrow svg {
  width: 16px;
  height: 16px;
}

html[data-theme="dark"] .entertainment-arrow {
  background: rgba(245, 245, 247, 0.1);
  color: #f5f5f7;
}

html[data-theme="dark"] .entertainment-arrow:hover {
  background: rgba(245, 245, 247, 0.18);
}

.entertainment-dots {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.entertainment-dots button {
  position: relative;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition:
    width 260ms var(--ease, cubic-bezier(0.16, 1, 0.3, 1)),
    transform 180ms ease;
  -webkit-tap-highlight-color: transparent;
}

.entertainment-dots button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(29, 29, 31, 0.24);
  transform: translate(-50%, -50%);
  transition:
    width 260ms var(--ease, cubic-bezier(0.16, 1, 0.3, 1)),
    background 200ms ease,
    box-shadow 200ms ease;
}

.entertainment-dots button:hover {
  transform: scale(1.08);
}

.entertainment-dots .is-active {
  width: 34px;
}

.entertainment-dots .is-active::before {
  width: 24px;
  background: #1d1d1f;
}

html[data-theme="dark"] .entertainment-dots button::before {
  background: rgba(245, 245, 247, 0.28);
}

html[data-theme="dark"] .entertainment-dots .is-active::before {
  background: #f5f5f7;
}

.entertainment-anchor {
  display: block;
  height: 1px;
  pointer-events: none;
}

@media (max-width: 900px) {
  .entertainment-section {
    padding-top: 64px;
    padding-bottom: 68px;
  }

  .entertainment-copy {
    margin-bottom: 32px;
  }

  .entertainment-copy .entertainment-desc {
    font-size: 15.5px;
  }

  .entertainment-rail {
    gap: 14px;
  }

  .entertainment-card {
    flex-basis: clamp(240px, 56vw, 320px);
  }

  .entertainment-card-feature {
    flex-basis: clamp(320px, 78vw, 460px);
  }

  .entertainment-video-card,
  .entertainment-card-feature.entertainment-video-card {
    flex-basis: clamp(210px, 58vw, 300px);
  }

  .entertainment-video-card.is-landscape-video,
  .entertainment-card-feature.entertainment-video-card.is-landscape-video {
    flex-basis: clamp(320px, 82vw, 480px);
  }

  .entertainment-card-feature .entertainment-card-copy strong {
    font-size: 21px;
  }
}

@media (max-width: 560px) {
  .entertainment-copy .entertainment-desc {
    font-size: 14.5px;
  }

  .entertainment-scroll {
    padding-inline: 18px;
    scroll-padding-inline: 18px;
  }

  .entertainment-rail {
    gap: 12px;
  }

  .entertainment-card {
    flex-basis: min(74vw, 300px);
    border-radius: 16px;
  }

  .entertainment-card-feature {
    flex-basis: min(86vw, 360px);
  }

  .entertainment-video-card,
  .entertainment-card-feature.entertainment-video-card {
    flex-basis: min(70vw, 280px);
  }

  .entertainment-video-card.is-landscape-video,
  .entertainment-card-feature.entertainment-video-card.is-landscape-video {
    flex-basis: min(88vw, 430px);
  }

  .entertainment-card-feature .entertainment-card-copy strong {
    font-size: 19px;
  }

  .entertainment-card-footer {
    inset: auto 16px 16px;
    gap: 12px;
  }

  .entertainment-card-copy strong {
    font-size: 17px;
  }

  .entertainment-card-copy span {
    font-size: 12px;
  }

  .entertainment-brand {
    top: 14px;
    left: 16px;
    font-size: 12px;
  }

  .entertainment-card-eyebrow {
    font-size: 10.5px;
  }

  .entertainment-arrow {
    display: none;   /* swipe is enough on phones */
  }
}

@media (prefers-reduced-motion: reduce) {
  .entertainment-scroll {
    overflow-x: auto;
    scroll-behavior: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .entertainment-scroll.is-marquee-ready .entertainment-rail {
    animation: none;
    transform: none;
  }

  .entertainment-card,
  .entertainment-card img,
  .entertainment-card video,
  .entertainment-cta,
  .entertainment-cta-arrow,
  .entertainment-arrow,
  .entertainment-dots button,
  .entertainment-dots button::before {
    transition: none;
  }
}

@media (dynamic-range: high) {
  .entertainment-card .entertainment-card-video {
    filter: brightness(0.66) contrast(0.86) saturate(0.76);
  }
}