/* ==========================================================================
   Kobra redesign — profil hráčky (single sp_player).
   Enqueued only on is_singular('sp_player'); redesign.css supplies the
   palette, fonts and texture.

   CSS-first, like the match page: SportsPress and Splash render everything
   this page needs — photo, details, biography, four statistics tables and a
   list of other players — and all of it in stable, semantic markup. Nothing
   is rebuilt in JS. What was wrong was purely presentational: the details
   list and every table cell came through in #333 on a dark page, and the
   tables kept Splash's white/grey zebra.
   ========================================================================== */

/* ---------- Centring — reclaim the empty sidebar ----------
   Same trap as the news listing and the article page: Splash reserves a
   third of the width for a sidebar that has no widgets on this site. Here
   the column is `.col-md-4` beside `.col-md-8.has_sidebar`, and it is *not*
   `:empty` — the template leaves whitespace inside it — so the test is
   "contains no element", which `:has()` expresses directly. Add a widget and
   both rules stop matching and Splash's two-column layout returns.

   Both selectors test the *row* rather than the column. The obvious
   alternative, `.row:has(> .col-md-4:not(:has(*)))`, is invalid — `:has()`
   cannot be nested inside another `:has()` — so the browser would drop it and
   the column would silently keep Bootstrap's two-thirds. `:not(:has(…))` is
   allowed and says the same thing. */
/* `:is(.single-sp_player, .single-sp_staff)` — the coaching-staff detail page is
   built from the same template family and has the same empty sidebar. `:is()`
   takes the specificity of its most specific argument, and both are single
   classes, so the weight is unchanged from the single-class version this
   replaced. */
:is(.single-sp_player, .single-sp_staff) .stm-sportspress-sidebar-right .row:not(:has(> .col-md-4 > *)) > .col-md-4 {
	display: none;
}
:is(.single-sp_player, .single-sp_staff) .stm-sportspress-sidebar-right .row:not(:has(> .col-md-4 > *)) > .col-md-8 {
	width: 100%;
}

.stm-player-page {
	/* The photo started flush against the header. */
	padding-top: 34px;
	padding-bottom: 60px;
}

/* ==========================================================================
   Photo and identity
   ========================================================================== */
/* ---------- Photo beside the identity block ----------
   Splash floats the photo left and the details right at a fixed two-thirds,
   which left a wide empty gap to the right of a short identity block and put
   the photo hard against the top. Laid out as one flex row instead: the photo
   keeps its natural width, the identity takes the rest, and the two are
   centred against each other.

   The other sections of the page are pushed to their own full-width lines —
   they are siblings in the same wrapper, so without this they would try to
   join the row. */
.stm-player-page .wpb-content-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 34px;
}
.stm-player-page .wpb-content-wrapper > .sp-section-content-excerpt,
.stm-player-page .wpb-content-wrapper > .sp-section-content-content,
.stm-player-page .wpb-content-wrapper > .sp-section-content-statistics,
.stm-player-page .wpb-content-wrapper > .sp-tab-group {
	flex: 0 0 100%;
	width: 100%;
	min-width: 0;
}
.stm-player-page .wpb-content-wrapper > .sp-section-content-photo {
	flex: 0 0 auto;
}
.stm-player-page .wpb-content-wrapper > .sp-section-content-details {
	flex: 1 1 320px;
	min-width: 0;
}
.stm-player-page .sp-section-content-photo {
	margin: 0 0 22px;
}
.stm-player-page :is(.sp-template-player-photo, .sp-template-staff-photo) {
	position: relative;
	display: inline-block;
	max-width: 270px;
	/* Visible, so the number chip can hang over the bottom edge. The rounded
	   corners then have to move onto the image itself — the box can no longer
	   clip them. */
	overflow: visible;
	/* The 9px of padding Splash puts here is what showed as a navy stripe
	   across the top of every portrait — the box's own background, not
	   anything to do with the image. */
	padding: 0;
	border: 1px solid var(--kobra-line);
	border-radius: 4px;
	background-color: var(--kobra-navy-2);
	line-height: 0;
	text-align: left;
}

/* The position is already a row in the details table below, so this pill
   just said the same thing twice. */
.stm-player-page .stm-player-position-wrapp {
	display: none;
}
/* The photo sat 10px below the top of its box, and the box's own navy showed
   through as a stripe across the top of every portrait. */
.stm-player-page :is(.sp-template-player-photo, .sp-template-staff-photo) img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 3px;
	vertical-align: top;
}

/* Room for the half of the chip that now hangs below the photo. */
.stm-player-page .sp-section-content-photo {
	padding-bottom: 26px;
}

/* ---------- Jersey number, redrawn ----------
   Splash builds this as a hexagon out of nested border triangles: a white
   outline from `::after` on the badge itself, a red fill from `::after` on an
   inner `.before_` div. Recolouring that would mean matching two sets of
   border widths and keeping them in step; the shapes are hidden instead and a
   plain chip drawn in their place — navy with an ice number, sitting at the
   bottom centre of the photo where a squad number belongs.

   Splash also stretches the element down the whole photo (it computed 80×391),
   so the size has to be taken back explicitly — `height` and the offsets, not
   just a width — or the chip becomes a stripe across the player's face.

   Only the *pseudo-elements* are hidden, never `.before_` itself — the number
   text lives inside that div, so hiding it takes the number with it. */
.hockey .stm-player-page :is(.sp-template-player-photo, .sp-template-staff-photo) .player-number-photo::before,
.hockey .stm-player-page :is(.sp-template-player-photo, .sp-template-staff-photo) .player-number-photo::after,
.hockey .stm-player-page :is(.sp-template-player-photo, .sp-template-staff-photo) .player-number-photo .before_::before,
.hockey .stm-player-page :is(.sp-template-player-photo, .sp-template-staff-photo) .player-number-photo .before_::after {
	display: none !important;
	content: none !important;
}
.hockey .stm-player-page :is(.sp-template-player-photo, .sp-template-staff-photo) .player-number-photo .before_ {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	color: inherit !important;
	font: inherit;
	line-height: inherit;
}
.hockey .stm-player-page :is(.sp-template-player-photo, .sp-template-staff-photo) .player-number-photo {
	position: absolute;
	top: auto;
	right: auto;
	/* Straddling the bottom edge — half on the photo, half below it, the way
	   the cards in "Další hráčky" carry theirs. Needs the photo box to stop
	   clipping (see there), or the lower half is simply cut off. */
	bottom: -23px;
	left: 50%;
	transform: translateX(-50%);
	width: auto;
	height: auto;
	min-width: 66px;
	min-height: 0;
	max-height: none;
	padding: 8px 18px;
	/* Navy chip, yellow number. Ice on navy was the club's colours but read
	   as a quiet label — the digit is the one thing on the photo worth
	   reading, so it takes the accent while the chip stays in the palette's
	   blue. The yellow edge and the shadow give it the separation from the
	   photograph that the original red badge got for free. */
	border: 2px solid var(--kobra-yellow);
	border-radius: 4px;
	background: var(--kobra-navy);
	box-shadow: 0 6px 18px -6px rgba(7, 27, 48, 0.9);
	color: var(--kobra-yellow) !important;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.01em;
	text-align: center;
}

/* Empty on every profile on this site — no player has social links — so it
   would otherwise be a stray gap under the photo. */
.stm-player-page .player-socials:not(:has(li)) {
	display: none;
}

/* ---------- Position, above the details ---------- */
.stm-player-page .stm-player-position-wrapp {
	margin: 0 0 14px;
}
.stm-player-page .stm-player-position {
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid var(--kobra-line);
	border-radius: 999px;
	color: var(--kobra-sky);
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ==========================================================================
   Details list
   ==========================================================================
   Splash prints label/value pairs at #333, invisible here. Laid out as a
   two-column grid so the values line up down the page instead of each pair
   sitting wherever its label ends. */
/* ---------- Identity: name and position lifted out of the table ----------
   Splash prints all six details as one striped label/value table — which put
   the player's *name* in a 14px table row, and that is the only place the
   name appears on the entire page. Every h1 here is the site title: the
   hockey layout skips the title box and the header type in use doesn't print
   one either, exactly as on the article template.

   player.js promotes the two rows that are really identity — the name to a
   real h1, the position to the eyebrow above it — and hides them here. What
   is left becomes small labelled facts rather than a form. */
.kobra-player-head {
	margin: 0 0 20px;
}
.kobra-player-eyebrow {
	display: block;
	margin: 0 0 8px;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kobra-sky);
}
.stm-player-page .kobra-player-name {
	margin: 0;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 38px;
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.015em;
	color: var(--kobra-ice) !important;
	text-wrap: balance;
}
/* !important for the same reason as everything else in this block: hockey.css
   reaches these rows through nine-class selectors, so a plain rule loses even
   though the class is on the element. */
.stm-player-page :is(.sp-player-details, .sp-staff-details) .single-info.kobra-hidden {
	display: none !important;
}

/* The remaining facts: label over value, spaced apart, with no panel and no
   rules between them, so they read as figures rather than as a form — the
   same shape as the numbers on the homepage. */
/* Splash wraps the details in a `.player-details_` that floats left at a
   fixed ~365px — half the column. That, not the facts themselves, is what
   left the right side of the section empty however the facts were laid out. */
.hockey .stm-single-sp_player.stm-player-page .player-details_ {
	float: none;
	width: 100%;
	max-width: none;
}
.stm-player-page :is(.sp-player-details, .sp-staff-details) {
	display: flex;
	flex-wrap: wrap;
	gap: 18px 30px;
	/* `auto` side margins, and they need no breakpoint.
	   Splash caps this block at `max-width: 300px` once the viewport narrows,
	   inside a parent that is still ~532px wide — so as soon as the facts wrapped
	   to two rows they sat hard left while the name above them stayed centred,
	   which is what the user spotted. Centring the block lines the two up.

	   Inert at desktop by construction: there the cap is off and the block fills
	   its parent (measured 759 in 759), so there is no leftover space for auto
	   margins to distribute and the wide layout is untouched. Nothing here has to
	   know where Splash's cap starts. */
	margin: 22px auto 30px;
	padding: 20px 0 0;
	border: 0;
	/* One hairline separating the facts from the name, instead of a rule
	   under every row. */
	border-top: 1px solid var(--kobra-line);
	background: none;
}
/* Each fact is a small stack — label over value — and they share the row
   equally, so the four of them span the whole column instead of bunching at
   the left and leaving the right half of the section empty. `flex: 1` is what
   does that; without it they take only their content width.

   Splash zebra-stripes these rows with a near-white #eee, which on a dark
   panel read as blank input boxes between the filled ones — the "white rows".
   hockey.css holds that through a nine-class selector carrying no
   !important of its own, so one settles it. */
.stm-player-page :is(.sp-player-details, .sp-staff-details) .single-info {
	display: flex;
	flex: 1 1 120px;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	padding: 0;
	border: 0;
	border-bottom: 0;
	background: transparent !important;
}
/* The colours here need !important, and this is the documented exception
   rather than a shortcut: hockey.css paints these through selectors ten and
   nine classes long (`.hockey .stm-single-sp_player .sp-template
   .sp-template-player-details …`). Out-specifying that would mean an
   eleven-class chain; those rules carry no !important of their own, so a
   single one wins outright. Same reasoning as the match page's scoreboard. */
.stm-player-page :is(.sp-player-details, .sp-staff-details) .st-label {
	color: var(--kobra-mist) !important;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}
.stm-player-page :is(.sp-player-details, .sp-staff-details) .st-value {
	color: var(--kobra-ice) !important;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.15;
	text-align: left;
}

/* ==========================================================================
   Biography ("O hráčce")
   ==========================================================================
   A questionnaire — "Na Kobře od", "Záliby mimo hokej", and so on — filled in
   on most profiles and left blank on some. Only the colours and rhythm are
   touched; the WPBakery layout is the club's own. */
.stm-player-page .sp-post-content {
	margin: 0 0 34px;
	color: var(--kobra-ice);
}

/* ---------- Text held inside the separator lines ----------
   The `[vc_separator]` rules span the full 1140px; the columns are wider
   still, so the prose began and ended slightly *outside* the lines framing
   it. The padding goes on the text blocks themselves — the separators live in
   the same columns, so padding the column moved the lines too and left the
   text exactly where it was. */
.stm-player-page .sp-post-content .wpb_text_column,
.stm-player-page .kobra-bio-heading {
	padding-left: 45px;
	padding-right: 45px;
}
/* Justified, as on the article template — and with hyphenation, because
   justifying Czech without it opens rivers of white space between long words
   and single-letter prepositions. `hyphens: auto` needs the document's
   lang="cs" (it is there) or it silently does nothing. */
.stm-player-page .sp-post-content p {
	color: var(--kobra-ice);
	font-size: 15px;
	line-height: 1.7;
	text-align: justify;
	hyphens: auto;
	-webkit-hyphens: auto;
}
/* The questionnaire's own alignment choices, if an editor ever makes one,
   stay as they were — justification is for running text. */
.stm-player-page .sp-post-content p.has-text-align-center,
.stm-player-page .sp-post-content p.has-text-align-right,
.stm-player-page .sp-post-content p.has-text-align-left {
	hyphens: none;
}
.stm-player-page .sp-post-content p.has-text-align-center { text-align: center; }
.stm-player-page .sp-post-content p.has-text-align-right { text-align: right; }
.stm-player-page .sp-post-content p.has-text-align-left { text-align: left; }
.stm-player-page .sp-post-content strong,
.stm-player-page .sp-post-content b {
	color: var(--kobra-ice);
}
.stm-player-page .sp-post-content a,
.stm-player-page .sp-post-content a:focus {
	color: var(--kobra-sky);
}
.stm-player-page .sp-post-content a:hover {
	color: var(--kobra-yellow);
}

/* The same legacy inline colours as the old articles, here in the profile
   questionnaires: `<span style="color: #333333">` around the answers, put
   there by whoever filled the profile in. An inline style is beaten only by
   an important author declaration, and the match is anchored with `^=` so it
   cannot also catch a `background-color`. Only the unreadable values are
   named, so a colour chosen on purpose still works. See post.css for the full
   account — this is the same fault in another post type. */
.stm-player-page .sp-post-content [style^="color: #333333"],
.stm-player-page .sp-post-content [style^="color:#333333"],
.stm-player-page .sp-post-content [style^="color: #000000"],
.stm-player-page .sp-post-content [style^="color:#000000"] {
	color: var(--kobra-ice) !important;
}
.stm-player-page .sp-post-content a[style^="color: #333333"],
.stm-player-page .sp-post-content a[style^="color:#333333"],
.stm-player-page .sp-post-content a[style^="color: #000000"],
.stm-player-page .sp-post-content a[style^="color:#000000"] {
	color: var(--kobra-sky) !important;
}

/* ==========================================================================
   Statistics tables
   ==========================================================================
   Four of them — one per competition, plus a career total — built like the
   fixture list and the team page: rows as separate cards, one flat colour,
   no zebra. */

/* Section captions, matching the calendar's: spaced yellow capitals with a
   rule running out to the right. redesign.css paints every h4 --kobra-ice
   with !important site-wide, so the colour needs an important of its own —
   the same fight the calendar and match pages had. */
.stm-player-page .sp-table-caption {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 16px;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--kobra-yellow) !important;
}
.stm-player-page .sp-table-caption::after {
	content: '';
	flex: 1 1 auto;
	height: 1px;
	background: var(--kobra-line);
}

.stm-player-page .sp-template-player-statistics {
	margin: 0 0 30px;
}
.stm-player-page .sp-scrollable-table-wrapper {
	overflow-x: auto;
}

.stm-player-page table.sp-player-statistics {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0 6px;
	background: transparent;
	font-family: 'Bricolage Grotesque', sans-serif;
}

/* The long prefix is doing real work: hockey.css restores its own striping
   through `.hockey table tbody tr:nth-child(2n+1) td` at (0,2,4), which beats
   anything shorter and paints every other row #f1f1f1. This is (0,3,4). Every
   state or column rule below has to carry the same prefix or it loses to this
   one — the trap that silently killed the calendar's row hover. */
.hockey .stm-player-page table.sp-player-statistics tbody tr td {
	padding: 12px 14px;
	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;
	font-weight: 600;
	text-align: center;
	vertical-align: middle;
	transition: none;
}
.hockey .stm-player-page table.sp-player-statistics tbody tr td:first-child {
	border-left: 1px solid var(--kobra-line);
	border-radius: 4px 0 0 4px;
	text-align: left;
}
.hockey .stm-player-page table.sp-player-statistics tbody tr td:last-child {
	border-right: 1px solid var(--kobra-line);
	border-radius: 0 4px 4px 0;
}

/* The header band: a shade darker than the row cards, with the texture
   showing through, so it reads as the header rather than a first row. The
   wash is layered under the texture rather than darkening the colour itself,
   which would take the scratches down with it. */
.hockey .stm-player-page table.sp-player-statistics thead th {
	padding: 14px;
	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;
	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: center;
	white-space: nowrap;
}
.hockey .stm-player-page table.sp-player-statistics thead th:first-child {
	border-left: 1px solid var(--kobra-line);
	border-radius: 4px 0 0 4px;
	text-align: left;
}
.hockey .stm-player-page table.sp-player-statistics thead th:last-child {
	border-right: 1px solid var(--kobra-line);
	border-radius: 0 4px 4px 0;
}

/* The career-total row is the point of the last table, so it is marked the
   way a winning score is elsewhere. SportsPress puts it in <tfoot>, which is
   why a rule aimed at tbody would miss it entirely — the same thing that kept
   the match page's totals row white. */
.hockey .stm-player-page table.sp-player-statistics tfoot td,
.hockey .stm-player-page table.sp-player-statistics tfoot th {
	padding: 12px 14px;
	border: 0;
	border-top: 1px solid var(--kobra-line);
	border-bottom: 1px solid var(--kobra-line);
	background-color: var(--kobra-navy-2);
	background-image: var(--kobra-ice-texture);
	background-repeat: repeat;
	color: var(--kobra-yellow);
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 14px;
	font-weight: 800;
	text-align: center;
}
.hockey .stm-player-page table.sp-player-statistics tfoot tr td:first-child,
.hockey .stm-player-page table.sp-player-statistics tfoot tr th:first-child {
	border-left: 1px solid var(--kobra-line);
	border-radius: 4px 0 0 4px;
	text-align: left;
}
.hockey .stm-player-page table.sp-player-statistics tfoot tr td:last-child,
.hockey .stm-player-page table.sp-player-statistics tfoot tr th:last-child {
	border-right: 1px solid var(--kobra-line);
	border-radius: 0 4px 4px 0;
}

/* ==========================================================================
   Other players
   ==========================================================================
   Splash lays these out as inline-block cards — not an Owl carousel, unlike
   the squad page, so a grid needs no JS here. Same card as /buly/, and the
   same two faults: the name comes through #333 and the jersey number white
   with nothing behind it. */
.stm-player-page + .stm-player-ids,
.stm-single-sp_player .stm-player-ids {
	margin: 40px 0 0;
}
/* Splash indents this block 20px, so the heading sat right of every other
   heading on the page. Pulled back to the same left edge as the statistics
   captions and the biography. */
.stm-single-sp_player .stm-player-ids .stm-title-left {
	padding-left: 0;
	margin-left: 0;
}
/* Same component as the statistics captions: spaced yellow capitals with a
   hairline running out to the right. It was the only heading on the page
   without one. */
.stm-single-sp_player .stm-player-ids .stm-main-title-unit {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--kobra-yellow) !important;
}
.stm-single-sp_player .stm-player-ids .stm-main-title-unit::after {
	content: '';
	flex: 1 1 auto;
	height: 1px;
	background: var(--kobra-line);
}
/* ---------- This really is an Owl carousel; leave its layout alone ----------
   It looks like a plain list of cards, and on a first measurement it reads as
   one — but only because the check ran before Owl had initialised. It builds
   `.owl-stage-outer` and `.owl-controls`, and the cards live *inside* the
   stage, not as children of `.stm-players`.

   Turning `.stm-players` into a grid therefore made grid items of those two
   wrappers and stacked all thirteen cards on top of each other. The same
   mistake in a new place as the Bootstrap clearfix pseudo-elements on the
   news listing: a grid was applied to a container whose children were not
   what they appeared to be. Only the cards are styled here; the carousel
   keeps its own geometry. */
.stm-single-sp_player .stm-player-ids .stm-carousel-control-prev,
.stm-single-sp_player .stm-player-ids .stm-carousel-control-next {
	color: var(--kobra-ice);
	cursor: pointer;
	transition: color .18s ease;
}
.stm-single-sp_player .stm-player-ids .stm-carousel-control-prev:hover,
.stm-single-sp_player .stm-player-ids .stm-carousel-control-next:hover {
	color: var(--kobra-yellow);
}
/* The cards carry the same nested-border hexagon as the photo, in the same
   red and white. Redrawn the same way — shapes hidden, a navy chip in their
   place — so the two badges match. Splash already positions it at the bottom
   centre of the card, so only its own box is touched; nothing here moves it,
   which is what kept the carousel intact. */
.hockey #wrapper .stm-single-sp_player .stm-player-ids .stm-list-single-player .player-number::before,
.hockey #wrapper .stm-single-sp_player .stm-player-ids .stm-list-single-player .player-number::after,
.hockey #wrapper .stm-single-sp_player .stm-player-ids .stm-list-single-player .player-number .before_::before,
.hockey #wrapper .stm-single-sp_player .stm-player-ids .stm-list-single-player .player-number .before_::after {
	display: none !important;
	content: none !important;
}
.hockey #wrapper .stm-single-sp_player .stm-player-ids .stm-list-single-player .player-number {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 54px;
	width: auto;
	height: auto;
	padding: 5px 14px;
	border: 2px solid var(--kobra-yellow);
	border-radius: 3px;
	background: var(--kobra-navy) !important;
	color: var(--kobra-yellow) !important;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.2;
	box-shadow: 0 5px 14px -6px rgba(7, 27, 48, 0.9);
}
/* Named outright rather than `inherit`: the parent's own colour is set by a
   rule of the same weight as ours, so inheriting just passed the uncertainty
   down a level and the number came out white on navy. */
.hockey #wrapper .stm-single-sp_player .stm-player-ids .stm-list-single-player .player-number .before_ {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	color: var(--kobra-yellow) !important;
	font: inherit;
}

/* ---------- Carousel arrows, as the site's ghost button ----------
   Splash draws them as bare boxes with a dark blue hairline. Given the same
   outline, ice text and sky hover as "Fotogalerie" on the homepage, so the
   two read as the same control. */
.stm-single-sp_player .stm-player-ids .stm-carousel-control-prev,
.stm-single-sp_player .stm-player-ids .stm-carousel-control-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 38px;
	border: 1.5px solid rgba(234, 241, 248, 0.4);
	border-radius: 3px;
	background: transparent;
	color: var(--kobra-ice);
	cursor: pointer;
	transition: border-color .18s ease, color .18s ease;
	/* Splash skews these into parallelograms. The site's own buttons are
	   square, and the skew also pushed the left one outside its container —
	   which clips `overflow: hidden` and sliced its left edge off. */
	transform: none;
}
/* …and the container stops clipping, so nothing can be cut again. */
.stm-single-sp_player .stm-player-ids .stm-carousel-controls-right {
	overflow: visible;
}
.stm-single-sp_player .stm-player-ids .stm-carousel-control-prev:hover,
.stm-single-sp_player .stm-player-ids .stm-carousel-control-next:hover {
	border-color: var(--kobra-sky);
	color: var(--kobra-sky);
}
/* Splash floats this block right; making it a plain flex row parked it
   immediately after the heading instead, with the cards starting the moment
   it ended. Pushed back to the right and given room below it. */
.stm-single-sp_player .stm-player-ids .stm-carousel-controls-right {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}
.stm-single-sp_player .stm-player-ids > .clearfix {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 18px;
}
/* The clearfix pseudo-elements become flex items the moment this row is a
   flex container — zero-width ones, but the `gap` above still applies before
   the heading and pushed it 20px right of every other heading on the page.
   Exactly the trap the news listing hit when its Bootstrap row became a grid;
   here it was self-inflicted, by adding the gap. */
.stm-single-sp_player .stm-player-ids > .clearfix::before,
.stm-single-sp_player .stm-player-ids > .clearfix::after {
	display: none;
}
.stm-single-sp_player .stm-player-ids > .clearfix .stm-title-left {
	flex: 1 1 auto;
	min-width: 0;
}

/* ---------- Colours only. The carousel's geometry is Splash's ----------
   An earlier pass restyled these cards structurally — flex column, a square
   photo box, `object-fit`, the number pulled out of its absolute position —
   and it tore the carousel apart: cards overlapping, different heights,
   names clipped. Owl sizes every item itself and Splash's card is built to
   those sizes, so any layout change here fights two scripts at once for no
   gain. Nothing below sets a size, a position or a display; only colour. */

/* The name and position need the long way round: hockey.css paints them #333
   through `.hockey #wrapper .stm-players …` at (1,6,0) *with* !important, so
   both an ID and another important declaration are required. These run to
   (1,8,0). */
.hockey #wrapper .stm-single-sp_player .stm-player-ids .stm-players .stm-list-single-player .stm-list-single-player-info .inner .player-title {
	color: var(--kobra-ice) !important;
}
.hockey #wrapper .stm-single-sp_player .stm-player-ids .stm-players .stm-list-single-player > a:hover .stm-list-single-player-info .inner .player-title {
	color: var(--kobra-yellow) !important;
}
.hockey #wrapper .stm-single-sp_player .stm-player-ids .stm-players .stm-list-single-player .stm-list-single-player-info .inner .player-position {
	color: var(--kobra-mist) !important;
}

/* ==========================================================================
   Once the photo is above the table, it belongs in the middle
   --------------------------------------------------------------------------
   `styles.css` sets `.sp-section-content-photo { width: 100% }` from
   **1024px** down (and hockey.css repeats it from 767px), which is what pushes
   the details table below the photo — it is not flex wrapping, and chasing it
   as a wrapping threshold gave a breakpoint around 700px that was wrong.

   From that point the box spans the full width while the photo inside it is a
   270px `display: block` with Splash's own `margin-right: 28px`, so it sat hard
   against the left edge under a full-width heading. `auto` side margins centre
   it. The number chip is positioned against this box, so it follows.

   Bounded at 1024px on purpose: it is Splash's own trigger, so the photo
   centres exactly when the layout stacks and never a pixel before. **Above
   that the photo stays left** — the user tried centred at desktop width and
   went back to left (see the 2026-08-18 checkpoint), and likes the wide layout
   as it is.

   `float: none` is the load-bearing half. SportsPress floats this box left, and
   **`auto` margins compute to 0 on a floated element** — a float is taken out of
   normal flow, so there is no leftover space for them to split. Written with the
   margins alone the rule won its specificity contest cleanly and still did
   nothing: computed `margin-left` stayed 0px. Un-float first, then centring
   works.

   And `body.hockey` on the front, because hockey.css re-floats it through
   `.hockey .stm-single-sp_player .sp-template-player-photo` at (0,3,0) — a
   two-class selector here loses to that, so `float: none` was itself ignored and
   the photo stayed left through two attempts. (0,3,1) clears it. */
@media (max-width: 1024px) {
	body.hockey .stm-player-page :is(.sp-template-player-photo, .sp-template-staff-photo) {
		float: none;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ==========================================================================
   Narrow screens
   ========================================================================== */
@media (max-width: 700px) {
	.stm-player-page :is(.sp-player-details, .sp-staff-details) {
		grid-template-columns: 1fr;
		padding: 14px 16px;
	}
	.hockey .stm-player-page table.sp-player-statistics tbody tr td,
	.hockey .stm-player-page table.sp-player-statistics thead th {
		padding: 10px;
	}
	/* Justification needs enough characters per line to hide the extra space.
	   A stacked column on a phone hasn't got them, so the same rule that
	   looks tidy on desktop starts tearing holes in the text. */
	.stm-player-page .sp-post-content p {
		text-align: left;
	}
	.stm-player-page .sp-post-content .wpb_text_column,
	.stm-player-page .kobra-bio-heading {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* ---------- Back to the squad ----------
   Injected by player.js after the related-players block, so it is the last
   thing on the page. Uses the site's outlined button, as the article
   template's "Všechny články" does. */
.kobra-player-back {
	margin: 34px 0 10px;
	padding: 0 15px;
	text-align: center;
}

/* ---------- "O hráčce" heading, lifted above the two columns ----------
   player.js moves it out of the left column and puts it in front of the row —
   see there for why CSS alone cannot do it. */
.stm-player-page .kobra-bio-heading {
	margin: 0 0 22px;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 32px;
	font-weight: 800;
	line-height: 1.12;
	color: var(--kobra-ice) !important;
}

/* ==========================================================================
   Season links in the statistics tables (v0.71.2)
   --------------------------------------------------------------------------
   Each competition's table has an `<h4>` naming the competition and a season
   slug in every row's first cell, so the cell can link through to that
   competition's page opened on that season — linkSeasonCells() in player.js.

   Underlined rather than merely coloured: it sits in a table of numbers where a
   colour alone reads as emphasis rather than as something to click. "Kariéra
   celkem" gets no links, because it is every competition at once.
   ========================================================================== */

/* `a.` names the element: `.hockey a { display: inline }` and `.hockey a
   { color: #000 }` are (0,1,1) and beat any one-class rule on an anchor. This
   file already carries that lesson for the back-to-squad button. */
body.hockey a.kobra-season-link,
body.hockey .stm-player-page a.kobra-season-link {
	color: var(--kobra-sky) !important;
	text-decoration: none;
	border-bottom: 1px solid rgba(83, 169, 220, 0.35);
	font-variant-numeric: tabular-nums;
	transition: color .18s ease, border-color .18s ease;
}
body.hockey a.kobra-season-link:hover,
body.hockey .stm-player-page a.kobra-season-link:hover,
body.hockey a.kobra-season-link:focus,
body.hockey .stm-player-page a.kobra-season-link:focus {
	color: var(--kobra-yellow) !important;
	border-bottom-color: var(--kobra-yellow);
}
body.hockey a.kobra-season-link:focus-visible {
	outline: 2px solid var(--kobra-sky);
	outline-offset: 2px;
}