:root {
  --ink: #14213D;
  --paper: #F5F6F2;
  --accent: #FF4B3E;
  --muted: #6B7280;
  --border: #E2E4DD;
  --font-display: 'Oswald', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}
html { overflow-y: scroll; scrollbar-gutter: stable; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); line-height: 1.5; }
.site-nav { display: flex; align-items: center; gap: 2rem; padding: 1.25rem 2rem; border-bottom: 1px solid var(--border); }
.site-nav .brand { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; text-transform: uppercase; }
.site-nav a { color: var(--ink); text-decoration: none; font-weight: 500; }
.site-nav a:hover { color: var(--accent); }
.container { max-width: 1100px; margin: 0 auto; padding: 2rem; }
h1, h2, h3 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.01em; }

/* city/month index lists → grid instead of a single tall column */
.place-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.75rem; list-style: none; padding: 0; }
.place-grid a { display: block; padding: 0.75rem 1rem; background: white; border: 1px solid var(--border); border-radius: 6px; color: var(--ink); text-decoration: none; font-weight: 500; }
.place-grid a:hover { border-color: var(--accent); color: var(--accent); }


.race-detail-distances__label {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin: 0.9rem 0 0.4rem;
}
.race-detail-distances { display: flex; flex-wrap: wrap; gap: 0.4rem; }


@media (max-width: 480px) {
  .race-card { padding: 1.25rem; }
}

.breadcrumb-race { margin-bottom: 0.75rem; }

.race-card { background: white; border: 1px solid var(--border); border-top: 4px solid var(--accent); border-radius: 10px; padding: 2rem; max-width: 720px; width: 100%; }


.related-races { max-width: 720px; width: 100%; text-align: left; }
.related-races h3 { font-size: 1.1rem; margin-bottom: 0.75rem; text-align: left; }
.related-races li { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.4rem 0; border-bottom: 1px solid var(--border); }
.related-races li:last-child { border-bottom: none; }
.related-races__row { display: flex; justify-content: space-between; gap: 1rem; }
.related-races__date { color: var(--muted); font-size: 0.85rem; }
.related-races a { color: var(--ink); font-weight: 500; text-decoration: none; }
.related-races a:hover { color: var(--accent); }

/* Homepage hero */
.hero { position: relative; text-align: center; padding: 3rem 1rem 2.5rem; }
.hero-tape {
  position: absolute; top: 2.2rem; left: -10%; width: 120%; height: 4px;
  background: var(--accent); transform: rotate(-2deg);
  opacity: 0.15; z-index: 0;
}
.hero h1 { position: relative; font-size: 2.75rem; margin-bottom: 0.5rem; z-index: 1; }
.hero-stat { position: relative; font-family: var(--font-mono); color: var(--muted); z-index: 1; }

/* Upcoming races list */
.home-section { max-width: 640px; margin: 0 auto 2.5rem; text-align: left; }
.home-section h2 { margin-bottom: 1rem; }
.upcoming-list li {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border);
}
.upcoming-list a { color: var(--ink); font-weight: 600; text-decoration: none; }
.upcoming-list a:hover { color: var(--accent); }

/* Homepage nav cards */
.home-nav-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 640px; margin: 0 auto 2rem; }
.nav-card { display: block; background: white; border: 1px solid var(--border); border-radius: 10px; padding: 1.5rem; text-decoration: none; color: var(--ink); text-align: left; }
.nav-card:hover { border-color: var(--accent); }
.nav-card h3 { font-size: 1.1rem; margin: 0 0 0.35rem; }
.nav-card p { margin: 0; color: var(--muted); font-size: 0.9rem; }

@media (max-width: 600px) {
  .home-nav-cards { grid-template-columns: 1fr; }
  .hero h1 { font-size: 2rem; }
}

.hero-sub { max-width: 480px; margin: 0.75rem auto 0; color: var(--muted); font-size: 0.95rem; }

.race-table { width: 100%; max-width: 1000px; margin: 0 auto; border-collapse: collapse; table-layout: fixed; background: white; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.race-table th { background: var(--ink); color: white; font-family: var(--font-display); text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.03em; padding: 0.85rem 1rem; text-align: left; }
.race-table td { padding: 0.75rem 1rem; border-top: 1px solid var(--border); font-size: 0.95rem; white-space: normal; overflow: visible; text-overflow: clip; text-align: left; }

/* DATE is the only column that should stay single-line — dates are a
   fixed, predictable length ("29 sierpnia 2026") and never need to wrap.
   Every other column (name, distance, city) wraps by default now; this is
   the one deliberate exception, not the other way around. */
.race-table td.date-cell { white-space: nowrap; }
.race-table tr:hover td { background: #FAFAF7; }
.race-table a { color: var(--ink); font-weight: 500; text-decoration: none; }
.race-table a:hover { color: var(--accent); }
.race-table td.past { color: var(--muted); }

/* --- Mobile: table becomes a stacked card list --------------------------- */
/* Below this width, 4 fixed-percentage columns don't leave room for
   unbreakable Polish words ("MIEJSCOWOŚĆ", "Warszawa") to render without
   overflowing sideways into the next column — browsers don't break a word
   mid-string by default, so a too-narrow column spills instead of wrapping.
   The fix isn't tighter columns, it's not having columns at all here: each
   row becomes its own card, each field stacks with a label pulled from
   data-label (set in _race_row.html) via ::before.

   Accessibility trade-off, noted rather than silently accepted: hiding
   <thead> removes it from the accessibility tree along with the visual
   removal. A fully accessible version would visually hide it instead
   (clip it off-screen rather than display:none) so screen readers still
   get the column context. Skipping that polish for now — flag if you want
   it done properly later. */
@media (max-width: 640px) {
  .race-table { max-width: 100%; }
  .race-table thead { display: none; }
  .race-table, .race-table tbody, .race-table tr, .race-table td {
    display: block;
    width: auto !important;
  }
  .race-table tr {
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    padding: 0.75rem 1rem;
  }
  .race-table tr:last-child { margin-bottom: 0; }

  .race-table td { border-top: none; padding: 0.3rem 0; }

  /* Race name reads as the card's title — bigger, bold, no label prefix
     (a card header doesn't need "Nazwa biegu:" in front of it). */
  .race-table td.name-cell { font-weight: 600; font-size: 1rem; padding-bottom: 0.5rem; }

  /* City and date: short single values, label + value side by side. */
  .race-table td.city-cell,
  .race-table td.date-cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
  }
  .race-table td.city-cell::before,
  .race-table td.date-cell::before {
    content: attr(data-label);
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    color: var(--muted);
    font-weight: 700;
    flex-shrink: 0;
  }

  /* Distance chips can be several and wrap — label goes above, not beside. */
  .race-table td.dist-cell::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    color: var(--muted);
    font-weight: 700;
    margin-bottom: 0.3rem;
  }
}

.past-races summary {
  cursor: pointer; font-weight: 700; color: var(--muted);
  text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.05em;
  margin: 3rem 0 1.5rem; text-align: center; list-style: none;
}
.past-races summary::-webkit-details-marker { display: none; }
.past-races summary::after { content: " ▾"; }

/* Month hub grid — migrated off month_hub.html's old inline <style> block (Issues Backlog 5.3) */
.month-hub { max-width: 1000px; margin: 0 auto; padding: 2rem 1rem 4rem; }
.month-hub__eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.month-hub__title { font-size: 1.9rem; margin: 0 0 2rem; }

.month-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; }

/* Shared hub tile base — used by both month and city hub grids so they can't drift apart again */
.hub-card {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 1.25rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  background: white;
  transition: border-color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}
.hub-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.hub-card__count { font-size: 0.75rem; font-weight: 400; color: var(--muted); }

/* Dead months — requires month.is_past from the view (see races_month.html's is_past_month for the same pattern) */
.month-card--past { opacity: 0.55; }
.month-card--past:hover { opacity: 0.85; transform: none; }

/* City hub grid — migrated off city_hub.html's old inline <style> block, same twin pattern as month hub */
.city-hub { max-width: 1000px; margin: 0 auto; padding: 2rem 1rem 4rem; }
.city-hub__eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.city-hub__title { font-size: 1.9rem; margin: 0 0 2rem; }

.top-cities { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; margin-bottom: 3rem; }

.az-heading {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin: 0 0 1rem;
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
}

.az-list { columns: 3 160px; column-gap: 1.5rem; }
.az-list a {
  display: block;
  padding: 0.3rem 0;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  break-inside: avoid;
}
.az-list a:hover { color: var(--accent); text-decoration: underline; }

@media (max-width: 480px) {
  .az-list { columns: 2 140px; }
}

/* Past-month status badge (races_month.html) */
.month-status-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--muted);
  color: white;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 0.5rem;
}

/* ==========================================================================
   APPEND TO style.css
   Also DELETE the four existing .race-table nth-child width lines — they're
   restated below with the distance column widened. (If you forget, the ones
   below still win on source order, but you'd have dead duplicated rules.)
   ========================================================================== */

/* --- Table column widths, rebalanced for distance chips ------------------- */
/* Distance was 18% when it held "10 km". It now holds up to 4 chips, so it
   takes width from the name column. Name still gets the most room. */
/* Column widths. DATE is sized for its worst case, not its average case:
   "Pon, 30 października 2026" (25 chars) is the longest realistic string
   the |date:"D, j E Y" format can produce - needs ~245px at this font size.
   28% of a 1000px table = 280px, leaving real margin instead of the ~5px
   slack a tighter percentage would leave. Learned this the hard way once
   already: the previous 20% was sized for the pre-weekday format ("j E Y"),
   and nobody re-checked it when the format changed - the string just
   silently overflowed past its cell and got clipped by the table's own
   border-radius/overflow:hidden edge. Whenever DATE's format changes again,
   recompute the worst case, don't eyeball it. */
.race-table th:nth-child(1), .race-table td:nth-child(1) { width: 36%; }  /* name */
.race-table th:nth-child(2), .race-table td:nth-child(2) { width: 22%; }  /* distance */
.race-table th:nth-child(3), .race-table td:nth-child(3) { width: 20%; }  /* city */
.race-table th:nth-child(4), .race-table td:nth-child(4) { width: 22%; }  /* date */

/* The distance cell is the one exception to the table's nowrap/ellipsis rule —
   chips need to wrap, not get cut off mid-chip. Rows holding several distances
   will be taller than single-distance rows; that's the accepted trade-off for
   showing them all. */
.race-table td.dist-cell {
  vertical-align: middle;
}

/* --- Distance chips ------------------------------------------------------- */
.dist-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; }

.dist-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.4;
  font-weight: 500;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  color: white;
  white-space: nowrap;
}

.dist-5km        { background: #0E7C66; }   /* teal   */
.dist-10km       { background: #2563EB; }   /* blue   */
.dist-polmaraton { background: #7C3AED; }   /* violet */
.dist-maraton    { background: var(--accent); }
.dist-ultra      { background: var(--ink); }
.dist-inne { background: transparent; color: var(--muted); border: 1px solid var(--border); }

/* "+3" overflow indicator — hover shows the rest via the title attribute */
.dist-more {
  background: transparent;
  color: var(--muted);
  border: 1px dashed var(--border);
  cursor: help;
}

/* Race has no distance data at all (~a handful of rows) */
.dist-none {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  font-style: italic;
}

/* Past races: chips desaturate along with the rest of the row */
.race-table td.past .dist-chip { opacity: 0.55; }

/* --- Distance filter bar -------------------------------------------------- */
.dist-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  max-width: 900px;
  margin: 0 auto 1.5rem;
}

.dist-filter__label {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin-right: 0.25rem;
}

.dist-filter-btn {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: white;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.dist-filter-btn:hover { border-color: var(--muted); }

/* Active state uses the same colour as the matching chip, so the filter and
   the thing it filters are visually linked. */
.dist-filter-btn.is-active { color: white; border-color: transparent; }
.dist-filter-btn.dist-btn-5km.is-active        { background: #0E7C66; }
.dist-filter-btn.dist-btn-10km.is-active       { background: #2563EB; }
.dist-filter-btn.dist-btn-polmaraton.is-active { background: #7C3AED; }
.dist-filter-btn.dist-btn-maraton.is-active    { background: var(--accent); }
.dist-filter-btn.dist-btn-ultra.is-active      { background: var(--ink); }
.dist-filter-btn.dist-btn-inne.is-active       { background: var(--muted); }
.dist-filter-btn[data-cat="all"].is-active     { background: var(--ink); }

.dist-hidden { display: none !important; }
.dist-empty { margin: 1.5rem 0; color: var(--muted); }

@media (max-width: 600px) {
  .dist-filter__label { width: 100%; text-align: center; margin: 0 0 0.25rem; }
  .dist-filter-btn { font-size: 0.75rem; padding: 0.25rem 0.6rem; }
}

/* --- Moved out of races_city.html's inline <style> block ------------------ */
/* Renamed from .month-hub__eyebrow — that class already existed in this file
   for month_hub.html with different values (accent colour, 0.8rem). Two
   different looks were sharing one name and only working because the inline
   block overrode the shared one on that one page. */
.city-months__eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 0.5rem;
  text-align: center;
}

.month-grid-compact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  max-width: 700px;
  margin: 0 auto 3rem;
}

.month-pill {
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 500;
  background: white;
  transition: border-color 0.15s ease;
}
.month-pill:hover { border-color: var(--accent); color: var(--accent); }

/* Collapsible "Zakończone biegi" section. Now used by races_city.html AND
   races_city_month.html, hence the move to shared CSS. */
.past-races summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  margin: 3rem 0 1.5rem;
  text-align: center;
  list-style: none;
}
.past-races summary::-webkit-details-marker { display: none; }
.past-races summary::after { content: " ▾"; }
.city-search-box {
    background: #fff;
    border: 1px solid var(--border, #ddd9c8);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 0 auto 2rem;
    max-width: 900px;
    text-align: left;
}

.city-search-box .city-search-label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--muted, #5f5e5a);
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.city-search-box input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
}

.city-search-box .place-grid {
    max-height: 160px;
    overflow-y: auto;
    padding-right: 4px;
}

.city-search-box .no-city-match {
    font-size: 13px;
    color: var(--muted, #5f5e5a);
    margin: 8px 0 0;
}

/* Shared by race-detail header and homepage upcoming list. Plain muted text,
   not chips — chips should carry filterable data (distance category), not
   display data. No emoji: the built-in 📅 glyph renders with a baked-in "17"
   on most platforms, which read as a UI bug next to a real date. */
.meta-line { display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap; font-size: 0.85rem; }
.meta-line .meta-sep { color: var(--border); }
.meta-line .meta-date { color: var(--ink); font-weight: 500; }
.meta-line .meta-city { color: var(--muted); }
.meta-line .meta-city::before { content: "📍"; margin-right: 0.25rem; }

.race-card .btn-primary {
  background: var(--ink);
  border-color: var(--ink);
  font-weight: 600;
}
.race-card .btn-primary:hover {
  filter: brightness(1.15);
}