/* ==========================================================================
   Sezónní rozpis — single sp_calendar ("Celý rozpis")

   Loaded only on calendar pages, on top of redesign.css whose :root tokens
   and @font-face declarations this file relies on.

   Kept separate from event.css rather than sharing a table skin: the two
   tables look alike but are built differently — this one has no <thead>, its
   own column set, and JS-driven pagination — so a shared block would end up
   mostly exceptions.
   ========================================================================== */

.stm-single-sp_calendar {
	padding-bottom: 90px;
}
.stm-single-sp_calendar .sp-section-content {
	margin: 0 0 40px;
}

/* Season heading, matching the section labels on the match page.
   The !important is aimed at *our own* redesign.css, which paints every h4
   `--kobra-ice !important` site-wide; this caption is an h4. */
.stm-single-sp_calendar .sp-table-caption {
	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) !important;
}
.stm-single-sp_calendar .sp-table-caption::after {
	content: '';
	flex: 1 1 auto;
	height: 1px;
	background: var(--kobra-line);
}

/* ==========================================================================
   Fixture table
   ========================================================================== */
.stm-single-sp_calendar .sp-event-list {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0 8px;
	background: transparent;
}

/* One row = one match, drawn as a card rather than a table stripe. Padding
   and rounding go on the cells because a <tr> can't carry them.

   The long selector is load-bearing: hockey.css paints these cells #f7f7f7
   through `.hockey .stm-single-sp_calendar .stm-af-template-event-list
   .sp-table-wrapper table tbody tr td` at (0,4,3), so this one matches its
   shape to land at (0,4,4) and win on specificity rather than !important. */
.stm-single-sp_calendar .stm-af-template-event-list .sp-table-wrapper table.sp-event-list 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-family: 'Bricolage Grotesque', sans-serif;
	font-size: 14px;
	vertical-align: middle;
	transition: background-color .2s ease;
}
.stm-single-sp_calendar .stm-af-template-event-list .sp-table-wrapper table.sp-event-list tbody tr td:first-child {
	border-left: 1px solid var(--kobra-line);
	border-radius: 4px 0 0 4px;
}
/* The right edge belongs to .data-away, NOT :last-child — the last cell in
   the markup is .data-season, which this file hides. Drawing the border there
   put it on an invisible cell, so the card looked cut off on the right and
   its right edge never lit up on hover. */
.stm-single-sp_calendar .stm-af-template-event-list .sp-table-wrapper table.sp-event-list tbody tr td.data-away {
	border-right: 1px solid var(--kobra-line);
	border-radius: 0 4px 4px 0;
}

/* The whole row is clickable (see linkWholeRow in calendar.js).

   The hover selector has to carry the same long prefix as the base rule
   above: that one was lengthened to out-specify hockey.css and ended up at
   (0,4,4), which beat an ordinary `tr:hover td` at (0,4,3) — so the hover
   silently did nothing. Matching the shape and adding the row class and
   :hover lands at (0,6,4).

   Border plus a lighter surface, no movement: a <tr> doesn't transform
   reliably, and the shifting rows were the part that read as fidgety
   elsewhere on the site. */
.stm-single-sp_calendar .sp-event-list tbody tr.kobra-row-linked {
	cursor: pointer;
}
.stm-single-sp_calendar .stm-af-template-event-list .sp-table-wrapper table.sp-event-list tbody tr.kobra-row-linked:hover td {
	border-color: var(--kobra-sky);
	background-color: var(--kobra-navy-2);
}

/* ---------- The last row had no bottom border to light up (v0.57.0) ----------
   The user reported that hovering the last row on the last page never lit its
   bottom edge, "as if it were hidden behind something". It was not hidden —
   **the border was not there at all**. Measured: `border-bottom-width` is 0px
   on the last row and 1px on every other, so the hover's `border-color` had
   nothing to paint.

   hockey.css turns it off deliberately:

     .hockey .stm-single-sp_calendar .stm-af-template-event-list
             .sp-table-wrapper table tbody tr:last-child td
       { border-bottom: 0 }                                        (0,5,4)

   which is correct for the striped table Splash designed — the last stripe
   needs no rule under it. Here every row is its own card
   (`border-collapse: separate`, `border-spacing: 0 8px`), so the last one needs
   all four sides like the rest. Our base rule sits at (0,4,4) and lost.

   Answered with `table.sp-event-list` in place of their bare `table`, which
   makes it (0,6,4) — one class more, so it wins outright rather than on source
   order. There is genuinely 8px of table below the last row for it to sit in,
   so nothing is clipped. */
.stm-single-sp_calendar .stm-af-template-event-list .sp-table-wrapper table.sp-event-list tbody tr:last-child td {
	border-bottom: 1px solid var(--kobra-line);
}
.stm-single-sp_calendar .stm-af-template-event-list .sp-table-wrapper table.sp-event-list tbody tr.kobra-row-linked:last-child:hover td {
	border-bottom-color: var(--kobra-sky);
}

/* ---------- Date ---------- */
.stm-single-sp_calendar .sp-event-list td.data-date {
	width: 92px;
	text-align: center;
}
/* Splash gives the date its own tinted box, sized to its contents — so it
   breathed in and out between 81px and 91px down the column ("5 Říj 2025"
   against "28 Zář 2025"). Fixed to the width of the longest possible date so
   every row's box is identical. */
/* The date block keeps its own colour but stops being a flat plate.
   Splash paints it `#1f3b79`, an opaque blue that belongs to no part of this
   palette, and — because this rule never touched the background — it sat on the
   row's textured navy as the one smooth rectangle in the table. It is now the
   palette's lighter navy with the same ice texture as every other surface, so
   the scratches run through it too.

   The wash is layered **under** the texture and listed second, the same
   technique as the statistics table's header band but lifting rather than
   darkening: the tint separates it from the row, and the scratches stay on top
   and visible. Distinct by tone, not by being a different material.

   This selector already wins for `width` at (0,6,4), which is why the
   background could simply be added to it rather than needing a chain of its
   own. */
.stm-single-sp_calendar .stm-af-template-event-list .sp-table-wrapper table.sp-event-list tbody tr td.data-date .stm-date-event-wrapp {
	width: 100px;
	box-sizing: border-box;
	padding: 10px 6px;
	border: 1px solid var(--kobra-line);
	border-radius: 4px;
	background-color: var(--kobra-navy-2);
	background-image: var(--kobra-ice-texture),
		linear-gradient(rgba(83, 169, 220, 0.10), rgba(83, 169, 220, 0.10));
	background-repeat: repeat, no-repeat;
}
/* Bricolage rather than Big Shoulders. The condensed face is reserved for
   scores and the hero title, where the number *is* the message; a date is
   ordinary interface text, and at this size the condensed cut read as a
   third typeface on the page rather than as part of the system. */
.stm-single-sp_calendar .stm-date-event-wrapp .stm-top {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 800;
	line-height: 1;
	color: var(--kobra-ice);
	/* Size is left to hockey.css, which sets 30px through a selector far
	   longer than this one. It suits the day number, so it isn't worth an
	   arms race over four pixels — noted here so the omission reads as a
	   decision rather than an oversight. */
}
.stm-single-sp_calendar .stm-date-event-wrapp .stm-middle {
	margin-top: 3px;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--kobra-mist);
	white-space: nowrap;
}
/* The year (added by calendar.js) sits quieter than the month. */
.stm-single-sp_calendar .kobra-year {
	color: var(--kobra-mist);
	opacity: 0.75;
}

/* ---------- Teams ---------- */
.stm-single-sp_calendar .sp-event-list td.data-home,
.stm-single-sp_calendar .sp-event-list td.data-away {
	width: 34%;
}
.stm-single-sp_calendar .sp-event-list td.data-home {
	text-align: right;
}
.stm-single-sp_calendar .sp-event-list td.data-away {
	text-align: left;
}
.stm-single-sp_calendar .sp-event-list td.data-home img,
.stm-single-sp_calendar .sp-event-list td.data-away img {
	width: 28px;
	height: 28px;
	object-fit: contain;
	vertical-align: middle;
}
/* Both cells run [crest][name] in the markup, so the gap that separates them
   is a margin on the *right* of the crest in both — the home cell previously
   had it on the left, which pushed the crest away from the cell edge and left
   it touching its own name. */
.stm-single-sp_calendar .sp-event-list td.data-home img,
.stm-single-sp_calendar .sp-event-list td.data-away img {
	margin-right: 10px;
}
/* Crest and name sit on one line, mirrored so both names face the score. */
.stm-single-sp_calendar .sp-event-list td.data-home,
.stm-single-sp_calendar .sp-event-list td.data-away {
	display: table-cell;
}
.stm-single-sp_calendar .kobra-team-name {
	font-weight: 700;
	vertical-align: middle;
}

/* ---------- Score ---------- */
.stm-single-sp_calendar .sp-event-list td.data-time {
	width: 110px;
	text-align: center;
	white-space: nowrap;
}
/* hockey.css singles this cell out for a dark navy (#1f3b79) at (0,5,3) —
   invisible against our own navy, and the colour a kick-off time would be
   printed in when a fixture has no result yet. Matching its shape plus
   `.data-time` lands at (0,5,4). */
.stm-single-sp_calendar .stm-af-template-event-list .sp-table-wrapper table.sp-event-list tbody tr td.data-time,
.stm-single-sp_calendar .sp-event-list td.data-time a {
	color: var(--kobra-ice);
	text-decoration: none;
}
.stm-single-sp_calendar .kobra-score {
	display: inline-flex;
	align-items: baseline;
	justify-content: center;
	gap: 7px;
	font-family: 'Big Shoulders', 'Bricolage Grotesque', sans-serif;
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
}
.stm-single-sp_calendar .kobra-score-value {
	color: var(--kobra-ice);
	font-variant-numeric: tabular-nums;
}
.stm-single-sp_calendar .kobra-score-value.is-winner {
	color: var(--kobra-yellow);
}
.stm-single-sp_calendar .kobra-score-sep {
	color: var(--kobra-mist);
}
/* A fixture with no result yet shows a kick-off time instead of a score.
   The time lives inside the row's <a>, so the colour has to go on the anchor
   as well as the cell — the cell rule alone never reached it, which is why
   the time stayed hockey.css's near-invisible navy. */
.stm-single-sp_calendar .stm-af-template-event-list .sp-table-wrapper table.sp-event-list tbody tr td.data-time.kobra-upcoming,
.stm-single-sp_calendar .stm-af-template-event-list .sp-table-wrapper table.sp-event-list tbody tr td.data-time.kobra-upcoming a {
	font-size: 14px;
	font-weight: 700;
	color: var(--kobra-ice);
}
.stm-single-sp_calendar .stm-af-template-event-list .sp-table-wrapper table.sp-event-list tbody tr:hover td.data-time.kobra-upcoming,
.stm-single-sp_calendar .stm-af-template-event-list .sp-table-wrapper table.sp-event-list tbody tr:hover td.data-time.kobra-upcoming a {
	color: var(--kobra-yellow);
}
/* Splash prints a raw <date> element next to the visible time; it carries the
   seconds and is meant to be hidden. */
.stm-single-sp_calendar .sp-event-list td.data-time date {
	display: none;
}

/* ---------- Countdown to kick-off, injected by calendar.js ----------
   A second line under the time on fixtures still to be played. Yellow,
   because on this page it is the one piece of information that is changing
   while you look at it — sky is spoken for by the hovered row.

   `tabular-nums` is not decoration: without it the seconds change width every
   tick and the whole line shifts left and right once a second. `min-width` on
   the cell stops the column itself resizing as the days roll over from
   "10 dní" to "9 dní".

   Only upcoming rows get this line, so those rows are taller than played ones.
   That is fine in a table, where rows size independently — and it puts the
   emphasis on the fixtures that have not happened yet, which is the point. */
.stm-single-sp_calendar .sp-event-list td.data-time .kobra-countdown {
	display: block;
	margin-top: 4px;
	color: var(--kobra-yellow);
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1.3;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
}

.stm-single-sp_calendar .sp-event-list td.data-time.kobra-upcoming {
	min-width: 132px;
}

/* The hovered row turns its time yellow, which would make the countdown
   disappear into it. Held apart by moving the countdown to ice on hover —
   the reverse of the row's own direction, so the two never match. */
.stm-single-sp_calendar .sp-event-list tbody tr:hover td.data-time .kobra-countdown {
	color: var(--kobra-ice);
}

@media (max-width: 780px) {
	.stm-single-sp_calendar .sp-event-list td.data-time .kobra-countdown {
		font-size: 10px;
		white-space: normal;
	}
	.stm-single-sp_calendar .sp-event-list td.data-time.kobra-upcoming {
		min-width: 0;
	}
}

/* ---------- Columns the page doesn't need ----------
   Every row of a calendar belongs to the same league and season, and the
   heading above the table already names both — so two of the six columns
   repeated the same two values down the entire page. Dropping them gives the
   team names room to be spelled out. */
.stm-single-sp_calendar .sp-event-list td.data-league,
.stm-single-sp_calendar .sp-event-list td.data-season,
.stm-single-sp_calendar .sp-event-list th.data-league,
.stm-single-sp_calendar .sp-event-list th.data-season {
	display: none;
}

/* ==========================================================================
   Pagination lives in redesign.css (v0.51.0), not here.
   --------------------------------------------------------------------------
   `.custom-paginate` is built by splash.js and shares its treatment with
   /aktuality/'s `ul.page-numbers`. Both used to be declared separately — here
   and in blog.css — and had drifted apart, which is what the user reported.
   One component now, in redesign.css. Don't re-add it here.
   ========================================================================== */

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 780px) {
	.stm-single-sp_calendar .sp-event-list tbody tr td {
		padding: 11px 8px;
		font-size: 13px;
	}
	.stm-single-sp_calendar .sp-event-list td.data-date {
		width: 56px;
	}
	.stm-single-sp_calendar .stm-date-event-wrapp .stm-top {
		font-size: 22px;
	}
	.stm-single-sp_calendar .kobra-score {
		font-size: 21px;
	}
	.stm-single-sp_calendar .sp-event-list td.data-time {
		width: 84px;
	}
	/* Crests go before names do — at this width the name is what identifies
	   the team, and 28px logos were costing it a line of wrapping. */
	.stm-single-sp_calendar .sp-event-list td.data-home img,
	.stm-single-sp_calendar .sp-event-list td.data-away img {
		display: none;
	}
}