/* ─────────────────────────────────────────────────────────────
   LAYOUT & GRID SYSTEM (12-Column, 1180px Max Width)
   ───────────────────────────────────────────────────────────── */

main, .page-main, .site-main { min-height: 60vh; background: var(--c-page-bg); margin-top: 0 !important; padding-top: 0 !important; }
.page-hero { color: #FFFFFF; background: linear-gradient(180deg, #080E18 0%, #0F1D32 100%); padding: 72px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.page-hero h1, .page-hero h2, .page-hero h3 { color: #FFFFFF; }
.page-hero p { color: var(--c-text-muted); font-size: 1.125rem; }
.page-hero a { color: var(--c-gold); }

.section-title { color: #FFFFFF; font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; }
.section--navy, .section--dark { background-color: #0B1422; color: #FFFFFF; }
.section--navy .section-title, .section--dark .section-title { color: #FFFFFF; }

.nav-link { color: #CBD5E1; font-weight: 700; }
.nav-link:hover, .nav-link.active { color: #FFFFFF; }

input, select, textarea { color: #FFFFFF; background: #0F1B2C; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; }
::placeholder { color: #64748B; opacity: 1; }

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.section {
  padding-top: var(--section-pad-desktop);
  padding-bottom: var(--section-pad-desktop);
  position: relative;
}

.section--sm {
  padding-top: 48px;
  padding-bottom: 48px;
}

.section-header {
  margin-bottom: 40px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 20px;
}

.section-header--center {
  text-align: center;
  justify-content: center;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.section-eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-gold);
  margin-bottom: 8px;
}

.section-title {
  font-size: 2.25rem;
  font-weight: 900;
  line-height: 1.15;
}

.section-desc {
  font-size: 1.0625rem;
  color: var(--c-text-muted);
  margin-top: 10px;
}

/* 12-Column Responsive CSS Grid */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 28px;
}

.col-12 { grid-column: span 12; }
.col-8  { grid-column: span 8; }
.col-6  { grid-column: span 6; }
.col-4  { grid-column: span 4; }
.col-3  { grid-column: span 3; }
.col-2  { grid-column: span 2; }

.section--white {
  background: 
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(2, 132, 199, 0.04) 0%, transparent 70%),
    linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 50%, #F1F5F9 100%) !important;
  color: #0F172A !important;
}

.section--white .section-title {
  color: #09152B !important;
}

.section--white .section-eyebrow {
  color: #0284C7 !important;
}

.section--white .section-desc {
  color: #475569 !important;
}

.section--white .text-link {
  color: #080E18 !important;
  border-bottom: 2px solid #080E18 !important;
}
.section--white .text-link:hover {
  color: #FFFFFF !important;
  border-color: #FFFFFF !important;
}

/* ─────────────────────────────────────────────────────────────
   ANNOUNCEMENT BAR (Disabled - Clean Floating Navbar)
   ───────────────────────────────────────────────────────────── */
.announcement-bar {
  display: none !important;
}

.announcement-bar__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.announcement-tag {
  background-color: #080E18;
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.announcement-text {
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
  color: #080E18;
}

.announcement-link {
  color: #080E18;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.announcement-link:hover {
  color: #000000;
  text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────
   TOP ACCENT STRIPE & STICKY SLANTED DARK BLUE NAVBAR
   ───────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────
   PROFESSIONAL SPORTS FRANCHISE SLANTED NAVBAR (SRH / IPL STYLE)
   Clean angled geometry, breakout crest, modern sports typography,
   zero yellow effects, and separate angled fan portal pill.
   ───────────────────────────────────────────────────────────── */
.site-header__top-bar {
  display: none !important;
}

.site-header {
  position: sticky !important;
  top: 0 !important;
  left: 0;
  right: 0;
  z-index: 100000 !important;
  padding: 10px 0 !important;
  background: rgba(2, 6, 18, 0.95) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  margin: 0 !important;
}

body.editorial-home .site-header {
  position: absolute;
  background: transparent !important;
  border-bottom: none;
  padding: 18px 0 16px;
  margin-bottom: 0 !important;
}

@media (max-width: 768px) {
  body.editorial-home .site-header {
    position: sticky !important;
    top: 0 !important;
    background: rgba(2, 6, 18, 0.95) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 10px 0 !important;
  }
}

/* Ensure zero space between site-header and adjacent hero content across all pages */
.site-header + main,
.site-header + .section,
.site-header + .section--navy,
main > section:first-child,
main > .section--navy:first-child,
main > .sponsors-hero:first-child,
main > .matches-hero-banner:first-child,
main > .squad-stadium-hero:first-child,
main > .kids-hero-section:first-child,
main > .youth-hero-section:first-child,
main > .csk-player-hero:first-child {
  margin-top: 0 !important;
}

.site-header__container {
  pointer-events: auto;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Full Sports Franchise Navbar Container */
.franchise-navbar-wrap,
.cricket-bat-navbar {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  position: relative;
  filter: drop-shadow(0 14px 32px rgba(0, 0, 0, 0.65));
}

/* 1. Main Angled Navigation Bar */
.franchise-nav-bar,
.bat-blade,
.site-header__bar {
  flex: 1;
  height: 56px;
  background: linear-gradient(135deg, #104294 0%, #0A2964 50%, #05193E 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  transform: skewX(-14deg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px 0 16px;
  position: relative;
  box-shadow: 
    0 12px 28px rgba(0, 0, 0, 0.6),
    inset 0 1.5px 1.5px rgba(255, 255, 255, 0.45),
    inset 0 -2px 4px rgba(0, 0, 0, 0.5);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.franchise-nav-bar:hover,
.bat-blade:hover,
.site-header__bar:hover {
  box-shadow: 
    0 16px 36px rgba(0, 0, 0, 0.75),
    0 0 24px rgba(56, 189, 248, 0.2),
    inset 0 2px 2px rgba(255, 255, 255, 0.55);
}

/* Unskew content inside slanted bar */
.franchise-logo-link,
.bat-logo-link,
.navbar-logo-breakout,
.navbar-nav,
.mobile-toggle {
  transform: skewX(14deg);
}

/* Breakout Franchise Crest Badge on Left */
.franchise-logo-link,
.bat-logo-link,
.navbar-logo-breakout {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
  position: relative;
  z-index: 5;
  text-decoration: none;
  flex-shrink: 0;
  transition: transform 0.25s ease;
  background: transparent;
  border: none;
  box-shadow: none;
}

.franchise-logo-link:hover,
.bat-logo-link:hover,
.navbar-logo-breakout:hover {
  transform: skewX(14deg) scale(1.08);
}

.franchise-logo-img,
.bat-logo-img,
.navbar-logo-img {
  height: 64px;
  width: 64px;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 12px rgba(56, 189, 248, 0.45));
  margin-top: 2px;
}

/* Navigation Links Container */
.navbar-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-divider {
  display: none !important;
}

.nav-menu li {
  position: relative;
}

.nav-link {
  font-family: var(--font-nav), 'Outfit', 'Plus Jakarta Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: capitalize;
  color: #FFFFFF;
  text-decoration: none;
  padding: 7px 16px;
  display: inline-block;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.nav-link:hover {
  color: #38BDF8;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(56, 189, 248, 0.35);
  text-shadow: 0 0 12px rgba(56, 189, 248, 0.8);
  transform: translateY(-1px);
}

.nav-link.active {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

.nav-link.active::after {
  display: none;
}

/* Hide old cricket bat elements */
.bat-blade::before,
.bat-shoulder-splice,
.bat-handle {
  display: none !important;
}

/* 2. Separate Angled Fan Portal Button (Far Right) */
.franchise-user-btn,
.bat-pommel-btn,
.site-header__user-pill {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #104294 0%, #0A2964 50%, #05193E 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  transform: skewX(-14deg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  text-decoration: none;
  flex-shrink: 0;
  box-shadow: 
    0 12px 28px rgba(0, 0, 0, 0.6),
    inset 0 1.5px 1.5px rgba(255, 255, 255, 0.45);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: visible;
}

.franchise-user-btn:hover,
.bat-pommel-btn:hover,
.site-header__user-pill:hover {
  background: linear-gradient(135deg, #1A54BA 0%, #0E3682 100%);
  border-color: #38BDF8;
  color: #38BDF8;
  box-shadow: 
    0 16px 36px rgba(0, 0, 0, 0.75),
    0 0 20px rgba(56, 189, 248, 0.5),
    inset 0 2px 2px rgba(255, 255, 255, 0.6);
  transform: skewX(-14deg) translateY(-2px);
}

.franchise-user-btn .user-pill__icon,
.bat-pommel-btn .user-pill__icon,
.site-header__user-pill .user-pill__icon {
  transform: skewX(14deg);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
  position: relative;
  z-index: 2;
  transition: transform 0.25s ease;
}

.franchise-user-btn:hover .user-pill__icon,
.bat-pommel-btn:hover .user-pill__icon,
.site-header__user-pill:hover .user-pill__icon {
  transform: skewX(14deg) scale(1.12);
}

/* Mobile Responsive */
.mobile-toggle {
  display: none;
}

@media (max-width: 992px) {
  .franchise-navbar-wrap,
  .cricket-bat-navbar {
    filter: none !important;
  }
  .franchise-nav-bar,
  .bat-blade,
  .site-header__bar {
    height: 52px;
    padding: 0 14px;
    transform: none !important;
  }
  .franchise-logo-link,
  .bat-logo-link,
  .navbar-logo-breakout,
  .navbar-nav,
  .mobile-toggle {
    transform: none !important;
  }
  .franchise-logo-img,
  .bat-logo-img,
  .navbar-logo-img {
    height: 48px;
    width: 48px;
  }
  .franchise-user-btn,
  .bat-pommel-btn,
  .site-header__user-pill {
    height: 50px;
    width: 48px;
    transform: none;
  }
  .franchise-user-btn .user-pill__icon,
  .bat-pommel-btn .user-pill__icon,
  .site-header__user-pill .user-pill__icon {
    transform: none;
  }
  .franchise-user-btn:hover,
  .bat-pommel-btn:hover,
  .site-header__user-pill:hover {
    transform: translateY(-2px);
  }
  
  .mobile-toggle {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    padding: 8px 12px !important;
    z-index: 100010 !important;
    position: relative !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: background 0.2s ease, border-color 0.2s ease !important;
  }
  .mobile-toggle:hover,
  .mobile-toggle:focus-visible {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: #38BDF8 !important;
    outline: none !important;
  }
  .mobile-toggle span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    background: #FFFFFF !important;
    border-radius: 2px !important;
    transition: transform 0.25s ease, opacity 0.25s ease !important;
    pointer-events: none !important;
  }
  .mobile-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }
  .mobile-toggle.active span:nth-child(2) {
    opacity: 0 !important;
  }
  .mobile-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }

  .navbar-nav {
    display: none !important;
  }

  .nav-menu {
    display: none;
    position: fixed !important;
    top: 68px !important;
    left: 12px !important;
    right: 12px !important;
    background: linear-gradient(180deg, #091734 0%, #040A18 100%) !important;
    border: 1.5px solid rgba(56, 189, 248, 0.5) !important;
    border-radius: 14px !important;
    padding: 18px 14px !important;
    flex-direction: column !important;
    gap: 8px !important;
    z-index: 100005 !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(56, 189, 248, 0.2) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    transform: none !important;
    max-height: calc(100vh - 86px) !important;
    overflow-y: auto !important;
  }
  .nav-menu.is-open {
    display: flex !important;
    animation: menuFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  }
  .nav-menu li {
    width: 100%;
  }
  .nav-link {
    width: 100%;
    padding: 12px 18px;
    text-align: left;
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: 8px;
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
  }
  .nav-link:hover,
  .nav-link.active {
    background: rgba(56, 189, 248, 0.16);
    border-color: rgba(56, 189, 248, 0.5);
    color: #38BDF8;
  }
}

@keyframes menuFadeIn {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

.site-footer,
.editorial-footer {
  background: 
    radial-gradient(ellipse 90% 70% at 50% -10%, rgba(14, 60, 130, 0.45) 0%, transparent 70%),
    radial-gradient(ellipse 70% 50% at 85% 100%, rgba(245, 158, 11, 0.08) 0%, transparent 60%),
    radial-gradient(circle at 1.5px 1.5px, rgba(56, 189, 248, 0.12) 1.2px, transparent 0),
    linear-gradient(180deg, #071530 0%, #040D1E 48%, #020610 100%) !important;
  background-size: 100% 100%, 100% 100%, 20px 20px, 100% 100% !important;
  border-top: 1px solid rgba(56, 189, 248, 0.35) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 -12px 36px rgba(3, 10, 24, 0.7) !important;
  padding: 56px 0 28px !important;
  color: #CBD5E1 !important;
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
}

.site-footer::before,
.editorial-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(245, 158, 11, 0.6) 20%, #38BDF8 50%, rgba(245, 158, 11, 0.6) 80%, transparent 100%) !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.6) !important;
  pointer-events: none;
}

.site-footer .container {
  max-width: 1240px !important;
  width: 92% !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
}

/* Horizontal Top Header Bar in Footer */
.footer-horizontal-hero {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
  padding-bottom: 24px !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.footer-hero-brand {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
}

.footer-hero-brand img {
  width: 52px !important;
  height: 52px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 4px 14px rgba(245, 158, 11, 0.35)) !important;
}

.footer-hero-titles h3 {
  font-family: var(--font-display, 'Rajdhani', sans-serif) !important;
  font-size: 1.4rem !important;
  font-weight: 900 !important;
  color: #FFFFFF !important;
  letter-spacing: 0.08em !important;
  line-height: 1.1 !important;
  margin: 0 0 4px 0 !important;
  text-transform: uppercase !important;
}

.footer-hero-titles span {
  font-family: var(--font-display, 'Rajdhani', sans-serif) !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  color: #FCD34D !important;
  text-transform: uppercase !important;
}

.footer-hero-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.footer-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 18px !important;
  border-radius: 999px !important;
  font-family: var(--font-display, 'Rajdhani', sans-serif) !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  transition: all 0.25s ease !important;
}

.footer-action-btn--primary {
  background: linear-gradient(135deg, #FCD34D 0%, #F59E0B 100%) !important;
  color: #09152B !important;
  border: 1px solid rgba(253, 224, 71, 0.6) !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.25) !important;
}

.footer-action-btn--primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4) !important;
}

.footer-action-btn--secondary {
  background: rgba(14, 28, 58, 0.7) !important;
  color: #E2E8F0 !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  backdrop-filter: blur(8px) !important;
}

.footer-action-btn--secondary:hover {
  background: rgba(2, 132, 199, 0.2) !important;
  color: #38BDF8 !important;
  border-color: #38BDF8 !important;
  transform: translateY(-2px) !important;
}

/* 4-Column Horizontal Grid */
.footer-top,
.footer-grid-horizontal {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 36px 24px !important;
  padding-bottom: 40px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.footer-col {
  display: flex !important;
  flex-direction: column !important;
}

.footer-heading {
  font-family: var(--font-display, 'Rajdhani', sans-serif) !important;
  font-size: 0.92rem !important;
  font-weight: 900 !important;
  color: #FFFFFF !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  margin: 0 0 16px 0 !important;
  padding-bottom: 8px !important;
  border-bottom: 1.5px solid rgba(56, 189, 248, 0.3) !important;
  display: inline-block !important;
  width: 100% !important;
}

.footer-links,
ul.footer-links {
  list-style: none !important;
  list-style-type: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.footer-links li {
  list-style: none !important;
  list-style-type: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}

.footer-links li::before,
.footer-links li::marker {
  display: none !important;
  content: "" !important;
}

.footer-links a {
  color: #94A3B8 !important;
  text-decoration: none !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
  line-height: 1.4 !important;
}

.footer-links a:hover {
  color: #FCD34D !important;
  transform: translateX(4px) !important;
}

/* Horizontal Bottom Bar */
.footer-bottom {
  padding-top: 24px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  font-size: 0.82rem !important;
  color: #64748B !important;
  width: 100% !important;
}

.footer-bottom a {
  color: #94A3B8 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.footer-bottom a:hover {
  color: #FCD34D !important;
}

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE BREAKPOINTS (640 / 900 / 1180)
   ───────────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
  .section {
    padding-top: 72px;
    padding-bottom: 72px;
  }
}

@media (max-width: 900px) {
  .col-8 {
    grid-column: span 12 !important;
  }
  .col-6, .col-4, .col-3 {
    grid-column: span 6;
  }
  .footer-top,
  .footer-grid-horizontal {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px 20px !important;
  }
}

@media (max-width: 768px) {
  .col-6, .col-4, .col-3, .col-2 {
    grid-column: span 12 !important;
  }
}

@media (max-width: 640px) {
  .section {
    padding-top: var(--section-pad-mobile);
    padding-bottom: var(--section-pad-mobile);
  }
  .section-title {
    font-size: 1.75rem;
  }
  .grid {
    gap: 20px;
  }
  .col-8, .col-6, .col-4, .col-3, .col-2 {
    grid-column: span 12;
  }
  .footer-top,
  .footer-grid-horizontal {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .footer-horizontal-hero {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  .footer-hero-actions {
    width: 100% !important;
    justify-content: flex-start !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 12px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   CSK BULLETPROOF MOBILE DRAWER NAVIGATION (IPL / FRANCHISE STYLE)
   Attached directly to body, zero-risk of stacking context trap
   ───────────────────────────────────────────────────────────── */
.csk-mobile-drawer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483640 !important;
  display: flex !important;
  justify-content: flex-end !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s;
}

.csk-mobile-drawer.is-active {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.csk-drawer-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(2, 6, 18, 0.8) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  cursor: pointer;
}

.csk-drawer-sheet {
  position: relative !important;
  width: min(340px, 86vw) !important;
  height: 100% !important;
  background: linear-gradient(180deg, #091938 0%, #051024 60%, #020712 100%) !important;
  border-left: 1.5px solid rgba(56, 189, 248, 0.45) !important;
  box-shadow: -16px 0 48px rgba(0, 0, 0, 0.85), 0 0 32px rgba(56, 189, 248, 0.2) !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 24px 20px 28px !important;
  box-sizing: border-box !important;
  transform: translateX(100%) !important;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow-y: auto !important;
  z-index: 2 !important;
}

.csk-mobile-drawer.is-active .csk-drawer-sheet {
  transform: translateX(0) !important;
}

.csk-drawer-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  margin-bottom: 20px !important;
}

.csk-drawer-brand {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.csk-drawer-logo {
  width: 44px !important;
  height: 44px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6)) !important;
}

.csk-drawer-brand-text {
  display: flex !important;
  flex-direction: column !important;
}

.csk-drawer-title {
  font-family: var(--font-display, "Chakra Petch", sans-serif) !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  color: #FFFFFF !important;
  letter-spacing: 0.04em !important;
  line-height: 1.1 !important;
}

.csk-drawer-sub {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #F59E0B !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-top: 2px !important;
}

.csk-drawer-close {
  width: 38px !important;
  height: 38px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
  font-size: 1.5rem !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.csk-drawer-close:hover,
.csk-drawer-close:focus-visible {
  background: rgba(239, 68, 68, 0.25) !important;
  border-color: #EF4444 !important;
  color: #EF4444 !important;
}

.csk-drawer-nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  flex: 1 !important;
}

.csk-drawer-link {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 13px 16px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #E2E8F0 !important;
  text-decoration: none !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  transition: all 0.2s ease !important;
}

.csk-drawer-link:hover {
  background: rgba(56, 189, 248, 0.14) !important;
  border-color: rgba(56, 189, 248, 0.45) !important;
  color: #38BDF8 !important;
  transform: translateX(4px) !important;
}

.csk-drawer-link.is-active {
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.22) 0%, rgba(245, 158, 11, 0.12) 100%) !important;
  border: 1.5px solid #38BDF8 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.25) !important;
}

.csk-drawer-icon {
  font-size: 1.25rem !important;
  line-height: 1 !important;
  width: 24px !important;
  display: flex !important;
  justify-content: center !important;
}

.csk-drawer-label {
  flex: 1 !important;
  font-family: var(--font-display, "Chakra Petch", sans-serif) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.csk-drawer-pill {
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  background: rgba(56, 189, 248, 0.15) !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  color: #38BDF8 !important;
}

.csk-drawer-link.is-active .csk-drawer-pill {
  background: rgba(245, 158, 11, 0.2) !important;
  border-color: #F59E0B !important;
  color: #FBBF24 !important;
}

.csk-drawer-footer {
  margin-top: 24px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.csk-drawer-insta-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 12px 18px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(225, 48, 108, 0.2) 0%, rgba(245, 158, 11, 0.2) 100%) !important;
  border: 1px solid rgba(225, 48, 108, 0.45) !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  transition: all 0.2s ease !important;
}

.csk-drawer-insta-btn:hover {
  background: linear-gradient(135deg, rgba(225, 48, 108, 0.35) 0%, rgba(245, 158, 11, 0.35) 100%) !important;
  border-color: #E1306C !important;
  transform: translateY(-2px) !important;
}

@media (min-width: 993px) {
  .csk-mobile-drawer {
    display: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   GLOBAL RESPONSIVE OPTIMIZATIONS ACROSS ALL BREAKPOINTS
   ───────────────────────────────────────────────────────────── */
html, body {
  max-width: 100vw !important;
  overflow-x: hidden !important;
  -webkit-text-size-adjust: 100%;
}

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

/* Ensure no media item forces horizontal overflow */
img, svg, video, canvas, audio, iframe {
  max-width: 100%;
  height: auto;
}

/* Touch-friendly Horizontal Table Scrolling */
.table-responsive,
.csk-table-wrap,
.points-table-container,
.sponsors-table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin;
}

/* Tablets & Mobile Screens (<= 768px) */
@media (max-width: 768px) {
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  h1, .hero-cinematic-headline, .squad-hero-main-title {
    font-size: clamp(1.8rem, 6.5vw, 3rem) !important;
    word-break: break-word !important;
  }

  .section-title {
    font-size: clamp(1.5rem, 5.5vw, 2.2rem) !important;
  }

  .footer-horizontal-hero {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 18px !important;
  }

  .footer-hero-brand {
    flex-direction: column !important;
    align-items: center !important;
  }

  .footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 8px !important;
  }
}

/* Mobile Screens (<= 640px) */
@media (max-width: 640px) {
  /* Squad Filter Swipe Bar */
  .squad-filter-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    padding: 6px 12px 12px !important;
    gap: 8px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .squad-filter-bar::-webkit-scrollbar {
    display: none !important;
  }
  .squad-filter-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 0.78rem !important;
    padding: 8px 16px !important;
  }

  /* Roster & Squad Cards single column */
  .roster-grid,
  .squad-stage-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .squad-player-stage-card,
  .roster-card {
    width: 100% !important;
    max-width: 100% !important;
    height: 480px !important;
  }
}

@media (max-width: 480px) {
  .squad-player-stage-card,
  .roster-card {
    height: 450px !important;
  }

  /* Sponsors Content */
  .sponsors-content-wrap {
    padding: 20px 12px 48px !important;
    gap: 24px !important;
  }

  .sponsors-deliver-grid,
  .tiers-cards-grid,
  .tier-detail-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}