/* ==========================================================================
 * HOME PAGE ONLY — linked from index.njk, nowhere else.
 * ==========================================================================
 * Split out of site.css so that tuning the hero or the league cards does not
 * change the asset hash of a stylesheet the other 53 pages link. With one
 * shared file, a homepage-only tweak rewrote every page's <link> and produced
 * a 54-file diff for a change that affected one page.
 *
 * The rule for what belongs here: a selector used ONLY on index.html. If a
 * component starts appearing on other pages, move it back to site.css rather
 * than linking this file from a second page.
 *
 * Tokens, base type, links, navbar and footer chrome all stay in site.css —
 * this file assumes those custom properties are already defined.
 * ==========================================================================*/

/* ==========================================================================
 * HOME PAGE — next league night, rhythm bands
 * ==========================================================================*/

/* Alternating ground gives sections edges without adding ornament. Below the
   hero the page steps darker, lighter, darker: the league cards and League
   Details on --ccpl-ground-deep, How It Works on --ccpl-ground, then the
   footer on --ccpl-ground-deep again. The league pages (league.css) follow the
   same pattern, so the two read as one site. */
#intro,
#about {
	background-color: var(--ccpl-ground-deep);
}

/* flow-root keeps .league-panel's bottom margin inside the shaded ground;
   without it the margin collapses through and leaves a strip of page ground
   between the league cards and League Details. */
#intro {
	display: flow-root;
	padding-top: 34px;
}

#about {
	padding-bottom: 34px;
}

/* A full-bleed band: no container, so it runs edge to edge, and a 3px red top
   rule instead of an <hr> — the same edge the footer and the navbar use, so
   section boundaries are one device rather than three. Horizontal padding
   lives here because the band no longer sits inside a container. */
/* The navbar is fixed, so an anchor jump would land this section underneath
   it. Bootstrap already enables smooth scrolling behind a
   prefers-reduced-motion guard, so only the offset is needed here. */
.band {
	scroll-margin-top: var(--ccpl-navbar-offset);
	/* The lighter ground, between League Details and the footer, which are both
	   the deeper one. */
	background-color: var(--ccpl-ground);
	border-top: 3px solid var(--ccpl-red);
	padding: 34px 20px 36px;
}

/* --- next league night ---------------------------------------------------
   Rendered by js/next-night.js at page load, so it stays correct as meetings
   pass without the site being rebuilt. The markup in the template is a
   fallback for no-JS and for a schedule that has run out. */
/* Renamed from .next-panel when the champions merged in — it holds both
   per-league facts now, not just the next meeting. */
.league-panel {
	margin-bottom: 36px;
}

/* One column per league: the next meeting and that league's reigning champion
   are both one-per-league facts, so they share a column rather than sitting in
   two separate two-up sections that happen to line up. */
.league-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	max-width: 1140px;
	margin: 0 auto;
}

.league-col {
	display: flex;
	flex-direction: column;
	background-color: var(--ccpl-surface);
	border: 1px solid var(--ccpl-rule);
	border-left: 4px solid var(--ccpl-red);
	border-radius: 5px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(22, 24, 29, .04), 0 6px 18px rgba(22, 24, 29, .05);
}

/* The card no longer carries its own frame — the column provides it. */
/* Meeting facts and the reigning champion sit side by side, so the card's
   width carries two things instead of one column of text and a lot of air. */
.league-body {
	display: flex;
	flex-direction: column;
}

.league-col .next-card {
	flex: 1 1 auto;
	min-width: 0;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 18px 20px 16px;
}

.champ-strip {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex: 0 0 auto;
	gap: 14px;
	padding: 0 12px 0 0;
	border-top: 1px solid var(--ccpl-rule);
	background-color: var(--ccpl-ground-deep);
}

.champ-photo {
	align-self: stretch;
	min-height: 100%;
	/* Was a 72px thumbnail reading as an afterthought. Now flush to the card's
	   edge at its native 3:4, so the champion is the picture on the card. */
	width: 130px;
	aspect-ratio: 3 / 4;
	height: auto;
	object-fit: cover;
	display: block;
	border: 0;
	border-radius: 0;
	flex: 0 0 auto;
}

.champ-meta {
	min-width: 0;
	align-self: center;
	padding: 16px 0;
}

.champ-label {
	font-family: var(--ccpl-font-display);
	text-transform: uppercase;
	/* Tightened so the label stops setting the column's minimum width — that
	   space goes to the photo instead of being taken from the meeting text,
	   which already wraps for longer hosts like Shannon's Pinball Treehouse. */
	letter-spacing: 1.4px;
	font-size: 10.5px;
	color: var(--ccpl-muted);
	margin: 0 0 2px;
}

.champ-name {
	font-family: var(--ccpl-font-display);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--ccpl-red);
	margin: 0;
}

.champ-season {
	margin: 0;
	font-size: 13px;
	color: var(--ccpl-muted);
}

.next-card {
	background-color: var(--ccpl-surface);
	border: 1px solid var(--ccpl-rule);
	border-left: 4px solid var(--ccpl-red);
	border-radius: 4px;
	padding: 16px 18px;
}

.next-league {
	display: flex;
	align-items: center;
	font-family: var(--ccpl-font-display);
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 14px;
	font-weight: 700;
	color: var(--ccpl-muted);
	margin: 0 0 6px;
}

.next-soon {
	/* Pushed to the card edge rather than trailing the league name, so the
	   urgency reads at a glance down a column of cards. */
	margin-left: auto;
	padding: 1px 8px;
	border-radius: 999px;
	background-color: var(--ccpl-red);
	color: var(--ccpl-on-brand);
	font-size: 11px;
	letter-spacing: 1px;
	vertical-align: 1px;
}

.next-date {
	font-family: var(--ccpl-font-display);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 6px;
}

.next-date a {
	text-decoration: none;
}

.next-detail {
	margin: 0 0 2px;
	font-size: 15px;
	color: var(--ccpl-text);
}

.next-when,
.next-none {
	margin: 0;
	font-size: 13.5px;
	color: var(--ccpl-muted);
}

/* --- rules card ----------------------------------------------------------*/
/* Filled at rest, outlined on hover. */
.rules-link {
	display: inline-block;
	margin-top: 6px;
	padding: 9px 20px;
	border: 1px solid var(--ccpl-red);
	border-radius: 3px;
	background-color: var(--ccpl-red);
	color: var(--ccpl-on-brand);
	font-family: var(--ccpl-font-display);
	text-transform: uppercase;
	letter-spacing: 1px;
	text-decoration: none;
}

.rules-link:hover,
.rules-link:focus {
	background-color: transparent;
	color: var(--ccpl-red);
	text-decoration: none;
}

/* --- home page hero ------------------------------------------------------
   Type-led rather than logo-led: on a light ground the wordmark carries the
   identity and the mark supports it. The mark is decorative here (the h1 says
   the same thing), so it is aria-hidden with an empty alt. */
.hero {
	/* The mark is yellow line art drawn for a dark field, so the photo is what
	   finally lets it read correctly. Two gradients: a flat wash for contrast
	   and a bottom-weighted one so the type sits on the darkest part.
	   The photo is one of img/hero/, chosen at random on each load by
	   partials/hero-pick.njk, which sets --hero-lg, --hero-sm and, for an
	   off-centre subject, --hero-position (src/_data/heroes.js).
	   Overlay measured, not eyeballed: against the brightest pixel behind any
	   line of the copy, .60 leaves white text at 6.1:1 or better on every photo
	   in the folder as of 2026-09-13 (1440px), and 7.4:1 on a phone — clear of
	   the 4.5:1 floor. Measure a new photo before it joins them. */
	--ccpl-accent: var(--ccpl-accent-on-dark);
	--ccpl-yellow: var(--ccpl-accent-on-dark);
	--ccpl-yellow-rgb: 232, 163, 61;
	/* On the photo, amber resting and white on hover. Restated rather than
	   inherited: custom properties resolve at computed-value time, so the
	   :root definitions were already substituted to red. */
	--ccpl-link: var(--ccpl-accent-on-dark);
	--ccpl-link-hover: #FFFFFF;

	position: relative;
	background-image:
		linear-gradient(to bottom, rgba(11, 13, 16, .60) 0%, rgba(11, 13, 16, .78) 100%),
		var(--hero-lg);
	background-position: var(--hero-position, center center);
	background-size: cover;
	background-repeat: no-repeat;
	background-color: #0B0D10;
	border-bottom: 3px solid var(--ccpl-red);
	color: #FFFFFF;

	/* Full bleed into the navbar. body clears the fixed navbar with padding-top,
	   which leaves a strip of page ground wherever that offset exceeds the
	   navbar's real height. Cancelling the offset exactly — rather than guessing
	   a height that changes with the breakpoint — lets the photo run up behind
	   the navbar, and the padding puts the content back below it. */
	margin-top: calc(-1 * var(--ccpl-navbar-offset));
	padding: calc(var(--ccpl-navbar-offset) + 42px) 20px 40px;
}

@media (max-width: 960px) {
	.hero {
		background-image:
			linear-gradient(to bottom, rgba(11, 13, 16, .62) 0%, rgba(11, 13, 16, .80) 100%),
			var(--hero-sm);
		padding: calc(var(--ccpl-navbar-offset) + 32px) 18px 30px;
	}
}

.hero-inner {
	display: flex;
	align-items: center;
	gap: 34px;
	/* 1020, not 980: at 980 the text column was 716px while the title needs 722
	   at its 54px clamp, so it wrapped to two lines and added ~55px to the band.
	   The extra 40px leaves real margin rather than landing on the 6px edge,
	   where font loading differences would decide it. Still inside the 1140
	   the league cards use. */
	max-width: 1020px;
	margin: 0 auto;
}

.hero-mark {
	/* Sized to the text block beside it (measured 246px tall), so the mark fills
	   the band without becoming the thing that sets its height. */
	flex: 0 0 auto;
	width: 230px;
	height: auto;
}

.hero-body {
	min-width: 0;
}

.hero-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 10px;
}

.hero-title {
	font-size: clamp(32px, 5vw, 54px);
	line-height: 1.02;
	margin: 0 0 10px;
	color: #FFFFFF;
	text-wrap: balance;
	text-shadow: 0 1px 24px rgba(0, 0, 0, .45);
}

.hero-lede {
	font-family: var(--ccpl-font-display);
	font-size: 22px;
	font-weight: 400;
	color: rgba(255, 255, 255, .94);
	margin: 0 0 12px;
}

.hero-meta {
	font-size: 14.5px;
	color: rgba(255, 255, 255, .74);
	margin: 0 0 18px;
	max-width: 62ch;
}

/* Everything in the hero shares one left edge — eyebrow, title, lede, prose
   and the CTA. A centred button under left-aligned prose reads as a mistake
   rather than a choice. The narrow breakpoint centres the lot, where the mark
   sits above the text and there is a shared axis to centre on. */
.hero-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 10px;
	margin: 0;
}

.btn-hero {
	display: inline-block;
	padding: 10px 22px;
	border-radius: 3px;
	border: 1px solid var(--ccpl-red);
	background-color: var(--ccpl-red);
	color: var(--ccpl-on-brand);
	font-family: var(--ccpl-font-display);
	text-transform: uppercase;
	letter-spacing: 1px;
	text-decoration: none;
}

.btn-hero:hover,
.btn-hero:focus {
	background-color: var(--ccpl-red-dark);
	border-color: var(--ccpl-red-dark);
	color: var(--ccpl-on-brand);
	text-decoration: none;
}

/* The secondary CTA sits on the hero photo, so it is outlined in light, not
   brand red. Red on that ground measures about 1.3:1 — this rule dates from
   when the hero was a white band. */
.btn-hero-quiet {
	background-color: transparent;
	color: var(--ccpl-on-brand);
	border-color: rgba(255, 255, 255, .55);
}

.btn-hero-quiet:hover,
.btn-hero-quiet:focus {
	background-color: var(--ccpl-on-brand);
	border-color: var(--ccpl-on-brand);
	color: var(--ccpl-red-dark);
}

@media (max-width: 700px) {
	.hero-inner {
		flex-direction: column;
		text-align: center;
		gap: 18px;
	}
	.hero-mark { width: 150px; }
	/* 62ch is wider than a phone viewport, which pushed the prose, the lede and
	   the eyebrow off the right edge. Cap to the available width instead. */
	.hero-meta {
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	.hero-eyebrow {
		letter-spacing: 1.5px;
		font-size: 11px;
	}
	.hero-title { font-size: clamp(28px, 8.4vw, 42px); }
	.hero-lede { font-size: 19px; }
	.hero-actions { justify-content: center; }
}

/* Per-league schedule link. Server-rendered and outside the JS mount, so it
   survives next-night.js rewriting the card above it. */
.league-more {
	margin: 0;
	padding: 11px 18px;
	border-top: 1px solid var(--ccpl-rule);
	background-color: var(--ccpl-surface);
	font-family: var(--ccpl-font-display);
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 13.5px;
}

.league-more a {
	text-decoration: none;
}

.league-more a::after {
	content: " \2192";
}

.league-more a:hover,
.league-more a:focus {
	text-decoration: underline;
}



/* ---------------------------------------------------------------------------
   The side-by-side card is opted into by CARD width, not viewport width.
   These cards sit in an auto-fit grid, so the two do not track each other:
   below about 640px the grid collapses to a single column and each card gets
   WIDER again. A viewport media query gets that case backwards — it would
   stack a card that has plenty of room. A container query asks the only
   question that matters: is this card wide enough to split?
   --------------------------------------------------------------------------- */
.league-col {
	container-type: inline-size;
}

@container (min-width: 490px) {
	.league-body {
		flex-direction: row;
		align-items: stretch;
	}

	.champ-strip {
		/* row-reverse puts the photo flush against the card's outer edge, so it
		   balances the red rule on the opposite side. */
		flex-direction: row-reverse;
		padding: 0 0 0 18px;
		border-top: 0;
		border-left: 1px solid var(--ccpl-rule);
	}

	.champ-meta {
		white-space: nowrap;
	}
}

/* The rules band is the last section on the page, so it meets the footer
   directly — two full-bleed bands with red top rules, no page ground between.
   Scoped to the adjacency rather than changing .footer itself, which carries
   its 30px margin on the other 52 pages where a section does not run up to it.
   (The commented-out contact block sits between them in the source but emits
   no elements, so these two are DOM siblings.) */
.band + .footer {
	margin-top: 0;
}

/* --- How It Works, with league-night photos alongside --------------------
   The band is full bleed, so it has room for two columns. Copy stays on a
   readable measure; the carousel takes the rest. */
/* ONE two-column measure, shared by League Details and How It Works, so the
   column edges line up down the page instead of each section inventing its
   own. Previously League Details used Bootstrap row/col-7 at full viewport
   width while the band was capped at 1140px, so nothing agreed. It carries its
   own horizontal padding rather than relying on a parent container, because
   container-fluid's 12px and the band's 20px did not match either. */
.page-cols {
	display: flex;
	align-items: flex-start;
	gap: 40px;
	max-width: 1180px;          /* 1140 of content + 20px padding each side */
	margin: 0 auto;
	padding: 0 20px;
}

.page-col-main {
	flex: 1 1 0;
	min-width: 0;
}

.page-col-side {
	flex: 0 1 460px;
	min-width: 0;
}

/* The band pairs prose with a picture, so those centre against each other. */
.band .page-cols {
	align-items: center;
}

.band-shots {
	border: 1px solid var(--ccpl-rule);
	border-radius: 5px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(22, 24, 29, .04), 0 6px 18px rgba(22, 24, 29, .06);
}

.band-shots img {
	/* height:auto is load-bearing — the width/height attributes are kept for
	   layout stability while loading, and without this the height attribute
	   wins over aspect-ratio and the carousel renders at full 675px. */
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Bootstrap's control icons are white on the assumption of a dark photo. Give
   them a scrim so they stay visible whatever the photo behind them is. */
.band-shots .carousel-control-prev,
.band-shots .carousel-control-next {
	width: 12%;
}

.band-shots .carousel-control-prev-icon,
.band-shots .carousel-control-next-icon {
	background-color: rgba(11, 13, 16, .55);
	border-radius: 50%;
	padding: 14px;
	background-size: 45%;
}

.band-shots .carousel-indicators [data-bs-target] {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: 0;
	background-color: rgba(255, 255, 255, .65);
}

.band-shots .carousel-indicators .active {
	background-color: var(--ccpl-white);
}

@media (max-width: 880px) {
	.page-cols {
		flex-direction: column;
		gap: 26px;
	}
	.band-shots {
		flex: 1 1 auto;
		width: 100%;
		max-width: 560px;
	}
}

/* App links under the How It Works CTA. Uses space the carousel already
   leaves empty beside the copy, so it costs no extra page height. */
.app-links {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--ccpl-rule);
}

.app-links > p {
	margin: 0 0 10px;
	font-size: 14px;
	color: var(--ccpl-muted);
}

.app-links-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}

.app-links-row a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border: 1px solid var(--ccpl-rule);
	border-radius: 3px;
	font-family: var(--ccpl-font-display);
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 13px;
	text-decoration: none;
}

.app-links-row a:hover,
.app-links-row a:focus {
	border-color: var(--ccpl-red);
	text-decoration: none;
}