/*
 * WTR Tidewater · hubs (WP6): competition and team hubs, /competitions/, /teams/ (+ 5).
 * Family "hub" only (inc/hubs-data.php). Colour through tokens only; light at launch,
 * dark-ready. Values from the prototype (WTR 6 Competitions and Teams) as measured in
 * analysis/05 §2–§6 and tidewater/work/hubs/measures.json.
 * Breakpoints: < 600 phone, 600–1023 tablet, ≥ 1024 desktop (sidebar), ≥ 1280 wide.
 */

/* ---------- page ---------- */
.wx-hub { background: var(--wtr-bg); }
.wx-hub-crumbs { padding-block: 12px; }
.wx-hub-crumbs .wx-crumbs, .wx-hub-crumbs .wx-crumbs-list { min-block-size: 17px; line-height: 17px; }

/* ---------- hero band ---------- */
.wx-hub-hero {
	background: var(--wtr-surface);
	border-bottom: 1px solid var(--wtr-border);
	padding-block: 20px;
}
.wx-hub-hero-in { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.wx-hub-hero-text { display: grid; gap: 6px; flex: 1 1 280px; min-width: 0; }
.wx-hub-kicker {
	margin: 0;
	color: var(--wtr-meta);
	/* The prototype's kicker and facts sit on Hanken's normal line box (16 / 18 px). */
	font: 700 var(--wtr-fs-overline)/16px var(--wtr-ff-sans);
	letter-spacing: .1em;
	text-transform: uppercase;
}
.wx-hub-h1,
.wx-hub-index-h1 {
	margin: 0;
	color: var(--wtr-heading);
	font: 800 30px/1.05 var(--wtr-ff-sans);
	letter-spacing: -.018em;
	overflow-wrap: anywhere;
}
.wx-hub-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--wtr-meta);
	font: 400 var(--wtr-fs-ui-s)/18px var(--wtr-ff-sans);
}
.wx-hub-facts a { position: relative; color: inherit; text-decoration: underline; text-decoration-color: var(--wtr-border); text-underline-offset: .2em; }
.wx-hub-facts a::after { content: ""; position: absolute; inset: -13px -2px; }
.wx-hub-facts a:hover { color: var(--wtr-heading); text-decoration-color: currentColor; }
/* Hero tile: 72 on phones, 96 from 600 (WP0 tile sizes through its custom properties). */
.wx-hub-tile.wx-tile--96 { --wx-t: 72px; --wx-tp: 9px; --wx-tr: 12px; --wx-tf: 20px; }
/* Monograms as the hub prototype draws them (polish pass): Hanken's normal line box, no
   tracking; the hero bar 26 x 3 five px under the letters; competition cards 12 px with a
   16 x 2 bar four px under; team tiles 13 px (48) / 11 px (40) without a bar. */
:is(.wx-hub, .wx-hub-hero) .wx-tile-mono { line-height: normal; letter-spacing: normal; }
.wx-hub-tile .wx-tile-mono { gap: 5px; }
.wx-hub-tile .wx-tile-mono::after { inline-size: 26px; block-size: 3px; }
.wx-hub-cards--3 .wx-tile { --wx-tf: 12px; }
.wx-hub-cards--3 .wx-tile-mono { gap: 4px; }
:is(.wx-hub-cards:not(.wx-hub-cards--3), .wx-hub-ov-card) .wx-tile { --wx-tf: 13px; }
:is(.wx-hub-cards:not(.wx-hub-cards--3), .wx-hub-ov-card) .wx-tile-mono::after { content: none; }
.wx-hub-trow .wx-tile { --wx-tf: 11px; }

/* ---------- tab bar (links, aria-current) ---------- */
.wx-hub-tabs { padding-inline: 8px; }
.wx-hub-tabs .wx-tab { block-size: 52px; padding: 0 14px; font-size: 15px; }
.wx-hub-tabs-wrap { background: var(--wtr-surface); }

/* ---------- body and layout ---------- */
.wx-hub-body { padding-block: 24px 48px; }
.wx-hub-main { display: grid; gap: 32px; min-width: 0; align-content: start; }
/* Flex, not grid: a grid item's containing block is its own area, so the sticky last block
   (≥ 1024) could not move; a flex item's is the aside. */
.wx-hub-aside { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.wx-hub-aside > * { min-width: 0; }

/* Section heads in the hub (WP0 section head look); headings inside groups. */
.wx-hub-head { margin-bottom: 0; }
.wx-hub-head--sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; }
.wx-hub-group { display: grid; gap: 0; min-width: 0; }
.wx-hub-earlier { margin: 8px 0 12px; color: var(--wtr-heading); font: 800 20px/1.2 var(--wtr-ff-sans); }
.wx-hub-h3 { margin: 20px 0 4px; color: var(--wtr-meta); font: 700 var(--wtr-fs-overline)/1.3 var(--wtr-ff-sans); letter-spacing: .1em; text-transform: uppercase; }
.wx-hub-count { margin-left: 4px; color: var(--wtr-meta); font: 600 14px/1 var(--wtr-ff-sans); letter-spacing: 0; }
.wx-hub-note {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 12px 0 0;
	padding: 12px 14px;
	border-radius: var(--wtr-radius-sm);
	background: var(--wtr-section);
	color: var(--wtr-text);
	font: 400 var(--wtr-fs-ui-s)/1.45 var(--wtr-ff-sans);
}
.wx-hub-note .wx-i { flex: none; color: var(--wtr-meta); margin-top: 1px; }

/* ---------- compact match rows: WP0's row-compact (M3) inside a plain list ---------- */
.wx-hub-rows { margin: 0; padding: 0; list-style: none; }

/* ---------- month nav (?month=) ---------- */
.wx-hub-month { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 12px; }
.wx-hub-month-cur { min-inline-size: 9ch; color: var(--wtr-heading); font: 700 var(--wtr-fs-ui-s)/1.2 var(--wtr-ff-sans); text-align: center; }
.wx-hub-month-all { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--wtr-link); font: 700 var(--wtr-fs-ui-s)/1.2 var(--wtr-ff-sans); }

/* ---------- card grids (indexes, Teams tab) ---------- */
.wx-hub-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.wx-hub-card {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 14px;
	align-items: center;
	box-sizing: border-box;
	min-block-size: 78px;
	padding: 14px;
	border: 1px solid var(--wtr-border);
	border-radius: var(--wtr-radius-md);
	background: var(--wtr-surface);
	color: var(--wtr-heading);
	text-decoration: none;
}
a.wx-hub-card:hover { border-color: var(--wtr-control); text-decoration: none; }
a.wx-hub-card:hover .wx-hub-card-name { text-decoration: underline; text-underline-offset: .18em; }
.wx-hub-card-t { display: grid; gap: 3px; min-width: 0; }
.wx-hub-card-name { color: var(--wtr-heading); font: 700 16px/1.25 var(--wtr-ff-sans); overflow-wrap: anywhere; }
.wx-hub-card-sub { color: var(--wtr-meta); font: 400 var(--wtr-fs-caption)/17px var(--wtr-ff-sans); }
.wx-hub-card-sub time { color: inherit; }

/* Status dot + line (/competitions/): the text always says the state. */
.wx-hub-status { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--wtr-meta); font: 400 var(--wtr-fs-caption)/17px var(--wtr-ff-sans); }
.wx-hub-status time { color: inherit; }
.wx-hub-dot { flex: none; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--wtr-draw); }
.wx-hub-status[data-state="live"] .wx-hub-dot { background: var(--wtr-signal); }
.wx-hub-status[data-state="on"] .wx-hub-dot { background: var(--wtr-win); }
.wx-hub-status[data-state="soon"] .wx-hub-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--wtr-win); }
.wx-hub-status[data-state="off"] .wx-hub-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--wtr-draw); }
.wx-hub-status[data-state="done"] .wx-hub-dot { background: var(--wtr-draw); }

/* ---------- index pages ---------- */
.wx-hub-index { display: grid; gap: 32px; padding-block: 24px 48px; }
.wx-hub-index-head { display: grid; gap: 14px; }
.wx-hub-index-sub { margin: 0; color: var(--wtr-meta); font: 400 var(--wtr-fs-ui)/20px var(--wtr-ff-sans); }
.wx-hub-igroup { display: grid; gap: 12px; min-width: 0; }
.wx-hub-gh {
	margin: 0;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--wtr-heading);
	color: var(--wtr-heading);
	font: 800 20px/26px var(--wtr-ff-sans);
	letter-spacing: normal;
}

/* Teams directory: search, chips, rows. */
/* Search and chips continue the head's 14 px rhythm (prototype: one grid, gap 14). */
.wx-hub-find { display: grid; gap: 14px; }
.wx-hub-index-head + .wx-hub-find { margin-top: -18px; }
.wx-hub-search { position: relative; max-inline-size: 520px; }
.wx-hub-search > .wx-i { position: absolute; top: 14px; left: 14px; color: var(--wtr-meta); pointer-events: none; }
.wx-hub-q {
	box-sizing: border-box;
	inline-size: 100%;
	block-size: 48px;
	margin: 0;
	padding: 0 14px 0 44px;
	border: 1.5px solid var(--wtr-control);
	border-radius: var(--wtr-radius-pill);
	background: var(--wtr-surface);
	color: var(--wtr-heading);
	font: 500 16px/1 var(--wtr-ff-sans);
	appearance: none;
}
.wx-hub-q::placeholder { color: var(--wtr-meta); opacity: 1; }
.wx-hub-q::-webkit-search-cancel-button { cursor: pointer; }
.wx-hub-tchips { min-width: 0; }
.wx-hub-tchips ul { display: flex; gap: 8px; margin: -2px 0; padding: 2px 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.wx-hub-tchips ul::-webkit-scrollbar { display: none; }
.wx-hub-tchip {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex: none;
	box-sizing: border-box;
	block-size: 40px;
	padding: 0 14px;
	border: 1.5px solid var(--wtr-control);
	border-radius: var(--wtr-radius-pill);
	background: var(--wtr-surface);
	color: var(--wtr-heading);
	font: 600 var(--wtr-fs-ui-s)/1 var(--wtr-ff-sans);
	text-decoration: none;
	white-space: nowrap;
}
.wx-hub-tchip::after { content: ""; position: absolute; inset: -3px 0; }
.wx-hub-tchip:hover { background: var(--wtr-tag-bg); color: var(--wtr-heading); text-decoration: none; }
.wx-hub-tchip[aria-current="page"] { border-color: var(--wtr-btn); background: var(--wtr-btn); color: var(--wtr-btn-text); }
.wx-hub-tchip:focus-visible { outline-offset: 2px; }
.wx-hub-trows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 16px; margin: 0; padding: 0; list-style: none; }
.wx-hub-trows > li[hidden], .wx-hub-tg[hidden] { display: none; }
.wx-hub-trow {
	display: flex;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
	min-block-size: 60px;
	margin: 0 -8px;
	padding: 6px 8px;
	border-radius: 8px;
	color: var(--wtr-heading);
	text-decoration: none;
}
a.wx-hub-trow:hover { background: var(--wtr-section); text-decoration: none; }
a.wx-hub-trow:hover .wx-hub-trow-name { text-decoration: underline; text-underline-offset: .18em; }
.wx-hub-trow-t { display: grid; gap: 1px; min-width: 0; }
.wx-hub-trow-name { overflow: hidden; color: var(--wtr-heading); font: 700 15.5px/21px var(--wtr-ff-sans); text-overflow: ellipsis; white-space: nowrap; }
.wx-hub-trow-sub { overflow: hidden; color: var(--wtr-meta); font: 400 12.5px/17px var(--wtr-ff-sans); text-overflow: ellipsis; white-space: nowrap; }
.wx-hub-trow-sub time { color: inherit; }
.wx-hub-noresult[hidden] { display: none; }

/* ---------- team Overview cards ---------- */
.wx-hub-ov { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.wx-hub-ov-card {
	position: relative;
	display: grid;
	gap: 12px;
	align-content: start;
	min-width: 0;
	padding: 20px;
	border: 1px solid var(--wtr-border);
	border-radius: var(--wtr-radius-md);
	background: var(--wtr-surface);
}
.wx-hub-ov-k { margin: 0; color: var(--wtr-meta); font: 700 var(--wtr-fs-overline)/16px var(--wtr-ff-sans); letter-spacing: .1em; text-transform: uppercase; }
.wx-hub-ov-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.wx-hub-ov-t { display: grid; gap: 2px; min-width: 0; }
.wx-hub-ov-t p, .wx-hub-ov-card > p { margin: 0; }
.wx-hub-ov-name { color: var(--wtr-heading); font: 700 18px/1.3 var(--wtr-ff-sans); overflow-wrap: anywhere; }
.wx-hub-ov-name a { color: inherit; text-decoration: none; }
.wx-hub-ov-name a:hover { text-decoration: underline; text-underline-offset: .18em; }
.wx-hub-ov-name .wx-num { font-family: var(--wtr-ff-mono); font-weight: 600; }
.wx-hub-ov-ko { color: var(--wtr-heading); font: 500 14px/18px var(--wtr-ff-mono); }
.wx-hub-ov-ko time { color: inherit; }
.wx-hub-ov-live { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wx-hub-ov-score { color: var(--wtr-heading); font: 600 18px/1.2 var(--wtr-ff-mono); }
/* Next match by state (live.js rewrites data-wx-state): the kick-off before it, the chip and
   score after it; the kicker word and the actions follow (fix pass M2). */
.wx-hub-ov-next :is(.wx-hub-ov-k-on, .wx-hub-ov-k-end, .wx-hub-ov-act-on) { display: none; }
.wx-hub-ov-next[data-wx-state="pre"] .wx-hub-ov-live,
.wx-hub-ov-next:not([data-wx-state="pre"]) :is(.wx-hub-ov-ko, .wx-hub-ov-act-pre),
.wx-hub-ov-next:is([data-wx-state="pst"], [data-wx-state="canc"], [data-wx-state="tbc"]) .wx-hub-ov-score { display: none; }
.wx-hub-ov-next:is([data-wx-state="live"], [data-wx-state="ht"], [data-wx-state="int"]) .wx-hub-ov-k-pre,
.wx-hub-ov-next:is([data-wx-state="ft"], [data-wx-state="abd"]) .wx-hub-ov-k-pre { display: none; }
.wx-hub-ov-next:is([data-wx-state="live"], [data-wx-state="ht"], [data-wx-state="int"]) .wx-hub-ov-k-on,
.wx-hub-ov-next:is([data-wx-state="ft"], [data-wx-state="abd"]) .wx-hub-ov-k-end { display: inline; }
.wx-hub-ov-next:not([data-wx-state="pre"]) .wx-hub-ov-act-on { display: inline-flex; }
.wx-hub-ov-meta { color: var(--wtr-meta); font: 400 var(--wtr-fs-caption)/17px var(--wtr-ff-sans); }
.wx-hub-ov-ground { gap: 10px; }
.wx-hub-ov-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.wx-hub-ov-acts .wx-btn--md { padding-inline: 14px; font-size: var(--wtr-fs-ui-s); }
.wx-hub-ov-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	justify-self: start;
	min-block-size: 44px;
	margin-block: -7px;
	color: var(--wtr-link);
	font: 700 var(--wtr-fs-ui-s)/1.2 var(--wtr-ff-sans);
	text-decoration: none;
}
.wx-hub-ov-link:hover { color: var(--wtr-link-hover); text-decoration: underline; text-underline-offset: .18em; }
.wx-hub-ov-line, .wx-hub-ov-text { color: var(--wtr-text); font: 400 var(--wtr-fs-ui-s)/1.5 var(--wtr-ff-sans); }
.wx-hub-ov-line .wx-num { font-family: var(--wtr-ff-mono); font-weight: 500; }
.wx-hub-ov-form .wx-form { gap: 5px; }
.wx-hub-ov-form .wx-hub-ov-line { line-height: 18px; }
.wx-hub-ov-form .wx-form-t { border-radius: 4px; font-size: 14px; }

/* ---------- squad ---------- */
.wx-hub-squad { display: grid; gap: 16px; min-width: 0; }
.wx-hub-squad + .wx-hub-squad { margin-top: -4px; }
.wx-hub-squad-head .wx-section-title { font-size: 18px; }
.wx-hub-squad-head .wx-hub-count { font-size: 13.5px; }
.wx-hub-sq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.wx-hub-sq { display: grid; gap: 8px; align-content: start; min-width: 0; color: var(--wtr-heading); text-decoration: none; }
a.wx-hub-sq:hover { text-decoration: none; }
a.wx-hub-sq:hover .wx-hub-sq-name { text-decoration: underline; text-underline-offset: .18em; }
/* 4:5 photo box (no shirt number: the feed has none per squad, fix pass M1). */
.wx-hub-sq .wx-photo.wx-hub-sq-photo { inline-size: 100%; block-size: auto; aspect-ratio: 4 / 5; border-radius: var(--wtr-radius-md); background: var(--wtr-photo-bg); }
.wx-hub-sq .wx-hub-sq-photo > img, .wx-hub-sq .wx-hub-sq-photo > .wx-photo-sil { inline-size: 100%; block-size: 100%; object-position: 50% 12%; }
.wx-hub-sq-name { color: var(--wtr-heading); font: 700 15px/1.25 var(--wtr-ff-sans); overflow-wrap: anywhere; }
.wx-hub-sq-meta { margin-top: -4px; color: var(--wtr-meta); font: 400 12.5px/1.3 var(--wtr-ff-sans); }

/* ---------- team fixtures: segmented links + competition chips ---------- */
.wx-hub-seg { display: inline-flex; justify-self: start; gap: 0; padding: 3px; border-radius: var(--wtr-radius-pill); background: var(--wtr-section); }
.wx-hub-seg a {
	position: relative;
	display: inline-flex;
	align-items: center;
	block-size: 38px;
	padding: 0 16px;
	border-radius: var(--wtr-radius-pill);
	color: var(--wtr-meta);
	font: 600 var(--wtr-fs-ui-s)/1 var(--wtr-ff-sans);
	text-decoration: none;
	white-space: nowrap;
}
.wx-hub-seg a::after { content: ""; position: absolute; inset: -6px 0; }
.wx-hub-seg a:hover { color: var(--wtr-heading); text-decoration: none; }
.wx-hub-seg a[aria-current="page"] { background: var(--wtr-surface); color: var(--wtr-heading); box-shadow: var(--wtr-shadow-1), inset 0 0 0 1px var(--wtr-border); }
.wx-hub-tchips--comp { margin-top: -16px; }

/* ---------- sidebar ---------- */
.wx-hub-side-table { display: grid; gap: 8px; min-width: 0; }
/* One fewer Plex weight (§4.4, ≤ 4 font files): the mini table PD in 500, the Table tab's
   positions in 400 (as on /tables/). */
.wx-hub .wx-st-pos { font-weight: 400; }
.wx-hub-side-table :is(.wx-mt-pd, caption, thead th) { font-weight: 500; }
.wx-hub-predictor { min-width: 0; }

/* ---------- grounds list (Teams tab) ---------- */
.wx-hub-grounds { display: grid; gap: 0; }
.wx-hub-ground-list { margin: 0; padding: 0; list-style: none; }
.wx-hub-ground {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 2px 12px;
	align-items: baseline;
	min-block-size: 56px;
	padding: 10px 0;
	border-bottom: 1px solid var(--wtr-border);
	color: var(--wtr-heading);
	text-decoration: none;
}
.wx-hub-ground:hover .wx-hub-ground-name { text-decoration: underline; text-underline-offset: .18em; }
.wx-hub-ground-name { color: var(--wtr-heading); font: 700 15px/1.3 var(--wtr-ff-sans); }
.wx-hub-ground-city { grid-column: 1; color: var(--wtr-meta); font: 400 var(--wtr-fs-caption)/1.3 var(--wtr-ff-sans); }
.wx-hub-ground-cap { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--wtr-text); font: 500 13.5px/1 var(--wtr-ff-mono); }

/* ---------- ≥ 600 ---------- */
@media (min-width: 600px) {
	.wx-hub-crumbs { padding-block: 14px; }
	.wx-hub-hero { padding-block: 24px; }
	.wx-hub-tile.wx-tile--96 { --wx-t: var(--wtr-logo-96); --wx-tp: var(--wtr-logo-96-pad); --wx-tr: var(--wtr-logo-96-r); --wx-tf: 26px; }
	.wx-hub-h1, .wx-hub-index-h1 { font-size: 38px; }
	.wx-hub-tabs { padding-inline: 24px; }
	.wx-hub-body { padding-block: 32px 56px; }
	.wx-hub-index { padding-block: 32px 56px; }
	.wx-hub-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wx-hub-trows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wx-hub-ov { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wx-hub-sq-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- ≥ 1024 (sidebar beside the main column) ---------- */
@media (min-width: 1024px) {
	.wx-hub-crumbs { padding-block: 16px; }
	.wx-hub-hero { padding-block: 28px; }
	.wx-hub-h1, .wx-hub-index-h1 { font-size: 46px; }
	.wx-hub-tabs { padding-inline: max(8px, calc(var(--wtr-margin) - 14px)); }
	.wx-hub-body { padding-block: 36px 72px; }
	.wx-hub-index { padding-block: 36px 72px; }
	.wx-hub-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.wx-hub-trows { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.wx-hub-sq-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	/* The aside stretches to the row; its last block ("Latest on", the design's sticky slot)
	   sticks once the blocks above it have scrolled away. The whole aside is often taller
	   than the viewport (16-row table + list), so it never sticks as one (fix pass m3). */
	.wx-hub-aside > :last-child { position: sticky; top: var(--wtr-sticky-top); }
}
@media (min-width: 1280px) {
	.wx-hub-layout:has(> .wx-sidebar) { gap: 56px; }
	.wx-hub-sq-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* The live dot never pulses with reduced motion (WP0 handles its own chips). */
@media (prefers-reduced-motion: reduce) {
	.wx-hub-card, .wx-hub-tchip { transition: none; }
}

/* List rows: a date with a year ("22 Dec 2025") wraps inside WP0's 52 px time column
   instead of running into the headline (change request to WP0 filed in reports/WP6.md). */
.wx-hub .wx-card--list .wx-card-time { white-space: normal; }

/* Hub news (2.0.1, owner request): the first three stories as WP0's large card (lead, in-column
   form: photo, label, headline, standfirst, author and time), 28 px apart, each closed by its
   1 px rule; then every other story as WP0's compact card (96 px photo) in the Load more list. */
.wx-hub-leads-body { gap: 28px; }
.wx-hub-list .wx-card--compact:first-child { padding-top: 14px; border-top: 0; }
/* Section heads in the main column: the prototype's H2 sits on a 26 px line, no tracking. */
.wx-hub-main :is(.wx-section-title, .wx-panel-title) { line-height: 1.3; letter-spacing: normal; }
/* Sidebar heads as the prototype's sidebar title (17/700, 8 px to a 2 px rule); the "Full
   table" link keeps its 44 px hit area without growing the head. */
.wx-hub-aside .wx-section-head { padding-bottom: 8px; }
.wx-hub-aside .wx-section-title { font-size: 17px; font-weight: 700; line-height: 22px; }
.wx-hub-aside .wx-section-more { margin-block: -8px; }

/* Below a 680 px column the large cards stack (photo above the words), so a long headline is
   never squeezed beside the photo (as fix pass M5 did for the 2.0.0 lead): phones and the
   1024 column. Side by side the words start at the photo's top edge; in a 680–799 px column
   (768) the headline steps down to 24 px, so a long one stays within five lines. */
.wx-hub-leads .wx-card--lead-col { align-items: start; }
@container wx-cards (max-width: 679px) {
	.wx-hub-leads .wx-card--lead-col { grid-template-columns: minmax(0, 1fr); }
}
@container wx-cards (min-width: 680px) and (max-width: 799px) {
	.wx-hub-leads .wx-card--lead-col .wx-card-title { font-size: 24px; line-height: 1.12; }
	.wx-hub-leads .wx-card--lead-col .wx-card-dek { font-size: 17px; }
}

/* Team "Upcoming fixtures" (2.0.1): beside the column from 1024 (the sidebar copy); below 1024
   the copy in the main column, before the news, shows instead (dup = the sidebar copy of a view
   that prints both). An aside left with nothing visible takes no space. */
@media (max-width: 1023px) {
	.wx-hub-aside > .wx-hub-upnext--dup { display: none; }
	.wx-hub-aside:not(:has(> :not(.wx-hub-upnext--dup))) { display: none; }
}
@media (min-width: 1024px) {
	.wx-hub-main > .wx-hub-upnext--main { display: none; }
}