/**
 * Match Centre page styles (pages/template-match-centre.php)
 * Fixture cards, result rows, next-match card and form chips live in
 * components/fixtures.css; the hero and CTA band are shared sections.
 *
 * 1. Upcoming Fixtures
 * 2. Past Results
 * 3. League Standings
 * 4. Responsive
 */

/* ============================ UPCOMING FIXTURES ============================ */
.upcoming-fixtures {
	padding: var(--space-80) 0 var(--space-120);
	background: var(--light-bg);
}

.upcoming-fixtures .section-head,
.past-results .section-head {
	margin-bottom: var(--space-40);
}

.upcoming-fixtures .section-head__copy,
.past-results .section-head__copy {
	gap: var(--space-10);
}

.upcoming-fixtures .section-eyebrow,
.past-results .section-eyebrow {
	padding-top: var(--space-16);
}

.upcoming-fixtures .section-description,
.past-results .section-description {
	padding-top: var(--space-4);
	font-weight: var(--font-weight-regular);
}

.match-count {
	padding-block: var(--space-24);
	font-size: var(--fs-24);
	line-height: 1.55;
	color: var(--text-color);
	white-space: nowrap;
}

.match-count b {
	font-weight: var(--font-weight-bold);
	color: var(--heading-color);
}

.team-filter-note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-10) var(--space-24);
	margin-bottom: var(--space-40);
	padding: var(--space-18) var(--space-28);
	border: var(--stroke-thin) solid var(--border-color);
	border-radius: var(--radius-lg);
	background: var(--white);
	font-size: var(--fs-24);
	line-height: 1.55;
	color: var(--heading-color);
}

.upcoming-fixtures__empty {
	font-size: var(--fs-24);
	color: var(--text-color);
}

.upcoming-fixtures__months {
	display: flex;
	flex-direction: column;
	gap: var(--space-40);
	padding-top: var(--space-64);
}

.upcoming-fixtures__months .reveal-more {
	padding-top: var(--space-24);
}

/* ============================ PAST RESULTS ============================ */
.past-results {
	padding-block: var(--section-spacing);
	background: var(--white);
}

.form-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-18);
	margin-bottom: var(--space-40);
	padding: calc(23 * var(--u)) calc(29 * var(--u));
	border: var(--stroke-thin) solid var(--border-color);
	border-radius: var(--radius-lg);
	background: var(--white);
}

.form-strip__label {
	font-size: var(--fs-24);
	font-weight: var(--font-weight-bold);
	line-height: 1.55;
	color: var(--text-color);
}

.form-strip__chips {
	display: flex;
	gap: var(--space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.form-strip__summary {
	margin-left: auto;
	font-size: var(--fs-24);
	line-height: 1.55;
	color: var(--text-color);
}

.past-results__months {
	display: flex;
	flex-direction: column;
	gap: var(--space-48);
}

.past-results__months .reveal-more {
	padding-top: 0;
}

/* ============================ LEAGUE STANDINGS ============================ */
.league-standings {
	padding-block: var(--section-spacing);
	background: var(--light-bg);
}

.league-standings .section-head {
	margin-bottom: var(--space-36);
}

.league-standings .section-head__copy {
	gap: calc(25.5 * var(--u));
}

.league-standings__picker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-16);
}

.league-standings__picker-label {
	font-size: var(--fs-24);
	font-weight: var(--font-weight-bold);
	line-height: 1.55;
	color: var(--text-color);
}

.league-standings__select {
	width: auto;
	min-width: calc(360 * var(--u));
	padding: var(--space-16) var(--space-48) var(--space-16) var(--space-24);
	border: var(--stroke) solid var(--border-color);
	border-radius: var(--radius-md);
	background-color: var(--white);
	font-family: var(--font-primary);
	font-size: var(--fs-24);
	line-height: 1.2;
	color: var(--heading-color);
}

.league-standings__select:focus {
	border-color: var(--heading-color);
	box-shadow: none;
}

.standings-summary {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-24);
	margin-bottom: calc(21.5 * var(--u));
}

.standings-summary__card {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	padding: calc(35 * var(--u)) calc(31 * var(--u)) calc(29 * var(--u));
	border: var(--stroke-thin) solid var(--card-accent, var(--black));
	border-top-width: calc(7 * var(--u));
	border-radius: var(--radius-lg);
	background: var(--white);
}

.standings-summary__card--position { --card-accent: var(--black); }
.standings-summary__card--points { --card-accent: var(--primary-color); }
.standings-summary__card--played { --card-accent: var(--accent-color); }
.standings-summary__card--gd { --card-accent: var(--crumb-divider); }

.standings-summary__label {
	font-size: var(--fs-24);
	line-height: 1.55;
	color: var(--text-color);
}

.standings-summary__value {
	font-size: var(--fs-48);
	font-weight: var(--font-weight-black);
	letter-spacing: -0.03em;
	line-height: 1.05;
	color: var(--heading-color);
}

.league-table-wrap {
	overflow-x: auto;
	border: var(--stroke-thin) solid var(--border-color);
	border-radius: var(--radius-lg);
	background: var(--white);
}

.league-table {
	width: 100%;
	min-width: 980px;
	border-collapse: collapse;
	font-size: var(--fs-intro);
	line-height: 1.55;
	color: var(--heading-color);
}

.league-table th,
.league-table td {
	padding: var(--space-20) var(--space-14) calc(21 * var(--u));
	border-bottom: var(--stroke-thin) solid var(--border-color);
	vertical-align: middle;
	text-align: center;
}

.league-table thead th {
	padding-block: calc(25.6 * var(--u)) calc(26.3 * var(--u));
	background: var(--light-bg);
	font-size: var(--fs-24);
	font-weight: var(--font-weight-bold);
	color: var(--text-color);
}

.league-table tbody tr:last-child th,
.league-table tbody tr:last-child td {
	border-bottom: 0;
}

.league-table__pos {
	position: relative;
	width: calc(80 * var(--u));
	font-weight: var(--font-weight-black);
}

.league-table thead .league-table__pos {
	font-weight: var(--font-weight-bold);
}

.league-table .league-table__team {
	width: calc(454 * var(--u));
	text-align: left;
}

.league-table thead .league-table__team {
	padding-left: calc(22 * var(--u));
}

.league-table__club {
	display: flex;
	align-items: center;
	gap: var(--space-16);
	padding-left: var(--space-8);
}

.league-table__crest,
.league-table__initials {
	width: calc(46 * var(--u));
	height: calc(46 * var(--u));
}

.league-table__name {
	font-weight: var(--font-weight-bold);
}

.is-ours .league-table__name {
	font-weight: var(--font-weight-black);
}

.league-table tbody .league-table__num {
	font-weight: var(--font-weight-regular);
}

.league-table tbody .league-table__gd.is-up {
	font-weight: var(--font-weight-bold);
	color: var(--accent-dark);
}

.league-table tbody .league-table__gd.is-down {
	font-weight: var(--font-weight-bold);
	color: var(--primary-color);
}

.league-table__pts {
	font-size: var(--fs-card-title);
	font-weight: var(--font-weight-black);
}

.league-table thead .league-table__pts {
	font-size: var(--fs-card-title);
}

.league-table__form {
	width: calc(313 * var(--u));
}

.league-table__chips {
	display: inline-flex;
	gap: var(--space-6);
	vertical-align: middle;
}

.league-table tbody tr.is-ours > * {
	background: var(--primary-wash);
}

.league-table tbody tr.is-promotion .league-table__pos::before,
.league-table tbody tr.is-ours .league-table__pos::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: calc(7 * var(--u));
	min-width: 4px;
	background: var(--accent-color);
}

.league-table tbody tr.is-ours .league-table__pos::before {
	background: var(--primary-color);
}

.league-standings__legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-10) calc(34 * var(--u));
	margin-top: calc(21.5 * var(--u));
	font-size: var(--fs-24);
	line-height: 1.55;
	color: var(--text-color);
}

.league-standings__key {
	display: inline-flex;
	align-items: center;
	gap: var(--space-12);
}

.league-standings__key::before {
	content: "";
	width: calc(22 * var(--u));
	height: calc(22 * var(--u));
	min-width: 14px;
	min-height: 14px;
	border-radius: var(--radius-sm);
	background: var(--accent-color);
}

.league-standings__key--ours::before {
	background: var(--primary-color);
}

/* ============================ RESPONSIVE ============================ */

/* --- LG --- */
@media (max-width: 1200px) {
	.standings-summary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --- MD / Tablet --- */
@media (max-width: 992px) {
	.upcoming-fixtures {
		padding: 56px 0 var(--section-spacing);
	}

	.upcoming-fixtures__months {
		padding-top: 40px;
	}

	.form-strip__summary {
		margin-left: 0;
		flex-basis: 100%;
	}

	.league-standings__select {
		min-width: 260px;
	}

	.league-table {
		font-size: 16px;
	}
}

/* --- SM / Mobile --- */
@media (max-width: 768px) {
	.match-count {
		padding-block: 0;
	}

	.upcoming-fixtures .section-head__aside,
	.past-results .section-head__aside,
	.league-standings .section-head__aside {
		width: 100%;
	}

	.league-standings__picker {
		width: 100%;
	}

	.league-standings__select {
		flex: 1 1 220px;
		min-width: 0;
	}
}

/* --- XS / Small Mobile --- */
@media (max-width: 575px) {
	.standings-summary {
		gap: 12px;
	}

	.standings-summary__card {
		padding: 20px 16px 18px;
	}

	.standings-summary__value {
		font-size: 30px;
	}

	.form-strip {
		padding: 16px;
	}
}