/*
Theme Name:   TrailSeries Child (Exhibz)
Theme URI:    https://trailseries.bg
Description:  Child theme of Exhibz for trailseries.bg — Bulgarian trail running series.
              Results data and rendering belong to the trailseries-results plugin (ADR-002).
Author:       TrailSeries.bg
Version:      0.3.0
Template:     exhibz
Requires at least: 6.4
Requires PHP: 8.3
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  exhibz-child
*/

/* ── Design tokens ─────────────────────────────────────────────────────────── */
/*
 * Brand palette
 * --tsr-blue   #00AADD  electric/sky blue — primary brand colour
 * --tsr-navy   #0a1628  deep night navy — hero, dark sections, table headers
 * --tsr-orange #e05c1e  trail orange — accent, CTAs only
 * Greens are entirely removed.
 */
:root {
	--tsr-blue:    #00aadd;
	--tsr-blue-dk: #0088bb;   /* darker blue for hover states              */
	--tsr-navy:    #0a1628;   /* near-black navy for hero + dark sections   */
	--tsr-navy-2:  #0d2040;   /* slightly lighter navy for gradient depth   */
	--tsr-orange:  #e05c1e;   /* accent / CTA — use sparingly               */
	--tsr-climb:   #dc2626;   /* track profile/map — uphill segments (≥3% grade)   */
	--tsr-descent: #16a34a;   /* track profile/map — downhill segments (≤-3% grade) */
	--tsr-text:    #111827;   /* near-black body text                        */
	--tsr-muted:   #5b6472;   /* secondary / meta text — ≥4.5:1 on #f2f4f7 (the old #6b7280 was ~4.4:1) */
	--tsr-bg:      #f2f4f7;   /* light neutral page background               */
	--tsr-white:   #ffffff;
	--tsr-border:  #e2e6ea;
	--tsr-radius:  6px;
	--tsr-max-w:   1160px;
	--tsr-gap:     2rem;
}

/* ── Base typography ───────────────────────────────────────────────────────
   The child theme owns its fonts: the parent's master.css + fontfaceobserver
   pipeline (html.fonts-loaded gating) is dequeued for performance in
   functions.php, so these rules must not depend on it. The families match
   what the parent applied (Roboto body / Raleway headings) — loaded via a
   single trimmed Google Fonts css2 request with display=swap. */
body {
	font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-size:   16px;
	line-height: 1.6;
	color:       var(--tsr-text);
	background:  var(--tsr-white);
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Raleway", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	line-height: 1.25;
}

/* ── Layout utilities ──────────────────────────────────────────────────────── */
.tsr-container {
	max-width: var(--tsr-max-w);
	margin-inline: auto;
	padding-inline: 1.25rem;
}

.tsr-section {
	padding-block: 4rem;
}

.tsr-section__title {
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 800;
	margin-bottom: 2rem;
	color: var(--tsr-navy);
	position: relative;
	letter-spacing: -0.01em;
}

.tsr-section__title::after {
	content: '';
	display: block;
	width: 3rem;
	height: 3px;
	background: var(--tsr-blue);
	margin-top: 0.45rem;
	border-radius: 2px;
}

.tsr-empty {
	color: var(--tsr-muted);
	font-style: italic;
}

/* ── Hero — dark navy, night mountain run feel ─────────────────────────────── */
.tsr-hero {
	min-height: 80vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	/*
	 * Layered background:
	 *  1. Radial blue "lens flare" glow at top-left — the runner's headlamp
	 *  2. Deep navy gradient — night sky above mountain ridge
	 */
	background:
		radial-gradient(ellipse 70% 55% at 25% 30%, rgba(0, 170, 221, 0.18) 0%, transparent 65%),
		linear-gradient(170deg, var(--tsr-navy) 0%, var(--tsr-navy-2) 55%, #060f1e 100%);
	color: var(--tsr-white);
	position: relative;
	overflow: hidden;
}

/* Subtle grain texture */
.tsr-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
	pointer-events: none;
}

/* Mountain ridge silhouette at the bottom, blending into the page bg */
.tsr-hero::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 110px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpolygon points='0,110 200,60 400,85 600,18 800,55 1050,25 1250,70 1440,40 1440,110' fill='%23f2f4f7'/%3E%3C/svg%3E") no-repeat bottom center / 100% auto;
	pointer-events: none;
}

.tsr-hero__inner {
	position: relative;
	z-index: 1;
	padding: 4rem 1.25rem 7rem;
	max-width: 720px;
	width: 100%;
}

.tsr-hero__eyebrow {
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--tsr-blue);
	margin-bottom: 1.1rem;
	font-weight: 600;
}

.tsr-hero__title {
	font-size: clamp(2.6rem, 7vw, 5rem);
	font-weight: 900;
	line-height: 1.0;
	margin-bottom: 0.6rem;
	color: var(--tsr-white);
	letter-spacing: -0.03em;
}

/* "Series" word in brand blue */
.tsr-hero__title span {
	color: var(--tsr-blue);
}

.tsr-hero__subtitle {
	font-size: clamp(1rem, 2.2vw, 1.2rem);
	color: rgba(255, 255, 255, 0.65);
	margin-bottom: 3rem;
	font-weight: 400;
}

/* ── Countdown timer ───────────────────────────────────────────────────────── */
.tsr-countdown {
	display: flex;
	justify-content: center;
	gap: 0.875rem;
	flex-wrap: wrap;
	margin-bottom: 1.25rem;
}

.tsr-countdown__block {
	background: rgba(0, 170, 221, 0.12);
	border: 1px solid rgba(0, 170, 221, 0.3);
	border-radius: var(--tsr-radius);
	padding: 0.8rem 1.25rem;
	min-width: 78px;
	text-align: center;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.tsr-countdown__num {
	display: block;
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 800;
	line-height: 1;
	color: var(--tsr-white);
	font-variant-numeric: tabular-nums;
}

.tsr-countdown__label {
	display: block;
	font-size: 0.62rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tsr-blue);
	margin-top: 0.35rem;
	font-weight: 600;
}

.tsr-countdown__done {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--tsr-blue);
}

.tsr-hero__anniversary {
	font-size: 0.78rem;
	/* 0.55 alpha ≈ 6.2:1 on --tsr-navy; the old 0.38 measured ~3.6:1 (AA fail) */
	color: rgba(255, 255, 255, 0.55);
	margin-top: 0.25rem;
}

/* ── Accessibility: skip link ──────────────────────────────────────────────
   The child theme fully replaces header.php, so it must carry its own
   .screen-reader-text rules — the parent's may not load in every context.
   The :focus state deliberately reverses the hiding so the link is
   keyboard-reachable (Lighthouse: "skip link is not focusable"). */
.screen-reader-text {
	position:  absolute;
	width:     1px;
	height:    1px;
	margin:    -1px;
	padding:   0;
	overflow:  hidden;
	clip-path: inset(50%);
	border:    0;
}

.skip-link:focus {
	position:        fixed;
	top:             8px;
	left:            8px;
	z-index:         100000;
	width:           auto;
	height:          auto;
	margin:          0;
	padding:         0.75rem 1.25rem;
	overflow:        visible;
	clip-path:       none;
	background:      var(--tsr-navy);
	color:           #fff;
	font-weight:     700;
	border-radius:   var(--tsr-radius);
	box-shadow:      0 2px 12px rgba(0, 0, 0, 0.4);
	text-decoration: none;
	outline:         2px solid var(--tsr-blue);
	outline-offset:  2px;
}

/* ── Generic card grid ─────────────────────────────────────────────────────── */
.tsr-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: var(--tsr-gap);
}

.tsr-card {
	background: var(--tsr-white);
	border-radius: var(--tsr-radius);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.tsr-card:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 12px 32px rgba(0, 170, 221, 0.1);
	transform: translateY(-3px);
}

.tsr-card__body {
	padding: 1.25rem;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.tsr-card__title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--tsr-text);
	line-height: 1.35;
	margin: 0;
}

.tsr-card__meta {
	font-size: 0.8rem;
	color: var(--tsr-muted);
	margin: 0;
}

.tsr-card__link {
	margin-top: auto;
	padding-top: 0.75rem;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--tsr-blue);
	text-decoration: none;
	letter-spacing: 0.01em;
}

.tsr-card__link::after {
	content: '→';
	transition: transform 0.15s ease;
}

.tsr-card__link:hover {
	color: var(--tsr-orange);
}

.tsr-card__link:hover::after {
	transform: translateX(3px);
}

/* ── Upcoming events ───────────────────────────────────────────────────────── */
.tsr-upcoming {
	background: var(--tsr-bg);
}

.tsr-event-date {
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--tsr-blue);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0;
}

/* ── Upcoming events — image-background card grid ───────────────────────────── */

.tsr-event-cards {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   1.25rem;
}

.tsr-event-card {
	position:            relative;
	height:              380px;
	border-radius:       12px;
	overflow:            hidden;
	background-size:     cover;
	background-position: center;
	background-color:    var(--tsr-navy);
	transition:          transform 0.3s ease, box-shadow 0.3s ease;
}

.tsr-event-card:hover {
	transform:  scale(1.03);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

/* Full-card link sits above gradient, below date/content */
.tsr-event-card__link {
	position: absolute;
	inset:    0;
	z-index:  2;
}

/* Dark gradient — light at top, heavy at bottom for text legibility */
.tsr-event-card::after {
	content:    '';
	position:   absolute;
	inset:      0;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.22) 0%,
		rgba(0, 0, 0, 0.08) 30%,
		rgba(0, 0, 0, 0.60) 65%,
		rgba(0, 0, 0, 0.88) 100%
	);
	z-index: 1;
}

/* Date badge — top-left, above gradient */
.tsr-event-card__date {
	position:        absolute;
	top:             1rem;
	left:            1rem;
	z-index:         3;
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	background:      var(--tsr-blue);
	border-radius:   8px;
	padding:         0.4rem 0.65rem;
	min-width:       2.75rem;
	line-height:     1.1;
	text-align:      center;
}

.tsr-event-card__day {
	font-size:   1.5rem;
	font-weight: 900;
	color:       #fff;
}

.tsr-event-card__month {
	font-size:      0.65rem;
	font-weight:    700;
	color:          rgba(255, 255, 255, 0.85);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* Title + location — pinned to bottom, above gradient */
.tsr-event-card__content {
	position: absolute;
	bottom:   0;
	left:     0;
	right:    0;
	z-index:  3;
	padding:  1.25rem;
}

.tsr-event-card__title {
	font-size:   1.05rem;
	font-weight: 800;
	color:       #fff;
	margin:      0 0 0.4rem;
	line-height: 1.25;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.tsr-event-card__meta-row {
	display:     flex;
	align-items: center;
	gap:         0.35rem;
	font-size:   0.8rem;
	color:       rgba(255, 255, 255, 0.78);
	margin:      0.2rem 0 0;
}

.tsr-event-card__meta-row svg {
	flex-shrink: 0;
	color:       var(--tsr-blue);
}

@media (max-width: 768px) {
	.tsr-event-cards {
		grid-template-columns: 1fr;
	}
}

/* ── Past results list ─────────────────────────────────────────────────────── */
.tsr-past {
	background: var(--tsr-white);
}

.tsr-result-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.tsr-result-list__item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.9rem 1.25rem;
	background: var(--tsr-bg);
	border-radius: var(--tsr-radius);
	border-left: 3px solid var(--tsr-blue);
	transition: border-color 0.15s ease, background 0.15s ease;
}

.tsr-result-list__item:hover {
	border-left-color: var(--tsr-orange);
	background: #eaf6fb;
}

.tsr-result-list__title {
	flex: 1;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--tsr-text);
	text-decoration: none;
}

.tsr-result-list__title:hover {
	color: var(--tsr-blue);
}

.tsr-result-list__meta {
	font-size: 0.78rem;
	color: var(--tsr-muted);
	white-space: nowrap;
}

/* ── News section ──────────────────────────────────────────────────────────── */
.tsr-news {
	background: var(--tsr-bg);
}

.tsr-card__thumb {
	width: 100%;
	height: 180px;
	object-fit: cover;
	display: block;
}

/* ── Stats bar — dark navy, mirrors the hero ───────────────────────────────── */
.tsr-stats {
	background: var(--tsr-navy);
	color: var(--tsr-white);
	padding-block: 3.5rem;
}

.tsr-stats__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 2rem;
	text-align: center;
}

.tsr-stat__num {
	font-size: clamp(2.5rem, 5vw, 4rem);
	font-weight: 900;
	line-height: 1;
	color: var(--tsr-blue);
	font-variant-numeric: tabular-nums;
}

.tsr-stat__label {
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.48);
	margin-top: 0.5rem;
}

/* ── Section "view all" link row ───────────────────────────────────────────── */
.tsr-view-all {
	margin-top: 2rem;
}

/* ── Results table (plugin output — active theme must own this CSS) ──────────── */
.tsr-results-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Scroll hint on wide (nowrap) tables — mobile only, both the plugin's
   own wrapper and the theme's compact-table wrapper (runner/event pages). */
@media (max-width: 640px) {
	.tsr-results-wrap,
	.tsr-compact-wrap {
		position: relative;
	}

	.tsr-results-wrap::before,
	.tsr-compact-wrap::before {
		content:        '→ плъзнете за повече';
		display:        block;
		font-size:      0.72rem;
		font-weight:    600;
		color:          var(--tsr-muted);
		text-align:     right;
		margin-bottom:  0.35rem;
	}

	.tsr-results-wrap::after,
	.tsr-compact-wrap::after {
		content:        '';
		position:       absolute;
		top:            0;
		right:          0;
		bottom:         0;
		width:          28px;
		pointer-events: none;
		background:     linear-gradient(to right, transparent, rgba(0, 0, 0, 0.14));
	}
}

.tsr-results {
	border-collapse: collapse;
	width: 100%;
	font-variant-numeric: tabular-nums;
	font-size: 0.9rem;
}

.tsr-results th,
.tsr-results td {
	border: 1px solid var(--tsr-border);
	padding: 0.4rem 0.65rem;
	text-align: left;
	white-space: nowrap;
}

.tsr-results thead th {
	background: var(--tsr-navy);
	color: var(--tsr-white);
	font-weight: 600;
	position: sticky;
	top: 0;
}

.tsr-results tbody tr:nth-child(even) {
	background: #f5f7fa;
}

.tsr-results tbody tr:hover {
	background: #e0f4fb;
}

.tsr-results tr.tsr-status-dnf td,
.tsr-results tr.tsr-status-dns td,
.tsr-results tr.tsr-status-dsq td,
.tsr-results tr.tsr-status-otl td {
	color: var(--tsr-muted);
}

/* ── Inner-page hero (all pages except homepage) ───────────────────────────── */
.tsr-page-hero {
	background:
		radial-gradient(ellipse 60% 50% at 20% 50%, rgba(0, 170, 221, 0.14) 0%, transparent 60%),
		linear-gradient(160deg, var(--tsr-navy) 0%, #0d2040 100%);
	color: var(--tsr-white);
	padding: 3.5rem 0 3rem;
}

.tsr-page-hero__kicker {
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--tsr-blue);
	font-weight: 600;
	margin-bottom: 0.75rem;
}

.tsr-page-hero__title {
	font-size: clamp(1.8rem, 4vw, 3rem);
	font-weight: 900;
	color: var(--tsr-white);
	margin: 0 0 0.5rem;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.tsr-page-hero__subtitle {
	font-size: clamp(0.9rem, 2vw, 1.05rem);
	color: rgba(255, 255, 255, 0.6);
	margin: 0;
}

/* ── Inner page content wrapper ─────────────────────────────────────────────── */
.tsr-page-content {
	padding-block: 3rem;
}

.tsr-prose-section {
	margin-bottom: 3rem;
}

/* Generic page fallback (page.php) — the migrated event landing pages carry
   arbitrary legacy markup (2012-era images with fixed sizes, registration
   iframes, tables), so contain anything that could overflow the column.
   The 72ch cap sits on the SECTION, not just its <p> children like the
   base .tsr-prose-section rule: legacy text lives inside divs/tables/bare
   nodes that the p-only rule never touched, so the content stretched to
   the full 1160px container. Matches .tsr-single-content. */
.tsr-page-generic {
	max-width: 72ch;
}

.tsr-page-generic img {
	max-width: 100%;
	height:    auto;
}

.tsr-page-generic iframe,
.tsr-page-generic embed,
.tsr-page-generic object,
.tsr-page-generic video {
	max-width: 100%;
}

.tsr-page-generic table {
	display:    block;
	max-width:  100%;
	overflow-x: auto;
}

.tsr-page-generic p {
	margin-bottom: 1rem;
	line-height:   1.7;
}

.tsr-prose-section h2 {
	font-size: clamp(1.2rem, 2.5vw, 1.6rem);
	font-weight: 800;
	color: var(--tsr-navy);
	margin-bottom: 1rem;
	letter-spacing: -0.01em;
}

.tsr-prose-section p {
	max-width: 72ch;
	line-height: 1.7;
	color: var(--tsr-text);
}

/* ── Single post ──────────────────────────────────────────────────────────── */

.tsr-single-thumbnail {
	margin-bottom: 2rem;
}

.tsr-single-thumbnail img {
	width:         100%;
	max-width:     860px;
	height:        auto;
	border-radius: var(--tsr-radius);
	display:       block;
}

.tsr-single-content {
	max-width: 72ch;
}

.tsr-single-content img {
	max-width:     100%;
	height:        auto;
	border-radius: var(--tsr-radius);
}

/* ── Правила — scoring category cards ──────────────────────────────────────── */
.tsr-scoring-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
	gap: 1.5rem;
	margin-top: 1.5rem;
}

.tsr-scoring-card {
	background: var(--tsr-white);
	border-radius: var(--tsr-radius);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
	overflow: hidden;
	border-top: 4px solid var(--tsr-blue);
}

.tsr-scoring-card--medium { border-top-color: #0088bb; }
.tsr-scoring-card--long   { border-top-color: var(--tsr-navy); }
.tsr-scoring-card--bonus  { border-top-color: var(--tsr-orange); }

.tsr-scoring-card__badge {
	display: block;
	padding: 0.6rem 1rem 0;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tsr-blue);
}

.tsr-scoring-card--medium .tsr-scoring-card__badge { color: #0088bb; }
.tsr-scoring-card--long   .tsr-scoring-card__badge { color: var(--tsr-navy); }
.tsr-scoring-card--bonus  .tsr-scoring-card__badge { color: var(--tsr-orange); }

.tsr-scoring-card__title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--tsr-text);
	margin: 0.25rem 1rem 0;
}

.tsr-scoring-card__max {
	font-size: 1.8rem;
	font-weight: 900;
	color: var(--tsr-navy);
	margin: 0.25rem 1rem;
	line-height: 1;
}

.tsr-scoring-card__max strong {
	color: var(--tsr-blue);
}

.tsr-scoring-card__formula {
	font-size: 0.8rem;
	color: var(--tsr-muted);
	margin: 0 1rem 0.75rem;
}

.tsr-scoring-card__formula code {
	background: var(--tsr-bg);
	padding: 0.1rem 0.35rem;
	border-radius: 3px;
	font-size: 0.8rem;
}

.tsr-scoring-card__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.82rem;
}

.tsr-scoring-card__table th,
.tsr-scoring-card__table td {
	padding: 0.3rem 1rem;
	text-align: left;
	border-top: 1px solid var(--tsr-border);
}

.tsr-scoring-card__table thead th {
	background: var(--tsr-bg);
	font-weight: 700;
	color: var(--tsr-muted);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ── Правила — rules list ───────────────────────────────────────────────────── */
.tsr-rules-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.tsr-rules-list li {
	padding: 0.85rem 1.25rem;
	background: var(--tsr-bg);
	border-left: 3px solid var(--tsr-blue);
	border-radius: var(--tsr-radius);
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--tsr-text);
}

/* ── Summary table category badges ─────────────────────────────────────────── */
.tsr-cat-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 3px;
	font-weight: 800;
	font-size: 0.8rem;
	color: var(--tsr-white);
}

.tsr-cat-badge--a { background: var(--tsr-blue); }
.tsr-cat-badge--b { background: #0088bb; }
.tsr-cat-badge--c { background: var(--tsr-navy); }
.tsr-cat-badge--d { background: var(--tsr-orange); }

/* ── Рекорди — event group titles ──────────────────────────────────────────── */
.tsr-records-event {
	margin-bottom: 2.5rem;
}

.tsr-records-event__title {
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--tsr-navy);
	margin-bottom: 0.75rem;
	padding-bottom: 0.4rem;
	border-bottom: 2px solid var(--tsr-blue);
	display: inline-block;
}

/* ── Класирания — season nav pills ─────────────────────────────────────────── */
.tsr-season-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 2rem;
}

.tsr-season-nav__item {
	padding: 0.4rem 0.875rem;
	border-radius: 99px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--tsr-blue);
	background: rgba(0, 170, 221, 0.08);
	text-decoration: none;
	border: 1px solid rgba(0, 170, 221, 0.25);
	transition: background 0.15s, color 0.15s;
}

.tsr-season-nav__item:hover,
.tsr-season-nav__item--active {
	background: var(--tsr-blue);
	color: var(--tsr-white);
	border-color: var(--tsr-blue);
}

.tsr-rank-first td {
	background: rgba(0, 170, 221, 0.07);
	font-weight: 600;
}

/* ── Result hub — legacy multi-category page as accordion ───────────────────── */
.tsr-result-hub__section {
	border: 1px solid var(--tsr-border);
	border-radius: var(--tsr-radius);
	margin-bottom: 0.75rem;
	overflow: hidden;
}

.tsr-result-hub__summary {
	cursor:      pointer;
	user-select: none;
	padding:     0.75rem 1.1rem;
	font-size:   0.92rem;
	font-weight: 700;
	color:       var(--tsr-navy);
	background:  rgba(0, 170, 221, 0.06);
	list-style:  none;
}

.tsr-result-hub__summary::-webkit-details-marker {
	display: none;
}

.tsr-result-hub__summary::before {
	content:      '▸';
	display:      inline-block;
	margin-right: 0.55rem;
	color:        var(--tsr-blue);
	transition:   transform 0.15s ease;
}

.tsr-result-hub__section[open] > .tsr-result-hub__summary::before {
	transform: rotate(90deg);
}

.tsr-result-hub__summary:hover {
	background: rgba(0, 170, 221, 0.12);
}

.tsr-result-hub__section > .tsr-results-wrap,
.tsr-result-hub__section > table {
	margin: 0;
}

.tsr-result-hub__section[open] {
	padding-bottom: 0.25rem;
}

/* ── Klasiraniya — two-column gender split ──────────────────────────────────── */
.tsr-standings-cols {
	display: flex;
	gap: 2rem;
	align-items: flex-start;
}

.tsr-standings-col {
	flex: 1;
	min-width: 0;
}

.tsr-standings-col__heading {
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--tsr-blue);
	margin-bottom: 0.75rem;
}

.tsr-standings-note {
	font-size: 0.82rem;
	color: var(--tsr-muted);
	margin-bottom: 1.25rem;
}

@media (max-width: 640px) {
	.tsr-standings-cols {
		flex-direction: column;
		gap: 2.5rem;
	}
}

/* ── Notice / alert boxes ───────────────────────────────────────────────────── */
.tsr-notice {
	padding: 1rem 1.25rem;
	border-radius: var(--tsr-radius);
	margin-bottom: 1.5rem;
	font-size: 0.88rem;
	line-height: 1.55;
}

.tsr-notice--info {
	background: rgba(0, 170, 221, 0.08);
	border-left: 3px solid var(--tsr-blue);
	color: var(--tsr-text);
}

.tsr-notice code {
	background: rgba(0, 0, 0, 0.06);
	padding: 0.1rem 0.35rem;
	border-radius: 3px;
	font-size: 0.82rem;
}

/* ── История — timeline ─────────────────────────────────────────────────────── */
.tsr-timeline {
	list-style: none;
	padding: 0;
	margin: 0;
	position: relative;
}

.tsr-timeline::before {
	content: '';
	position: absolute;
	left: 4.5rem;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--tsr-border);
}

.tsr-timeline__item {
	display: flex;
	gap: 1.5rem;
	margin-bottom: 2rem;
	position: relative;
}

.tsr-timeline__item::before {
	content: '';
	position: absolute;
	left: calc(4.5rem - 5px);
	top: 0.35rem;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--tsr-blue);
	border: 2px solid var(--tsr-white);
	box-shadow: 0 0 0 2px var(--tsr-blue);
}

.tsr-timeline__item--future::before {
	background: var(--tsr-orange);
	box-shadow: 0 0 0 2px var(--tsr-orange);
}

.tsr-timeline__year {
	min-width: 4.5rem;
	padding-top: 0.1rem;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--tsr-muted);
	text-align: right;
	flex-shrink: 0;
}

.tsr-timeline__body {
	padding-bottom: 0.5rem;
}

.tsr-timeline__label {
	font-size: 1rem;
	font-weight: 700;
	color: var(--tsr-navy);
	margin: 0 0 0.25rem;
}

.tsr-timeline__item--future .tsr-timeline__label {
	color: var(--tsr-orange);
}

.tsr-timeline__desc {
	font-size: 0.88rem;
	color: var(--tsr-muted);
	margin: 0;
	line-height: 1.55;
}

/* ── Zero to HERO section (front page) ─────────────────────────────────────── */

.tsr-zero-section {
	background: var(--tsr-navy);
}

.tsr-zero-section .tsr-section__title {
	color: var(--tsr-white);
}

.tsr-zero-section .tsr-section__title::after {
	background: var(--tsr-orange);
}

/* Two-tone heading — accent word carries a warm gradient, the rest stays
   plain white. Reference: sliderrevolution.com's "How do you want to
   start?" treatment (coral accent word + bold rest), adapted to our navy
   section background instead of their white one. */
.tsr-zero-title__accent {
	background:            linear-gradient(100deg, #ff8a4c 0%, var(--tsr-orange) 55%, #c94e16 100%);
	-webkit-background-clip: text;
	background-clip:       text;
	-webkit-text-fill-color: transparent;
	color:                  var(--tsr-orange); /* fallback if background-clip:text is unsupported */
}

/* ── Zero to HERO — single-row sliding carousel ──────────────────────────────
   .tsr-zero-carousel (position: relative, holds nav + dots)
     └ .tsr-zero-viewport (overflow: hidden — clips the track horizontally,
                            padded/negative-margined vertically so card hover
                            lift + box-shadow aren't clipped)
         └ .tsr-zero-track (flex row, JS translateX()s it in real px)
             └ .tsr-zero-card × N (JS sizes flex-basis in px; the CSS calc()
                                    below is the pre-JS / no-JS fallback,
                                    driven by --tsr-zero-visible from PHP) */

.tsr-zero-carousel {
	position: relative;
}

.tsr-zero-viewport {
	overflow: hidden;
	/* Real (uncancelled) padding, not a negative-margin trick — the latter
	   collapses through .tsr-zero-carousel since it has no border/padding
	   of its own to establish a containing block boundary. A few extra px
	   of section height is a fair trade for that risk: this is just
	   breathing room so a card's hover lift/box-shadow isn't clipped by
	   the overflow:hidden that makes the horizontal slide work. */
	padding:  10px 0 22px;
}

.tsr-zero-track {
	display:    flex;
	gap:        var(--tsr-gap);
	transition: transform 0.5s ease;
}

/* Full-bleed photo card — the athlete's photo IS the card background
   again (user: the plain-white cards "не е гот", wanted the photo back
   like the original design), with a dark gradient scrim so title/excerpt
   stay legible. The eyebrow pill survives as an overlay badge straight on
   the photo instead of sitting on a white surface. */
.tsr-zero-card {
	position:            relative;
	height:              280px;
	flex:                0 0 calc((100% - (var(--tsr-zero-visible, 3) - 1) * var(--tsr-gap)) / var(--tsr-zero-visible, 3));
	border-radius:       var(--tsr-radius);
	overflow:            hidden;
	background-color:    var(--tsr-navy-2);
	background-size:     cover;
	background-position: center;
	display:             flex;
	flex-direction:      column;
	justify-content:     flex-end;
	transition:          transform 0.2s ease, box-shadow 0.2s ease;
}

.tsr-zero-card:hover {
	transform:  translateY(-3px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 2px var(--tsr-orange);
}

.tsr-zero-card__eyebrow {
	position:       absolute;
	top:            1rem;
	left:           1rem;
	z-index:        1;
	display:        inline-block;
	font-size:      0.7rem;
	font-weight:    700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color:          var(--tsr-white);
	background:     rgba(10, 22, 40, 0.55);
	padding:        0.3rem 0.7rem;
	border-radius:  999px;
}

.tsr-zero-card__body {
	padding:        1.25rem;
	background:     linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.45) 60%, transparent 100%);
	display:        flex;
	flex-direction: column;
	gap:            0.35rem;
}

.tsr-zero-card__title {
	font-size:   1rem;
	font-weight: 700;
	color:       var(--tsr-white);
	line-height: 1.3;
	margin:      0;
}

.tsr-zero-card__excerpt {
	font-size:   0.8rem;
	color:       rgba(255, 255, 255, 0.68);
	margin:      0;
	line-height: 1.5;
}

.tsr-zero-card__link {
	display:         inline-flex;
	align-items:     center;
	gap:             0.2rem;
	font-size:       0.82rem;
	font-weight:     700;
	color:           var(--tsr-orange);
	text-decoration: none;
	letter-spacing:  0.01em;
	margin-top:      0.25rem;
	transition:      color 0.15s ease;
}

.tsr-zero-card__link:hover {
	color: #c94e16;
}

/* Prev/next arrows — 44px tap targets, vertically centred over the row */
.tsr-zero-nav {
	position:        absolute;
	top:             50%;
	transform:       translateY(-50%);
	z-index:         2;
	width:           44px;
	height:          44px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	border:          none;
	border-radius:   50%;
	background:      rgba(10, 22, 40, 0.55);
	color:           #fff;
	font-size:       1.7rem;
	line-height:     1;
	cursor:          pointer;
	transition:      background 0.15s ease;
}

.tsr-zero-nav:hover,
.tsr-zero-nav:focus-visible {
	background: var(--tsr-orange);
}

.tsr-zero-nav--prev { left: 8px; }
.tsr-zero-nav--next { right: 8px; }

/* Dot indicators — top centre, 44px hit area each with a small visual dot
   (the bottom of the row is occupied by the card body/link). top:10px lines
   up with .tsr-zero-viewport's padding-top so dots sit flush against the
   card row itself, not the extra breathing room above it. */
.tsr-zero-dots {
	position:  absolute;
	top:       10px;
	left:      50%;
	transform: translateX(-50%);
	z-index:   2;
	display:   flex;
}

.tsr-zero-dot {
	width:           44px;
	height:          44px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         0;
	border:          none;
	background:      transparent;
	cursor:          pointer;
}

.tsr-zero-dot::before {
	content:       '';
	width:         9px;
	height:        9px;
	border-radius: 50%;
	background:    rgba(255, 255, 255, 0.5);
	box-shadow:    0 1px 3px rgba(0, 0, 0, 0.6);
	transition:    background 0.15s ease, transform 0.15s ease;
}

.tsr-zero-dot:hover::before {
	background: rgba(255, 255, 255, 0.85);
}

.tsr-zero-dot.is-active::before {
	background: var(--tsr-orange);
	transform:  scale(1.35);
}

@media (max-width: 768px) {
	/* One card per row on mobile — overrides the --tsr-zero-visible calc()
	   fallback; the carousel script sizes to the same 1-per-row above this
	   breakpoint anyway (see the vpWidth <= 768 check in layout()). */
	.tsr-zero-card {
		flex-basis: 100%;
		height:     240px;
	}
}

/* ── Map section (front page — Трасетата) ──────────────────────────────────── */

.tsr-map-section {
	background:     #060f1e;   /* darker than tsr-navy for contrast below news */
	padding-bottom: 0;
}

.tsr-map-section .tsr-section__title       { color: var(--tsr-white); }
.tsr-map-section .tsr-section__title::after { background: var(--tsr-blue); }

.tsr-map {
	height:     480px;
	width:      100%;
	display:    block;
	margin-top: 2rem;
}

/* Custom pin markers */
.leaflet-marker-icon {
	overflow: visible; /* allow scale(1.4) to bleed outside the icon bounding box */
}

.tsr-map-pin {
	width:            28px;
	height:           28px;
	position:         relative;
	cursor:           pointer;
	transform-origin: 50% 92%; /* scale from the pin's tip, not the icon's bounding box */
	transition:       transform 0.18s ease, filter 0.18s ease;
	/* White halo (layered drop-shadows) keeps the pin legible over the
	   satellite basemap's photographic greens/browns. */
	filter:           drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
}

.tsr-map-pin svg {
	display: block;
}

.tsr-map-pin--active { color: #00aadd; }
.tsr-map-pin--hist   { color: #888888; }

.leaflet-marker-icon:hover .tsr-map-pin {
	transform: scale(1.4);
	filter:    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45));
}

/* Dark popup skin */
.tsr-map .leaflet-popup-content-wrapper,
.tsr-map .leaflet-popup-tip {
	background: #0d2040;
	color:      rgba(255, 255, 255, 0.88);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.tsr-map .leaflet-popup-content-wrapper {
	border-radius: var(--tsr-radius);
}

.tsr-map .leaflet-popup-content {
	margin:      10px 14px;
	font-size:   0.85rem;
	line-height: 1.55;
}

.tsr-map .leaflet-popup-content strong  { color: var(--tsr-white); font-size: 0.95rem; }
.tsr-map .leaflet-popup-content em      { color: rgba(255, 255, 255, 0.62); font-style: normal; }

.tsr-popup-dist {
	color:       var(--tsr-blue);
	font-weight: 600;
}

.tsr-map .leaflet-popup-close-button       { color: rgba(255, 255, 255, 0.7) !important; }
.tsr-map .leaflet-popup-close-button:hover { color: var(--tsr-white) !important; }

/* Legend */
.tsr-map-legend {
	background:       rgba(10, 22, 40, 0.92);
	color:            rgba(255, 255, 255, 0.82);
	padding:          0.55rem 0.875rem;
	border-radius:    var(--tsr-radius);
	font-size:        0.78rem;
	line-height:      1.9;
	backdrop-filter:  blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.tsr-map-legend__dot {
	display:        inline-block;
	width:          10px;
	height:         10px;
	border-radius:  50%;
	margin-right:   6px;
	vertical-align: middle;
	border:         2px solid rgba(255, 255, 255, 0.55);
}

.tsr-map-legend__dot--active { background: #00aadd; }
.tsr-map-legend__dot--hist   { background: #888; }

/* ── Calendar page — two-section layout ────────────────────────────────────── */

.tsr-cal-section__title {
	font-size:     1.25rem;
	font-weight:   700;
	color:         var(--tsr-white);
	margin-bottom: 1.5rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.tsr-cal-section__title--past {
	color: rgba(255, 255, 255, 0.5);
	font-size: 1rem;
}

.tsr-cal-divider {
	border: none;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	margin: 3rem 0;
}

.tsr-cal-past {
	opacity: 0.75;
}

/* ── Calendar — month group + event rows ────────────────────────────────────── */

.tsr-cal-month {
	margin-bottom: 2rem;
}

.tsr-cal-month__heading {
	font-size:      0.72rem;
	font-weight:    700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color:          var(--tsr-blue);
	margin:         0 0 0.6rem;
	padding-bottom: 0.35rem;
	border-bottom:  1px solid rgba(0, 170, 221, 0.2);
}

.tsr-cal-event-list {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    flex;
	flex-direction: column;
	gap:        0.5rem;
}

.tsr-cal-event {
	display:       flex;
	align-items:   flex-start;
	gap:           1rem;
	padding:       0.75rem 1rem;
	background:    var(--tsr-white);
	border-radius: var(--tsr-radius);
	border-left:   3px solid var(--tsr-blue);
	transition:    background 0.15s ease, border-color 0.15s ease;
}

.tsr-cal-event:hover {
	background:         #eaf6fb;
	border-left-color:  var(--tsr-navy);
}

.tsr-cal-event--past {
	border-left-color: var(--tsr-border);
}

.tsr-cal-event--past:hover {
	border-left-color: var(--tsr-muted);
}

.tsr-cal-event__date {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	min-width:      2.5rem;
	flex-shrink:    0;
	line-height:    1.1;
	padding-top:    0.1rem;
}

.tsr-cal-event__day {
	font-size:   1.5rem;
	font-weight: 900;
	color:       var(--tsr-navy);
}

.tsr-cal-event--past .tsr-cal-event__day {
	color: var(--tsr-muted);
}

.tsr-cal-event__mon {
	font-size:      0.6rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color:          var(--tsr-muted);
}

.tsr-cal-event__body {
	flex: 1;
	min-width: 0;
}

.tsr-cal-event__title {
	display:         block;
	font-weight:     700;
	font-size:       1rem;
	color:           var(--tsr-navy);
	text-decoration: none;
	line-height:     1.3;
}

.tsr-cal-event__title:hover {
	color:           var(--tsr-blue);
	text-decoration: underline;
}

.tsr-cal-event--past .tsr-cal-event__title {
	color: var(--tsr-muted);
}

.tsr-cal-event__location {
	display:     flex;
	align-items: center;
	gap:         0.3rem;
	font-size:   0.8rem;
	color:       var(--tsr-muted);
	margin:      0.25rem 0 0;
}

.tsr-cal-event__location svg {
	flex-shrink: 0;
	color:       var(--tsr-blue);
}

.tsr-cal-event--past .tsr-cal-event__location svg {
	color: var(--tsr-muted);
}

.tsr-cal-event__thumb {
	width:         80px;
	height:        80px;
	object-fit:    cover;
	border-radius: calc( var(--tsr-radius) - 2px );
	flex-shrink:   0;
}

/* Upcoming events — dark navy style */
.tsr-cal-upcoming .tsr-cal-event {
	background:  var(--tsr-navy);
	border-left: 3px solid var(--tsr-blue);
}

.tsr-cal-upcoming .tsr-cal-event:hover {
	background:        #0f1f3a;
	border-left-color: var(--tsr-blue);
}

.tsr-cal-upcoming .tsr-cal-event__day {
	color: #fff;
}

.tsr-cal-upcoming .tsr-cal-event__mon {
	color: rgba(255, 255, 255, 0.55);
}

.tsr-cal-upcoming .tsr-cal-event__title {
	color: #fff;
}

.tsr-cal-upcoming .tsr-cal-event__title:hover {
	color: var(--tsr-blue);
}

.tsr-cal-upcoming .tsr-cal-event__location {
	color: rgba(255, 255, 255, 0.6);
}

.tsr-cal-upcoming .tsr-cal-event__location svg {
	color: var(--tsr-blue);
}

/* ── Трасета page — track groups, stats, star ratings ─────────────────────── */
.tsr-track-group {
	margin-bottom: 2.5rem;
}

.tsr-track-group__title {
	font-size:      1.25rem;
	font-weight:    800;
	color:          var(--tsr-navy);
	margin:         0 0 0.75rem;
	padding-bottom: 0.4rem;
	border-bottom:  2px solid var(--tsr-blue);
}

.tsr-track-list {
	list-style:     none;
	margin:         0;
	padding:        0;
	display:        flex;
	flex-direction: column;
	gap:            0.6rem;
}

.tsr-track {
	display:       flex;
	flex-wrap:     wrap;
	align-items:   center;
	gap:           0.5rem 1.25rem;
	padding:       0.85rem 1.1rem;
	background:    var(--tsr-white);
	border-radius: var(--tsr-radius);
	border-left:   3px solid var(--tsr-blue);
}

.tsr-track__head {
	display:     flex;
	align-items: center;
	gap:         0.75rem;
	flex-basis:  100%;
}

.tsr-track__name {
	font-weight: 700;
	font-size:   1rem;
	color:       var(--tsr-navy);
}

/*
 * Fixed-width columns, same order on every row (Дистанция, Изкачване,
 * Спускане, Височина) — a grid, not flex-wrap, so a stat that's present on
 * one row and missing on another (or a "обиколки" badge that only some
 * rows carry) can never push the columns of one card out of line with the
 * cards above and below it. tsr_track_row() always renders all four
 * cells, using "—" as a placeholder value, to guarantee that alignment.
 */
.tsr-track__meta {
	display:               grid;
	grid-template-columns: 7.5rem 7rem 7rem 9rem;
	column-gap:            1.25rem;
	row-gap:               0.4rem;
	align-items:           center;
	flex:                  1;
}

.tsr-track__stat {
	display:     flex;
	align-items: center;
	gap:         0.45rem;
	min-width:   0;
}

.tsr-track__stat-icon {
	flex:      0 0 auto;
	color:     var(--tsr-blue);
}

.tsr-track__stat-body {
	display:        flex;
	flex-direction: column;
	line-height:    1.3;
	min-width:      0;
}

.tsr-track__stat-label {
	font-size:      0.65rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color:          var(--tsr-muted);
}

.tsr-track__stat-value {
	font-size:   0.9rem;
	font-weight: 700;
	color:       var(--tsr-navy);
	white-space: nowrap;
}

.tsr-track__gpx {
	display:         inline-flex;
	align-items:     center;
	gap:             0.35rem;
	padding:         0.35rem 0.85rem;
	font-size:       0.8rem;
	font-weight:     700;
	color:           #fff;
	background:      var(--tsr-blue);
	border-radius:   999px;
	text-decoration: none;
	transition:      background 0.15s ease;
}

/* Same cascade trap as .tsr-modal__status: an unconditional `display` here
   would otherwise beat the browser's default [hidden]{display:none}, since
   author rules win over the user-agent stylesheet regardless of specificity.
   Without this, the modal's KML/Strava buttons (toggled via .hidden in
   traseta-modal.js) would show up empty/broken on every track missing that
   file — i.e. most tracks, since only 4/49 have a Strava route so far. */
.tsr-track__gpx[hidden] {
	display: none;
}

.tsr-track__gpx:hover {
	background: var(--tsr-navy);
	color:      #fff;
}

.tsr-track__badge {
	display:        inline-block;
	padding:        0.15rem 0.6rem;
	font-size:      0.65rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-radius:  999px;
	line-height:    1.4;
}

.tsr-track__badge--current {
	background: var(--tsr-blue);
	color:      #fff;
}

.tsr-track__badge--legacy {
	background: var(--tsr-border);
	color:      var(--tsr-muted);
}

.tsr-track__badge--laps {
	background:     transparent;
	color:          var(--tsr-orange);
	border:         1px solid var(--tsr-orange);
	text-transform: none;
	letter-spacing: normal;
	font-size:      0.72rem;
	padding:        0.1rem 0.55rem;
	margin-top:     0.2rem;
	align-self:     flex-start;
}

.tsr-track--legacy {
	border-left-color: var(--tsr-border);
	opacity:           0.85;
}

.tsr-track--legacy .tsr-track__name {
	color: var(--tsr-muted);
}

.tsr-track-divider {
	border:     none;
	border-top: 1px solid var(--tsr-border);
	margin:     1rem 0 0;
}

.tsr-track-legacy-group {
	margin-top: 0.6rem;
}

.tsr-track-legacy-group__summary {
	cursor:      pointer;
	font-size:   0.85rem;
	font-weight: 700;
	color:       var(--tsr-muted);
	padding:     0.35rem 0;
	user-select: none;
}

.tsr-track-legacy-group__summary:hover {
	color: var(--tsr-navy);
}

.tsr-track-legacy-group[open] .tsr-track-legacy-group__summary {
	margin-bottom: 0.6rem;
}

.tsr-track[role="button"] {
	cursor: pointer;
}

.tsr-track[role="button"]:hover {
	background: #eaf6fb;
}

.tsr-track--legacy[role="button"]:hover {
	background: var(--tsr-white);
	opacity:    1;
}

.tsr-track__gpx--secondary {
	background: var(--tsr-navy);
}

.tsr-track__gpx--secondary:hover {
	background: var(--tsr-blue);
}

.tsr-track__gpx--strava {
	background: var(--tsr-orange);
}

.tsr-track__gpx--strava:hover {
	background: var(--tsr-navy);
}

/* Keyboard focus — the default outline is suppressed by the parent theme's
   reset, so without these a keyboard user has no idea where they are. */
.tsr-track[role="button"]:focus-visible,
.tsr-track__gpx:focus-visible,
.tsr-modal__close:focus-visible,
.tsr-track-legacy-group__summary:focus-visible {
	outline:        2px solid var(--tsr-blue-dk);
	outline-offset: 2px;
}

/* Touch devices: lift the pill buttons to a ~44px tap target. */
@media (pointer: coarse) {
	.tsr-track__gpx {
		padding: 0.6rem 1.05rem;
	}
}

/* ── Трасета — track detail modal ───────────────────────────────────────────── */
.tsr-modal {
	position: fixed;
	inset:    0;
	z-index:  10000;
	display:  flex;
	align-items:     center;
	justify-content: center;
	padding: 1rem;
}

.tsr-modal[hidden] {
	display: none;
}

body.tsr-modal-open {
	overflow: hidden;
}

.tsr-modal__overlay {
	position:   absolute;
	inset:      0;
	background: rgba(10, 22, 40, 0.72);
}

.tsr-modal__dialog {
	position:      relative;
	width:         min(860px, 100%);
	max-height:    calc(100vh - 2rem);
	overflow-y:    auto;
	background:    #fff;
	border-radius: var(--tsr-radius);
	padding:       1.5rem;
	box-shadow:    0 20px 60px rgba(0, 0, 0, 0.35);
}

.tsr-modal__close {
	position:    absolute;
	top:         0.75rem;
	right:       0.75rem;
	width:       2.2rem;
	height:      2.2rem;
	border:      0;
	border-radius: 50%;
	background:  var(--tsr-navy);
	color:       #fff;
	font-size:   1.3rem;
	line-height: 1;
	cursor:      pointer;
	z-index:     1;
}

.tsr-modal__close:hover {
	background: var(--tsr-blue);
}

.tsr-modal__title {
	font-size:    1.35rem;
	font-weight:  800;
	color:        var(--tsr-navy);
	margin:       0 2.5rem 1rem 0;
}

/* Title splits into "{event name} – {distance/variant}" (buildTitleHtml(),
   traseta-modal.js): the event name is toned down to --tsr-muted so the
   distance — left at the title's own navy/800 default — reads as the
   dominant, contrasting half instead of both running together as one
   same-weight phrase. */
.tsr-modal-title__event {
	color:       var(--tsr-muted);
	font-weight: 700;
}

.tsr-modal__map {
	height:        340px;
	border-radius: var(--tsr-radius);
	margin-bottom: 1rem;
	z-index:       0;
}

/* Fetch status line (loading / error) — sized like the map it stands in for,
   so the dialog doesn't collapse and then jump when the map appears. */
.tsr-modal__status {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             0.6rem;
	min-height:      120px;
	margin-bottom:   1rem;
	border-radius:   var(--tsr-radius);
	background:      #f4f7fa;
	font-size:       0.9rem;
	font-weight:     600;
	color:           var(--tsr-muted);
	text-align:      center;
	padding:         1rem;
}

/* An author `display` declaration otherwise wins over the browser's default
   [hidden]{display:none} UA rule regardless of specificity (origin beats
   specificity in the cascade) — without this, the status box stayed visible
   (empty) even while its `hidden` attribute was set. */
.tsr-modal__status[hidden] {
	display: none;
}

.tsr-modal__status--error {
	background: #fdf2f0;
	color:      #b3401f;
}

.tsr-spinner {
	width:         18px;
	height:        18px;
	flex:          0 0 auto;
	border:        2.5px solid var(--tsr-border);
	border-top-color: var(--tsr-blue);
	border-radius: 50%;
	animation:     tsr-spin 0.8s linear infinite;
}

@keyframes tsr-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.tsr-spinner {
		animation: none;
	}
}

.tsr-modal__chart-wrap {
	position:      relative;
	margin-bottom: 1rem;
}

.tsr-modal__chart {
	display:     block;
	width:       100%;
	height:      auto;
	cursor:      crosshair;
	touch-action: none;
}

.tsr-chart__hover-line {
	stroke:        var(--tsr-navy);
	stroke-width:  1;
	opacity:       0;
	pointer-events: none;
}

.tsr-chart__hover-dot {
	fill:          #fff;
	stroke:        var(--tsr-orange);
	stroke-width:  2.5;
	opacity:       0;
	pointer-events: none;
}

.tsr-chart-tooltip {
	position:      absolute;
	transform:     translate(-50%, -125%);
	pointer-events: none;
	background:    var(--tsr-navy);
	color:         #fff;
	font-size:     0.72rem;
	line-height:   1.5;
	padding:       0.35rem 0.6rem;
	border-radius: 6px;
	white-space:   nowrap;
	z-index:       2;
	box-shadow:    0 4px 12px rgba(0, 0, 0, 0.25);
}

.tsr-chart-tooltip__row {
	display: block;
}

/* Elevation-hover marker on the Leaflet map: white circle, green dot.
   Passing our own `className` to L.divIcon() replaces Leaflet's default
   'leaflet-div-icon' class entirely (Leaflet does a plain options
   overwrite, not a class merge) — the marker never carries that class, so
   there is no default background/border to strip here. Critical box-model
   properties are also inlined in the marker's HTML (see hoverIcon in
   traseta-modal.js) so the marker renders correctly even before/without
   this stylesheet — these rules are the belt to that inline-style
   suspenders, keeping the two in sync when either is edited. */
.tsr-hover-marker {
	display:       block;
	width:         16px;
	height:        16px;
	border-radius: 50%;
	background:    #fff;
	border:        2px solid #2ecc71;
	box-shadow:    0 1px 4px rgba(0, 0, 0, 0.45);
	position:      relative;
	box-sizing:    border-box;
}

.tsr-hover-marker__dot {
	position:      absolute;
	top:           50%;
	left:          50%;
	width:         6px;
	height:        6px;
	border-radius: 50%;
	background:    #2ecc71;
	transform:     translate(-50%, -50%);
}

/* Discreet per-km marker on the route: a small plain dot, deliberately much
   quieter than the hover marker above — it's a passive distance reference,
   not something to click or focus on. Shows "N км" in a tooltip on hover. */
.tsr-km-marker {
	display:       block;
	width:         7px;
	height:        7px;
	border-radius: 50%;
	background:    #fff;
	border:        1.5px solid var(--tsr-navy);
	opacity:       0.75;
	box-sizing:    border-box;
}

.tsr-chart__grid {
	stroke:       var(--tsr-border);
	stroke-width: 1;
}

.tsr-chart__tick {
	stroke:       var(--tsr-muted);
	stroke-width: 1;
}

/* Discreet, unlabeled tick at every whole km — thinner and fainter than
   .tsr-chart__tick (the labeled "nice interval" ticks), so the km grid
   reads as a subtle texture rather than competing with the labeled ones. */
.tsr-chart__km-tick {
	stroke:       var(--tsr-border);
	stroke-width: 1;
	opacity:      0.8;
}

/* Segment stroke color is set inline per-path (climb/descent/flat vary
   within one chart) — this class only fixes width/join, shared by all three. */
.tsr-chart__line {
	stroke-width:    2;
	stroke-linejoin: round;
}

.tsr-chart__ylabel {
	font-size:   11px;
	fill:        var(--tsr-muted);
	text-anchor: end;
	dominant-baseline: middle;
}

.tsr-chart__xlabel {
	font-size:   11px;
	fill:        var(--tsr-muted);
	text-anchor: middle;
}

/* SVG text font-size resolves in the chart's own viewBox coordinate space,
   so it scales with the viewBox regardless of screen pixels. JS switches to
   a narrower (440 vs 800) viewBox at this same breakpoint — this bump keeps
   the *rendered* label size legible on a ~340px-wide modal instead of the
   ~4-5px that 11px/800-wide would produce. */
@media (max-width: 640px) {
	.tsr-chart__ylabel,
	.tsr-chart__xlabel {
		font-size: 16px;
	}
}

/* Legend for the grade colors on the profile + map — without it the
   red/blue/green segments are unexplained, and for red-green colorblind
   visitors the labels are the only reliable decoding. */
.tsr-chart-legend {
	display:         flex;
	justify-content: center;
	gap:             1.25rem;
	margin-top:      0.35rem;
	font-size:       0.72rem;
	font-weight:     600;
	color:           var(--tsr-muted);
}

.tsr-chart-legend__item {
	display:     inline-flex;
	align-items: center;
	gap:         0.35rem;
}

.tsr-chart-legend__swatch {
	width:         14px;
	height:        4px;
	border-radius: 2px;
}

.tsr-chart-legend__swatch--climb   { background: var(--tsr-climb); }
.tsr-chart-legend__swatch--flat    { background: var(--tsr-blue); }
.tsr-chart-legend__swatch--descent { background: var(--tsr-descent); }

.tsr-modal__stats {
	margin-bottom: 1rem;
}

.tsr-modal__actions {
	display: flex;
	gap:     0.6rem;
}

@media (max-width: 600px) {
	.tsr-modal__map {
		height: 240px;
	}

	.tsr-modal__dialog {
		padding: 1rem;
	}
}

.tsr-stars {
	display:     inline-flex;
	gap:         0.1rem;
	line-height: 1;
}

.tsr-star {
	font-size: 0.95rem;
	color:     var(--tsr-border);
}

.tsr-star--on {
	color: var(--tsr-orange);
}

@media (max-width: 600px) {
	.tsr-track__meta {
		flex-basis:             100%;
		grid-template-columns:  1fr 1fr;
		row-gap:                0.6rem;
	}
}

/* ── Новини archive — pagination ────────────────────────────────────────────── */
.tsr-pagination {
	margin-top: 2.5rem;
	display: flex;
	justify-content: center;
}

.tsr-pagination .nav-links {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	align-items: center;
}

.tsr-pagination .page-numbers {
	padding: 0.4rem 0.75rem;
	border-radius: var(--tsr-radius);
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--tsr-blue);
	text-decoration: none;
	border: 1px solid var(--tsr-border);
	transition: background 0.15s, color 0.15s;
}

.tsr-pagination .page-numbers.current,
.tsr-pagination .page-numbers:hover {
	background: var(--tsr-blue);
	color: var(--tsr-white);
	border-color: var(--tsr-blue);
}

/* menu-highlight orange pill — defined in the site-header section below */

/* ── Резултати archive — year accordion ─────────────────────────────────────── */
.tsr-results-archive {
	margin-top: 2rem;
}

.tsr-year-group {
	border: 1px solid rgba(0, 170, 221, 0.18);
	border-radius: 8px;
	margin-bottom: 1rem;
	overflow: hidden;
}

.tsr-year-group__summary {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             1rem;
	padding:         0.85rem 1.25rem;
	background:      var(--tsr-navy);
	color:           #fff;
	cursor:          pointer;
	list-style:      none;
	user-select:     none;
}
/* Remove the default disclosure triangle in all browsers */
.tsr-year-group__summary::-webkit-details-marker { display: none; }
.tsr-year-group__summary::marker               { display: none; }

.tsr-year-group__summary::after {
	content:     '▸';
	font-size:   0.85em;
	transition:  transform 0.2s ease;
	flex-shrink: 0;
}
.tsr-year-group[open] > .tsr-year-group__summary::after {
	transform: rotate(90deg);
}

.tsr-year-group__year {
	font-size:   1.15rem;
	font-weight: 700;
	letter-spacing: 0.03em;
}

.tsr-year-group__count {
	font-size:   0.8rem;
	opacity:     0.7;
	white-space: nowrap;
}

/* ── Event list inside each year ── */
.tsr-event-list {
	list-style: none;
	margin:     0;
	padding:    0.5rem 0 0.75rem;
}

.tsr-event-item {
	padding:       0.55rem 1.25rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.tsr-event-item:last-child {
	border-bottom: none;
}

.tsr-event-item__name {
	display:     inline-block;
	font-weight: 600;
	font-size:   0.95rem;
	color:       var(--tsr-navy);
	text-decoration: none;
	margin-bottom: 0.3rem;
}
.tsr-event-item__name:hover {
	color:           var(--tsr-blue);
	text-decoration: underline;
}

/* Event date next to a landing-page link on /sabitia/ (page-sabitia.php) */
.tsr-sabitia-date {
	margin-left: 0.6rem;
	font-size:   0.8rem;
	color:       var(--tsr-muted);
	white-space: nowrap;
}

/* ── Category pill links ── */
.tsr-cat-list {
	display:    flex;
	flex-wrap:  wrap;
	gap:        0.4rem 0.5rem;
	list-style: none;
	margin:     0;
	padding:    0;
}

.tsr-cat-pill {
	display:         inline-block;
	padding:         0.2em 0.7em;
	border-radius:   999px;
	font-size:       0.75rem;
	font-weight:     500;
	background:      rgba(0, 170, 221, 0.1);
	color:           var(--tsr-navy);
	text-decoration: none;
	border:          1px solid rgba(0, 170, 221, 0.3);
	transition:      background 0.15s ease, color 0.15s ease;
	white-space:     nowrap;
}
.tsr-cat-pill:hover {
	background: var(--tsr-blue);
	color:      #fff;
	border-color: var(--tsr-blue);
}

/* ── Site header — single-row layout ────────────────────────────────────
 *
 * [logo] ........... [nav menu]
 *
 * Rendered by header.php in this child theme; id="masthead" kept for
 * any JS or third-party code that targets it.
 * ──────────────────────────────────────────────────────────────────────── */

#masthead {
	position:   sticky !important;
	top:        0;
	z-index:    500;
	width:      100%;
	background: var(--tsr-navy);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .06),
	            0 2px 14px rgba(0, 0, 0, .32);
}

/* ── Single-row inner layout ─────────────────────────────────────────── */

.tsr-header-inner {
	display:         flex !important;
	flex-direction:  row !important;
	align-items:     center !important;
	justify-content: center;
	gap:             3rem;
	padding-block:   0.75rem;
	transition:      padding-block 0.3s ease;
}

.tsr-header-brand {
	display:     flex;
	flex-direction: row;
	align-items: center;
	gap:         0.75rem;
	flex-shrink: 0;
}

.tsr-header-nav {
	display:     flex !important;
	align-items: center !important;
}

.tsr-header-logo a   { display: block; line-height: 0; }
.tsr-header-logo img { max-height: 70px; width: auto; transition: max-height 0.3s ease; }


.tsr-nav-list {
	display:     flex;
	flex-wrap:   wrap;
	align-items: center;
	list-style:  none;
	margin:      0;
	padding:     0;
}

#masthead .tsr-nav-list > li > a {
	display:         block;
	padding:         0.6rem 0.875rem;
	color:           rgba(255, 255, 255, 0.78);
	font-size:       0.875rem;
	font-weight:     600;
	text-decoration: none;
	white-space:     nowrap;
	letter-spacing:  0.03em;
	background:      none;
	border:          none;
	border-bottom:   2px solid transparent;
	border-radius:   0;
	box-shadow:      none;
	transition:      color 0.2s ease, border-color 0.2s ease;
}

#masthead .tsr-nav-list > li > a:hover,
#masthead .tsr-nav-list > .current-menu-item > a,
#masthead .tsr-nav-list > .current_page_item > a {
	color:               var(--tsr-blue);
	border-bottom-color: var(--tsr-blue);
}

/* Orange-pill highlight — add class "menu-highlight" in WP menu editor */
#masthead .tsr-nav-list > .menu-highlight > a,
#masthead .tsr-nav-list > .menu-highlight > a:visited {
	background:    var(--tsr-orange);
	color:         #fff !important;
	border:        none;
	border-radius: 999px;
	padding:       0.3em 1em;
	margin-inline: 0.25rem;
	font-weight:   600;
	box-shadow:    none;
	transition:    background 0.2s ease, box-shadow 0.2s ease;
}

#masthead .tsr-nav-list > .menu-highlight > a:hover {
	background: #c94e16;
	box-shadow: 0 2px 8px rgba(224, 92, 30, 0.4);
	color:      #fff !important;
}

/* Temporarily hide an unfinished menu item without deleting it — add class
   "tsr-menu-hidden" in WP menu editor. Currently on "Рекорди" (2026-08-27)
   while that section is reworked; remove the class in the menu editor to
   bring it back, no template changes needed. */
#masthead .tsr-nav-list > .tsr-menu-hidden {
	display: none;
}

/* ── Mobile nav toggle (hamburger) ───────────────────────────────────── */

.tsr-nav-toggle {
	display:    none;   /* desktop: nav is inline, no toggle */
	flex-direction: column;
	justify-content: center;
	gap:        5px;
	width:      44px;
	height:     44px;
	padding:    10px;
	background: transparent;
	border:     none;
	cursor:     pointer;
}

.tsr-nav-toggle__bar {
	display:       block;
	width:         100%;
	height:        2px;
	border-radius: 2px;
	background:    #fff;
	transition:    transform 0.25s ease, opacity 0.2s ease;
}

/* Bars → X when open */
#masthead.tsr-nav-open .tsr-nav-toggle__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

#masthead.tsr-nav-open .tsr-nav-toggle__bar:nth-child(2) {
	opacity: 0;
}

#masthead.tsr-nav-open .tsr-nav-toggle__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 768px) {
	.tsr-header-inner {
		padding-block:   0.6rem;
		flex-wrap:       wrap;
		justify-content: space-between;
		gap:             0;
	}

	.tsr-header-logo img { max-height: 50px; }

	.tsr-nav-toggle {
		display: flex;
	}

	/* Nav collapses into a slide-down panel spanning the full header width. */
	.tsr-header-nav {
		display:    block !important;   /* base rule uses flex !important */
		flex-basis: 100%;
		max-height: 0;
		overflow:   hidden;
		transition: max-height 0.3s ease;
	}

	#masthead.tsr-nav-open .tsr-header-nav {
		max-height: 80vh;
		overflow-y: auto;
	}

	.tsr-nav-list {
		flex-direction: column;
		align-items:    stretch;
		padding:        0.5rem 0 1rem;
	}

	#masthead .tsr-nav-list > li > a {
		padding:       0.8rem 0.5rem;
		font-size:     0.95rem;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}

	#masthead .tsr-nav-list > li:last-child > a {
		border-bottom: none;
	}

	#masthead .tsr-nav-list > li > a:hover,
	#masthead .tsr-nav-list > .current-menu-item > a,
	#masthead .tsr-nav-list > .current_page_item > a {
		border-bottom-color: rgba(255, 255, 255, 0.08);
	}

	#masthead .tsr-nav-list > .menu-highlight {
		margin-top: 0.75rem;
	}

	#masthead .tsr-nav-list > .menu-highlight > a {
		display:    inline-block;
		align-self: flex-start;
	}
}

/* ── Sticky shrink — scrolled state (JS adds .tsr-header--scrolled) ──────── */

#masthead.tsr-header--scrolled .tsr-header-inner {
	padding-block: 0.4rem;
}

#masthead.tsr-header--scrolled .tsr-header-logo img {
	max-height: 32px;
}

@media (max-width: 640px) {
	.tsr-section {
		padding-block: 2.5rem;
	}

	.tsr-countdown {
		gap: 0.5rem;
	}

	.tsr-countdown__block {
		min-width: 62px;
		padding: 0.65rem 0.875rem;
	}

	.tsr-result-list__meta {
		display: none;
	}

	.tsr-timeline::before {
		left: 3rem;
	}

	.tsr-timeline__item::before {
		left: calc(3rem - 5px);
	}

	.tsr-timeline__year {
		min-width: 3rem;
		font-size: 0.75rem;
	}

	.tsr-scoring-grid {
		grid-template-columns: 1fr;
	}

	.tsr-page-hero {
		padding: 2.5rem 0 2rem;
	}

	.tsr-map {
		height: 360px;
	}
}

/* ── Runner Profile page ────────────────────────────────────────────────────── */

.tsr-runner-search {
	display:       flex;
	gap:           0.75rem;
	margin-bottom: 2.5rem;
	flex-wrap:     wrap;
}

.tsr-runner-search__input {
	flex:         1;
	min-width:    200px;
	padding:      0.65rem 1rem;
	border:       1px solid var(--tsr-border);
	border-radius: var(--tsr-radius);
	font-size:    1rem;
	color:        var(--tsr-text);
	background:   var(--tsr-white);
}

.tsr-runner-search__input:focus {
	outline:    none;
	border-color: var(--tsr-blue);
	box-shadow: 0 0 0 3px rgba(0, 170, 221, 0.15);
}

.tsr-runner-search__btn {
	padding:       0.65rem 1.5rem;
	background:    var(--tsr-blue);
	color:         var(--tsr-white);
	border:        none;
	border-radius: var(--tsr-radius);
	font-size:     1rem;
	font-weight:   600;
	cursor:        pointer;
	white-space:   nowrap;
	transition:    background 0.15s;
}

.tsr-runner-search__btn:hover {
	background: var(--tsr-blue-dk);
}

/* Stats strip */
.tsr-runner-stats {
	display:       grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap:           1rem;
	margin-bottom: 2.5rem;
}

.tsr-runner-stat {
	background:    var(--tsr-navy);
	border-radius: var(--tsr-radius);
	padding:       1rem 1.25rem;
	text-align:    center;
}

.tsr-runner-stat__num {
	font-size:   2rem;
	font-weight: 900;
	color:       var(--tsr-blue);
	line-height: 1;
}

.tsr-runner-stat__label {
	font-size:      0.72rem;
	color:          rgba(255, 255, 255, 0.55);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	margin-top:     0.35rem;
}

/* Season group */
.tsr-runner-season {
	margin-bottom: 2rem;
}

.tsr-runner-season__heading {
	font-size:     1.1rem;
	font-weight:   800;
	color:         var(--tsr-navy);
	margin-bottom: 0.75rem;
	padding-bottom: 0.35rem;
	border-bottom: 2px solid var(--tsr-blue);
}

.tsr-runner-season__count {
	font-weight: 400;
	color:       var(--tsr-muted);
	font-size:   0.9rem;
}

/* Compact table (shared by runner + event pages) */
.tsr-compact-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.tsr-compact-table {
	width:           100%;
	border-collapse: collapse;
	font-size:       0.88rem;
}

.tsr-compact-table th {
	background:     var(--tsr-navy);
	color:          rgba(255, 255, 255, 0.72);
	font-size:      0.72rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	padding:        0.45rem 0.875rem;
	text-align:     left;
	white-space:    nowrap;
}

.tsr-compact-table td {
	padding:     0.55rem 0.875rem;
	border-bottom: 1px solid var(--tsr-border);
	color:       var(--tsr-text);
	white-space: nowrap;
}

.tsr-compact-table tbody tr:last-child td {
	border-bottom: none;
}

.tsr-compact-table tbody tr:hover td {
	background: rgba(0, 170, 221, 0.04);
}

.tsr-compact-table__place {
	font-weight: 700;
	color:       var(--tsr-blue);
}

.tsr-compact-table__time {
	font-variant-numeric: tabular-nums;
}

.tsr-compact-table__link {
	color:           var(--tsr-navy);
	text-decoration: none;
	font-weight:     600;
}

.tsr-compact-table__link:hover {
	color:           var(--tsr-blue);
	text-decoration: underline;
}

/* Non-finisher rows */
.tsr-runner-row--dnx td {
	color: var(--tsr-muted);
}

/* ── Event History page ─────────────────────────────────────────────────────── */

/* Course records heading */
.tsr-event-records {
	margin-bottom: 2rem;
}

.tsr-event-records__title {
	font-size:      0.78rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color:          var(--tsr-muted);
	margin-bottom:  0.875rem;
}

/* Editions list */
.tsr-editions {
	display:        flex;
	flex-direction: column;
	gap:            0.6rem;
}

.tsr-edition-item {
	display:     flex;
	align-items: baseline;
	gap:         1rem;
	padding:     0.7rem 1rem;
	background:  var(--tsr-bg);
	border-radius: var(--tsr-radius);
	border-left: 3px solid var(--tsr-blue);
}

.tsr-edition-item--multi {
	flex-direction: column;
	align-items:    flex-start;
	gap:            0.4rem;
}

.tsr-edition-item__year {
	font-weight: 800;
	color:       var(--tsr-navy);
	min-width:   3.25rem;
	flex-shrink: 0;
	font-size:   0.95rem;
}

.tsr-edition-item__links {
	display:   flex;
	flex-wrap: wrap;
	gap:       0.4rem 0.75rem;
}

.tsr-edition-item__link {
	color:           var(--tsr-blue);
	text-decoration: none;
	font-size:       0.9rem;
	font-weight:     500;
}

.tsr-edition-item__link:hover {
	text-decoration: underline;
}

/* Event browse list */
.tsr-event-index {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap:        0.5rem;
}

.tsr-event-index__link {
	display:       block;
	padding:       0.55rem 0.875rem;
	background:    var(--tsr-bg);
	border-radius: var(--tsr-radius);
	border-left:   3px solid var(--tsr-blue);
	color:         var(--tsr-navy);
	text-decoration: none;
	font-weight:   600;
	font-size:     0.9rem;
	transition:    background 0.15s, color 0.15s;
}

.tsr-event-index__link:hover {
	background: var(--tsr-blue);
	color:      var(--tsr-white);
}

/* ── Breadcrumbs (single-ts_result.php) ──────────────────────────────────── */
.tsr-breadcrumbs {
	font-size:     0.85rem;
	color:         var(--tsr-muted);
	margin-bottom: 1rem;
}

.tsr-breadcrumbs__link {
	color:           var(--tsr-blue);
	text-decoration: none;
}

.tsr-breadcrumbs__link:hover {
	text-decoration: underline;
}

.tsr-breadcrumbs__sep {
	margin: 0 0.4em;
	color:  var(--tsr-border);
}

.tsr-breadcrumbs__current {
	color:       var(--tsr-text);
	font-weight: 600;
}

/* ── Партньори (page-partniori.php) ──────────────────────────────────────── */
.tsr-partners-grid {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap:                   var(--tsr-gap);
}

.tsr-partner-card {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	gap:             0.75rem;
	padding:         1.5rem 1rem;
	background:      var(--tsr-white);
	border:          1px solid var(--tsr-border);
	border-radius:   var(--tsr-radius);
	text-decoration: none;
	transition:      transform 0.15s, box-shadow 0.15s;
}

a.tsr-partner-card:hover {
	transform:  translateY(-3px);
	box-shadow: 0 8px 20px rgba(10, 22, 40, 0.10);
}

/* Fixed width AND height (not just height) — real partner logos vary
   wildly in aspect ratio (wide wordmarks vs. a circular badge), and
   height-only sizing let a tall/square logo fill its box while a wide
   one shrank to fit, reading as inconsistent sizes. An equal box on both
   axes gives every logo the same visual weight regardless of its shape. */
.tsr-partner-card__logo {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           150px;
	height:          80px;
	margin:          0 auto;
}

.tsr-partner-card__logo img {
	max-width:  100%;
	max-height: 100%;
	object-fit: contain;
}

.tsr-partner-card__logo--ph {
	border-radius: var(--tsr-radius);
	color:         var(--tsr-white);
	font-size:     2rem;
	font-weight:   700;
	letter-spacing: 0.05em;
}

.tsr-partner-card__name {
	color:       var(--tsr-navy);
	font-weight: 600;
	font-size:   0.95rem;
	text-align:  center;
}

.tsr-partner-cta {
	margin:        3.5rem 0 1rem;
	padding:       2.5rem 1.5rem;
	background:    linear-gradient(170deg, var(--tsr-navy) 0%, var(--tsr-navy-2) 100%);
	border-radius: var(--tsr-radius);
	text-align:    center;
	color:         var(--tsr-white);
}

.tsr-partner-cta__title {
	margin:    0 0 0.75rem;
	color:     var(--tsr-white);
	font-size: 1.6rem;
}

.tsr-partner-cta__text {
	max-width: 560px;
	margin:    0 auto 1.5rem;
	color:     rgba(255, 255, 255, 0.85);
	font-size: 0.95rem;
	line-height: 1.6;
}

.tsr-partner-cta__btn {
	display:         inline-block;
	padding:         0.7rem 1.8rem;
	background:      var(--tsr-orange);
	border-radius:   var(--tsr-radius);
	color:           var(--tsr-white);
	font-weight:     600;
	text-decoration: none;
	transition:      background 0.15s;
}

.tsr-partner-cta__btn:hover {
	background: #c94e15;
	color:      var(--tsr-white);
}

/* ── Партньори strip (front-page.php) ──────────────────────────────────────
   Front page only — plain, large logos in a row (no card box), matching
   the event-template mockup's sponsor band. /partniori/'s own grid keeps
   the bordered .tsr-partner-card look untouched — these overrides are all
   scoped under .tsr-partners-strip so they don't leak there. */
.tsr-partners-strip {
	display:         flex;
	flex-wrap:       wrap;
	justify-content: center;
	align-items:     center;
	gap:             3.5rem;
}

.tsr-partners-strip .tsr-partner-card {
	width:      auto;
	padding:    0;
	background: none;
	border:     none;
	gap:        0.4rem;
}

.tsr-partners-strip a.tsr-partner-card:hover {
	transform:  none;
	box-shadow: none;
}

.tsr-partners-strip .tsr-partner-card__logo {
	width:  190px;
	height: 100px;
}

/* Real logos are each a different brand color (red, blue, black...) —
   full color together reads as busy/inconsistent. Mute to grayscale so
   the row reads as one calm, cohesive strip (like the mockup's uniform
   grey wordmarks), full color back on hover as the reward for looking. */
.tsr-partners-strip .tsr-partner-card__logo img {
	filter:     grayscale(1) opacity(0.55);
	transition: filter 0.2s ease;
}

.tsr-partners-strip a.tsr-partner-card:hover .tsr-partner-card__logo img {
	filter: grayscale(0) opacity(1);
}

.tsr-partners-strip .tsr-partner-card__logo--ph {
	font-size:     2.2rem;
	width:         130px;
	border-radius: var(--tsr-radius);
}

/* The logo already carries the brand name — a caption under it is
   redundant clutter the mockup doesn't have either. */
.tsr-partners-strip .tsr-partner-card__name {
	display: none;
}

@media (max-width: 640px) {
	.tsr-partners-strip {
		gap: 2rem;
	}

	.tsr-partners-strip .tsr-partner-card__logo {
		width:  130px;
		height: 70px;
	}
}

/* ── Accessibility: 44×44 touch targets on touch devices ─────────────────────
   Lighthouse flags interactive elements under 44px tall on mobile. Scoped to
   coarse pointers / small viewports so desktop density is unchanged. Inline
   links grow via min-height (inline-flex keeps them on the text baseline
   row); block-level items use flex so they keep their full width. */
@media (pointer: coarse), (max-width: 768px) {
	.tsr-card__link,
	.tsr-zero-card__link,
	.tsr-edition-item__link,
	.tsr-compact-table__link,
	.tsr-breadcrumbs__link,
	.tsr-season-nav__item,
	.tsr-cat-pill {
		display:     inline-flex;
		align-items: center;
		min-height:  44px;
	}

	.tsr-event-index__link,
	.tsr-event-item__name {
		display:     flex;
		align-items: center;
		min-height:  44px;
	}

	#masthead .tsr-nav-list > li > a {
		display:     flex;
		align-items: center;
		min-height:  44px;
	}

	.tsr-runner-search__btn {
		min-height: 44px;
	}
}

/* ── Single event page — EventON plugin overrides ────────────────────────────
   The plugin's own boxes ship flat grey that reads as washed-out against
   our white page background — two separate rules in eventon_styles.css:
   .evocard_box (#f3f3f3 — Event Details/Time/Location/Calendar/Get
   Directions) and .desc_trig (#e6e6e6 — the top thumbnail+date+title
   summary bar). Overridden here rather than editing the plugin's CSS
   directly — wp-content/plugins/* is gitignored and updates would wipe an
   in-place edit. Pale pastel blue, same tone already used for the traseta
   row hover state, so it reads as intentional brand accent rather than a
   mismatched grey. */
.evocard_box,
.desc_trig {
	background-color: #eaf6fb;
}