/* Homepage. Currently just the "Open"/"Women" top-5 ranking columns
   (playcross_render_top_rankings_column()) -- redesigned per the user's
   own reference screenshot: 2 cards side by side, flag instead of a
   player photo (this site has none), rank/name/points per row. */

/* ------------------------------------------------------- Promo strip */
/* 3-up strip directly under the hero (requested from a reference
   screenshot): "coming from the old site" / tutorial / next-tournament
   countdown. No gap between cards -- each one's own solid background
   color is what visually separates it from its neighbors, same as the
   reference. Collapses to 1 column on the same breakpoint tournament-
   single.css/tournaments.css already use elsewhere in this theme.
   .pc-promo-grid (inside a .pc-container, see front-page.php -- same one
   the hero/every other section on the page already uses) is what actually
   lays the 3 cards out side by side, inset to the site's normal content
   width like everything above/below it (reported directly, screenshot:
   without that .pc-container this strip ran the full width of the browser
   window on desktop, into the side margins nothing else on the page ever
   reaches).

   .pc-promo-strip itself (the outer, full-bleed section wrapping that
   .pc-container) gets the SAME petrol background as the hero section right
   above it (--pc-dark-bg) -- requested directly: on a wide screen, where
   the centered .pc-container doesn't reach the viewport edges, that
   left/right margin should read as a continuation of the hero's own
   full-bleed petrol band, not a gap back to the plain page background. */
.pc-promo-strip {
	background: var(--pc-dark-bg);
}

.pc-promo-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 640px) {
	.pc-promo-grid {
		grid-template-columns: 1fr;
	}
}

.pc-promo-card {
	display: flex;
	flex-direction: column;
	padding: var(--pc-space-lg) var(--pc-space-md);
}

.pc-promo-card .pc-heading {
	font-size: 1.15rem;
}

.pc-promo-card > p:not(.pc-eyebrow) {
	margin: 0 0 var(--pc-space-md);
}

/* The button/placeholder always sits at the bottom of its card, regardless
   of how many lines the paragraph above it wraps to -- margin-top: auto
   pushes it down within the card's own flex column, so all 3 buttons line
   up on the same baseline across the 3 cards even when their text lengths
   differ. */
.pc-promo-card .pc-btn {
	align-self: flex-start;
	margin-top: auto;
}

.pc-promo-card--alert {
	background: var(--pc-red);
	color: #fff;
}

/* Same shade as the homepage's own LIVE strip (.pc-section--dark-surface,
   --pc-dark-surface) -- requested directly. (The petrol *around* this and
   the other 2 cards, in the strip's own side margins, is --pc-dark-bg
   instead -- see .pc-promo-strip above -- a deliberately different,
   slightly darker shade so this card still reads as its own distinct
   block rather than blending into the section background it sits on.) */
.pc-promo-card--dark {
	background: var(--pc-dark-surface);
	color: var(--pc-dark-text);
}

/* Reported directly: "Everything set up to ICO standards." read as almost
   the same color as the card's own dark background. .pc-text-muted's
   plain default (--pc-light-text-muted, components.css) is meant for a
   LIGHT background -- normally .pc-section--dark supplies the lighter
   dark-background counterpart automatically, but this card isn't inside
   one, so that swap never happened here. */
.pc-promo-card--dark .pc-text-muted {
	color: var(--pc-dark-text-muted);
}

.pc-promo-card--light {
	/* #dfe4e7, same as --pc-band-bg (tokens.css) -- requested directly. */
	background: var(--pc-band-bg);
	color: var(--pc-light-text);
}

/* White pill / red text -- the inverse of .pc-btn--primary, used only on
   the red "old site" card above, where a solid red button would disappear
   against its own red background. */
.pc-btn--inverse {
	background: #fff;
	color: var(--pc-red);
}

.pc-btn--inverse:hover,
.pc-btn--inverse:focus-visible {
	background: var(--pc-dark-bg);
	color: #fff;
}

/* 3rd card's countdown (assets/js/promo-countdown.js fills in the actual
   numbers; the em dash placeholders above are only ever seen for the
   instant before that script's first tick, or with JS disabled). */
.pc-promo-countdown {
	display: flex;
	gap: var(--pc-space-xs);
	margin: 0 0 var(--pc-space-sm);
}

.pc-promo-countdown-box {
	flex: 1 1 0;
	min-width: 0;
	background: var(--pc-light-surface);
	border: 1px solid var(--pc-light-border);
	border-radius: var(--pc-radius-sm);
	padding: 0.5rem 0.25rem;
	text-align: center;
}

.pc-promo-countdown-box span {
	display: block;
	font-family: var(--pc-font-heading);
	font-size: 1.4rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--pc-light-text);
}

.pc-promo-countdown-box small {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pc-red);
}

.pc-promo-countdown-date {
	margin: 0 !important;
	font-size: 0.85rem;
}

.pc-top-rankings-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--pc-space-lg);
}

/* Gap between the header bar and the rankings list underneath it --
   tightened directly (reference screenshot: wanted much closer to the
   list than the previous var(--pc-space-sm)/1rem gap). This is a single
   shared flex `gap`, so it also thins the space before the "View all"
   button below the list -- left as-is there since that button already
   carries its own separate margin-top (see .pc-top-rankings-view-all)
   stacking on top of this gap, so its total spacing stays close to
   before. */
.pc-top-rankings-column {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

/* Full-width header bar -- same dark petrol shade as the homepage's own
   LIVE strip (--pc-dark-surface, .pc-section--dark-surface), now filling
   the card's entire header instead of just a pill hugging the "OPEN"/
   "WOMEN" text (corrected directly, reference screenshot: the previous
   version only colored a tight box around the heading, not the whole
   ranking header). Bleeds out to the card's own top/left/right edges via
   negative margins that cancel .pc-card's own padding (--pc-space-md) --
   the same bleed-to-edge trick .pc-top-rankings-scroll-wrap below already
   uses horizontally -- then repads the inside so the heading text still
   sits inset, aligned with the row content underneath it. Only the top
   corners take the card's own radius (matching, concentric with the
   card's own rounded corners so the bar reads as flush with them); the
   bottom stays square since it sits flush against the gap before the
   (light) rankings list below, not another rounded edge. */
.pc-top-rankings-heading-wrap {
	background: var(--pc-dark-surface);
	border-radius: var(--pc-radius) var(--pc-radius) 0 0;
	margin: calc(var(--pc-space-md) * -1) calc(var(--pc-space-md) * -1) 0;
	padding: 0.85rem var(--pc-space-md) 1rem;
}

/* Short accent underline below "OPEN"/"WOMEN" (requested directly,
   reference screenshot) -- a fixed short bar, not the full heading
   width, so it reads as a small decorative rule rather than a border
   under the whole word. position: relative + an ::after keeps it out of
   the document flow (its own padding-bottom below reserves the room). */
.pc-top-rankings-heading {
	display: block;
	font-family: var(--pc-font-heading);
	font-size: 1.75rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	margin: 0;
	position: relative;
	padding-bottom: 0.35rem;
	color: var(--pc-dark-text);
}

.pc-top-rankings-heading::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 2.5rem;
	height: 3px;
	background: var(--pc-red);
}

/* Top 10, shown 5 rows at a time in a fixed-height scroll window
   (assets/js/top-rankings-scroll.js measures and sets .pc-top-rankings-
   list's own height -- never hardcoded here, since row height depends on
   content/font-size). Positioned so the arrow buttons + fade overlays
   below can sit absolutely over the list's own top/bottom edges.

   The hover-bleed trick now lives HERE (not on .pc-top-rankings-row
   anymore) -- bleeds the whole control (arrows + list) out to the
   .pc-card's own edges. Moved up from the row itself because
   .pc-top-rankings-list needs "overflow-y: auto" for the scroll window,
   and per spec, setting either overflow-x or overflow-y to anything other
   than visible forces the OTHER axis to "auto" too, even if never set
   explicitly -- so a row's own negative margin trying to bleed sideways
   past the list's box was silently getting clipped at the list's own
   (un-bled) edge instead of actually reaching the card's edge (reported
   directly: hover no longer reached the full row width). This wrapper has
   no overflow rule of its own, so its negative margin is never clipped. */
.pc-top-rankings-scroll-wrap {
	position: relative;
	margin-inline: calc(var(--pc-space-md) * -1);
}

.pc-top-rankings-list {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	/* Hides the native scrollbar (the circular arrow buttons are the only
	   visible scroll affordance, per the reference) -- wheel/touch
	   scrolling on the list itself still works either way, this only
	   affects the scrollbar's own paint. */
	scrollbar-width: none;
}

.pc-top-rankings-list::-webkit-scrollbar {
	display: none;
}

/* Fade masks over a row that's only partially visible at the list's own
   top/bottom edge -- gradient from the card's own background color (so it
   blends in) to transparent. Only shown while there's actually more
   content in that direction (.can-scroll-up/-down, toggled by
   top-rankings-scroll.js in lockstep with the arrow buttons' own
   visibility below), never a hard, sudden edge. */
.pc-top-rankings-scroll-wrap::before,
.pc-top-rankings-scroll-wrap::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: 1.5rem;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.pc-top-rankings-scroll-wrap::before {
	top: 0;
	background: linear-gradient(to bottom, var(--pc-light-surface), transparent);
}

.pc-top-rankings-scroll-wrap::after {
	bottom: 0;
	background: linear-gradient(to top, var(--pc-light-surface), transparent);
}

.pc-top-rankings-scroll-wrap.can-scroll-up::before {
	opacity: 1;
}

.pc-top-rankings-scroll-wrap.can-scroll-down::after {
	opacity: 1;
}

/* Circular scroll buttons -- fully hidden (not just disabled) until
   top-rankings-scroll.js adds .is-visible, exactly at the scroll extremes
   where there's nothing more to reveal in that direction. Light gray fill
   (--pc-light-border, already the site's own "light gray" token) instead
   of near-white -- reported as too faint to notice against the card's own
   white background. The chevron itself is an inline SVG (see
   playcross_render_top_rankings_column()), not a text/Unicode glyph --
   text glyphs for an arrow-like icon render with inconsistent optical
   centering across fonts/browsers (reported directly: the arrow sat
   visibly off-center within the circle); an SVG's own viewBox always
   centers exactly, regardless of font. */
.pc-top-rankings-scroll-btn {
	display: none;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	width: 2rem;
	height: 2rem;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: none;
	background: var(--pc-light-border);
	box-shadow: 0 1px 4px rgba(10, 46, 58, 0.2);
	color: var(--pc-light-text-muted);
	cursor: pointer;
}

.pc-top-rankings-scroll-btn svg {
	display: block;
}

.pc-top-rankings-scroll-btn.is-visible {
	display: flex;
}

.pc-top-rankings-scroll-btn--up {
	top: 0.25rem;
}

.pc-top-rankings-scroll-btn--down {
	bottom: 0.25rem;
}

/* The bleed-to-card-edge trick lives on .pc-top-rankings-scroll-wrap now
   (see above), not here -- this row just needs its own inline padding so
   its content lines up the same as before, now that the row spans the
   full (already bled-out) width of its .pc-top-rankings-list parent. */
.pc-top-rankings-row {
	display: flex;
	align-items: center;
	gap: var(--pc-space-sm);
	padding: 0.85rem var(--pc-space-md);
	border-bottom: 1px solid var(--pc-light-border);
	transition: background-color 0.15s ease;
}

.pc-top-rankings-row:last-child {
	border-bottom: none;
}

/* Row hover -- petrol background (the same --pc-dark-bg already used in
   the header/section headings elsewhere, reused rather than a new color),
   rank/name/points switch to --pc-yellow. Country name (+flag) stays a
   neutral, merely readable-on-dark color instead -- NOT yellow, per the
   spec. The favorite star (.pca-favorite-toggle) is deliberately left
   alone here -- it must stay visually the same regardless of row hover. */
.pc-top-rankings-row:hover {
	background: var(--pc-dark-bg);
	border-bottom-color: var(--pc-dark-bg);
}

.pc-top-rankings-row:hover .pc-top-rankings-rank,
.pc-top-rankings-row:hover .pc-top-rankings-name,
.pc-top-rankings-row:hover .pc-top-rankings-points {
	color: var(--pc-yellow);
}

.pc-top-rankings-row:hover .pc-top-rankings-country {
	color: var(--pc-dark-text);
}

.pc-top-rankings-rank {
	flex: 0 0 1.5rem;
	font-family: var(--pc-font-heading);
	font-weight: 800;
	font-size: 1.1rem;
}

.pc-top-rankings-flag {
	flex: 0 0 auto;
	font-size: 2.7rem; /* +50% (was 1.8rem) */
	line-height: 1;
}

/* Wraps the name line + the subline (country + points/star) as its own
   column, so points/star sit on the SAME line as the country instead of
   competing with the name for horizontal space -- a long name now gets the
   full row width to itself on its own line, pushing points/star down to
   share the country's line underneath it instead of squeezing everything
   into one row (reported directly: on mobile, a long name should end up
   above the points, not fighting them for space). */
.pc-top-rankings-main {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.pc-top-rankings-name {
	min-width: 0;
	font-weight: 700;
	font-size: 1.126125rem; /* +30% over 0.875rem body size, then -10%, then +10% per follow-up requests */
}

.pc-top-rankings-name a {
	text-decoration: none;
	color: inherit;
}

/* Second line: country at the start, points + favorite star at the end
   (same "end of the row" position they always had) -- space-between pushes
   them apart, .pc-top-rankings-meta keeps points+star together as one
   group so they don't get separated from each other. */
.pc-top-rankings-subline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pc-space-sm);
	min-width: 0;
}

.pc-top-rankings-country {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 400;
	font-size: 0.64rem; /* -20% (was 0.8rem) */
	color: var(--pc-light-text-muted);
}

.pc-top-rankings-meta {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.pc-top-rankings-points {
	flex: 0 0 auto;
	font-family: var(--pc-font-heading);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	font-size: 1.00625rem; /* +15% over the inherited 0.875rem body size */
}

.pc-top-rankings-view-all {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	margin-top: var(--pc-space-sm);
}

/* Light gray fill (--pc-light-border, same token the scroll buttons above
   use) instead of the plain transparent/white .pc-btn--outline default --
   reported as too faint against the card's own white background. Own
   rule, not .pc-btn--outline's shared default, and combined with that
   class for higher specificity so this reliably wins regardless of CSS
   file load order (doesn't affect any other outline button on the site). */
.pc-top-rankings-view-all.pc-btn--outline {
	background: var(--pc-light-border);
	border-color: var(--pc-light-border);
}

/* Hover: same petrol color as the row hover above, reused rather than a
   new one. */
.pc-top-rankings-view-all.pc-btn--outline:hover {
	background: var(--pc-dark-bg);
	border-color: var(--pc-dark-bg);
	color: var(--pc-dark-text);
}

/* Mobile/smaller screens: fixed breakpoint (same 640px used elsewhere in
   this theme, e.g. tournament-single.css / tournaments.css) rather than
   fluid clamp() scaling -- per explicit choice, simple and consistent with
   the rest of the codebase's responsive rules. Flag/name drop back to the
   sizes they were at before this row's desktop enlargement (2.7rem/
   1.126125rem), since the enlarged sizes don't fit comfortably at mobile
   row widths. Column stacking and the name's own line-wrap are left alone
   here -- the existing auto-fit grid already stacks the two ranking
   columns when the container gets narrow enough, and the name-wrap
   behavior is intentionally untouched for now. */
@media (max-width: 640px) {
	.pc-top-rankings-flag {
		font-size: 1.8rem;
	}

	.pc-top-rankings-name {
		font-size: 0.875rem;
	}
}

/* -------------------------------------------------- Upcoming tournaments */
/* Rebuilt to an exact, fully-specified brief (reference screenshot) — see
   playcross_render_tournament_card()'s own docblock (template-tags.php) for
   the 3 deliberate departures from that brief's own literal values
   (typeface, near-duplicate hex colors, status-pill semantics), all in
   service of the SAME "keep this site's existing visual language" rule
   already established on 2 earlier from-a-brief builds (player-profile.css,
   rankings.css) — confirmed with the user (capacity bar specifically needs
   TICO_Tournament's own new 'max_players' field, added for this; see that
   docblock too). */

.pc-upcoming-section {
	background: var(--pc-light-bg);
	color: var(--pc-light-text);
	padding-block: 44px;
}

.pc-upcoming-heading-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--pc-space-sm);
	margin-bottom: 28px;
}

.pc-upcoming-heading {
	margin: 0;
	font-size: 30px;
}

.pc-upcoming-all-link {
	flex: 0 0 auto;
	font-family: var(--pc-font-body);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pc-red);
	text-decoration: none;
	white-space: nowrap;
}

.pc-upcoming-all-link:hover,
.pc-upcoming-all-link:focus-visible {
	color: var(--pc-red-hover);
}

.pc-upcoming-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

@media (max-width: 1024px) {
	.pc-upcoming-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.pc-upcoming-grid {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------- Tournament card */

.pc-tournament-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 16px;
	background: var(--pc-light-surface);
	box-shadow: 0 1px 2px rgba(10, 46, 58, 0.09);
	color: inherit;
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pc-tournament-card:hover,
.pc-tournament-card:focus-visible {
	transform: translateY(-5px);
	box-shadow: 0 20px 42px -20px rgba(10, 46, 58, 0.45);
}

/* No focus ring exists anywhere else on the site to stay consistent with
   (grepped) -- this is a new, bespoke component, so it gets its own rather
   than relying on the bare default outline. */
.pc-tournament-card:focus-visible {
	outline: 2px solid var(--pc-red);
	outline-offset: 3px;
}

.pc-tournament-card-header {
	display: flex;
	/* Centered (not flex-start) -- the date block is shorter than the
	   ICO-points box (which carries its own top/bottom padding), so
	   flex-start pinned the date to the header's top edge instead of its
	   middle, reading as "too high" next to the taller box (reported
	   directly). */
	align-items: center;
	justify-content: space-between;
	gap: var(--pc-space-sm);
	padding: 20px 24px;
	background: var(--pc-dark-bg);
}

.pc-tournament-card-date {
	display: flex;
	align-items: flex-end;
	gap: 0.4rem;
}

.pc-tournament-card-day {
	font-family: var(--pc-font-heading);
	font-weight: 800;
	font-size: 40px;
	line-height: 0.8;
	font-variant-numeric: tabular-nums;
	color: #fff;
}

.pc-tournament-card-monthyear {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.pc-tournament-card-month {
	line-height: 1;
	font-family: var(--pc-font-heading);
	font-weight: 700;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.26em;
	color: var(--pc-red);
}

.pc-tournament-card-year {
	line-height: 1;
	font-family: var(--pc-font-body);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.16em;
	color: var(--pc-dark-text-muted);
}

.pc-tournament-card-points {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	/* Centered (not flex-end) -- "Points" is narrower than "ICO 100" above
	   it, so right-aligning left it visually off-center under the value
	   line instead of centered under it (reported directly). */
	align-items: center;
	gap: 0.2rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 8px;
	white-space: nowrap;
}

.pc-tournament-card-points-value {
	font-family: var(--pc-font-body);
	font-weight: 800;
	font-size: 15px;
	color: #fff;
}

.pc-tournament-card-points-value strong {
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--pc-red);
}

.pc-tournament-card-points-label {
	font-family: var(--pc-font-body);
	font-weight: 600;
	font-size: 8px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pc-dark-text-muted);
}

.pc-tournament-card-bar {
	flex: 0 0 auto;
	height: 4px;
	background: var(--pc-red);
}

.pc-tournament-card-body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 22px 24px 24px;
}

.pc-tournament-card-status-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.6rem;
}

/* Reuses .pc-badge/.pc-badge--soon/--win/--live as-is (components.css) for
   color + the pulsing dot — only sized down for this denser card context,
   never a parallel status-color system of its own. */
.pc-tournament-card-status-row .pc-badge {
	padding: 0.25rem 0.55rem;
	font-size: 10px;
	letter-spacing: 0.14em;
	white-space: nowrap;
}

.pc-tournament-card-series {
	font-family: var(--pc-font-body);
	font-weight: 600;
	font-size: 11px;
	text-transform: uppercase;
	color: var(--pc-light-text-muted);
}

/* Fixed height + line-clamp (brief's own values) so every card's title sits
   the same number of lines tall regardless of name length, keeping the meta
   grid/capacity/CTA below it aligned across the whole row of cards. */
.pc-tournament-card-title {
	margin: 0;
	height: 53px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-family: var(--pc-font-heading);
	font-weight: 800;
	font-size: 22px;
	line-height: 1.2;
	color: var(--pc-light-text);
}

.pc-tournament-card-meta {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 14px;
	padding-block: 14px;
	border-top: 1px solid var(--pc-light-border);
	border-bottom: 1px solid var(--pc-light-border);
}

.pc-tournament-card-meta-label {
	display: block;
	margin-bottom: 0.2rem;
	font-family: var(--pc-font-body);
	font-weight: 600;
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pc-light-text-muted);
}

.pc-tournament-card-meta-value {
	display: block;
	font-family: var(--pc-font-body);
	font-weight: 600;
	font-size: 14px;
	color: var(--pc-light-text);
}

.pc-tournament-card-capacity {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.pc-tournament-card-progress {
	flex: 1 1 auto;
	height: 4px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--pc-light-border);
}

.pc-tournament-card-progress-fill {
	height: 100%;
	border-radius: inherit;
	background: var(--pc-red);
}

.pc-tournament-card-capacity-text {
	flex: 0 0 auto;
	font-family: var(--pc-font-body);
	font-weight: 600;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	color: var(--pc-light-text-muted);
}

.pc-tournament-card-deadline {
	margin: 0;
	font-family: var(--pc-font-body);
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	color: var(--pc-red);
}

.pc-tournament-card-cta {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin-top: auto;
	padding: 15px;
	border-radius: 9px;
	background: var(--pc-red);
	color: #fff;
	font-family: var(--pc-font-body);
	font-weight: 700;
	font-size: 15px;
	text-align: center;
	transition: background-color 0.2s ease;
}

/* The whole card is ONE link (confirmed in the brief) -- this button is
   really just a styled span, so its own hover state IS the card's hover
   state, not a separate interaction. */
.pc-tournament-card:hover .pc-tournament-card-cta,
.pc-tournament-card:focus-visible .pc-tournament-card-cta {
	background: var(--pc-dark-bg);
}

/* -------------------------------------------------------- Live strip cards */
/* Redesigned entirely (requested directly, reference screenshot) from the
   earlier scrolling-text marquee into compact match cards -- petrol/dark-
   surface section background (unchanged), 3 light cards on top of it.
   Homepage-only; the Matches/Draws tabs' own live cards are a completely
   separate, unrelated component (playcross_render_draw_match_card() +
   matches-board.css) -- deliberately NOT reused here, per explicit
   request, so this stays its own compact shape suited to a small strip
   rather than a full scoreline card. */
.pc-live-heading {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 var(--pc-space-sm);
	font-weight: 600;
}

.pc-live-heading-dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--pc-red);
	animation: pc-pulse 1.4s ease-in-out infinite;
}

.pc-live-heading-dot[hidden] {
	display: none;
}

.pc-live-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--pc-space-sm);
}

@media (max-width: 640px) {
	.pc-live-cards {
		grid-template-columns: 1fr;
	}
}

/* Each card is its own <a> (the whole thing links to the match's Draws
   sub-tab, requested directly) -- reset to a plain block so it doesn't
   pick up default link styling (underline/blue) anywhere inside it. */
/* Top-left corner squared off (requested directly) -- same asymmetric
   corner treatment the Matches board's own .pc-matches-card already uses;
   every other corner keeps the normal --pc-radius. */
.pc-live-card {
	display: block;
	overflow: hidden;
	border-radius: 0 var(--pc-radius) var(--pc-radius) var(--pc-radius);
	background: var(--pc-card-surface);
	color: var(--pc-card-text);
	text-decoration: none;
	box-shadow: var(--pc-card-shadow);
}

/* Petrol by default (a decided/recent result) -- same red-while-LIVE
   swap every other match header on the site already uses, just this
   component's own class name rather than matches-board.css's. */
.pc-live-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pc-space-xs);
	padding: 0.4rem 0.65rem;
	background: var(--pc-card-header-bg);
	color: var(--pc-card-header-text);
	font-size: 0.75rem;
	font-weight: 700;
	white-space: nowrap;
}

.pc-live-card-header--live {
	background: var(--pc-card-header-bg-live);
}

.pc-live-card-body {
	padding: 0.15rem 0.65rem;
}

/* The row/player/scores/set-number classes that used to live here
   (.pc-live-card-row and everything below it) moved to components.css --
   requested directly: the Matches board's own cards and the Draws tab's
   own group/KO match lists now reuse this EXACT same component (not a
   look-alike copy), so it had to move somewhere both front-page.css and
   matches-board.css/tournament-single.css can reach without either one
   depending on the other. See components.css's own "Live-style match
   row" section for the full rule set. */