/* ==========================================================================
   Kobra redesign — stránka týmu (single sp_team).
   Enqueued only on is_singular('sp_team'); redesign.css supplies the palette,
   fonts and texture.

   The page is turned into the squad's scoring table — see team.js. What
   Splash puts here otherwise is either a duplicate of /buly/ or empty, and is
   hidden below.
   ========================================================================== */

/* ---------- Hide the blocks the stats replace ----------
   `sp-section-content-lists` is the same three player lists /buly/ shows as a
   photo grid, `-staff` has its own page under Tým, and `-tables` renders
   empty because SportsPress's stored per-player statistics are blank (which
   is exactly why the figures here are computed from match records instead).
   The logo and the post content are left alone.

   Mirrored in CSS as well as being replaced in JS because the script runs at
   DOMContentLoaded, late enough for the duplicates to paint first. */
.stm-single-sp_team .sp-section-content-lists,
.stm-single-sp_team .sp-section-content-staff,
.stm-single-sp_team .sp-section-content-tables {
	display: none !important;
}

.kobra-team-stats {
	margin: 0 0 34px;
}

/* The heading is the fixture list's section caption: small, yellow, spaced
   capitals with a rule running out to the right. Same component in spirit as
   `.sp-table-caption` on the calendar page, so the two read as parts of one
   site rather than two designs. */
.kobra-team-stats-title {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 20px;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--kobra-yellow);
}
.kobra-team-stats-title::after {
	content: '';
	flex: 1 1 auto;
	height: 1px;
	background: var(--kobra-line);
}

/* ==========================================================================
   Filters — season and competition
   ==========================================================================
   Same component as the squad page's group tabs, and it needs the same
   defences: these are <button> elements, and the theme attacks bare `button`
   through `.hockey #wrapper button` (an ID, so classes alone never win) and
   through an `!important` on background-color. See roster.css for the full
   account — this is the same fight, on the same component. */
.kobra-team-filters {
	margin: 0 0 22px;
	padding: 0 0 20px;
	border-bottom: 1px solid var(--kobra-line);
}

/* Each filter is a labelled row of its own. Season and competition are
   independent — any combination is valid — so they are two groups of
   buttons rather than one long list where the two would blur together. */
.kobra-team-filter {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px 14px;
}
.kobra-team-filter + .kobra-team-filter {
	margin-top: 12px;
}
.kobra-team-filter-legend {
	flex: 0 0 76px;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--kobra-mist);
}
.kobra-team-filter-options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* The filter buttons moved to redesign.css in v0.71.1 as `.kobra-filter-btn` —
   three pages need them now and the defences against Splash's `<button>`
   styling were only ever loaded on two of them. team.js adds both class names,
   so nothing here changes. */

/* ==========================================================================
   The table
   ==========================================================================
   The wrapper carries no card of its own — the rows are the cards, the way
   the fixture list builds them. It exists only so eight columns can scroll
   sideways inside it on a phone rather than pushing the whole page along. */
.kobra-team-table-wrap {
	overflow-x: auto;
}

/* Rows as separate cards, exactly as the fixture list does it: `separate`
   plus a vertical border-spacing is what puts air between them, which
   `collapse` cannot do.

   The long prefix matters more here than anywhere else in this file. The
   theme sets `border-collapse: collapse` on `table` with more weight than a
   single class, and in collapsed mode two things go wrong at once: the
   border-spacing is ignored, so the cards touch instead of being separated;
   and adjacent cells *share* one border, so a row's top line is the same line
   as the row above's bottom. Hovering then puts two colours in conflict over
   one edge and the un-hovered row wins — which showed up as every row except
   the first losing its top line on hover. Both symptoms, one cause. */
.hockey .kobra-team-stats table.kobra-team-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0 8px;
	background: transparent;
	font-family: 'Bricolage Grotesque', sans-serif;
	color: var(--kobra-ice);
}

/* ---------- Row cards ----------
   The long prefix is load-bearing. hockey.css puts its zebra striping back
   through `.hockey table tbody tr:nth-child(2n+1) td` at (0,2,4), which beat
   a plain `.kobra-team-table tbody td` at (0,1,2) — so every other row came
   out #f1f1f1 and the table looked striped in light grey. This is (0,3,4),
   clear of it rather than tied on source order. The same fight, in the same
   place, as the match page's stat tables. */
.hockey .kobra-team-stats table.kobra-team-table tbody tr td {
	padding: 14px 12px;
	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-size: 14px;
	text-align: left;
	vertical-align: middle;
	transition: background-color .2s ease, border-color .2s ease;
}
/* The card's ends. Unlike the calendar — where two columns are hidden and the
   last cell in the markup is invisible — every column here is shown, so
   :last-child really is the right edge. */
.hockey .kobra-team-stats table.kobra-team-table tbody tr td:first-child {
	border-left: 1px solid var(--kobra-line);
	border-radius: 4px 0 0 4px;
}
.hockey .kobra-team-stats table.kobra-team-table tbody tr td:last-child {
	border-right: 1px solid var(--kobra-line);
	border-radius: 0 4px 4px 0;
}

/* Whole row is a pointer shortcut to the player, same as a fixture row is to
   its match. The name stays a real link, so keyboard and screen-reader users
   lose nothing.

   The hover carries the same long prefix as the base rule above: a selector
   lengthened to beat a plugin will otherwise outrank your own hover, which is
   exactly how the calendar's row hover silently did nothing. */
.kobra-team-table tbody tr.kobra-row-linked {
	cursor: pointer;
}
.hockey .kobra-team-stats table.kobra-team-table tbody tr.kobra-row-linked:hover td {
	border-color: var(--kobra-sky);
	background-color: var(--kobra-navy-2);
}

/* ---------- Header ----------
   A band in its own right, built the same way as the row cards — the club's
   navy carrying the scratched ice texture — so the scratches run through it
   too instead of it being one flat plate. It stays distinct from the rows
   through its type rather than its colour: small spaced capitals in the muted
   tone against the rows' full-strength names and figures.

   Splash paints `thead th` a flat #1f3b79 *and* puts a red background on the
   `thead` behind it, both with more weight than a single class — which is
   what made the header a uniform blue block. The wrapper elements are cleared
   so neither shows through, and the cells are painted at (0,3,3). */
.hockey .kobra-team-stats table.kobra-team-table thead,
.hockey .kobra-team-stats table.kobra-team-table thead tr {
	background: transparent;
	background-color: transparent;
	background-image: none;
	border: 0;
}
.hockey .kobra-team-stats table.kobra-team-table thead th {
	padding: 0;
	border: 0;
	border-top: 1px solid var(--kobra-line);
	border-bottom: 1px solid var(--kobra-line);
	/* A shade darker than the row cards, so the band reads as the header
	   rather than as one more row. Done by washing the club navy with the
	   page's ink through a flat gradient layered *under* the texture, rather
	   than inventing a new palette colour: the scratches stay on top and
	   visible, and the two tones remain the two the site already uses.
	   Listed first is painted on top, hence texture, then wash. */
	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;
	text-align: left;
	white-space: nowrap;
	vertical-align: middle;
}
/* The band's ends, matching the cards below it. */
.hockey .kobra-team-stats table.kobra-team-table thead th:first-child {
	border-left: 1px solid var(--kobra-line);
	border-radius: 4px 0 0 4px;
}
.hockey .kobra-team-stats table.kobra-team-table thead th:last-child {
	border-right: 1px solid var(--kobra-line);
	border-radius: 0 4px 4px 0;
}
/* Taller than a data row's cell, which is the other half of making it read
   as a header rather than a first row. */
.kobra-team-table thead th > span {
	display: block;
	padding: 24px 12px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--kobra-mist);
}

/* Header cells are buttons so the table can be re-sorted from the keyboard
   as well as the mouse. */
/* `width: auto`, and that is the whole reason the table used to overflow.
   With `width: 100%` the button's width resolved against the cell's content
   box while table layout was still deriving that cell's width from its
   content — a circular measurement the browser settles about 10px out. Every
   header cell then reported content 10px wider than itself, the last one
   pushed past the container, and a horizontal scrollbar appeared, even though
   each button measured exactly the width of its own cell. Found by testing
   the candidates in the DOM one at a time; nothing about it is visible in the
   declarations.

   `flex` rather than `inline-flex` so the button still fills the cell without
   being told to: a block-level flex box takes the available width on its own. */
.kobra-team-sort {
	display: flex;
	align-items: center;
	gap: 6px;
	width: auto;
	padding: 24px 12px;
	border: 0;
	background: transparent;
	color: var(--kobra-mist);
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: inherit;
	cursor: pointer;
	transition: color .18s ease;
}
.kobra-team-sort:hover {
	color: var(--kobra-sky);
}
.kobra-team-sort.is-sorted {
	color: var(--kobra-yellow);
}
.kobra-team-sort:focus-visible {
	outline: 2px solid var(--kobra-sky);
	outline-offset: -2px;
}
.kobra-team-sort-arrow {
	font-size: 8px;
	line-height: 1;
}
/* Splash's decorative slab again — these are buttons too. */
.hockey #wrapper .kobra-team-sort::before,
.hockey #wrapper .kobra-team-sort::after {
	display: none !important;
	content: none !important;
}
.hockey #wrapper .kobra-team-sort {
	background-color: transparent !important;
	border-radius: 0;
	text-transform: uppercase;
	/* Everything here is restated because `.hockey #wrapper button` (1,1,1)
	   reaches these — they are real buttons so the table can be re-sorted
	   from the keyboard. Without it they kept Splash's own colour and, more
	   damagingly, its `15px 35px 15px 25px` padding: that made each header
	   button wider than its column, pushing the table 9px past its container
	   and raising a horizontal scrollbar. The header's height came from that
	   padding too, so setting it anywhere weaker did nothing. */
	padding: 24px 12px;
	color: var(--kobra-mist);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
}
/* Numeric columns need only enough room for their figures. */
.hockey #wrapper .kobra-team-table thead th.is-num .kobra-team-sort {
	padding-left: 8px;
	padding-right: 8px;
}
.hockey #wrapper .kobra-team-sort:hover,
.hockey #wrapper .kobra-team-sort:hover:focus,
.hockey #wrapper .kobra-team-sort:hover:active {
	color: var(--kobra-sky) !important;
}
.hockey #wrapper .kobra-team-sort.is-sorted,
.hockey #wrapper .kobra-team-sort.is-sorted:hover {
	color: var(--kobra-yellow) !important;
}

/* ---------- Columns ---------- */
/* Numeric columns take only the width their figures need. The tighter
   horizontal padding is what buys the table back the last few pixels it was
   overflowing its container by — seven of these columns at 12px a side added
   up to more than the space available. */
.kobra-team-table .is-num {
	width: 1%;
	padding-left: 8px;
	padding-right: 8px;
	text-align: center;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.hockey .kobra-team-stats table.kobra-team-table tbody tr td.is-num {
	padding-left: 8px;
	padding-right: 8px;
}
.kobra-team-table thead th.is-num .kobra-team-sort {
	padding-left: 8px;
	padding-right: 8px;
}
.kobra-team-table th.is-num .kobra-team-sort {
	justify-content: center;
}
/* These carry the same prefix as the base cell rule, or they would lose to it
   — it is longer than they are. */
.hockey .kobra-team-stats table.kobra-team-table tbody tr td.is-num {
	font-size: 16px;
	font-weight: 700;
	text-align: center;
}
/* Points are what the table is about, so they carry the emphasis — the same
   yellow the fixture list gives a winning score. */
.hockey .kobra-team-stats table.kobra-team-table tbody tr td.is-total {
	color: var(--kobra-yellow);
	font-weight: 800;
	font-size: 17px;
}
.hockey .kobra-team-stats table.kobra-team-table tbody tr td.is-pos {
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--kobra-mist);
}
.hockey .kobra-team-stats table.kobra-team-table tbody tr td.is-rank {
	padding-right: 0;
	text-align: center;
}

/* Rank sits in its own narrow cell at the head of the card, the way the
   fixture list opens each row with the date. */
.kobra-team-table .is-rank {
	width: 54px;
	padding-right: 0;
	text-align: center;
}
.kobra-team-rank {
	display: inline-block;
	min-width: 26px;
	font-size: 15px;
	font-weight: 800;
	line-height: 1;
	color: var(--kobra-mist);
	font-variant-numeric: tabular-nums;
}
/* The top three of whichever column is sorted get the accent — a small, free
   piece of information the fixture list's date block gives for nothing. */
.kobra-team-table tbody tr:nth-child(-n+3) .kobra-team-rank {
	color: var(--kobra-yellow);
}
/* Deliberately *not* nowrap. Positions run from "Centr" to "Pravé křídlo /
   Pravý obránce", and holding that on one line is what pushed the table past
   its container and raised a horizontal scrollbar. Letting it wrap costs
   nothing — the rows are tall enough to absorb a second line. */
.kobra-team-table .is-pos {
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--kobra-mist);
	white-space: normal;
}

/* ---------- Player cell ---------- */
.kobra-team-table td.is-name {
	white-space: nowrap;
}
.kobra-team-number {
	display: inline-block;
	min-width: 26px;
	margin-right: 10px;
	padding: 2px 6px;
	border-radius: 3px;
	background: rgba(234, 241, 248, 0.1);
	color: var(--kobra-mist);
	font-size: 11px;
	font-weight: 800;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
/* `.hockey a` paints links black at (0,1,1); this is (0,2,1). */
.kobra-team-table .kobra-team-player,
.kobra-team-table .kobra-team-player:focus {
	color: var(--kobra-ice);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}
.kobra-team-table .kobra-team-player:hover {
	color: var(--kobra-yellow);
}

.kobra-team-empty {
	margin: 0;
	padding: 26px 18px;
	color: var(--kobra-mist);
	text-align: center;
}

.kobra-team-stats-foot {
	margin: 20px 0 0;
	text-align: center;
}

/* ==========================================================================
   Narrow screens
   ========================================================================== */
@media (max-width: 700px) {
	.kobra-team-stats-title {
		font-size: 22px;
	}
	.hockey #wrapper .kobra-team-filter-btn.kobra-btn {
		padding: 10px 14px;
		font-size: 12px;
	}
	.kobra-team-table th,
	.kobra-team-table td {
		padding: 9px 10px;
	}
	.kobra-team-sort {
		padding: 10px;
	}
	/* Position is the first thing to go: it is the least load-bearing column
	   and the widest, and every player's position is on /buly/ anyway. */
	.kobra-team-table .is-pos {
		display: none;
	}
}