/* The league pages, layouts/league.njk: Folsom and Lodi.

   Four parts, top to bottom: the masthead, the season's league nights, the
   calendar beside them, and the champion wall. The standings between them are
   pinball-manager's markup and are styled in backend-contract.css, not here.
   The section labels and the champion cards are shared with the tournament
   pages, so they are in site.css. */

/* --- masthead ------------------------------------------------------------
   The home hero's photo and dark field, shorter, so a league page reads as
   part of the same site rather than a document — the same random photo
   (partials/hero-pick.njk), the same --hero-* properties. Full bleed into
   the navbar the same way: cancel body's navbar offset, then pad it back.
   The gradient runs darkest behind the type on the left, and warms to the
   brand red on the right where there is no text to read against it. On a
   phone the text runs the full width, into the red, so there the gradient is
   darker: at the desktop stops, three of the photos left white text under
   4.5:1 (3.4:1 at worst); at these, every photo clears it. */
.league-masthead {
	--ccpl-link: var(--ccpl-accent-on-dark);
	--ccpl-link-hover: #FFFFFF;

	background-image:
		linear-gradient(100deg, rgba(var(--ccpl-ink-rgb), .90) 0%, rgba(var(--ccpl-ink-rgb), .74) 55%, rgba(var(--ccpl-red-rgb), .55) 100%),
		var(--hero-lg);
	background-position: var(--hero-position, center 40%);
	background-size: cover;
	background-color: var(--ccpl-ink);
	border-bottom: 3px solid var(--ccpl-red);
	color: #FFFFFF;
	margin-top: calc(-1 * var(--ccpl-navbar-offset));
	padding: calc(var(--ccpl-navbar-offset) + 36px) 0 32px;
	margin-bottom: 0;
}

@media (max-width: 960px) {
	.league-masthead {
		background-image:
			linear-gradient(100deg, rgba(var(--ccpl-ink-rgb), .90) 0%, rgba(var(--ccpl-ink-rgb), .84) 60%, rgba(var(--ccpl-red-rgb), .72) 100%),
			var(--hero-sm);
		padding: calc(var(--ccpl-navbar-offset) + 24px) 0 24px;
	}
}

.league-eyebrow {
	font-family: var(--ccpl-font-display);
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 12.5px;
	color: var(--ccpl-accent-on-dark);
	margin: 0 0 6px;
}

.league-masthead .league-name {
	font-size: clamp(34px, 6vw, 64px);
	line-height: 1;
	margin: 0 0 12px;
	color: #FFFFFF;
	text-shadow: 0 1px 24px rgba(0, 0, 0, .45);
}

/* "Season 45" steps back from the league's name: same size, lighter weight,
   amber, so the name carries and the season reads as its subtitle. */
.league-name .league-season {
	font-weight: 400;
	color: var(--ccpl-accent-on-dark);
}

.league-lede {
	font-family: var(--ccpl-font-display);
	font-size: 21px;
	color: rgba(255, 255, 255, .94);
	margin: 0 0 10px;
}

.league-conduct {
	font-size: 13.5px;
	color: rgba(255, 255, 255, .72);
	margin: 0;
	max-width: 70ch;
}

@media (max-width: 575.98px) {
	.league-eyebrow { letter-spacing: 1.5px; font-size: 11px; }
	.league-lede { font-size: 18px; }
}

/* The page alternates below the masthead: the season (calendar, league
   nights, standings) on the darker ground, the champion wall on the lighter
   one, then the footer darker again. */
.league-season-band {
	background-color: var(--ccpl-ground-deep);
	padding-top: 32px;
	padding-bottom: 32px;
}

/* The league-night times, once for every night: a pale red chip so it is not
   lost beside the heading. */
.section-label .night-times {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 4px 12px;
	border-radius: 999px;
	background-color: rgba(var(--ccpl-red-rgb), .10);
	color: var(--ccpl-red-dark);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .5px;
	transform: translateY(-3px);
}

/* --- league nights -------------------------------------------------------
   One card per night, coloured like the calendar and its key: a night still
   to come is solid red, a played one pale red, and the playoffs amber. Past,
   tonight and next are set by the page's script from the visitor's own clock
   — the page is built ahead of time, so the build cannot know which night is
   next. Without the script every night shows as still to come. */
.night-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	list-style: none;
	padding: 0;
	margin: 0 0 12px;
}

@media (max-width: 1199.98px) {
	.night-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.night {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: var(--ccpl-red);
	border: 1px solid var(--ccpl-red);
	border-radius: 4px;
	padding: 12px 14px;
	color: var(--ccpl-on-brand);
	box-shadow: 0 1px 2px rgba(var(--ccpl-ink-rgb), .06), 0 6px 18px rgba(var(--ccpl-red-rgb), .14);
}

.night h3 {
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: rgba(255, 244, 241, .78);
	margin: 0 0 2px;
}

.night-date {
	font-family: var(--ccpl-font-display);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.05;
	color: #FFFFFF;
}

.night-host {
	font-size: 15px;
	color: var(--ccpl-on-brand);
}

/* The status pill, filled in by script: Played, Tonight, Next up. */
.night-status {
	position: absolute;
	top: 11px;
	right: 12px;
	font-family: var(--ccpl-font-display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	line-height: 1;
	padding: 4px 8px;
	border-radius: 999px;
}

.night-status:empty { display: none; }

/* Played: the key's pale red. */
.night.past {
	background-color: rgba(var(--ccpl-red-rgb), .16);
	border-color: rgba(var(--ccpl-red-rgb), .22);
	box-shadow: none;
}

.night.past h3 { color: rgba(var(--ccpl-red-rgb), .75); }
.night.past .night-date,
.night.past .night-host { color: var(--ccpl-red-dark); }

.night.past .night-status {
	color: var(--ccpl-red-dark);
	border: 1px solid rgba(var(--ccpl-red-rgb), .35);
}

/* The next night, or tonight's: ringed, with the pill inverted to white. */
.night.next .night-status,
.night.tonight .night-status {
	color: var(--ccpl-red);
	background-color: var(--ccpl-surface);
}

.night.next,
.night.tonight {
	box-shadow: 0 0 0 2px var(--ccpl-ground-deep), 0 0 0 4px var(--ccpl-red), 0 10px 24px rgba(var(--ccpl-red-rgb), .28);
}

/* Playoffs: the season's one Saturday, in the calendar's amber, as a tint. */
.night-playoffs {
	grid-column: 1 / -1;
	background-color: #FCF3E6;
	border-color: rgba(var(--ccpl-amber-rgb), .55);
	color: var(--ccpl-text);
	box-shadow: 0 1px 2px rgba(var(--ccpl-ink-rgb), .04), 0 6px 18px rgba(var(--ccpl-amber-rgb), .12);
}

.night-playoffs h3 { color: var(--ccpl-amber-deep); }
.night-playoffs .night-date,
.night-playoffs .night-host { color: var(--ccpl-text); }

.night-playoffs.next .night-status,
.night-playoffs.tonight .night-status {
	color: #FFFFFF;
	background-color: var(--ccpl-amber-deep);
}

.night-playoffs.next,
.night-playoffs.tonight {
	border-color: var(--ccpl-accent-on-dark);
	box-shadow: 0 0 0 2px var(--ccpl-ground-deep), 0 0 0 4px var(--ccpl-accent-on-dark), 0 10px 24px rgba(var(--ccpl-amber-rgb), .28);
}

.night-playoffs.past {
	background-color: rgba(var(--ccpl-amber-rgb), .08);
	border-color: rgba(var(--ccpl-amber-rgb), .3);
}

.night-playoffs.past h3,
.night-playoffs.past .night-date,
.night-playoffs.past .night-host { color: var(--ccpl-amber-deep); }

.night-playoffs.past .night-status {
	color: var(--ccpl-amber-deep);
	border-color: rgba(var(--ccpl-amber-rgb), .6);
}

/* --- calendar ------------------------------------------------------------ */
.calendar-section {
	color: var(--ccpl-text);
	background-color: var(--ccpl-surface);
	border: 0;
	border-top: 3px solid var(--ccpl-red);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(var(--ccpl-ink-rgb), .06), 0 8px 24px rgba(var(--ccpl-ink-rgb), .08);
	margin-bottom: 24px;
}

/* Months tile across when the calendar is full width (phones, where it sits
   below the season), and stack in the sidebar. The key and the season
   headings span the row. */
.calendar-section .card-body {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 0 20px;
	padding: 16px;
	background-color: var(--ccpl-ground);
}

.calendar-section .card-body > h4,
.calendar-legend {
	grid-column: 1 / -1;
}

.calendar-section .card-body > h4 {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--ccpl-text);
	margin: 0 0 8px;
}

.calendar-section .card-body > h4::before,
.calendar-section .card-body > h4::after {
	content: "";
	flex: 1;
	border-top: 1px solid var(--ccpl-rule);
}

/* A later season: its heading, with the rules either side, is the divider. */
.calendar-section .schedule + h4 {
	margin-top: 14px;
}

/* Each month is its own white card on the calendar's shaded body, so the
   months read as separate calendars rather than one long run of dates. */
.schedule {
	width: 100%;
	max-width: 256px;
	margin: 0 auto 12px;
	padding: 10px 8px 8px;
	background-color: var(--ccpl-surface);
	border: 1px solid var(--ccpl-rule);
	border-radius: 6px;
	box-shadow: 0 1px 2px rgba(var(--ccpl-ink-rgb), .04), 0 4px 12px rgba(var(--ccpl-ink-rgb), .06);
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
}

.schedule .clndr-controls .month {
	font-family: var(--ccpl-font-display);
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--ccpl-red);
	margin-bottom: 4px;
}

.schedule .days-of-the-week,
.schedule .days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}

.schedule .header-day {
	font-family: var(--ccpl-font-display);
	font-size: 11px;
	font-weight: 700;
	line-height: 22px;
	color: var(--ccpl-red-dark);
	background-color: rgba(var(--ccpl-red-rgb), .10);
}

.schedule .header-day:first-child { border-radius: 3px 0 0 3px; }
.schedule .header-day:last-child { border-radius: 0 3px 3px 0; }

.schedule .days { margin-top: 3px; }

.schedule .day {
	line-height: 26px;
	border-radius: 3px;
	color: var(--ccpl-text);
}

.schedule .day.past { color: #8D9096; }

.schedule .day.event {
	font-weight: 700;
	color: var(--ccpl-on-brand);
	background-color: var(--ccpl-red);
}

.schedule .day.event.playoffs {
	color: var(--ccpl-text);
	background-color: var(--ccpl-accent-on-dark);
}

/* A night that has been played keeps its colour, faded, so the season's
   shape stays readable at a glance. */
.schedule .day.event.past {
	color: var(--ccpl-red-dark);
	background-color: rgba(var(--ccpl-red-rgb), .16);
}

.schedule .day.event.playoffs.past {
	color: var(--ccpl-amber-deep);
	background-color: rgba(var(--ccpl-amber-rgb), .28);
}

.schedule .day.today {
	box-shadow: inset 0 0 0 2px var(--ccpl-red-dark);
}

.schedule .day.event.today {
	box-shadow: 0 0 0 2px var(--ccpl-surface), 0 0 0 4px var(--ccpl-red-dark);
}

/* Adjacent-month days hold their grid cells, so a month starts on its weekday
   and its last week keeps its shape. */
.schedule .empty,
.schedule .adjacent-month {
	visibility: hidden;
}

/* The key, at the top of the calendar. The league-night cards use the same
   colours, so it reads for both. */
.calendar-legend {
	display: grid;
	grid-template-columns: repeat(2, max-content);
	justify-content: center;
	gap: 6px 22px;
	list-style: none;
	padding: 0;
	margin: 0 0 16px;
	font-size: 12.5px;
	color: var(--ccpl-muted);
}

.calendar-legend li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.calendar-legend .swatch {
	width: 14px;
	height: 14px;
	border-radius: 3px;
}

/* One row of four at Bootstrap's xxl, where the sidebar is wide enough. */
@media (min-width: 1400px) {
	.calendar-legend {
		grid-template-columns: repeat(4, max-content);
		gap: 6px 9px;
		font-size: 12px;
	}
	.calendar-legend li { gap: 5px; }
	.calendar-legend .swatch { width: 12px; height: 12px; }
	.calendar-section .card-body { padding-left: 12px; padding-right: 12px; }
}

.swatch-night { background-color: var(--ccpl-red); }
.swatch-playoffs { background-color: var(--ccpl-accent-on-dark); }
.swatch-played { background-color: rgba(var(--ccpl-red-rgb), .16); }
.swatch-today { box-shadow: inset 0 0 0 2px var(--ccpl-red-dark); }

/* On a phone the calendar follows the season (see the layout), and the
   sidebar spacing is not needed above it. */
@media (max-width: 767.98px) {
	.calendar-section { margin-top: 12px; }
}

/* --- results ------------------------------------------------------------- */
#results {
	margin-top: 24px;
	padding: 0;
}

/* "Season Standings" and the key to its playoff stars, on one row over the
   red rule, as "League nights" has the doors-open chip beside it. The row is
   made by the layout's placeStandingsKey(); the stars are drawn in
   backend-contract.css, with the ones in the table. */
.scores .standings-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 20px;
	margin: 28px 0 12px;
	border-bottom: 2px solid var(--ccpl-red);
	padding-bottom: 6px;
}

.scores .standings-head > h3 {
	margin: 0;
}

.standings-key {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 13px;
	color: var(--ccpl-muted);
}

.standings-key li {
	display: inline-flex;
	align-items: center;
}

/* --- champion wall -------------------------------------------------------
   The cards themselves are .champ-card, in site.css. */
#champs {
	padding-top: 32px;
	padding-bottom: 8px;
	background-color: var(--ccpl-ground);
	border-top: 3px solid var(--ccpl-red);   /* the section edge the home page bands, the masthead and the footer use */
}

/* The band runs down to the footer, so the footer's 30px top margin would
   leave a strip of page ground between them. As .band + .footer on home. */
#champs + .footer {
	margin-top: 0;
}

#champs .section-label {
	max-width: 1320px;
	margin-left: auto;
	margin-right: auto;
}

#champs .row {
	max-width: 1320px;
	margin: 0 auto;
	row-gap: 24px;
	padding-bottom: 24px;
}

#champs .row > [class*="col-"] {
	display: flex;
}