/* Race-calendar page. Uses the shared theme.css variables (light/dark). */

.rc-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}

.rc-head {
  margin-bottom: 24px;
}

.rc-title {
  font-size: 1.9rem;
  font-weight: 700;
  margin: 0 0 6px;
}

.rc-subtitle {
  font-size: 1rem;
  color: var(--text-secondary);
  margin: 0;
  max-width: 640px;
  line-height: 1.5;
}

/* ---- Filter bar ---------------------------------------------------------- */

.rc-filters {
  position: sticky;
  /* Flush under the sticky site header (its real height is measured into
     --rc-header-h); the -1px overlap avoids a hairline gap. */
  top: calc(var(--rc-header-h, 53px) - 1px);
  z-index: 500;
  background: var(--bg-page);
  padding: 12px 0;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 20px;
}

/* Show/hide filters toggle */
.rc-filters-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 8px 16px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.15s;
}

.rc-filters-toggle:hover { border-color: var(--text-muted); }
.rc-filters--open .rc-filters-toggle { border-color: var(--isard-green); }

.rc-ficon { display: inline-flex; }
.rc-ficon svg { width: 15px; height: 15px; display: block; }
.rc-chevron { transition: transform 0.25s ease; }
.rc-filters--open .rc-chevron { transform: rotate(180deg); }

/* Collapsible body — animate 0fr↔1fr so it eases to its natural height. */
.rc-filters-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}
.rc-filters--open .rc-filters-body { grid-template-rows: 1fr; }
.rc-filters-inner { overflow: hidden; min-height: 0; }
.rc-filters-body .rc-filter-row { padding-top: 14px; }

.rc-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.rc-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rc-field-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

.rc-select {
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--text-primary);
  cursor: pointer;
  outline: none;
  min-width: 150px;
}

.rc-select:hover {
  border-color: var(--text-muted);
}

/* Chip groups (sport, distance) */
.rc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rc-chip {
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 7px 14px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--bg-surface);
  color: var(--text-primary);
  cursor: pointer;
  transition: 0.15s;
  white-space: nowrap;
}

.rc-chip:hover {
  border-color: var(--text-muted);
}

.rc-chip[aria-pressed="true"] {
  background: var(--btn-bg);
  color: var(--btn-text);
  border-color: var(--btn-bg);
}

.rc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
}

.rc-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.rc-search {
  font-family: inherit;
  font-size: 0.9rem;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--text-primary);
  outline: none;
  min-width: 350px;
}

.rc-search:focus {
  border-color: var(--accent);
}

.rc-reset {
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 14px;
  border: none;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
}

/* ---- Results meta -------------------------------------------------------- */

.rc-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.rc-count {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.rc-sort {
  display: inline-flex;
  gap: 4px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 3px;
}

.rc-sort button {
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 5px 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

.rc-sort button[aria-pressed="true"] {
  background: var(--btn-bg);
  color: var(--btn-text);
}

/* ---- Race list ----------------------------------------------------------- */

.rc-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
}

/* Brand .card recipe: surface fill, hairline border, 16px radius (no shadow —
   the token cards read on their border against the dark canvas). */
.rc-card {
  position: relative; /* anchor for the stretched-link overlay */
  display: flex;
  gap: 14px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-card);
  padding: 16px;
  transition: border-color 0.15s, background 0.15s;
}

.rc-card:hover {
  border-color: var(--isard-green);
}

:root[data-theme="light"] .rc-card:hover {
  border-color: #000;
}

/* Sport avatar: tinted disc + full-colour glyph (tokens .sport-badge recipe).
   Replaces the old date tile — the date now lives in the day-group header. */
.rc-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--sport, var(--sport-other)) 16%, transparent);
  color: var(--sport, var(--sport-other));
}

.rc-avatar svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* ---- Day group header ---------------------------------------------------- */
/* Full-width band across the card grid, like the native app's date sections. */
.rc-dayhead {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 2px 8px;
  border-bottom: 1px solid var(--border-light);
}

.rc-dayhead:first-child {
  padding-top: 0;
}

.rc-dayhead-label {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--accent);
}

.rc-dayhead-count {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  flex-shrink: 0;
}

.rc-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rc-name-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.rc-name {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

.rc-namelink {
  color: inherit;
  text-decoration: none;
}

/* Stretch the race-name link across the whole card so the entire card is
   clickable (the favourite button opts back out via a higher z-index). */
.rc-namelink::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

.rc-card:hover .rc-namelink {
  color: var(--accent);
}

.rc-place {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.rc-carddate {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.rc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 2px;
}

/* Sport colours come from the brand tokens, keyed on the data's `sport` value
   via a data-sport attribute (so localization never changes a colour). */
[data-sport="road_running"]  { --sport: var(--sport-road_running); }
[data-sport="trail_running"] { --sport: var(--sport-trail_running); }
[data-sport="cycling"]       { --sport: var(--sport-cycling); }
[data-sport="hiking"]        { --sport: var(--sport-hiking); }

/* Adapts the tokens .sport-badge recipe to a compact pill: tinted disc + glyph. */
.rc-sportchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--sport, var(--sport-other)) 16%, transparent);
  color: var(--sport, var(--sport-other));
}

.rc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--sport, var(--sport-other));
}

.rc-distances {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Compact date pill shown per-card in "popular" order (no day headers there). */
.rc-datepill {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-secondary);
  white-space: nowrap;
}

.rc-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* "open" is the brand .badge-open recipe: lime fill, dark label. */
.rc-badge--open { background: var(--isard-green); color: var(--on-accent); }
.rc-badge--closed,
.rc-badge--unconfirmed { background: var(--surface-2); color: var(--text-muted); }
.rc-badge--provisional { background: var(--surface-2); color: var(--text); }
.rc-badge--sold_out { background: var(--surface-2); color: #ff5a4d; }

.rc-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 8px;
}

/* Registration / info actions — brand .btn-primary / .btn-secondary recipes. */
.rc-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  cursor: pointer;
}

.rc-btn--primary {
  background: var(--isard-green);
  color: var(--on-accent);
  border: none;
}

.rc-btn--secondary {
  background: transparent;
  color: var(--isard-green);
  border: 1.5px solid var(--isard-green);
}

:root[data-theme="light"] .rc-btn--secondary {
  color: #1a2420;
  border-color: #1a2420;
}

.rc-btn:hover { filter: brightness(0.94); }

.rc-fav {
  position: relative; /* sit above the stretched card link */
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  padding: 2px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.rc-fav svg {
  width: 19px;
  height: 19px;
  display: block;
}

.rc-fav:hover {
  color: var(--text-primary);
}

.rc-fav[aria-pressed="true"] {
  color: var(--isard-green);
}

/* ---- States -------------------------------------------------------------- */

.rc-status {
  padding: 48px 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.rc-sentinel {
  height: 1px;
}

.rc-disclaimer {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--border-light);
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
}

@media (max-width: 600px) {
  .rc-main { padding: 20px 16px 60px; }
  .rc-list { grid-template-columns: 1fr; }
  .rc-select, .rc-search { min-width: 0; width: 100%; }
  .rc-field { flex: 1 1 100%; }
}