/* ==========================================================================
   Karta zápasu — single sp_event (SportsPress + Splash's own event template)

   Loaded only on match pages (see kobra_enqueue_event_assets in
   functions.php), on top of redesign.css, whose :root tokens and @font-face
   declarations this file relies on.

   Approach is CSS-first: SportsPress's markup here is plain tables with
   stable, semantic column classes (td.data-pim, td.data-goals, ...), which
   is far friendlier than the homepage widgets were — so nothing is rebuilt
   in JS. event.js only adds what CSS genuinely can't: Czech outcome labels,
   the winner row, the abbreviation legend, and dimming of zero values.

   Selectors are scoped under .stm-single-sp_event both to keep them off
   other pages and to win specificity fights with SportsPress's own
   stylesheets without reaching for !important.
   ========================================================================== */

/* ---------- Page scaffolding ---------- */
.stm-single-sp_event {
	padding-bottom: 90px;
}
.stm-single-sp_event .sp-section-content {
	margin: 0 0 54px;
}
.stm-single-sp_event .sp-section-content-excerpt,
.stm-single-sp_event .sp-section-content-video,
.stm-single-sp_event .sp-tab-group {
	margin: 0;
}

/* Section label: small yellow caps with a rule running to the right edge.
   Applied both to SportsPress's own captions and to the headings event.js
   injects, so every band on the page is introduced the same way. */
.stm-single-sp_event .sp-table-caption,
.stm-single-sp_event .kobra-event-heading {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 18px;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	/* Aimed at *our own* redesign.css, which paints every h4
	   `--kobra-ice !important` site-wide. These captions are h4s, so without
	   this they quietly stayed ice while the one injected as a <div> went
	   yellow — the labels were never actually consistent until v0.20.2. */
	color: var(--kobra-yellow) !important;
}
.stm-single-sp_event .sp-table-caption::after,
.stm-single-sp_event .kobra-event-heading::after {
	content: '';
	flex: 1 1 auto;
	height: 1px;
	background: var(--kobra-line);
}

/* ==========================================================================
   Scoreboard
   ========================================================================== */
.stm-single-sp_event .sp-section-content-logos {
	/* Full-bleed out of WPBakery's centered container — same breakout the
	   homepage sections use. */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-bottom: 54px;
	max-width: 100vw;
}
.stm-single-sp_event .stm-next-match-unit {
	position: relative;
	overflow: hidden;
	background-color: var(--kobra-navy);
	background-image: var(--kobra-ice-texture);
	background-repeat: repeat;
	border-top: 1px solid var(--kobra-line);
	border-bottom: 3px solid var(--kobra-yellow);
}
/* Splash prints an empty background-image: url() here, which resolves to the
   page itself in some browsers. It has no content — drop it outright. */
.stm-single-sp_event .stm-next-matches_bg {
	display: none;
}
/* Faceoff motif, same graphic the homepage uses behind the news grid. */
.stm-single-sp_event .stm-next-match-unit::before {
	content: '';
	position: absolute;
	top: 50%;
	right: -90px;
	width: 420px;
	height: 420px;
	transform: translateY(-50%);
	background: url('../images/faceoff-motif.png') center / contain no-repeat;
	opacity: 0.07;
	pointer-events: none;
}
.stm-single-sp_event .stm-next-match-main-meta {
	position: relative;
}

/* Meta line: competition + date, then venue */
.stm-single-sp_event .stm-next-match-info-wrapp {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 16px;
	max-width: 1180px;
	margin: 0 auto;
	padding: 22px 24px 16px;
	text-align: center;
	/* hockey.css paints this #1f3b79 — a second, slightly different blue box
	   sitting on top of the navy panel, which read as a stray rectangle above
	   the score. Replaced by a hairline: the meta still separates from the
	   teams without introducing another colour. */
	background: transparent !important;
	border-bottom: 1px solid var(--kobra-line);
}
/* !important here and on the score below is deliberate, and is the one place
   in this project where it's the right tool rather than the lazy one.
   SportsPress's hockey.css styles this block through nine-class selectors
   like

     .hockey .type-sp_event .stm-event-page .stm-next-match-units
     .stm-next-match-unit .stm-next-match-opponents .stm-teams-info
     .stm-team-results-outer .stm-latest-result_result

   Out-specifying that would mean chaining ten classes of our own, which is
   unreadable and breaks the moment Splash renames one of them. Those rules
   carry no !important, so a single !important wins outright regardless of
   specificity. (The project's usual rule — reach for specificity, not
   !important — applies when both sides are important and the tie falls to
   source order; that isn't the case here.) */
.stm-single-sp_event .stm-next-match-info,
.stm-single-sp_event .stm-next-match-venue {
	font-family: 'Bricolage Grotesque', sans-serif !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kobra-mist) !important;
	line-height: 1.4;
}
.stm-single-sp_event .stm-next-match-venue::before {
	content: '·';
	margin-right: 16px;
	color: var(--kobra-line);
}

/* Teams + score */
/* The panel spans the viewport, but its contents shouldn't: without a cap
   the two crests end up pinned to opposite edges of a wide screen. */
.stm-single-sp_event .stm-next-match-opponents {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 26px;
	max-width: 1180px;
	margin: 0 auto;
	padding: 24px 24px 34px;
	/* hockey.css paints this #f7f7f7 through a six-class selector. Left
	   alone it puts a white slab over the navy panel — and since the team
	   names are near-white, they landed white-on-white. Same !important
	   reasoning as the block above. */
	background: transparent !important;
}
.stm-single-sp_event .stm-command {
	flex: 0 0 auto;
}
.stm-single-sp_event .stm-command-logo img {
	width: 104px;
	height: 104px;
	object-fit: contain;
	filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.4));
}
/* hockey.css caps this block at max-width:370px and each name column at
   130px — sized for its own narrow, boxed layout. Inside the full-bleed
   panel that left roughly 70px per name, so anything longer than "Kobra"
   broke into a stack of fragments and ran into the score. Both caps are
   lifted, and the gap is widened so a long name still has air around it.
   Same !important reasoning as elsewhere in this block: those rules are
   eight classes deep and carry none of their own. */
.stm-single-sp_event .stm-teams-info {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	gap: 44px;
	min-width: 0;
	max-width: none !important;
}
.stm-single-sp_event .stm-command-title-left,
.stm-single-sp_event .stm-command-title-right {
	flex: 1 1 0;
	min-width: 0;
	max-width: none !important;
}
.stm-single-sp_event .stm-command-title-left {
	text-align: right;
}
.stm-single-sp_event .stm-command-title-right {
	text-align: left;
}
.stm-single-sp_event .stm-team-city {
	display: block;
	margin-bottom: 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kobra-mist);
}
.stm-single-sp_event .stm-teams-info h4 {
	margin: 0;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: clamp(17px, 2.1vw, 26px);
	font-weight: 800;
	line-height: 1.15;
}
/* event.js unwraps the team links, so the colour has to sit on the heading
   itself; the descendant rule stays as a fallback if the markup ever keeps
   an anchor. */
.stm-single-sp_event .stm-teams-info h4,
.stm-single-sp_event .stm-teams-info h4 a {
	color: var(--kobra-ice);
	text-decoration: none;
}

.stm-single-sp_event .stm-team-results-outer {
	flex: 0 0 auto;
}
.stm-single-sp_event .stm-latest-result_result {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 8px;
	/* Big Shoulders is the project's one condensed display face, used on the
	   homepage only for the hero title. A scoreboard is the other place it
	   genuinely belongs. */
	font-family: 'Big Shoulders', 'Bricolage Grotesque', sans-serif !important;
	font-size: clamp(48px, 8vw, 88px) !important;
	font-weight: 700 !important;
	line-height: 0.9 !important;
	font-variant-numeric: tabular-nums;
	/* Also overridden: hockey.css sets #333 here, which the ":" separator
	   inherits — near-invisible on the navy panel. */
	color: var(--kobra-mist) !important;
}
/* No result filled in (an upcoming match, or one nobody has entered yet):
   Splash prints a bare "- VS -" with none of the usual score spans. At
   scoreboard size that placeholder shouts louder than any real score, so
   it drops back to a quiet label. Four of the club's 140 matches are in
   this state today. */
.stm-single-sp_event .stm-latest-result_result:not(:has(.stm-res-left)) {
	font-family: 'Bricolage Grotesque', sans-serif !important;
	font-size: 20px !important;
	font-weight: 800 !important;
	letter-spacing: 0.12em;
	color: var(--kobra-mist) !important;
}
.stm-single-sp_event .stm-res-left,
.stm-single-sp_event .stm-res-right {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
.stm-single-sp_event .stm-win {
	color: var(--kobra-yellow);
}
.stm-single-sp_event .stm-lose {
	color: var(--kobra-mist);
}

/* Outcome pill under each score. Splash prints the outcome *slug* here
   ("win"/"loss"); event.js swaps in the real Czech title from SportsPress. */
.stm-single-sp_event .stm-latest-result-win-label,
.stm-single-sp_event .stm-latest-result-lose-label {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	padding: 4px 9px;
	border-radius: 2px;
	line-height: 1.2;
	white-space: nowrap;
}
.stm-single-sp_event .stm-latest-result-win-label {
	background: var(--kobra-yellow);
	color: #101a08;
}
.stm-single-sp_event .stm-latest-result-lose-label {
	border: 1px solid var(--kobra-line);
	color: var(--kobra-mist);
}

/* ==========================================================================
   Tables — shared skin for the period scoreline and the squad stats
   ========================================================================== */
/* Rows as separate cards, the same table treatment as the team statistics and
   fixture-list pages — brought here so the match page reads as part of the same
   site rather than an older design. `border-collapse: separate` with a row gap
   is the only way to put air between rows; `collapse` cannot.

   **No hover, deliberately.** The card style carries one on the statistics page
   because a row there is a link to a player. Nothing in these tables navigates,
   and the user rejected a row hover on this page during the v0.15 design review
   — so the visual is adopted and the interaction is not. The `:hover` halves are
   written out rather than merely omitted, so a SportsPress rule cannot
   reintroduce a highlight. */
.stm-single-sp_event .sp-data-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0 8px;
	background: transparent;
}

/* ---------- Header band ----------
   Built like the cards below it — club navy with the ice texture — and kept
   distinct by its type rather than its colour: small spaced capitals in the
   muted tone. Washed a shade darker with a flat gradient layered *under* the
   texture, so the scratches stay on top and no new palette colour is invented.

   Splash paints `thead th` a flat #1f3b79 and also puts a background on the
   `thead` behind it, so both wrappers have to be cleared or the band shows
   through as a uniform blue block. */
.stm-single-sp_event .sp-data-table thead,
.stm-single-sp_event .sp-data-table thead tr {
	background: transparent;
	background-color: transparent;
	background-image: none;
	border: 0;
}
.stm-single-sp_event .sp-data-table thead th {
	padding: 12px 10px;
	border: 0;
	border-top: 1px solid var(--kobra-line);
	border-bottom: 1px solid var(--kobra-line);
	background-color: var(--kobra-navy);
	background-image: var(--kobra-ice-texture),
		linear-gradient(rgba(7, 27, 48, 0.5), rgba(7, 27, 48, 0.5));
	background-repeat: repeat, no-repeat;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--kobra-mist);
	white-space: nowrap;
	text-align: center;
	vertical-align: middle;
}

/* ---------- Row cards ----------
   The `.hockey` prefix is load-bearing. hockey.css restores its zebra through
   `.hockey table tbody tr:nth-child(2n+1) td` at (0,2,4); the previous rule here
   was also (0,2,4) and won only on source order. At (0,3,4) these are clear of
   it, the way the team page's are.

   **Every first cell carries a 3px left border, not just the winner's.** Only
   its colour changes below, so marking the winner cannot shift the row's
   contents by the 2px a border-width change would cost. */
.hockey .stm-single-sp_event table.sp-data-table tbody tr td,
.hockey .stm-single-sp_event table.sp-data-table tbody tr:hover td,
.hockey .stm-single-sp_event table.sp-data-table tfoot tr td,
.hockey .stm-single-sp_event table.sp-data-table tfoot tr:hover td {
	padding: 12px 10px;
	border: 0;
	border-top: 1px solid var(--kobra-line);
	border-bottom: 1px solid var(--kobra-line);
	background-color: var(--kobra-navy);
	background-image: var(--kobra-ice-texture);
	background-repeat: repeat;
	color: var(--kobra-ice);
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 14px;
	text-align: center;
	vertical-align: middle;
	font-variant-numeric: tabular-nums;
	/* Splash leaves `transition: all` on these cells; with nothing changing on
	   hover the shorthand would still quietly animate whatever a future rule
	   touches, so the rows are made explicitly still. */
	transition: none;
}

/* The card's ends. Every column in these tables is visible, so :first/:last
   really are the outer edges — unlike the calendar, where two hidden columns
   made :last-child the wrong hook. */
.hockey .stm-single-sp_event table.sp-data-table tbody tr td:first-child,
.hockey .stm-single-sp_event table.sp-data-table tfoot tr td:first-child {
	border-left: 3px solid var(--kobra-line);
	border-radius: 4px 0 0 4px;
}
.hockey .stm-single-sp_event table.sp-data-table tbody tr td:last-child,
.hockey .stm-single-sp_event table.sp-data-table tfoot tr td:last-child {
	border-right: 1px solid var(--kobra-line);
	border-radius: 0 4px 4px 0;
}
.stm-single-sp_event .sp-data-table thead th:first-child {
	border-left: 3px solid var(--kobra-line);
	border-radius: 4px 0 0 4px;
}
.stm-single-sp_event .sp-data-table thead th:last-child {
	border-right: 1px solid var(--kobra-line);
	border-radius: 0 4px 4px 0;
}
.stm-single-sp_event .sp-data-table thead th.data-name,
.stm-single-sp_event .sp-data-table tbody td.data-name,
.stm-single-sp_event .sp-data-table thead th.data-position,
.stm-single-sp_event .sp-data-table tbody td.data-position {
	text-align: left;
}

/* ==========================================================================
   Coaching staff line, under the squad table
   --------------------------------------------------------------------------
   SportsPress prints this as one paragraph — "Hlavní trenér: <a>name</a><br>
   Generální manažer: <a>name</a>" — on the matches that have staff assigned.
   Only ten events do, which is why it is easy to miss: the match this page's
   styling was first built against has none.

   The names were **black**, and not from an inline style this time: they are
   real links, so `.hockey a` (0,1,1) was painting them. A rule keyed on the
   class alone would lose to it, hence `.sp-event-staff a` at (0,2,1). Same trap
   as the article nav cards and the sponsor tiles.

   It also sat flush against the table above — measured gap 0 — because the
   block carries no margin of its own and the table's rows now end on a card
   edge rather than a rule.
   ========================================================================== */
.stm-single-sp_event .sp-template-event-staff {
	margin: 26px 0 0;
}
.stm-single-sp_event p.sp-event-staff {
	margin: 0;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 14px;
	line-height: 1.9;
	/* The role labels are bare text nodes in the paragraph, so they take their
	   colour from here; the muted tone keeps them reading as labels against the
	   names. */
	color: var(--kobra-mist);
}
.stm-single-sp_event .sp-event-staff a {
	color: var(--kobra-ice);
	font-weight: 700;
	text-decoration: none;
}
.stm-single-sp_event .sp-event-staff a:hover {
	color: var(--kobra-yellow);
}

/* ---------- Period scoreline ---------- */
.stm-single-sp_event .sp-event-results td.data-name {
	font-weight: 700;
	font-size: 15px;
}
.stm-single-sp_event .sp-event-results td.data-goals {
	font-family: 'Big Shoulders', 'Bricolage Grotesque', sans-serif;
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
}
/* Winner row — event.js tags it, since the markup carries no such hint.
   The yellow rule down the left edge is kept at the user's explicit request; it
   is now the card's own left border recoloured rather than an inset shadow, so
   it reads as the edge of the card instead of a stripe painted inside it. Only
   the colour changes — the 3px width is on every first cell — so nothing moves
   when a row becomes the winner. Still no background tint. */
.hockey .stm-single-sp_event .sp-event-results tbody tr.kobra-winner td:first-child {
	border-left-color: var(--kobra-yellow);
}
.stm-single-sp_event .sp-event-results tr.kobra-winner td.data-name {
	font-weight: 800;
}
.stm-single-sp_event .sp-event-results tr.kobra-winner td.data-goals {
	color: var(--kobra-yellow);
}

/* ---------- Squad stats ---------- */
.stm-single-sp_event .sp-event-performance-tables {
	display: grid;
	gap: 34px;
}
/* The two squad tables are captioned with the team's own name, which reads
   as content rather than as a section label — so these stay ice while the
   surrounding labels are yellow. !important only to outrank the rule above,
   which now carries one of its own. */
.stm-single-sp_event .sp-template-event-performance .sp-table-caption {
	color: var(--kobra-ice) !important;
}
.stm-single-sp_event .sp-event-performance td.data-name {
	font-weight: 700;
	white-space: nowrap;
}
/* Player names are links to their profile. The colour has to go on the
   anchor, not the cell — the cell rule above never reached them, which is
   why they stayed grey (and went red on hover) on an otherwise white-on-navy
   table. The links are worth keeping: unlike the team crests, player pages
   really do exist. */
.stm-single-sp_event .sp-event-performance td.data-name a {
	color: var(--kobra-ice);
	text-decoration: none;
}
.stm-single-sp_event .sp-event-performance td.data-name a:hover {
	color: var(--kobra-yellow);
}

/* Totals row. It lives in <tfoot>, which the tbody rules above don't reach —
   hence the separate mention there. Set apart by weight and a rule above it
   rather than by another background colour. */
.stm-single-sp_event .sp-event-performance tfoot td {
	border-top: 2px solid var(--kobra-line);
	font-weight: 800;
	color: var(--kobra-ice);
}
.stm-single-sp_event .sp-event-performance tfoot td.data-name {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 12px;
}
/* Jersey number and position are full-strength text, not muted: at mist grey
   they were the hardest thing on the page to read. Hierarchy comes from
   weight and size instead of from dimming. */
.stm-single-sp_event .sp-event-performance td.data-position {
	color: var(--kobra-ice);
	font-size: 13px;
	white-space: nowrap;
}
.stm-single-sp_event .sp-event-performance td.data-number {
	color: var(--kobra-ice);
	font-weight: 800;
}
/* Goals and assists are what a reader scans for, so they carry the accent —
   but only when there's something to see. event.js tags the zeros, which
   would otherwise turn the whole column into yellow noise. */
.stm-single-sp_event .sp-event-performance td.data-g,
.stm-single-sp_event .sp-event-performance td.data-a {
	font-weight: 800;
	color: var(--kobra-yellow);
}
/* Dimmed toward the row's own text colour rather than to grey, so a zero
   reads as a quieter version of the same ink instead of a different one. */
.stm-single-sp_event .sp-event-performance td.kobra-zero {
	color: rgba(234, 241, 248, 0.4);
	font-weight: 400;
}

/* DataTables makes the headers sortable; keep that affordance visible. */
.stm-single-sp_event .sp-data-table thead th.sorting,
.stm-single-sp_event .sp-data-table thead th.sorting_asc,
.stm-single-sp_event .sp-data-table thead th.sorting_desc {
	cursor: pointer;
}
.stm-single-sp_event .sp-data-table thead th.sorting_asc,
.stm-single-sp_event .sp-data-table thead th.sorting_desc {
	color: var(--kobra-yellow);
}

/* Ten columns don't fit a phone. Let the table scroll sideways inside its
   own wrapper rather than pushing the page wide. */
.stm-single-sp_event .sp-scrollable-table-wrapper {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.stm-single-sp_event .sp-table-wrapper {
	position: relative;
	overflow: visible;
}
.stm-single-sp_event .sp-event-performance {
	min-width: 620px;
}

/* ---------- Abbreviation legend ---------- */
.kobra-legend {
	margin-top: 16px;
	padding: 16px 18px;
	border: 1px solid var(--kobra-line);
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.02);
}
.kobra-legend-title {
	margin-bottom: 10px;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kobra-mist);
}
.kobra-legend-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.kobra-legend-list li {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	padding: 5px 10px;
	border: 1px solid var(--kobra-line);
	border-radius: 2px;
	font-size: 12px;
	color: var(--kobra-mist);
	line-height: 1.3;
}
.kobra-legend-list b {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 800;
	color: var(--kobra-yellow);
}

/* ==========================================================================
   Report (v0.69.0)
   --------------------------------------------------------------------------
   **This block was mist, and mist was wrong.** The rule was written when the
   only thing in `.sp-post-content` on the matches checked was a short note
   beside the fixture, where a quiet colour is right. The user found a match with
   a real report in it — five paragraphs of match commentary — and asked for the
   ice colour and justified text.

   She is right, and this file was contradicting the type scale written down for
   the text pages: **ice for anything anyone reads, mist only for genuinely
   secondary metadata — never a paragraph.** The caption and the icon list below
   keep mist, because those are asides to something else.

   Justified with `hyphens: auto`, matching the article detail and the text
   pages, so a match report reads the same wherever it sits. Czech hyphenation
   needs the document's `lang="cs"`, which is present, or it silently does
   nothing.
   ========================================================================== */

/* `text-align` on the block as well as the paragraphs, deliberately: on this
   site copy is not always wrapped in a `<p>` — AHL Soutěž žen is three bare text
   nodes inside the widget's own div, and a rule aimed at `p` never reached it.
   `text-align` inherits, so the block covers both shapes. */
.stm-single-sp_event .sp-post-content,
.stm-single-sp_event .sp-post-content .wpb_text_column,
.stm-single-sp_event .sp-post-content .wpb_text_column .wpb_wrapper {
	text-align: justify;
	hyphens: auto;
	-webkit-hyphens: auto;
}

.stm-single-sp_event .sp-post-content p {
	max-width: 70ch;
	color: var(--kobra-ice);
	font-size: 16px;
	line-height: 1.75;
	text-align: justify;
	hyphens: auto;
	-webkit-hyphens: auto;
}

/* **The report's bullet lists were still `#333333`**, and not from an inline
   style: `hockey.css ul li { color: #333333 }` at **(0,0,2)** is simply the
   theme's default for a list item, and nothing here had ever set a colour on
   one. Eight of them on this match — the takeaways under the commentary
   ("Utkání bez zranění", "Podcenění soupeřek") — so they are running text and
   belong in ice with the paragraphs. Left ragged: a two-line bullet has too few
   characters per line to justify well. */
/* Headings left, for the same reason as the text pages — the justification is
   set on the block here too, so a wrapping heading inherited it. */
.stm-single-sp_event .sp-post-content h1,
.stm-single-sp_event .sp-post-content h2,
.stm-single-sp_event .sp-post-content h3,
.stm-single-sp_event .sp-post-content h4,
.stm-single-sp_event .sp-post-content h5,
.stm-single-sp_event .sp-post-content h6 {
	text-align: left;
}

.stm-single-sp_event .sp-post-content li {
	color: var(--kobra-ice);
	font-size: 16px;
	line-height: 1.75;
	text-align: left;
}

/* Anything the editor centred or right-aligned on purpose keeps its choice —
   one article signs off with a right-aligned author line, and that is an
   editorial decision per paragraph, not running text. */
.stm-single-sp_event .sp-post-content .has-text-align-center,
.stm-single-sp_event .sp-post-content [style*="text-align: center"],
.stm-single-sp_event .sp-post-content [style*="text-align:center"] {
	text-align: center;
}
.stm-single-sp_event .sp-post-content .has-text-align-right,
.stm-single-sp_event .sp-post-content [style*="text-align: right"],
.stm-single-sp_event .sp-post-content [style*="text-align:right"] {
	text-align: right;
}
.stm-single-sp_event .sp-post-content h2,
.stm-single-sp_event .sp-post-content h3,
.stm-single-sp_event .sp-post-content h4 {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 800;
	color: var(--kobra-ice);
}
.stm-single-sp_event .sp-post-content a {
	color: var(--kobra-sky);
}
.stm-single-sp_event .sp-post-content a:hover {
	color: var(--kobra-yellow);
}
.stm-single-sp_event .stm-list-icon li {
	color: var(--kobra-mist);
	line-height: 1.7;
}

/* ==========================================================================
   Venue
   ========================================================================== */
.stm-single-sp_event .sp-event-venue {
	border: 1px solid var(--kobra-line);
	border-radius: 4px;
	overflow: hidden;
}
.stm-single-sp_event .sp-event-venue td {
	padding: 0;
	border: 0;
}

/* ==========================================================================
   "Poslední odehraná utkání" — Splash's related-matches widget.

   Styled, not restructured: the block reloads over AJAX when the league
   select changes (#stm-events-league-ajax-content-publish), so any injected
   markup would vanish on the first interaction. It's a flat run of
   alternating date + link siblings, hence the sibling-based rules.
   ========================================================================== */
.stm-single-sp_event .stm-events-wrap {
	margin-top: 44px;
}
.stm-single-sp_event .stm-events-result-units {
	display: flex;
	flex-direction: column;
}
/* Splash gives the date its own solid grey bar. Strip it back to a plain
   label sitting above the match it belongs to. */
.stm-single-sp_event .stm-events-result-units .stm-latest-results-meta {
	margin: 18px 0 6px;
	padding: 0;
	background: none !important;
	border: 0;
	text-align: left;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kobra-mist);
}
.stm-single-sp_event .stm-events-result-units .stm-latest-results-meta .date {
	background: none !important;
	padding: 0;
	color: inherit;
}
.stm-single-sp_event .stm-events-result-units > a {
	display: block;
	padding: 12px 16px;
	border: 1px solid var(--kobra-line);
	border-radius: 4px;
	background-color: var(--kobra-navy);
	background-image: var(--kobra-ice-texture);
	background-repeat: repeat;
	text-decoration: none;
	transition: border-color .2s ease;
}
/* These are real links, so they keep a hover cue — but only a colour change.
   No movement: the shifting rows were the part that read as fidgety. */
.stm-single-sp_event .stm-events-result-units > a:hover {
	border-color: var(--kobra-sky);
}
.stm-single-sp_event .stm-latest-results-info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	/* Splash draws a #ccc rule under this; on navy it read as a stray line
	   across every card. */
	border: 0;
}
.stm-single-sp_event .stm-latest-results-info .stm-latest-result-team {
	flex: 1 1 0;
	min-width: 0;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: var(--kobra-ice);
	transition: color .2s ease;
}
.stm-single-sp_event .stm-latest-results-info .stm-latest-result-team:last-child {
	text-align: right;
}
/* ---- Rules this widget defends ----
   It ships its own generated stylesheet, stm_results_table_ajax_publish.css,
   whose selectors run five classes deep — and it marks the team colour
   !important. Three of the shorter rules above lost to it silently: the
   names stayed grey, the flags stayed visible and the divider line stayed
   put. Matching that chain is what it takes to land them.

   The colour also needs !important of its own: an important declaration can
   only be outranked by another important one, and specificity then settles
   it. The rest only need the longer chain. */
.stm-single-sp_event .stm-events-wrap .stm-events-result-units a .stm-latest-results-info .stm-latest-result-team {
	color: var(--kobra-ice) !important;
}
.stm-single-sp_event .stm-events-wrap .stm-events-result-units a:hover .stm-latest-results-info .stm-latest-result-team {
	color: var(--kobra-yellow) !important;
}
.stm-single-sp_event .stm-events-wrap .stm-events-result-units a .stm-latest-results-info {
	border-bottom: 0;
}
/* Home team hugs the left edge, away team the right. The widget's own
   stylesheet right-aligns both, which left the home name floating in the
   middle of the card. */
/* :first-child is here to match their selector's specificity, not because the
   element needs identifying — the widget's stylesheet right-aligns the home
   team at exactly (0,5,1), so an equal-specificity rule would lose the tie on
   load order alone. */
.stm-single-sp_event .stm-events-wrap .stm-events-result-units a .stm-latest-results-info .stm-latest-result-team,
.stm-single-sp_event .stm-events-wrap .stm-events-result-units a .stm-latest-results-info .stm-latest-result-team:first-child {
	text-align: left;
}
.stm-single-sp_event .stm-events-wrap .stm-events-result-units a .stm-latest-results-info .stm-latest-result-team:last-child {
	text-align: right;
}
.stm-single-sp_event .stm-events-wrap .stm-events-result-units a .stm-latest-results-info .stm-latest-results-points .flag_wrap,
.stm-single-sp_event .stm-events-wrap .stm-events-result-units a .stm-latest-results-info .stm-latest-results-points .flag_wrap img {
	display: none;
}

/* The middle block is Splash's white pill. It holds no score — only two
   country flags, identical on every row of a Czech league, so they carry no
   information at all. Flags out, pill out; what's left is a quiet dash
   between the two team names. */
.stm-single-sp_event .stm-latest-results-points {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-width: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none !important;
	box-shadow: none;
}
.stm-single-sp_event .stm-latest-results-points .flag_wrap,
.stm-single-sp_event .stm-latest-results-points img {
	display: none;
}
/* Only the score-less matches get the standalone dash; where there is a
   score, event.js has already built one with its own separator. */
.stm-single-sp_event .stm-latest-results-points:not(:has(.kobra-score))::after {
	content: '–';
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: var(--kobra-mist);
}

/* Score line, rebuilt by event.js. Splash's own markup put the losing score
   in a bare text node next to a "/" and the winning one inside a block-level
   div — which is exactly why the winner sat a line higher than its opponent.
   One flex row of equal parts fixes the alignment and lets the separator be
   a proper dash. */
.stm-single-sp_event .kobra-score {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 800;
	font-size: 16px;
	line-height: 1;
	white-space: nowrap;
}
.stm-single-sp_event .kobra-score-value {
	color: var(--kobra-ice);
	font-variant-numeric: tabular-nums;
}
.stm-single-sp_event .kobra-score-value.is-winner {
	color: var(--kobra-yellow);
}
.stm-single-sp_event .kobra-score-sep {
	color: var(--kobra-mist);
	font-weight: 700;
}
/* Label sits next to the picker rather than being flung to the far edge —
   Splash sets justify-content: space-between here, which stretched the label
   to 920px and parked it most of a row away from the control it names. */
.stm-single-sp_event .stm-events-wrap .select-events-wrap {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	margin-bottom: 6px;
}
/* width:auto is doing the real work — the widget's stylesheet sets the label
   to width:100%, which stretched it across the whole row regardless of
   flex-grow, leaving its text stranded at the far left. */
.stm-single-sp_event .stm-events-wrap .select-events-wrap .select-label {
	flex: 0 0 auto;
	width: auto;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kobra-ice);
	white-space: nowrap;
}

/* ---- League picker (select2) ----
   select2 has to stay: Splash's widget script reads the chosen league back
   through `.select2('data')`, and removing it makes that call throw and the
   results list never renders (see the note in event.js). So it's restyled
   rather than replaced. */
.stm-single-sp_event .select-events-wrap .select2-container {
	flex: 0 1 260px;
	max-width: 100%;
}
/* The label above it, as the design's eyebrow. Splash prints it as a
   `<span class="select-label normal_font">`, not a `<label>`. */
.stm-single-sp_event .select-events-wrap .select-label {
	display: block;
	margin: 0 0 8px;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	/* `!important` on the colour only: everything else above applied, the sky
	   did not, so a longer selector would have been guesswork about which of
	   Splash's chains was winning. The rest of the declaration is left plain so
	   it stays easy to override from wp-admin if that ever matters. */
	color: var(--kobra-sky) !important;
}

/* `.stm-events-wrap` is prepended to every rule below, and it is load-bearing.
   `stm_results_table_ajax_publish.css` — the generated stylesheet CLAUDE.md
   flags as the easiest to miss — styles this control through
   `.stm-events-wrap .select-events-wrap .select2-container--default …` at
   (0,4,0), exactly the weight the rules here used to carry. It tied and won on
   source order, which is why the picker kept **square corners** while every
   other surface on the site is rounded. At (0,5,0) these are clear of it. */
.stm-single-sp_event .stm-events-wrap .select-events-wrap .select2-container--default .select2-selection--single {
	height: auto;
	padding: 9px 12px;
	border: 1px solid var(--kobra-line);
	border-radius: 4px;
	background-color: var(--kobra-navy);
	background-image: var(--kobra-ice-texture);
	background-repeat: repeat;
	transition: border-color .18s ease, background-color .18s ease;
}

/* Hover and open share one look, so the control answers the pointer the way
   every other control here does. `--open` is on the container, not the
   selection, hence the descendant form. */
.stm-single-sp_event .stm-events-wrap .select-events-wrap .select2-container--default .select2-selection--single:hover,
.stm-single-sp_event .stm-events-wrap .select-events-wrap .select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--kobra-sky);
	background-color: var(--kobra-navy-2);
}

.stm-single-sp_event .stm-events-wrap .select-events-wrap .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0 20px 0 0;
	color: var(--kobra-ice);
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.35;
	text-align: left;
}

/* This one stays even though the picker's behaviour is otherwise left stock,
   because it repairs a side effect of the styling above rather than changing
   how select2 works. Only the outer .select2-selection carries select2's
   mousedown handler; padding the control out to 40px let the inner label
   cover everything below its top few pixels, so most of the button became
   dead to clicks. Making the children transparent to the pointer restores
   the stock hit area. Neither child has any behaviour of its own to lose. */
.stm-single-sp_event .select-events-wrap .select2-selection__rendered,
.stm-single-sp_event .select-events-wrap .select2-selection__arrow {
	pointer-events: none;
}
/* ---- The arrow, drawn rather than fonted ----
   **This was the "unidentifiable character" on the right of the control, and it
   is a Splash bug that predates any of this work.** Splash renders the arrow as
   an icon-font glyph: `.select2-selection__arrow b::before` asks for
   `font-family: FontAwesome` — the **Font Awesome 4** family name — with
   codepoint `U+F078`. This site loads **Font Awesome 5**, whose family is
   `"Font Awesome 5 Free"` (the working icons on the page all report that), so
   `FontAwesome` resolves to nothing, the private-use codepoint has no glyph in
   the fallback font, and the browser draws its missing-character box.

   Two earlier passes here set `border-color` on that `b`, on the assumption that
   select2's stock CSS border triangle was in play. It is not — `border-width`
   computes to 0 — so those rules were inert and the box stayed.

   Drawn as a rotated square instead: no icon font, so it cannot depend on which
   Font Awesome build production happens to ship. Same reasoning as the inline
   SVG used for the social icons. */
.stm-single-sp_event .stm-events-wrap .select-events-wrap .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 50%;
	right: 12px;
	width: 12px;
	height: 12px;
	margin-top: -6px;
	transform: none;
}
.stm-single-sp_event .stm-events-wrap .select-events-wrap .select2-container--default .select2-selection--single .select2-selection__arrow b::before {
	content: none;
}
.stm-single-sp_event .stm-events-wrap .select-events-wrap .select2-container--default .select2-selection--single .select2-selection__arrow b {
	position: absolute;
	top: 1px;
	left: 1px;
	width: 7px;
	height: 7px;
	margin: 0;
	border: 0;
	border-right: 2px solid var(--kobra-mist);
	border-bottom: 2px solid var(--kobra-mist);
	border-radius: 1px;
	transform: rotate(45deg);
	transition: border-color .18s ease, transform .18s ease;
}
.stm-single-sp_event .stm-events-wrap .select-events-wrap .select2-container--default .select2-selection--single:hover .select2-selection__arrow b {
	border-right-color: var(--kobra-sky);
	border-bottom-color: var(--kobra-sky);
}
/* Turned over and picked out in the accent while the list is open — the one
   affordance this control was missing. */
.stm-single-sp_event .stm-events-wrap .select-events-wrap .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
	border-right-color: var(--kobra-yellow);
	border-bottom-color: var(--kobra-yellow);
	transform: rotate(225deg);
	top: 4px;
}

/* select2 renders its dropdown at the end of <body>, outside the page
   wrapper — so unlike everything else in this file these can't be scoped
   under .stm-single-sp_event. event.css is only enqueued on match pages, so
   the reach stays limited to them anyway. */
.select2-container--default .select2-dropdown {
	border: 1px solid var(--kobra-line);
	border-radius: 4px;
	background-color: var(--kobra-navy);
	background-image: var(--kobra-ice-texture);
	background-repeat: repeat;
	overflow: hidden;
	box-shadow: 0 14px 34px -12px rgba(7, 27, 48, 0.85);
}
.select2-container--default .select2-results__option {
	padding: 10px 12px;
	background: transparent;
	color: var(--kobra-ice);
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.03em;
	transition: background-color .15s ease, color .15s ease;
}
/* Hover and keyboard highlight: sky, the design's "you are here" colour. */
/* A translucent wash, not a fill. `--kobra-navy-2` was used here first and it
   read as a flat blue slab dropped over the row: it is opaque, so it covered the
   dropdown's ice texture completely and the highlighted option stopped looking
   like part of the same panel. A white wash at 7% lifts the row and lets the
   scratches stay visible through it — the same reasoning as the table header,
   which is washed *under* its texture rather than painted over it.

   `!important` is still needed: Splash fills this option with its own solid
   colour through a longer chain. */
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: rgba(255, 255, 255, 0.07) !important;
	color: var(--kobra-sky);
}
/* The league actually in force stays yellow, and keeps a marker down its left
   edge so it is still identifiable while another option is hovered.

   `background` carries `!important` because Splash paints the selected option
   its own `#1f3b79` through a longer chain — measured winning at
   `rgb(31, 59, 121)` while the yellow text and the marker both applied, which is
   the giveaway that only that one declaration was losing. The dropdown is
   appended to `<body>`, so these rules cannot be scoped under the page wrapper;
   event.css only loads on match pages, so the reach is still just them. */
.select2-container--default .select2-results__option[aria-selected="true"] {
	/* The same faint wash as the hover, not a fill. This rule also carries
	   `!important` and sits after the hover rule, so while the selected option is
	   *also* the highlighted one — which it is the moment the list opens — this is
	   what paints it. Left as a slab it produced exactly the flat blue block the
	   user objected to, on the one row that is always visible. The yellow text and
	   the marker down the left edge carry the "in force" meaning on their own. */
	background: rgba(255, 255, 255, 0.07) !important;
	color: var(--kobra-yellow);
	box-shadow: inset 3px 0 0 var(--kobra-yellow);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
	border: 1px solid var(--kobra-line);
	background: var(--kobra-ink);
	color: var(--kobra-ice);
}
/* Sits inside the caption's flex row. order:2 puts it after the caption's
   ::after rule, so the line runs between title and link instead of the link
   hugging the title. */
.stm-single-sp_event .sp-table-caption .stm-link-all {
	order: 2;
}
/* styles.css greys this link out with an !important rule, so matching it
   takes another !important — specificity then decides, and (0,3,1) beats
   their (0,2,2). */
.stm-single-sp_event .stm-events-wrap .sp-table-caption .stm-link-all {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--kobra-ice) !important;
	text-decoration: none;
}
.stm-single-sp_event .stm-events-wrap .sp-table-caption .stm-link-all:hover {
	color: var(--kobra-yellow) !important;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
	.stm-single-sp_event .stm-command-logo img {
		width: 72px;
		height: 72px;
	}
	.stm-single-sp_event .stm-next-match-opponents {
		gap: 14px;
		padding: 20px 16px 28px;
	}
	.stm-single-sp_event .stm-teams-info {
		gap: 14px;
	}
	.stm-single-sp_event .stm-next-match-unit::before {
		width: 260px;
		height: 260px;
		right: -70px;
	}
}
@media (max-width: 620px) {
	.stm-single-sp_event .stm-command-logo img {
		width: 52px;
		height: 52px;
	}
	.stm-single-sp_event .stm-team-city {
		display: none;
	}
	.stm-single-sp_event .stm-latest-result_result {
		font-size: 44px !important;
		gap: 6px;
	}
	.stm-single-sp_event .sp-section-content {
		margin-bottom: 40px;
	}
	.stm-single-sp_event .stm-latest-results-info {
		gap: 8px;
	}
	/* Left-aligned on a phone: justification needs enough characters per line to
	   absorb the extra space, and a narrow screen does not have them. Same
	   breakpoint and same reason as the article detail and the text pages. */
	.stm-single-sp_event .sp-post-content,
	.stm-single-sp_event .sp-post-content .wpb_text_column,
	.stm-single-sp_event .sp-post-content .wpb_text_column .wpb_wrapper,
	.stm-single-sp_event .sp-post-content p {
		text-align: left;
	}
	.stm-single-sp_event .sp-post-content p {
		font-size: 15px;
	}
}

/* ==========================================================================
   Countdown to kick-off (v0.57.0)
   --------------------------------------------------------------------------
   Centred under the fixture line, at the user's request — inserted by event.js
   after `.stm-teams-info`, the centred flex row that holds
   "Kobra Praha - VS - Vlčice Žebrák".

   Two lines rather than one: a quiet sky label naming what the number is, then
   the number itself large enough to be the thing you look at. On the homepage
   cards the countdown is an 11px chip in a badge slot, which is right for a
   card in a grid of eight; here it is the only live thing on the page and can
   carry the weight.

   `tabular-nums` is load-bearing everywhere this countdown appears — without it
   the seconds change width every tick and a centred line jitters left and right
   once a second, which is worse than it sounds.

   Sized in `clamp()` so a long "5 dní 1 h 02 min 07 s" does not have to wrap on
   a phone; it is one line at every width, which also keeps the block's height
   stable as the days count down. */
/* Spacing set by eye with the user (v0.57.2): half the original gap above, and
   room added below.

   The 18px above read as too much — the countdown belongs to the fixture line
   directly over it, and a wide gap made it look like a separate block. 9px
   keeps them associated.

   The space below is not symmetry, it is a fix: the box's bottom edge landed
   exactly on `.stm-next-match-opponents-units`' bottom edge (measured 0px
   between them), so the number was jammed against the end of the panel. The
   asymmetry is deliberate — tight to what it describes, clear of what follows.

   **It has to be `padding-bottom`, not `margin-bottom`.** Written as a margin
   first, and the measured gap stayed 0: this is the last child of a block
   parent that has no padding, border or overflow of its own, so the margin
   collapsed straight through the parent's bottom edge instead of pushing it
   down. Padding belongs to the box itself and cannot collapse, so the parent
   grows. */
.stm-single-event .kobra-event-countdown,
.single-sp_event .kobra-event-countdown {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	margin: 9px auto 0;
	padding-bottom: 18px;
	text-align: center;
}

.stm-single-event .kobra-event-countdown-label,
.single-sp_event .kobra-event-countdown-label {
	color: var(--kobra-sky);
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.stm-single-event .kobra-event-countdown-value,
.single-sp_event .kobra-event-countdown-value {
	color: var(--kobra-yellow);
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: clamp(18px, 4vw, 26px);
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1.2;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
}