/*
 * Jersey Bulls FC — NextFixtureHero
 *
 * PSG hero-scale next-fixture band: big crest v crest, competition, date,
 * kick-off, venue, live countdown, ticket CTA — on a dark gradient. Off-season
 * "to be announced" variant when there's no scheduled fixture.
 *
 * Markup: template-parts/next-fixture-hero.php · tokens: css/tokens.css
 */

.bulls-next-fixture {
	background: var(--grad-ink);
	color: var(--c-white);
	border-top: 3px solid var(--c-bulls-red);
}

.bulls-next-fixture__inner {
	max-width: var(--content-full);
	margin: 0 auto;
	padding: clamp(var(--space-10), 6vw, var(--space-16)) var(--gutter);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-6);
	text-align: center;
}

.bulls-next-fixture__eyebrow {
	margin: 0;
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3);
	font-family: var(--ff-mono);
	font-size: var(--fs-50);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	color: var(--c-bulls-red-300);
}
.bulls-next-fixture__comp {
	padding-left: var(--space-3);
	border-left: 1px solid var(--c-white-18);
	color: var(--c-white-50);
}

/* ----- Teams ----- */
.bulls-next-fixture__teams {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(var(--space-6), 6vw, var(--space-12));
	width: 100%;
}
.bulls-next-fixture__club {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	flex: 1 1 0;
	min-width: 0;
	max-width: 320px;
}
.bulls-next-fixture .bulls-club__crest {
	width: clamp(72px, 12vw, 132px);
	height: clamp(72px, 12vw, 132px);
}
.bulls-next-fixture .bulls-club__crest--placeholder {
	font-size: var(--fs-500);
}
.bulls-next-fixture__club-name {
	font-family: var(--ff-display);
	font-size: clamp(1.1rem, 2.4vw, 1.9rem);
	text-transform: uppercase;
	letter-spacing: var(--ls-snug);
	line-height: 1;
}
.bulls-next-fixture__vs {
	font-family: var(--ff-display);
	font-size: clamp(2rem, 5vw, 4rem);
	color: var(--c-bulls-red);
	line-height: 1;
	flex: 0 0 auto;
}

/* Result mode — big scoreline (winner in red), Full-time tag. */
.bulls-next-fixture__score {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	flex: 0 0 auto;
	font-family: var(--ff-display);
	font-size: clamp(3rem, 8vw, 5.5rem);
	line-height: 1;
}
.bulls-next-fixture__num { color: var(--c-white-50); }
.bulls-next-fixture__num.is-winner { color: var(--c-bulls-red); }
.bulls-next-fixture__dash { color: var(--c-white-50); }
.bulls-next-fixture__ft {
	width: 100%;
	font-family: var(--ff-mono);
	font-size: var(--fs-50);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	color: var(--c-bulls-red-300);
}

/* ----- When ----- */
.bulls-next-fixture__when {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	gap: var(--space-2) var(--space-4);
}
.bulls-next-fixture__date {
	font-family: var(--ff-display);
	font-size: clamp(1.5rem, 4vw, 2.75rem);
	text-transform: uppercase;
	letter-spacing: var(--ls-tight);
	color: var(--c-white);
}
.bulls-next-fixture__time {
	font-family: var(--ff-display);
	font-size: clamp(1.5rem, 4vw, 2.75rem);
	color: var(--c-bulls-red);
}
.bulls-next-fixture__venue {
	width: 100%;
	font-family: var(--ff-mono);
	font-size: var(--fs-75);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-white-50);
}

/* ----- Countdown ----- */
.bulls-next-fixture__countdown {
	display: flex;
	gap: var(--space-6);
}
.bulls-countdown__unit {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	min-width: 3.5rem;
}
.bulls-countdown__unit b {
	font-family: var(--ff-display);
	font-size: clamp(2rem, 5vw, 3.25rem);
	line-height: 1;
	font-weight: var(--fw-bold);
	color: var(--c-white);
}
.bulls-countdown__unit i {
	font-family: var(--ff-mono);
	font-style: normal;
	font-size: var(--fs-50);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-bulls-red-300);
}

/* ----- Actions ----- */
.bulls-next-fixture__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--space-5);
	margin-top: var(--space-2);
}
.bulls-next-fixture__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--ff-mono);
	font-size: var(--fs-75);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-white);
	text-decoration: none;
}
.bulls-next-fixture__link span { transition: transform var(--motion-fast) var(--ease-out); }
.bulls-next-fixture__link:hover span,
.bulls-next-fixture__link:focus-visible span { transform: translateX(3px); }

/* ----- Off-season variant ----- */
.bulls-next-fixture__tba {
	margin: 0;
	font-family: var(--ff-display);
	font-size: clamp(2.5rem, 7vw, 5rem);
	text-transform: uppercase;
	letter-spacing: var(--ls-tight);
	line-height: 0.9;
	color: var(--c-white);
}
.bulls-next-fixture__note {
	margin: 0;
	max-width: 36ch;
	font-family: var(--ff-sans);
	font-size: var(--fs-200);
	color: var(--c-white-50);
}

@media (prefers-reduced-motion: reduce) {
	.bulls-next-fixture__link span { transition: none; }
}