/* Featured titles share one playback surface. Only its selected video decodes. */
#main .hero.featured-carousel { max-height: none; touch-action: pan-y; }
.featured-carousel .hero-stage { position: absolute; inset: 0; z-index: -3; }
.featured-carousel .hero-stage .hero-poster,
#main .featured-carousel .hero-stage .hero-motion { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.featured-carousel .hero-stage .hero-motion { z-index: 1; }
.featured-carousel .hero-slide { height: 100%; }
#main .featured-carousel .hero-content { padding-bottom: 68px; padding-inline: max(56px, var(--gutter)); max-width: 510px; }
#main .featured-carousel .actions { gap: 12px; align-items: center; }
#main .featured-carousel .primary { min-width: 192px; min-height: 36px; height: 36px; padding: 8px 22px; font-size: 14px; line-height: 20px; }
#main .featured-carousel .hero-info { width: 36px; height: 36px; padding: 8px; }
#main .featured-carousel .hero-bottom { z-index: 4; gap: 9px; }
.featured-carousel .hero-arrow { position: absolute; z-index: 4; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 64px; padding: 0; border: 0; border-radius: 22px; color: #ffffff8c; background: transparent; box-shadow: none; transition: color 160ms ease; }
.featured-carousel .hero-arrow:before { content: ''; position: absolute; inset: 4px 8px; border-radius: 18px; background: #828b8c26; opacity: 0; pointer-events: none; transition: opacity 160ms ease; }
.featured-carousel .hero-arrow.previous { left: 8px; }
.featured-carousel .hero-arrow.next { right: 8px; }
.featured-carousel .hero-arrow svg { position: relative; width: 12px; height: 28px; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover:hover) and (pointer:fine) {
  .featured-carousel .hero-arrow:hover { color: #ffffffc7; }
  .featured-carousel .hero-arrow:hover:before { opacity: 1; }
}
.featured-carousel .hero-arrow:focus-visible { color: white; outline: 2px solid #ffffffb3; outline-offset: -5px; }
.featured-carousel .hero-arrow:focus-visible:before, .featured-carousel .hero-arrow:active:before { opacity: 1; }
.featured-carousel .hero-pagination { position: absolute; z-index: 4; bottom: 18px; left: 50%; transform: translateX(-50%); margin: 0; gap: 0; height: 32px; }
.featured-carousel .hero-pagination button { position: relative; width: 24px; height: 32px; border-radius: 12px; background: transparent; }
.featured-carousel .hero-pagination button:before { content: ''; position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; transform: translate(-50%, -50%); border-radius: 50%; background: #ffffff60; transition: background 180ms, width 180ms, height 180ms; }
.featured-carousel .hero-pagination button:has(+ .active):before,
.featured-carousel .hero-pagination button.active + button:before { width: 6px; height: 6px; }
.featured-carousel .hero-pagination button.active:before { width: 8px; height: 8px; background: white; }
.featured-carousel .hero-pagination button:not(.active):hover:before { background: #ffffffa3; }
.featured-carousel [hidden] { display: none !important; }
@media(max-width:700px) {
  #main .hero.featured-carousel { min-height: 510px; height: min(76svh, 620px); }
  #main .featured-carousel .hero-content { padding: 28px 25px 65px; max-width: min(90%, 450px); }
  #main .featured-carousel #hero-title { font-size: clamp(29px, 8vw, 38px); }
  #main .featured-carousel .hero-description { max-width: 290px; }
  #main .featured-carousel .primary { min-height: 44px; height: 44px; }
  #main .featured-carousel .hero-info { width: 44px; height: 44px; padding: 12px; }
  .featured-carousel .hero-arrow { top: 33%; color: #ffffffb3; }
  .featured-carousel .hero-arrow.previous { left: 4px; }
  .featured-carousel .hero-arrow.next { right: 4px; }
  #main .featured-carousel .hero-bottom { inset: 14px 14px auto auto; }
  .featured-carousel .hero-pagination { bottom: 14px; }
}
@media(prefers-reduced-motion:reduce) {
  .featured-carousel *, .featured-carousel *:before { transition: none !important; animation: none !important; }
}
@media(prefers-reduced-transparency:reduce), (prefers-contrast:more) {
  .featured-carousel .hero-arrow, .featured-carousel .hero-arrow:hover { color: white; }
  .featured-carousel .hero-arrow:before { background: #242628; opacity: 1; }
}
@media(forced-colors:active) {
  .featured-carousel .hero-arrow { border: 1px solid ButtonText; background: ButtonFace; color: ButtonText; }
  .featured-carousel .hero-arrow:before { display: none; }
  .featured-carousel .hero-pagination button:before { background: ButtonText; }
  .featured-carousel .hero-pagination button.active { outline: 2px solid Highlight; }
}