/**
 * Homepage hero (page-templates/cricket-home.php). Only enqueued on
 * is_front_page(). Sits directly over the existing .cricket-storm background
 * layer (cricket-storm.css) — no background of its own needed.
 */

/* header.php opens (and footer.php closes) a Bootstrap ".row" — a flex
 * container — around everything the homepage template prints. Every
 * top-level homepage <section> therefore renders as a flex item of that
 * row, not a normal block. Wide sections happened to be individually wide
 * enough to force a wrap onto their own line, which looked like ordinary
 * stacking — until a narrower section (the Prediction Desk card) was added
 * and sat side-by-side with the next one instead of stacking under it.
 * Force every homepage section to take the full row regardless of its own
 * content width, immune to that flex-wrap coincidence. */
.site-content-row > .cricket-hero,
.site-content-row > .cricket-community,
.site-content-row > .cricket-feed-section,
.site-content-row > .cricket-leaderboard-section {
	width: 100%;
	flex: 0 0 100%;
}

.cricket-hero {
	position: relative;
	padding-block: 52px 0;
	overflow: hidden;
}

.cricket-hero__grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 40px;
	align-items: center;
}

/* ---------------------------------------------------------------------
 * Copy column
 * ------------------------------------------------------------------- */

.cricket-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 13px;
	border-radius: 999px;
	background: rgba( 255, 255, 255, 0.08 );
	border: 1px solid rgba( 255, 255, 255, 0.18 );
	color: #ffe066;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 18px;
}

.cricket-hero__eyebrow-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #3ddc84;
	box-shadow: 0 0 6px rgba( 61, 220, 132, 0.8 );
	animation: cricket-dot-pulse 1.6s ease-in-out infinite;
}

.cricket-hero__title {
	margin: 0 0 16px;
	font-size: clamp( 32px, 4.6vw, 52px );
	line-height: 1.08;
	font-weight: 800;
	color: #f5f8ff;
	text-shadow: 0 2px 10px rgba( 0, 0, 0, 0.4 );
	text-wrap: balance;
}

.cricket-hero__title-accent {
	display: inline-block;
	background-image: linear-gradient( 90deg, #ff6b6b, #ffb020, #ffe066, #6ee7a8, #4fd1c5, #6c8cff, #c77dff, #ff6b6b );
	background-size: 300% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	animation: cricket-nav-rainbow 7s linear infinite;
}

.cricket-hero__sub {
	margin: 0 0 28px;
	max-width: 52ch;
	font-size: 16px;
	line-height: 1.6;
	color: rgba( 255, 255, 255, 0.75 );
}

.cricket-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.cricket-hero__btn {
	display: inline-flex;
	align-items: center;
	padding: 13px 26px;
	border-radius: 999px;
	font-size: 14.5px;
	font-weight: 700;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.cricket-hero__btn--primary {
	background: linear-gradient( 90deg, #ffb020, #ff6b6b );
	color: #1a1200;
	box-shadow: 0 6px 20px rgba( 255, 140, 60, 0.4 );
}

.cricket-hero__btn--primary:hover,
.cricket-hero__btn--primary:focus-visible {
	transform: translateY( -2px );
	box-shadow: 0 10px 26px rgba( 255, 140, 60, 0.55 );
	color: #1a1200;
}

.cricket-hero__btn--secondary {
	background: rgba( 255, 255, 255, 0.08 );
	border: 1px solid rgba( 255, 255, 255, 0.28 );
	color: #ffffff;
}

.cricket-hero__btn--secondary:hover,
.cricket-hero__btn--secondary:focus-visible {
	background: rgba( 255, 255, 255, 0.16 );
	transform: translateY( -2px );
	color: #ffffff;
}

/* ---------------------------------------------------------------------
 * Framed featured image
 * ------------------------------------------------------------------- */

.cricket-hero__frame {
	position: relative;
	max-width: 420px;
	margin-inline: auto;
}

.cricket-hero__frame-glow {
	position: absolute;
	inset: 6%;
	border-radius: 22px;
	background: linear-gradient( 120deg, #ff6b6b, #ffb020, #4fd1c5, #6c8cff, #c77dff );
	filter: blur( 34px );
	opacity: 0.55;
	transform: rotate( -4deg );
	z-index: 0;
}

.cricket-hero__frame-card {
	position: relative;
	z-index: 1;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 18px;
	border: 3px solid rgba( 255, 255, 255, 0.25 );
	box-shadow: 0 18px 44px rgba( 0, 0, 0, 0.45 );
	transform: rotate( 2deg );
	transition: transform 0.35s ease;
}

.cricket-hero__frame:hover .cricket-hero__frame-card {
	transform: rotate( 0deg ) scale( 1.015 );
}

.cricket-hero__frame-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cricket-hero__frame-badge {
	position: absolute;
	left: 14px;
	bottom: 14px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba( 8, 20, 40, 0.65 );
	backdrop-filter: blur( 4px );
	-webkit-backdrop-filter: blur( 4px );
	border: 1px solid rgba( 255, 255, 255, 0.25 );
	color: #ffffff;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.cricket-hero__frame-badge-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #ff4d4d;
	box-shadow: 0 0 6px rgba( 255, 77, 77, 0.8 );
	animation: cricket-dot-pulse 1.6s ease-in-out infinite;
}

/* ---------------------------------------------------------------------
 * Message ticker (the page's own existing copy, re-presented)
 * ------------------------------------------------------------------- */

.cricket-hero__ticker {
	margin-top: 44px;
	background: linear-gradient( 90deg, rgba( 7, 20, 39, 0.7 ), rgba( 30, 80, 135, 0.55 ) 50%, rgba( 7, 20, 39, 0.7 ) );
	border-top: 1px solid rgba( 255, 255, 255, 0.12 );
	border-bottom: 1px solid rgba( 255, 255, 255, 0.12 );
}

.cricket-hero__ticker-inner {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 0;
}

.cricket-hero__ticker-badge {
	flex: none;
	padding: 4px 11px;
	border-radius: 999px;
	background: rgba( 255, 255, 255, 0.1 );
	border: 1px solid rgba( 255, 255, 255, 0.2 );
	color: rgba( 255, 255, 255, 0.85 );
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.cricket-hero__ticker-viewport {
	flex: 1 1 auto;
	overflow: hidden;
	min-width: 0;
}

.cricket-hero__ticker-track {
	display: flex;
	align-items: center;
	width: max-content;
	animation: cricket-ticker-scroll 42s linear infinite;
}

.cricket-hero__ticker-viewport:hover .cricket-hero__ticker-track,
.cricket-hero__ticker-viewport:focus-within .cricket-hero__ticker-track {
	animation-play-state: paused;
}

.cricket-hero__ticker-item {
	color: rgba( 255, 255, 255, 0.85 );
	font-size: 13px;
	white-space: nowrap;
}

.cricket-hero__ticker-sep {
	color: rgba( 255, 255, 255, 0.35 );
	font-size: 6px;
	margin: 0 18px;
}

/* ---------------------------------------------------------------------
 * "Join the contest" section — the rest of the homepage's original copy,
 * authored directly into post_content after the psp:community-section
 * marker (see functions.php), laid out here as cards instead of prose.
 * ------------------------------------------------------------------- */

.cricket-community {
	position: relative;
	padding-block: 56px;
}

.cricket-community__title {
	margin: 0 0 34px;
	text-align: center;
	font-size: clamp( 24px, 3.4vw, 34px );
	font-weight: 800;
	background-image: linear-gradient( 90deg, #ff6b6b, #ffb020, #ffe066, #6ee7a8, #4fd1c5, #6c8cff, #c77dff, #ff6b6b );
	background-size: 300% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	text-shadow: 0 1px 4px rgba( 0, 0, 0, 0.5 );
	animation: cricket-nav-rainbow 7s linear infinite;
}

.cricket-community__cards {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 20px;
	margin: 0 0 34px;
}

.cricket-community__card {
	background: rgba( 255, 255, 255, 0.05 );
	border: 1px solid rgba( 255, 255, 255, 0.14 );
	border-radius: 14px;
	padding: 24px 22px;
	text-align: center;
	backdrop-filter: blur( 3px );
	-webkit-backdrop-filter: blur( 3px );
	transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.cricket-community__card:hover {
	transform: translateY( -4px );
	border-color: rgba( 255, 176, 32, 0.5 );
	background: rgba( 255, 255, 255, 0.08 );
}

.cricket-community__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	margin-bottom: 14px;
	font-size: 20px;
	background: linear-gradient( 135deg, #1e5087, #3a86e0 );
	box-shadow: 0 6px 16px rgba( 30, 80, 135, 0.4 );
}

.cricket-community__card h4 {
	margin: 0 0 8px;
	font-size: 16.5px;
	font-weight: 700;
	color: #ffffff;
}

.cricket-community__card p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: rgba( 255, 255, 255, 0.68 );
}

.cricket-community__signoff {
	text-align: center;
	font-size: 15px;
	color: rgba( 255, 255, 255, 0.85 );
	margin: 0 0 22px;
}

.cricket-community__signoff span {
	color: #ffb020;
	font-weight: 700;
}

.cricket-community__quote {
	position: relative;
	max-width: 58ch;
	margin: 0 auto;
	padding: 6px 44px;
	text-align: center;
	font-family: 'Georgia', serif;
	font-style: italic;
	font-size: 19px;
	line-height: 1.5;
	color: #f5f8ff;
}

.cricket-community__quote::before,
.cricket-community__quote::after {
	position: absolute;
	font-family: Georgia, serif;
	font-size: 48px;
	font-style: normal;
	line-height: 1;
	color: rgba( 255, 176, 32, 0.45 );
}

.cricket-community__quote::before {
	content: "\201C";
	left: 0;
	top: 12px;
}

.cricket-community__quote::after {
	content: "\201D";
	right: 0;
	bottom: -6px;
}

/* ---------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------- */

@media ( max-width: 900px ) {
	.cricket-hero__grid {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.cricket-hero__sub {
		margin-inline: auto;
	}

	.cricket-hero__actions {
		justify-content: center;
	}

	.cricket-hero__frame {
		max-width: 300px;
		margin-top: 12px;
	}

	.cricket-community__cards {
		grid-template-columns: 1fr;
	}
}

@media ( max-width: 480px ) {
	.cricket-hero {
		padding-block: 36px 0;
	}

	.cricket-community {
		padding-block: 40px;
	}

	.cricket-community__quote {
		padding-inline: 34px;
		font-size: 17px;
	}
}

/* ---------------------------------------------------------------------
 * Reduced motion
 * ------------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
	.cricket-hero__title-accent,
	.cricket-hero__ticker-track,
	.cricket-hero__eyebrow-dot,
	.cricket-hero__frame-badge-dot,
	.cricket-community__title {
		animation: none !important;
	}

	.cricket-hero__frame-card {
		transform: none;
	}

	.cricket-hero__ticker-viewport {
		overflow-x: auto;
	}
}