/* Obéčko Club CMS – moduly s daty klubu (kalendář akcí, tréninkové skupiny, mapa, statistiky, výsledky).
   Načítá se po main.css a před souborem stylu, takže styly mohou pravidla přepsat.
   Vše stojí na tokenech (--cms-color-*, --cms-radius, --cms-shadow…) – každý styl webu
   tak moduly přebarví a zaoblí sám. Rozvržení reaguje na šířku bloku (container queries),
   ne okna – stejný blok funguje v hlavním sloupci i v postranním. */

.cms-evcal,
.cms-tgroup,
.cms-tgroups,
.cms-evmap,
.cms-stats,
.cms-results {
  container-type: inline-size;
}

/* Písmo bez tučného řezu (např. Bebas Neue ve stylu Sport) se nesmí ztučňovat uměle –
   prohlížeč by text rozmazal. Použije se nejbližší skutečný řez. */
.cms-evcal,
.cms-tgroup,
.cms-tgroups,
.cms-evmap,
.cms-stats,
.cms-results {
  font-synthesis-weight: none;
}

/* Barvy grafů a bodů mapy: barva klubu, ve tmavých stylech zesvětlená (jinak splývá s pozadím).
   Druhá řada = světlejší stupeň téže barvy, řady se tak liší jasem (čitelné i pro barvoslepé). */
:root {
  --cms-chart: var(--cms-color-primary);
  --cms-chart-2: color-mix(in srgb, var(--cms-chart) 38%, var(--cms-color-surface));
}

[data-style="noc"],
[data-style="sport"] {
  --cms-chart: color-mix(in srgb, var(--cms-color-primary) 45%, #fff);
  --cms-chart: lch(from var(--cms-color-primary) max(l, 64) c h);
  --cms-chart-2: color-mix(in srgb, var(--cms-chart) 52%, var(--cms-color-surface));
}

.cms-club-unavailable {
  margin: 0;
}

/* ============================== Kalendář akcí – karty ============================== */

.cms-evcal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
  gap: 0.85rem;
}

.cms-evcal-card {
  /* Rozvržení obsahu karty podle její vlastní šířky (viz @container evcal-card níže). */
  container: evcal-card / inline-size;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 0.9rem;
  align-items: start;
  padding: 1rem 1rem 0.95rem;
  color: var(--cms-color-text);
  text-decoration: none;
  background: var(--cms-color-surface);
  border: 1px solid var(--cms-color-border);
  border-radius: var(--cms-radius);
  box-shadow: var(--cms-shadow-soft);
  transition: border-color 0.2s var(--cms-ease), background-color 0.2s var(--cms-ease), transform 0.2s var(--cms-ease);
}

.cms-evcal-card--race {
  border-color: color-mix(in srgb, var(--cms-color-secondary) 55%, var(--cms-color-border));
}

a.cms-evcal-card:hover,
a.cms-evcal-card:focus-visible {
  color: var(--cms-color-text);
  background: var(--cms-color-surface-2);
  border-color: var(--cms-color-secondary);
  transform: translateY(-1px);
}

a.cms-evcal-card:focus-visible {
  outline: 2px solid var(--cms-color-secondary);
  outline-offset: 2px;
}

.cms-evcal-card__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 3.9rem;
  min-height: 3.9rem;
  padding: 0.35rem 0.45rem;
  border-radius: var(--cms-radius-sm);
  background: var(--cms-color-surface-2);
  color: var(--cms-color-text);
  line-height: 1;
  text-align: center;
}

.cms-evcal-card--race .cms-evcal-card__date {
  background: color-mix(in srgb, var(--cms-color-secondary) 42%, var(--cms-color-surface));
}

.cms-evcal-card.is-today .cms-evcal-card__date {
  box-shadow: inset 0 0 0 2px var(--cms-color-secondary);
}

.cms-evcal-card__day {
  font-family: var(--cms-font-display);
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.cms-evcal-card__date.is-range .cms-evcal-card__day {
  font-size: 1.05rem;
}

.cms-evcal-card__month {
  margin-top: 0.3rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cms-evcal-card__body {
  min-width: 0;
  padding-right: 1.2rem;
}

.cms-evcal-card__title {
  margin: 0;
  font-family: var(--cms-font-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: underline 2px transparent;
  text-underline-offset: 0.18em;
  transition: text-decoration-color 0.2s var(--cms-ease);
}

a.cms-evcal-card:hover .cms-evcal-card__title {
  text-decoration-color: var(--cms-color-secondary);
}

.cms-evcal-card__sub {
  margin: 0.2rem 0 0;
  color: var(--cms-color-muted);
  font-size: 0.92rem;
  line-height: 1.35;
}

.cms-evcal-card__place {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.75rem;
  margin: 0.55rem 0 0;
  color: var(--cms-color-muted);
  font-size: 0.85rem;
}

.cms-evcal-card__place > span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  max-width: 100%;
}

.cms-evcal-card__place-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cms-evcal-icon {
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
}

.cms-evcal-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.5rem;
  margin: 0.65rem 0 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.cms-evcal-card__arrow {
  position: absolute;
  right: 0.9rem;
  bottom: 0.85rem;
  display: inline-flex;
  font-size: 1.15rem;
  transition: transform 0.2s var(--cms-ease);
}

a.cms-evcal-card:hover .cms-evcal-card__arrow {
  transform: translateX(3px);
}

.cms-evcal-badge {
  display: inline-block;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cms-color-secondary) 30%, var(--cms-color-surface));
  color: var(--cms-color-text);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cms-evcal-badge--canceled {
  background: color-mix(in srgb, #c62828 18%, var(--cms-color-surface));
}

.is-canceled .cms-evcal-card__title,
.is-canceled .cms-evcal-item__name {
  text-decoration: line-through;
  text-decoration-color: var(--cms-color-muted);
}

.cms-evcal-card.is-canceled {
  opacity: 0.75;
}

/* Úzká karta (postranní sloupec, mobil): datum a název vedle sebe, ostatní řádky pod nimi
   přes celou šířku karty – tělo karty se „rozpustí“ do mřížky karty. */
@container (max-width: 22rem) {
  .cms-evcal-card {
    padding: 0.75rem;
  }
}

@container evcal-card (max-width: 22rem) {
  .cms-evcal-card__date {
    min-width: 3.1rem;
    min-height: 3.1rem;
  }

  .cms-evcal-card__day {
    font-size: 1.2rem;
  }

  .cms-evcal-card__body {
    display: contents;
  }

  .cms-evcal-card__title {
    grid-column: 2;
    align-self: center;
  }

  .cms-evcal-card__sub,
  .cms-evcal-card__place,
  .cms-evcal-card__meta {
    grid-column: 1 / -1;
  }

  .cms-evcal-card__sub {
    margin-top: 0.55rem;
  }

  .cms-evcal-card__arrow {
    display: none;
  }
}

/* ============================== Kalendář akcí – týdenní seznam ============================== */

.cms-evcal--week {
  display: grid;
  gap: 1.35rem;
}

.cms-evcal-week__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.65rem;
  margin: 0 0 0.55rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--cms-color-secondary);
  font-family: var(--cms-font-display);
  font-size: 1.1rem;
}

.cms-evcal-week__range {
  color: var(--cms-color-muted);
  font-family: var(--cms-font-body);
  font-size: 0.88rem;
  font-weight: 500;
}

.cms-evcal-week__empty {
  margin: 0;
}

.cms-evcal-days {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cms-evcal-day {
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.55rem 0.5rem;
  border-bottom: 1px solid var(--cms-color-border);
}

.cms-evcal-day:last-child {
  border-bottom: 0;
}

.cms-evcal-day.is-today {
  border-radius: var(--cms-radius-sm);
  background: color-mix(in srgb, var(--cms-color-secondary) 14%, transparent);
  box-shadow: inset 3px 0 0 var(--cms-color-secondary);
}

.cms-evcal-day.is-past {
  opacity: 0.62;
}

.cms-evcal-day__label {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.cms-evcal-day__label strong {
  font-family: var(--cms-font-display);
  font-size: 1.05rem;
}

.cms-evcal-day__label span {
  color: var(--cms-color-muted);
  font-size: 0.82rem;
}

.cms-evcal-day__events {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cms-evcal-item {
  display: grid;
  grid-template-columns: 2.9rem minmax(0, 1fr);
  gap: 0.5rem;
  line-height: 1.4;
}

.cms-evcal-item--empty {
  display: block;
  color: var(--cms-color-muted);
}

.cms-evcal-item__time {
  color: var(--cms-color-muted);
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  padding-top: 0.05rem;
}

.cms-evcal-item__name {
  font-weight: 700;
}

a.cms-evcal-item__name {
  color: var(--cms-color-text);
  text-decoration-color: color-mix(in srgb, var(--cms-color-secondary) 70%, transparent);
}

a.cms-evcal-item__name:hover {
  color: var(--cms-color-primary);
}

.cms-evcal-item__sub {
  color: var(--cms-color-muted);
}

.cms-evcal-item__details {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.7rem;
  margin-top: 0.15rem;
  color: var(--cms-color-muted);
  font-size: 0.84rem;
}

.cms-evcal-item__place {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.cms-evcal-chip {
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--cms-color-surface-2);
  color: var(--cms-color-text);
  font-size: 0.75rem;
  font-weight: 600;
}

.cms-evcal-card--race .cms-evcal-chip,
.cms-evcal-item--race .cms-evcal-chip {
  background: color-mix(in srgb, var(--cms-color-secondary) 32%, var(--cms-color-surface));
}

@container (max-width: 24rem) {
  .cms-evcal-day {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }

  .cms-evcal-day__label {
    flex-direction: row;
    gap: 0.5rem;
    align-items: baseline;
  }
}

/* ============================== Tréninkové skupiny ============================== */

.cms-tgroup {
  --tgroup-accent: var(--tgroup-color, var(--cms-color-primary));
  display: grid;
  gap: 1.5rem;
}

.cms-tgroup__title {
  margin: 0 0 1rem;
  font-family: var(--cms-font-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.1;
}

.cms-tgroup__body > :first-child {
  margin-top: 0;
}

.cms-tgroup-leaders {
  display: grid;
  gap: 1rem;
}

/* Velké medailonky nejvýš dva vedle sebe (půlka šířky), malé tři (třetina). auto-fill drží šířku
   sloupce i u jediného medailonku – nikdy se neroztáhne přes celý blok. */
.cms-tgroup-leaders__large,
.cms-tgroup-leaders__small {
  display: grid;
  gap: 0.85rem;
}

.cms-tgroup-leaders__large {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(20rem, calc(50% - 0.5rem))), 1fr));
}

.cms-tgroup-leaders__small {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(15rem, calc((100% - 1.7rem) / 3))), 1fr));
}

/* Medailonek: celý vzhled je v proměnných --leader-*. Výchozí je tmavá plocha v barvě klubu s jemným
   přechodem; jednotlivé styly je přepisují v sekci „Medailonky trenérů podle stylu“ na konci souboru. */
.cms-tgroup-leader {
  --leader-bg: color-mix(in srgb, var(--cms-color-primary) 38%, #0b0f0c);
  --leader-glow: color-mix(in srgb, var(--cms-color-primary) 45%, transparent);
  --leader-pattern: radial-gradient(ellipse 70% 90% at 0% 0%, var(--leader-glow), transparent 70%);
  --leader-border: 0 solid transparent;
  --leader-radius: max(var(--cms-radius), 0.25rem);
  --leader-shadow: var(--cms-shadow-soft);
  --leader-text: #f4f6f2;
  --leader-name: #fff;
  --leader-bio: color-mix(in srgb, #fff 82%, transparent);
  --leader-accent: var(--cms-color-secondary);
  --leader-role-font: var(--cms-font-display);
  --leader-name-weight: 800;
  --leader-name-case: uppercase;
  --leader-name-spacing: 0.01em;
  --leader-photo-radius: max(calc(var(--cms-radius) * 0.8), 0.2rem);
  --leader-photo-shadow: 0 10px 24px rgb(0 0 0 / 0.35);
  --leader-initials-bg: var(--cms-color-secondary);
  --leader-initials: #fff;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  overflow: hidden;
  padding: 0.85rem 1rem;
  border: var(--leader-border);
  border-radius: var(--leader-radius);
  background-color: var(--leader-bg);
  background-image: var(--leader-pattern);
  color: var(--leader-text);
  box-shadow: var(--leader-shadow);
}

/* Kontrast nezávisle na barvách klubu (WCAG AA): pozadí má jas nejvýš 20 (LCH), přechod v rohu
   nejvýš 30, role je v secondary zesvětlené na jas ≥ 80 a iniciály jsou černé nebo bílé podle jasu
   dlaždice (> 55 → černé). Bez relativních barev zůstanou míchané hodnoty výše. */
@supports (color: lch(from red l c h)) {
  .cms-tgroup-leader {
    --leader-bg: lch(from var(--cms-color-primary) min(l, 20) c h);
    --leader-glow: lch(from var(--cms-color-primary) min(l, 30) c h / 0.6);
    --leader-accent: lch(from var(--cms-color-secondary) max(l, 80) c h);
    --leader-initials: lch(from var(--cms-color-secondary) clamp(0, (55 - l) * 100, 100) 0 0);
  }
}

.cms-tgroup-leader__text {
  min-width: 0;
}

.cms-tgroup-leader__role {
  margin: 0 0 0.25rem;
  color: var(--leader-accent);
  font-family: var(--leader-role-font);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cms-tgroup-leader__name {
  margin: 0;
  color: var(--leader-name);
  font-family: var(--cms-font-display);
  font-size: 1rem;
  font-weight: var(--leader-name-weight);
  line-height: 1.15;
  letter-spacing: var(--leader-name-spacing);
  text-transform: var(--leader-name-case);
}

.cms-tgroup-leader__contact {
  margin: 0.45rem 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.cms-tgroup-leader__contact a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, var(--leader-accent) 70%, transparent);
}

.cms-tgroup-leader__contact a:hover {
  color: var(--leader-accent);
}

.cms-tgroup-leader__bio {
  margin: 0.5rem 0 0;
  color: var(--leader-bio);
  font-size: 0.84rem;
  line-height: 1.5;
}

.cms-tgroup-leader__photo {
  flex: 0 0 auto;
  width: 4rem;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--leader-photo-radius);
  box-shadow: var(--leader-photo-shadow);
}

.cms-tgroup-leader__photo.is-initials {
  display: grid;
  place-items: center;
  background: var(--leader-initials-bg);
  color: var(--leader-initials);
  font-family: var(--cms-font-display);
  font-size: 1.15rem;
  font-weight: 800;
}

.cms-tgroup-leader--large {
  padding: 1rem 1rem 1rem 1.25rem;
}

.cms-tgroup-leader--large .cms-tgroup-leader__name {
  font-size: 1.3rem;
}

.cms-tgroup-leader--large .cms-tgroup-leader__photo {
  width: 6.5rem;
}

.cms-tgroup-leader--large .cms-tgroup-leader__photo.is-initials {
  font-size: 1.6rem;
}

/* Na úzkém bloku (mobil) u všech medailonků fotka úplně vlevo a texty vedle ní (v HTML je fotka
   až za textem). U row-reverse je začátek vpravo – k levému okraji tlačí flex-end. */
@container (max-width: 30rem) {
  .cms-tgroup-leader {
    flex-direction: row-reverse;
    justify-content: flex-end;
    padding: 0.65rem 0.75rem;
  }

  .cms-tgroup-leader--large {
    padding: 0.65rem 0.65rem 0.65rem 0.85rem;
  }

  /* Menší texty, hlavně jméno. */
  .cms-tgroup-leader .cms-tgroup-leader__role {
    font-size: 0.66rem;
  }

  .cms-tgroup-leader .cms-tgroup-leader__name {
    font-size: 0.8rem;
  }

  .cms-tgroup-leader--large .cms-tgroup-leader__name {
    font-size: 0.95rem;
  }

  .cms-tgroup-leader .cms-tgroup-leader__contact,
  .cms-tgroup-leader .cms-tgroup-leader__bio {
    font-size: 0.75rem;
  }
}

.cms-tgroup-members__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  font-family: var(--cms-font-display);
  font-size: 1.3rem;
}

.cms-tgroup-members__count {
  min-width: 1.8rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--cms-color-surface-2);
  color: var(--cms-color-muted);
  font-family: var(--cms-font-body);
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
}

.cms-tgroup-members__class {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1.1rem 0 0.6rem;
  color: var(--cms-color-muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cms-tgroup-members__class::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--cms-color-border);
}

.cms-tgroup-members__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cms-tgroup-member {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.45rem 0.6rem 0.45rem 0.45rem;
  border: 1px solid var(--cms-color-border);
  border-radius: var(--cms-radius-sm);
  background: var(--cms-color-surface);
}

.cms-tgroup-member__avatar {
  flex: 0 0 auto;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--cms-color-surface-2);
}

.cms-tgroup-member__avatar.is-initials {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--tgroup-accent) 16%, var(--cms-color-surface));
  color: color-mix(in srgb, var(--tgroup-accent) 70%, var(--cms-color-text));
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.cms-tgroup-member__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.cms-tgroup-member__name {
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cms-tgroup-member__index {
  color: var(--cms-color-muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
}

/* Přehled skupin: sloupců podle počtu skupin (--n1 … --n4), každý stejně široký – 2 skupiny
   po 50 %, 4 a víc po 25 %. Strop podle rozvržení stránky: bez postranních sloupců 4, s jedním 3,
   s oběma 2. Šířka bloku počet ještě sníží, aby karta nebyla užší než ~15 rem (tablet na šířku
   s postranním sloupcem → 2 karty). */
.cms-tgroups__grid {
  --tgroups-cols: 1;
  display: grid;
  grid-template-columns: repeat(var(--tgroups-cols), minmax(0, 1fr));
  gap: 0.75rem;
}

@container (min-width: 24rem) {
  .cms-tgroups__grid--n2,
  .cms-tgroups__grid--n3,
  .cms-tgroups__grid--n4 {
    --tgroups-cols: 2;
  }
}

@container (min-width: 46rem) {
  .cms-tgroups__grid--n3,
  .cms-tgroups__grid--n4 {
    --tgroups-cols: 3;
  }

  @media (min-width: 960px) {
    body.has-left.has-right .cms-tgroups__grid--n3,
    body.has-left.has-right .cms-tgroups__grid--n4 {
      --tgroups-cols: 2;
    }
  }
}

@container (min-width: 62rem) {
  .cms-tgroups__grid--n4 {
    --tgroups-cols: 4;
  }

  @media (min-width: 960px) {
    body.has-left .cms-tgroups__grid--n4,
    body.has-right .cms-tgroups__grid--n4 {
      --tgroups-cols: 3;
    }

    body.has-left.has-right .cms-tgroups__grid--n4 {
      --tgroups-cols: 2;
    }
  }
}

.cms-tgroups__card {
  --tgroup-accent: var(--tgroup-color, var(--cms-color-secondary));
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.95rem 1rem 1rem;
  border: 1px solid var(--cms-color-border);
  border-left: 5px solid var(--tgroup-accent);
  border-radius: var(--cms-radius-sm);
  background: var(--cms-color-surface);
  color: var(--cms-color-text);
  text-decoration: none;
  box-shadow: var(--cms-shadow-soft);
  transition: background-color 0.2s var(--cms-ease), transform 0.2s var(--cms-ease);
}

.cms-tgroups__card:hover,
.cms-tgroups__card:focus-visible {
  color: var(--cms-color-text);
  background: var(--cms-color-surface-2);
  transform: translateY(-1px);
}

.cms-tgroups__name {
  font-family: var(--cms-font-display);
  font-size: 1.2rem;
  font-weight: 700;
}

.cms-tgroups__count {
  color: var(--cms-color-muted);
  font-size: 0.88rem;
}

.cms-tgroups__leaders {
  display: flex;
  align-items: center;
  margin-top: 0.4rem;
}

.cms-tgroups__leader {
  flex: 0 0 auto;
  width: 1.9rem;
  height: 1.9rem;
  margin-right: -0.85rem; /* avatary výrazně přes sebe – víc místa pro jména */
  border: 2px solid var(--cms-color-surface);
  border-radius: 50%;
  object-fit: cover;
}

.cms-tgroups__leader.is-initials {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--tgroup-accent) 25%, var(--cms-color-surface));
  font-size: 0.65rem;
  font-weight: 800;
}

.cms-tgroups__more {
  display: grid;
  place-items: center;
  background: var(--cms-color-text);
  color: var(--cms-color-surface);
  font-size: 0.65rem;
  font-weight: 800;
}

.cms-tgroups__leader-names {
  overflow: hidden;
  margin-left: 1.25rem;
  color: var(--cms-color-muted);
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* ============================== Mapa akcí ============================== */

.cms-evmap__map {
  position: relative;
  z-index: 0; /* panely Leafletu (z-index 400+) nepřekryjí hlavičku ani menu */
  isolation: isolate;
  height: 380px;
  overflow: hidden;
  border: 1px solid var(--cms-color-border);
  border-radius: var(--cms-radius-sm);
  background: var(--cms-color-surface-2);
}

.cms-evmap--small .cms-evmap__map {
  height: 260px;
}

.cms-evmap--large .cms-evmap__map {
  height: min(560px, 75vh);
}

.cms-evmap__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.1rem;
  margin: 0.6rem 0 0;
  color: var(--cms-color-muted);
  font-size: 0.85rem;
}

.cms-evmap__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.cms-evmap__legend-item b {
  color: var(--cms-color-text);
}

.cms-evmap__legend-item::before {
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  border: 2px solid var(--cms-color-surface);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--cms-color-border-strong);
}

.cms-evmap__legend-item--race::before {
  background: var(--cms-chart);
}

.cms-evmap__legend-item--event::before {
  background: var(--cms-color-secondary);
}

.cms-evmap__legend-item--custom::before {
  background: var(--cms-color-text);
}

.cms-evmap__list {
  margin-top: 0.5rem;
  font-size: 0.9rem;
}

.cms-evmap__list summary {
  cursor: pointer;
  color: var(--cms-color-muted);
  font-size: 0.85rem;
}

.cms-evmap__list ul {
  max-height: 16rem;
  overflow-y: auto;
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
}

.cms-evmap-popup {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 11rem;
  font-family: var(--cms-font-body);
}

/* Popisek bodu při najetí: datum před názvem akce. */
.cms-evmap-tooltip__date {
  font-weight: 700;
}

.cms-evmap-popup__tag {
  color: var(--cms-color-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cms-evmap-popup__name {
  font-size: 0.98rem;
  line-height: 1.25;
}

.cms-evmap-popup__meta {
  color: var(--cms-color-muted);
  font-size: 0.82rem;
}

.cms-evmap-popup__link {
  margin-top: 0.3rem;
  font-weight: 700;
}

/* ============================== Statistiky ============================== */

.cms-stats {
  display: grid;
  gap: 1.1rem;
}

.cms-stats__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
  gap: 0.65rem;
}

.cms-stats-tile {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--cms-color-border);
  border-radius: var(--cms-radius-sm);
  background: var(--cms-color-surface);
}

.cms-stats-tile__label {
  color: var(--cms-color-muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.cms-stats-tile__value {
  font-family: var(--cms-font-body);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.cms-stats-tile__meta {
  color: var(--cms-color-muted);
  font-size: 0.78rem;
}

.cms-stats__charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 0.75rem;
}

.cms-stats-card {
  margin: 0;
  padding: 1rem 1.05rem 0.9rem;
  border: 1px solid var(--cms-color-border);
  border-radius: var(--cms-radius-sm);
  background: var(--cms-color-surface);
  min-width: 0;
}

.cms-stats-card--wide {
  grid-column: 1 / -1;
}

.cms-stats-card__title {
  margin: 0 0 0.7rem;
  font-family: var(--cms-font-display);
  font-size: 1.02rem;
  font-weight: 700;
}

.cms-stats-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: -0.25rem 0 0.75rem;
  color: var(--cms-color-muted);
  font-size: 0.82rem;
}

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

.cms-stats-legend__item b {
  color: var(--cms-color-text);
}

.cms-stats-swatch {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 2px;
}

/* Řada 1 = plná barva klubu, řada 2 = světlejší stupeň téže barvy (rozliší se jasem). */
.cms-stats-swatch--race,
.cms-stats-swatch--f,
.cms-stats-col__seg--race,
.cms-stats-split__seg--f {
  background: var(--cms-chart);
}

.cms-stats-swatch--other,
.cms-stats-swatch--m,
.cms-stats-col__seg--other,
.cms-stats-split__seg--m {
  background: var(--cms-chart-2);
}

.cms-stats-cols {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  gap: 2px;
}

.cms-stats-col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  outline: none;
}

.cms-stats-col__plot {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 9.5rem;
  border-bottom: 1px solid var(--cms-color-border-strong);
}

.cms-stats-col__value {
  margin-bottom: 0.2rem;
  color: var(--cms-color-text);
  font-size: 0.75rem;
  font-weight: 700;
}

.cms-stats-col__stack {
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
  width: min(24px, 72%);
  min-height: 0;
  overflow: hidden;
  border-radius: 4px 4px 0 0;
}

.cms-stats-col__seg {
  flex-basis: 0;
  min-height: 2px;
}

.cms-stats-col__label {
  margin-top: 0.3rem;
  color: var(--cms-color-muted);
  font-size: 0.68rem;
  text-transform: uppercase;
}

.cms-stats-col__month-num,
.cms-stats-label-short {
  display: none;
}

/* Úzký blok (postranní sloupec, mobil): měsíce číslem, krátké popisky pruhů. */
@container (max-width: 34rem) {
  .cms-stats-col__month,
  .cms-stats-label-long {
    display: none;
  }

  .cms-stats-col__month-num,
  .cms-stats-label-short {
    display: inline;
  }
}

.cms-stats-col:hover .cms-stats-col__stack,
.cms-stats-col:focus-visible .cms-stats-col__stack {
  filter: brightness(1.12) saturate(1.1);
}

.cms-stats-bars {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cms-stats-bar {
  position: relative;
  display: grid;
  grid-template-columns: minmax(5.5rem, 38%) minmax(0, 1fr);
  align-items: center;
  gap: 0.6rem;
  font-size: 0.86rem;
  outline: none;
}

.cms-stats-bar__label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cms-stats-dot {
  flex: 0 0 auto;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
}

.cms-stats-bar__track {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.cms-stats-bar__fill {
  height: 12px;
  min-width: 2px;
  border-radius: 0 4px 4px 0;
  background: var(--cms-chart);
}

.cms-stats-bar:hover .cms-stats-bar__fill,
.cms-stats-bar:focus-visible .cms-stats-bar__fill {
  filter: brightness(1.12) saturate(1.1);
}

.cms-stats-bar__value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cms-stats-split {
  margin-bottom: 0.9rem;
}

.cms-stats-split__bar {
  display: flex;
  gap: 2px;
  height: 12px;
  overflow: hidden;
  border-radius: 4px;
}

.cms-stats-split__seg {
  flex-basis: 0;
}

.cms-stats-split .cms-stats-legend {
  margin: 0.45rem 0 0;
}

/* Tooltip u sloupců a pruhů (hover i klávesnice). */
.cms-stats-col[data-tip]:hover::after,
.cms-stats-col[data-tip]:focus-visible::after,
.cms-stats-bar[data-tip]:hover::after,
.cms-stats-bar[data-tip]:focus-visible::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 0.35rem);
  left: 50%;
  z-index: 5;
  width: max-content;
  max-width: 14rem;
  padding: 0.35rem 0.55rem;
  border-radius: 6px;
  background: var(--cms-color-text);
  color: var(--cms-color-surface);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  pointer-events: none;
  transform: translateX(-50%);
  box-shadow: 0 6px 16px rgb(0 0 0 / 0.18);
}

.cms-stats-col:first-child[data-tip]::after { left: 0; transform: none; }
.cms-stats-col:last-child[data-tip]::after { left: auto; right: 0; transform: none; }
.cms-stats-bar[data-tip]::after { left: 40%; transform: none; }

.cms-stats-table {
  margin-top: 0.7rem;
  font-size: 0.85rem;
}

.cms-stats-table summary {
  cursor: pointer;
  color: var(--cms-color-muted);
  font-size: 0.8rem;
}

.cms-stats-table table {
  width: 100%;
  margin-top: 0.4rem;
  border-collapse: collapse;
}

.cms-stats-table th,
.cms-stats-table td {
  padding: 0.2rem 0.4rem;
  border-bottom: 1px solid var(--cms-color-border);
  text-align: left;
}

.cms-stats-table td {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.cms-stats__note {
  margin: 0;
}

/* ============================== Výsledky závodů ============================== */

.cms-results {
  display: grid;
  gap: 1.6rem;
}

.cms-results-event__head {
  margin-bottom: 0.8rem;
  padding-bottom: 0.45rem;
  border-bottom: 2px solid var(--cms-color-secondary);
}

.cms-results-event__title {
  margin: 0;
  font-family: var(--cms-font-display);
  font-size: 1.15rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.cms-results-event__title a {
  color: var(--cms-color-text);
  text-decoration-color: color-mix(in srgb, var(--cms-color-secondary) 70%, transparent);
}

.cms-results-event__title a:hover {
  color: var(--cms-color-primary);
}

.cms-results-event__sub {
  margin: 0.1rem 0 0;
  color: var(--cms-color-muted);
}

.cms-results-event__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.7rem;
  margin: 0.3rem 0 0;
  color: var(--cms-color-muted);
  font-size: 0.86rem;
}

.cms-results-chip {
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--cms-color-surface-2);
  color: var(--cms-color-text);
  font-size: 0.75rem;
  font-weight: 600;
}

.cms-results-stage + .cms-results-stage {
  margin-top: 1.1rem;
}

.cms-results-stage__title {
  margin: 0 0 0.55rem;
  color: var(--cms-color-muted);
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Kategorie vedle sebe v širokém bloku, pod sebou v úzkém. */
.cms-results-classes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  align-items: start;
  gap: 1rem 1.5rem;
}

.cms-results-class {
  min-width: 0;
}

.cms-results-class__name {
  display: inline-block;
  margin: 0 0 0.3rem;
  padding: 0.05rem 0.5rem;
  border-radius: var(--cms-radius-sm);
  background: color-mix(in srgb, var(--cms-color-secondary) 18%, var(--cms-color-surface));
  color: var(--cms-color-text);
  font-family: var(--cms-font-display);
  font-size: 0.92rem;
}

.cms-results-list,
.cms-results-legs {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cms-results-row {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 0.5rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--cms-color-border);
  line-height: 1.35;
}

.cms-results-row:last-child {
  border-bottom: 0;
}

.cms-results-place {
  justify-self: end;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
}

/* Zkratka statusu (DISK, VZDAL…) se při delším překladu zalomí, nepřeteče. */
.cms-results-place.is-status,
.cms-results-leg__rank.is-status {
  color: var(--cms-color-muted);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.cms-results-row.is-podium .cms-results-place {
  min-width: 1.8rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cms-color-secondary) 32%, var(--cms-color-surface));
  color: var(--cms-color-text);
  text-align: center;
}

.cms-results-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.cms-results-row.is-unclassified .cms-results-name {
  color: var(--cms-color-muted);
}

.cms-results-time {
  color: var(--cms-color-muted);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Štafeta: tým na řádku, členové po úsecích pod názvem týmu. */
.cms-results-row--team .cms-results-name {
  font-weight: 700;
}

.cms-results-legs {
  display: grid;
  grid-column: 2 / -1;
  gap: 0.1rem;
  margin-top: 0.2rem;
}

.cms-results-leg {
  display: grid;
  grid-template-columns: 1.2rem minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 0.45rem;
  font-size: 0.9rem;
}

.cms-results-leg__no {
  color: var(--cms-color-muted);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.cms-results-leg__name {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Závodník jiného klubu: v HTML není jeho jméno, jen rozmazaný zástupný text (nejde vybrat). */
.cms-results-blur {
  display: inline-block;
  color: var(--cms-color-muted);
  filter: blur(4px);
  user-select: none;
  pointer-events: none;
}

.cms-results-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cms-results-leg__result {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  color: var(--cms-color-muted);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Úzký blok: členové štafety přes celou šířku řádku. */
@container (max-width: 22rem) {
  .cms-results-legs {
    grid-column: 1 / -1;
    padding-left: 0.75rem;
  }
}

/* ============================== Doladění pro jednotlivé styly ============================== */

/* Výrazné obrysy (Brutal, Plakát): silnější rámečky karet. */
[data-style="brutal"] .cms-evcal-card,
[data-style="brutal"] .cms-tgroups__card,
[data-style="brutal"] .cms-stats-tile,
[data-style="brutal"] .cms-stats-card,
[data-style="plakat"] .cms-evcal-card,
[data-style="plakat"] .cms-tgroups__card,
[data-style="plakat"] .cms-stats-tile,
[data-style="plakat"] .cms-stats-card {
  border-width: 2px;
  border-color: var(--cms-color-text);
}

[data-style="brutal"] .cms-tgroups__card,
[data-style="plakat"] .cms-tgroups__card {
  border-left-width: 6px;
  border-left-color: var(--tgroup-accent);
}

[data-style="plakat"] .cms-evcal-card__title,
[data-style="plakat"] .cms-tgroups__name {
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* Linkové styly (Minimal, Noviny, Elegantní): bez stínů, plochy jen linkami. */
[data-style="minimal"] .cms-evcal-card,
[data-style="noviny"] .cms-evcal-card,
[data-style="elegant"] .cms-evcal-card,
[data-style="minimal"] .cms-tgroups__card,
[data-style="noviny"] .cms-tgroups__card,
[data-style="elegant"] .cms-tgroups__card {
  box-shadow: none;
}

[data-style="noviny"] .cms-evcal-card__date,
[data-style="elegant"] .cms-evcal-card__date {
  background: transparent;
  border: 1px solid var(--cms-color-border-strong);
}

[data-style="noviny"] .cms-evcal-card--race .cms-evcal-card__date,
[data-style="elegant"] .cms-evcal-card--race .cms-evcal-card__date {
  border-color: var(--cms-color-secondary);
  background: color-mix(in srgb, var(--cms-color-secondary) 16%, transparent);
}

/* Přátelský: kulaté dlaždice dat. */
[data-style="pratelsky"] .cms-evcal-card__date {
  border-radius: 1rem;
}

/* ============================== Medailonky trenérů podle stylu ============================== */

/* Styl nastaví proměnné --leader-* (viz .cms-tgroup-leader) a případně přidá vlastní prvek.
   Medailonky leží v rámečku stránky (.cms-frame), proto světlé varianty berou --cms-color-surface-2
   nebo tónovanou plochu, aby se od rámečku odlišily. Výchozí styl má tmavou plochu ze základu. */

/* Světlé medailonky: společný základ – plocha stylu, tmavý text, fotka bez stínu. */
:is([data-style="clean"], [data-style="klasik"], [data-style="elegant"], [data-style="minimal"],
  [data-style="noviny"], [data-style="brutal"], [data-style="plakat"], [data-style="pratelsky"],
  [data-style="les"], [data-style="bento"], [data-style="lampion"], [data-style="mapa"],
  [data-style="trat"]) .cms-tgroup-leader {
  --leader-bg: var(--cms-color-surface-2);
  --leader-pattern: none;
  --leader-border: 1px solid var(--cms-color-border);
  --leader-shadow: none;
  --leader-text: var(--cms-color-text);
  --leader-name: var(--cms-color-text);
  --leader-bio: var(--cms-color-muted);
  --leader-accent: lch(from var(--cms-color-secondary) min(l, 44) c h);
  --leader-name-weight: 700;
  --leader-name-case: none;
  --leader-name-spacing: 0;
  --leader-photo-shadow: none;
  --leader-initials-bg: lch(from var(--cms-color-primary) min(l, 30) c h);
  --leader-initials: #ffffff;
}

/* Čistý: světlá karta s linkou v barvě klubu vlevo, role v barvě klubu. */
[data-style="clean"] .cms-tgroup-leader {
  --leader-radius: var(--cms-radius);
  --leader-accent: lch(from var(--cms-color-primary) min(l, 40) c h);
  --leader-name-spacing: -0.01em;
  --leader-photo-radius: var(--cms-radius-sm);
  border-left: 3px solid var(--cms-color-primary);
}

/* Klasický: orámovaný box se záhlavím – horní pruh v barvě klubu, patkové jméno, fotka v rámečku. */
[data-style="klasik"] .cms-tgroup-leader {
  --leader-border: 1px solid var(--cms-color-border-strong);
  --leader-radius: var(--cms-radius);
  --leader-name: var(--kl-deep);
  --leader-accent: var(--kl-accent-ink);
  --leader-role-font: var(--cms-font-body);
  --leader-initials-bg: var(--kl-deep);
  --leader-photo-radius: var(--cms-radius-sm);
  --leader-photo-shadow: 0 0 0 1px var(--cms-color-border-strong);
  border-top: 4px solid var(--kl-deep);
}

[data-style="klasik"] .cms-tgroup-leader--large {
  border-top-color: var(--kl-accent);
}

/* Elegantní: vzdušná plocha bez rámečku, vlasová linka v sekundární barvě, kulatá fotka
   v odsazeném kroužku, jméno v patkovém písmu bez verzálek. */
[data-style="elegant"] .cms-tgroup-leader {
  --leader-border: 0 solid transparent;
  --leader-radius: 0;
  --leader-name: var(--el-deep);
  --leader-accent: var(--el-accent-ink);
  --leader-role-font: var(--cms-font-body);
  --leader-name-weight: 600;
  --leader-photo-radius: 50%;
  --leader-photo-shadow: 0 0 0 4px var(--leader-bg), 0 0 0 5px var(--el-accent);
  --leader-initials-bg: color-mix(in srgb, var(--el-accent) 14%, var(--cms-color-surface));
  --leader-initials: var(--el-accent-ink);
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--el-accent);
}

[data-style="elegant"] .cms-tgroup-leader__role {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
}

[data-style="elegant"] .cms-tgroup-leader__name {
  font-size: 1.3rem;
}

[data-style="elegant"] .cms-tgroup-leader--large .cms-tgroup-leader__name {
  font-size: 1.75rem;
}

[data-style="elegant"] .cms-tgroup-leader__photo.is-initials {
  font-weight: 600;
}

/* Minimal: bez plochy a rámečku, jen vlasová linka nahoře; role v neproporcionálním písmu
   s tečkou v barvě klubu. */
[data-style="minimal"] .cms-tgroup-leader {
  --leader-bg: transparent;
  --leader-border: 0 solid transparent;
  --leader-radius: 0;
  --leader-accent: var(--cms-color-muted);
  --leader-role-font: var(--mn-mono);
  --leader-name-weight: 600;
  --leader-name-spacing: -0.015em;
  --leader-photo-radius: 0;
  --leader-initials-bg: var(--cms-color-surface-2);
  --leader-initials: var(--cms-color-text);
  padding: 0.9rem 0 0.25rem;
  border-top: 1px solid var(--cms-color-text);
}

[data-style="minimal"] .cms-tgroup-leader__role {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

[data-style="minimal"] .cms-tgroup-leader__role::before {
  content: "";
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  margin-right: 0.5em;
  border-radius: 50%;
  background: var(--mn-dot);
  vertical-align: 0.1em;
}

[data-style="minimal"] .cms-tgroup-leader__contact {
  font-family: var(--mn-mono);
  font-size: 0.76rem;
}

[data-style="minimal"] .cms-tgroup-leader__photo.is-initials {
  font-family: var(--mn-mono);
  font-weight: 500;
}

/* Noviny: tlustá a tenká linka jako v tištěném listu, jméno v patkovém písmu, popisek kurzívou. */
[data-style="noviny"] .cms-tgroup-leader {
  --leader-bg: transparent;
  --leader-border: 0 solid transparent;
  --leader-radius: 0;
  --leader-name: var(--nv-ink);
  --leader-accent: var(--nv-accent);
  --leader-role-font: var(--nv-sans);
  --leader-name-weight: 600;
  --leader-photo-radius: 0;
  --leader-initials-bg: var(--nv-rule);
  --leader-initials: var(--cms-color-surface);
  padding: 0.75rem 0;
  border-top: 3px solid var(--nv-rule);
  border-bottom: 1px solid var(--nv-rule);
}

[data-style="noviny"] .cms-tgroup-leader__role {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
}

[data-style="noviny"] .cms-tgroup-leader__name {
  font-size: 1.25rem;
}

[data-style="noviny"] .cms-tgroup-leader--large .cms-tgroup-leader__name {
  font-size: 1.65rem;
}

[data-style="noviny"] .cms-tgroup-leader__contact {
  font-family: var(--nv-sans);
  font-size: 0.78rem;
}

[data-style="noviny"] .cms-tgroup-leader__bio {
  font-style: italic;
}

[data-style="noviny"] .cms-tgroup-leader__photo.is-initials {
  font-weight: 600;
}

/* Brutal: tlustý černý obrys a tvrdý posunutý stín, role jako nalepená samolepka,
   velké medailonky v tónu sekundární barvy. */
[data-style="brutal"] .cms-tgroup-leader {
  --leader-bg: var(--cms-color-surface);
  --leader-border: var(--bt-line);
  --leader-radius: var(--cms-radius);
  --leader-shadow: var(--cms-shadow);
  --leader-text: #0e0e0e;
  --leader-name: #0e0e0e;
  --leader-bio: #2b2b2b;
  --leader-accent: #0e0e0e;
  --leader-name-case: uppercase;
  --leader-name-spacing: -0.01em;
  --leader-photo-radius: var(--cms-radius-sm);
  --leader-photo-shadow: 3px 3px 0 #0e0e0e;
  --leader-initials-bg: var(--cms-color-primary);
  --leader-initials: var(--bt-on-primary);
}

[data-style="brutal"] .cms-tgroup-leader--large {
  --leader-bg: var(--bt-tint);
}

[data-style="brutal"] .cms-tgroup-leader__role {
  display: inline-block;
  margin-bottom: 0.5rem;
  padding: 0.1rem 0.45rem;
  border: 2px solid #0e0e0e;
  background: var(--cms-color-secondary);
  color: var(--bt-on-secondary);
  font-family: var(--bt-mono);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  transform: rotate(-2deg);
}

[data-style="brutal"] .cms-tgroup-leader__photo {
  border: var(--bt-line);
}

/* Plakát: tlustá černá linka, plné plochy, role jako štítek. Malé medailonky bílé s pruhem v barvě
   skupiny (jako karty v přehledu skupin), velké v barvě klubu; text na plochách černý/bílý podle jasu. */
[data-style="plakat"] .cms-tgroup-leader {
  --leader-bg: #ffffff;
  --leader-border: var(--pk-line);
  --leader-radius: 0;
  --leader-text: #111111;
  --leader-name: #111111;
  --leader-bio: #333333;
  --leader-accent: var(--pk-ink);
  --leader-name-weight: 900;
  --leader-name-case: uppercase;
  --leader-photo-radius: 0;
  --leader-initials-bg: var(--cms-color-secondary);
  --leader-initials: var(--pk-on-secondary);
  border-left: 10px solid var(--tgroup-accent);
}

[data-style="plakat"] .cms-tgroup-leader--large {
  --leader-bg: var(--cms-color-primary);
  --leader-text: var(--pk-on-primary);
  --leader-name: var(--pk-on-primary);
  --leader-bio: color-mix(in srgb, var(--pk-on-primary) 85%, transparent);
  --leader-accent: var(--pk-on-primary);
  border-left: var(--pk-line);
}

[data-style="plakat"] .cms-tgroup-leader__role {
  display: inline-block;
  margin-bottom: 0.45rem;
  padding: 0.15rem 0.5rem;
  background: var(--cms-color-secondary);
  color: var(--pk-on-secondary);
  letter-spacing: 0.05em;
}

[data-style="plakat"] .cms-tgroup-leader__photo {
  border: var(--pk-line);
}

/* Přátelský: pastelová bublina s velkým zaoblením, role jako pilulka, kulatá fotka s bílým lemem. */
[data-style="pratelsky"] .cms-tgroup-leader {
  --leader-bg: var(--pr-pastel);
  --leader-border: 0 solid transparent;
  --leader-radius: var(--cms-radius);
  --leader-name: var(--pr-ink);
  --leader-accent: var(--pr-accent-ink);
  --leader-photo-radius: 50%;
  --leader-photo-shadow: 0 0 0 4px #ffffff;
  --leader-initials-bg: var(--pr-sun);
  --leader-initials: var(--pr-accent-ink);
}

[data-style="pratelsky"] .cms-tgroup-leader--large {
  --leader-bg: var(--pr-sun-soft);
  --leader-initials-bg: var(--pr-pastel-strong);
  --leader-initials: var(--pr-ink);
}

[data-style="pratelsky"] .cms-tgroup-leader__role {
  display: inline-block;
  margin-bottom: 0.4rem;
  padding: 0.1rem 0.65rem;
  border-radius: 999px;
  background: #ffffff;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  text-transform: none;
}

/* Les: tónovaná zaoblená dlaždice, slunce v sekundární barvě v rohu a silueta lesa u spodní hrany. */
[data-style="les"] .cms-tgroup-leader {
  --leader-bg: var(--ls-tint);
  --leader-pattern: radial-gradient(circle at calc(100% - 1.25rem) 1rem, color-mix(in srgb, var(--ls-sun) 26%, transparent) 0 2.6rem, transparent 2.7rem);
  --leader-border: 0 solid transparent;
  --leader-radius: var(--cms-radius);
  --leader-shadow: var(--cms-shadow-soft);
  --leader-name: var(--ls-deep);
  --leader-accent: var(--ls-sun-ink);
  --leader-name-spacing: -0.01em;
  --leader-photo-radius: var(--cms-radius-sm);
  --leader-photo-shadow: 0 10px 20px -12px rgb(0 0 0 / 0.45);
  --leader-initials-bg: var(--ls-ink);
  padding-bottom: 1.2rem;
}

[data-style="les"] .cms-tgroup-leader::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5rem;
  background: var(--ls-ink);
  opacity: 0.12;
  pointer-events: none;
  -webkit-mask: var(--ls-trees) repeat-x 0 100% / 14rem 100%;
  mask: var(--ls-trees) repeat-x 0 100% / 14rem 100%;
}

[data-style="les"] .cms-tgroup-leader > * {
  position: relative;
  z-index: 1;
}

/* Bento: dlaždice v dlaždici – šedá plocha bez rámečku, role jako čip; velké medailonky jsou
   zvýrazněné tmavé dlaždice v barvě klubu. */
[data-style="bento"] .cms-tgroup-leader {
  --leader-border: 0 solid transparent;
  --leader-radius: var(--cms-radius-sm);
  --leader-accent: var(--bn-ink);
  --leader-name-spacing: -0.02em;
  --leader-photo-radius: calc(var(--cms-radius-sm) * 0.75);
  --leader-initials-bg: var(--bn-tint);
  --leader-initials: var(--bn-ink);
}

[data-style="bento"] .cms-tgroup-leader--large {
  --leader-bg: var(--bn-deep);
  --leader-pattern: radial-gradient(ellipse 80% 100% at 0% 0%, lch(from var(--cms-color-primary) min(l, 36) c h / 0.7), transparent 70%);
  --leader-text: #f4f6f2;
  --leader-name: #ffffff;
  --leader-bio: color-mix(in srgb, #ffffff 80%, transparent);
  --leader-accent: lch(from var(--cms-color-secondary) max(l, 80) c h);
  --leader-initials-bg: var(--bn-accent);
  --leader-initials: lch(from var(--cms-color-secondary) clamp(0, (55 - l) * 100, 100) 0 0);
}

[data-style="bento"] .cms-tgroup-leader__role {
  display: inline-block;
  margin-bottom: 0.4rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: #ffffff;
  font-family: var(--cms-font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

[data-style="bento"] .cms-tgroup-leader--large .cms-tgroup-leader__role {
  background: rgb(255 255 255 / 0.12);
}

/* Lampion: ostré hrany, linka v barvě klubu a roh v sekundární barvě jako na kontrolním lampionu;
   velké medailonky v tmavé barvě klubu. */
[data-style="lampion"] .cms-tgroup-leader {
  --leader-border: 0 solid transparent;
  --leader-radius: 0;
  --leader-name: var(--lp-deep);
  --leader-accent: var(--lp-b-ink);
  --leader-name-weight: 800;
  --leader-name-case: uppercase;
  --leader-photo-radius: 0;
  --leader-initials-bg: var(--lp-a);
  --leader-initials: var(--lp-on-a);
  border-left: 4px solid var(--lp-a);
}

[data-style="lampion"] .cms-tgroup-leader::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1rem;
  height: 1rem;
  background: linear-gradient(225deg, var(--lp-b) 0 50%, transparent 50%);
  pointer-events: none;
}

[data-style="lampion"] .cms-tgroup-leader--large {
  --leader-bg: var(--lp-deep);
  --leader-text: #f4f6f2;
  --leader-name: #ffffff;
  --leader-bio: color-mix(in srgb, #ffffff 80%, transparent);
  --leader-accent: lch(from var(--cms-color-secondary) max(l, 75) c h);
  --leader-initials-bg: var(--lp-b);
  --leader-initials: lch(from var(--cms-color-secondary) clamp(0, (55 - l) * 100, 100) 0 0);
  border-left-color: var(--lp-b);
}

[data-style="lampion"] .cms-tgroup-leader--large::after {
  width: 1.4rem;
  height: 1.4rem;
}

/* Mapa: výřez mapy – vrstevnice, tenký rám s odsazenou linkou (jako banner), před rolí kontrolní
   kroužek v barvě tratě. */
[data-style="mapa"] .cms-tgroup-leader {
  --leader-bg: var(--cms-color-surface);
  --leader-pattern: var(--mp-contours);
  --leader-border: 1px solid var(--mp-ink);
  --leader-radius: var(--cms-radius);
  --leader-shadow: 0 0 0 3px var(--cms-color-surface), 0 0 0 4px color-mix(in srgb, var(--mp-ink) 45%, transparent);
  --leader-name: var(--mp-deep);
  --leader-accent: var(--mp-course-ink);
  --leader-name-case: uppercase;
  --leader-name-spacing: 0.02em;
  --leader-photo-radius: var(--cms-radius-sm);
  --leader-photo-shadow: 0 0 0 1px var(--mp-ink);
  --leader-initials-bg: var(--mp-ink);
  background-size: 600px 600px;
}

[data-style="mapa"] .cms-tgroup-leader__role::before {
  content: "";
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-right: 0.4em;
  border: 2px solid var(--mp-course);
  border-radius: 50%;
  vertical-align: -0.12em;
}

/* Trať: před rolí start (trojúhelník), fotka jako kontrola – kroužek v barvě tratě. */
[data-style="trat"] .cms-tgroup-leader {
  --leader-radius: var(--cms-radius);
  --leader-name: var(--tr-deep);
  --leader-accent: var(--tr-course);
  --leader-name-spacing: -0.01em;
  --leader-photo-radius: 50%;
  --leader-photo-shadow: 0 0 0 3px var(--leader-bg), 0 0 0 5.5px var(--tr-course);
  --leader-initials-bg: var(--tr-course-soft);
  --leader-initials: var(--tr-course);
}

[data-style="trat"] .cms-tgroup-leader__role::before {
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.7em;
  margin-right: 0.45em;
  background: var(--tr-course);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* Sportovní: tmavá plocha s vrstevnicemi a zářivou linkou vlevo. Bebas Neue je úzké verzálkové
   písmo jen v jednom řezu – větší velikost, širší proklad. */
[data-style="sport"] .cms-tgroup-leader {
  --leader-bg: var(--cms-color-surface);
  --leader-pattern: var(--sp-contours), linear-gradient(160deg, var(--sp-glow), transparent 60%);
  --leader-radius: 0;
  --leader-shadow: none;
  --leader-accent: var(--sp-accent);
  --leader-name-weight: 400;
  --leader-photo-radius: 0;
  --leader-photo-shadow: none;
  --leader-initials-bg: var(--sp-accent);
  --leader-initials: var(--sp-on-accent);
  border-left: 4px solid var(--sp-accent);
}

[data-style="sport"] .cms-tgroup-leader__role {
  font-size: 0.95rem;
  letter-spacing: 0.08em;
}

[data-style="sport"] .cms-tgroup-leader__name {
  font-size: 1.35rem;
  letter-spacing: 0.04em;
}

[data-style="sport"] .cms-tgroup-leader--large .cms-tgroup-leader__name {
  font-size: 1.75rem;
}

[data-style="sport"] .cms-tgroup-leader__photo.is-initials {
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}

[data-style="sport"] .cms-tgroup-leader--large .cms-tgroup-leader__photo.is-initials {
  font-size: 2.1rem;
}

/* Noční: tmavá plocha s kuželem čelovky, obrys a reflexní kroužek kolem fotky. */
[data-style="noc"] .cms-tgroup-leader {
  --leader-bg: var(--cms-color-surface-2);
  --leader-pattern: radial-gradient(ellipse 70% 120% at 0% 0%, rgb(255 240 210 / 0.09), transparent 70%), linear-gradient(180deg, rgb(255 255 255 / 0.035), transparent 40%);
  --leader-border: 1px solid var(--cms-color-border-strong);
  --leader-radius: var(--cms-radius);
  --leader-text: var(--cms-color-text);
  --leader-bio: var(--cms-color-muted);
  --leader-accent: var(--nc-glow);
  --leader-photo-radius: 50%;
  --leader-photo-shadow: 0 0 0 2px var(--nc-glow), 0 0 22px color-mix(in srgb, var(--nc-glow) 40%, transparent);
  --leader-initials-bg: var(--nc-glow);
  --leader-initials: var(--nc-on-glow);
}

/* Sprint: tmavá plocha s rychlostními linkami a zkoseným rohem, role na zkoseném štítku,
   jméno kurzívou, fotka jako kosodélník. */
[data-style="sprint"] .cms-tgroup-leader {
  --leader-bg: var(--sr-deep);
  --leader-pattern: var(--sr-speed);
  --leader-radius: 0;
  --leader-shadow: none;
  --leader-accent: lch(from var(--cms-color-secondary) max(l, 75) c h);
  --leader-photo-radius: 0;
  --leader-photo-shadow: none;
  --leader-initials-bg: var(--sr-hot);
  --leader-initials: var(--sr-on-hot);
  clip-path: polygon(0 0, calc(100% - var(--sr-cut)) 0, 100% var(--sr-cut), 100% 100%, 0 100%);
}

[data-style="sprint"] .cms-tgroup-leader__role {
  display: inline-block;
  margin-bottom: 0.45rem;
  padding: 0.1rem 0.75rem;
  background: var(--sr-hot);
  color: var(--sr-on-hot);
  font-style: italic;
  letter-spacing: 0.08em;
  clip-path: polygon(0.45rem 0, 100% 0, calc(100% - 0.45rem) 100%, 0 100%);
}

[data-style="sprint"] .cms-tgroup-leader__name {
  font-style: italic;
}

[data-style="sprint"] .cms-tgroup-leader__photo {
  clip-path: polygon(16% 0, 100% 0, 84% 100%, 0 100%);
}

/* Topo: tmavá dlaždice s vrstevnicemi (jako banner), role a kontakty v neproporcionálním písmu. */
[data-style="topo"] .cms-tgroup-leader {
  --leader-bg: var(--tp-deep);
  --leader-pattern: var(--tp-topo-light), radial-gradient(ellipse 80% 100% at 100% 0%, color-mix(in srgb, var(--tp-accent) 30%, transparent), transparent 70%);
  --leader-radius: var(--cms-radius-sm);
  --leader-accent: lch(from var(--cms-color-secondary) max(l, 78) c h);
  --leader-role-font: var(--tp-mono);
  --leader-name-case: none;
  --leader-name-spacing: -0.02em;
  --leader-photo-radius: calc(var(--cms-radius-sm) * 0.75);
  --leader-initials-bg: var(--tp-accent);
  background-size: 800px 800px, auto;
}

[data-style="topo"] .cms-tgroup-leader__role {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}

[data-style="topo"] .cms-tgroup-leader__contact {
  font-family: var(--tp-mono);
  font-size: 0.76rem;
}

/* Úzký blok: menší písmo a odsazení i u stylů, které je výše zvětšují. */
@container (max-width: 30rem) {
  [data-style="elegant"] .cms-tgroup-leader {
    padding: 0.75rem 0.85rem;
  }

  [data-style="elegant"] .cms-tgroup-leader__name,
  [data-style="noviny"] .cms-tgroup-leader__name {
    font-size: 1.05rem;
  }

  [data-style="elegant"] .cms-tgroup-leader--large .cms-tgroup-leader__name,
  [data-style="noviny"] .cms-tgroup-leader--large .cms-tgroup-leader__name {
    font-size: 1.3rem;
  }

  [data-style="sport"] .cms-tgroup-leader__role {
    font-size: 0.8rem;
  }

  [data-style="sport"] .cms-tgroup-leader__name {
    font-size: 1.05rem;
  }

  [data-style="sport"] .cms-tgroup-leader--large .cms-tgroup-leader__name {
    font-size: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cms-evcal-card,
  .cms-tgroups__card,
  .cms-evcal-card__arrow {
    transition: none;
  }

  a.cms-evcal-card:hover,
  .cms-tgroups__card:hover {
    transform: none;
  }
}