/**
 * CSKvRCB Match Centre Stylesheet
 * Astra Child Theme
 * Typography: Strictly Google Sans Flex everywhere
 */

:root {
	--font-family-base: 'Google Sans Flex', 'Google Sans', sans-serif;
	--font-heading: 'Google Sans Flex', 'Google Sans', sans-serif;
	--csk-yellow: #F59E0B;
	--csk-yellow-dark: #D97706;
	--csk-yellow-light: #FEF3C7;
	--rcb-red: #DC2626;
	--rcb-red-dark: #B91C1C;
	--rcb-red-light: #FEE2E2;
	--purple-primary: #6366F1;
	--purple-dark: #4F46E5;
	--purple-light: #EEF2FF;
	--text-main: #0F172A;
	--text-secondary: #475569;
	--text-muted: #64748B;
	--text-light: #94A3B8;
	--bg-body: #F1F5F9;
	--bg-card: #FFFFFF;
	--border-color: #E2E8F0;
	--border-light: #F1F5F9;
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 12px;
	--radius-xl: 16px;
	--shadow-subtle: 0 1px 3px rgba(15, 23, 42, 0.04);
	--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
	--csk-header-height: 58px;
	--csk-subnav-height: 47px;
}

@media (max-width: 768px) {
	:root {
		--csk-header-height: 58px;
	}
}

/* Reset & Base Setup */
*, *::before, *::after {
	box-sizing: border-box;
}

html {
	box-sizing: border-box;
	font-size: 16px;
	scroll-behavior: smooth;
	overflow-x: hidden;
	overflow-x: clip;
	max-width: 100%;
}

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

/* Global Typography: Strictly enforce Google Sans font everywhere */
*, *::before, *::after,
html, body, button, input, select, textarea,
h1, h2, h3, h4, h5, h6,
p, a, span, label, div, table, td, th, li, ul, ol, strong, b, em, i {
	font-family: 'Google Sans Flex', 'Google Sans', sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
b, strong, th, dt {
	font-weight: 600;
}

body.csk-rcb-body {
	margin: 0;
	padding: 0;
	font-family: var(--font-family-base) !important;
	background-color: #F1F5F9 !important; /* Soft slate gray backdrop from user screenshot */
	color: var(--text-main);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	min-height: 100vh;
}

/* Boxed Container Layout - 1000px Content Width */
.csk-site-wrapper {
	width: 100%;
	max-width: 1000px;
	margin-inline: auto;
	background-color: #FFFFFF;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	box-shadow: 0 4px 30px rgba(15, 23, 42, 0.05);
	border-inline: 1px solid #E2E8F0;
	position: relative;
}

@media (max-width: 1000px) {
	.csk-site-wrapper {
		max-width: 100%;
		border-inline: none;
		box-shadow: none;
	}
}

.csk-container {
	inline-size: 100%;
	max-inline-size: 1000px;
	margin-inline: auto;
	padding-inline: 20px;
}

/* 1. HEADER (Same-to-same Reference UI) */
.csk-header {
	background-color: #FFFFFF;
	border-block-end: 1px solid #F1F5F9;
	position: sticky;
	inset-block-start: 0;
	z-index: 100;
	width: 100%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.csk-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 58px;
	height: 58px;
	padding-inline: 20px;
	gap: 16px;
}

.csk-logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	flex-shrink: 0;
}

.site-brand-logo {
	display: block;
	height: 42px;
	width: auto;
	max-width: 180px;
	object-fit: contain;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.csk-logo:hover .site-brand-logo {
	opacity: 0.92;
	transform: scale(1.02);
}

.crown-icon svg {
	display: block;
}

.logo-text {
	font-size: 17px;
	letter-spacing: -0.3px;
	font-family: var(--font-family-base) !important;
}

.logo-text .csk-part {
	color: #D97706;
	font-weight: 600;
}

.logo-text .vs-part {
	color: #4B5563;
	font-weight: 600;
	font-size: 14px;
	margin-inline: 1px;
}

.logo-text .rcb-part {
	color: #DC2626;
	font-weight: 600;
}

.logo-text .tld-part {
	color: #0F172A;
	font-weight: 600;
}

.csk-nav {
	display: flex;
	align-items: center;
	flex: 1;
	justify-content: flex-end;
}

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

.csk-menu .menu-item {
	position: relative;
}

.csk-menu .menu-item a {
	color: #334155;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	padding: 8px 12px;
	border-radius: 6px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	transition: color 0.15s ease, background-color 0.15s ease;
	line-height: 1.2;
}

.csk-menu .menu-item a:hover,
.csk-menu .menu-item.active > a,
.csk-menu .menu-item:hover > a {
	color: #0F172A;
	background-color: #F8FAFC;
}

.csk-menu .menu-item.active > a {
	font-weight: 600;
	color: #0F172A;
}

.dropdown-chevron {
	display: inline-block;
	color: #64748B;
	transition: transform 0.2s ease, color 0.2s ease;
	flex-shrink: 0;
}

.csk-menu .menu-item.dropdown:hover .dropdown-chevron {
	transform: rotate(180deg);
	color: #0F172A;
}

/* Dropdown Sub-menu Card */
.csk-menu .menu-item.dropdown .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 210px;
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 10px;
	box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
	padding: 6px;
	list-style: none;
	margin: 4px 0 0;
	z-index: 120;
}

.csk-menu .menu-item.dropdown:hover .sub-menu,
.csk-menu .menu-item.dropdown:focus-within .sub-menu {
	display: block;
	animation: cskDropdownFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes cskDropdownFadeIn {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.csk-menu .menu-item.dropdown .sub-menu li {
	margin: 0;
	padding: 0;
}

.csk-menu .menu-item.dropdown .sub-menu li a {
	display: flex;
	align-items: center;
	padding: 8px 12px;
	font-size: 13.5px;
	color: #475569;
	border-radius: 6px;
	font-weight: 500;
	gap: 8px;
}

.csk-menu .menu-item.dropdown .sub-menu li a:hover {
	background-color: #F1F5F9;
	color: #0F172A;
}

.mobile-ticket-item {
	display: none;
}

/* Header Right Side & Book Tickets CTA Button */
.csk-header-right {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
	margin-left: 8px;
}

.header-ticket-cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: linear-gradient(135deg, #D97706 0%, #B45309 100%);
	color: #FFFFFF !important;
	font-size: 13.5px;
	font-weight: 600;
	padding: 7px 16px;
	border-radius: 4px;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(217, 119, 6, 0.3);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
	line-height: 1;
	white-space: nowrap;
}

.header-ticket-cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(217, 119, 6, 0.45);
	background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
	color: #FFFFFF !important;
}

.header-ticket-cta .cta-ticket-icon {
	font-size: 14px;
	display: inline-block;
}

.header-ticket-cta .cta-arrow {
	display: inline-block;
	transition: transform 0.2s ease;
	font-size: 12px;
}

.header-ticket-cta:hover .cta-arrow {
	transform: translateX(2px);
}

.mobile-menu-toggle {
	display: none;
	background: transparent;
	border: 1px solid #E2E8F0;
	cursor: pointer;
	padding: 8px;
	width: 38px;
	height: 38px;
	min-width: 38px;
	min-height: 38px;
	border-radius: 8px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 4px;
	z-index: 105;
	transition: background-color 0.2s ease;
}

.mobile-menu-toggle:hover {
	background-color: #F8FAFC;
}

.mobile-menu-toggle span {
	display: block;
	width: 20px;
	height: 2px;
	background-color: #334155;
	border-radius: 2px;
	transition: transform 0.25s ease, opacity 0.2s ease;
}

.mobile-menu-toggle.is-active .bar-1 {
	transform: translateY(6px) rotate(45deg);
}

.mobile-menu-toggle.is-active .bar-2 {
	opacity: 0;
}

.mobile-menu-toggle.is-active .bar-3 {
	transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 900px) {
	.mobile-menu-toggle {
		display: flex;
	}

	.header-ticket-cta {
		display: none;
	}

	.csk-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #FFFFFF;
		border-block-end: 1px solid #E2E8F0;
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
		display: none;
		flex-direction: column;
		padding: 16px 20px 20px;
		z-index: 99;
	}

	.csk-nav.mobile-open {
		display: flex;
	}

	.csk-menu {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: 4px;
	}

	.csk-menu .menu-item a {
		padding: 10px 14px;
		font-size: 15px;
		justify-content: space-between;
	}

	.csk-menu .menu-item.dropdown .sub-menu {
		position: static;
		display: block;
		box-shadow: none;
		border: none;
		padding-left: 14px;
		margin: 2px 0 6px;
		background: #F8FAFC;
		border-radius: 8px;
	}

	.csk-menu .menu-item.dropdown:hover .sub-menu {
		animation: none;
	}

	.mobile-ticket-item {
		display: block !important;
		margin-top: 10px;
	}

	.mobile-ticket-item a {
		background: linear-gradient(135deg, #D97706 0%, #B45309 100%) !important;
		color: #FFFFFF !important;
		justify-content: center !important;
		font-weight: 600 !important;
		border-radius: 4px !important;
		padding: 10px 16px !important;
	}
}

/* ==========================================================================
   1. BREADCRUMBS & SAME-TO-SAME STADIUM LIVE HERO SCORECARD (Reference UI)
   ========================================================================== */

.csk-breadcrumbs-wrapper {
	padding-block: 8px 6px;
	background: transparent;
}

.match-breadcrumbs .breadcrumbs-list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 13px;
	font-weight: 500;
	color: #64748B;
}

.match-breadcrumbs .breadcrumbs-list a {
	color: #64748B;
	text-decoration: none;
	transition: color 0.2s ease;
}

.match-breadcrumbs .breadcrumbs-list a:hover {
	color: #0F172A;
}

.match-breadcrumbs .separator {
	color: #94A3B8;
	font-size: 12px;
	user-select: none;
}

.match-breadcrumbs .current {
	color: #2563EB;
	font-weight: 600;
}

/* Stadium Hero Scorecard Card */
.csk-stadium-hero-section {
	margin-bottom: 16px;
}

.stadium-scorecard-card {
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	background: #0A0F1D;
	border: 1px solid rgba(226, 232, 240, 0.9);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.stadium-backdrop-img {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center 25%;
	background-repeat: no-repeat;
	z-index: 1;
}

.stadium-backdrop-overlay {
	position: absolute;
	inset: 0;
	background: rgba(9, 16, 32, 0.6); /* even dark tint so the full stadium photo shows */
	z-index: 2;
}

.stadium-card-content {
	position: relative;
	z-index: 3;
	padding: 16px 24px 18px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Center Top Meta */
.stadium-center-meta {
	text-align: center;
	margin-bottom: 6px;
}

.stadium-live-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #DC2626;
	color: #FFFFFF;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.6px;
	padding: 3px 12px;
	border-radius: 9999px;
	box-shadow: 0 2px 10px rgba(220, 38, 38, 0.4);
	margin-bottom: 4px;
	text-transform: uppercase;
}

.stadium-live-badge .live-pulse-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #FFFFFF;
	animation: pulseLiveDot 1.5s infinite;
}

@keyframes pulseLiveDot {
	0% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.4; transform: scale(0.75); }
	100% { opacity: 1; transform: scale(1); }
}

.stadium-match-title {
	font-size: 28px;
	font-weight: 600;
	color: #FFFFFF;
	margin: 0 0 2px;
	letter-spacing: -0.5px;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

.stadium-tournament-subtitle {
	font-size: 13px;
	font-weight: 500;
	color: #F1F5F9;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
	margin-bottom: 2px;
}

.stadium-venue-subtitle {
	font-size: 11.5px;
	color: #CBD5E1;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* Floating Pitch Over Badge */
.stadium-pitch-badge-wrap {
	margin: 4px 0 8px;
}

.stadium-pitch-pill {
	display: inline-block;
	background: rgba(255, 255, 255, 0.65);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.8);
	border-radius: 9999px;
	padding: 3px 16px;
	font-size: 12px;
	font-weight: 600;
	color: #1E293B;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* 3-Column Scoreboard Row */
.stadium-scoreboard-row {
	display: grid;
	grid-template-columns: 1fr 1.6fr 1fr;
	align-items: center;
	width: 100%;
	gap: 20px;
	margin-top: 4px;
}

/* CSK Side */
.stadium-team-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.stadium-team-crest {
	width: 86px;
	height: 86px;
	border-radius: 50%;
	background: #FFFFFF;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
	border: 3px solid #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: -22px;
	margin-bottom: 10px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	overflow: hidden;
}

.stadium-team-crest:hover {
	transform: scale(1.05);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.csk-crest-wrap {
	box-shadow: 0 6px 20px rgba(217, 119, 6, 0.22), 0 2px 8px rgba(0, 0, 0, 0.08);
}

.rcb-crest-wrap {
	box-shadow: 0 6px 20px rgba(220, 38, 38, 0.22), 0 2px 8px rgba(0, 0, 0, 0.08);
}

.stadium-team-crest img {
	width: 62px;
	height: 62px;
	object-fit: contain;
}

.stadium-team-name {
	font-size: 17px;
	font-weight: 600;
	color: #FFFFFF;
	margin-bottom: 2px;
	letter-spacing: -0.2px;
}

.stadium-runs-score {
	font-size: 28px;
	font-weight: 600;
	color: #FFFFFF;
	line-height: 1.1;
	letter-spacing: -0.5px;
	margin-bottom: 2px;
}

.stadium-runs-score.target-score {
	font-size: 21px;
	color: #FFFFFF;
}

.stadium-overs-text {
	font-size: 13px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.75);
}

/* Center Equation Column */
.stadium-equation-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.stadium-equation-text {
	font-size: 17px;
	font-weight: 600;
	color: #0F172A;
	margin-bottom: 8px;
	letter-spacing: -0.2px;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(226, 232, 240, 0.95);
	border-radius: 9999px;
	padding: 5px 18px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	display: inline-block;
}

.stadium-rates-pill {
	background: #EFF6FF;
	border: 1px solid #BFDBFE;
	border-radius: 9999px;
	padding: 4px 16px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	font-weight: 600;
	color: #2563EB;
}

.stadium-rates-pill .rate-dot {
	color: #93C5FD;
	font-size: 11px;
}

/* Responsive adjustments for stadium card */
@media (max-width: 860px) {
	.stadium-card-content {
		padding: 20px 18px 24px;
	}
	.stadium-match-title {
		font-size: 28px;
	}
	.stadium-runs-score {
		font-size: 26px;
	}
	.stadium-runs-score.target-score {
		font-size: 21px;
	}
	.stadium-equation-text {
		font-size: 18px;
	}
	.stadium-team-crest {
		width: 76px;
		height: 76px;
		margin-top: -18px;
		margin-bottom: 8px;
	}
	.stadium-team-crest img {
		width: 54px;
		height: 54px;
	}
}

@media (max-width: 640px) {
	.stadium-card-content {
		padding: 16px 12px 20px;
	}
	.stadium-match-title {
		font-size: 24px;
	}
	.stadium-tournament-subtitle {
		font-size: 11.5px;
		letter-spacing: 0.3px;
		line-height: 1.35;
		text-align: center;
		padding-inline: 4px;
	}
	.stadium-venue-subtitle {
		font-size: 10.5px;
		line-height: 1.35;
		text-align: center;
		padding-inline: 4px;
	}
	.stadium-scoreboard-row {
		grid-template-columns: 1fr 1fr;
		gap: 12px 6px;
		width: 100%;
	}
	.stadium-equation-col {
		grid-column: 1 / -1;
		order: 3;
		margin-top: 6px;
	}
	.stadium-team-col.csk-team-side {
		order: 1;
	}
	.stadium-team-col.rcb-team-side {
		order: 2;
	}
	.stadium-runs-score {
		font-size: 22px;
	}
	.stadium-runs-score.target-score {
		font-size: 16px;
	}
	.stadium-equation-text {
		font-size: 15px;
		margin-bottom: 6px;
	}
	.stadium-rates-pill {
		font-size: 11.5px;
		padding: 4px 12px;
		gap: 6px;
	}
	.stadium-team-crest {
		width: 68px;
		height: 68px;
		margin-top: -14px;
		margin-bottom: 6px;
	}
	.stadium-team-crest img {
		width: 48px;
		height: 48px;
	}
}

/* ==========================================================================
   2. CINEMATIC EDITORIAL HERO (CSK vs RCB Match 1)
   ========================================================================== */
.csk-editorial-hero {
	position: relative;
	background-color: #0A0F1D;
	background-image: 
		radial-gradient(circle at 18% 45%, rgba(217, 119, 6, 0.22) 0%, transparent 48%),
		radial-gradient(circle at 82% 45%, rgba(220, 38, 38, 0.22) 0%, transparent 48%),
		linear-gradient(180deg, rgba(10, 15, 29, 0.84) 0%, rgba(10, 15, 29, 0.96) 100%),
		url('../images/hero-banner-main.jpg');
	background-size: cover;
	background-position: center center;
	color: #FFFFFF;
	padding-block: 48px 40px;
	border-block-end: 1px solid rgba(255, 255, 255, 0.08);
	overflow: hidden;
}

.hero-inner-container {
	position: relative;
	z-index: 2;
}

.hero-top-meta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-block-end: 28px;
	flex-wrap: wrap;
}

.hero-kicker-badge {
	background: #D97706;
	color: #FFFFFF;
	font-size: 11px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 9999px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.hero-kicker-text {
	font-size: 12px;
	font-weight: 500;
	color: #CBD5E1;
	letter-spacing: 0.8px;
	text-transform: uppercase;
}

.hero-matchup-stage {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 32px;
	margin-block-end: 36px;
}

.hero-team-block {
	display: flex;
	align-items: center;
	gap: 20px;
}

.hero-team-block.csk-side {
	justify-content: flex-start;
}

.hero-team-block.rcb-side {
	justify-content: flex-end;
	flex-direction: row-reverse;
}

.hero-crest-wrap {
	width: 88px;
	height: 88px;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	flex-shrink: 0;
	backdrop-filter: blur(8px);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-crest-wrap.csk-glow {
	box-shadow: 0 0 32px rgba(245, 158, 11, 0.26);
}

.hero-crest-wrap.rcb-glow {
	box-shadow: 0 0 32px rgba(220, 38, 38, 0.26);
}

.hero-crest-wrap:hover {
	transform: scale(1.05);
}

.hero-crest-img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.hero-team-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.rcb-side .hero-team-info {
	text-align: right;
}

.hero-team-code {
	font-size: 32px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.5px;
}

.csk-side .hero-team-code {
	color: #FBBF24;
}

.rcb-side .hero-team-code {
	color: #F87171;
}

.hero-team-fullname {
	font-size: 18px;
	font-weight: 600;
	color: #FFFFFF;
	margin: 0;
	line-height: 1.25;
}

.hero-team-tagline {
	font-size: 12.5px;
	color: #94A3B8;
	font-weight: 400;
}

.hero-center-hub {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	min-width: 260px;
}

.hero-match-status-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(22, 163, 74, 0.16);
	border: 1px solid rgba(34, 197, 94, 0.35);
	color: #4ADE80;
	padding: 4px 12px;
	border-radius: 9999px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.hero-vs-emblem {
	font-size: 14px;
	font-weight: 600;
	color: #94A3B8;
	letter-spacing: 2px;
	background: rgba(255, 255, 255, 0.06);
	padding: 3px 12px;
	border-radius: 9999px;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-datetime-info .hero-date-str {
	font-size: 15px;
	font-weight: 600;
	color: #FFFFFF;
}

.hero-datetime-info .hero-time-venue {
	font-size: 12.5px;
	color: #94A3B8;
	margin-top: 2px;
}

/* Countdown Glass Tiles */
.hero-countdown-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(15, 23, 42, 0.7);
	border: 1px solid rgba(255, 255, 255, 0.12);
	padding: 8px 16px;
	border-radius: 14px;
	backdrop-filter: blur(8px);
	margin-top: 4px;
}

.cd-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 38px;
}

.cd-val {
	font-size: 18px;
	font-weight: 600;
	color: #FFFFFF;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.cd-txt {
	font-size: 9px;
	font-weight: 500;
	color: #94A3B8;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.cd-sep {
	font-size: 16px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.4);
	margin-bottom: 8px;
}

/* Action Bar */
.hero-action-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
}

.hero-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border-radius: 10px;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.2s ease;
	cursor: pointer;
}

.hero-btn-primary {
	background: #D97706;
	color: #FFFFFF;
	box-shadow: 0 4px 14px rgba(217, 119, 6, 0.35);
}

.hero-btn-primary:hover {
	background: #B45309;
	color: #FFFFFF;
	transform: translateY(-2px);
}

.hero-btn-secondary {
	background: rgba(255, 255, 255, 0.08);
	color: #FFFFFF;
	border: 1px solid rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(6px);
}

.hero-btn-secondary:hover {
	background: rgba(255, 255, 255, 0.16);
	color: #FFFFFF;
	transform: translateY(-2px);
}

.hero-btn-gold {
	background: transparent;
	color: #FBBF24;
	border: 1px solid rgba(251, 191, 36, 0.4);
}

.hero-btn-gold:hover {
	background: rgba(251, 191, 36, 0.1);
	color: #FCD34D;
	border-color: #FCD34D;
	transform: translateY(-2px);
}

/* ==========================================================================
   3. EDITORIAL SUBNAV QUICK BAR
   ========================================================================== */
.csk-editorial-subnav {
	background: #FFFFFF;
	border-block-end: 1px solid #E2E8F0;
	position: -webkit-sticky;
	position: sticky;
	top: var(--csk-header-height, 65px);
	z-index: 90;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
	container-type: scroll-state;
	container-name: csk-subnav-container;
}

.csk-editorial-subnav.is-stuck {
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-block-end-color: #CBD5E1;
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
}

@container csk-subnav-container scroll-state(stuck: top) {
	.csk-editorial-subnav {
		background: rgba(255, 255, 255, 0.96);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border-block-end-color: #CBD5E1;
		box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
	}
}

.subnav-pills-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-block: 8px;
}

.subnav-pills-bar::-webkit-scrollbar {
	display: none;
}

.pill-btn {
	background: transparent;
	border: 1px solid transparent;
	color: #475569;
	font-size: 13px;
	font-family: var(--font-family-base);
	font-weight: 500;
	padding: 6px 14px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	flex-shrink: 0;
}

.pill-btn:hover {
	background: #F1F5F9;
	color: #0F172A;
}

.pill-btn.active {
	background: #0F172A;
	color: #FFFFFF;
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15);
}

.pill-btn.active svg {
	stroke: #FFFFFF;
}

/* Smooth Scroll Offsets for Sections Targeted by Sticky Subnav */
#match-centre,
.csk-match-hub-section,
#news,
#head-to-head,
#all-matches,
#player-records,
#top-performances,
#schedule,
#venues,
#tickets,
#standings,
#rivalry-records,
#faq,
.seo-faq-wrapper {
	scroll-margin-top: calc(var(--csk-header-height, 65px) + var(--csk-subnav-height, 47px) + 20px);
}

/* ==========================================================================
   4. DOMINANT PRIMARY SCOREBOARD
   ========================================================================== */
.csk-scoreboard-master {
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 16px;
	box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
	margin-block: 24px 28px;
	overflow: hidden;
}

.scoreboard-top-strip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 24px;
	background: #FAFBFD;
	border-block-end: 1px solid #F1F5F9;
	gap: 16px;
	flex-wrap: wrap;
}

.score-live-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.live-status-pill {
	background: #DC2626;
	color: #FFFFFF;
	font-size: 11px;
	font-weight: 600;
	padding: 3px 9px;
	border-radius: 9999px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	letter-spacing: 0.5px;
}

.score-match-desc {
	font-size: 12.5px;
	color: #475569;
	font-weight: 500;
}

.btn-refresh-score {
	background: transparent;
	border: 1px solid #E2E8F0;
	border-radius: 6px;
	color: #64748B;
	padding: 4px 10px;
	font-size: 11.5px;
	font-weight: 500;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	transition: all 0.15s ease;
}

.btn-refresh-score:hover {
	color: #0F172A;
	background: #F1F5F9;
}

.scoreboard-body-grid {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	padding: 24px 32px;
	background: #FFFFFF;
}

.sb-team-col {
	display: flex;
	align-items: center;
	gap: 16px;
}

.sb-team-col.rcb-col {
	justify-content: flex-end;
}

.sb-crest-box {
	width: 68px;
	height: 68px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sb-crest-img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.sb-team-data {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.sb-team-data.rcb-align {
	text-align: right;
}

.sb-team-label {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.sb-team-data.rcb-align .sb-team-label {
	justify-content: flex-end;
}

.sb-short-code {
	font-size: 17px;
	font-weight: 600;
	color: #0F172A;
}

.sb-full-name {
	font-size: 12.5px;
	color: #64748B;
	font-weight: 500;
}

.sb-runs-display {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.sb-team-data.rcb-align .sb-runs-display {
	justify-content: flex-end;
}

.sb-runs {
	font-size: 40px;
	font-weight: 600;
	line-height: 1;
	color: #0F172A;
	letter-spacing: -1px;
	font-variant-numeric: tabular-nums;
}

.sb-overs {
	font-size: 14px;
	color: #64748B;
	font-weight: 500;
}

.sb-equation-hub {
	background: #F8FAFC;
	border: 1px solid #E2E8F0;
	border-radius: 12px;
	padding: 12px 20px;
	text-align: center;
	min-width: 250px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sb-equation-status {
	font-size: 14px;
	font-weight: 600;
	color: #0F172A;
}

.sb-rates-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}

.rate-badge {
	font-size: 11.5px;
	color: #64748B;
	font-weight: 500;
}

.rrr-badge {
	color: #DC2626;
	font-weight: 600;
}

.sb-over-balls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 2px;
}

.ball-chip {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 600;
}

.ball-four {
	background: #16A34A;
	color: #FFFFFF;
}

.ball-six {
	background: #2563EB;
	color: #FFFFFF;
}

.ball-single, .ball-two {
	background: #CBD5E1;
	color: #1E293B;
}

.ball-dot {
	background: #E2E8F0;
	color: #64748B;
}

/* Horizontal Top Performers Bar - Clean Seamless UI */
.csk-performers-master {
	background: transparent;
	border: none;
	border-radius: 0;
	overflow: visible;
	margin-bottom: 24px;
	box-shadow: none;
	scroll-margin-top: 120px;
}

.scoreboard-performers-strip {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	align-items: center;
	padding: 16px 20px;
	background: #F8FAFC;
	border-radius: 14px;
}

.perf-cluster {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.perf-cluster-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #64748B;
	min-width: 100%;
	margin-bottom: -4px;
}

.perf-card-mini {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #FFFFFF;
	border: none;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	border-radius: 8px;
	padding: 6px 12px;
}

.perf-avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid #CBD5E1;
}

.perf-details {
	display: flex;
	flex-direction: column;
}

.perf-name {
	font-size: 11.5px;
	font-weight: 600;
	color: #0F172A;
}

.perf-sub {
	font-size: 10px;
	color: #64748B;
}

.perf-stat-highlight {
	font-size: 12.5px;
	font-weight: 600;
	color: #0F172A;
	margin-left: 4px;
}

.perf-divider {
	width: 1px;
	height: 36px;
	background: #E2E8F0;
}

/* ==========================================================================
   5. MATCH CENTRE INTERACTIVE HUB (TABS) - Seamless Editorial Tabs
   ========================================================================== */
.csk-match-hub-section {
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	margin-block-end: 32px;
	overflow: visible;
	scroll-margin-top: 120px;
}

.hub-tabs-nav {
	display: flex;
	align-items: center;
	gap: 4px;
	background: transparent;
	border-block-end: 2px solid #F1F5F9;
	padding: 0 0 2px 0;
	overflow-x: auto;
}

.hub-tab-btn {
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	color: #64748B;
	font-size: 13.5px;
	font-family: var(--font-family-base);
	font-weight: 500;
	padding: 10px 18px;
	border-radius: 6px 6px 0 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.15s ease;
	margin-bottom: -2px;
}

.hub-tab-btn:hover {
	color: #0F172A;
	background: #F8FAFC;
}

.hub-tab-btn.active {
	background: transparent;
	color: #D97706;
	border-bottom-color: #D97706;
	font-weight: 600;
	box-shadow: none;
}

.hub-tab-panel {
	display: none;
	padding: 24px 0;
}

.hub-tab-panel.active {
	display: block;
	animation: cskFadeIn 0.2s ease;
}

@keyframes cskFadeIn {
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Commentary Styles */
.comm-feed-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 14px;
	border-bottom: 1px solid #F1F5F9;
	margin-bottom: 16px;
	flex-wrap: wrap;
	gap: 10px;
}

.comm-heading {
	font-size: 16px;
	font-weight: 600;
	color: #0F172A;
	margin: 0;
}

.comm-sub {
	font-size: 12px;
	color: #64748B;
}

.comm-filters {
	display: flex;
	align-items: center;
	gap: 6px;
}

.comm-filter-pill {
	font-size: 11px;
	font-weight: 500;
	color: #475569;
	background: #F1F5F9;
	padding: 4px 10px;
	border-radius: 9999px;
	cursor: pointer;
	transition: all 0.15s ease;
}

.comm-filter-pill:hover,
.comm-filter-pill.active {
	background: #0F172A;
	color: #FFFFFF;
}

.editorial-comm-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.comm-entry {
	display: grid;
	grid-template-columns: 70px 1fr;
	gap: 16px;
	align-items: start;
	padding: 12px 14px;
	background: #FAFBFD;
	border: 1px solid #F1F5F9;
	border-radius: 10px;
	transition: background 0.15s ease;
}

.comm-entry:hover {
	background: #F8FAFC;
}

.comm-entry.is-boundary {
	border-inline-start: 3px solid #16A34A;
}

.comm-over-col {
	display: flex;
	align-items: center;
	gap: 8px;
}

.over-num {
	font-size: 13px;
	font-weight: 600;
	color: #0F172A;
}

.event-chip {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 10.5px;
	font-weight: 600;
}

.chip-four { background: #16A34A; color: #FFFFFF; }
.chip-six { background: #2563EB; color: #FFFFFF; }
.chip-single, .chip-two { background: #CBD5E1; color: #1E293B; }
.chip-dot { background: #E2E8F0; color: #64748B; }

.comm-narrative-col .comm-text {
	margin: 0 0 6px 0;
	font-size: 13px;
	line-height: 1.6;
	color: #334155;
}

.comm-narrative-col .comm-text strong {
	color: #0F172A;
}

.comm-tally {
	font-size: 11px;
	font-weight: 500;
	color: #64748B;
}

/* Playing XI Grid */
.xi-editorial-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.xi-team-card {
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 12px;
	overflow: hidden;
}

.csk-card-border {
	border-top: 3px solid #D97706;
}

.rcb-card-border {
	border-top: 3px solid #DC2626;
}

.xi-header-strip {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 18px;
	border-bottom: 1px solid #F1F5F9;
}

.csk-bg-subtle { background: #FFFBEB; }
.rcb-bg-subtle { background: #FEF2F2; }

.xi-crest {
	width: 34px;
	height: 34px;
	object-fit: contain;
}

.xi-title {
	font-size: 14.5px;
	font-weight: 600;
	color: #0F172A;
	margin: 0;
}

.xi-sub {
	font-size: 11px;
	color: #64748B;
}

.xi-roster-list {
	list-style: none;
	margin: 0;
	padding: 10px 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.xi-roster-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12.5px;
	padding-block: 4px;
	border-bottom: 1px solid #F8FAFC;
}

.xi-roster-list li:last-child {
	border-bottom: none;
}

.r-num {
	width: 18px;
	font-size: 11px;
	font-weight: 600;
	color: #94A3B8;
}

.r-name {
	font-weight: 500;
	color: #1E293B;
	flex: 1;
}

.r-role {
	font-size: 10px;
	color: #64748B;
	background: #F1F5F9;
	padding: 2px 7px;
	border-radius: 4px;
}

.role-c { background: #FEF3C7; color: #92400E; font-weight: 600; }
.role-wk { background: #E0E7FF; color: #3730A3; font-weight: 600; }
.role-ar { background: #ECFDF5; color: #065F46; }
.role-bowl { background: #F1F5F9; color: #475569; }

/* Win Prob & Poll Grid */
.winprob-poll-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.editorial-prob-box,
.editorial-poll-box {
	background: #FAFBFD;
	border: 1px solid #E2E8F0;
	border-radius: 12px;
	padding: 18px;
}

.prob-header, .poll-header {
	margin-bottom: 12px;
}

.prob-title, .poll-title {
	font-size: 14.5px;
	font-weight: 600;
	color: #0F172A;
	margin: 0 0 2px 0;
}

.prob-sub, .poll-sub {
	font-size: 11px;
	color: #64748B;
}

.prob-teams-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-block: 10px 6px;
}

.prob-team {
	display: flex;
	align-items: center;
	gap: 6px;
}

.prob-badge {
	width: 22px;
	height: 22px;
	object-fit: contain;
}

.prob-team-name {
	font-size: 13px;
	font-weight: 600;
	color: #0F172A;
}

.prob-pct {
	font-size: 13px;
	font-weight: 600;
}

.csk-pct { color: #D97706; }
.rcb-pct { color: #DC2626; }

.prob-split-bar {
	width: 100%;
	height: 8px;
	border-radius: 9999px;
	display: flex;
	overflow: hidden;
	margin-bottom: 12px;
}

.csk-bar { background: #F59E0B; }
.rcb-bar { background: #DC2626; }

.prob-chart-container {
	background: #FFFFFF;
	border: 1px solid #F1F5F9;
	border-radius: 8px;
	padding: 10px;
}

.prob-chart-svg {
	width: 100%;
	height: auto;
	display: block;
}

.chart-legend {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 6px;
	font-size: 11px;
	color: #64748B;
}

.legend-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.yellow-dot { background: #D97706; }
.red-dot { background: #DC2626; }

/* Fan Poll Candidates */
.poll-candidates-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin-top: 10px;
}

.poll-cand-card {
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 10px;
	padding: 10px 6px;
	text-align: center;
	cursor: pointer;
	transition: all 0.2s ease;
}

.poll-cand-card:hover {
	border-color: #0F172A;
	transform: translateY(-2px);
}

.poll-cand-card.voted {
	border-color: #16A34A;
	background: #F0FDF4;
}

.poll-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 auto 6px auto;
	display: block;
	border: 1px solid #E2E8F0;
}

.poll-name {
	font-size: 10.5px;
	font-weight: 600;
	color: #0F172A;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.poll-pct {
	font-size: 12px;
	font-weight: 600;
	color: #475569;
	margin-block: 4px;
}

.poll-progress-bar {
	width: 100%;
	height: 4px;
	background: #E2E8F0;
	border-radius: 9999px;
	overflow: hidden;
}

.poll-fill {
	height: 100%;
	border-radius: 9999px;
	transition: width 0.4s ease;
}

.yellow-fill { background: #D97706; }
.red-fill { background: #DC2626; }
.orange-fill { background: #EA580C; }

/* Match Info Panel */
.info-details-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 20px;
}

.info-card-block {
	background: #FAFBFD;
	border: 1px solid #E2E8F0;
	border-radius: 10px;
	padding: 14px 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.info-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 12.5px;
	gap: 12px;
}

.info-label {
	color: #64748B;
	font-weight: 500;
}

.info-val {
	color: #0F172A;
	font-weight: 600;
	text-align: right;
}

.info-actions-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.btn {
	padding: 9px 16px;
	border-radius: 8px;
	font-size: 12.5px;
	font-family: var(--font-family-base);
	font-weight: 500;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	transition: all 0.15s ease;
}

.btn-outline {
	background: #FFFFFF;
	border: 1px solid #CBD5E1;
	color: #1E293B;
}

.btn-outline:hover {
	background: #F8FAFC;
	border-color: #94A3B8;
}

.btn-purple {
	background: #0F172A;
	border: 1px solid #0F172A;
	color: #FFFFFF;
}

.btn-purple:hover {
	background: #1E293B;
}

/* ==========================================================================
   6. EDITORIAL CRICKET JOURNALISM & MAGAZINE GRID
   ========================================================================== */
.csk-editorial-magazine-section {
	margin-block-end: 36px;
}

.editorial-section-header {
	margin-bottom: 20px;
}

.section-kicker {
	font-size: 11px;
	font-weight: 600;
	color: #D97706;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: 4px;
}

.section-heading {
	font-size: 24px;
	font-weight: 600;
	color: #0F172A;
	letter-spacing: -0.5px;
	margin: 0 0 4px 0;
}

.section-subtext {
	font-size: 13.5px;
	color: #64748B;
	margin: 0;
}

.magazine-grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 24px;
	margin-bottom: 20px;
}

/* Lead Featured Story */
.lead-story-card {
	background: #FFFFFF;
	border: none;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
	display: flex;
	flex-direction: column;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lead-story-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.lead-img-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #0F172A;
	overflow: hidden;
}

.lead-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.lead-story-card:hover .lead-img {
	transform: scale(1.03);
}

.story-category-pill {
	position: absolute;
	top: 12px;
	left: 12px;
	font-size: 10.5px;
	font-weight: 600;
	padding: 3px 9px;
	border-radius: 6px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.cat-preview { background: #0F172A; color: #FFFFFF; }
.cat-pitch { background: #D97706; color: #FFFFFF; }
.cat-tactics { background: #2563EB; color: #FFFFFF; }
.cat-fantasy { background: #7C3AED; color: #FFFFFF; }

.lead-story-body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.story-meta {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	color: #64748B;
	margin-bottom: 8px;
}

.meta-sep { color: #CBD5E1; }

.lead-headline {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.35;
	margin: 0 0 10px 0;
}

.lead-headline a {
	color: #0F172A;
	text-decoration: none;
	transition: color 0.15s ease;
}

.lead-headline a:hover {
	color: #D97706;
}

.lead-excerpt {
	font-size: 13.5px;
	color: #475569;
	line-height: 1.6;
	margin: 0 0 16px 0;
}

.story-tags-row {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
}

.tag-badge {
	font-size: 11px;
	color: #475569;
	background: #F1F5F9;
	padding: 2px 8px;
	border-radius: 4px;
}

/* Secondary Stories Stack */
.secondary-stories-stack {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.secondary-story-card {
	background: #F8FAFC;
	border: none;
	border-radius: 12px;
	padding: 12px 14px;
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 14px;
	align-items: center;
	transition: transform 0.2s ease, background 0.2s ease;
}

.secondary-story-card:hover {
	transform: translateY(-2px);
	background: #F1F5F9;
}

.sec-thumb-wrap {
	position: relative;
	width: 120px;
	height: 80px;
	border-radius: 8px;
	overflow: hidden;
	background: #0F172A;
}

.sec-thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sec-content {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.sec-time {
	font-size: 10.5px;
	color: #64748B;
}

.sec-headline {
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.35;
	margin: 0;
}

.sec-headline a {
	color: #0F172A;
	text-decoration: none;
	transition: color 0.15s ease;
}

.sec-headline a:hover {
	color: #D97706;
}

.sec-desc {
	font-size: 11.5px;
	color: #64748B;
	line-height: 1.45;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Editorial Briefs Strip */
.editorial-briefs-strip {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	background: #F8FAFC;
	border: none;
	border-radius: 12px;
	padding: 16px 20px;
	margin-top: 24px;
	margin-bottom: 28px;
}

.brief-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	border-right: 1px solid #E2E8F0;
	padding-right: 16px;
}

.brief-item:last-child {
	border-right: none;
	padding-right: 0;
}

.brief-kicker {
	font-size: 10px;
	font-weight: 700;
	color: #D97706;
	letter-spacing: 0.6px;
}

.brief-text {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.45;
}

.brief-text a {
	color: #1E293B;
	text-decoration: none;
}

.brief-text a:hover {
	color: #D97706;
}

/* ==========================================================================
   7. RIVALRY SHOWCASE & HEAD-TO-HEAD (Clean Editorial UI - No Inner Boxes)
   ========================================================================== */
.csk-rivalry-showcase-section {
	margin-block: 28px 36px;
	padding-block-end: 28px;
	border-block-end: 1px solid #F1F5F9;
}

.rivalry-showcase-card {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
}

.rivalry-header-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	border-bottom: 2px solid #F1F5F9;
	padding-bottom: 12px;
	margin-bottom: 24px;
	flex-wrap: wrap;
	gap: 12px;
}

.rivalry-title {
	font-size: 20px;
	font-weight: 700;
	color: #0F172A;
	margin: 2px 0 0 0;
	letter-spacing: -0.3px;
}

.link-stats-cta {
	font-size: 13px;
	font-weight: 600;
	color: #D97706;
	text-decoration: none;
	padding: 6px 14px;
	border-radius: 9999px;
	background: #FFFBEB;
	transition: all 0.2s ease;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.link-stats-cta:hover {
	background: #FEF3C7;
	color: #B45309;
}

.rivalry-tally-bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 20px;
	margin-bottom: 16px;
}

.tally-team-side.csk-tally {
	display: flex;
	align-items: center;
	gap: 16px;
	background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(245, 158, 11, 0.02) 100%);
	border-radius: 12px;
	padding: 16px 20px;
	border-left: 4px solid #F59E0B;
}

.tally-team-side.rcb-tally {
	display: flex;
	align-items: center;
	gap: 16px;
	justify-content: flex-end;
	background: linear-gradient(135deg, rgba(220, 38, 38, 0.02) 0%, rgba(220, 38, 38, 0.08) 100%);
	border-radius: 12px;
	padding: 16px 20px;
	border-right: 4px solid #DC2626;
}

.tally-crest {
	width: 46px;
	height: 46px;
	object-fit: contain;
}

.tally-text-data {
	display: flex;
	flex-direction: column;
}

.tally-text-data.rcb-right {
	text-align: right;
}

.tally-wins-num {
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
}

.csk-tally .tally-wins-num { color: #D97706; }
.rcb-tally .tally-wins-num { color: #DC2626; }

.tally-team-str {
	font-size: 13px;
	color: #64748B;
	font-weight: 600;
	margin-top: 2px;
}

.tally-center-meta {
	text-align: center;
	padding: 0 10px;
}

.tally-matches-total {
	font-size: 17px;
	font-weight: 700;
	color: #0F172A;
	display: block;
}

.tally-nr-sub {
	font-size: 11.5px;
	color: #94A3B8;
	font-weight: 500;
}

.rivalry-visual-bar {
	width: 100%;
	height: 8px;
	border-radius: 9999px;
	overflow: hidden;
	display: flex;
	margin-bottom: 16px;
}

.bar-fill-csk { background: #F59E0B; }
.bar-fill-rcb { background: #DC2626; }

.rivalry-form-strip {
	display: flex;
	align-items: center;
	gap: 12px;
	background: transparent;
	border: none;
	padding: 4px 0;
	margin-bottom: 24px;
	flex-wrap: wrap;
}

.form-label {
	font-size: 13px;
	font-weight: 600;
	color: #0F172A;
}

.form-badges-list {
	display: flex;
	align-items: center;
	gap: 6px;
}

.fbadge {
	font-size: 11px;
	font-weight: 700;
	padding: 3px 9px;
	border-radius: 6px;
	color: #FFFFFF;
}

.f-csk { background: #D97706; }
.f-rcb { background: #DC2626; }

.form-caption {
	font-size: 12px;
	color: #64748B;
	margin-left: auto;
}

.venue-breakdown-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.venue-stat-cell {
	background: #F8FAFC;
	border: none;
	border-radius: 12px;
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	transition: background 0.2s ease, transform 0.2s ease;
}

.venue-stat-cell:hover {
	background: #F1F5F9;
	transform: translateY(-2px);
}

.v-ground {
	font-size: 13px;
	font-weight: 600;
	color: #0F172A;
}

.v-score-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
}

.v-sep { color: #CBD5E1; }
.csk-text { color: #D97706; }
.rcb-text { color: #DC2626; }

.v-note {
	font-size: 11px;
	color: #64748B;
}

/* ==========================================================================
   8. TOURNAMENT STANDINGS & UPCOMING FIXTURES (Clean Editorial - No Nested Boxes)
   ========================================================================== */
.csk-standings-fixtures-section {
	margin-block-end: 36px;
}

.standings-fixtures-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
}

.editorial-table-card,
.editorial-fixtures-card {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
}

.card-editorial-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	border-bottom: 2px solid #F1F5F9;
	padding-bottom: 12px;
	margin-bottom: 16px;
}

.card-heading {
	font-size: 18px;
	font-weight: 700;
	color: #0F172A;
	margin: 2px 0 0 0;
	letter-spacing: -0.3px;
}

.header-link {
	font-size: 12.5px;
	font-weight: 600;
	color: #D97706;
	text-decoration: none;
	padding: 4px 10px;
	border-radius: 6px;
	background: #FFFBEB;
	transition: background 0.15s ease;
}

.header-link:hover {
	background: #FEF3C7;
	color: #B45309;
}

.clean-table-responsive {
	overflow-x: auto;
}

.editorial-standings-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.editorial-standings-table th {
	text-align: center;
	color: #64748B;
	font-weight: 600;
	font-size: 11.5px;
	padding: 10px 8px;
	border-bottom: 2px solid #E2E8F0;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.editorial-standings-table th.th-team {
	text-align: left;
}

.editorial-standings-table td {
	padding: 10px 8px;
	text-align: center;
	border-bottom: 1px solid #F1F5F9;
	color: #1E293B;
}

.editorial-standings-table tr:hover td {
	background: #F8FAFC;
}

.editorial-standings-table .td-team {
	text-align: left;
	display: flex;
	align-items: center;
	gap: 8px;
}

.table-crest {
	width: 22px;
	height: 22px;
	object-fit: contain;
}

.team-bold {
	font-weight: 600;
	color: #0F172A;
}

.team-muted {
	font-size: 11px;
	color: #94A3B8;
}

.row-highlight td {
	background: rgba(245, 158, 11, 0.04);
}

/* Fixtures Stack */
.fixtures-stack {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.fixture-editorial-item {
	display: grid;
	grid-template-columns: 50px 1fr auto;
	gap: 14px;
	align-items: center;
	padding: 12px 16px;
	background: #F8FAFC;
	border: none;
	border-radius: 12px;
	transition: background 0.2s ease, transform 0.2s ease;
}

.fixture-editorial-item:hover {
	background: #F1F5F9;
	transform: translateX(2px);
}

.f-date-badge {
	background: #FFFFFF;
	border: none;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	border-radius: 8px;
	padding: 6px 4px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.f-day {
	font-size: 14px;
	font-weight: 600;
	color: #0F172A;
	line-height: 1;
}

.f-mon {
	font-size: 9px;
	font-weight: 600;
	color: #64748B;
	text-transform: uppercase;
}

.f-teams-block {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.f-matchup {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: #0F172A;
}

.f-crest {
	width: 18px;
	height: 18px;
	object-fit: contain;
}

.f-vs {
	font-size: 11px;
	color: #94A3B8;
	font-weight: 400;
}

.f-meta {
	font-size: 10.5px;
	color: #64748B;
}

.f-action-link {
	font-size: 11.5px;
	font-weight: 600;
	color: #D97706;
	text-decoration: none;
	padding: 4px 10px;
	border: 1px solid rgba(217, 119, 6, 0.3);
	border-radius: 6px;
	transition: all 0.15s ease;
}

.f-action-link:hover {
	background: #D97706;
	color: #FFFFFF;
}

/* ==========================================================================
   9. FANTASY CRICKET BANNER
   ========================================================================== */
.csk-editorial-banner {
	background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
	border: 1px solid #FCD34D;
	border-radius: 16px;
	padding: 22px 28px;
	margin-block-end: 36px;
}

.banner-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.banner-text-side {
	flex: 1;
	min-width: 280px;
}

.banner-kicker {
	font-size: 10.5px;
	font-weight: 600;
	color: #92400E;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.banner-title {
	font-size: 18px;
	font-weight: 600;
	color: #78350F;
	margin: 2px 0 6px 0;
}

.banner-desc {
	font-size: 13px;
	color: #92400E;
	margin: 0;
	line-height: 1.5;
}

.banner-btn {
	background: #78350F;
	color: #FFFFFF;
	font-size: 13px;
	font-weight: 600;
	padding: 10px 20px;
	border-radius: 10px;
	text-decoration: none;
	white-space: nowrap;
	transition: all 0.15s ease;
}

.banner-btn:hover {
	background: #451A03;
	color: #FFFFFF;
	transform: translateY(-2px);
}

/* ==========================================================================
   10. LONG SEO EDITORIAL ARCHIVE & FAQ
   ========================================================================== */
.csk-seo-editorial-archive {
	margin-block-end: 48px;
}

.seo-reading-container {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 24px 0 !important;
	box-shadow: none !important;
}

.seo-masthead {
	border-bottom: 2px solid #F1F5F9;
	padding-bottom: 20px;
	margin-bottom: 24px;
}

.seo-kicker {
	font-size: 11px;
	font-weight: 600;
	color: #D97706;
	letter-spacing: 1px;
	text-transform: uppercase;
	display: block;
	margin-bottom: 6px;
}

.seo-title {
	font-size: 26px;
	font-weight: 600;
	color: #0F172A;
	letter-spacing: -0.5px;
	line-height: 1.3;
	margin: 0 0 12px 0;
}

.seo-lead {
	font-size: 15px;
	color: #475569;
	line-height: 1.7;
	margin: 0;
}

/* Stat Metrics Strip */
.editorial-stat-strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 32px;
}

.stat-cell {
	background: #F8FAFC;
	border: none;
	border-radius: 12px;
	padding: 18px 14px;
	text-align: center;
	transition: background 0.2s ease;
}

.stat-cell:hover {
	background: #F1F5F9;
}

.stat-number {
	font-size: 28px;
	font-weight: 600;
	color: #0F172A;
	line-height: 1;
	display: block;
	margin-bottom: 4px;
}

.stat-number.csk-highlight { color: #D97706; }
.stat-number.rcb-highlight { color: #DC2626; }

.stat-label {
	font-size: 11px;
	color: #64748B;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.seo-prose-block {
	margin-bottom: 32px;
}

.seo-h3 {
	font-size: 18px;
	font-weight: 600;
	color: #0F172A;
	margin: 0 0 12px 0;
}

.seo-prose-block p {
	font-size: 14.5px;
	color: #334155;
	line-height: 1.7;
	margin: 0 0 16px 0;
}

.seo-table-wrap {
	overflow-x: auto;
	margin-top: 14px;
}

.editorial-records-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.editorial-records-table th {
	background: #F8FAFC;
	color: #475569;
	font-weight: 600;
	padding: 10px 14px;
	border-bottom: 2px solid #E2E8F0;
	text-align: left;
	font-size: 11.5px;
}

.editorial-records-table td {
	padding: 10px 14px;
	border-bottom: 1px solid #F1F5F9;
	color: #1E293B;
}

.td-venue-name {
	font-weight: 500;
	color: #0F172A;
}

.badge-win-csk {
	background: #FEF3C7;
	color: #92400E;
	padding: 3px 8px;
	border-radius: 9999px;
	font-size: 11px;
	font-weight: 600;
}

.badge-win-rcb {
	background: #FEE2E2;
	color: #991B1B;
	padding: 3px 8px;
	border-radius: 9999px;
	font-size: 11px;
	font-weight: 600;
}

/* Tactical Phases */
.tactical-phases-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 14px;
}

.phase-card {
	background: #F8FAFC;
	border: none;
	border-radius: 12px;
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	transition: background 0.2s ease;
}

.phase-card:hover {
	background: #F1F5F9;
}

.phase-badge {
	font-size: 10.5px;
	font-weight: 600;
	color: #D97706;
	text-transform: uppercase;
}

.phase-title {
	font-size: 13.5px;
	font-weight: 600;
	color: #0F172A;
	margin: 0;
}

.phase-text {
	font-size: 12.5px;
	color: #475569;
	line-height: 1.55;
	margin: 0;
}

/* Internal Hub Links Card */
.editorial-hub-links-card {
	background: #F8FAFC;
	border: none;
	border-radius: 14px;
	padding: 24px;
	margin-bottom: 32px;
}

.hub-links-title {
	font-size: 15px;
	font-weight: 600;
	color: #0F172A;
	margin: 0 0 14px 0;
}

.hub-links-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.hub-link-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: #FFFFFF;
	border: none;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	border-radius: 10px;
	padding: 14px;
	text-decoration: none;
	transition: all 0.15s ease;
}

.hub-link-item:hover {
	box-shadow: 0 4px 12px rgba(217, 119, 6, 0.15);
	transform: translateY(-2px);
}

.hl-title {
	font-size: 13px;
	font-weight: 600;
	color: #0F172A;
}

.hl-desc {
	font-size: 11px;
	color: #64748B;
}

/* FAQ Accordion */
.seo-faq-wrapper {
	margin-top: 24px;
}

.seo-faq-intro {
	font-size: 13.5px;
	color: #64748B;
	margin: 0 0 16px 0;
}

.faq-accordion-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.csk-faq-item {
	background: #F8FAFC;
	border: none;
	border-radius: 10px;
	overflow: hidden;
	transition: background 0.15s ease;
}

.csk-faq-item[open] {
	background: #F1F5F9;
}

.csk-faq-summary {
	padding: 14px 18px;
	font-size: 14px;
	font-weight: 600;
	color: #0F172A;
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.csk-faq-summary::-webkit-details-marker {
	display: none;
}

.faq-chevron {
	width: 18px;
	height: 18px;
	color: #64748B;
	transition: transform 0.2s ease;
	flex-shrink: 0;
}

.csk-faq-item[open] .faq-chevron {
	transform: rotate(180deg);
	color: #0F172A;
}

.csk-faq-content {
	padding: 0 18px 16px 18px;
	font-size: 13.5px;
	color: #334155;
	line-height: 1.65;
	border-top: 1px solid transparent;
}

.csk-faq-item[open] .csk-faq-content {
	border-top-color: #F1F5F9;
}


/* 7. FOOTER (White / Light Theme) */
.csk-footer {
	background: #FFFFFF;
	color: #475569;
	font-size: 12px;
	margin-block-start: auto;
	border-block-start: 1px solid #E2E8F0;
	box-shadow: 0 -1px 3px rgba(15, 23, 42, 0.03);
}

.csk-footer-main {
	padding-block: 40px 30px;
}

.footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 32px;
}

.footer-logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	margin-block-end: 14px;
}

.footer-brand-logo {
	height: 44px;
	width: auto;
	max-width: 180px;
	object-fit: contain;
	filter: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.footer-logo:hover .footer-brand-logo {
	opacity: 0.92;
	transform: scale(1.02);
}

.footer-logo .logo-text .tld-part {
	color: #0F172A;
}

.brand-desc {
	font-size: 12px;
	color: #64748B;
	line-height: 1.6;
	margin-block-end: 16px;
}

.footer-social-icons {
	display: flex;
	align-items: center;
	gap: 10px;
}

.social-link {
	color: #64748B;
	background: #F8FAFC;
	border: 1px solid #E2E8F0;
	border-radius: 8px;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

.social-link:hover {
	color: #FFFFFF;
	background: #D97706;
	border-color: #D97706;
	transform: translateY(-2px);
	box-shadow: 0 4px 10px rgba(217, 119, 6, 0.25);
}

.footer-title {
	font-size: 13.5px;
	font-weight: 700;
	color: #0F172A;
	margin: 0 0 14px 0;
	letter-spacing: -0.1px;
}

.footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.footer-menu li a {
	color: #475569;
	text-decoration: none;
	font-size: 12px;
	font-weight: 500;
	transition: color 0.15s ease, transform 0.15s ease;
	display: inline-block;
}

.footer-menu li a:hover {
	color: #D97706;
	transform: translateX(2px);
}

.subscribe-desc {
	font-size: 12px;
	color: #64748B;
	margin-block-end: 12px;
	line-height: 1.5;
}

.footer-subscribe-form {
	display: flex;
	gap: 6px;
}

.footer-subscribe-form input {
	background: #F8FAFC;
	border: 1px solid #CBD5E1;
	border-radius: var(--radius-sm, 6px);
	padding: 8px 12px;
	font-size: 12px;
	font-family: var(--font-family-base);
	color: #0F172A;
	outline: none;
	flex: 1;
	min-inline-size: 0;
	transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.footer-subscribe-form input::placeholder {
	color: #94A3B8;
}

.footer-subscribe-form input:focus {
	border-color: #D97706;
	background: #FFFFFF;
	box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.12);
}

.btn-subscribe {
	background: linear-gradient(135deg, #D97706 0%, #B45309 100%);
	color: #FFFFFF;
	border: none;
	border-radius: var(--radius-sm, 6px);
	padding: 8px 16px;
	font-size: 12px;
	font-family: var(--font-family-base);
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.2s ease;
	flex-shrink: 0;
	box-shadow: 0 2px 6px rgba(217, 119, 6, 0.25);
}

.btn-subscribe:hover {
	background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(217, 119, 6, 0.35);
}

.csk-footer-bottom {
	border-block-start: 1px solid #F1F5F9;
	background-color: #F8FAFC;
	padding-block: 16px;
	text-align: center;
}

.copyright-text {
	margin: 0;
	font-size: 11px;
	color: #64748B;
	line-height: 1.6;
}

/* ==========================================================================
   RESPONSIVE DESIGN (Media Queries for Editorial Layout)
   ========================================================================== */
@media (max-width: 1024px) {
	.hero-matchup-stage {
		gap: 20px;
	}
	.hero-crest-wrap {
		width: 76px;
		height: 76px;
	}
	.magazine-grid {
		grid-template-columns: 1fr;
	}
	.secondary-stories-stack {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 14px;
	}
	.footer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 860px) {
	.csk-nav:not(.mobile-open) .csk-menu {
		display: none !important;
	}
	.mobile-menu-toggle {
		display: flex !important;
	}
	.csk-nav.mobile-open .csk-menu {
		display: flex !important;
		flex-direction: column !important;
		position: absolute !important;
		inset-block-start: 100% !important;
		inset-inline-start: 0 !important;
		inline-size: 100% !important;
		background: #FFFFFF !important;
		padding: 10px 14px !important;
		border-block-end: 2px solid var(--border-color) !important;
		box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12) !important;
		z-index: 99999 !important;
		gap: 2px !important;
		animation: cskMenuSlideDown 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
	}
	@keyframes cskMenuSlideDown {
		from { opacity: 0; transform: translateY(-8px); }
		to { opacity: 1; transform: translateY(0); }
	}
	.csk-nav.mobile-open .csk-menu .menu-item {
		inline-size: 100% !important;
		list-style: none !important;
		margin: 0 !important;
	}
	.csk-nav.mobile-open .csk-menu .menu-item a {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		padding: 11px 14px !important;
		font-size: 14.5px !important;
		font-weight: 600 !important;
		color: #1E293B !important;
		border-radius: 8px !important;
		background: transparent !important;
		transition: background-color 0.15s ease, color 0.15s ease !important;
		text-decoration: none !important;
		border-bottom: 1px solid #F1F5F9 !important;
	}
	.csk-nav.mobile-open .csk-menu .menu-item:last-child a {
		border-bottom: none !important;
	}
	.csk-nav.mobile-open .csk-menu .menu-item a:hover,
	.csk-nav.mobile-open .csk-menu .menu-item.active a {
		background: #EEF2FF !important;
		color: var(--purple-primary) !important;
	}
	.csk-search-bar input {
		inline-size: 110px;
		max-inline-size: 110px;
	}

	.hero-matchup-stage {
		grid-template-columns: 1fr;
		gap: 24px;
		text-align: center;
	}
	.hero-team-block {
		justify-content: center !important;
		flex-direction: row !important;
	}
	.hero-team-info {
		text-align: center !important;
	}
	.hero-crest-wrap {
		width: 70px;
		height: 70px;
	}

	.scoreboard-body-grid {
		grid-template-columns: 1fr;
		gap: 18px;
		padding: 18px;
		text-align: center;
	}
	.sb-team-col {
		justify-content: center !important;
	}
	.sb-team-data {
		text-align: center !important;
	}
	.sb-team-label, .sb-runs-display {
		justify-content: center !important;
	}
	.scoreboard-performers-strip {
		grid-template-columns: 1fr;
		gap: 14px;
		padding: 12px;
	}
	.perf-cluster {
		display: flex;
		flex-direction: column;
		width: 100%;
		gap: 8px;
	}
	.perf-card-mini {
		width: 100%;
		justify-content: space-between;
	}
	.perf-divider {
		display: none;
	}

	.xi-editorial-grid,
	.winprob-poll-grid,
	.standings-fixtures-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.secondary-stories-stack {
		grid-template-columns: 1fr;
	}
	.editorial-briefs-strip {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.brief-item {
		border-right: none;
		border-bottom: 1px solid #E2E8F0;
		padding-right: 0;
		padding-bottom: 10px;
	}
	.brief-item:last-child {
		border-bottom: none;
		padding-bottom: 0;
	}
	.tactical-phases-row {
		grid-template-columns: 1fr;
	}
	.venue-breakdown-row {
		grid-template-columns: 1fr;
	}
	.seo-reading-container {
		padding: 24px 20px;
	}
}

@media (max-width: 640px) {
	.site-brand-logo {
		height: 38px !important;
		max-width: 140px !important;
	}
	.footer-brand-logo {
		height: 38px !important;
		max-width: 140px !important;
	}
	.header-ticket-cta {
		display: none !important;
	}
	.csk-header-right {
		gap: 8px !important;
	}
	.csk-header-right .csk-search-bar input,
	.csk-search-bar input[type="search"] {
		display: none !important;
	}
	.csk-header-right .csk-search-bar .search-icon {
		position: static !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 32px !important;
		height: 32px !important;
		color: #334155 !important;
		cursor: pointer !important;
	}
	.mobile-menu-toggle {
		display: flex !important;
	}
	.csk-container {
		padding-inline: 14px;
	}
	.hero-top-meta {
		margin-bottom: 18px;
	}
	.hero-team-fullname {
		font-size: 16px;
	}
	.hero-team-code {
		font-size: 26px;
	}
	.hero-action-bar {
		flex-direction: column;
		width: 100%;
	}
	.hero-btn {
		width: 100%;
		justify-content: center;
	}
	.scoreboard-body-grid {
		padding: 16px 12px;
	}
	.sb-runs {
		font-size: 32px;
	}
	.sb-equation-hub {
		min-width: 0;
		width: 100%;
	}
	.poll-candidates-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.editorial-stat-strip {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
	.stat-number {
		font-size: 22px;
	}
	.hub-links-grid {
		grid-template-columns: 1fr;
	}
	.info-details-grid {
		grid-template-columns: 1fr;
	}
	.banner-inner {
		flex-direction: column;
		text-align: center;
	}
	.banner-btn {
		width: 100%;
		text-align: center;
	}
	.rivalry-tally-bar {
		grid-template-columns: 1fr;
		text-align: center;
		gap: 12px;
	}
	.tally-team-side {
		justify-content: center !important;
	}
	.tally-text-data {
		text-align: center !important;
	}
	.tally-wins-num {
		font-size: 26px;
	}
	.footer-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

@media (max-width: 420px) {
	.csk-search-bar input {
		display: none;
	}
	.csk-search-bar .search-icon {
		position: static;
		color: #334155;
		cursor: pointer;
	}
	.hero-crest-wrap {
		width: 58px;
		height: 58px;
		border-radius: 14px;
	}
	.sb-runs {
		font-size: 26px;
	}
	.cd-box {
		min-width: 28px;
	}
	.cd-val {
		font-size: 14px;
	}
	.cd-txt {
		font-size: 7.5px;
	}
	.seo-title {
		font-size: 20px;
	}
	.seo-reading-container {
		padding: 18px 14px;
	}
}



/* ==========================================================================
   8. INNER PAGES & LEGAL / CONTACT TEMPLATES
   ========================================================================== */

.csk-page-hero {
	background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
	color: #FFFFFF;
	padding-block: 32px 28px;
	border-block-end: 1px solid var(--border-color);
}

.csk-breadcrumbs {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: #94A3B8;
	margin-block-end: 10px;
}

.csk-breadcrumbs a {
	color: #94A3B8;
	text-decoration: none;
	transition: color 0.15s ease;
}

.csk-breadcrumbs a:hover {
	color: #F59E0B;
}

.breadcrumb-separator {
	color: #64748B;
}

.breadcrumb-current {
	color: #F59E0B;
	font-weight: 600;
}

.page-hero-title {
	font-size: 28px;
	font-weight: 600;
	color: #FFFFFF;
	letter-spacing: -0.5px;
	margin: 0 0 8px 0;
}

.page-hero-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 12px;
	color: #94A3B8;
	flex-wrap: wrap;
}

.meta-badge {
	background: rgba(16, 185, 129, 0.15);
	color: #34D399;
	font-size: 11px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 9999px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.dot-green {
	inline-size: 6px;
	block-size: 6px;
	border-radius: 50%;
	background: #34D399;
}

/* INNER TWO-COLUMN GRID */
.csk-inner-grid {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
	margin-block: 24px 40px;
}

.csk-inner-sidebar {
	display: flex;
	flex-direction: column;
	gap: 16px;
	position: sticky;
	inset-block-start: 70px;
}

.csk-sidebar-card {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	padding: 16px;
	box-shadow: var(--shadow-card);
}

.sidebar-title {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--text-main);
	margin: 0 0 12px 0;
	padding-block-end: 8px;
	border-block-end: 1px solid var(--border-light);
}

.sidebar-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.sidebar-nav-list li a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: var(--radius-sm);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--text-secondary);
	text-decoration: none;
	transition: all 0.15s ease;
}

.sidebar-nav-list li a:hover {
	background: #F1F5F9;
	color: var(--text-main);
}

.sidebar-nav-list li.active a {
	background: #EEF2FF;
	color: var(--purple-primary);
	font-weight: 600;
}

.sidebar-nav-list li.active a svg {
	stroke: var(--purple-primary);
}

.card-quick-contact {
	background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
	border-color: #FCD34D;
}

.qc-title {
	font-size: 13px;
	font-weight: 600;
	color: #78350F;
	margin: 0 0 4px 0;
}

.qc-desc {
	font-size: 11px;
	color: #92400E;
	line-height: 1.4;
	margin: 0 0 10px 0;
}

.btn-block {
	inline-size: 100%;
}

/* PAGE CONTENT CARD */
.csk-page-content-card {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	padding: 32px;
	box-shadow: var(--shadow-card);
	min-inline-size: 0;
}

.csk-article-body {
	color: var(--text-main);
	font-size: 14px;
	line-height: 1.7;
}

.csk-article-body h2 {
	font-size: 20px;
	font-weight: 600;
	color: var(--text-main);
	margin-block: 28px 12px;
	padding-block-end: 6px;
	border-block-end: 1px solid var(--border-light);
}

.csk-article-body h3 {
	font-size: 16px;
	font-weight: 600;
	color: var(--text-main);
	margin-block: 20px 8px;
}

.csk-article-body p {
	margin-block-end: 14px;
}

.csk-article-body ul,
.csk-article-body ol {
	margin-block-end: 16px;
	padding-inline-start: 24px;
}

.csk-article-body li {
	margin-block-end: 6px;
}

.lead-text {
	font-size: 15.5px;
	color: #334155;
	line-height: 1.75;
}

.legal-notice-box,
.legal-alert-box {
	background: #FEF3C7;
	border: 1px solid #F59E0B;
	border-radius: var(--radius-md);
	padding: 14px 16px;
	margin-block: 18px;
	font-size: 13px;
	line-height: 1.6;
	color: #92400E;
}

.legal-alert-box.alert-yellow {
	background: #FFFBEB;
	border-color: #FBBF24;
	color: #78350F;
}

/* ABOUT PAGE SPECIAL COMPONENTS */
.about-stats-ribbon {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-block: 20px 28px;
}

.ribbon-item {
	background: #F8FAFC;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	padding: 12px 10px;
	text-align: center;
}

.ribbon-num {
	display: block;
	font-size: 22px;
	font-weight: 600;
	color: #F59E0B;
	line-height: 1.1;
	margin-block-end: 4px;
}

.ribbon-lbl {
	display: block;
	font-size: 11px;
	font-weight: 600;
	color: var(--text-muted);
}

.about-pillars-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-block: 16px 24px;
}

.pillar-card {
	background: #F8FAFC;
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md);
	padding: 16px;
}

.pillar-icon {
	font-size: 24px;
	margin-block-end: 8px;
}

.pillar-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-main);
	margin: 0 0 6px 0;
}

.pillar-desc {
	font-size: 12px;
	color: var(--text-secondary);
	margin: 0;
	line-height: 1.5;
}

/* CONTACT PAGE DUAL LAYOUT */
.contact-dual-layout {
	display: grid;
	grid-template-columns: 360px minmax(0, 1fr);
	gap: 24px;
	margin-block: 24px 40px;
	align-items: start;
}

.contact-channels-col {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.contact-info-card {
	padding: 24px;
}

.channel-intro {
	font-size: 13px;
	color: var(--text-secondary);
	line-height: 1.5;
	margin-block-end: 20px;
}

.channel-items-stack {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-block-end: 20px;
}

.channel-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding-block-end: 14px;
	border-block-end: 1px solid var(--border-light);
}

.channel-icon-box {
	inline-size: 38px;
	block-size: 38px;
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.icon-purple {
	background: #EEF2FF;
	color: var(--purple-primary);
}

.icon-yellow {
	background: #FEF3C7;
	color: #D97706;
}

.icon-red {
	background: #FEE2E2;
	color: #DC2626;
}

.channel-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-main);
	margin: 0 0 3px 0;
}

.channel-text {
	font-size: 11.5px;
	color: var(--text-muted);
	margin: 0 0 4px 0;
	line-height: 1.4;
}

.channel-link {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--purple-primary);
	text-decoration: none;
}

.channel-link:hover {
	text-decoration: underline;
}

.response-pledge-box {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #F1F5F9;
	border-radius: var(--radius-md);
	padding: 10px 12px;
	font-size: 11.5px;
	color: #475569;
}

.pledge-icon {
	font-size: 18px;
	flex-shrink: 0;
}

.legal-quick-box {
	padding: 16px 20px;
}

.sub-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-main);
	margin: 0 0 10px 0;
}

.legal-badge-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.legal-badge-links a {
	background: #F1F5F9;
	color: #334155;
	padding: 4px 10px;
	border-radius: 9999px;
	font-size: 11.5px;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.15s ease;
}

.legal-badge-links a:hover {
	background: var(--purple-primary);
	color: #FFFFFF;
}

/* CONTACT FORM CARD */
.contact-form-card {
	padding: 32px;
}

.form-intro-desc {
	font-size: 13px;
	color: var(--text-secondary);
	margin: 0 0 20px 0;
}

.required-asterisk {
	color: #EF4444;
	font-weight: 600;
}

.csk-contact-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.form-row-2col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.form-label {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--text-main);
}

.form-input,
.form-select,
.form-textarea {
	inline-size: 100%;
	padding: 10px 14px;
	border: 1px solid #CBD5E1;
	border-radius: var(--radius-sm);
	font-family: var(--font-family-base);
	font-size: 13px;
	color: var(--text-main);
	background: #FFFFFF;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	outline: none;
	box-sizing: border-box;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
	border-color: var(--purple-primary);
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

.checkbox-group {
	margin-block: 4px;
}

.checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
	margin-block-start: 3px;
	accent-color: var(--purple-primary);
	inline-size: 16px;
	block-size: 16px;
}

.checkbox-text {
	font-size: 12px;
	color: var(--text-secondary);
	line-height: 1.4;
}

.checkbox-text a {
	color: var(--purple-primary);
	text-decoration: underline;
}

.btn-submit {
	padding: 10px 24px;
	font-size: 13px;
	font-weight: 600;
}

/* FORM FEEDBACK ALERTS */
.form-feedback-alert {
	border-radius: var(--radius-md);
	padding: 16px;
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin-block-end: 20px;
}

.success-alert {
	background: #ECFDF5;
	border: 1px solid #10B981;
	color: #065F46;
}

.error-alert {
	background: #FEF2F2;
	border: 1px solid #EF4444;
	color: #991B1B;
}

.alert-icon {
	font-size: 20px;
	font-weight: 600;
	flex-shrink: 0;
}

.alert-title {
	font-size: 14px;
	font-weight: 600;
	margin: 0 0 4px 0;
}

.alert-desc {
	font-size: 12.5px;
	line-height: 1.5;
	margin: 0;
}
/* Note: Homepage SEO archive styles now integrated into Section 10 */

/* RESPONSIVE STYLES FOR INNER & EMD SECTIONS */
@media (max-width: 1024px) {
	.emd-stats-overview-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.tactical-cards-grid {
		grid-template-columns: 1fr;
	}
	.about-stats-ribbon {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 860px) {
	.csk-inner-grid {
		grid-template-columns: 1fr;
	}
	.contact-dual-layout {
		grid-template-columns: 1fr;
	}
	.csk-inner-sidebar {
		position: static;
	}
	.form-row-2col {
		grid-template-columns: 1fr;
	}
	.about-pillars-grid {
		grid-template-columns: 1fr;
	}
	.csk-page-content-card,
	.contact-form-card,
	.csk-seo-card {
		padding: 20px 16px;
	}
}


/* LEGAL METADATA HEADER & FOOTER */
.csk-legal-card {
	position: relative;
}

.doc-meta-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block-end: 16px;
	margin-block-end: 20px;
	border-block-end: 1px solid var(--border-light);
	font-size: 11.5px;
	flex-wrap: wrap;
	gap: 10px;
}

.doc-meta-left {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.doc-type-pill {
	background: #EEF2FF;
	color: var(--purple-primary);
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 9999px;
	font-size: 11px;
}

.doc-code {
	color: var(--text-muted);
	font-family: monospace;
	font-weight: 600;
}

.doc-status-live {
	color: #10B981;
	font-weight: 600;
}

.doc-footer-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block-start: 24px;
	margin-block-start: 32px;
	border-block-start: 1px solid var(--border-light);
	font-size: 12px;
	color: var(--text-muted);
	flex-wrap: wrap;
	gap: 12px;
}

.doc-footer-left {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.doc-footer-left a {
	color: var(--purple-primary);
	text-decoration: underline;
}

.sidebar-actions-stack {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.btn-sm {
	padding: 6px 12px;
	font-size: 11.5px;
}

/* PRINT STYLES FOR LEGAL DOCUMENTS */
@media print {
	.csk-header,
	.csk-footer,
	.csk-inner-sidebar,
	.csk-page-hero,
	.doc-footer-right {
		display: none !important;
	}
	body,
	.csk-site-wrapper,
	.csk-main-content,
	.csk-inner-grid,
	.csk-page-content-card {
		background: #FFFFFF !important;
		color: #000000 !important;
		border: none !important;
		box-shadow: none !important;
		padding: 0 !important;
		margin: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* ==========================================================================
   NEW EXPANSIONS: HEADER CTA, STATS, STADIUM GUIDE, TICKETS, GALLERY
   ========================================================================== */

/* 1. HEADER BOOK TICKETS CTA (Matches Reference Screenshot) */
.header-ticket-cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 16px;
	background: linear-gradient(135deg, #D97706 0%, #B45309 100%);
	border-radius: 4px;
	color: #FFFFFF !important;
	text-decoration: none;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: -0.2px;
	box-shadow: 0 2px 8px rgba(217, 119, 6, 0.3);
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	white-space: nowrap;
	flex-shrink: 0;
	line-height: 1;
}

.header-ticket-cta:hover {
	background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
	color: #FFFFFF !important;
	box-shadow: 0 4px 14px rgba(217, 119, 6, 0.45);
	transform: translateY(-1px);
}

.header-ticket-cta .cta-ticket-icon,
.header-ticket-cta .cta-search-icon {
	display: inline-flex;
	align-items: center;
	color: inherit;
	font-size: 14px;
}

.header-ticket-cta .cta-arrow {
	font-size: 12px;
	transition: transform 0.2s ease;
}

.header-ticket-cta:hover .cta-arrow {
	transform: translateX(2px);
}

@media (max-width: 900px) {
	.header-ticket-cta {
		display: none !important;
	}
}

.mobile-ticket-item {
	display: none;
}

@media (max-width: 900px) {
	.mobile-ticket-item {
		display: block !important;
		margin-top: 10px;
	}
	.mobile-ticket-link {
		background: linear-gradient(135deg, #D97706 0%, #B45309 100%) !important;
		color: #FFFFFF !important;
		font-weight: 600 !important;
		border-radius: 4px !important;
		padding: 10px 16px !important;
		text-align: center;
		display: block !important;
	}
}

/* 2. STATS & HEAD TO HEAD PAGE STYLES (ELITE CRICKET ANALYTICS HUB) */

/* General Stats Wrapper & Sections */
.stats-site-wrapper,
.stats-page-container {
	background-color: #F8FAFC;
	overflow-x: hidden;
	width: 100%;
}

.stats-site-wrapper strong,
.stats-site-wrapper b,
.stats-page-container strong,
.stats-page-container b {
	font-weight: 600;
}

.stats-section-block {
	margin-block-end: 48px;
	width: 100%;
	min-width: 0;
}

.section-editorial-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-block-end: 20px;
	padding-block-end: 14px;
	border-bottom: 2px solid #E2E8F0;
	flex-wrap: wrap;
}

.section-kicker {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #0284C7;
	margin-block-end: 4px;
}

.section-title {
	font-size: 24px;
	font-weight: 600;
	color: #0F172A;
	letter-spacing: -0.5px;
	line-height: 1.25;
	margin: 0;
}

.section-desc {
	font-size: 13.5px;
	color: #64748B;
	margin-block-start: 6px;
	margin-block-end: 0;
}

.section-badge-info {
	font-size: 12px;
	font-weight: 600;
	color: #475569;
	background: #EEF2F6;
	padding: 5px 12px;
	border-radius: 9999px;
	border: 1px solid #E2E8F0;
	white-space: nowrap;
}

/* 1. CINEMATIC EDITORIAL HERO */
.stats-editorial-hero {
	position: relative;
	background: linear-gradient(135deg, #090D16 0%, #111827 50%, #1E1B4B 100%);
	color: #FFFFFF;
	padding: 36px 0 32px;
	overflow: hidden;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.stats-hero-backdrop {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle at 15% 30%, rgba(217, 119, 6, 0.15) 0%, transparent 45%),
	                  radial-gradient(circle at 85% 30%, rgba(220, 38, 38, 0.15) 0%, transparent 45%);
	pointer-events: none;
}

.stats-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15, 23, 42, 0.3) 0%, rgba(15, 23, 42, 0.85) 100%);
	pointer-events: none;
}

.stats-hero-content {
	position: relative;
	z-index: 2;
}

.stats-breadcrumbs {
	margin-block-end: 18px;
}

.stats-breadcrumbs .breadcrumbs-list {
	display: flex;
	align-items: center;
	gap: 8px;
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 12px;
	color: #94A3B8;
}

.stats-breadcrumbs a {
	color: #CBD5E1;
	text-decoration: none;
}

.stats-breadcrumbs a:hover {
	color: #FBBF24;
}

.stats-breadcrumbs .separator {
	color: #64748B;
	font-size: 10px;
}

.stats-breadcrumbs .current {
	color: #F8FAFC;
	font-weight: 600;
}

.stats-hero-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	margin-block-end: 28px;
}

.stats-hero-title-area {
	flex: 1;
	max-width: 780px;
}

.stats-hero-kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.2px;
	color: #FBBF24;
	background: rgba(251, 191, 36, 0.12);
	border: 1px solid rgba(251, 191, 36, 0.28);
	padding: 4px 12px;
	border-radius: 9999px;
	margin-block-end: 12px;
}

.kicker-pulse-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #F59E0B;
	box-shadow: 0 0 8px #F59E0B;
}

.stats-hero-main-title {
	font-size: 32px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.6px;
	color: #FFFFFF;
	margin: 0 0 10px;
	word-break: normal;
	overflow-wrap: normal;
	hyphens: manual;
}

.stats-hero-lead-text {
	font-size: 14.5px;
	color: #94A3B8;
	line-height: 1.6;
	margin: 0;
}

/* Dual Team Medallions in Hero */
.stats-hero-crests-wrap {
	display: flex;
	align-items: center;
	gap: 16px;
	background: rgba(15, 23, 42, 0.6);
	backdrop-filter: blur(10px);
	padding: 12px 20px;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
	flex-shrink: 0;
}

.stats-crest-badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.stats-crest-badge img {
	width: 58px;
	height: 58px;
	object-fit: contain;
	border-radius: 50%;
	background: #FFFFFF;
	padding: 4px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	transition: transform 0.2s ease;
}

.stats-crest-badge:hover img {
	transform: scale(1.08);
}

.csk-badge-glow img {
	border: 2px solid #F59E0B;
	box-shadow: 0 0 16px rgba(245, 158, 11, 0.4);
}

.rcb-badge-glow img {
	border: 2px solid #DC2626;
	box-shadow: 0 0 16px rgba(220, 38, 38, 0.4);
}

.crest-caption {
	font-size: 11.5px;
	font-weight: 600;
	color: #E2E8F0;
	letter-spacing: 0.3px;
}

.stats-vs-divider {
	font-size: 13px;
	font-weight: 600;
	color: #64748B;
	background: rgba(255, 255, 255, 0.08);
	padding: 4px 8px;
	border-radius: 6px;
}

/* Quick Jump Pills */
.stats-quick-pills-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.stats-jump-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	color: #CBD5E1;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	padding: 6px 14px;
	border-radius: 9999px;
	text-decoration: none;
	transition: all 0.2s ease;
}

.stats-jump-pill:hover {
	color: #FFFFFF;
	background: rgba(255, 255, 255, 0.16);
	border-color: rgba(255, 255, 255, 0.3);
	transform: translateY(-1px);
}

/* 2. SECTION 1: THE RIVALRY ARENA (OVERALL HEAD TO HEAD) */
.rivalry-arena-card {
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
	overflow: hidden;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.arena-top-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px minmax(0, 1fr);
	gap: 24px;
	padding: 32px 28px;
	align-items: center;
	min-width: 0;
	box-sizing: border-box;
}

.arena-team-side {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 20px 16px;
	border-radius: 12px;
	min-width: 0;
	width: 100%;
	box-sizing: border-box;
}

.csk-arena-side {
	background: linear-gradient(180deg, #FFFBEB 0%, #FFFFFF 100%);
	border: 1px solid #FDE68A;
}

.rcb-arena-side {
	background: linear-gradient(180deg, #FEF2F2 0%, #FFFFFF 100%);
	border: 1px solid #FECACA;
}

.arena-team-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-block-end: 14px;
	text-align: left;
}

.arena-crest-frame {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	flex-shrink: 0;
}

.arena-crest-frame.csk-border {
	border: 2px solid #F59E0B;
}

.arena-crest-frame.rcb-border {
	border: 2px solid #DC2626;
}

.arena-crest-frame img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.arena-team-name {
	font-size: 16px;
	font-weight: 600;
	color: #0F172A;
	margin: 0;
	line-height: 1.25;
}

.arena-team-meta {
	font-size: 11.5px;
	color: #64748B;
	font-weight: 500;
}

.arena-big-win-num {
	font-size: 56px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -2px;
	color: #D97706;
	margin-block-end: 4px;
}

.arena-big-win-num.text-red {
	color: #DC2626;
}

.arena-win-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	color: #475569;
	margin-block-end: 18px;
}

.arena-side-stats {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	padding-top: 14px;
}

.side-stat-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 12.5px;
	gap: 12px;
}

.side-stat-item .stat-k {
	color: #64748B;
	white-space: nowrap;
}

.side-stat-item .stat-v {
	font-weight: 600;
	color: #0F172A;
	text-align: right;
	white-space: nowrap;
}

.text-gold {
	color: #D97706 !important;
}

/* Center Hub */
.arena-center-hub {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0 8px;
	min-width: 0;
}

.arena-total-badge {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	background: #0F172A;
	color: #FFFFFF;
	padding: 8px 20px;
	border-radius: 12px;
	margin-block-end: 18px;
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

.total-count {
	font-size: 26px;
	font-weight: 600;
	line-height: 1;
	color: #F8FAFC;
}

.total-lbl {
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 1px;
	color: #94A3B8;
	margin-block-start: 2px;
}

.arena-duel-bar-wrap {
	width: 100%;
	margin-block-end: 18px;
}

.arena-duel-bar {
	display: flex;
	height: 26px;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
	background: #E2E8F0;
}

.duel-segment {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 600;
	color: #FFFFFF;
	white-space: nowrap;
	padding: 0 4px;
}

.duel-segment.csk-fill {
	background: linear-gradient(90deg, #D97706 0%, #F59E0B 100%);
}

.duel-segment.rcb-fill {
	background: linear-gradient(90deg, #DC2626 0%, #B91C1C 100%);
}

.duel-segment.nr-fill {
	background: #94A3B8;
}

.duel-bar-legend {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	color: #64748B;
	font-weight: 600;
	margin-block-start: 6px;
	flex-wrap: wrap;
	gap: 6px;
}

.duel-bar-legend span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.dot-gold {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #D97706;
}

.dot-red {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #DC2626;
}

.dot-gray {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #94A3B8;
}

/* Win Mode Patterns Box */
.arena-win-mode-box {
	background: #F8FAFC;
	border: 1px solid #E2E8F0;
	border-radius: 10px;
	padding: 10px 14px;
	width: 100%;
}

.win-mode-header {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.8px;
	color: #64748B;
	margin-block-end: 8px;
	text-transform: uppercase;
}

.win-mode-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 12px;
	padding: 4px 0;
	border-bottom: 1px dashed #E2E8F0;
}

.win-mode-row:last-child {
	border-bottom: none;
}

.mode-team-val {
	font-weight: 600;
	min-width: 24px;
}

.csk-val {
	color: #D97706;
	text-align: left;
}

.rcb-val {
	color: #DC2626;
	text-align: right;
}

.mode-label {
	color: #475569;
	font-size: 11.5px;
}

/* Arena Metrics Strip (Bottom 4 cards) */
.arena-metrics-strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: #E2E8F0;
	border-top: 1px solid #E2E8F0;
}

.metric-card {
	background: #FFFFFF;
	padding: 18px 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-align: center;
}

.metric-kicker {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: #64748B;
}

.metric-figures {
	font-size: 14px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex-wrap: wrap;
}

.val-csk {
	color: #D97706;
}

.val-rcb {
	color: #DC2626;
}

.val-sep {
	color: #94A3B8;
	font-weight: 400;
}

.metric-sub {
	font-size: 11px;
	color: #64748B;
}

/* 3. SECTION 2: VENUE FORTRESS DYNAMICS */
.venue-cards-tri-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.venue-stat-card {
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 14px;
	padding: 22px 20px;
	box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
	display: flex;
	flex-direction: column;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.venue-stat-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.venue-stat-card.fortress-card {
	border-top: 4px solid #D97706;
}

.venue-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-block-end: 10px;
}

.venue-badge-pill {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.8px;
	padding: 3px 8px;
	border-radius: 6px;
	text-transform: uppercase;
}

.gold-pill {
	background: #FEF3C7;
	color: #92400E;
	border: 1px solid #FDE68A;
}

.blue-pill {
	background: #E0E7FF;
	color: #3730A3;
	border: 1px solid #C7D2FE;
}

.slate-pill {
	background: #F1F5F9;
	color: #475569;
	border: 1px solid #E2E8F0;
}

.venue-total-count {
	font-size: 12px;
	font-weight: 600;
	color: #64748B;
}

.venue-title {
	font-size: 16px;
	font-weight: 600;
	color: #0F172A;
	margin: 0 0 2px;
	line-height: 1.3;
}

.venue-city {
	font-size: 12px;
	color: #64748B;
	margin-block-end: 14px;
}

.venue-visual-bar {
	display: flex;
	height: 22px;
	border-radius: 6px;
	overflow: hidden;
	font-size: 10.5px;
	font-weight: 600;
	color: #FFFFFF;
	margin-block-end: 16px;
	background: #E2E8F0;
}

.v-bar-part {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
	white-space: nowrap;
}

.csk-v-bar {
	background: #D97706;
}

.rcb-v-bar {
	background: #DC2626;
}

.nr-v-bar {
	background: #94A3B8;
}

.venue-highlights-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	border-top: 1px solid #F1F5F9;
	padding-top: 12px;
	flex: 1;
}

.v-highlight-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	font-size: 12.5px;
	gap: 8px;
}

.v-label {
	color: #64748B;
	flex-shrink: 0;
}

.v-value {
	font-weight: 600;
	color: #1E293B;
	text-align: right;
}

.venue-card-footer {
	margin-block-start: 14px;
	padding-block-start: 12px;
	border-top: 1px dashed #E2E8F0;
}

.fortress-note {
	font-size: 11.5px;
	color: #475569;
	line-height: 1.45;
	display: block;
}

/* 4. SECTION 3: TEAM RECORD HIGHS & LOWS */
.records-duo-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.record-extremes-card {
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 14px;
	box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
	overflow: hidden;
}

.record-card-head {
	padding: 18px 20px;
	border-bottom: 1px solid #E2E8F0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.head-highs {
	background: linear-gradient(180deg, #FFFBEB 0%, #FFFFFF 100%);
	border-top: 4px solid #D97706;
}

.head-lows {
	background: linear-gradient(180deg, #FEF2F2 0%, #FFFFFF 100%);
	border-top: 4px solid #DC2626;
}

.head-title-wrap {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.head-badge {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.8px;
	padding: 2px 6px;
	border-radius: 4px;
	display: inline-block;
	width: fit-content;
}

.badge-highs {
	background: #FEF3C7;
	color: #92400E;
}

.badge-lows {
	background: #FEE2E2;
	color: #991B1B;
}

.head-title {
	font-size: 16px;
	font-weight: 600;
	color: #0F172A;
	margin: 0;
}

.head-sub {
	font-size: 11.5px;
	font-weight: 600;
	color: #64748B;
}

.record-items-list {
	display: flex;
	flex-direction: column;
}

.record-entry-row {
	display: flex;
	align-items: center;
	padding: 12px 18px;
	border-bottom: 1px solid #F1F5F9;
	gap: 16px;
}

.record-entry-row:last-child {
	border-bottom: none;
}

.entry-rank-col {
	font-size: 13px;
	font-weight: 600;
	color: #94A3B8;
	width: 24px;
}

.entry-score-col {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 130px;
}

.team-score-badge {
	font-size: 10.5px;
	font-weight: 600;
	padding: 2px 6px;
	border-radius: 4px;
}

.csk-bg {
	background: #FEF3C7;
	color: #92400E;
}

.rcb-bg {
	background: #FEE2E2;
	color: #991B1B;
}

.score-display {
	font-size: 16px;
	font-weight: 600;
	color: #0F172A;
}

.text-crimson {
	color: #DC2626 !important;
}

.overs-tag {
	font-size: 11.5px;
	color: #64748B;
	font-weight: 400;
}

.entry-details-col {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
}

.entry-venue {
	font-size: 12.5px;
	font-weight: 600;
	color: #334155;
}

.entry-impact {
	font-size: 11.5px;
	color: #64748B;
}

/* 5. SECTION 4: ALL-TIME RIVALRY LEGENDS */
.legends-tables-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	min-width: 0;
}

.stats-table-card {
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 14px;
	box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
	overflow: hidden;
	min-width: 0;
	max-width: 100%;
}

.table-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	background: #F8FAFC;
	border-bottom: 1px solid #E2E8F0;
}

.th-title-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
}

.table-card-icon {
	font-size: 18px;
}

.table-card-title {
	font-size: 15px;
	font-weight: 600;
	color: #0F172A;
	margin: 0;
}

.table-meta-tag {
	font-size: 11px;
	font-weight: 600;
	color: #64748B;
	background: #E2E8F0;
	padding: 3px 8px;
	border-radius: 9999px;
}

.custom-table-responsive {
	overflow-x: auto;
	width: 100%;
	max-width: 100%;
	-webkit-overflow-scrolling: touch;
}

.editorial-stats-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12.5px;
}

.editorial-stats-table th {
	background: #F1F5F9;
	color: #475569;
	font-weight: 600;
	padding: 10px 12px;
	text-align: left;
	font-size: 11px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	border-bottom: 1px solid #E2E8F0;
}

.editorial-stats-table th.th-num,
.editorial-stats-table td.td-num {
	text-align: right;
}

.editorial-stats-table td {
	padding: 10px 12px;
	border-bottom: 1px solid #F1F5F9;
	color: #334155;
	vertical-align: middle;
}

.editorial-stats-table tr:last-child td {
	border-bottom: none;
}

.editorial-stats-table tr.leader-row {
	background: #FFFBEB;
}

.editorial-stats-table tr.second-row {
	background: #F8FAFC;
}

.rank-badge {
	font-size: 10.5px;
	font-weight: 600;
	padding: 2px 6px;
	border-radius: 4px;
	background: #E2E8F0;
	color: #475569;
}

.gold-rank {
	background: #FEF3C7;
	color: #92400E;
}

.silver-rank {
	background: #E2E8F0;
	color: #1E293B;
}

.player-cell {
	display: flex;
	flex-direction: column;
}

.player-name {
	font-weight: 600;
	color: #0F172A;
	font-size: 13px;
}

.player-spec {
	font-size: 10.5px;
	color: #64748B;
}

.team-tag {
	font-size: 10px;
	font-weight: 600;
	padding: 2px 6px;
	border-radius: 4px;
	display: inline-block;
}

.csk-tag {
	background: #FEF3C7;
	color: #92400E;
}

.rcb-tag {
	background: #FEE2E2;
	color: #991B1B;
}

.both-tag {
	background: #E0E7FF;
	color: #3730A3;
}

/* Individual Benchmark Lists (Highs & Best Spells) */
.individual-records-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.ind-record-card {
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 12px;
	padding: 18px 20px;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.ind-card-title {
	font-size: 14.5px;
	font-weight: 600;
	color: #0F172A;
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid #E2E8F0;
}

.ind-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ind-list li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 12.5px;
	padding-bottom: 8px;
	border-bottom: 1px dashed #F1F5F9;
}

.ind-list li:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

.ind-rank {
	font-size: 11px;
	font-weight: 600;
	color: #94A3B8;
	width: 14px;
}

.ind-desc {
	flex: 1;
	color: #1E293B;
}

.ind-meta {
	font-size: 11px;
	color: #64748B;
	white-space: nowrap;
}

/* 6. SECTION 5: COMPLETE 36-MATCH HISTORICAL VAULT */
.vault-counter-badge {
	font-size: 12px;
	font-weight: 600;
	color: #0284C7;
	background: #E0F2FE;
	border: 1px solid #BAE6FD;
	padding: 6px 14px;
	border-radius: 9999px;
}

.vault-filters-bar {
	display: flex;
	gap: 12px;
	margin-block-end: 16px;
	flex-wrap: wrap;
	background: #FFFFFF;
	padding: 12px 16px;
	border: 1px solid #E2E8F0;
	border-radius: 10px;
}

.search-input-wrap {
	position: relative;
	flex: 1;
	min-width: 240px;
	display: flex;
	align-items: center;
}

.search-input-wrap svg {
	position: absolute;
	left: 12px;
	color: #94A3B8;
	pointer-events: none;
}

.vault-filter-input {
	width: 100%;
	padding: 8px 12px 8px 36px;
	border: 1px solid #CBD5E1;
	border-radius: 8px;
	font-size: 13px;
	font-family: inherit;
	color: #0F172A;
	background: #F8FAFC;
	transition: border-color 0.2s ease;
}

.vault-filter-input:focus {
	outline: none;
	border-color: #0284C7;
	background: #FFFFFF;
	box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12);
}

.filter-dropdowns-group {
	display: flex;
	gap: 10px;
}

.vault-filter-select {
	padding: 8px 12px;
	border: 1px solid #CBD5E1;
	border-radius: 8px;
	font-size: 13px;
	font-family: inherit;
	color: #0F172A;
	background: #F8FAFC;
	cursor: pointer;
}

.vault-filter-select:focus {
	outline: none;
	border-color: #0284C7;
	background: #FFFFFF;
}

.vault-table-wrapper {
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 12px;
	overflow-x: auto;
	box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
	width: 100%;
	max-width: 100%;
	-webkit-overflow-scrolling: touch;
}

.vault-editorial-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	min-width: 760px;
}

.vault-editorial-table th {
	background: #0F172A;
	color: #F8FAFC;
	font-weight: 600;
	font-size: 11.5px;
	padding: 12px 14px;
	text-align: left;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.vault-editorial-table td {
	padding: 12px 14px;
	border-bottom: 1px solid #F1F5F9;
	color: #334155;
	vertical-align: middle;
}

.vault-editorial-table tbody tr:hover {
	background-color: #F8FAFC;
}

.date-cell {
	display: flex;
	flex-direction: column;
}

.date-main {
	font-weight: 600;
	color: #0F172A;
	font-size: 13px;
}

.date-sub {
	font-size: 11px;
	color: #64748B;
}

.venue-cell {
	font-size: 12.5px;
	color: #334155;
}

.winner-pill {
	font-size: 11px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 9999px;
	display: inline-block;
	white-space: nowrap;
}

.csk-pill {
	background: #FEF3C7;
	color: #92400E;
	border: 1px solid #FDE68A;
}

.rcb-pill {
	background: #FEE2E2;
	color: #991B1B;
	border: 1px solid #FECACA;
}

.nr-pill {
	background: #F1F5F9;
	color: #475569;
	border: 1px solid #CBD5E1;
}

.margin-badge {
	font-size: 12px;
	font-weight: 600;
	color: #0F172A;
	background: #F1F5F9;
	padding: 3px 8px;
	border-radius: 4px;
	display: inline-block;
	white-space: nowrap;
}

/* 7. SECTION 6: TACTICAL RIVALRY INSIGHTS (EDITORIAL PILLARS) */
.tactical-cards-tri-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.tactical-card {
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 14px;
	padding: 24px 22px;
	box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
	display: flex;
	flex-direction: column;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tactical-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

.tactical-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-block-end: 12px;
}

.tactical-num {
	font-size: 24px;
	font-weight: 600;
	color: #CBD5E1;
	line-height: 1;
}

.tactical-tag {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.8px;
	color: #0284C7;
	background: #E0F2FE;
	padding: 3px 8px;
	border-radius: 4px;
	text-transform: uppercase;
}

.tactical-title {
	font-size: 16px;
	font-weight: 600;
	color: #0F172A;
	margin: 0 0 10px;
	line-height: 1.35;
}

.tactical-body {
	font-size: 13.5px;
	color: #475569;
	line-height: 1.6;
	margin: 0;
	flex: 1;
}

/* 8. SECTION 7: SEO FAQ ACCORDION */
.faq-accordion-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.faq-item {
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 10px;
	padding: 16px 20px;
	transition: background-color 0.2s ease;
}

.faq-item[open] {
	background: #F8FAFC;
	border-color: #CBD5E1;
}

.faq-question {
	font-weight: 600;
	font-size: 15px;
	color: #0F172A;
	cursor: pointer;
	outline: none;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.faq-question::-webkit-details-marker {
	display: none;
}

.faq-question::after {
	content: "+";
	font-size: 18px;
	font-weight: 600;
	color: #64748B;
	transition: transform 0.2s ease;
}

.faq-item[open] .faq-question::after {
	content: "−";
	color: #0284C7;
}

.faq-answer {
	margin-block-start: 12px;
	padding-top: 10px;
	border-top: 1px solid #E2E8F0;
	font-size: 14px;
	color: #475569;
	line-height: 1.65;
}

.faq-answer p {
	margin: 0;
}

/* 9. SECTION 8: NEXT DESTINATION CTA BANNER */
.stats-next-cta-banner {
	background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
	border-radius: 16px;
	padding: 36px 32px;
	color: #FFFFFF;
	margin-block-start: 48px;
	margin-block-end: 20px;
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}

.cta-banner-content {
	max-width: 680px;
}

.cta-kicker {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1px;
	color: #FBBF24;
	text-transform: uppercase;
	margin-block-end: 8px;
}

.cta-heading {
	font-size: 24px;
	font-weight: 600;
	color: #FFFFFF;
	margin: 0 0 8px;
	letter-spacing: -0.5px;
}

.cta-desc {
	font-size: 14px;
	color: #94A3B8;
	line-height: 1.5;
	margin: 0 0 20px;
}

.cta-actions-group {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

.btn-cta-gold {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #F59E0B;
	color: #0F172A;
	font-size: 13.5px;
	font-weight: 600;
	padding: 10px 20px;
	border-radius: 8px;
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.btn-cta-gold:hover {
	background: #D97706;
	color: #0F172A;
	transform: translateY(-1px);
}

.btn-cta-outline {
	display: inline-flex;
	align-items: center;
	background: transparent;
	color: #FFFFFF;
	border: 1px solid rgba(255, 255, 255, 0.25);
	font-size: 13.5px;
	font-weight: 600;
	padding: 10px 20px;
	border-radius: 8px;
	text-decoration: none;
	transition: all 0.2s ease;
}

.btn-cta-outline:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.5);
	color: #FFFFFF;
}

/* RESPONSIVE BREAKPOINTS FOR STATS PAGE */
@media (max-width: 992px) {
	.arena-top-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
		padding: 24px 20px;
	}

	.arena-center-hub {
		order: -1;
		margin-bottom: 10px;
		width: 100%;
		box-sizing: border-box;
	}

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

	.venue-cards-tri-grid {
		grid-template-columns: 1fr;
	}

	.records-duo-grid,
	.legends-tables-grid,
	.individual-records-grid,
	.tactical-cards-tri-grid {
		grid-template-columns: 1fr;
	}

	.stats-hero-header-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	.stats-hero-crests-wrap {
		width: 100%;
		justify-content: center;
	}
}

@media (max-width: 640px) {
	.stats-section-block {
		margin-block-end: 36px;
	}

	.section-editorial-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.section-title {
		font-size: 20px;
	}

	.section-badge-info {
		align-self: flex-start;
	}

	.stats-editorial-hero {
		padding: 24px 0 20px;
	}

	.stats-hero-main-title {
		font-size: 20px;
		line-height: 1.35;
	}

	.hero-title-sub-block {
		display: block;
		margin-top: 2px;
	}

	.section-title-sub-block {
		display: inline-block;
	}

	.stats-hero-lead-text {
		font-size: 13px;
		line-height: 1.5;
	}

	.stats-hero-crests-wrap {
		padding: 10px 14px;
		gap: 12px;
	}

	.stats-crest-badge img {
		width: 46px;
		height: 46px;
	}

	.arena-top-grid {
		display: flex;
		flex-direction: column;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		padding: 16px 12px;
		gap: 14px;
	}

	.arena-team-side {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		padding: 16px 12px;
	}

	.arena-center-hub {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		padding: 0;
	}

	.arena-win-mode-box {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		padding: 10px;
	}

	.arena-big-win-num {
		font-size: 42px;
	}

	.duel-bar-legend {
		flex-wrap: wrap;
		gap: 6px 12px;
		justify-content: center;
	}

	.arena-metrics-strip {
		grid-template-columns: 1fr;
	}

	.metric-figures {
		font-size: 13px;
		flex-direction: column;
		gap: 2px;
	}

	.val-sep {
		display: none;
	}

	.v-highlight-row {
		flex-direction: column;
		gap: 2px;
	}

	.v-label {
		max-width: 100%;
	}

	.v-value {
		text-align: left;
	}

	.venue-stat-card {
		padding: 18px 14px;
	}

	.tactical-card {
		padding: 18px 16px;
	}

	.vault-filters-bar {
		flex-direction: column;
		padding: 10px 12px;
	}

	.filter-dropdowns-group {
		flex-direction: column;
		width: 100%;
	}

	.vault-filter-select {
		width: 100%;
	}

	.record-entry-row {
		flex-wrap: wrap;
		gap: 8px 12px;
		padding: 12px 14px;
	}

	.entry-details-col {
		width: 100%;
		padding-left: 36px;
	}

	.stats-next-cta-banner {
		padding: 24px 18px;
		margin-block-start: 36px;
	}

	.cta-heading {
		font-size: 20px;
	}

	.cta-actions-group {
		flex-direction: column;
	}

	.btn-cta-gold,
	.btn-cta-outline {
		width: 100%;
		justify-content: center;
	}
}

/* 3. STADIUM GUIDE STYLES */
.stadium-hero-banner {
	background: linear-gradient(135deg, #0B0E14 0%, #1E1B4B 50%, #0F172A 100%);
	color: #FFFFFF;
	padding: 60px 0 40px;
	position: relative;
	overflow: hidden;
}

.stadium-hero-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at top right, rgba(245, 158, 11, 0.15), transparent 70%);
	pointer-events: none;
}

.stadium-hero-content {
	position: relative;
	z-index: 2;
}

.stadium-breadcrumbs a {
	color: #94A3B8;
	text-decoration: none;
}

.stadium-breadcrumbs .breadcrumb-current {
	color: #F8FAFC;
}

.stadium-hero-tag {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #F59E0B;
	margin-block-start: 16px;
}

.stadium-hero-title {
	font-size: 38px;
	font-weight: 600;
	letter-spacing: -0.5px;
	line-height: 1.15;
	margin: 8px 0 12px;
	max-width: 800px;
	color: #FFFFFF;
}

@media (max-width: 600px) {
	.stadium-hero-title {
		font-size: 26px;
	}
}

.stadium-hero-subtitle {
	font-size: 14.5px;
	color: #CBD5E1;
	max-width: 720px;
	line-height: 1.6;
	margin: 0;
}

.stadium-nav-pills {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-block-start: 24px;
}

.stadium-pill-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 9999px;
	color: #FFFFFF;
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	transition: all 0.2s ease;
}

.stadium-pill-btn:hover,
.stadium-pill-btn.active {
	background: #FFFFFF;
	color: #0F172A;
	border-color: #FFFFFF;
}

.pill-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.dot-yellow { background-color: #F59E0B; }
.dot-red { background-color: #EF4444; }
.dot-blue { background-color: #3B82F6; }

.stadium-detail-card {
	padding: 28px 24px;
}

.stadium-card-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 16px;
	border-bottom: 1px solid var(--border-color);
	padding-bottom: 20px;
}

.stadium-badge {
	font-size: 11px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 4px;
	display: inline-block;
	margin-bottom: 8px;
}

.stadium-name {
	font-size: 22px;
	font-weight: 600;
	color: #0F172A;
	margin: 0 0 6px 0;
}

.stadium-location {
	font-size: 12.5px;
	color: #64748B;
	margin: 0;
}

.stadium-quick-stats {
	display: flex;
	gap: 14px;
}

.q-stat {
	background: #F8FAFC;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	padding: 8px 14px;
	text-align: center;
}

.q-val {
	display: block;
	font-size: 16px;
	font-weight: 600;
	color: #0F172A;
}

.q-lbl {
	display: block;
	font-size: 10px;
	font-weight: 600;
	color: #64748B;
	text-transform: uppercase;
}

.stadium-content-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	margin-block-start: 24px;
}

@media (max-width: 860px) {
	.stadium-content-grid {
		grid-template-columns: 1fr;
	}
}

.stadium-subhead {
	font-size: 16px;
	font-weight: 600;
	color: #0F172A;
	margin: 0 0 14px 0;
}

.stand-cards-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.stand-item {
	background: #F8FAFC;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	padding: 14px;
}

.stand-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-block-end: 6px;
}

.stand-name {
	font-size: 13.5px;
	color: #0F172A;
}

.stand-price {
	font-size: 12.5px;
	font-weight: 600;
	color: #16A34A;
	background: #DCFCE7;
	padding: 2px 8px;
	border-radius: 4px;
}

.stand-desc {
	font-size: 12px;
	color: #475569;
	margin: 0;
	line-height: 1.5;
}

.stadium-checklist {
	list-style: none;
	padding: 0;
	margin: 0;
}

.stadium-checklist li {
	padding: 8px 0;
	font-size: 13px;
	color: #334155;
	border-bottom: 1px solid #F1F5F9;
	line-height: 1.5;
}

.gate-grid {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.gate-box {
	background: #F8FAFC;
	border-left: 3px solid var(--purple-primary);
	padding: 10px 14px;
	border-radius: 0 6px 6px 0;
}

.gate-title {
	font-size: 13px;
	font-weight: 600;
	color: #0F172A;
}

.gate-desc {
	font-size: 11.5px;
	color: #64748B;
	margin-block-start: 2px;
}

.prohibited-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.prohibited-tag {
	font-size: 11.5px;
	background: #FEE2E2;
	color: #991B1B;
	padding: 4px 10px;
	border-radius: 4px;
	font-weight: 600;
}

.stadium-cta-box {
	background: #FFFBEB;
	border: 1px solid #FDE68A;
	border-radius: var(--radius-sm);
	padding: 18px;
}

.stadium-cta-box h4 {
	font-size: 14.5px;
	font-weight: 600;
	color: #92400E;
	margin: 0 0 6px 0;
}

.stadium-cta-box p {
	font-size: 12px;
	color: #78350F;
	margin: 0 0 12px 0;
	line-height: 1.5;
}

.btn-csk-gold {
	background: #D97706;
	color: #FFFFFF !important;
	font-weight: 600;
	font-size: 12.5px;
	padding: 8px 16px;
	border-radius: 6px;
	text-decoration: none;
	display: inline-block;
	transition: background 0.2s;
}

.btn-csk-gold:hover {
	background: #B45309;
}

.btn-rcb-red {
	background: #DC2626;
	color: #FFFFFF !important;
	font-weight: 600;
	font-size: 12.5px;
	padding: 8px 16px;
	border-radius: 6px;
	text-decoration: none;
	display: inline-block;
	transition: background 0.2s;
}

.btn-rcb-red:hover {
	background: #B91C1C;
}

/* 4. BOOK TICKETS PAGE STYLES */
.tickets-hero {
	background: linear-gradient(135deg, #0F172A 0%, #1E1B4B 50%, #0F172A 100%) !important;
	color: #FFFFFF !important;
}

.tickets-hero .csk-breadcrumbs a {
	color: #94A3B8;
}

.tickets-hero .breadcrumb-current {
	color: #F8FAFC;
}

.tickets-hero .page-hero-title {
	color: #FFFFFF !important;
}

.tickets-hero .page-hero-sub {
	color: #CBD5E1 !important;
	font-size: 14.5px;
	max-width: 750px;
	line-height: 1.6;
	margin: 8px 0 0 0;
}

.tickets-alert-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #DCFCE7;
	border: 1px solid #BBF7D0;
	color: #15803D;
	font-size: 11.5px;
	font-weight: 600;
	padding: 4px 12px;
	border-radius: 9999px;
	margin-block-start: 12px;
}

.section-heading-clean {
	font-size: 24px;
	font-weight: 600;
	color: #0F172A;
	margin: 0 0 6px 0;
}

.section-sub-clean {
	font-size: 13.5px;
	color: #64748B;
	margin: 0;
}

.platform-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 24px;
}

.csk-card-border {
	border-top: 4px solid #D97706;
}

.rcb-card-border {
	border-top: 4px solid #DC2626;
}

.platform-title {
	font-size: 18px;
	font-weight: 600;
	color: #0F172A;
	margin: 8px 0 4px 0;
}

.platform-meta {
	font-size: 12px;
	color: #64748B;
	margin: 0;
}

.official-partner-box {
	background: #F8FAFC;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	padding: 12px 14px;
	margin: 16px 0;
}

.partner-label {
	display: block;
	font-size: 11px;
	color: #64748B;
	text-transform: uppercase;
	font-weight: 600;
}

.partner-name {
	display: block;
	font-size: 14px;
	color: #0F172A;
	margin-block-start: 2px;
}

.platform-perks {
	list-style: none;
	padding: 0;
	margin: 0 0 20px 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.platform-perks li {
	font-size: 12.5px;
	color: #334155;
}

.btn-block {
	display: block;
	text-align: center;
	width: 100%;
}

.verified-text {
	display: block;
	text-align: center;
	font-size: 11px;
	color: #16A34A;
	font-weight: 600;
	margin-block-start: 8px;
}

/* Queue Tips */
.queue-tips-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

@media (max-width: 800px) {
	.queue-tips-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.queue-tips-grid {
		grid-template-columns: 1fr;
	}
}

.tip-card {
	background: #F8FAFC;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	padding: 18px 16px;
}

.tip-number {
	font-size: 26px;
	font-weight: 600;
	color: #CBD5E1;
	line-height: 1;
}

.tip-title {
	font-size: 14px;
	font-weight: 600;
	color: #0F172A;
	margin: 8px 0 6px 0;
}

.tip-desc {
	font-size: 12px;
	color: #64748B;
	margin: 0;
	line-height: 1.5;
}

/* Fraud Warning */
.fraud-warning-card {
	background: #FFFBEB;
	border: 2px solid #F59E0B;
	border-radius: var(--radius-md);
	padding: 24px;
}

.warning-badge {
	font-size: 11px;
	font-weight: 600;
	color: #B45309;
	letter-spacing: 1px;
	margin-block-end: 8px;
}

.warning-title {
	font-size: 18px;
	font-weight: 600;
	color: #78350F;
	margin: 0 0 10px 0;
}

.warning-p {
	font-size: 13.5px;
	color: #92400E;
	line-height: 1.6;
	margin: 0 0 14px 0;
}

.warning-points {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.warning-points li {
	font-size: 13px;
	color: #78350F;
}

/* Ticket Drop Form */
.ticket-alert-section {
	background: linear-gradient(135deg, #1E1B4B 0%, #0F172A 100%);
	color: #FFFFFF;
	padding: 32px 24px;
}

.alert-form-title {
	font-size: 22px;
	font-weight: 600;
	color: #FFFFFF;
	margin: 0 0 6px 0;
}

.alert-form-sub {
	font-size: 13.5px;
	color: #CBD5E1;
	margin: 0 0 20px 0;
}

.form-inputs-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.form-inputs-row input,
.form-inputs-row select {
	padding: 10px 14px;
	border-radius: 6px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	font-size: 13px;
	background: #FFFFFF;
	font-family: inherit;
	flex: 1;
	min-width: 200px;
}

.form-footnote {
	font-size: 11px;
	color: #94A3B8;
	margin: 8px 0 0 0;
}

/* 5. GALLERY PAGE STYLES */
.gallery-filters {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.gal-tab {
	padding: 6px 14px;
	background: #FFFFFF;
	border: 1px solid var(--border-color);
	border-radius: 9999px;
	font-size: 12.5px;
	font-weight: 600;
	color: #475569;
	cursor: pointer;
	transition: all 0.2s ease;
	font-family: inherit;
}

.gal-tab:hover,
.gal-tab.active {
	background: #0F172A;
	color: #FFFFFF;
	border-color: #0F172A;
}

.gallery-cards-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-block-start: 24px;
}

@media (max-width: 860px) {
	.gallery-cards-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 540px) {
	.gallery-cards-grid {
		grid-template-columns: 1fr;
	}
}

.gallery-item-card {
	background: #FFFFFF;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gallery-item-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.gal-img-wrap {
	position: relative;
	width: 100%;
	height: 180px;
	background: #1E293B;
	overflow: hidden;
}

.gal-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.gallery-item-card:hover .gal-img-wrap img {
	transform: scale(1.04);
}

.gal-tag {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 10px;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: 4px;
	text-transform: uppercase;
}

.tag-gold { background: #F59E0B; color: #FFFFFF; }
.tag-yellow { background: #EAB308; color: #000000; }
.tag-red { background: #DC2626; color: #FFFFFF; }
.tag-purple { background: #7C3AED; color: #FFFFFF; }

.gal-card-body {
	padding: 16px;
}

.gal-date {
	font-size: 11px;
	color: #64748B;
	font-weight: 600;
	margin-block-end: 6px;
}

.gal-title {
	font-size: 15px;
	font-weight: 600;
	color: #0F172A;
	line-height: 1.35;
	margin: 0 0 8px 0;
}

.gal-desc {
	font-size: 12px;
	color: #475569;
	line-height: 1.55;
	margin: 0;
}

/* ==========================================================================
   BLOG & SINGLE ARTICLE TEMPLATES (Wisden / The Athletic Quality)
   ========================================================================== */

/* 1. SINGLE POST PAGE STYLES */
.article-main-wrapper {
	padding-block: 10px 60px;
}

.article-layout-container {
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
}

.article-layout-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 350px;
	gap: 32px;
	align-items: start;
	margin-bottom: 48px;
}

.article-main-column {
	min-width: 0;
}

.csk-editorial-article {
	background: #FFFFFF;
	border-radius: 16px;
	border: 1px solid rgba(226, 232, 240, 0.9);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
	padding: 36px 40px;
	margin-bottom: 0;
}

.article-meta-top {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.article-badge-category {
	background: #FEF3C7;
	color: #D97706;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	padding: 4px 10px;
	border-radius: 6px;
}

.article-read-time {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	font-weight: 500;
	color: #64748B;
}

.article-main-title {
	font-size: 38px;
	line-height: 1.25;
	font-weight: 600;
	color: #0F172A;
	margin: 0 0 14px 0;
	letter-spacing: -0.6px;
}

.article-deck-subhead {
	font-size: 18px;
	line-height: 1.55;
	color: #475569;
	font-weight: 500;
	margin: 0 0 24px 0;
}

.article-byline-strip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	padding-block: 16px;
	border-block: 1px solid #E2E8F0;
	margin-bottom: 28px;
}

.author-profile-cluster {
	display: flex;
	align-items: center;
	gap: 12px;
}

.author-avatar-img {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #E2E8F0;
}

.author-profile-info {
	display: flex;
	flex-direction: column;
}

.author-name-text {
	font-size: 14.5px;
	font-weight: 600;
	color: #0F172A;
}

.author-role-text {
	font-size: 12px;
	font-weight: 500;
	color: #64748B;
}

.article-share-buttons {
	display: flex;
	align-items: center;
	gap: 8px;
}

.share-label {
	font-size: 12.5px;
	font-weight: 600;
	color: #64748B;
	margin-right: 4px;
}

.btn-share-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: #F1F5F9;
	color: #475569;
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.2s ease;
}

.btn-share-icon:hover {
	background: #0F172A;
	color: #FFFFFF;
	transform: translateY(-2px);
}

.twitter-btn:hover { background: #000000; color: #FFFFFF; }
.fb-btn:hover { background: #1877F2; color: #FFFFFF; }
.wa-btn:hover { background: #25D366; color: #FFFFFF; }

/* Lead Media */
.article-lead-media {
	margin-bottom: 32px;
	border-radius: 14px;
	overflow: hidden;
}

.article-featured-img {
	width: 100%;
	max-height: 440px;
	object-fit: cover;
	display: block;
}

.article-media-caption {
	padding: 10px 14px;
	font-size: 12.5px;
	font-weight: 500;
	color: #64748B;
	background: #F8FAFC;
	border-bottom: 1px solid #E2E8F0;
}

/* Article Reading Body */
.article-reading-body {
	font-size: 17.5px;
	line-height: 1.8;
	color: #334155;
}

.article-lead-p {
	font-size: 19.5px;
	line-height: 1.65;
	color: #0F172A;
	font-weight: 500;
	margin-bottom: 24px;
}

.article-reading-body h2 {
	font-size: 26px;
	line-height: 1.35;
	font-weight: 600;
	color: #0F172A;
	margin: 36px 0 16px 0;
	letter-spacing: -0.3px;
}

.article-reading-body p {
	margin-bottom: 20px;
}

/* Takeaways Box */
.article-takeaways-callout {
	background: #FFFBEB;
	border: 1px solid #FDE68A;
	border-left: 4px solid #D97706;
	border-radius: 12px;
	padding: 22px 26px;
	margin: 32px 0;
}

.takeaways-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}

.takeaways-icon {
	font-size: 18px;
}

.takeaways-title {
	font-size: 17px;
	font-weight: 600;
	color: #92400E;
	margin: 0;
}

.takeaways-list {
	margin: 0 0 0 20px;
	padding: 0;
	color: #78350F;
	font-size: 15.5px;
	line-height: 1.65;
}

.takeaways-list li {
	margin-bottom: 8px;
}

/* Tactical Data Table */
.tactical-data-table {
	width: 100%;
	border-collapse: collapse;
	margin: 28px 0;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	border: 1px solid #E2E8F0;
}

.tactical-data-table th {
	background: #0F172A;
	color: #FFFFFF;
	font-size: 12.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 12px 16px;
	text-align: left;
}

.tactical-data-table td {
	padding: 12px 16px;
	font-size: 14.5px;
	color: #334155;
	border-bottom: 1px solid #F1F5F9;
}

.tactical-data-table tbody tr:nth-child(even) {
	background: #F8FAFC;
}

.tactical-data-table tbody tr:hover {
	background: #F1F5F9;
}

/* Pull Quote */
.editorial-blockquote {
	border-left: 4px solid #DC2626;
	background: #FEF2F2;
	border-radius: 0 12px 12px 0;
	padding: 20px 26px;
	margin: 32px 0;
}

.editorial-blockquote p {
	font-size: 19px;
	font-style: italic;
	line-height: 1.6;
	color: #991B1B;
	margin: 0 0 8px 0;
}

.editorial-blockquote cite {
	font-size: 13.5px;
	font-weight: 600;
	color: #7F1D1D;
	display: block;
	font-style: normal;
}

/* Author Bio Card */
.article-author-bio-card {
	display: flex;
	gap: 20px;
	align-items: center;
	background: #F8FAFC;
	border: 1px solid #E2E8F0;
	border-radius: 14px;
	padding: 24px;
	margin: 40px 0 28px 0;
}

.author-bio-avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	border: 2px solid #CBD5E1;
}

.author-bio-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
	flex-wrap: wrap;
}

.author-bio-name {
	font-size: 18px;
	font-weight: 600;
	color: #0F172A;
	margin: 0;
}

.author-badge {
	background: #E2E8F0;
	color: #475569;
	font-size: 11px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 4px;
	text-transform: uppercase;
}

.author-bio-desc {
	font-size: 14px;
	line-height: 1.6;
	color: #475569;
	margin: 0 0 10px 0;
}

.author-bio-meta a {
	font-size: 13px;
	font-weight: 600;
	color: #2563EB;
	text-decoration: none;
}

/* Prev / Next Post Nav */
.article-prev-next-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 36px;
	padding-top: 24px;
	border-top: 1px solid #E2E8F0;
}

.nav-direction-box {
	display: flex;
	flex-direction: column;
	background: #FAFBFD;
	border: 1px solid #E2E8F0;
	border-radius: 10px;
	padding: 16px 20px;
	text-decoration: none;
	transition: all 0.2s ease;
}

.nav-direction-box:hover {
	background: #FFFFFF;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	border-color: #CBD5E1;
}

.nav-kicker {
	font-size: 11.5px;
	font-weight: 600;
	color: #64748B;
	text-transform: uppercase;
	margin-bottom: 4px;
}

.nav-article-title {
	font-size: 14.5px;
	font-weight: 600;
	color: #0F172A;
	line-height: 1.4;
	text-decoration: none;
}

.nav-article-title:hover {
	color: #2563EB;
}

/* Related Articles Section */
.related-articles-section {
	margin-top: 40px;
}

.related-header {
	margin-bottom: 24px;
}

.related-kicker {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	color: #D97706;
	letter-spacing: 0.6px;
	display: block;
	margin-bottom: 4px;
}

.related-title {
	font-size: 24px;
	font-weight: 600;
	color: #0F172A;
	margin: 0;
}

.related-grid-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.related-card {
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 12px;
	overflow: hidden;
	transition: all 0.2s ease;
}

.related-card:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	transform: translateY(-3px);
}

.related-img-wrap {
	position: relative;
	height: 160px;
	overflow: hidden;
	background: #0F172A;
}

.related-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.related-card:hover .related-img-wrap img {
	transform: scale(1.05);
}

.related-tag {
	position: absolute;
	top: 10px;
	left: 10px;
	background: rgba(15, 23, 42, 0.85);
	color: #FFFFFF;
	font-size: 10px;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: 4px;
	letter-spacing: 0.5px;
}

.related-card-body {
	padding: 16px;
}

.related-date {
	font-size: 11px;
	font-weight: 600;
	color: #64748B;
	display: block;
	margin-bottom: 6px;
}

.related-card-title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	margin: 0 0 8px 0;
}

.related-card-title a {
	color: #0F172A;
	text-decoration: none;
}

.related-card-title a:hover {
	color: #2563EB;
}

.related-card-excerpt {
	font-size: 12.5px;
	color: #475569;
	line-height: 1.55;
	margin: 0;
}

/* Text-Only Related Blog Cards (No Featured Images) */
.related-card-textonly {
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-top: 3px solid #D97706;
	border-radius: 12px;
	overflow: hidden;
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.related-card-textonly:hover {
	border-color: #CBD5E1;
	border-top-color: #2563EB;
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
	transform: translateY(-3px);
}

.related-card-textonly .related-card-body {
	padding: 22px 20px 20px 20px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	height: 100%;
}

.related-card-meta-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.related-tag-pill {
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #B45309;
	background: #FEF3C7;
	padding: 3px 9px;
	border-radius: 6px;
}

.related-read-mins {
	font-size: 11.5px;
	color: #64748B;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-weight: 500;
}

.related-card-textonly .related-card-title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.45;
	margin: 0 0 10px 0;
}

.related-card-textonly .related-card-title a {
	color: #0F172A;
	text-decoration: none;
	transition: color 0.15s ease;
}

.related-card-textonly .related-card-title a:hover {
	color: #2563EB;
}

.related-card-textonly .related-card-excerpt {
	font-size: 13px;
	color: #475569;
	line-height: 1.6;
	margin: 0 0 18px 0;
	flex-grow: 1;
}

.related-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 14px;
	border-top: 1px solid #F1F5F9;
	margin-top: auto;
}

.related-card-footer .related-date {
	font-size: 11.5px;
	font-weight: 500;
	color: #94A3B8;
	margin-bottom: 0;
}

.related-card-link {
	font-size: 12.5px;
	font-weight: 600;
	color: #D97706;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	transition: gap 0.2s ease, color 0.15s ease;
}

.related-card-link:hover {
	color: #2563EB;
	gap: 7px;
}

/* ==========================================================================
   SINGLE POST EDITORIAL SIDEBAR STYLES
   ========================================================================== */
.article-sidebar-column {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.sidebar-sticky-wrapper {
	position: sticky;
	top: 80px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sidebar-widget {
	background: #FFFFFF;
	border: 1px solid rgba(226, 232, 240, 0.9);
	border-radius: 14px;
	padding: 20px 22px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
	transition: box-shadow 0.2s ease;
}

.sidebar-widget:hover {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

.sidebar-widget-title-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 12px;
	margin-bottom: 14px;
	border-bottom: 1px solid #F1F5F9;
}

.sidebar-widget-title {
	font-size: 15px;
	font-weight: 600;
	color: #0F172A;
	margin: 0;
	letter-spacing: -0.2px;
}

.sidebar-badge-light {
	font-size: 11px;
	font-weight: 600;
	background: #F1F5F9;
	color: #475569;
	padding: 3px 8px;
	border-radius: 9999px;
}

/* WIDGET 1: Live Scoreboard Card */
.widget-live-match {
	background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 100%);
	border-top: 3px solid #DC2626;
}

.widget-live-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}

.sidebar-live-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: #FEE2E2;
	color: #DC2626;
	font-size: 10.5px;
	font-weight: 600;
	padding: 3px 9px;
	border-radius: 9999px;
	letter-spacing: 0.5px;
}

.sidebar-pulse-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #DC2626;
	animation: pulseLiveDot 1.5s infinite;
}

.sidebar-comp-tag {
	font-size: 11.5px;
	font-weight: 500;
	color: #64748B;
}

.sidebar-match-teams {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-bottom: 12px;
	border-bottom: 1px solid #E2E8F0;
}

.sidebar-team-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.sidebar-team-brand {
	display: flex;
	align-items: center;
	gap: 10px;
}

.sidebar-crest-mini {
	width: 28px;
	height: 28px;
	object-fit: contain;
	border-radius: 50%;
	background: #FFFFFF;
	padding: 2px;
	border: 1px solid #E2E8F0;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.sidebar-team-code {
	font-size: 15px;
	font-weight: 600;
	color: #0F172A;
}

.sidebar-team-score {
	display: flex;
	align-items: baseline;
	gap: 6px;
}

.sidebar-score-runs {
	font-size: 16px;
	font-weight: 600;
	color: #0F172A;
}

.sidebar-score-runs.target-val {
	font-size: 14px;
	color: #475569;
}

.sidebar-score-overs {
	font-size: 11.5px;
	color: #64748B;
}

.sidebar-equation-badge {
	background: #EFF6FF;
	border: 1px solid #BFDBFE;
	border-radius: 8px;
	padding: 7px 12px;
	text-align: center;
	font-size: 12.5px;
	font-weight: 600;
	color: #1D4ED8;
	margin: 12px 0 14px;
}

.sidebar-widget-cta-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: #0F172A;
	color: #FFFFFF;
	text-decoration: none;
	font-size: 12.5px;
	font-weight: 600;
	padding: 9px 16px;
	border-radius: 8px;
	transition: background 0.2s ease, transform 0.2s ease;
}

.sidebar-widget-cta-btn:hover {
	background: #1E293B;
	color: #FFFFFF;
	transform: translateY(-1px);
}

/* WIDGET 2: H2H Snapshot */
.widget-h2h-snapshot {
	border-top: 3px solid #D97706;
}

.sidebar-h2h-tally {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	text-align: center;
}

.tally-box {
	background: #F8FAFC;
	border: 1px solid #E2E8F0;
	border-radius: 8px;
	padding: 8px 10px;
}

.tally-box.csk-box {
	background: #FEF9C3;
	border-color: #FDE047;
}

.tally-box.rcb-box {
	background: #FEE2E2;
	border-color: #FECACA;
}

.tally-num {
	display: block;
	font-size: 20px;
	font-weight: 600;
	color: #0F172A;
	line-height: 1.1;
}

.tally-lbl {
	display: block;
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.4px;
	color: #475569;
	margin-top: 2px;
}

.tally-vs-badge {
	font-size: 11px;
	font-weight: 600;
	color: #94A3B8;
}

.sidebar-h2h-bar {
	display: flex;
	height: 8px;
	border-radius: 9999px;
	overflow: hidden;
	margin-bottom: 12px;
	background: #E2E8F0;
}

.sidebar-h2h-bar .csk-bar {
	background: #D97706;
}

.sidebar-h2h-bar .rcb-bar {
	background: #DC2626;
}

.sidebar-h2h-bar .nr-bar {
	background: #94A3B8;
}

.sidebar-h2h-venue-fact {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	color: #334155;
	background: #F8FAFC;
	padding: 7px 10px;
	border-radius: 6px;
	margin-bottom: 12px;
}

.sidebar-text-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 600;
	color: #D97706;
	text-decoration: none;
	transition: color 0.15s ease, gap 0.15s ease;
}

.sidebar-text-link:hover {
	color: #B45309;
	gap: 7px;
}

/* WIDGET 3: Trending Derby Guides */
.sidebar-stories-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sidebar-story-card {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	text-decoration: none;
	padding-bottom: 12px;
	border-bottom: 1px solid #F1F5F9;
	transition: transform 0.15s ease;
}

.sidebar-story-card:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

.sidebar-story-card:hover .story-headline {
	color: #D97706;
}

.story-rank {
	font-size: 16px;
	font-weight: 600;
	color: #CBD5E1;
	line-height: 1;
	flex-shrink: 0;
	padding-top: 2px;
}

.story-meta-col {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.story-tag {
	font-size: 9.5px;
	font-weight: 600;
	color: #64748B;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.story-headline {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: #0F172A;
	margin: 0;
	transition: color 0.15s ease;
}

.story-time {
	font-size: 11px;
	color: #94A3B8;
}

/* WIDGET 4: Chepauk Venue Intel */
.sidebar-intel-table {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.intel-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: 6px;
	border-bottom: 1px dashed #E2E8F0;
	font-size: 12px;
}

.intel-row:last-child {
	border-bottom: none;
}

.intel-label {
	color: #64748B;
	font-weight: 500;
}

.intel-value {
	color: #0F172A;
	font-weight: 600;
	text-align: right;
}

/* WIDGET 5: VIP Match Dispatch Newsletter */
.widget-newsletter-box {
	background: #0A0F1D;
	color: #FFFFFF;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.newsletter-icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	margin-bottom: 10px;
}

.newsletter-emoji {
	font-size: 18px;
}

.newsletter-card-title {
	font-size: 15px;
	font-weight: 600;
	color: #FFFFFF;
	margin: 0 0 6px 0;
}

.newsletter-card-desc {
	font-size: 12px;
	line-height: 1.5;
	color: #94A3B8;
	margin: 0 0 14px 0;
}

.sidebar-newsletter-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 8px;
}

.sidebar-news-input {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 6px;
	padding: 8px 12px;
	font-size: 12px;
	color: #FFFFFF;
	font-family: inherit;
	outline: none;
	transition: border-color 0.2s ease;
}

.sidebar-news-input:focus {
	border-color: #D97706;
}

.sidebar-news-input::placeholder {
	color: #64748B;
}

.sidebar-news-submit {
	background: #D97706;
	color: #FFFFFF;
	border: none;
	border-radius: 6px;
	padding: 9px 14px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	transition: background 0.2s ease, transform 0.15s ease;
}

.sidebar-news-submit:hover {
	background: #B45309;
	transform: translateY(-1px);
}

.newsletter-privacy-hint {
	font-size: 10.5px;
	color: #64748B;
	display: block;
	line-height: 1.35;
}

/* RESPONSIVE LAYOUT */
@media (max-width: 992px) {
	.article-layout-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.sidebar-sticky-wrapper {
		position: static;
	}
}

@media (max-width: 640px) {
	.csk-editorial-article {
		padding: 24px 18px;
	}
	.article-main-title {
		font-size: 26px;
	}
	.article-deck-subhead {
		font-size: 15px;
	}
	.sidebar-widget {
		padding: 16px 16px;
	}
}

/* 2. BLOG LISTING PAGE STYLES */
.blog-header-hero {
	background: #FAFBFD;
	border-bottom: 1px solid #E2E8F0;
	padding-block: 36px 28px;
	margin-bottom: 32px;
}

.blog-hero-content {
	max-width: 800px;
	margin-bottom: 24px;
}

.blog-hero-kicker-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.blog-kicker-badge {
	background: #D97706;
	color: #FFFFFF;
	font-size: 11px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 9999px;
	letter-spacing: 0.5px;
}

.blog-kicker-text {
	font-size: 12px;
	font-weight: 600;
	color: #64748B;
	letter-spacing: 0.8px;
}

.blog-hero-heading {
	font-size: 36px;
	font-weight: 600;
	color: #0F172A;
	margin: 0 0 10px 0;
	letter-spacing: -0.6px;
}

.blog-hero-desc {
	font-size: 16px;
	line-height: 1.6;
	color: #475569;
	margin: 0;
}

.blog-categories-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 4px;
}

.blog-cat-pill {
	background: #FFFFFF;
	border: 1px solid #CBD5E1;
	color: #475569;
	font-size: 13px;
	font-weight: 500;
	padding: 6px 14px;
	border-radius: 20px;
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.2s ease;
}

.blog-cat-pill:hover,
.blog-cat-pill.active {
	background: #0F172A;
	color: #FFFFFF;
	border-color: #0F172A;
}

/* Blog Grid Container - Full Width (No Sidebar) */
.blog-container-grid {
	display: block;
	inline-size: 100%;
}

.blog-primary-col {
	inline-size: 100%;
}

/* Featured Lead Card */
.featured-lead-article {
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
	margin-bottom: 36px;
	transition: all 0.2s ease;
}

.featured-lead-article:hover {
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.lead-media-wrap {
	position: relative;
	height: 320px;
	overflow: hidden;
	background: #0F172A;
}

.lead-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.featured-lead-article:hover .lead-img {
	transform: scale(1.03);
}

.lead-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	background: #DC2626;
	color: #FFFFFF;
	font-size: 11px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 6px;
	letter-spacing: 0.6px;
}

.lead-body-content {
	padding: 24px 28px;
}

.lead-meta-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
}

.lead-category-tag {
	background: #FEF3C7;
	color: #D97706;
	font-size: 11px;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: 4px;
	text-transform: uppercase;
}

.lead-read-time {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12.5px;
	font-weight: 500;
	color: #64748B;
}

.lead-article-title {
	font-size: 26px;
	font-weight: 600;
	line-height: 1.35;
	margin: 0 0 10px 0;
}

.lead-article-title a {
	color: #0F172A;
	text-decoration: none;
}

.lead-article-title a:hover {
	color: #2563EB;
}

.lead-article-excerpt {
	font-size: 15px;
	line-height: 1.6;
	color: #475569;
	margin: 0 0 18px 0;
}

.lead-footer-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 16px;
	border-top: 1px solid #F1F5F9;
	flex-wrap: wrap;
	gap: 12px;
}

.lead-author-info {
	display: flex;
	align-items: center;
	gap: 10px;
}

.author-thumb {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
}

.author-name {
	font-size: 13px;
	font-weight: 600;
	color: #334155;
}

.lead-read-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	font-weight: 600;
	color: #2563EB;
	text-decoration: none;
}

.lead-read-link:hover {
	color: #1D4ED8;
}

/* Feed Section Header */
.feed-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}

.feed-title {
	font-size: 22px;
	font-weight: 600;
	color: #0F172A;
	margin: 0;
}

.feed-count {
	font-size: 13px;
	font-weight: 600;
	color: #64748B;
}

/* Blog Cards Grid */
.blog-cards-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.blog-card-item {
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: all 0.2s ease;
}

.blog-card-item:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.blog-card-thumb-wrap {
	position: relative;
	height: 180px;
	overflow: hidden;
	background: #0F172A;
}

.blog-card-thumb-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.blog-card-item:hover .blog-card-thumb-wrap img {
	transform: scale(1.04);
}

.card-badge-pill {
	position: absolute;
	top: 10px;
	left: 10px;
	background: rgba(15, 23, 42, 0.85);
	color: #FFFFFF;
	font-size: 10px;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: 4px;
	letter-spacing: 0.5px;
}

.blog-card-body {
	padding: 18px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.card-meta-line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 12px;
	font-weight: 500;
	color: #64748B;
	margin-bottom: 8px;
}

.blog-card-title {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	margin: 0 0 10px 0;
}

.blog-card-title a {
	color: #0F172A;
	text-decoration: none;
}

.blog-card-title a:hover {
	color: #2563EB;
}

.blog-card-desc {
	font-size: 13.5px;
	line-height: 1.55;
	color: #475569;
	margin: 0 0 16px 0;
	flex-grow: 1;
}

.blog-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 12px;
	border-top: 1px solid #F1F5F9;
}

.card-byline {
	font-size: 12px;
	font-weight: 600;
	color: #64748B;
}

.card-arrow-link {
	font-size: 16px;
	font-weight: 600;
	color: #2563EB;
	text-decoration: none;
}

/* Sidebar Widgets */
.blog-sidebar-col {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.sidebar-widget-card {
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 14px;
	padding: 22px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.widget-card-title {
	font-size: 17px;
	font-weight: 600;
	color: #0F172A;
	margin: 0 0 14px 0;
	border-bottom: 1px solid #F1F5F9;
	padding-bottom: 8px;
}

/* Match Quick Widget */
.match-quick-widget {
	background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
	color: #FFFFFF;
	border: none;
}

.widget-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}

.widget-live-pill {
	background: #DC2626;
	color: #FFFFFF;
	font-size: 10.5px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 4px;
}

.widget-sub {
	font-size: 11.5px;
	color: #94A3B8;
}

.widget-teams-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.w-team {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.w-team img {
	width: 36px;
	height: 36px;
	object-fit: contain;
	margin-bottom: 4px;
}

.w-code {
	font-size: 13px;
	font-weight: 600;
	color: #FFFFFF;
}

.w-score {
	font-size: 15px;
	font-weight: 600;
	color: #F8FAFC;
}

.w-vs {
	font-size: 12px;
	font-weight: 600;
	color: #94A3B8;
}

.widget-equation {
	text-align: center;
	font-size: 13px;
	font-weight: 500;
	color: #F1F5F9;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 6px;
	padding: 6px 10px;
	margin-bottom: 14px;
}

.btn-widget-cta {
	display: block;
	text-align: center;
	background: #D97706;
	color: #FFFFFF;
	font-size: 13px;
	font-weight: 600;
	padding: 8px 14px;
	border-radius: 8px;
	text-decoration: none;
	transition: background 0.2s ease;
}

.btn-widget-cta:hover {
	background: #B45309;
}

/* Rivalry Stats Widget */
.stat-tally-bar {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 12px;
}

.tally-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 10px;
	border-radius: 8px;
}

.csk-tally { background: #FEF3C7; color: #92400E; }
.rcb-tally { background: #FEE2E2; color: #991B1B; }

.tally-count {
	font-size: 24px;
	font-weight: 600;
	line-height: 1;
}

.tally-name {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
}

.stat-summary-text {
	font-size: 13px;
	color: #64748B;
	line-height: 1.5;
	margin: 0 0 10px 0;
}

.widget-text-link {
	font-size: 13px;
	font-weight: 600;
	color: #2563EB;
	text-decoration: none;
}

.widget-text-link:hover {
	text-decoration: underline;
}

/* Trending Topics Widget */
.trending-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.trending-list li a {
	display: flex;
	flex-direction: column;
	text-decoration: none;
}

.trend-tag {
	font-size: 14px;
	font-weight: 600;
	color: #0F172A;
}

.trend-tag:hover {
	color: #2563EB;
}

.trend-meta {
	font-size: 12px;
	color: #64748B;
}

/* Newsletter Widget */
.newsletter-widget {
	background: #FAFBFD;
	text-align: center;
}

.nl-icon {
	font-size: 28px;
	margin-bottom: 6px;
}

.nl-title {
	font-size: 17px;
	font-weight: 600;
	color: #0F172A;
	margin: 0 0 6px 0;
}

.nl-desc {
	font-size: 13px;
	color: #64748B;
	line-height: 1.5;
	margin: 0 0 14px 0;
}

.nl-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.nl-input {
	padding: 9px 12px;
	border: 1px solid #CBD5E1;
	border-radius: 8px;
	font-size: 13px;
	outline: none;
}

.nl-input:focus {
	border-color: #2563EB;
}

.nl-submit-btn {
	background: #0F172A;
	color: #FFFFFF;
	border: none;
	padding: 9px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s ease;
}

.nl-submit-btn:hover {
	background: #2563EB;
}

/* Responsive Rules for Blog and Article */
@media (max-width: 860px) {
	.blog-container-grid {
		grid-template-columns: 1fr;
	}
	.blog-cards-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.related-grid-row {
		grid-template-columns: 1fr;
	}
	.article-main-title {
		font-size: 30px;
	}
	.csk-editorial-article {
		padding: 24px 20px;
	}
}

@media (max-width: 640px) {
	.blog-cards-grid {
		grid-template-columns: 1fr;
	}
	.article-prev-next-nav {
		grid-template-columns: 1fr;
	}
	.article-byline-strip {
		flex-direction: column;
		align-items: flex-start;
	}
	.article-main-title {
		font-size: 26px;
	}
	.article-deck-subhead {
		font-size: 16px;
	}
	.tactical-data-table {
		display: block;
		overflow-x: auto;
	}
}

/* Hero badge when no match is live: upcoming fixture or last result */
.stadium-live-badge.is-upcoming,
.stadium-live-badge.is-starting {
	background: #D97706;
}
.stadium-live-badge.is-result {
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.28);
}

/* Hero result state: winner tag, dimmed loser, scorecard button */
.stadium-team-col.is-loser .stadium-runs-score,
.stadium-team-col.is-loser .stadium-team-name {
	opacity: 0.62;
}
.rv-won-chip {
	display: inline-block;
	margin-top: 6px;
	padding: 2px 10px;
	border-radius: 9999px;
	background: #F59E0B;
	color: #111827;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}
.rv-hero-link {
	display: inline-flex;
	align-items: center;
	margin-top: 10px;
	padding: 5px 14px;
	border-radius: 9999px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	color: #FFFFFF;
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.rv-hero-link:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: #FFFFFF;
	color: #FFFFFF;
}
.stadium-equation-text {
	max-width: 440px;
	line-height: 1.35;
}

/* Text logo: only the full-width homepage shows it (see home-split.css) */
.csk-logo-text { display: none; }