/* ============================================
   Sports.com – Base & Variables (Dark)
   ============================================ */

:root {
  --bg-dark: #1a1a1a;
  --bg-card: #282828;
  --bg-card-hover: #333333;
  --bg-scores: #252525;
  --text-primary: #ffffff;
  --text-secondary: #cccccc;
  --text-muted: #aaaaaa;
  --accent: #e63946;
  --accent-hover: #ff4d5a;
  --section-title: #ffffff;
  --border: #2a2a2a;
  --max-width: 1200px;
  --section-gap: 3rem;
  --card-radius: 8px;
  --header-h: 56px;
  --scores-h: 44px;
  --scrollbar-track: #252525;
  --scrollbar-thumb: #555555;
  --scrollbar-thumb-hover: #e63946;
}

/* ============================================
   Light mode variables
   ============================================ */
html[data-theme="light"],
html.theme-light {
  --bg-dark: #f7f7f7;
  --bg-card: #ffffff;
  --bg-card-hover: #eeeeee;
  --bg-scores: #eeeeee;
  --text-primary: #1a1a1a;
  --text-secondary: #4a4a4a;
  --text-muted: #737373;
  --section-title: #1a1a1a;
  --border: #e0e0e0;
  --scrollbar-track: #e8e8e8;
  --scrollbar-thumb: #b0b0b0;
  --scrollbar-thumb-hover: #e63946;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  position: relative;
  min-height: 100vh;
}

/* Background image on body - shows on sides beyond 1920px container */
body {
  margin: 0;
  font-family: 'Bebas Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: var(--bg-dark);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Header (first child) does not shrink so page-wrap gets remaining height */
body > div:first-child {
  flex-shrink: 0;
}

/* Only show background image on screens wider than 1920px (on the sides) */
@media (min-width: 1921px) {
  body {
    background-image: url('/new/images/background-wide.png');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ============================================
   Scrollbars – dark theme (default, html/body only; sidebar in sidebar.css)
   ============================================ */
html,
body {
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  scrollbar-color: #555555 #252525;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: #252525 !important;
  border-radius: 0;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background: #555555 !important;
  border-radius: 5px;
  border: 2px solid #252525;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background: #e63946 !important;
}

/* Horizontal scrollbars – dark */
.top-views-scroll,
.scores-scroll {
  scrollbar-width: thin;
  scrollbar-color: #555555 #252525;
}

.top-views-scroll::-webkit-scrollbar,
.scores-scroll::-webkit-scrollbar {
  height: 8px;
}

.top-views-scroll::-webkit-scrollbar-track,
.scores-scroll::-webkit-scrollbar-track {
  background: #252525 !important;
  border-radius: 4px;
}

.top-views-scroll::-webkit-scrollbar-thumb,
.scores-scroll::-webkit-scrollbar-thumb {
  background: #555555 !important;
  border-radius: 4px;
  border: 2px solid #252525;
}

.top-views-scroll::-webkit-scrollbar-thumb:hover,
.scores-scroll::-webkit-scrollbar-thumb:hover {
  background: #e63946 !important;
}

/* ============================================
   Logo & Icons
   ============================================ */
.logo {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  height: auto;
  flex: 1;
  min-width: 0;
}

.logo-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 191px;
  object-fit: contain;
}


.close-icon-img {
  display: block;
  height: 24px;
  width: auto;
  object-fit: contain;
}

.profile-icon-img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}

.menu-icon-img {
  display: block;
  height: 24px;
  width: auto;
  object-fit: contain;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.close-icon-img {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-icon-img {
  display: block;
  height: 20px;
  width: auto;
  object-fit: contain;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-icon[aria-label="Search"]:hover .search-icon-img {
  transform: scale(1.15);
}

.btn-icon[aria-label="Search"]:hover {
  color: #EA0029;
}

.lang-chevron-img {
  display: inline-block;
  vertical-align: middle;
  width: 10px;
  height: 10px;
  object-fit: contain;
  margin-left: 0.2rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lang-dropdown-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.lang-dropdown-wrap .lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  min-width: 0;
  padding: 0 0.25rem;
  height: 36px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.lang-dropdown-wrap .lang-trigger:hover {
  color: #EA0029;
  transform: scale(1.15);
}

.lang-dropdown-wrap .lang-trigger:hover .lang-code {
  color: #EA0029;
}

.lang-dropdown-wrap .lang-trigger:hover .lang-chevron-img {
  transform: translateY(2px);
}

.lang-dropdown-wrap .lang-code {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0%;
  vertical-align: middle;
  transform: translateY(2px);
  transition: color 0.3s ease;
}

.lang-dropdown-wrap .lang-chevron-img {
  margin-left: 0;
  pointer-events: none;
  flex-shrink: 0;
  transform: translateY(2px);
}

.lang-dropdown-wrap .lang-dropdown-panel {
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0.25rem 0 0;
  min-width: 12rem;
  max-height: none;
  overflow: visible;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  z-index: 300;
  display: none;
}

.lang-dropdown-wrap.is-open .lang-dropdown-panel {
  display: block;
}

/* Language dropdown – shared list/options (header, sidebar, landing, auth) */
.lang-dropdown-wrap .lang-list,
.landing-lang-list {
  padding: 0.25rem 0;
  margin: 0;
  list-style: none;
  max-height: none;
  overflow: visible;
}

.lang-dropdown-wrap .lang-list li,
.landing-lang-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #ffffff;
  cursor: pointer;
  border-bottom: 1px solid #2a2a2a;
}

.lang-dropdown-wrap .lang-list li:last-child,
.landing-lang-list li:last-child {
  border-bottom: none;
}

.lang-dropdown-wrap .lang-list li:hover,
.landing-lang-list li:hover {
  background: rgba(255, 255, 255, 0.08);
}

.lang-dropdown-wrap .lang-list li[aria-selected="true"],
.landing-lang-list li[aria-selected="true"] {
  background: #EA0029;
  color: #ffffff;
}

.lang-dropdown-wrap .lang-list li[aria-selected="true"] .lang-option-name,
.landing-lang-list li[aria-selected="true"] .lang-option-name {
  color: #ffffff;
}

.lang-dropdown-wrap .lang-option-name,
.landing-lang-list .lang-option-name {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0%;
  vertical-align: middle;
  flex: 1;
  min-width: 0;
}

.lang-dropdown-wrap .lang-option-flag,
.landing-lang-list .lang-option-flag {
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
}

.live-logo {
  display: block;
  height: 28px;
  width: auto;
  object-fit: contain;
}

.live-logo-sidebar {
  height: 24px;
}

/* ============================================
   Scores bar (separate div, dark by default)
   ============================================ */
.scores-bar {
  background: #252525;
  border-bottom: 1px solid #2a2a2a;
  border-top: 1px solid #333333;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  min-height: var(--scores-h);
  gap: 1rem;
}

.scores-scroll {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  overflow-x: auto;
  flex: 1;
  min-height: 44px;
  -webkit-overflow-scrolling: touch;
}

.score-item {
  flex-shrink: 0;
  color: #a0a0a0;
  font-size: 0.8rem;
  white-space: nowrap;
}

.score-item:hover {
  color: #ffffff;
}

.score-date {
  color: #6b6b6b;
  margin-right: 0.35rem;
}

.scores-full {
  flex-shrink: 0;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.5rem 0;
}

.scores-full:hover {
  color: var(--accent-hover);
}

/* ============================================
   Hero carousel
   ============================================ */
.hero {
  max-width: 1440px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 0;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.hero-carousel {
  position: relative;
  border-radius: var(--card-radius);
  overflow: hidden;
}

.hero-track {
  display: flex;
  width: 300%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  transition: transform 0.4s ease;
}

.hero-track::-webkit-scrollbar {
  display: none;
}

.hero-slide {
  flex: 0 0 33.333%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-width: 0;
}

.hero-placeholder {
  position: relative;
  aspect-ratio: 16 / 7;
  min-height: 280px;
  background: var(--bg-card);
  overflow: hidden;
}

.hero-placeholder .hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.hero-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.5rem 1.5rem 2.75rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, transparent 100%);
  text-align: left;
}

.hero-live-now {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin-bottom: 0.5rem;
  min-width: 81px;
  height: 36px;
  padding: 7.88px 12.08px 4.2px 12.08px;
  border-radius: 4.03px;
  background: #EA0029;
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20.14px;
  line-height: 100%;
  letter-spacing: 0;
  vertical-align: middle;
  color: #fff;
  cursor: pointer;
  border: none;
  text-decoration: none;
}

.hero-title {
  margin: 0 0 0.35rem;
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(22px, 4.5vw + 18px, 48.33px);
  line-height: 100%;
  letter-spacing: 0;
  vertical-align: middle;
  text-transform: uppercase;
  color: #fff;
}

.hero-meta {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16.11px;
  line-height: 100%;
  letter-spacing: 0;
  vertical-align: middle;
  color: #fff;
}

.hero-meta-league {
  color: #EA0029;
}

.hero-indicators {
  position: absolute;
  bottom: 0.75rem;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  z-index: 3;
  padding: 0;
}

.hero-indicators .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: #D6D5D5;
  transition: background 0.2s;
}

.hero-indicators .dot:hover {
  background: #b0afaf;
}

.hero-indicators .dot.active {
  background: #EA0029;
}

/* ============================================
   Sections
   ============================================ */
/* Spacing between consecutive sections (e.g. TOP HIGHLIGHTS, Trending, TOP VIDEOS) */
section + section {
  margin-top: var(--section-gap);
}

.section {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1.5rem var(--section-gap);
}

/* Index: Trending Soccer Videos – 5 cards, one line only */
.video-trending-section.trending-five-inline .video-trending-grid {
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1400px) {
  .video-trending-section.trending-five-inline .video-trending-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (max-width: 1100px) {
  .video-trending-section.trending-five-inline .video-trending-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (max-width: 700px) {
  .video-trending-section.trending-five-inline .video-trending-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (max-width: 480px) {
  .video-trending-section.trending-five-inline .video-trending-inner {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
  }
  .video-trending-section.trending-five-inline .video-trending-grid {
    grid-template-columns: repeat(5, 1fr);
    min-width: 900px;
  }
}

/* Featured section – same layout as TOP VIDEOS, with full-width background wrap */
.featured-section-wrap {
  width: 100%;
  max-width: 1920px;
  margin: 1.5rem auto;
  padding: 1.5rem 0;
  background: #282828;
}

html.theme-light .featured-section-wrap,
html[data-theme="light"] .featured-section-wrap {
  background: #EEEEEE;
}

/* Spacing above media sections so the first one is never stuck to the header */
.media-sections {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(0.5rem, 1vw + 0.5rem, 1rem);
}

.section-title {
  margin: 0;
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(20px, 1.1vw + 16.5px, 32.22px);
  line-height: 100%;
  letter-spacing: 0;
  leading-trim: none;
  color: var(--section-title);
  text-transform: uppercase;
}

.section-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: clamp(14px, 1.5vw + 14px, 18px);
  line-height: 100%;
  letter-spacing: 0;
  vertical-align: middle;
  color: #EA0029;
}

.section-link:hover {
  color: #c40024;
}

.section-link:hover .arrow {
  color: #c40024;
}

.section-link .arrow {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: #EA0029;
}

.section-link .arrow svg,
.section-link .arrow img {
  width: 1em;
  height: 1em;
}

/* TOP NEWS – one feature card: 16:9 image, overlay bottom left */
.top-news-feature {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7.2;
  border-radius: var(--card-radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.top-news-feature-media {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.top-news-feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.top-news-feature-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.5rem 1.5rem 1.75rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, transparent 100%);
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.top-news-feature-label {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0;
  color: #FAFAFA;
}

.top-news-feature-title {
  margin: 0;
  text-transform: none;
}

.top-news-feature-title.hero-title {
  color: #fff;
}

.top-news-feature-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 81px;
  height: 36px;
  padding: 7.88px 12.08px 4.2px 12.08px;
  border-radius: 4.03px;
  background: #EA0029;
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: 20.14px;
  line-height: 100%;
  letter-spacing: 0;
  color: #fff;
  border: none;
  text-decoration: none;
}

html.theme-light .top-news-feature-label,
html[data-theme="light"] .top-news-feature-label {
  color: #FAFAFA;
}

html.theme-light .top-news-feature-title.hero-title,
html[data-theme="light"] .top-news-feature-title.hero-title {
  color: #fff;
}

@media (max-width: 768px) {
  .top-news-feature {
    aspect-ratio: 16 / 9;
  }
  .top-news-feature-title.hero-title {
    font-size: 18px;
  }
  .top-news-feature-btn {
    font-size: 10.64px;
  }
}

.studios-section .section-title,
.om-studios-section .section-title {
  color: transparent;
}

.studios-logo-wrap {
  display: flex;
  align-items: center;
}

.studios-logo-wrap a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.studios-title-logo {
  height: 28px;
  width: auto;
  max-width: 300px;
  object-fit: contain;
}

.studios-logo-wrap .studios-title-logo-dark {
  display: block;
}

.studios-logo-wrap .studios-title-logo-light {
  display: none;
}

html.theme-light .studios-logo-wrap .studios-title-logo-dark,
html[data-theme="light"] .studios-logo-wrap .studios-title-logo-dark {
  display: none;
}

html.theme-light .studios-logo-wrap .studios-title-logo-light,
html[data-theme="light"] .studios-logo-wrap .studios-title-logo-light {
  display: block;
}

.studios-text {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(20px, 1.1vw + 16.5px, 32.22px);
  line-height: 100%;
  letter-spacing: 0;
  vertical-align: middle;
  leading-trim: none;
  text-transform: none;
}

.studios-text-red {
  color: #EA0029;
}

.studios-text-studios {
  color: #ffffff;
}

html.theme-light .studios-text-studios,
html[data-theme="light"] .studios-text-studios {
  color: #1a1a1a;
}
.studios-logo-img {
  display: block;
  height: 12px;
  width: auto;
  object-fit: contain;
  vertical-align: middle;
}

.section-header .studios-logo-img {
  height: 13px;
}

.sidebar-studios-title .studios-logo-img.studios-logo-sidebar {
  height: 11px;
  max-width: 100%;
}

/* ============================================
   OM STUDIOS
   ============================================ */
.om-studios-section {
  padding-top: 1rem;
}

@media (max-width: 768px) {
  .om-studios-grid .om-studio-card {
    border-radius: 0;
  }
  .section-link {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .section-link {
    font-size: 14px;
  }
}

.om-studios-section .section-link {
  display: none;
}

.om-studios-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(0.5rem, 1.5vw, 1rem);
  width: 100%;
}

.om-studios-grid--3 .om-studio-card {
  flex: 1 1 0;
}

.om-studio-card {
  flex: 1 1 0;
  min-width: 0;
  min-height: 50px;
  height: clamp(50px, 14.7vw, 141px);
  border-radius: 10.07px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 2.5vw, 32.22px);
  transition: background 0.2s ease, box-shadow 0.2s ease;
  background: #282828;
}

.om-studio-card:hover {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

html.theme-light .om-studio-card:hover,
html[data-theme="light"] .om-studio-card:hover {
  background: #1e1e1e;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.15);
}

.om-studio-card .studio-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.om-studio-goats,
.om-studio-maximo,
.om-studio-dods {
  background: #282828;
}

.om-studio-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  letter-spacing: 0.03em;
  line-height: 1.2;
}

/* ============================================
   Highlights
   ============================================ */
.highlights-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

.highlight-card .card-media.highlight-media {
  aspect-ratio: 16 / 9;
  background: var(--bg-card);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  position: relative;
}

.highlight-media .badge-red,
.highlight-media .badge-blue,
.highlight-media .badge-blue-sub {
  position: relative;
}

.badge-red {
  background: var(--accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.3rem 0.6rem;
}

.badge-blue {
  background: #1e40af;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.3rem 0.6rem;
}

.badge-blue-sub {
  background: #1e3a8a;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.5rem;
}

.highlight-card .card-title {
  font-size: 1rem;
  line-height: 1.35;
}

/* ============================================
   Top highlights – highlight-video-card (2 cards)
   Always image left, text right. Image height + padding = body height + padding (equal columns).
   16:9 contain, no black; adapts at every width.
   ============================================ */
.top-highlights-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.25rem);
}

.highlight-video-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  height: auto;
  min-height: 0;
  max-width: 676px;
  padding: clamp(10px, 1.2vw, 16.93px);
  border-radius: 10px;
  background: var(--bg-card);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: background 0.2s ease;
}

.highlight-video-card:hover {
  background: var(--bg-card-hover);
}

/* Left: image – 50% width, fills cell height; 16:9 contain inside, no black */
.highlight-video-card-media {
  position: relative;
  height: 100%;
  width: 100%;
  border-radius: clamp(6px, 0.8vw, 8.47px);
  overflow: hidden;
  display: block;
  background: var(--bg-card);
  min-height: 0;
}

.highlight-video-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  border-radius: inherit;
}

/* Play icon overlay – same as video cards (highlight + top videos); scales down on mobile */
.card-play-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(36px, 12vw, 60px);
  height: clamp(36px, 12vw, 60px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.73);
  backdrop-filter: blur(8.05px);
  -webkit-backdrop-filter: blur(8.05px);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.card-play-overlay img {
  width: clamp(14px, 4vw, 25px);
  height: clamp(14px, 4vw, 25px);
  display: block;
}

/* Right: body – same height as image column (grid row); gets remaining width */
.highlight-video-card-body {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0.35rem, 1vw, 0.5rem);
  padding-left: clamp(0.6rem, 1.2vw, 1.25rem);
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.highlight-video-card-badge {
  display: inline-block;
  align-self: flex-start;
  padding: clamp(3px, 0.4vw, 4.23px) clamp(8px, 1.2vw, 12.7px);
  border-radius: 2.12px;
  background: #EA0029;
  backdrop-filter: blur(8.47px);
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: clamp(12px, 0.9vw + 8px, 14px);
  line-height: 1;
  letter-spacing: 0;
  color: #fff;
  text-transform: uppercase;
}

.highlight-video-card-title {
  margin: 0;
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(15px, 1.6vw + 8px, 22px);
  line-height: 1.15;
  letter-spacing: 0;
  color: #ffffff;
}

.highlight-video-card-desc {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(13px, 0.9vw + 10px, 16px);
  line-height: 1.2;
  letter-spacing: 0;
  color: #848181;
}

/* Light mode */
html.theme-light .highlight-video-card-title,
html[data-theme="light"] .highlight-video-card-title {
  color: var(--text-primary);
}

html.theme-light .highlight-video-card-desc,
html[data-theme="light"] .highlight-video-card-desc {
  color: var(--text-muted);
}


/* At 900px: carousel – first card full width, second peeking; swipe or dots */
@media (max-width: 900px) {
  .top-highlights-carousel-wrap {
    position: relative;
    margin: 0 -1.5rem;
    padding: 0 1.5rem;
  }
  .top-highlights-grid {
    display: flex;
    grid-template-columns: none;
    gap: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 0 0.25rem;
  }
  .top-highlights-grid::-webkit-scrollbar {
    display: none;
  }
  .top-highlights-grid .highlight-video-card {
    flex: 0 0 88%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-width: 0;
    max-width: none;
    height: auto;
  }
  .top-highlights-indicators {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 0 0;
  }
  .top-highlights-indicators .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
    background: #D6D5D5;
    transition: background 0.2s;
  }
  .top-highlights-indicators .dot:hover {
    background: #b0afaf;
  }
  .top-highlights-indicators .dot.active {
    background: #EA0029;
  }
}

@media (min-width: 901px) {
  .top-highlights-indicators {
    display: none;
  }
}

@media (max-width: 768px) {
  .top-highlights-grid {
    grid-template-columns: none;
  }
  .top-highlights-grid .highlight-video-card {
    flex: 0 0 88%;
    height: auto;
  }
}

/* Top highlights: hide badge and "Watch the highlights" from mobile up */
@media (max-width: 768px) {
  .highlight-video-card-badge,
  .highlight-video-card-desc {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .top-highlights-grid .highlight-video-card {
    flex: 0 0 85%;
    height: auto;
  }
  .highlight-video-card-body {
    padding-left: clamp(0.5rem, 3vw, 1rem);
  }
}

/* ============================================
   Top videos – 4 cards, 16:9, 2 cols → 1 col
   ============================================ */
.top-videos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.25rem);
}

.top-video-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: transparent;
  border-radius: var(--card-radius);
  overflow: hidden;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

.top-video-card:hover {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.top-video-card-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
}

.top-video-card-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.top-video-card-body {
  padding: clamp(0.5rem, 0.9vw, 0.75rem) clamp(0.6rem, 1vw, 1rem);
  display: flex;
  flex-direction: column;
  gap: clamp(0.2rem, 0.4vw, 0.35rem);
  background: transparent;
}

.top-video-card-category {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(18px, 1.5vw + 14px, 24.16px);
  line-height: 100%;
  letter-spacing: 0;
  vertical-align: middle;
  color: #ffffff;
}

.top-video-card-title {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(13px, 0.9vw + 10px, 16.11px);
  line-height: 1.2;
  letter-spacing: 0;
  vertical-align: middle;
  color: var(--text-primary);
}

.top-video-card-meta {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(13px, 0.7vw + 10px, 16.11px);
  line-height: 100%;
  letter-spacing: 0;
  vertical-align: middle;
  color: #848181;
}

/* Light mode – Top videos */
html.theme-light .top-video-card-category,
html[data-theme="light"] .top-video-card-category {
  color: var(--text-primary);
}

html.theme-light .top-video-card-title,
html[data-theme="light"] .top-video-card-title {
  color: var(--text-primary);
}

html.theme-light .top-video-card-meta,
html[data-theme="light"] .top-video-card-meta {
  color: var(--text-muted);
}

html.theme-light .top-video-card:hover,
html[data-theme="light"] .top-video-card:hover {
  background: rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

@media (max-width: 768px) {
  .top-videos-grid {
    grid-template-columns: 1fr;
  }
}

/* SOCCER LATEST NEWS – same card as TOP VIDEOS, no play button */
.soccer-news-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.25rem);
}

.soccer-news-grid .card-play-overlay {
  display: none;
}

@media (max-width: 768px) {
  .soccer-news-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   Studios grid
   ============================================ */
.studios-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.studio-card {
  aspect-ratio: 1;
  border: none;
  border-radius: var(--card-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.2s ease, box-shadow 0.2s ease;
}

.studio-card:hover {
  filter: brightness(1.1);
}

html.theme-light .studio-card:hover,
html[data-theme="light"] .studio-card:hover {
  filter: brightness(1.12);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.12);
}

.studio-card .studio-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.studio-card.studio-goats,
.studio-card.studio-footballers,
.studio-card.studio-maximo,
.studio-card.studio-dods {
  background: #282828;
  padding: 1rem;
}

.studio-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.05em;
  text-align: center;
  padding: 0 0.5rem;
}

/* ============================================
   Cards
   ============================================ */
.cards-grid {
  display: grid;
  gap: 1.25rem;
}

.cards-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.cards-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.card {
  background: var(--bg-card);
  border-radius: var(--card-radius);
  overflow: hidden;
  transition: background 0.2s;
  border: 1px solid transparent;
}

.card:hover {
  background: var(--bg-card-hover);
}

.card-media {
  aspect-ratio: 16 / 10;
  background: var(--border);
  position: relative;
}

.card-media.news-media {
  background: var(--bg-card-hover);
}

.card-media.ucl-media {
  background: #1a2a3a;
}

.card-media.large {
  aspect-ratio: 16 / 9;
}

.badge-play {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: var(--accent);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}

.card-score {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  font-size: 0.9rem;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

.card-body {
  padding: 1rem;
}

.card-title {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
}

.card-desc {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.card-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ============================================
   Top Views scroll
   ============================================ */
.top-views-scroll {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.view-card {
  flex: 0 0 300px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}

.view-card-media {
  aspect-ratio: 16 / 10;
  background: var(--border);
}

.view-card-title {
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--text-primary);
}

.btn-read {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  margin-top: auto;
}

.btn-read:hover {
  color: var(--accent-hover);
}

/* ============================================
   Load More (same as livestream.html)
   ============================================ */
.load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

.btn-load-more {
  width: 158.66px;
  height: 54.22px;
  padding: 0;
  border: none;
  border-radius: 4.03px;
  background-color: #EA0029;
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0;
  color: #FFFFFF;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.btn-load-more:hover {
  background-color: #c40024;
  transform: scale(1.05);
}

.btn-load-more:active {
  transform: scale(1.02);
}

@media (max-width: 600px) {
  .load-more-wrap {
    margin-top: 2rem;
  }
  .btn-load-more {
    width: auto;
    min-width: 140px;
    padding: 14px 40px;
    font-size: 18px;
  }
}

/* ============================================
   Light mode overrides (header & scores stay dark)
   ============================================ */
/* Light mode: page content uses variables (--text-primary, --section-title, etc.) from html.theme-light */
html[data-theme="light"] body,
html.theme-light body {
  background-color: var(--bg-dark) !important;
  background-image: none;
  color: var(--text-primary);
}

html.theme-light .page-wrap,
html[data-theme="light"] .page-wrap {
  background: var(--bg-dark) !important;
}

html.theme-light main,
html[data-theme="light"] main {
  background: transparent !important;
}

html.theme-light .section,
html[data-theme="light"] .section {
  background: transparent;
}

html.theme-light .studios-section .section-title,
html[data-theme="light"] .studios-section .section-title,
html.theme-light .om-studios-section .section-title,
html[data-theme="light"] .om-studios-section .section-title {
  color: transparent;
}

html.theme-light .card,
html[data-theme="light"] .card {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}

html.theme-light .card:hover,
html[data-theme="light"] .card:hover {
  background: var(--bg-card-hover) !important;
}

html.theme-light .btn-read,
html[data-theme="light"] .btn-read {
  color: var(--accent) !important;
}

html.theme-light .btn-read:hover,
html[data-theme="light"] .btn-read:hover {
  color: var(--accent-hover) !important;
}

html.theme-light .om-studio-label,
html.theme-light .studio-label,
html[data-theme="light"] .om-studio-label,
html[data-theme="light"] .studio-label {
  color: #ffffff !important;
}

html.theme-light .card-media,
html.theme-light .view-card-media,
html[data-theme="light"] .card-media,
html[data-theme="light"] .view-card-media {
  background: var(--border);
}

html.theme-light .hero-placeholder,
html[data-theme="light"] .hero-placeholder {
  background: var(--border);
}

/* Hero indicators sit on banner overlay – keep light dots for contrast */
html.theme-light .hero-indicators .dot,
html[data-theme="light"] .hero-indicators .dot {
  background: #D6D5D5;
  border: none;
}

html.theme-light .hero-indicators .dot:hover,
html[data-theme="light"] .hero-indicators .dot:hover {
  background: #b0afaf;
}

html.theme-light .hero-indicators .dot.active,
html[data-theme="light"] .hero-indicators .dot.active {
  background: #EA0029;
}

html.theme-light .top-highlights-indicators .dot,
html[data-theme="light"] .top-highlights-indicators .dot {
  background: #D6D5D5;
  border: none;
}

html.theme-light .top-highlights-indicators .dot:hover,
html[data-theme="light"] .top-highlights-indicators .dot:hover {
  background: #b0afaf;
}

html.theme-light .top-highlights-indicators .dot.active,
html[data-theme="light"] .top-highlights-indicators .dot.active {
  background: #EA0029;
}

html.theme-light .btn-load-more,
html[data-theme="light"] .btn-load-more {
  background-color: #191919;
}

html.theme-light .btn-load-more:hover,
html[data-theme="light"] .btn-load-more:hover {
  background-color: #2a2a2a;
  transform: scale(1.05);
}

/* Light mode: scores bar uses variables */
html.theme-light .scores-bar,
html[data-theme="light"] .scores-bar {
  background: var(--bg-scores) !important;
  border-bottom-color: var(--bg-card);
  border-top-color: var(--border);
}

html.theme-light .scores-bar .score-item,
html[data-theme="light"] .scores-bar .score-item {
  color: var(--text-primary) !important;
}

html.theme-light .scores-bar .score-item:hover,
html[data-theme="light"] .scores-bar .score-item:hover {
  color: var(--text-secondary) !important;
}

html.theme-light .scores-bar .score-date,
html[data-theme="light"] .scores-bar .score-date {
  color: var(--text-muted) !important;
}

html.theme-light .scores-bar .scores-full,
html[data-theme="light"] .scores-bar .scores-full {
  background: var(--accent);
  color: #ffffff !important;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  font-weight: 600;
}

html.theme-light .scores-bar .scores-full:hover,
html[data-theme="light"] .scores-bar .scores-full:hover {
  background: var(--accent-hover);
  color: #ffffff !important;
}

/* Background image on sides for light mode (large screens only) */
@media (min-width: 1921px) {
  html[data-theme="light"] body,
  html.theme-light body {
    background-image: url('/new/images/background-wide.png');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
}

/* ============================================
   Responsive (page/sections only; header/sidebar/footer in component CSS)
   ============================================ */
@media (max-width: 1024px) {
  .cards-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .studios-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .om-studios-grid--3 .om-studio-card {
    min-width: 0;
  }
  .view-card {
    flex: 0 0 280px;
  }
}

@media (max-width: 768px) {
  :root {
    --header-h: 52px;
    --scores-h: 40px;
  }
  .scores-bar {
    padding: 0 0.75rem;
    min-height: var(--scores-h);
  }
  .scores-scroll {
    gap: 1rem;
  }
  .score-item {
    font-size: 0.75rem;
  }
  .scores-full {
    font-size: 0.75rem;
  }
  .hero {
    padding: 1rem 0.75rem 1rem;
  }
  .hero-placeholder {
    min-height: 220px;
  }
  .hero-overlay {
    padding: 1rem 1rem 2.25rem;
  }
  .hero-title {
    font-size: 22px;
  }
  .hero-meta {
    font-size: 14px;
  }
  .studios-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  .highlights-grid {
    grid-template-columns: 1fr;
  }
  .cards-grid-4,
  .cards-grid-2 {
    grid-template-columns: 1fr;
  }
  .view-card {
    flex: 0 0 260px;
  }
}

@media (max-width: 480px) {
  .hero-placeholder {
    min-height: 180px;
  }
  .om-studio-label,
  .studio-label {
    font-size: 0.75rem;
  }
}