/*
 * Jersey Bulls FC — LastMatches band
 *
 * Juventus homepage pattern: the two most recent results as compact rows (black date
 * tab · competition + KO · stacked teams + red scores · Match centre button) beside a
 * live local-time clock, with a "Fixtures and results" link beneath.
 *
 * Markup: template-parts/last-matches.php · tokens: css/tokens.css
 * Cinematic band — deliberately dark in both light + dark themes.
 */

.bulls-last-matches {
	background: var(--c-ink-900);
	color: var(--c-white);
	font-family: var(--ff-sans);
	overflow: hidden;   /* contain the band — no stray horizontal overflow can widen the page */
}

.bulls-last-matches__inner {
	max-width: var(--content-full);
	margin: 0 auto;
	padding: var(--space-5) var(--gutter) 0;
	display: grid;
	/* Juventus HublotCalendar: last matches | next match | clock */
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) clamp(260px, 22vw, 360px);
	gap: var(--space-6);
	align-items: stretch;
}
@media (min-width: 1024px) {
	.bulls-last-matches__inner { padding-inline: clamp(72px, 7vw, 132px); }
}

/* ----- Section label ----- */
.bulls-last-matches__label {
	margin: 0 0 var(--space-5);
	font-family: var(--ff-display);
	font-size: var(--fs-300);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-bulls-red-400);
}

/* ----- Two result rows, side by side ----- */
.bulls-last-matches__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-6);
}

.bulls-match-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--space-4);
	align-items: start;
}

/* Black date tab — big day over a small month. */
.bulls-match-row__date {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-width: 48px;
	padding: var(--space-2) var(--space-2) var(--space-3);
	background: var(--c-black);
	line-height: 1;
}
.bulls-match-row__day {
	font-family: var(--ff-display);
	font-size: var(--fs-400);
	color: var(--c-white);
}
.bulls-match-row__mon {
	font-family: var(--ff-mono);
	font-size: var(--fs-50);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-white-82);
}

.bulls-match-row__body { min-width: 0; }

.bulls-match-row__meta {
	margin: 0 0 var(--space-2);
	font-family: var(--ff-mono);
	font-size: var(--fs-50);   /* lifted to fs-75 at <=600px (M-3) — see media block below */
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-white-50);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bulls-match-row__teams {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.bulls-match-row__team {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--space-4);
	align-items: baseline;
}
.bulls-match-row__name {
	font-family: var(--ff-display);
	font-size: var(--fs-300);
	font-weight: var(--fw-bold);
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--c-white-50);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* Emphasise the Bulls side (Juventus bolds their own club row). */
.bulls-match-row__team.is-bulls .bulls-match-row__name {
	color: var(--c-white);
}
.bulls-match-row__score {
	font-family: var(--ff-display);
	font-size: var(--fs-300);
	line-height: 1.15;
	font-weight: var(--fw-bold);
	color: var(--c-bulls-red-400);
	text-align: right;
}

/* Match centre button — canonical .bulls-cta-button --outline --sm (css/components/buttons.css). */
.bulls-match-row__cta { margin-top: var(--space-3); }

/* ----- Live clock panel ----- */
.bulls-last-matches__clock {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--space-6);
	background: linear-gradient(160deg, var(--c-ink-700) 0%, var(--c-ink-900) 100%);
}
.bulls-clock { display: flex; flex-direction: column; gap: var(--space-2); }
.bulls-clock__time {
	font-family: var(--ff-display);
	font-size: clamp(var(--fs-600), 3vw, var(--fs-700));   /* fits the narrower 3-panel clock column */
	line-height: 0.95;
	letter-spacing: var(--ls-snug);
	color: var(--c-white);
	font-variant-numeric: tabular-nums;
}
.bulls-clock__date {
	font-family: var(--ff-mono);
	font-size: var(--fs-75);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-white-50);
}

/* ----- Foot: right-aligned "Fixtures and results" with a top hairline ----- */
.bulls-last-matches__foot {
	max-width: var(--content-full);
	margin: 0 auto;
	padding: var(--space-5) var(--gutter) var(--space-6);
	display: flex;
	justify-content: flex-end;
}
@media (min-width: 1024px) {
	.bulls-last-matches__foot { padding-inline: clamp(72px, 7vw, 132px); }
}
.bulls-last-matches__all {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	padding-top: var(--space-3);
	border-top: 1px solid var(--c-white-50);
	font-family: var(--ff-display);
	font-size: var(--fs-75);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--c-white);
	transition: color var(--motion-fast) var(--ease-out);
}
.bulls-last-matches__all-arrow { transition: transform var(--motion-base) var(--ease-out); }
.bulls-last-matches__all:hover,
.bulls-last-matches__all:focus-visible { color: var(--c-bulls-red-300); }
.bulls-last-matches__all:hover .bulls-last-matches__all-arrow,
.bulls-last-matches__all:focus-visible .bulls-last-matches__all-arrow { transform: translateX(4px); }
.bulls-last-matches__all:focus-visible { outline: 2px solid var(--c-focus-ring); outline-offset: 3px; }

/* ============================================================
 * Responsive
 * ============================================================ */

/* Stack the clock under the matches on tablet. */
@media (max-width: 1023px) {
	.bulls-last-matches__inner { grid-template-columns: minmax(0, 1fr); }
	.bulls-last-matches__clock { padding: var(--space-5) var(--space-6); }
	.bulls-clock { flex-direction: row; align-items: baseline; gap: var(--space-4); }
}

/* One result per row on mobile. */
@media (max-width: 600px) {
	.bulls-last-matches__list { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
	.bulls-last-matches__foot { justify-content: flex-start; }
	/* Re-stack the clock and shrink the (unbreakable) time string so it can't force
	   horizontal overflow on narrow screens. */
	.bulls-clock { flex-direction: column; align-items: flex-start; gap: var(--space-1); min-width: 0; }
	.bulls-clock__time { font-size: var(--fs-600); }
	/* Rebuild the row as flexbox on mobile — predictable shrinking (grid 1fr tracks
	   were resolving to the meta's max-content here, forcing the scores off-screen).
	   Flex item + min-width:0 reliably constrains the body to the available width. */
	.bulls-last-matches__main { min-width: 0; }
	.bulls-match-row { display: flex; gap: var(--space-4); align-items: flex-start; }
	/* flex-basis:0 (not auto) so the body is sized from available space, NOT the meta's
	   max-content. */
	.bulls-match-row__body { flex: 1 1 0; min-width: 0; overflow: hidden; }
	.bulls-match-row__meta { white-space: normal; max-width: 30ch; }   /* wrap the long league name within view */
	/* Score sits INLINE right after the team name on mobile (not pushed to the far right),
	   so it always stays on-screen no matter how the narrow column resolves. */
	.bulls-match-row__team { display: flex; justify-content: flex-start; align-items: baseline; gap: var(--space-3); }
	.bulls-match-row__name { flex: 0 1 auto; min-width: 0; }
	.bulls-match-row__score { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
	.bulls-last-matches__all-arrow { transition: none; }
}

/* ----- Next match panel (Juventus HublotCalendar pattern) ----- */
.bulls-last-matches__next { min-width: 0; }
.bulls-match-row--next .bulls-match-row__teams { margin-bottom: var(--space-2); }
.bulls-last-matches__tba {
	margin: 0 0 var(--space-3);
	font-family: var(--ff-sans);
	font-size: var(--fs-75);
	color: var(--t-fg-muted);
	max-width: 28ch;
}
@media (max-width: 1023px) {
	.bulls-last-matches__inner { grid-template-columns: 1fr; }
}

/* M-3: functional meta line computed ~11.3px at small widths */
@media (max-width: 600px) {
	.bulls-match-row__meta { font-size: var(--fs-75); }
}