/* ==========================================================================
   Soupiska jedné sezóny — single sp_list (v0.68.0)

   Loaded on is_singular('sp_list') only, on top of redesign.css whose :root
   tokens and @font-face declarations this file relies on.

   Three pages: /seznam/hracky-2024-2025/, /seznam/hracky-2023-24/ and
   /seznam/seznam-hracu/ (which is 2022-23). **Nothing links to them** — the user
   found them by searching for "soupiska", which is also how the audit turned
   them up: reachable by URL, so reachable by Google.

   Same *data* as /buly/ and the same faults the squad cards had before v0.30,
   but **not the same markup**, so roster.css never touched them. /buly/ is three
   `[stm_players_carousel]` that roster.js rebuilds outright; this page is
   Splash's `.stm-players-inline` — a plain grid of `.stm-list-single-player`
   with no Owl anywhere near it. So this is restyled in place rather than
   rebuilt, and the values are copied from roster.css deliberately: a player card
   should not look like two different components depending on which page you
   reached it from.

   Measured before, at a confirmed 1280px viewport:

     44 cards, 4 across, 263x400 each
     name and position     #333333 on the navy page  (88 such elements)
     name and position     side by side in one 40px row, overlapping
     jersey number         white, no backing, straddling the photo's bottom edge
     the number's frame    a red-and-white hexagon of border triangles
     the card link         display: inline, colour #000000

   ---------------------------------------------------------------------------
   EVERY CARD RULE HERE CARRIES `body.hockey #wrapper .stm-players`, AND THAT IS
   THE WHOLE TRICK.

   hockey.css owns this component through **`.hockey #wrapper .stm-players
   .stm-list-single-player …`** — 29 rules, all with one ID and up to six
   classes, and the name/position colour with `!important` on top. **An ID beats
   any number of classes**, so the first version of this file, written at (0,3,0),
   lost almost everything: the cards collapsed to 21px wide and the names stayed
   grey.

   The 21px is worth understanding rather than just fixing. Their rule says
   `width: calc(25% - 30px)`, sized for the floated layout it was written for.
   Inside a grid track that percentage resolves against **the track**, not the
   container — 25% of 204px minus 30px is 21px. A declaration can be perfectly
   valid and still be nonsense in a layout it never anticipated.

   `body` in front of their `.hockey` takes each rule to one ID, the same class
   count and one element, which wins on the element without needing `!important`
   — except where theirs is important too, and those are marked below.
   ========================================================================== */

/* ---------- The grid ----------
   Splash lays these out as inline-blocks with `margin: 0 15px 30px` and
   compensates on the wrapper with `margin: 0 -30px`, which is why the wrapper
   measured 1170px inside a 1140px container. A grid with a gap needs neither. */
body.hockey #wrapper .stm-players.stm-players-inline {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr));
	gap: 22px;
	margin: 0;
}

body.hockey #wrapper .stm-players .stm-list-single-player {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	vertical-align: top;
}

/* Bootstrap's clearfix pseudo-elements are inert while the wrapper floats and
   become real grid items the moment it is a grid — they ate the first cell on
   the news listing. Same guard here. */
body.hockey #wrapper .stm-players.stm-players-inline::before,
body.hockey #wrapper .stm-players.stm-players-inline::after {
	display: none;
	content: none;
}

/* ---------- The card ----------
   **`a` is named in the selector.** `.hockey a { display: inline }` and
   `.hockey a { color: #000 }` are (0,1,1), and a rule selecting this by class
   alone would lose both — measured `display: inline`, `color: #000000` before
   this. The same fight roster.css documents for its own cards. */
body.hockey #wrapper .stm-players .stm-list-single-player > a {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	height: auto;
	border: 1px solid var(--kobra-line);
	border-radius: 4px;
	background-color: var(--kobra-navy);
	background-image: var(--kobra-ice-texture);
	background-repeat: repeat;
	background-position: 50% 50%;
	color: var(--kobra-ice);
	text-decoration: none;
	transition: border-color .18s ease, transform .18s ease;
}
body.hockey #wrapper .stm-players .stm-list-single-player > a:hover,
body.hockey #wrapper .stm-players .stm-list-single-player > a:focus {
	color: var(--kobra-ice);
	border-color: var(--kobra-sky);
	transform: translateY(-3px);
}
body.hockey #wrapper .stm-players .stm-list-single-player > a:focus-visible {
	outline: 2px solid var(--kobra-sky);
	outline-offset: 2px;
}

/* ---------- Photo ----------
   Square, like the squad cards: a portrait and a landscape headshot then occupy
   the same box and the grid rows stay even. Faces sit in the upper half of a
   headshot, so centring the crop takes off foreheads. */
body.hockey #wrapper .stm-players .stm-list-single-player .over {
	position: relative;
	aspect-ratio: 1 / 1;
	height: auto;
	overflow: hidden;
	background: var(--kobra-navy-2);
}
body.hockey #wrapper .stm-players .stm-list-single-player .over img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
	display: block;
	transition: transform .3s ease;
}
body.hockey #wrapper .stm-players .stm-list-single-player > a:hover .over img {
	transform: scale(1.05);
}

/* ---------- Name and position ----------
   Splash puts the number, the name and the position in one `.inner` fixed at
   40px, where the name and the position overlapped each other and the number was
   pulled 15px above the box. The number moves onto the photo below, so what is
   left here is two lines that need stacking and a box that can grow. */
body.hockey #wrapper .stm-players .stm-list-single-player .stm-list-single-player-info {
	display: flex;
	flex: 1 1 auto;
	position: static;
	width: 100%;
	height: auto;
	padding: 0;
	background: none;
}
body.hockey #wrapper .stm-players .stm-list-single-player .stm-list-single-player-info .inner {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1 1 auto;
	position: static;
	inset: auto;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 12px 14px 14px;
	text-align: left;
}

/* `!important` on the colour only, because theirs is important too — one ID,
   six classes and `color: #333333 !important` for both lines at once. Everything
   else in these two rules wins on the element in `body.hockey`. */
body.hockey #wrapper .stm-players .stm-list-single-player .stm-list-single-player-info .inner .player-title {
	width: auto;
	margin: 0;
	padding: 0;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--kobra-ice) !important;
	text-align: left;
	text-transform: none;
	text-wrap: pretty;
}
body.hockey #wrapper .stm-players .stm-list-single-player .stm-list-single-player-info .inner .player-position {
	width: auto;
	margin: 0;
	padding: 0;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.4;
	color: var(--kobra-mist) !important;
	text-align: left;
	text-transform: uppercase;
}

/* ---------- Jersey number ----------
   **The frame is a hexagon built from border triangles, not a background** — the
   same construction as the player profile's badge. `.player-number::before` and
   `::after` draw a white outline in 20px borders; `.before_::before` / `::after`
   draw the fill, and that fill measured `rgb(245,56,55)`, Splash's own red.
   Recolouring it would mean matching two sets of border widths and keeping them
   in step, so all four are switched off and a plain chip is drawn instead,
   exactly as the squad cards do it.

   **`.before_` itself is never hidden — the number text lives inside it.**

   The chip moves into the photo's top-left corner. Splash straddles it across
   the photo's bottom edge in white with nothing behind it, which is invisible on
   a pale photograph; yellow with dark text is legible over any of them, and the
   corner keeps it clear of the face. */
body.hockey #wrapper .stm-players .stm-list-single-player .stm-list-single-player-info .inner .player-number::before,
body.hockey #wrapper .stm-players .stm-list-single-player .stm-list-single-player-info .inner .player-number::after,
body.hockey #wrapper .stm-players .stm-list-single-player .stm-list-single-player-info .inner .player-number .before_::before,
body.hockey #wrapper .stm-players .stm-list-single-player .stm-list-single-player-info .inner .player-number .before_::after {
	display: none;
	content: none;
}

body.hockey #wrapper .stm-players .stm-list-single-player .stm-list-single-player-info .inner .player-number {
	position: absolute;
	top: 0;
	left: 0;
	right: auto;
	bottom: auto;
	z-index: 2;
	min-width: 38px;
	width: auto;
	max-width: none;
	height: auto;
	margin: 0;
	padding: 5px 10px;
	border-bottom-right-radius: 4px;
	background: var(--kobra-yellow);
	color: #101a08;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-align: center;
}
body.hockey #wrapper .stm-players .stm-list-single-player .stm-list-single-player-info .inner .player-number .before_ {
	position: static;
	display: block;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	color: #101a08;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

/* ---------- The list's own text ----------
   Each of these posts carries a short intro paragraph above the grid. */
body.hockey .sp-section-content-content .sp-post-content {
	max-width: 70ch;
	margin: 0 0 34px;
	color: var(--kobra-ice);
	font-size: 17px;
	line-height: 1.7;
}

/* Splash's generic 3x3 bullet, which would sit beside anything the template
   renders as a list item. */
body.hockey #wrapper .stm-players li::before {
	display: none;
	content: none;
}

@media (max-width: 700px) {
	body.hockey #wrapper .stm-players.stm-players-inline {
		grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr));
		gap: 14px;
	}
	body.hockey #wrapper .stm-players .stm-list-single-player .stm-list-single-player-info .inner {
		padding: 10px 11px 12px;
	}
	body.hockey #wrapper .stm-players .stm-list-single-player .stm-list-single-player-info .inner .player-title {
		font-size: 14px;
	}
	body.hockey #wrapper .stm-players .stm-list-single-player .stm-list-single-player-info .inner .player-number {
		min-width: 32px;
		padding: 4px 8px;
		font-size: 14px;
	}
}