/* ============================================
   CFX GAMES 2026 — стилі головної
   (токени та базові компоненти — у styles.css)
   ============================================ */

:root {
  --cat-legend: #d4af37;
}

/* Back-link у навбарі архівних сторінок теж використовує цей клас */
.nav-back-games { color: var(--accent) !important; }

/* ---------- HERO уточнення ---------- */
/* Затемнення нижньої частини фонового фото (рябить без градієнта) */
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(27, 31, 42, 0) 40%,
    rgba(27, 31, 42, 0.45) 68%,
    rgba(27, 31, 42, 0.82) 88%,
    var(--bg-primary) 100%);
  pointer-events: none;
}

/* ---------- ТРАНСЛЯЦІЯ ---------- */
.stream-frame {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.stream-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.stream-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 24px;
  background:
    radial-gradient(ellipse at center, rgba(228, 11, 79, 0.07), transparent 70%);
}
.stream-placeholder p {
  font-family: var(--font-sub);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0;
}
.stream-placeholder-sub {
  font-size: 0.7rem !important;
  color: var(--text-muted) !important;
}
.stream-placeholder-sub a { color: var(--accent); }

.hero-tagline {
  font-family: var(--font-sub);
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.hero-countdown { margin: 32px 0 8px; }
.hero-countdown .countdown-label {
  font-family: var(--font-sub);
  font-size: 0.72rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

.btn--soon {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}

/* ---------- 3 ДНІ / 3 ЛОКАЦІЇ ---------- */
.days-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .days-grid { grid-template-columns: 1fr; } }

.day-card {
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-top: 3px solid var(--accent);
  padding: 28px 26px;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.day-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card);
}
.day-card-num {
  font-family: var(--font-hero);
  font-size: 2.6rem;
  color: var(--accent);
  line-height: 1;
}
.day-card-date {
  font-family: var(--font-sub);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 6px 0 4px;
}
.day-card-loc {
  font-family: var(--font-hero);
  font-size: 1.5rem;
  color: var(--text-primary);
  margin-bottom: 14px;
  letter-spacing: 0.03em;
}
.day-card ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.day-card li {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
  padding-left: 16px;
  position: relative;
}
.day-card li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.55em;
  width: 6px; height: 6px;
  background: var(--accent);
}

/* ---------- РОЗКЛАД ---------- */
.sched-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}
@media (max-width: 700px) { .sched-tabs { grid-template-columns: 1fr; } }

.sched-tab {
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px 18px;
  cursor: pointer;
  text-align: left;
  display: flex; flex-direction: column; gap: 3px;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.sched-tab:hover { border-color: var(--accent); }
.sched-tab.active {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(228, 11, 79, 0.12), var(--bg-card) 70%);
  box-shadow: 4px 4px 0 var(--accent);
}
.sched-tab-day {
  font-family: var(--font-hero);
  font-size: 1.25rem;
  color: var(--text-primary);
  letter-spacing: 0.04em;
}
.sched-tab.active .sched-tab-day { color: var(--accent); }
.sched-tab-date {
  font-family: var(--font-sub);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.sched-tab-loc {
  font-family: var(--font-sub);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Фільтр категорій */
.sched-filter-label {
  font-family: var(--font-sub);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.sched-filter {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 28px;
}
.sched-fchip {
  --chip: var(--text-muted);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text-secondary);
  font-family: var(--font-sub);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 14px;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.sched-fchip:hover { border-color: var(--chip); color: var(--text-primary); }
.sched-fchip.active {
  border-color: var(--chip);
  background: var(--chip);
  color: #101218;
  font-weight: 700;
}

/* Івент-блок */
.sched-event {
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 20px;
}
.sched-ev-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}
.sched-ev-num {
  font-family: var(--font-hero);
  font-size: 1.3rem;
  color: var(--accent);
  letter-spacing: 0.06em;
}
.sched-ev-name {
  font-family: var(--font-sub);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px dashed rgba(255, 255, 255, 0.18);
  padding: 3px 10px;
}
.sched-ev-name--live {
  color: var(--text-primary);
  border: none;
  padding: 0;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
}
.sched-ev-cut {
  font-family: var(--font-sub);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cat-legend);
}
.sched-ev-finish {
  margin-left: auto;
  font-family: var(--font-sub);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Рядки хітів */
.sched-rows { padding: 8px 0; }
.sched-row {
  display: grid;
  grid-template-columns: 64px 90px 1fr;
  align-items: center;
  gap: 10px;
  padding: 7px 20px;
  transition: opacity var(--transition-fast), background var(--transition-fast);
}
.sched-row:nth-child(even) { background: rgba(255, 255, 255, 0.02); }
@media (max-width: 560px) {
  .sched-row { grid-template-columns: 52px 1fr; }
  .sched-row .sched-heat { display: none; }
}
.sched-time {
  font-family: var(--font-hero);
  font-size: 1rem;
  color: var(--text-primary);
  letter-spacing: 0.05em;
}
.sched-heat {
  font-family: var(--font-sub);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.sched-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.sched-chip {
  --chip: var(--text-muted);
  font-family: var(--font-sub);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-primary);
  border-left: 3px solid var(--chip);
  background: rgba(255, 255, 255, 0.05);
  padding: 3px 9px;
  white-space: nowrap;
}

/* Стан фільтра */
.sched-row--dim { opacity: 0.22; }
.sched-row--match { background: rgba(228, 11, 79, 0.07); }
.sched-row--match .sched-time { color: var(--accent); }

/* Нотатки та церемонії */
.sched-row--note,
.sched-daynote {
  display: flex; align-items: baseline; gap: 14px;
  padding: 8px 20px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text-secondary);
  border-left: 3px solid var(--text-muted);
  background: rgba(255, 255, 255, 0.03);
}
.sched-daynote { margin: 0 0 14px; }
.sched-note-text { font-style: italic; }
.sched-ceremony {
  display: flex; align-items: baseline; gap: 14px;
  margin: 0 0 20px;
  padding: 14px 20px;
  border: 1px solid var(--accent);
  background: rgba(228, 11, 79, 0.08);
  font-family: var(--font-sub);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.sched-ceremony-time {
  font-family: var(--font-hero);
  color: var(--accent);
  letter-spacing: 0.04em;
}

/* ---------- ІВЕНТИ (прихована секція до релізу) ---------- */
.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.event-card {
  display: block;
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 26px 24px;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}
a.event-card:hover { transform: translateY(-5px); border-color: var(--accent); }
.event-card-num {
  font-family: var(--font-hero);
  font-size: 2rem;
  color: var(--accent);
  line-height: 1;
}
.event-card-name {
  font-family: var(--font-hero);
  font-size: 1.25rem;
  color: var(--text-primary);
  margin: 8px 0 6px;
  letter-spacing: 0.03em;
}
.event-card-meta {
  font-family: var(--font-sub);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------- MILITARY ---------- */
.military-block {
  border-left: 4px solid var(--cat-military);
  background: var(--bg-card);
  padding: 32px 34px;
  max-width: 860px;
  margin: 0 auto;
}
.military-block p {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--text-secondary);
  margin: 0 0 14px;
}
.military-block p:last-child { margin-bottom: 0; }
.military-block strong { color: var(--text-primary); }

/* ---------- ФЕСТИВАЛЬ ---------- */
.fest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px;
}
.fest-item {
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 26px 24px;
  text-align: center;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}
.fest-item:hover { transform: translateY(-5px); border-color: var(--accent); }
.fest-item-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}
.fest-item-icon svg {
  width: 44px;
  height: 44px;
  fill: var(--accent);
  filter: drop-shadow(0 0 12px var(--accent-glow));
  transition: transform var(--transition-fast);
}
.fest-item:hover .fest-item-icon svg { transform: scale(1.12); }
.fest-item-name {
  font-family: var(--font-hero);
  font-size: 1.15rem;
  color: var(--text-primary);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.fest-item-desc {
  font-family: var(--font-body);
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ---------- ШЛЯХ АТЛЕТА ---------- */
.path-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 18px;
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 760px) {
  .path-grid { grid-template-columns: 1fr; }
  .path-arrow { transform: rotate(90deg); margin: -6px auto; }
}
.path-card {
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 30px 28px;
  display: block;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.path-card--active { border-color: var(--accent); }
a.path-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: var(--shadow-brutal);
  border-color: var(--accent);
}
.path-card-stage {
  font-family: var(--font-sub);
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.path-card-title {
  font-family: var(--font-hero);
  font-size: 1.6rem;
  color: var(--text-primary);
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}
.path-card-desc {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
}
.path-card-link {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-sub);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.path-arrow {
  align-self: center;
  font-family: var(--font-hero);
  font-size: 2.2rem;
  color: var(--accent);
}

/* ---------- LIVE (сторінки /leaderboard та /heats + підсвітка на головній) ---------- */
.live-header {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 18px;
  margin-bottom: 24px;
}
.live-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sub);
  font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent);
}
.live-badge::before {
  content: '';
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent);
  animation: livePulse 1.6s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 var(--accent-glow); }
  50% { opacity: 0.55; box-shadow: 0 0 0 6px rgba(228, 11, 79, 0); }
}
.live-updated {
  font-family: var(--font-sub);
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted);
}
.live-empty {
  padding: 28px 24px;
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--text-secondary);
  text-align: center;
}
.live-empty--soft { margin-bottom: 18px; border-left: 3px solid var(--accent); text-align: left; }

.live-now-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sub);
  font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  padding: 3px 10px;
}
.live-now-badge::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: #fff;
  animation: livePulse 1.6s ease-in-out infinite;
}

/* Таблиця лідерборду */
.lb-scroll { overflow-x: auto; }
.lb-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.lb-table th {
  font-family: var(--font-sub);
  font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-muted);
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  white-space: nowrap;
}
.lb-table td {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--text-secondary);
  padding: 9px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  white-space: nowrap;
}
.lb-table tbody tr:hover { background: rgba(228, 11, 79, 0.05); }
.lb-place { font-family: var(--font-hero); font-size: 1.05rem; color: var(--text-primary); }
.lb-table tbody tr:nth-child(1) .lb-place { color: var(--cat-legend); }
.lb-table tbody tr:nth-child(2) .lb-place,
.lb-table tbody tr:nth-child(3) .lb-place { color: var(--accent); }
.lb-name { color: var(--text-primary); font-weight: 500; }
.lb-club { color: var(--text-muted); max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.lb-pts { font-family: var(--font-hero); color: var(--text-primary); }
.lb-res { display: block; font-size: 0.72rem; color: var(--text-muted); }
.lb-badge {
  font-family: var(--font-sub);
  font-size: 0.6rem; letter-spacing: 0.12em;
  color: var(--text-muted);
  border: 1px solid var(--text-muted);
  padding: 1px 6px; margin-left: 6px;
}

/* Сторінка хітів */
.heat-workout {
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 16px;
}
.heat-workout summary { cursor: pointer; list-style: none; }
.heat-workout summary::-webkit-details-marker { display: none; }
.heat-workout summary .sched-ev-num { font-size: 1.05rem; }
.heat-workout[open] summary { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.heat-list { padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }
.heat-card { border: 1px solid rgba(255, 255, 255, 0.08); }
.heat-card--now { border-color: var(--accent); box-shadow: 0 0 18px rgba(228, 11, 79, 0.25); }
.heat-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.heat-title {
  font-family: var(--font-sub);
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-primary);
}
.heat-stations { padding: 6px 0; }
.heat-station {
  display: grid;
  grid-template-columns: 34px 1fr auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 5px 14px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.heat-station:nth-child(even) { background: rgba(255, 255, 255, 0.02); }
.heat-station--empty { opacity: 0.4; }
.heat-station-num {
  font-family: var(--font-hero);
  color: var(--text-muted);
  font-size: 0.9rem;
}
.heat-station-name { color: var(--text-primary); }
.heat-station-club { color: var(--text-muted); font-size: 0.78rem; }
.heat-station-res {
  font-family: var(--font-hero);
  font-size: 0.92rem;
  color: var(--text-primary);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.heat-station-res em {
  font-style: normal;
  color: var(--accent);
  margin-left: 6px;
  font-size: 0.8rem;
}
.heat-sorted-note {
  font-family: var(--font-sub);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 2px 8px;
}
@media (max-width: 560px) {
  .heat-station { grid-template-columns: 28px 1fr auto auto; }
  .heat-station-club { display: none; }
}

/* Підсвітка «зараз іде» у розкладі на головній */
.sched-event--now { border-color: var(--accent); box-shadow: 0 0 18px rgba(228, 11, 79, 0.18); }
.sched-row--now {
  background: rgba(228, 11, 79, 0.12);
  border-left: 3px solid var(--accent);
}
.sched-row--now .sched-time { color: var(--accent); }

/* Кнопки-лінки під заголовком розкладу на головній */
.sched-live-links {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center;
  margin: -10px 0 26px;
}

/* ---------- КОМПАКТНИЙ ОГЛЯД РОЗКЛАДУ (головна) ---------- */
.ovw-day {
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 18px;
}
.ovw-day-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  border-top: 3px solid var(--accent);
}
.ovw-day-num {
  font-family: var(--font-hero);
  font-size: 1.3rem;
  color: var(--accent);
  letter-spacing: 0.05em;
}
.ovw-day-date {
  font-family: var(--font-sub);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.ovw-day-loc {
  margin-left: auto;
  font-family: var(--font-sub);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ovw-rows { padding: 8px 0; }
.ovw-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px;
  padding: 9px 20px;
}
.ovw-row:nth-child(even) { background: rgba(255, 255, 255, 0.02); }
.ovw-time {
  font-family: var(--font-hero);
  font-size: 1.02rem;
  color: var(--text-primary);
  letter-spacing: 0.05em;
  min-width: 118px;
}
.ovw-label {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.ovw-ev {
  font-family: var(--font-hero);
  font-size: 1.02rem;
  color: var(--text-primary);
  letter-spacing: 0.05em;
}
.ovw-row--note .ovw-time { color: var(--text-muted); font-size: 0.9rem; }
.ovw-row--note .ovw-label { font-style: italic; color: var(--text-muted); }
.ovw-row--ceremony {
  border-left: 3px solid var(--accent);
  background: rgba(228, 11, 79, 0.07) !important;
}
.ovw-row--ceremony .ovw-label {
  font-style: normal;
  font-family: var(--font-sub);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.ovw-row--ceremony .ovw-time { color: var(--accent); }
.ovw-row--now {
  border-left: 3px solid var(--accent);
  background: rgba(228, 11, 79, 0.1) !important;
}
.ovw-row--now .ovw-time { color: var(--accent); }
@media (max-width: 560px) {
  .ovw-time { min-width: 100px; font-size: 0.95rem; }
}

/* ---------- ЗАВДАННЯ (/workouts) ---------- */
.wod-card {
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 3px solid var(--accent);
  margin-bottom: 20px;
  scroll-margin-top: 90px;
}
.wod-card--locked { border-left-color: var(--text-muted); opacity: 0.75; }
.wod-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px;
  padding: 16px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}
.wod-name {
  font-family: var(--font-hero);
  font-size: 1.2rem;
  color: var(--text-primary);
  letter-spacing: 0.03em;
}
.wod-meta {
  margin-left: auto;
  font-family: var(--font-sub);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.wod-type {
  padding: 12px 22px 0;
  font-family: var(--font-sub);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cat-legend);
}
/* Варіанти завдання: одна група категорій = одна картка в сітці */
.wod-note {
  padding: 12px 22px 0;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--text-muted);
}
.wod-variants {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px;
  padding: 16px 22px 20px;
}
.wod-variant-card {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
}
.wod-variant-card .wod-cats {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}
.wod-lines { padding: 12px 16px; flex: 1; }
.wod-line {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px;
  padding: 3px 0;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--text-secondary);
}
.wod-line-num {
  font-family: var(--font-hero);
  font-size: 1rem;
  color: var(--accent);
  letter-spacing: 0.04em;
  text-align: right;
}
.wod-variant-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.wod-extra {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--text-muted);
}
.wod-tc {
  font-family: var(--font-sub);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cat-legend);
  white-space: nowrap;
}
.wod-desc {
  padding: 16px 22px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--text-secondary);
  overflow-x: auto;
}
.wod-desc strong, .wod-desc b { color: var(--text-primary); }
.wod-desc p { margin: 0 0 10px; }
.wod-desc ul, .wod-desc ol { margin: 0 0 10px; padding-left: 22px; }
.wod-desc img { max-width: 100%; height: auto; }
.wod-desc table { border-collapse: collapse; }
.wod-desc td, .wod-desc th { border: 1px solid rgba(255,255,255,0.12); padding: 6px 10px; }
.wod-cats {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 0 22px 16px;
}
.wod-cats-label {
  font-family: var(--font-sub);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: 6px;
}
.wod-locked-note {
  padding: 18px 22px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-style: italic;
  color: var(--text-muted);
}

/* ---------- КАТЕГОРІЇ: LEGEND (патерн модифікаторів зі styles.css) ---------- */
.category-card--legend.active::before,
.category-card--legend:hover::before,
.category-card--legend.active::after,
.category-card--legend:hover::after { background: var(--cat-legend); }
.category-card--legend.active .category-tag,
.category-card--legend:hover .category-tag { color: var(--cat-legend); border-color: var(--cat-legend); }