/* The tournament pages: the index (tournaments.njk), the Inter-League
   Championships (layouts/interleague.njk), and the one-off tournaments in
   src/t/. Every page in t/ loads this through src/t/t.11tydata.js.

   The one-off pages are hand-written, one at a time since 2014, and share no
   layout; this file styles the markup they already have rather than giving
   them one. So the rules for them are on Bootstrap's own classes (.table,
   .card, .img-thumbnail), plain elements (dl, ul), and a handful of classes
   that replaced the old theme's inline colours (.advanced, .dropped, .cutoff,
   .callout, .col-divider). The section labels and champion cards are shared
   with the league pages, in site.css. */

/* --- the index ----------------------------------------------------------- */

/* Inter-League champions, one card a year, newest first. As many across as
   fit: all eight on a wide screen, two on a phone. */
.interleague-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 20px 16px;
	list-style: none;
	padding: 0;
	margin: 0 0 8px;
}

.interleague-grid > li {
	display: flex;
}

/* The whole card is the link to its year's page. */
.champ-link {
	display: flex;
	width: 100%;
	color: inherit;
	text-decoration: none;
}

.champ-link:hover,
.champ-link:focus {
	color: inherit;
	text-decoration: none;
}

.champ-link:hover h3,
.champ-link:focus h3 {
	text-decoration: underline;
}

.champ-link:focus-visible {
	outline: none;
}

.champ-link:focus-visible .champ-card {
	box-shadow: 0 0 0 3px var(--ccpl-red);
}

/* Names on one line, so every caption is the same height and the red rules
   line up across the row. At the narrowest column (about 114px, eight across
   at 1280) this size fits the longest name, "Mark M. (Sparky)"; a longer one
   is cut with an ellipsis rather than wrapping. */
.interleague-grid .champ-card figcaption {
	padding-left: 10px;
	padding-right: 10px;
}

.interleague-grid .champ-card h3 {
	font-size: 17px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.champ-card .champ-date {
	letter-spacing: 1px;
	text-transform: none;
	font-size: 13px;
}

/* Other tournaments, grouped by year: the year, then a card for each event. */
.year-label {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 26px;
	color: var(--ccpl-text);
	margin: 26px 0 12px;
}

.year-label::after {
	content: "";
	flex: 1;
	border-top: 1px solid var(--ccpl-rule);
}

.section-label + .year-label {
	margin-top: 0;
}

.event-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 12px;
	list-style: none;
	padding: 0;
	margin: 0;
}

/* The event's name is the link, stretched over the card (Bootstrap's
   .stretched-link), so the card is one target. */
.event-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: var(--ccpl-surface);
	border: 1px solid var(--ccpl-rule);
	border-radius: 6px;
	padding: 12px 14px 14px;
	box-shadow: 0 1px 2px rgba(var(--ccpl-ink-rgb), .04), 0 4px 12px rgba(var(--ccpl-ink-rgb), .06);
	transition: transform .2s ease, box-shadow .2s ease;
}

.event-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 2px 4px rgba(var(--ccpl-ink-rgb), .06), 0 10px 22px rgba(var(--ccpl-ink-rgb), .10);
}

@media (prefers-reduced-motion: reduce) {
	.event-card, .event-card:hover { transition: none; transform: none; }
}

.event-card:focus-within {
	box-shadow: 0 0 0 3px var(--ccpl-red);
}

.event-card a:focus-visible {
	outline: none;
}

.event-date {
	font-family: var(--ccpl-font-display);
	font-size: 13px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--ccpl-muted);
	margin: 0 0 2px;
}

.event-card h4 {
	font-size: 21px;
	line-height: 1.15;
	margin: 0;
}

.event-card h4 a {
	text-decoration: none;
}

.event-card h4 a:hover,
.event-card h4 a:focus {
	text-decoration: underline;
}

.event-sub {
	font-size: 14px;
	color: var(--ccpl-muted);
	margin: 4px 0 0;
}

/* Sanctioned events: a chip in the card's corner. */
.event-ifpa {
	position: absolute;
	top: 11px;
	right: 12px;
	padding: 3px 8px;
	border-radius: 999px;
	background-color: rgba(var(--ccpl-red-rgb), .10);
	color: var(--ccpl-red-dark);
	font-family: var(--ccpl-font-display);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1;
}

/* --- Inter-League Championships ------------------------------------------ */

/* The bracket's link, under the title. A bare URL; at phone width it would
   run off the page. */
.il-bracket {
	font-family: var(--ccpl-font-display);
	font-size: 19px;
	letter-spacing: .5px;
	overflow-wrap: anywhere;
	margin: -6px 0 22px;
}

/* A card per block of the page: the qualifiers, the rules, the game list,
   and the day's details. */
.info-card {
	background-color: var(--ccpl-surface);
	border: 1px solid var(--ccpl-rule);
	border-top: 3px solid var(--ccpl-red);
	border-radius: 6px;
	padding: 16px 18px 6px;
	box-shadow: 0 1px 2px rgba(var(--ccpl-ink-rgb), .05), 0 8px 20px rgba(var(--ccpl-ink-rgb), .06);
}

/* The day's details and its notes, side by side, end together. */
.il-pair .info-card {
	height: 100%;
}

/* The format's rules are short lines; two columns on a wide screen. */
@media (min-width: 992px) {
	.il-format ul {
		column-count: 2;
		column-gap: 40px;
	}
	.il-format li {
		break-inside: avoid;
	}
}

.info-card + .info-card {
	margin-top: 16px;
}

.info-card h2 {
	font-size: 19px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--ccpl-text);
	margin: 0 0 10px;
}

.info-card ul {
	padding-left: 1.2rem;
}

.info-card li + li {
	margin-top: 4px;
}

.interleague .game-list {
	column-count: 2;
	column-gap: 24px;
}

.interleague .game-list li {
	break-inside: avoid;
}

/* The qualifier table sits flush in its card. */
.info-card .qualifiers {
	margin: 0 -18px 12px;
	width: calc(100% + 36px);
}

.qualifiers > :not(caption) > * > :first-child { padding-left: 18px; }
.qualifiers > :not(caption) > * > :last-child { padding-right: 18px; }

/* The champion's row, and a qualifier who did not play. Bootstrap 5 paints
   stripes as an inset shadow of --bs-table-accent-bg, so the highlight sets
   that rather than a background the stripe would cover. */
.qualifiers tr.champion > td {
	--bs-table-accent-bg: rgba(var(--ccpl-amber-rgb), .22);
	font-weight: 700;
	color: var(--ccpl-amber-deep);
}

.qualifiers tr.champion svg {
	vertical-align: -2px;
	margin-left: 4px;
}

.qualifiers tr.absent > td {
	text-decoration: line-through;
	color: var(--ccpl-muted);
}

.il-intro {
	max-width: 80ch;
	font-size: 17px;
}

/* No WPPR points: a pale chip, not a heading. */
.il-note {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	background-color: rgba(var(--ccpl-red-rgb), .10);
	color: var(--ccpl-red-dark);
	font-family: var(--ccpl-font-display);
	font-weight: 700;
	letter-spacing: .5px;
	margin: 0 0 20px;
}

/* --- headings ------------------------------------------------------------
   A title's <small> is its aside — "WPPR Points awarded", a round's averages
   — so it steps down from the shouting uppercase around it. */
h1 small {
	font-size: .5em;
	font-weight: 600;
	letter-spacing: .5px;
	text-transform: none;
	color: var(--ccpl-muted);
	vertical-align: middle;
}

/* --- details lists -------------------------------------------------------
   When, What Time, Where, Cost: every tournament page has them. The label is
   small and muted, the answer below it. A .dl-horizontal (Bootstrap 3's, which
   5 dropped) puts them side by side again, labels in a column. */
.page-band dt,
body > .container-fluid dt,
body > .container dt,
.content-section dt {
	font-family: var(--ccpl-font-display);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--ccpl-muted);
}

dl.dl-horizontal {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 8px 18px;
	align-items: baseline;
}

dl.dl-horizontal > dt { grid-column: 1; }
dl.dl-horizontal > dd { grid-column: 2; margin: 0; }
dl.dl-horizontal > dd > :last-child { margin-bottom: 0; }

@media (max-width: 575.98px) {
	dl.dl-horizontal { display: block; }
	dl.dl-horizontal > dd { margin-bottom: 10px; }
}

/* --- results tables ------------------------------------------------------ */
.table {
	--bs-table-striped-bg: rgba(var(--ccpl-ink-rgb), .03);
	background-color: var(--ccpl-surface);
	border-color: var(--ccpl-rule);
	font-variant-numeric: tabular-nums;
}

.table > thead th {
	background-color: rgba(var(--ccpl-red-rgb), .08);
	color: var(--ccpl-red-dark);
	font-family: var(--ccpl-font-display);
	font-size: 15px;
	letter-spacing: .5px;
	vertical-align: bottom;
}

/* Bootstrap draws a 2px rule in the text colour under the head: black. */
.table > :not(:first-child) {
	border-top: 2px solid rgba(var(--ccpl-red-rgb), .45);
}

/* Players who advanced, or placed: amber, the calendar's colour for playoffs.
   Bootstrap's stripe is an inset shadow over the cells, so it is cleared.
   These match the stripe rule's selector weight (.table-striped > tbody >
   tr:nth-of-type(odd) > *) and come after it, or odd rows lose them. */
.table > tbody > tr.advanced {
	background-color: rgba(var(--ccpl-amber-rgb), .22);
}

.table > tbody > tr.advanced > * {
	--bs-table-accent-bg: transparent;
	color: var(--ccpl-text);
	font-weight: 600;
}

/* A pin-golf hole score that was dropped; the number is struck through. */
.table > tbody > tr > td.dropped {
	--bs-table-accent-bg: rgba(var(--ccpl-ink-rgb), .10);
	color: var(--ccpl-muted);
}

/* The qualifying cut, a row of its own across a standings table. */
.table > tbody > tr > td.cutoff {
	--bs-table-accent-bg: rgba(var(--ccpl-red-rgb), .06);
	border-top: 2px dashed rgba(var(--ccpl-red-rgb), .5);
	border-bottom: 2px dashed rgba(var(--ccpl-red-rgb), .5);
	color: var(--ccpl-red-dark);
	font-family: var(--ccpl-font-display);
	font-weight: 700;
	letter-spacing: 1px;
}

/* --- the old theme's leftovers --------------------------------------------
   Until 2026-09 these pages carried the dark theme's colours inline — white
   and yellow text, yellow rules, red cards with yellow borders — invisible or
   glaring on a light page. They are classes now. */

/* A warning that must not be missed: vaccination, pre-registration. */
.callout {
	color: var(--ccpl-red-dark);
}

h3.callout,
h4.callout,
li.callout {
	text-transform: uppercase;
}

/* The rule between pin-golf holes laid out side by side. */
.col-divider {
	border-left: 1px solid var(--ccpl-rule);
}

/* A heading's aside: a hole's par, a note on target scores. */
h2 small,
h3 small,
h4 small {
	color: var(--ccpl-muted);
}

/* Lists read left to right, even in the pages' centred columns. */
ul,
ol {
	text-align: left;
}

/* --- cards ---------------------------------------------------------------
   The pin-golf pages' hole cards: white, with a red-tinted head. */
.card {
	border-color: var(--ccpl-rule);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(var(--ccpl-ink-rgb), .04), 0 4px 12px rgba(var(--ccpl-ink-rgb), .06);
}

.card-header {
	background-color: rgba(var(--ccpl-red-rgb), .08);
	border-bottom-color: var(--ccpl-rule);
}

.card-header .card-title {
	font-size: 18px;
	color: var(--ccpl-red-dark);
}

.card-footer {
	background-color: var(--ccpl-ground);
	border-top-color: var(--ccpl-rule);
}

/* --- photos --------------------------------------------------------------
   A photo over its caption, framed like a champion card: flush, white, with
   the caption under a red rule. Not on the Inter-League or index pages, whose
   photos are .champ-card. */
div.img-thumbnail {
	padding: 0;
	border: 1px solid var(--ccpl-rule);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(var(--ccpl-ink-rgb), .05), 0 8px 20px rgba(var(--ccpl-ink-rgb), .07);
}

div.img-thumbnail img.img-thumbnail {
	display: block;
	width: 100%;
	padding: 0;
	border-radius: 0;
}

div.img-thumbnail > .caption,
div.img-thumbnail .caption {
	padding: 10px 14px 12px;
	border-top: 3px solid var(--ccpl-red);
}

div.img-thumbnail h3.caption,
div.img-thumbnail .caption h3 {
	font-size: 21px;
	color: var(--ccpl-red);
}