/* ============================================================
   common.css — CSS úpravy PRODUKČNÍ verze webu (b.vavruska.info)

   Tento soubor existuje JEN v tomto projektu. Ostatní CSS
   (tokens/base/components/responsive/main) se kopírují z layout
   projektu a při aktualizaci se PŘEPISUJÍ — nic do nich nepřidávat,
   všechny produkční odchylky patří sem. Načítá se v inc/head.php
   až PO main.css, takže může přepisovat cokoli.
   ============================================================ */

/* patička: aktivní stránka — trvalé podtržení odkazu */
.footer__link--active::after { transform: scaleX(1); }

/* ------------------------------------------------------------
   Typografie textových stránek (.article__body — obchodní podmínky,
   oblečení…): seznamy a odkazy — v CSS z layoutu nejsou nastylované
   (globální reset ruší odrážky, odkazy nemají podtržení).
   ------------------------------------------------------------ */
.article__body ul,
.article__body ol {
  margin: var(--space-4) 0;
  padding-left: 1.5em;
  font-size: var(--fs-15);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-tight);
  color: color-mix(in srgb, var(--color-primary) 80%, transparent);
}
.article__body ul { list-style: disc; }
.article__body ol { list-style: decimal; }
.article__body ul ul,
.article__body ol ol,
.article__body ul ol,
.article__body ol ul { margin: var(--space-1) 0; }
.article__body ul ul { list-style: circle; }
.article__body li { margin-top: var(--space-1); }
.article__body li::marker { color: var(--color-accent); }

/* odkazy v li — stejný vzor jako odkazy v odstavcích (base.css:
   `p a:not([class])…` — gradientové podtržení + hover animace
   link-underline-swipe: linka odjede doprava a najede zleva).
   Keyframes jsou definované v base.css, tady se jen přebírají. */
.article__body li a:not([class]):not(:has(svg)) {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
}
.article__body li a:not([class]):not(:has(svg)):hover {
  animation: link-underline-swipe 0.6s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .article__body li a:not([class]):not(:has(svg)):hover { animation: none; }
}

/* topmenu: aktivní pod-odkaz v rozbalovacím (desktop) i mobilním menu —
   např. „Lektoři" na /nasi-ucitele/ (hlavní položka O nás je podtržená taky) */
.nav-drop__link.is-active,
.nav__sub-link.is-active {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

/* ------------------------------------------------------------
   Výpisy lektorů (/nasi-ucitele/) a sálů (/tanecni-saly/) — sekce
   .instructors--reveal je hned
   pod hlavičkou stránky (jinde na webu je hluboko ve stránce):

   1. Probarvování pozadí (animace page-bg z components.css) by mělo už
      při načtení nenulový progres → start posunut na contain 0 %
      (= horní hrana sekce dojede k vršku viewportu). Úplně nahoře má
      stránka vždy výchozí béžovou.
   2. Perex v .section-head by byl světlý (bg-dark) na béžové → nečitelný.
      Proto jede na STEJNÉ timeline: začíná v tlumené tmavé a probarvuje se
      do světlé synchronně s pozadím.

   Selektor .article-head + .instructors--reveal sedí jen na tyto výpisy.
   ------------------------------------------------------------ */
/* detail lektora na mobilu: fotka je ořezaná na 4/3 (responsive.css) a výchozí
   object-position center ustřihával hlavy — zobrazovat od horního okraje fotky
   (velikost canvasu beze změny) */
@media (max-width: 1024px) {
  .person-hero__media img {
    object-position: 50% 0;
  }
}

/* rozvrh kurzů (term-row): lektor a sál jsou odkazy, ale v klidu bez
   podtržení; na hover se linka dokreslí zleva (standardní vzor webu —
   stejný gradient jako u textových odkazů) */
.term-row__lectors a,
.term-row__place a,
.course-group__title a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0 1px;
  background-position: 0 100%;
  transition: background-size var(--transition-base);
}
.term-row__lectors a:hover,
.term-row__place a:hover,
.course-group__title a:hover {
  background-size: 100% 1px;
}
@media (prefers-reduced-motion: reduce) {
  .term-row__lectors a,
  .term-row__place a,
  .course-group__title a { transition: none; }
}

/* párové kurzy (dívky/chlapci): tabulkové rozložení — seznam termínů je
   mřížka [termín | dívky | chlapci] a řádky do ní zapadají přes subgrid,
   takže sloupce dívky/chlapci lícují pod sebou přes VŠECHNY řádky.
   Obsah buňky (štítek + tlačítko vedle sebe) je zarovnaný doprava. Aby se
   vedle kódu + dne a času ($__kod_kurzu, mládež) vešel štítek i tlačítko
   na JEDEN řádek, jsou buňky jen v této tabulce kompaktnější (užší
   tlačítka a štítky, menší mezery, menší šipka detailu) — viz níže; na
   šířkách okna pod 1420 px (rozvrh vedle filtru) se to ani tak nevejde,
   tam je štítek nad tlačítkem. */
.term-list:has(.term-row__actions--par) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  column-gap: var(--space-6);
}
.term-list:has(.term-row__actions--par) .term-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) auto auto; /* fallback bez subgridu */
  grid-template-columns: subgrid;
  align-items: center;
}
/* detail kurzu (li.term-detail vkládaný JS pod řádek) musí v mřížce
   párových kurzů zabrat celou šířku, jinak spadne do první buňky */
.term-list:has(.term-row__actions--par) .term-detail {
  grid-column: 1 / -1;
}
.term-row__actions--par {
  flex-direction: row;
  align-items: center;
  justify-content: flex-end; /* v rámci buňky vše doprava */
  gap: var(--space-2);
}
/* kompaktní buňky dívky/chlapci (jen tato tabulka) — ušetří ~80 px na řádek */
@media (min-width: 769px) {
  .term-list:has(.term-row__actions--par) {
    column-gap: var(--space-4);              /* mezera mezi sloupci 24 → 16 px */
  }
  .term-row__actions--par {
    gap: var(--space-1);                     /* štítek | tlačítko 8 → 4 px */
  }
  .term-row__actions--par .btn {
    padding-inline: var(--space-3);          /* tlačítko 20 → 12 px po stranách */
  }
  .term-row__actions--par .tag {
    padding-inline: var(--space-2);          /* štítek 12 → 8 px po stranách */
  }
  .term-row__actions--par .term-row__cta {
    gap: var(--space-2);                     /* tlačítko | šipka 12 → 8 px */
  }
  .term-row__actions--par .btn-arrow {
    width: 2.5rem;                           /* šipka detailu 48 → 40 px */
    height: 2.5rem;
  }
}
/* 769–1419 px: rozvrh vedle filtru — štítek + tlačítko vedle sebe se
   nevejdou ani zkompaktněné → štítek nad tlačítkem (lícuje s jeho levým
   okrajem) */
@media (min-width: 769px) and (max-width: 1419px) {
  .term-row__actions--par {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-2);
  }
}
.term-row__actions--par .tag,
.term-row__actions--par .btn {
  white-space: nowrap; /* štítek stavu ani tlačítko se nezalamují do víc řádků */
}
/* mobil: buňky pod sebou (štítek vlevo, tlačítko vpravo); šipka detailu
   kurzu na VLASTNÍM řádku jako široká pilulka přes celou šířku — vedle
   štítku a tlačítka chlapců se nevešla */
@media (max-width: 768px) {
  .term-list:has(.term-row__actions--par),
  .term-list:has(.term-row__actions--par) .term-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .term-row__actions--par .term-row__cta {
    display: contents;            /* tlačítko i šipka jsou přímo položkami buňky */
  }
  .term-row__actions--par .term-row__cta .btn {
    margin-left: auto;            /* tlačítko doprava, štítek zůstává vlevo */
  }
  .term-row__actions--par .btn-arrow--down {
    flex: 0 0 100%;               /* zalomí se na vlastní řádek… */
    width: 100%;                  /* …a roztáhne přes celou šířku */
    margin-top: var(--space-2);
  }
}

/* zelený štítek „Volno" v rozvrhu (design zelenou nemá — doplněná);
   velikost písma shodná s ostatními stavovými štítky */
.tag--volno {
  background: #e3f2e6;
  color: #1e6b34;
  font-size: var(--fs-13);
}

/* rozbalovací text v hero kurzu (course-hero__extra) — obsahuje i nadpisy
   z převzatých textů starého webu; v úzkém sloupci je zmenšit na úroveň H4 */
.course-hero__extra h2,
.course-hero__extra h3,
.course-hero__extra h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  margin: var(--space-6) 0 var(--space-2);
}
.course-hero__extra p + p { margin-top: var(--space-3); }

/* na výpisových stránkách (lektoři, sály) zobrazit na mobilu VŠECHNY karty —
   pravidlo „max 6 lektorů" z responsive.css platí jen pro sekce na
   homepage / O nás */
@media (max-width: 768px) {
  .article-head + .instructors .instructors__grid .instructor:nth-child(n + 7) {
    display: revert;
  }
}

@supports (animation-timeline: view()) {
  .page-body:has(.article-head + .instructors--reveal) {
    animation-range: contain 0% cover 100%;
  }
  .article-head + .instructors--reveal .section-head__sub {
    animation: lektori-sub-color linear both;
    animation-timeline: --lektori-view;
    animation-range: contain 0% cover 100%;
  }
  @keyframes lektori-sub-color {
    0%   { color: var(--color-text-muted); }
    35%  { color: var(--color-text-on-dark-muted); }
    100% { color: var(--color-text-on-dark-muted); }
  }
}

/* ==========================================================================
   Tělo článku — široká varianta (.article__body.wide)
   Šířka 70.375rem (1126px) = stejná jako .video-grid / .video-card--hero,
   aby např. ceníková tabulka lícovala s mřížkou videí na téže stránce.
   ========================================================================== */
.article__body.wide {
  max-width: calc(70.375rem + 2 * var(--container-pad));
}

/* ==========================================================================
   Video karty — YouTube v kartě (js/common.js)
   .video-card__media[data-youtube="ID"]: vlastní obrázek náhledu + play,
   klik vymění náhled za iframe YouTube (youtube-nocookie, autoplay).
   .video-card__media--embed: bez obrázku — iframe s videem je v kartě
   vložený rovnou (markup stránky, viz kurzy/tanecni-pro-mladez/page.php).
   ========================================================================== */
.video-card__media[data-youtube] { cursor: pointer; }
.video-card__media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.video-card__media.is-playing .play-btn,
.video-card__media.is-playing img { display: none; }

/* ==========================================================================
   Jedno velké video (komponenta #layout/inc/videa.php, 'velke' => true)
   .video-card--hero má v components.css šířku 70.375rem = stejnou jako mřížka
   videí; samotné video by tak na desktopu zabralo celou šířku obsahu. Tady
   dostane rozumný strop (50rem = 800 px při základní velikosti písma, roste
   s designem jako zbytek layoutu) a drží se na střed. Poměr stran srovnán
   na 16:9 kvůli YouTube.
   ========================================================================== */
.sylabus .video-card--hero {
  max-width: 50rem;
}
.sylabus .video-card--hero .video-card__media {
  aspect-ratio: 16 / 9;
}

/* ==========================================================================
   Video karty jako mobilní carousel (.sylabus--carousel, js/common.js)
   Na ≤768 px jedna karta přes celou šířku, tah + tečky, bez autoplay;
   nad 768 px zůstává mřížka .video-grid a tečky jsou schované.
   Stejný princip jako .features--carousel (responsive.css + app.js sekce 21).
   ========================================================================== */
.sylabus--carousel .slider-dots { display: none; }
@media (max-width: 768px) {
  .sylabus--carousel .video-grid__viewport {
    position: relative;
    overflow: hidden;
  }
  .sylabus--carousel .video-grid {
    display: flex;
    gap: var(--space-6);
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
    transition: transform 0.55s cubic-bezier(0.25, 0.6, 0.3, 1);
  }
  .sylabus--carousel .video-grid.is-dragging {
    transition: none;
    cursor: grabbing;
  }
  .sylabus--carousel .video-card {
    flex: 0 0 100%;
    border-bottom: 0;
    padding-bottom: 0;
  }
  .sylabus--carousel .slider-dots { display: flex; }
}

/* ==========================================================================
   Detail kurzu v rozvrhu (AJAX, #action/ajax.kurz.php + js/common.js)
   Doplňky k .term-detail z components.css: chybová hláška bez spinneru,
   adresa + odkaz na sál, rozpis lekcí (<details>) pod fotkou sálu,
   tlačítka přihlášky (u párových kurzů dvě: dívky / chlapci).
   ========================================================================== */
.term-detail__loader--error::before { display: none; }
.term-detail__place-adresa {
  font-size: var(--fs-14);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.term-detail__place-adresa strong { display: inline; margin: 0; }
.term-detail__place-link {
  font-size: var(--fs-14);
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.term-detail__lekce {
  max-width: 25.3rem;   /* zarovnáno s fotkou sálu */
  margin-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-14);
}
.term-detail__lekce-toggle {
  cursor: pointer;
  padding-block: var(--space-4);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.term-detail__lekce-toggle::-webkit-details-marker { display: none; }
.term-detail__lekce-toggle::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.3px solid currentColor;
  border-bottom: 1.3px solid currentColor;
  rotate: 45deg;
  transition: rotate var(--transition-base);
}
.term-detail__lekce[open] .term-detail__lekce-toggle::after { rotate: 225deg; }
.term-detail__lekce-list {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.term-detail__lekce-list li {
  display: grid;
  grid-template-columns: 1.75rem 7.5rem 6rem 1fr;
  gap: var(--space-3);
  align-items: baseline;
  color: var(--color-text-muted);
}
.term-detail__lekce-n,
.term-detail__lekce-datum { color: var(--color-primary); }
.term-detail__lekce-nazev:empty { display: none; }
.term-detail__order-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.term-detail__order-row .term-detail__order { flex: 1 1 12rem; width: auto; }
@media (max-width: 768px) {
  .term-detail__lekce-list li {
    grid-template-columns: 1.5rem 1fr;
  }
  .term-detail__lekce-cas,
  .term-detail__lekce-nazev { grid-column: 2; }
}

/* ==========================================================================
   Termíny akcí (#layout/inc/terminy.php + js/common.js sekce 4)
   Doplňky k .events / .event-row z components.css: skryté řádky (limit,
   filtr), rozbalovací popis (li.event-detail), stav vstupenek před prodejem.
   ========================================================================== */
[data-terminy] [hidden] { display: none !important; }   /* .event-row je flex — hidden atribut by ho nepřebil */
.event-detail {
  overflow: clip;
  block-size: 0;
  opacity: 0;
  transition: block-size 0.5s cubic-bezier(0.25, 0.6, 0.3, 1), opacity 0.35s ease;
}
.event-detail.is-open {
  block-size: auto;
  opacity: 1;
}
.event-detail__inner {
  padding: var(--space-2) 0 var(--space-6);
  max-width: 42rem;
  font-size: var(--fs-15);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}
.event-row--open .event-row__toggle svg { rotate: 45deg; }   /* plus → křížek */
.event-row__buy {
  position: relative;   /* poznámka „Prodej od…" visí pod tlačítkem, tlačítko zůstává na ose řádku */
  display: inline-flex;
}
.event-row__buy .btn--disabled { pointer-events: none; }
.event-row__note {
  position: absolute;
  top: 100%;
  left: 50%;
  translate: -50% 0.125rem;
  font-size: var(--fs-13);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.events__more--rozbalit { cursor: pointer; }
@media (max-width: 768px) {
  /* na mobilu jsou tlačítka pod sebou v řádku — poznámka o prodeji jde do toku pod tlačítko */
  .event-row__buy { flex-direction: column; align-items: center; gap: 0.125rem; }
  .event-row__note { position: static; translate: none; }
}

/* ==========================================================================
   Klientské sekce (videosylabus, nahrazování lekcí) — přihlášení heslem
   (.klient-login), stav přihlášení (.klient-status), alert nad obsahem
   ========================================================================== */
.sylabus--uvod .article__perex--sm { margin-bottom: var(--space-10); }
.klient-alert { max-width: 41.875rem; margin: 0 auto var(--space-8); }
.klient-login {
  max-width: 41.875rem;
  margin: 0 auto;
  padding: var(--space-10) var(--space-10) var(--space-8);
  background: var(--color-surface);
  border-radius: var(--radius-photo);
}
.klient-login__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-light);
  line-height: var(--lh-h3);
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}
.klient-login__text,
.klient-login__note {
  font-size: var(--fs-15);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}
.klient-login__form {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
  margin-block: var(--space-6);
}
.klient-login__form .form-field { flex: 1 1 auto; margin: 0; }
.klient-login__form .btn { flex: none; }
.klient-login__note { font-size: var(--fs-13); }
.klient-status {
  max-width: 70.375rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding: var(--space-6) var(--space-8);
  background: var(--color-surface);
  border-radius: var(--radius-card);
}
.klient-status__text {
  font-size: var(--fs-15);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}
.klient-status__text strong { color: var(--color-primary); font-weight: var(--fw-medium); }
.klient-status__actions { flex: none; display: flex; align-items: center; gap: var(--space-3); }
.klient-status form { flex: none; }
/* sekce videosylabu pod sebou — menší mezery než u samostatné stránky */
.sylabus--uvod + .sylabus,
.sylabus + .sylabus { padding-top: 0; }
@media (max-width: 768px) {
  .klient-login { padding: var(--space-8) var(--space-6); }
  .klient-login__form { flex-direction: column; align-items: stretch; }
  .klient-status { flex-direction: column; align-items: flex-start; }
  .klient-status__actions { flex-wrap: wrap; }
}

/* ==========================================================================
   Nahrazování lekcí (/nahrazovani/) — karta s rozvrhem lekcí, návod,
   výběr náhradního termínu (filtr skupin úrovní)
   ========================================================================== */
.nahrazovani { padding-top: 0; }
.nahrazovani__card { max-width: 70.375rem; margin: 0 auto; }
.nahrazovani__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.nahrazovani__head .listing__title { margin-bottom: 0; }
.nahrazovani__navod {
  margin: var(--space-6) 0 var(--space-8);
  padding: var(--space-6) var(--space-8);
  background: var(--color-bg);
  border-radius: var(--radius-card);
  font-size: var(--fs-15);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}
.nahrazovani__navod p + p,
.nahrazovani__navod ul + p { margin-top: var(--space-3); }
.nahrazovani__navod strong { color: var(--color-primary); font-weight: var(--fw-medium); }
.nahrazovani__navod-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: var(--fw-light);
  line-height: var(--lh-h4);
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}
.nahrazovani__kroky {
  margin: var(--space-2) 0 var(--space-4) var(--space-5);
  padding: 0;
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.nahrazovani__kroky li::marker { color: var(--color-accent); font-weight: var(--fw-medium); }
ol.nahrazovani__kroky { list-style: decimal; }
.nahrazovani__upozorneni { padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.nahrazovani .checkout-alert { margin-bottom: var(--space-4); }
.term-row--static { cursor: default; }
.nahrazovani__lekce .term-row__when { width: 12.5rem; }
.nahrazovani__lekce--odhlasena .term-row__time,
.nahrazovani__lekce--odhlasena .term-row__lectors { text-decoration: line-through; opacity: 0.6; }
.nahrazovani__lekce .term-row__cta form { display: contents; }
.nahrazovani__filtr { margin-bottom: var(--space-6); }
.nahrazovani__skupina[hidden] { display: none; }
@media (max-width: 768px) {
  .nahrazovani__navod { padding: var(--space-5); }
  .nahrazovani__lekce .term-row__when { width: auto; }
}
/* sekce videí s nadpisem <h2> (videa.php, nadpis_uroven 2) — menší než h1 stránky */
.sylabus h2.page-head__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-light);
  line-height: var(--lh-h2);
  letter-spacing: normal;
}
/* varianty alertů (seznamka, videosylabus, nahrazování) — základ je v components.css */
.checkout-alert--success { background: color-mix(in srgb, var(--color-petrolejova) 10%, transparent); color: var(--color-petrolejova); }
.checkout-alert--danger { background: color-mix(in srgb, var(--color-accent) 14%, transparent); }
.checkout-alert--warning { background: color-mix(in srgb, var(--color-oranzova) 8%, var(--color-pudrova)); }

/* ==========================================================================
   Souhlas ve formulářích (.form-consent) — oprava HTML5 validace
   components.css skrývá checkbox přes width/height 0 → prohlížeč nemá kam
   umístit hlášku „Zaškrtněte toto pole" a required formulář se TIŠE neodešle
   („invalid form control is not focusable"). Checkbox necháme neviditelný,
   ale v místě tečky a fokusovatelný — validace pak funguje jako u inputů.
   ========================================================================== */
.form-consent { position: relative; }
.form-consent__input {
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  width: 0.875rem;
  height: 0.875rem;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.form-consent__input:focus-visible + .form-consent__dot {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
/* po pokusu o odeslání bez souhlasu se tečka zvýrazní (doplněk k nativní hlášce) */
.form-consent__input:user-invalid + .form-consent__dot {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 25%, transparent);
}

/* ==========================================================================
   Potvrzení objednávky voucheru (/vouchery/potvrzeni/) — doplňky ke kartám
   poděkování (.thanks-card z components.css): texty, tlačítka, platební údaje
   ========================================================================== */
.thanks-card__text {
  font-size: var(--fs-15);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  max-width: 34rem;
  margin-inline: auto;
}
.thanks-card__text + .thanks-card__text { margin-top: var(--space-3); }
.thanks-card__actions { margin-block: var(--space-5); }
.thanks-card__subtitle {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: var(--fw-light);
  line-height: var(--lh-h4);
  color: var(--color-primary);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}
.thanks-card__udaje {
  list-style: none;
  max-width: 24rem;
  margin: 0 auto var(--space-4);
  padding: 0;
  text-align: left;
}
.thanks-card__udaje li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-15);
}
.thanks-card__udaje li:last-child { border-bottom: 0; }
.thanks-card__udaje span { color: var(--color-text-muted); }
.thanks-card__udaje strong { font-weight: var(--fw-medium); color: var(--color-primary); }
.thanks-card__note {
  font-size: var(--fs-13);
  color: var(--color-text-muted);
  max-width: 30rem;
  margin-inline: auto;
}
.thanks__flow .thanks-card + .thanks-card { margin-top: var(--space-4); }
.thanks__flow .info-bar + .thanks-card { margin-top: var(--space-4); }   /* Co bude dál? odsazená od pruhu nad ní */
.thanks .thanks__flow { padding-bottom: var(--space-16); }   /* odsazení poslední karty od pruhu hodnot (thanks má padding-bottom 0) */
.thanks-card__prevod {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-10);
  margin-block: var(--space-2) var(--space-4);
}
.thanks-card__prevod .thanks-card__udaje { margin: 0; flex: 0 1 24rem; }
.thanks-card__qr {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}
@media (max-width: 768px) {
  .thanks-card__prevod { flex-direction: column; gap: var(--space-5); }
  .thanks-card__prevod .thanks-card__udaje { flex: 1 1 auto; width: 100%; }
}
.thanks-card__qr img {
  width: 11.25rem;
  height: 11.25rem;
  border-radius: 0.75rem;
  background: var(--color-bila);
  padding: var(--space-2);
  border: 1px solid var(--color-border);
}
.thanks-card__qr figcaption {
  font-size: var(--fs-13);
  color: var(--color-text-muted);
}
/* textové karty (pokyny, poukaz) — menší mezery než karta s kroky */
.thanks-card--text { gap: var(--space-2); }

/* ==========================================================================
   Přihláška do kurzu (kurzy/@prihlaska) — doplňky k checkout stylům
   z components.css: alert nad formulářem, rozbalený blok studentské slevy,
   stránka „kurz obsazen"
   ========================================================================== */
.checkout__alert-top { max-width: 41.875rem; margin: 0 auto var(--space-8); }
.checkout-form__sleva {
  padding: var(--space-4) var(--space-5);
  background: color-mix(in srgb, var(--color-bezova) 60%, var(--color-bila));
  border-radius: var(--radius-field);
}
.checkout-form__sleva[hidden] { display: none; }
.checkout-form__note {
  font-size: var(--fs-13);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}
.checkout__inner--plno { grid-template-columns: 1fr; max-width: 44rem; margin-inline: auto; }
.checkout-plno__text {
  font-size: var(--fs-15);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.checkout-plno__text strong { color: var(--color-primary); font-weight: var(--fw-medium); }
.order-card__row[hidden] { display: none; }   /* řádek slevy skrytý, dokud sleva není (row je flex) */

/* vstupenky: skryté řádky za limitem „Načíst další" (.ticket-row je flex/grid) */
.tickets__rows > [hidden] { display: none !important; }

/* ==========================================================================
   Vstupenky — detail akce (výběr míst v plánku, vstupenky na stání)
   a pokladna (www/vstupenky/akce/ + js/common.js sekce 8)
   ========================================================================== */
.tickets-detail .page-head { margin-bottom: var(--space-6); }
.tickets-detail__card { max-width: 70.375rem; margin: 0 auto; }
.tickets-detail__navod { margin-top: var(--space-6); }
.tickets-detail__stani {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.tickets-detail__stani-nazev { flex: 1 1 16rem; font-weight: var(--fw-medium); color: var(--color-primary); }
.tickets-detail__stani-stav { color: var(--color-text-muted); }
.tickets-detail__pocet { display: inline-flex; align-items: center; gap: var(--space-2); }
.tickets-detail__pocet .btn-arrow { font-size: 1.25rem; line-height: 1; }
.tickets-detail__input { width: 4.5rem; text-align: center; height: 2.75rem; }
.tickets-detail__cena { font-size: var(--fs-14); color: var(--color-text-muted); }
.tickets-detail__plan-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: var(--fw-light);
  color: var(--color-primary);
  margin: var(--space-8) 0 var(--space-4);
}
#akce-plan-wrap { overflow-x: auto; }
#akce-plan {
  position: relative;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-radius: 0.5rem;
}
#akce-plan .misto {
  position: absolute;
  width: 12px;
  cursor: pointer;
  background: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 2px;
}
#akce-plan .misto::before { content: ""; display: block; margin-top: 100%; }
#akce-plan .misto.available { background: #2e7d32; border-color: #1b5e20; }
#akce-plan .misto.selected { background: #e8871e; border-color: #a85f12; }
#akce-plan .misto.taken { background: #c62828; border-color: #8e1b1b; cursor: not-allowed; }
#akce-plan .misto:hover { border-color: var(--color-primary); }
#akce-plan .misto > input { display: none; }
#akce-plan.wait, #akce-plan.wait .misto { cursor: wait; }
.tickets-detail__submit { margin-top: var(--space-8); text-align: center; }
.tickets-detail__submit .btn[disabled] { opacity: 0.45; pointer-events: none; }
.tickets-detail__zpet { text-align: center; margin-top: var(--space-6); font-size: var(--fs-15); color: var(--color-text-muted); }
.tickets-detail__zpet a { text-decoration: underline; text-underline-offset: 0.2em; }

/* plovoucí odpočet rezervace */
.rezervace-odpocet {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 9.5rem;
  padding: 0.875rem 1.375rem;
  background: var(--color-primary);
  color: var(--color-bezova);
  border-radius: var(--radius-card);
  box-shadow: 0 0.5rem 1.5rem rgba(80, 25, 45, 0.35);
  text-align: center;
}
.rezervace-odpocet__label { font-size: var(--fs-13); text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.85; }
.rezervace-odpocet__cas { font-family: var(--font-heading); font-size: 2.25rem; font-weight: var(--fw-light); line-height: 1; letter-spacing: 0.05em; }
.rezervace-odpocet__souhrn { font-size: var(--fs-13); opacity: 0.85; }
.rezervace-odpocet__souhrn:empty { display: none; }
.rezervace-odpocet--urgent { background: var(--color-accent); color: var(--color-bila); animation: odpocet-pulz 0.6s ease-in-out infinite alternate; }
@keyframes odpocet-pulz { from { transform: scale(1); } to { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .rezervace-odpocet--urgent { animation: none; } }

/* pokladna vstupenek: rekapitulace v souhrnu */
.order-card__zpet { margin-top: var(--space-4); text-align: center; font-size: var(--fs-14); }
.order-card__zpet a { text-decoration: underline; text-underline-offset: 0.2em; }
.form-field__note-inline { font-weight: var(--fw-regular); color: var(--color-text-muted); }
.checkout-form__note--center { text-align: center; margin-top: var(--space-3); max-width: 30rem; margin-inline: auto; }

/* ==========================================================================
   Newsletter (patička + info karty) — hláška po odeslání (#action/newsletter.php)
   ========================================================================== */
.footer__note--alert { font-weight: var(--fw-medium); }
.footer__note--success { color: #8fd6b8; }   /* na tmavé patičce světle petrolejová */
.footer__note--danger { color: #f5a08c; }    /* na tmavé patičce světle oranžová */
/* hláška newsletteru u info karet (mimo patičku) */
.newsletter-note { margin-top: var(--space-3); font-size: var(--fs-14); font-weight: var(--fw-medium); }
.newsletter-note--success { color: var(--color-petrolejova); }
.newsletter-note--danger { color: var(--color-accent); }

/* ==========================================================================
   Rozvrh lekcí mládeže (/rozvrh-lekci-mladez/) — karty PDF / kalendář
   ========================================================================== */
.rozpis-volby {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  max-width: 44rem;
  margin: 0 auto;
}
.rozpis-volba {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-6);
  background: var(--color-surface);
  border-radius: var(--radius-photo);
  text-align: center;
  color: var(--color-primary);
  transition: transform 250ms ease, box-shadow 250ms ease;
}
.rozpis-volba:hover { transform: translateY(-3px); box-shadow: 0 0.75rem 2rem rgba(80, 25, 45, 0.12); }
.rozpis-volba__ikona { width: 3rem; height: 3rem; color: var(--color-accent); }
.rozpis-volba__ikona svg { width: 100%; height: 100%; }
.rozpis-volba__nazev { font-family: var(--font-heading); font-size: var(--fs-h4); font-weight: var(--fw-light); line-height: var(--lh-h4); }
.rozpis-volba__popis { font-size: var(--fs-14); color: var(--color-text-muted); }
@media (max-width: 768px) {
  .rozpis-volby { grid-template-columns: 1fr; }
}
/* rozvrh bez filtru úrovní (děti, semináře, klub) — skupiny přes celou šířku */
.schedule__layout--bez-filtru { grid-template-columns: 1fr; }

/* ==========================================================================
   Video v hero sálu (tanecni-saly/sal) — mechanika .media-video z kurzů
   (app.js sekce 20), ale fotka .venue-hero__bg je absolutní pozadí banneru
   (media-video počítá s relativní fotkou) → přepisy pro tenhle kontext
   ========================================================================== */
.venue-hero__banner.media-video .venue-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.venue-hero__banner.media-video .venue-hero__bg {
  position: absolute;   /* media-video img by ji přepnulo na relative */
  inset: 0;
  z-index: 1;
  transition: opacity 0.5s ease;
}
.venue-hero__banner.media-video.is-playing .venue-hero__bg { opacity: 0; }
/* obsah hero (drobečky, titulek, tlačítko, šipka) nad videem i fotkou */
.venue-hero__banner.media-video .breadcrumbs--overlay,
.venue-hero__banner.media-video .venue-hero__content,
.venue-hero__banner.media-video .venue-hero__scroll { z-index: 2; }

/* ==========================================================================
   Taneční sály (/tanecni-saly/) — karty sálů „Kde učíme" bez carouselu:
   všechny karty ve statické mřížce (3 sloupce, tablet 2, mobil 1 = pod sebou).
   Karta .venue-card je 1:1 z components.css (kontakty), jen seznam má vlastní
   třídu, aby ho nepřevzal carousel z app.js (sekce 17 hledá .venues-cards__grid).
   Hlavička sekce bez šipek: intro drží jen text.
   ========================================================================== */
.venues-cards__seznam {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}
@media (max-width: 1024px) {
  .venues-cards__seznam { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .venues-cards__seznam { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Kód kurzu ve výpisu rozvrhu ($__kod_kurzu = true v page.php — mládež):
   řádek „M01 neděle 16.00 - 17.40" se nezalamuje. Sloupec času má
   v components.css pevnou šířku 10.5rem, s kódem se místo toho přizpůsobí
   obsahu (v mřížce párových kurzů vyplní svůj sloupec).
   ========================================================================== */
.term-row__when:has(.term-row__kod) {
  width: auto;
  min-width: 10.5rem;
}
.term-row__when:has(.term-row__kod) .term-row__time {
  white-space: nowrap;
}
@media (min-width: 769px) and (max-width: 1180px) {
  /* menší desktop/tablet: mřížka párových kurzů [čas | dívky | chlapci]
     vedle filtru je těsná (sloupec času pod ~180 px), nezalomený text by
     přetekl do sloupce dívky → tady se radši zalomí jako dřív */
  .term-list:has(.term-row__actions--par) .term-row__when:has(.term-row__kod) .term-row__time {
    white-space: normal;
  }
  /* …a sloupec času se smí zúžit pod 10.5rem (jinak by přetekl do štítku) */
  .term-list:has(.term-row__actions--par) .term-row__when:has(.term-row__kod) {
    min-width: 0;
  }
}
@media (max-width: 768px) {
  /* na mobilu jsou čas a datum vedle sebe — když se nevejdou, jde datum
     na další řádek; kód s časem zůstává vcelku */
  .term-row__when:has(.term-row__kod) {
    min-width: 0;
    flex-wrap: wrap;
  }
}

/* ==========================================================================
   Tabulky v článcích (.article-table — ceny kurzů, vouchery): poslední
   sloupec NENÍ zvýrazněný. components.css ho má tučně a fíkově (jako
   sloupec s cenou), tady dostane stejný styl jako ostatní buňky; zarovnání
   doprava zůstává. :not(:first-child) chrání jednosloupcové tabulky
   (první sloupec zůstává tučný).
   ========================================================================== */
.article-table td:last-child:not(:first-child) {
  font-weight: var(--fw-regular);
  color: color-mix(in srgb, var(--color-primary) 80%, transparent);
}

/* Klikatelné karty sálů (/tanecni-saly/ i carousel na /kontakty/,
   common.js sekce 10): fotka má stejný hover zoom jako karty kurzů
   a lektorů (components.css „Jednotný hover-zoom") — signál, že karta je
   celá klikatelná. Kurzor pointer dává .card-clickable z components.css
   (v carouselu přebíjí grab z .venues-cards__grid — mezery mezi kartami
   grab zůstávají, tažení funguje dál). */
.venues-cards .venue-card__img {
  transition: scale 0.6s cubic-bezier(0.25, 0.6, 0.3, 1);
}
@media (hover: hover) {
  .venues-cards .venue-card.card-clickable:hover .venue-card__img {
    scale: 1.05;
  }
}

/* ==========================================================================
   Karta newsletteru (#layout/inc/newsletter-karta.php): formulář je sloupec
   — pilulka s polem (.info-card__form z components.css) a pod ní hláška
   po odeslání (.newsletter-note z common.js sekce 9). Na kurzových
   stránkách je formulář schovaný, dokud se neklikne na „Chci upozornění"
   (common.js sekce 11); [hidden] musí přebít display: flex.
   ========================================================================== */
.info-card__newsletter {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.info-card__newsletter[hidden],
.js-newsletter-odkryt[hidden] { display: none; }   /* .btn má display: inline-flex, [hidden] by neplatilo */
.info-card__newsletter .newsletter-note { text-align: center; }

/* Vstupenky — karta akce s reálnou fotkou z adminu (pozvánka 830×370 má
   název, čas i místo v obrázku): překryvný název a datum se nevypisují,
   datum je v kartě v poli „Den". Stylizovaný obrázek (bez fota) zůstává
   s překryvem. */
.ticket-row__media--foto {
  background: var(--color-bezova);
}

/* ==========================================================================
   Kontakt na užších obrazovkách. Hero má na desktopu dva sloupce a fotka
   asistentky pevných 669 px (41.8rem), takže při 1025–1300 px zbývá textu
   jen 280–480 px a rámeček s tlačítkem i kontakty se zmáčknou; při ≤1024 px
   by fotka v jednom sloupci zabrala celou šířku (hero přes 1400 px).
   → do 1200 px hero v jednom sloupci BEZ fotek (zůstávají jen informace),
     kontakty ve 4 sloupcích; při 1201–1380 px fotka užší (40 % šířky);
     tlačítko „Nejčastější dotazy" jde pod text, kdykoli je sloupec užší
     než rámeček (container query; na mobilu ≤768 platí centrovaná varianta
     z responsive.css).
   ========================================================================== */
@media (max-width: 1200px) {
  .contact-hero .course-hero__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .contact-hero .course-hero__col { padding-left: 0; }
  .contact-hero .course-hero__media,   /* fotka asistentky v hero */
  .contact-person__photo {             /* fotka Lucy v kartě formuláře */
    display: none;
  }
}
@media (min-width: 769px) and (max-width: 1200px) {
  .contact-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6) var(--space-5);
  }
}
@media (min-width: 1201px) and (max-width: 1380px) {
  .contact-hero .course-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 40%);
    gap: var(--space-10);
  }
}
.contact-hero .course-hero__col { container-type: inline-size; }
@media (min-width: 769px) {
  @container (max-width: 30rem) {
    .contact-hint {
      flex-direction: column;
      align-items: flex-start;
    }
  }
}

ol[type=a] { list-style: lower-alpha}