/**
 * Homepage redesign layer (2026-09-16) — front page only, loaded after
 * cricket-home-hero.css and cricket-predictions.css. Covers:
 *   - hero: two-column "prediction desk" variant + stats row
 *   - "Latest predictions & analysis" featured grid
 *   - "Pick your competition" series row
 *   - community section as a single CTA band
 * Uses the site's established tokens (navy #050e1c/#0a1830, blue #1e5087 /
 * #3a86e0, gold #ffb020, ice #eaf4ff, Outfit + PT Sans + JetBrains Mono).
 */

:root {
	--psp-h-navy: #0a1830;
	--psp-h-ice: #eaf4ff;
	--psp-h-muted: rgba( 234, 244, 255, 0.62 );
	--psp-h-gold: #ffb020;
	--psp-h-blue: #3a86e0;
	--psp-h-border: rgba( 255, 255, 255, 0.09 );
	--psp-h-glass: rgba( 255, 255, 255, 0.035 );
	--psp-h-radius: 16px;
	--psp-h-mono: 'JetBrains Mono', Consolas, monospace;
	--psp-h-display: 'Outfit', 'PT Sans', sans-serif;
	--psp-h-ease: cubic-bezier( 0.22, 1, 0.36, 1 );
}

.site-content-row > .cricket-latest,
.site-content-row > .cricket-series,
.site-content-row > .cricket-quicklinks {
	width: 100%;
	flex: 0 0 100%;
}

/* ---------------------------------------------------------------------
 * Plugin card reset — the plugin's own brand-neutral stylesheet gives the
 * OUTER .proace-prediction a light background, border and padding, which
 * the theme only ever overrode for margin. The result was a white frame
 * around every dark card (homepage feed, Predictions page, hero desk).
 * The theme styles .proace-prediction__surface; the wrapper stays bare.
 * (Mirrored in cricket-predictions.css for the non-homepage surfaces.)
 * ------------------------------------------------------------------- */

.proace-prediction {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

/* ---------------------------------------------------------------------
 * Visited-link guard — an inline stylesheet from the parent theme's
 * customizer output sets `a:visited { color: #0063d6 }` (specificity 0,1,1),
 * which beats single-class component rules and turned already-visited
 * buttons and cards blue. Restate the component colours for :visited.
 * ------------------------------------------------------------------- */

.cricket-hero__btn--primary:visited,
.cricket-hero__btn--primary:hover {
	color: #1a1200;
}

.cricket-hero__btn--secondary:visited {
	color: #ffffff;
}

.cricket-story__title a:visited {
	color: var( --psp-h-ice );
}

.cricket-story__cat:visited {
	color: #8fb8ee;
}

.cricket-home-head__link:visited {
	color: var( --psp-h-gold );
}

.cricket-series__item:visited,
.cricket-desk__tile--link:visited {
	color: inherit;
}

/* ---------------------------------------------------------------------
 * Hero — prediction desk variant
 * ------------------------------------------------------------------- */

.cricket-hero__grid--desk {
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	gap: 56px;
}

.cricket-hero__title {
	font-family: var( --psp-h-display );
}

.cricket-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 30px;
	margin: 30px 0 0;
}

.cricket-hero__stat {
	display: flex;
	flex-direction: column-reverse;
	gap: 2px;
	margin: 0;
}

.cricket-hero__stat dd {
	margin: 0;
	font-family: var( --psp-h-display );
	font-size: 26px;
	font-weight: 800;
	line-height: 1.1;
	color: var( --psp-h-ice );
}

.cricket-hero__stat dt {
	font-family: var( --psp-h-mono );
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var( --psp-h-muted );
}

.cricket-desk {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-align: left;
	animation: psp-rise 0.8s var( --psp-h-ease ) 0.12s both;
}

.cricket-desk__glow {
	position: absolute;
	inset: 10% 8%;
	border-radius: 24px;
	background: linear-gradient( 120deg, #ff6b6b, #ffb020, #4fd1c5, #6c8cff, #c77dff );
	filter: blur( 46px );
	opacity: 0.3;
	pointer-events: none;
}

.cricket-desk__card {
	position: relative;
}

.cricket-desk__card .proace-prediction {
	margin: 0;
}

.cricket-desk__card .proace-prediction__surface {
	background: linear-gradient( 180deg, rgba( 13, 32, 56, 0.97 ), rgba( 10, 24, 48, 0.97 ) );
	box-shadow: 0 28px 60px -24px rgba( 0, 0, 0, 0.7 ), inset 0 1px 0 rgba( 255, 255, 255, 0.06 );
}

.cricket-desk__card .proace-prediction__question {
	font-size: 20px;
}

.cricket-desk__tiles {
	position: relative;
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 10px;
}

.cricket-desk__tile {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	padding: 12px 14px;
	border-radius: 14px;
	background: rgba( 10, 24, 48, 0.72 );
	border: 1px solid var( --psp-h-border );
	-webkit-backdrop-filter: blur( 10px );
	backdrop-filter: blur( 10px );
	text-decoration: none;
	transition: border-color 0.2s ease, transform 0.2s var( --psp-h-ease );
}

.cricket-desk__tile--link:hover,
.cricket-desk__tile--link:focus-visible {
	border-color: rgba( 255, 176, 32, 0.45 );
	transform: translateY( -2px );
}

.cricket-desk__tile-label {
	font-family: var( --psp-h-mono );
	font-size: 9.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var( --psp-h-muted );
}

.cricket-desk__tile-value {
	font-family: var( --psp-h-display );
	font-size: 15px;
	font-weight: 700;
	color: var( --psp-h-ice );
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cricket-desk__tile-value--win {
	color: #4fd18b;
}

.cricket-desk__tile--link .cricket-desk__tile-value {
	color: var( --psp-h-gold );
}

/* ---------------------------------------------------------------------
 * Hero rotator — prediction → leaderboard → latest post (15s each).
 * All panels share one grid cell, so the stage is always as tall as the
 * tallest slide and nothing below the hero jumps when slides change.
 * ------------------------------------------------------------------- */

.cricket-hero-slider {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	text-align: left;
	animation: psp-rise 0.8s var( --psp-h-ease ) 0.12s both;
}

.cricket-hero-slider__glow {
	position: absolute;
	inset: 12% 8%;
	border-radius: 24px;
	background: linear-gradient( 120deg, #ff6b6b, #ffb020, #4fd1c5, #6c8cff, #c77dff );
	filter: blur( 46px );
	opacity: 0.3;
	pointer-events: none;
}

/* The desk keeps its own glow + entrance only when used standalone. */
.cricket-hero-slider .cricket-desk {
	animation: none;
	height: 100%;
}

.cricket-hero-slider .cricket-desk__glow {
	display: none;
}

.cricket-hero-slider__bar {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
}

.cricket-hero-slider__tabs {
	flex: 1;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax( 0, 1fr );
	gap: 6px;
	padding: 5px;
	border-radius: 14px;
	background: rgba( 10, 24, 48, 0.72 );
	border: 1px solid var( --psp-h-border );
	-webkit-backdrop-filter: blur( 10px );
	backdrop-filter: blur( 10px );
}

.cricket-hero-slider__tab {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	gap: 7px;
	min-height: 44px;
	padding: 8px 12px 9px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var( --psp-h-muted );
	font-family: var( --psp-h-mono );
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease;
}

.cricket-hero-slider__tab:hover {
	color: var( --psp-h-ice );
	background: rgba( 255, 255, 255, 0.04 );
}

.cricket-hero-slider__tab.is-active {
	color: var( --psp-h-ice );
	background: rgba( 255, 255, 255, 0.07 );
}

.cricket-hero-slider__tab:focus-visible,
.cricket-hero-slider__toggle:focus-visible {
	outline: 2px solid var( --psp-h-gold );
	outline-offset: 2px;
}

.cricket-hero-slider__tab-label {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
}

.cricket-hero-slider__progress {
	position: relative;
	display: block;
	height: 3px;
	border-radius: 3px;
	overflow: hidden;
	background: rgba( 255, 255, 255, 0.1 );
}

.cricket-hero-slider__progress > span {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient( 90deg, #ffb020, #ff6b6b );
	transform-origin: 0 50%;
	transform: scaleX( 0 );
}

.cricket-hero-slider.is-ready .cricket-hero-slider__tab.is-active .cricket-hero-slider__progress > span {
	animation: psp-slide-progress var( --psp-slide-duration, 15s ) linear forwards;
}

.cricket-hero-slider.is-paused .cricket-hero-slider__tab.is-active .cricket-hero-slider__progress > span {
	animation-play-state: paused;
}

@keyframes psp-slide-progress {
	from {
		transform: scaleX( 0 );
	}
	to {
		transform: scaleX( 1 );
	}
}

.cricket-hero-slider__toggle {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	/* The parent theme pads every <button> 10px 20px, which crushed the icon. */
	padding: 0;
	border-radius: 12px;
	border: 1px solid var( --psp-h-border );
	background: rgba( 10, 24, 48, 0.72 );
	color: var( --psp-h-ice );
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.cricket-hero-slider__toggle:hover {
	border-color: rgba( 255, 176, 32, 0.45 );
	color: var( --psp-h-gold );
}

.cricket-hero-slider__toggle svg {
	flex: none;
	width: 14px;
	height: 14px;
}

.cricket-hero-slider__icon-play,
.cricket-hero-slider__toggle.is-playing .cricket-hero-slider__icon-pause {
	display: block;
}

.cricket-hero-slider__icon-pause,
.cricket-hero-slider__toggle.is-playing .cricket-hero-slider__icon-play {
	display: none;
}

.cricket-hero-slider__stage {
	position: relative;
	display: grid;
	grid-template-areas: "slide";
}

.cricket-hero-slider__panel {
	grid-area: slide;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.cricket-hero-slider__panel > * {
	flex: 1 1 auto;
}

.cricket-hero-slider.is-rotating .cricket-hero-slider__panel {
	opacity: 0;
	visibility: hidden;
	transform: translateX( 22px );
	transition: opacity 0.55s ease, transform 0.7s var( --psp-h-ease ), visibility 0s linear 0.7s;
}

.cricket-hero-slider.is-rotating .cricket-hero-slider__panel.is-leaving {
	transform: translateX( -22px );
}

.cricket-hero-slider.is-rotating .cricket-hero-slider__panel.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.55s ease 0.12s, transform 0.7s var( --psp-h-ease ) 0.12s, visibility 0s;
}

/* Prediction slide: the card grows to fill the shared stage height (set by
   the tallest slide) so there's no empty gap above the tiles. */
.cricket-hero-slider__panel--predict .cricket-desk__card,
.cricket-hero-slider__panel--predict .cricket-desk__card .proace-prediction {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

.cricket-hero-slider__panel--predict .cricket-desk__card .proace-prediction__surface {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Shared surface for the leaderboard + latest-post slides. */
.cricket-hero-board,
.cricket-hero-post {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var( --psp-h-radius );
	background: linear-gradient( 180deg, rgba( 13, 32, 56, 0.97 ), rgba( 10, 24, 48, 0.97 ) );
	border: 1px solid var( --psp-h-border );
	box-shadow: 0 28px 60px -24px rgba( 0, 0, 0, 0.7 ), inset 0 1px 0 rgba( 255, 255, 255, 0.06 );
}

/* --- Leaderboard slide ------------------------------------------------ */

.cricket-hero-board {
	padding: 20px 22px 18px;
	gap: 14px;
}

.cricket-hero-board__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.cricket-hero-board__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var( --psp-h-mono );
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var( --psp-h-gold );
}

.cricket-hero-board__period {
	padding: 4px 10px;
	border-radius: 7px;
	font-family: var( --psp-h-mono );
	font-size: 9.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var( --psp-h-muted );
	border: 1px solid var( --psp-h-border );
	background: rgba( 255, 255, 255, 0.04 );
}

.cricket-hero-board__list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	flex: 1 1 auto;
	justify-content: center;
}

.cricket-hero-board__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 12px;
	border-radius: 12px;
	background: rgba( 255, 255, 255, 0.03 );
	border: 1px solid transparent;
}

.cricket-hero-board__row--1 {
	background: linear-gradient( 90deg, rgba( 255, 176, 32, 0.14 ), rgba( 255, 176, 32, 0.02 ) );
	border-color: rgba( 255, 176, 32, 0.3 );
}

.cricket-hero-board__rank {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 7px;
	font-family: var( --psp-h-mono );
	font-size: 11px;
	font-weight: 700;
	color: var( --psp-h-muted );
	background: rgba( 255, 255, 255, 0.05 );
}

.cricket-hero-board__row--1 .cricket-hero-board__rank {
	color: #1a1200;
	background: #ffb020;
}

.cricket-hero-board__row--2 .cricket-hero-board__rank {
	color: #0a1830;
	background: #c7d2e0;
}

.cricket-hero-board__row--3 .cricket-hero-board__rank {
	color: #1a1200;
	background: #e8a06b;
}

.cricket-hero-board__avatar {
	flex: none;
	font-size: 12px;
}

.cricket-hero-board__who {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
}

.cricket-hero-board__name {
	font-family: var( --psp-h-display );
	font-size: 15px;
	font-weight: 700;
	color: var( --psp-h-ice );
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cricket-hero-board__stat {
	font-family: var( --psp-h-mono );
	font-size: 10px;
	color: var( --psp-h-muted );
	white-space: nowrap;
}

.cricket-hero-board__points {
	flex: none;
	display: inline-flex;
	align-items: baseline;
	gap: 3px;
	font-family: var( --psp-h-display );
	font-size: 20px;
	font-weight: 800;
	color: var( --psp-h-gold );
}

.cricket-hero-board__points small {
	font-family: var( --psp-h-mono );
	font-size: 9.5px;
	font-weight: 700;
	text-transform: uppercase;
	color: var( --psp-h-muted );
}

.cricket-hero-board__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 12px;
	border-top: 1px solid var( --psp-h-border );
}

.cricket-hero-board__count {
	font-family: var( --psp-h-mono );
	font-size: 10.5px;
	color: var( --psp-h-muted );
}

.cricket-hero-board__link,
.cricket-hero-board__link:visited {
	font-family: var( --psp-h-mono );
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var( --psp-h-gold );
	text-decoration: none;
}

.cricket-hero-board__link:hover,
.cricket-hero-board__link:focus-visible {
	color: #ffe066;
}

/* --- Latest-post slide ------------------------------------------------ */

.cricket-hero-post__media {
	position: relative;
	display: block;
	flex: 1 1 auto;
	min-height: 200px;
	overflow: hidden;
	background: linear-gradient( 135deg, #1c3f74 0%, #122c56 45%, #0a1830 100% );
}

.cricket-hero-post__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s var( --psp-h-ease );
}

.cricket-hero-post:hover .cricket-hero-post__media img {
	transform: scale( 1.04 );
}

.cricket-hero-post__flag {
	position: absolute;
	left: 14px;
	top: 14px;
	padding: 4px 11px;
	border-radius: 999px;
	background: linear-gradient( 90deg, #ffb020, #ff6b6b );
	color: #1a1200;
	font-family: var( --psp-h-mono );
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.cricket-hero-post__body {
	flex: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px 22px 20px;
}

.cricket-hero-post__cat {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var( --psp-h-mono );
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #8fb8ee;
}

.cricket-hero-post__cat::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var( --dot, var( --psp-h-gold ) );
}

.cricket-hero-post__title {
	margin: 0;
	font-family: var( --psp-h-display );
	font-size: clamp( 19px, 1.9vw, 22px );
	font-weight: 700;
	line-height: 1.25;
	text-wrap: balance;
}

.cricket-hero-post__title a,
.cricket-hero-post__title a:visited {
	color: var( --psp-h-ice );
	text-decoration: none;
}

.cricket-hero-post__title a:hover,
.cricket-hero-post__title a:focus-visible {
	color: var( --psp-h-gold );
}

.cricket-hero-post__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 14px;
	margin-top: 4px;
}

.cricket-hero-post__meta {
	font-size: 12.5px;
	color: var( --psp-h-muted );
}

.cricket-hero-post__cta,
.cricket-hero-post__cta:visited {
	font-family: var( --psp-h-mono );
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var( --psp-h-gold );
	text-decoration: none;
}

.cricket-hero-post__cta:hover,
.cricket-hero-post__cta:focus-visible {
	color: #ffe066;
}

@media ( max-width: 640px ) {
	.cricket-hero-slider__tab {
		padding-inline: 6px;
		font-size: 9.5px;
	}

	/* On phones the stacked tiles made the prediction slide the tallest,
	   leaving big gaps in the other two; their info (top predictor, last
	   result, open count) is already covered by the leaderboard slide and
	   the sections below. */
	.cricket-hero-slider .cricket-desk__tiles {
		display: none;
	}

	.cricket-hero-board {
		padding: 16px 14px 14px;
	}

	.cricket-hero-board__row {
		gap: 10px;
		padding: 8px 10px;
	}

	.cricket-hero-post__media {
		min-height: 170px;
	}

	.cricket-hero-post__body {
		padding: 16px 16px 18px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.cricket-hero-slider {
		animation: none;
	}

	.cricket-hero-slider.is-rotating .cricket-hero-slider__panel,
	.cricket-hero-slider.is-rotating .cricket-hero-slider__panel.is-active {
		transform: none;
		transition: opacity 0.2s ease, visibility 0s;
	}

	.cricket-hero-post__media img {
		transition: none;
	}
}

/* ---------------------------------------------------------------------
 * Shared homepage section heading
 * ------------------------------------------------------------------- */

.cricket-home-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 28px;
}

.cricket-home-head--compact {
	margin-bottom: 18px;
}

.cricket-home-head__eyebrow {
	font-family: var( --psp-h-mono );
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --psp-h-gold );
}

.cricket-home-head__title {
	margin: 6px 0 0;
	font-family: var( --psp-h-display );
	font-size: clamp( 24px, 3vw, 32px );
	font-weight: 800;
	line-height: 1.1;
	color: var( --psp-h-ice );
	text-wrap: balance;
}

.cricket-home-head--compact .cricket-home-head__title {
	font-size: clamp( 20px, 2.4vw, 24px );
}

.cricket-home-head__sub {
	margin: 8px 0 0;
	font-size: 15px;
	color: var( --psp-h-muted );
}

.cricket-home-head__link {
	flex: none;
	font-family: var( --psp-h-mono );
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var( --psp-h-gold );
	text-decoration: none;
	white-space: nowrap;
}

.cricket-home-head__link:hover,
.cricket-home-head__link:focus-visible {
	color: #ffe066;
}

/* ---------------------------------------------------------------------
 * Latest predictions & analysis
 * ------------------------------------------------------------------- */

.cricket-latest {
	position: relative;
	padding-block: 72px 0;
}

.cricket-latest__grid {
	display: grid;
	grid-template-columns: 1.35fr 1fr 1fr;
	grid-auto-rows: auto;
	gap: 20px;
}

.cricket-story {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border-radius: var( --psp-h-radius );
	background: var( --psp-h-glass );
	border: 1px solid var( --psp-h-border );
	box-shadow: 0 18px 38px -18px rgba( 0, 0, 0, 0.55 );
	transition: transform 0.3s var( --psp-h-ease ), border-color 0.3s ease, box-shadow 0.3s ease;
	animation: psp-rise 0.7s var( --psp-h-ease ) both;
	animation-delay: calc( var( --i, 0 ) * 70ms );
}

.cricket-story:hover,
.cricket-story:focus-within {
	transform: translateY( -4px );
	border-color: rgba( 255, 176, 32, 0.35 );
	box-shadow: 0 26px 48px -20px rgba( 0, 0, 0, 0.65 );
}

.cricket-story--featured {
	grid-row: span 2;
}

.cricket-story__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: linear-gradient( 135deg, #1c3f74 0%, #122c56 45%, #0a1830 100% );
}

.cricket-story--featured .cricket-story__media {
	aspect-ratio: auto;
	flex: 1 1 auto;
	min-height: 260px;
}

.cricket-story__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var( --psp-h-ease );
}

.cricket-story:hover .cricket-story__media img {
	transform: scale( 1.04 );
}

.cricket-story__placeholder {
	position: absolute;
	inset: 0;
	background: radial-gradient( ellipse 60% 70% at 70% 20%, rgba( 255, 255, 255, 0.12 ), transparent 60% );
}

.cricket-story__flag {
	position: absolute;
	left: 14px;
	top: 14px;
	padding: 4px 11px;
	border-radius: 999px;
	background: linear-gradient( 90deg, #ffb020, #ff6b6b );
	color: #1a1200;
	font-family: var( --psp-h-mono );
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	box-shadow: 0 6px 16px rgba( 255, 140, 60, 0.35 );
}

.cricket-story__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px 18px 18px;
}

.cricket-story--featured .cricket-story__body {
	flex: none;
	padding: 20px 22px 22px;
	gap: 10px;
}

.cricket-story__cat {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	align-self: flex-start;
	font-family: var( --psp-h-mono );
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #8fb8ee;
	text-decoration: none;
}

.cricket-story__cat::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var( --dot, var( --psp-h-gold ) );
}

.cricket-story__cat:hover,
.cricket-story__cat:focus-visible {
	color: var( --psp-h-ice );
}

.cricket-story__title {
	margin: 0;
	font-family: var( --psp-h-display );
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	text-wrap: pretty;
}

.cricket-story--featured .cricket-story__title {
	font-size: clamp( 20px, 2.2vw, 25px );
	line-height: 1.2;
}

.cricket-story__title a {
	color: var( --psp-h-ice );
	text-decoration: none;
	background-image: linear-gradient( var( --psp-h-gold ), var( --psp-h-gold ) );
	background-size: 0% 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 0.35s var( --psp-h-ease );
}

.cricket-story:hover .cricket-story__title a,
.cricket-story__title a:focus-visible {
	background-size: 100% 2px;
}

.cricket-story__excerpt {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: rgba( 234, 244, 255, 0.72 );
}

.cricket-story__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 12.5px;
	color: var( --psp-h-muted );
}

/* ---------------------------------------------------------------------
 * Pick your competition
 * ------------------------------------------------------------------- */

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

.cricket-series__row {
	display: grid;
	grid-template-columns: repeat( 6, minmax( 0, 1fr ) );
	gap: 12px;
}

.cricket-series__item {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	min-height: 64px;
	padding: 12px 14px;
	border-radius: 14px;
	background: var( --psp-h-glass );
	border: 1px solid var( --psp-h-border );
	text-decoration: none;
	transition: transform 0.25s var( --psp-h-ease ), border-color 0.25s ease, background 0.25s ease;
}

.cricket-series__item:hover,
.cricket-series__item:focus-visible {
	transform: translateY( -3px );
	border-color: color-mix( in srgb, var( --tone ) 55%, transparent );
	background: color-mix( in srgb, var( --tone ) 9%, rgba( 255, 255, 255, 0.03 ) );
}

.cricket-series__icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	color: var( --tone );
	background: color-mix( in srgb, var( --tone ) 16%, transparent );
}

.cricket-series__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.cricket-series__name {
	font-family: var( --psp-h-display );
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.2;
	color: var( --psp-h-ice );
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cricket-series__count {
	font-family: var( --psp-h-mono );
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var( --psp-h-muted );
}

/* ---------------------------------------------------------------------
 * Community — one CTA band (content authored in the page itself)
 * ------------------------------------------------------------------- */

.cricket-community {
	padding-block: 72px 80px;
}

.cricket-community__band {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax( 0, 1.1fr ) minmax( 0, 1fr );
	grid-template-areas:
		"title   cards"
		"signoff cards"
		"quote   cards"
		"actions cards";
	grid-template-rows: auto auto auto 1fr;
	column-gap: 44px;
	padding: 44px 48px;
	border-radius: 22px;
	background:
		radial-gradient( circle at 100% 0%, rgba( 255, 176, 32, 0.28 ), transparent 42% ),
		linear-gradient( 135deg, #1c3f74 0%, #122c56 45%, #0a1830 100% );
	border: 1px solid rgba( 255, 255, 255, 0.12 );
	box-shadow: 0 30px 60px -30px rgba( 0, 0, 0, 0.7 );
}

.cricket-community__band > .cricket-community__title {
	grid-area: title;
	margin: 0 0 14px;
	text-align: left;
	font-family: var( --psp-h-display );
	font-size: clamp( 26px, 3vw, 34px );
	line-height: 1.12;
}

.cricket-community__band > .cricket-community__cards {
	grid-area: cards;
	grid-template-columns: 1fr;
	gap: 12px;
	margin: 0;
	align-self: center;
}

.cricket-community__band .cricket-community__card {
	display: grid;
	grid-template-columns: 44px 1fr;
	column-gap: 14px;
	align-items: start;
	padding: 16px 18px;
	text-align: left;
	background: rgba( 10, 24, 48, 0.55 );
	border-color: var( --psp-h-border );
}

.cricket-community__band .cricket-community__icon {
	grid-row: span 2;
	width: 44px;
	height: 44px;
	margin: 0;
	font-size: 18px;
	border-radius: 12px;
}

.cricket-community__band .cricket-community__card h4 {
	margin: 2px 0 4px;
	font-family: var( --psp-h-display );
	font-size: 15.5px;
}

.cricket-community__band .cricket-community__card p {
	font-size: 13px;
}

.cricket-community__band > .cricket-community__signoff {
	grid-area: signoff;
	margin: 0 0 18px;
	text-align: left;
}

.cricket-community__band > .cricket-community__quote {
	grid-area: quote;
	margin: 0 0 26px;
	padding: 0 0 0 18px;
	max-width: 46ch;
	text-align: left;
	font-size: 18px;
	border-left: 3px solid var( --psp-h-gold );
}

.cricket-community__band > .cricket-community__quote::before,
.cricket-community__band > .cricket-community__quote::after {
	content: none;
}

.cricket-community__actions {
	grid-area: actions;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-self: start;
}

/* ---------------------------------------------------------------------
 * Motion
 * ------------------------------------------------------------------- */

@keyframes psp-rise {
	from {
		opacity: 0;
		transform: translateY( 16px );
	}
	to {
		opacity: 1;
		transform: none;
	}
}

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

@media ( max-width: 1199px ) {
	.cricket-series__row {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 991px ) {
	.cricket-latest__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.cricket-story--featured {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	.cricket-story--featured .cricket-story__media {
		aspect-ratio: 16 / 8;
		min-height: 0;
		flex: none;
	}

	.cricket-community__band {
		grid-template-columns: 1fr;
		grid-template-areas:
			"title"
			"signoff"
			"quote"
			"cards"
			"actions";
		grid-template-rows: auto;
		padding: 34px 30px;
	}

	.cricket-community__band > .cricket-community__cards {
		margin-bottom: 24px;
	}
}

@media ( max-width: 900px ) {
	/* Must restate the single column here: the desktop two-column rule above
	   has the same specificity as cricket-home-hero.css's mobile rule and
	   loads later, so it would otherwise keep phones at two columns. */
	.cricket-hero__grid--desk {
		grid-template-columns: minmax( 0, 1fr );
		gap: 32px;
	}

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

	.cricket-desk {
		width: 100%;
		max-width: 560px;
		margin-inline: auto;
	}
}

@media ( max-width: 640px ) {
	.cricket-home-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.cricket-latest {
		padding-top: 48px;
	}

	.cricket-latest__grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	/* Non-featured stories become compact horizontal rows on phones. */
	.cricket-story:not( .cricket-story--featured ) {
		flex-direction: row;
		align-items: stretch;
	}

	.cricket-story:not( .cricket-story--featured ) .cricket-story__media {
		flex: 0 0 104px;
		aspect-ratio: auto;
		min-height: 84px;
	}

	.cricket-story:not( .cricket-story--featured ) .cricket-story__body {
		padding: 10px 14px;
		gap: 4px;
		justify-content: center;
	}

	.cricket-story:not( .cricket-story--featured ) .cricket-story__title {
		font-size: 14.5px;
	}

	.cricket-desk__tiles {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.cricket-desk__tile--link {
		grid-column: 1 / -1;
	}

	.cricket-desk__card .proace-prediction__question {
		font-size: 17px;
	}

	/* Series row scrolls sideways instead of squeezing six tiles. */
	.cricket-series {
		padding-top: 40px;
	}

	.cricket-series__row {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: 6px;
		margin-inline: -15px;
		padding-inline: 15px;
		scrollbar-width: none;
	}

	.cricket-series__row::-webkit-scrollbar {
		display: none;
	}

	.cricket-series__item {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}

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

	.cricket-community__band {
		padding: 26px 20px;
		border-radius: 18px;
	}

	.cricket-community__actions .cricket-hero__btn {
		flex: 1 1 100%;
		justify-content: center;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.cricket-desk,
	.cricket-story {
		animation: none;
	}

	.cricket-story,
	.cricket-story__media img,
	.cricket-series__item,
	.cricket-desk__tile {
		transition: none;
	}

	.cricket-story:hover,
	.cricket-series__item:hover,
	.cricket-desk__tile--link:hover {
		transform: none;
	}

	.cricket-story:hover .cricket-story__media img {
		transform: none;
	}
}

/* ---------------------------------------------------------------------
 * Quick links strip (2026-09-17) — busiest categories right under the
 * hero. One row; scrolls sideways (with edge fades) when it overflows.
 * ------------------------------------------------------------------- */

.cricket-quicklinks {
	position: relative;
	z-index: 2;
	padding-block: 18px 0;
}

.cricket-quicklinks__bar {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	padding: 8px 8px 8px 14px;
	border-radius: 999px;
	background: var( --psp-h-glass );
	border: 1px solid var( --psp-h-border );
	-webkit-backdrop-filter: blur( 8px );
	backdrop-filter: blur( 8px );
}

.cricket-quicklinks__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	font-family: var( --psp-h-mono );
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --psp-h-gold );
}

.cricket-quicklinks__list {
	display: flex;
	gap: 8px;
	flex: 1;
	min-width: 0;
	margin: 0;
	padding: 2px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient( 90deg, transparent 0, #000 14px, #000 calc( 100% - 28px ), transparent 100% );
	mask-image: linear-gradient( 90deg, transparent 0, #000 14px, #000 calc( 100% - 28px ), transparent 100% );
}

.cricket-quicklinks__list::-webkit-scrollbar {
	display: none;
}

.cricket-quicklinks__list li {
	flex: none;
	margin: 0;
	scroll-snap-align: start;
}

.cricket-quicklinks__pill,
.cricket-quicklinks__pill:visited {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 36px;
	padding: 0 14px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	color: var( --psp-h-ice ) !important;
	text-decoration: none !important;
	background: rgba( 255, 255, 255, 0.05 );
	border: 1px solid var( --psp-h-border );
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.25s var( --psp-h-ease );
}

.cricket-quicklinks__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var( --tone, var( --psp-h-gold ) );
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --tone, #ffb020 ) 25%, transparent );
}

.cricket-quicklinks__pill:hover,
.cricket-quicklinks__pill:focus-visible {
	background: color-mix( in srgb, var( --tone, #ffb020 ) 18%, transparent );
	border-color: color-mix( in srgb, var( --tone, #ffb020 ) 55%, transparent );
	transform: translateY( -1px );
}

.cricket-quicklinks__pill:focus-visible {
	outline: 2px solid var( --psp-h-gold );
	outline-offset: 2px;
}

.cricket-quicklinks__pill--all,
.cricket-quicklinks__pill--all:visited {
	color: #1a1200 !important;
	background: var( --psp-h-gold );
	border-color: var( --psp-h-gold );
}

.cricket-quicklinks__pill--all:hover,
.cricket-quicklinks__pill--all:focus-visible {
	color: #1a1200 !important;
	background: #ffc54d;
	border-color: #ffc54d;
}

/* Mouse-sized screens can't swipe the row, so every pill wraps into view. */
@media ( min-width: 992px ) {
	.cricket-quicklinks__bar {
		align-items: flex-start;
		border-radius: 22px;
	}

	.cricket-quicklinks__label {
		min-height: 40px;
	}

	.cricket-quicklinks__list {
		flex-wrap: wrap;
		overflow: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}
}

@media ( max-width: 640px ) {
	.cricket-quicklinks__bar {
		border-radius: 16px;
		padding: 8px;
	}

	.cricket-quicklinks__label {
		display: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.cricket-quicklinks__pill {
		transition: none;
	}

	.cricket-quicklinks__pill:hover {
		transform: none;
	}
}