/* =====================================================================
   BEPOR.eu – DETAIL ŠKOLENÍ / BALÍČKU: informační sekce pod horní kartou
   Layout varianty C („Přehledná příručka se sticky obsahem“)
   Zdroj návrhu: navrhy/varianty/c-sticky-toc

   Načítá se jen na detailu – BaseLoad() v web/edu/EDU_DETAIL.ascx
   a web/edu/BALICEK_EDU_DETAIL.ascx – vždy AŽ ZA main.css.

   Kořen:      <div class="sd"> na začátku obsahu
               web/edu/skoleni-obsah/<KÓD>.ascx (balíčky: balicek-obsah/).
               Wrapper #popisSkoleni / #popisBalicku drží šablona detailu.
   Ikony:      SVG sprite (symboly sd-i-*) je JEDNOU v šabloně detailu.
   JS:         /js/skoleni-detail.js – zvýraznění aktuální části v obsahu.
   Prefix:     .sd-   (BEM: .sd-blok__prvek--modifikator)
   Tokeny:     custom properties na .sd (ne na :root) – --sd-*
               Mimo .sd jsou jen kotvy šablon detailu (sekce 24).
   Breakpointy (mobile-first): 576 / 768 / 992 / 1200 px
               + 681 / 1301 px = přepnutí fixní hlavičky webu (navbar.css)
   Mřížka mezer: 4 / 8 / 12 / 16 / 24 / 32 / 40 / 48 / 64 px

   Sekce musí přežít globální styly webu (typography.css, navbar.css,
   buttons.css). Viz blok 01 „Ochranný reset“ – NEMAZAT.

   Obsah:
     00  Tokeny
     01  Ochranný reset (proti globálním stylům webu)
     02  Ikony + utility
     03  Úvod (H1, perex, pruh „Ve zkratce“)
     04  Rozvržení (2 sloupce od 992 px)
     05  Obsah / TOC (mobil = sticky lišta čipů, desktop = sticky panel)
     06  Blok (H2 skupiny otázek)
     07  Karta otázky (H3 + stručná odpověď)
     08  Seznamy s ikonami (check / cross)
     09  Témata (číslovaná mřížka)
     10  Upozornění (callout) + citace + „Zobrazit podrobnosti“
     11  Poznámka (nápověda / kontakt)
     12  Četnost (velká čísla)
     13  Předpisy (referenční seznam)
     14  Dlaždice (dokumenty, fakta, doklady)
     15  Kroky (postup online školení)
     16  Meta řádky (drobné doplňky pod komponentou)
     17  Štítky
     18  Varianty (A nebo B)
     19  Média (seznam + obrázek)
     20  Lidé (odborní garanti)
     21  Tlačítka
     22  Závěrečný panel (CTA)
     23  Přístupnost, pohyb, tisk
     24  Napojení na šablony detailu (kotvy mimo .sd)
   ===================================================================== */


/* =====================================================================
   00  TOKENY
   ===================================================================== */

.sd {
  /* Barvy – navazují na landing pages (landing-pages.css) + brand webu */
  --sd-navy: #17324d;            /* nadpisy, aktivní stavy */
  --sd-text: #22384f;            /* běžný text (14,5:1 na bílé) */
  --sd-text-muted: #5b6b7e;      /* sekundární text (5,4:1 na bílé) */
  --sd-text-on-dark: #c7d3e1;    /* text na navy (8,6:1) */
  --sd-primary: #5588d4;         /* brand modrá webu – JEN ikony, linky, rámečky (3,5:1) */
  --sd-blue: #2f6bd0;            /* modrá pro text a tlačítka (5,1:1 na bílé) */
  --sd-blue-700: #24569f;        /* hover */
  --sd-blue-100: #dde8f8;
  --sd-blue-50: #edf3fc;
  --sd-green: #23884f;
  --sd-green-text: #1d7444;      /* 5,7:1 na bílé */
  --sd-green-50: #e8f5ed;
  --sd-red: #cf4034;
  --sd-red-text: #b5342a;        /* 6:1 na bílé */
  --sd-red-50: #fcecea;
  --sd-amber-text: #8a5300;
  --sd-amber-50: #fff4e0;
  --sd-bg: #ffffff;
  --sd-bg-muted: #f5f7fa;
  --sd-page: #fafafa;            /* = pozadí body webu */
  --sd-border: #e3e8ef;
  --sd-border-strong: #cfd8e3;
  --sd-focus: #2f6bd0;

  /* Tvar */
  --sd-radius-sm: 8px;
  --sd-radius: 12px;
  --sd-radius-lg: 16px;
  --sd-radius-xl: 20px;          /* = .card webu */
  --sd-shadow: 0 1px 2px rgba(16, 38, 59, .04), 0 6px 20px rgba(16, 38, 59, .06);
  --sd-shadow-lg: 0 2px 6px rgba(16, 38, 59, .05), 0 24px 48px rgba(16, 38, 59, .12);

  /* Mezery (8px škála) */
  --sd-s1: 4px;
  --sd-s2: 8px;
  --sd-s3: 12px;
  --sd-s4: 16px;
  --sd-s5: 24px;
  --sd-s6: 32px;
  --sd-s7: 40px;
  --sd-s8: 48px;
  --sd-s9: 64px;

  /* Rozvržení */
  --sd-card-pad: 20px;
  --sd-toc-w: 220px;
  --sd-gap: 32px;

  /* Sticky – výška fixní hlavičky webu (navbar.css):
     ≤680 px = 64 px fixní, 681–1300 px = 86 px fixní, ≥1301 px = statická (0) */
  --sd-header-h: 64px;
  --sd-tocbar-h: 60px;           /* výška mobilní lišty čipů */
  --sd-scroll-offset: calc(var(--sd-header-h) + var(--sd-tocbar-h) + 16px);

  /* Základ sekce */
  position: relative;
  margin: 0 0 var(--sd-s9);
  color: var(--sd-text);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-margin-top: calc(var(--sd-header-h) + 16px);
}

@media (min-width: 576px) {
  .sd { --sd-card-pad: 24px; }
}

@media (min-width: 681px) {
  .sd { --sd-header-h: 86px; }
}

@media (min-width: 992px) {
  .sd { --sd-scroll-offset: calc(var(--sd-header-h) + 24px); }
}

@media (min-width: 1200px) {
  .sd {
    --sd-card-pad: 32px;
    --sd-toc-w: 248px;
    --sd-gap: 48px;
  }
}

@media (min-width: 1301px) {
  .sd { --sd-header-h: 0px; }
}


/* =====================================================================
   01  OCHRANNÝ RESET – neutralizace globálních stylů webu
   ---------------------------------------------------------------------
   typography.css nastavuje `color` PŘÍMO na div / li / a (ne dědičně),
   a { font-size:16px; letter-spacing }, p { margin }, ul { padding-left },
   li::before { šipka MDI }, a:hover { outline:none !important; border:none }.
   navbar.css: nav { margin-top:40px; height:86px; ≤1300 px position:fixed }.
   :where() má nulovou specifitu → `.sd :where(div)` = (0,1,0) přebije
   `div` (0,0,1), ale každá třída komponenty (deklarovaná níže) přebije reset.
   ===================================================================== */

.sd *,
.sd *::before,
.sd *::after {
  box-sizing: border-box;
}

/* Obnovení dědičnosti barvy uvnitř sekce */
.sd :where(div, li, a, span, strong, b, em, p, summary, blockquote, cite, figcaption, small) {
  color: inherit;
}

.sd :where(a) {
  font-size: inherit;
  letter-spacing: inherit;
  text-decoration: none;
}

/* a:hover webu (0,1,1) – stejná specifita, ale pozdější pořadí vyhrává.
   Každá odkazová komponenta navíc definuje vlastní :hover (0,2,0). */
.sd a:where(:hover, :focus-visible, :active) {
  color: inherit;
}

.sd :where(h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, dl, dd) {
  margin: 0;
  padding: 0;
}

.sd :where(ul, ol) {
  list-style: none;
}

.sd :where(li) {
  font-size: inherit;
}

.sd :where(strong, b) {
  font-weight: 600;
}

.sd :where(cite) {
  font-style: normal;
}

.sd :where(img) {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Pojistka: zrušení globální šipky / čísla před <li> i bez .list-unstyled
   (stejná specifita jako globál, vyhrává pořadí). Komponenty proto
   NEPOUŽÍVAJÍ li::before – jen ::after nebo vlastní <span>. */
.sd ul > li::before,
.sd ol li::before {
  content: none;
}

/* Viditelný focus – web ho na odkazech vypíná přes !important */
.sd a:focus-visible,
.sd summary:focus-visible {
  outline: 3px solid var(--sd-focus) !important;
  outline-offset: 2px;
}


/* =====================================================================
   02  IKONY + UTILITY
   ===================================================================== */

.sd-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.sd-icon {
  display: block;
  flex: none;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sd-nowrap {
  white-space: nowrap;
}

.sd-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Malý popisek nad skupinou obsahu („Témata školení“ apod.) */
.sd-label {
  color: var(--sd-text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.sd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sd-s2);
  color: var(--sd-blue);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.sd-eyebrow .sd-icon {
  font-size: 16px;
}


/* =====================================================================
   03  ÚVOD – H1, perex, pruh „Ve zkratce“
   ===================================================================== */

.sd-intro {
  margin-bottom: var(--sd-s6);
}

.sd-intro__title {
  margin-top: var(--sd-s2);
  color: var(--sd-navy);
  font-size: clamp(26px, 1.2rem + 1.6vw, 34px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.sd-intro__lead {
  max-width: 44em;
  margin-top: var(--sd-s3);
  color: var(--sd-text-muted);
  font-size: 15px;
  line-height: 1.6;
}

/* Pruh klíčových faktů – každá dlaždice je odkaz na detailní kartu */
.sd-summary {
  margin-top: var(--sd-s5);
}

.sd-summary__label {
  margin-bottom: var(--sd-s2);
}

.sd-summary__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sd-s1);
  padding: var(--sd-s1);
  background: var(--sd-bg);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-lg);
  box-shadow: var(--sd-shadow);
}

.sd-summary__item:last-child {
  grid-column: 1 / -1;
}

.sd-summary__link {
  display: flex;
  flex-direction: column;
  gap: var(--sd-s2);
  height: 100%;
  padding: var(--sd-s3);
  border-radius: var(--sd-radius);
  color: var(--sd-text);
  transition: background-color .15s ease;
}

.sd-summary__link:hover {
  background: var(--sd-bg-muted);
  color: var(--sd-text);
}

.sd-summary__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--sd-radius-sm);
  background: var(--sd-blue-50);
  color: var(--sd-navy);
  font-size: 17px;
}

.sd-summary__k {
  display: block;
  color: var(--sd-text-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

.sd-summary__v {
  display: block;
  margin-top: 2px;
  color: var(--sd-navy);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

@media (min-width: 768px) {
  .sd-intro__lead { font-size: 16px; }

  .sd-summary__list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .sd-summary__item:last-child {
    grid-column: auto;
  }
}

@media (min-width: 1200px) {
  .sd-summary__link {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--sd-s3);
    padding: var(--sd-s4);
  }

  .sd-summary__icon {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

  .sd-summary__v { font-size: 14.5px; }
}


/* =====================================================================
   04  ROZVRŽENÍ – mobil 1 sloupec, od 992 px TOC vlevo + obsah vpravo
   ===================================================================== */

.sd-layout {
  position: relative;
}

.sd-content {
  display: flex;
  flex-direction: column;
  gap: var(--sd-s8);
  min-width: 0;
}

@media (min-width: 992px) {
  .sd-layout {
    display: grid;
    grid-template-columns: var(--sd-toc-w) minmax(0, 1fr);
    gap: var(--sd-gap);
    align-items: start;
  }

  .sd-content { gap: 56px; }
}


/* =====================================================================
   05  OBSAH / TOC
   ---------------------------------------------------------------------
   Element <nav> – globální navbar.css mu dává margin-top, height, z-index
   a ≤1300 px position:fixed + width:100vw + bílé pozadí. Vše níže
   přepsáno třídou (0,1,0 > 0,0,1).
   ===================================================================== */

/* --- Mobil / tablet: sticky lišta čipů (jen 5 skupin) --- */
.sd-toc {
  position: sticky;
  top: var(--sd-header-h);
  z-index: 5;                     /* pod hlavičkou webu (z-index 10) */
  width: auto;
  height: auto;
  margin: 0 -15px var(--sd-s5);   /* přes padding .container až k okraji */
  padding: 10px 15px;
  background: rgba(250, 250, 250, .94);
  box-shadow: 0 1px 0 var(--sd-border);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  backdrop-filter: saturate(1.4) blur(8px);
}

.sd-toc__title {
  display: none;
}

.sd-toc__list {
  display: flex;
  gap: var(--sd-s2);
  margin: -6px -2px;
  padding: 6px 48px 6px 2px;      /* místo pro focus ring + doběh poslední položky za fade */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
}

.sd-toc__list::-webkit-scrollbar {
  display: none;
}

.sd-toc__group {
  flex: none;
  scroll-snap-align: start;
}

.sd-toc__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sd-s2);
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--sd-bg);
  box-shadow: inset 0 0 0 1px var(--sd-border-strong);
  color: var(--sd-navy);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.sd-toc__link:hover {
  color: var(--sd-navy);
  box-shadow: inset 0 0 0 1px var(--sd-navy);
}

.sd-toc__num {
  color: var(--sd-blue);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

.sd-toc__link.is-active,
.sd-toc__link.is-active:hover {
  background: var(--sd-navy);
  box-shadow: none;
  color: #fff;
}

.sd-toc__link.is-active .sd-toc__num {
  color: #9fc0ef;
}

.sd-toc__sub,
.sd-toc__aside {
  display: none;
}

/* --- Desktop: sticky panel s podotázkami --- */
@media (min-width: 992px) {
  .sd-toc {
    top: calc(var(--sd-header-h) + 24px);
    align-self: start;
    max-height: calc(100vh - var(--sd-header-h) - 48px);
    margin: 0;
    padding: 20px 12px 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--sd-bg);
    border-radius: var(--sd-radius-lg);
    box-shadow: var(--sd-shadow), inset 0 0 0 1px var(--sd-border);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .sd-toc__title {
    display: block;
    margin-bottom: var(--sd-s2);
    padding: 0 12px;
  }

  .sd-toc__list {
    display: block;
    margin: 0;
    padding: 0;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .sd-toc__group + .sd-toc__group {
    margin-top: 2px;
  }

  .sd-toc__link {
    display: flex;
    gap: 10px;
    min-height: 0;
    padding: 8px 12px;
    border-radius: var(--sd-radius-sm);
    background: transparent;
    box-shadow: none;
    font-size: 14px;
    font-weight: 600;
    white-space: normal;
  }

  .sd-toc__link:hover {
    background: var(--sd-bg-muted);
    box-shadow: none;
    color: var(--sd-navy);
  }

  .sd-toc__link.is-active,
  .sd-toc__link.is-active:hover {
    background: var(--sd-blue-50);
    color: var(--sd-navy);
  }

  .sd-toc__link.is-active .sd-toc__num {
    color: var(--sd-blue);
  }

  .sd-toc__sub {
    display: block;
    margin: 2px 0 6px 22px;
    border-left: 1px solid var(--sd-border);
  }

  .sd-toc__sublink {
    display: block;
    margin-left: -1px;
    padding: 4px 10px 4px 15px;
    border-left: 2px solid transparent;
    color: var(--sd-text-muted);
    font-size: 13px;
    line-height: 1.4;
    transition: color .15s ease, border-color .15s ease;
  }

  /* Globální a:hover / :focus-visible / :active { border: none } (typography.css,
     specifita 0,1,1) by linku smazal → text o 2 px širší, položka poskočí o řádek
     a s ní výška celého panelu. Linku proto držíme i v těchto stavech (0,2,0). */
  .sd-toc__sublink:hover,
  .sd-toc__sublink:focus-visible,
  .sd-toc__sublink:active {
    border-left: 2px solid transparent;
  }

  .sd-toc__sublink:hover {
    color: var(--sd-navy);
  }

  .sd-toc__sublink.is-active,
  .sd-toc__sublink.is-active:hover {
    border-left-color: var(--sd-blue);
    color: var(--sd-blue-700);
    /* zesílení bez změny šířky textu: font-weight 500 je širší → položka se při
       aktivaci (scrollspy) mohla zalomit na 2 řádky a výška panelu poskočila */
    text-shadow: .35px 0 0 currentColor;
  }

  /* Mini-CTA zůstává viditelné i při vnitřním scrollu panelu (nižší notebooky) */
  .sd-toc__aside {
    position: sticky;
    bottom: -16px;                /* = padding-bottom panelu → lícuje se spodní hranou */
    display: grid;
    gap: var(--sd-s3);
    margin: var(--sd-s3) 0 -16px;
    padding: var(--sd-s4) var(--sd-s1);
    border-top: 1px solid var(--sd-border);
    background: var(--sd-bg);
  }

  .sd-toc__phone {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 8px;
    color: var(--sd-navy);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
  }

  .sd-toc__phone:hover {
    color: var(--sd-blue);
  }

  .sd-toc__phone .sd-icon {
    color: var(--sd-primary);
    font-size: 18px;
  }

  .sd-toc__phone-k {
    display: block;
    color: var(--sd-text-muted);
    font-size: 12px;
    font-weight: 500;
  }
}


/* =====================================================================
   06  BLOK – skupina otázek s H2
   ===================================================================== */

.sd-block {
  scroll-margin-top: var(--sd-scroll-offset);
}

.sd-block__head {
  display: flex;
  align-items: center;
  gap: var(--sd-s3);
  margin-bottom: var(--sd-s4);
}

/* Linka dotahující nadpis k pravému okraji – „dokumentační“ rytmus */
.sd-block__head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--sd-border);
}

.sd-block__num {
  display: inline-grid;
  place-items: center;
  flex: none;
  min-width: 36px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--sd-navy);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  line-height: 1;
}

.sd-block__title {
  color: var(--sd-navy);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
}

.sd-block__body {
  display: grid;
  gap: var(--sd-s4);
}

@media (min-width: 768px) {
  .sd-block__head { margin-bottom: 20px; }
  .sd-block__title { font-size: 22px; }
  .sd-block__body { gap: 20px; }

  /* Dvě karty vedle sebe (Pro koho × Komu nedoporučujeme) */
  .sd-block__body--split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
}


/* =====================================================================
   07  KARTA OTÁZKY – H3 + stručná odpověď (TL;DR) + detail
   ===================================================================== */

.sd-qa {
  position: relative;
  min-width: 0;
  padding: var(--sd-card-pad);
  background: var(--sd-bg);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-lg);
  box-shadow: var(--sd-shadow);
  scroll-margin-top: var(--sd-scroll-offset);
  transition: border-color .3s ease, box-shadow .3s ease;
}

/* Zvýraznění karty po skoku z obsahu (bez JS) */
.sd-qa:target {
  border-color: var(--sd-primary);
  box-shadow: var(--sd-shadow), 0 0 0 4px var(--sd-blue-100);
}

.sd-qa__head {
  display: flex;
  align-items: center;
  gap: var(--sd-s3);
}

.sd-qa__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--sd-blue-50);
  color: var(--sd-navy);
  font-size: 20px;
}

.sd-qa__q {
  color: var(--sd-navy);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.005em;
}

/* Stručná odpověď – první věc, kterou čtenář uvidí */
.sd-qa__tldr {
  margin-top: var(--sd-s4);
  padding-left: 14px;
  border-left: 3px solid var(--sd-primary);
  color: var(--sd-navy);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

.sd-qa__body {
  display: grid;
  gap: var(--sd-s4);
  margin-top: 20px;
}

.sd-qa__text {
  color: var(--sd-text);
  font-size: 15px;
  line-height: 1.65;
}

/* Varianty: vhodné / nevhodné */
.sd-qa--yes .sd-qa__icon {
  background: var(--sd-green-50);
  color: var(--sd-green-text);
}

.sd-qa--yes .sd-qa__tldr {
  border-left-color: var(--sd-green);
}

.sd-qa--no .sd-qa__icon {
  background: var(--sd-red-50);
  color: var(--sd-red-text);
}

.sd-qa--no .sd-qa__tldr {
  border-left-color: var(--sd-red);
}

@media (min-width: 768px) {
  .sd-qa__q { font-size: 18px; }
  .sd-qa__tldr { margin-top: 20px; }
  .sd-qa__body { gap: 20px; margin-top: var(--sd-s5); }
}

@media (min-width: 1200px) {
  .sd-qa__tldr { font-size: 17px; }
}


/* =====================================================================
   08  SEZNAM S IKONAMI – .sd-list--check / --cross
   ===================================================================== */

.sd-list {
  display: grid;
  gap: var(--sd-s3);
}

.sd-list__item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--sd-s3);
  align-items: start;
  color: var(--sd-text);
  font-size: 15px;
  line-height: 1.55;
}

.sd-list__icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--sd-blue-50);
  color: var(--sd-blue);
  font-size: 13px;
}

.sd-list__icon .sd-icon {
  stroke-width: 2.75;
}

.sd-list--check .sd-list__icon {
  background: var(--sd-green-50);
  color: var(--sd-green-text);
}

.sd-list--cross .sd-list__icon {
  background: var(--sd-red-50);
  color: var(--sd-red-text);
}

.sd-list strong {
  color: var(--sd-navy);
}


/* =====================================================================
   09  TÉMATA – mobil: kompaktní čipy (méně scrollování),
       od 576 px číslovaná mřížka 2 sloupce
   ===================================================================== */

.sd-topics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sd-s2);
}

.sd-topics__item {
  display: flex;
  align-items: center;
  gap: var(--sd-s2);
  max-width: 100%;
  padding: 6px 12px 6px 6px;
  border-radius: 10px;
  background: var(--sd-bg-muted);
  color: var(--sd-text);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
}

.sd-topics__num {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--sd-bg);
  box-shadow: inset 0 0 0 1px var(--sd-border);
  color: var(--sd-blue);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.sd-topics__meta {
  color: var(--sd-text-muted);
  font-size: 12px;
  font-weight: 400;
}

@media (min-width: 576px) {
  .sd-topics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sd-topics__item {
    gap: var(--sd-s3);
    min-height: 52px;
    padding: 10px 12px;
    font-size: 14.5px;
    line-height: 1.4;
  }

  .sd-topics__num {
    width: 30px;
    height: 30px;
    border-radius: var(--sd-radius-sm);
    font-size: 12px;
  }

  .sd-topics__meta {
    display: block;
    font-size: 12.5px;
  }
}


/* =====================================================================
   10  UPOZORNĚNÍ (callout) + CITACE + „ZOBRAZIT PODROBNOSTI“
   ===================================================================== */

/* Mobil: ikona nad textem (text na celou šířku), od 576 px ikona vlevo */
.sd-callout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sd-s3) 14px;
  padding: var(--sd-s4);
  border-radius: var(--sd-radius);
  background: var(--sd-blue-50);
  color: var(--sd-text);
}

.sd-callout__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--sd-bg);
  color: var(--sd-navy);
  font-size: 18px;
}

.sd-callout__title {
  color: var(--sd-navy);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

.sd-callout__text {
  margin-top: var(--sd-s1);
  color: var(--sd-text);
  font-size: 14.5px;
  line-height: 1.6;
}

.sd-callout .sd-more {
  grid-column: 1 / -1;
}

@media (min-width: 576px) {
  .sd-callout {
    grid-template-columns: 36px minmax(0, 1fr);
    padding: 20px;
  }

  .sd-callout .sd-more { grid-column: 2 / -1; }
}

/* Nativní <details> – obsah je v DOM (SEO), JS netřeba */
.sd-more__summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  border-radius: 6px;
  color: var(--sd-blue);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.sd-more__summary::-webkit-details-marker {
  display: none;
}

.sd-more__summary:hover {
  color: var(--sd-blue-700);
}

.sd-more__chev {
  font-size: 16px;
  transition: transform .2s ease;
}

.sd-more[open] .sd-more__chev {
  transform: rotate(180deg);
}

.sd-more__hide,
.sd-more[open] .sd-more__show {
  display: none;
}

.sd-more[open] .sd-more__hide {
  display: inline;
}

.sd-more__body {
  margin-top: var(--sd-s2);
}

/* Varianta pro pokračování seznamu (např. další předpisy) */
.sd-more--list .sd-more__summary {
  margin-top: var(--sd-s2);
}

.sd-more--list .sd-more__body {
  margin-top: 0;
}

.sd-quote {
  padding: var(--sd-s4) var(--sd-s4) var(--sd-s4) 20px;
  border-left: 3px solid var(--sd-primary);
  border-radius: 0 10px 10px 0;
  background: var(--sd-bg);
  color: var(--sd-text);
  font-size: 14px;
  line-height: 1.7;
}

.sd-quote__src {
  display: block;
  margin-top: var(--sd-s2);
  color: var(--sd-text-muted);
  font-size: 12.5px;
  font-weight: 500;
}


/* =====================================================================
   11  POZNÁMKA – nápověda / kontakt
   ===================================================================== */

.sd-note {
  display: flex;
  align-items: flex-start;
  gap: var(--sd-s3);
  padding: 14px var(--sd-s4);
  border-radius: var(--sd-radius);
  background: var(--sd-bg-muted);
  color: var(--sd-text);
  font-size: 14px;
  line-height: 1.55;
}

.sd-note > .sd-icon {
  margin-top: 1px;
  color: var(--sd-blue);
  font-size: 20px;
}

.sd-note__link {
  color: var(--sd-blue);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.sd-note__link:hover {
  color: var(--sd-blue-700);
}

.sd-qa--no .sd-note {
  margin-top: auto;
}


/* =====================================================================
   12  ČETNOST – velká čísla
   ===================================================================== */

.sd-freq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sd-s3);
}

.sd-freq__item {
  padding: var(--sd-s4);
  border-radius: var(--sd-radius);
  background: var(--sd-bg-muted);
  color: var(--sd-text);
}

.sd-freq__item--main {
  background: var(--sd-blue-50);
  box-shadow: inset 0 0 0 2px var(--sd-primary);
}

.sd-freq__value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  color: var(--sd-navy);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.sd-freq__unit {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
}

.sd-freq__caption {
  display: block;
  margin-top: 6px;
  color: var(--sd-text-muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .sd-freq { gap: var(--sd-s4); }
  .sd-freq__item { padding: 20px; }
  .sd-freq__value { font-size: 32px; }
  .sd-freq__unit { font-size: 16px; }
}


/* =====================================================================
   13  PŘEDPISY – referenční seznam (citace | název)
   ===================================================================== */

.sd-laws {
  display: grid;
  border-top: 1px solid var(--sd-border);
}

.sd-laws__item {
  display: grid;
  gap: 2px;
  padding: var(--sd-s3) 0;
  border-bottom: 1px solid var(--sd-border);
}

/* Citace i název mají stejnou výšku řádku (22 px) → první řádky lícují */
.sd-laws__cite {
  display: flex;
  align-items: flex-start;
  gap: var(--sd-s2);
  color: var(--sd-navy);
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  font-variant-numeric: tabular-nums;
}

.sd-laws__cite .sd-icon {
  margin-top: 3px;
  color: var(--sd-primary);
  font-size: 16px;
}

.sd-laws__name {
  padding-left: 24px;
  color: var(--sd-text);
  font-size: 14.5px;
  line-height: 22px;
}

.sd-laws__desc {
  display: block;
  margin-top: 2px;
  color: var(--sd-text-muted);
  font-size: 13px;
  line-height: 1.55;
}

/* Pokračování seznamu uvnitř <details> navazuje bez dvojité linky */
.sd-more .sd-laws {
  border-top: 0;
}

.sd-laws__foot {
  color: var(--sd-text-muted);
  font-size: 13px;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .sd-laws__item {
    grid-template-columns: 236px minmax(0, 1fr);
    gap: var(--sd-s4);
    align-items: start;
    padding: var(--sd-s3) var(--sd-s1);
  }

  .sd-laws__name { padding-left: 0; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .sd-laws__item { grid-template-columns: 196px minmax(0, 1fr); }
}


/* =====================================================================
   14  DLAŽDICE – ikona + text (dokumenty, fakta o testu, doklady)
       --grid  = 2 sloupce od 576 px
       --muted = šedé pozadí místo rámečku
       ikona: výchozí modrá | --ok zelená | --doc jantarová
   ===================================================================== */

.sd-tiles {
  display: grid;
  gap: var(--sd-s2);
}

.sd-tiles__item {
  display: flex;
  align-items: center;
  gap: var(--sd-s3);
  min-width: 0;
  padding: var(--sd-s3) 14px;
  border-radius: var(--sd-radius);
  background: var(--sd-bg);
  box-shadow: inset 0 0 0 1px var(--sd-border);
  color: var(--sd-text);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.45;
}

.sd-tiles__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--sd-blue-50);
  color: var(--sd-navy);
  font-size: 18px;
}

.sd-tiles__icon--ok {
  background: var(--sd-green-50);
  color: var(--sd-green-text);
}

.sd-tiles__icon--doc {
  background: var(--sd-amber-50);
  color: var(--sd-amber-text);
}

.sd-tiles__title {
  display: block;
  color: var(--sd-navy);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.sd-tiles__text {
  display: block;
  margin-top: 2px;
  color: var(--sd-text-muted);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.5;
}

.sd-tiles--muted .sd-tiles__item {
  align-items: flex-start;
  padding: var(--sd-s4);
  background: var(--sd-bg-muted);
  box-shadow: none;
}

.sd-tiles--muted .sd-tiles__icon {
  background: var(--sd-bg);
}

.sd-tiles--muted .sd-tiles__icon--ok {
  background: var(--sd-green-50);
}

@media (min-width: 576px) {
  .sd-tiles--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sd-s3);
  }

  /* Jediná položka přes celou šířku (např. AUTO má 1 dokument) */
  .sd-tiles--grid > .sd-tiles__item:only-child {
    grid-column: 1 / -1;
  }
}


/* =====================================================================
   15  KROKY – postup (mobil svisle, od 768 px vodorovně)
   ===================================================================== */

.sd-steps {
  display: grid;
}

.sd-steps__item {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  padding-bottom: 20px;
}

/* Spojnice mezi kroky (::after – ::before je rezervován globálem webu) */
.sd-steps__item::after {
  content: "";
  position: absolute;
  top: 46px;
  bottom: 6px;
  left: 19.5px;
  width: 1px;
  background-image: linear-gradient(var(--sd-border-strong) 50%, transparent 0);
  background-size: 1px 6px;
}

.sd-steps__item:last-child {
  padding-bottom: 0;
}

.sd-steps__item:last-child::after {
  display: none;
}

.sd-steps__marker {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sd-blue-50);
  color: var(--sd-navy);
  font-size: 18px;
}

.sd-steps__item:last-child .sd-steps__marker {
  background: var(--sd-green-50);
  color: var(--sd-green-text);
}

.sd-steps__no {
  position: absolute;
  top: -4px;
  right: -6px;
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--sd-navy);
  box-shadow: 0 0 0 2px var(--sd-bg);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.sd-steps__title {
  display: block;
  padding-top: 2px;
  color: var(--sd-navy);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.sd-steps__text {
  display: block;
  margin-top: var(--sd-s1);
  color: var(--sd-text-muted);
  font-size: 14px;
  line-height: 1.55;
}

@media (min-width: 768px) {
  .sd-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sd-s4);
  }

  .sd-steps__item {
    display: block;
    padding-bottom: 0;
  }

  .sd-steps__item::after {
    top: 20px;
    right: -10px;
    bottom: auto;
    left: 54px;
    width: auto;
    height: 1px;
    background-image: linear-gradient(90deg, var(--sd-border-strong) 50%, transparent 0);
    background-size: 6px 1px;
  }

  .sd-steps__title {
    margin-top: 14px;
    padding-top: 0;
  }
}


/* =====================================================================
   16  META ŘÁDKY – drobné doplňující informace pod komponentou
   ===================================================================== */

.sd-meta {
  display: grid;
  gap: 10px;
  padding-top: var(--sd-s4);
  border-top: 1px dashed var(--sd-border-strong);
}

.sd-meta__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--sd-text);
  font-size: 14px;
  line-height: 1.55;
}

.sd-meta__item .sd-icon {
  margin-top: 2px;
  color: var(--sd-primary);
  font-size: 18px;
}


/* =====================================================================
   17  ŠTÍTKY
   ===================================================================== */

.sd-tagrow {
  display: grid;
  gap: 10px;
}

.sd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sd-s2);
}

.sd-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--sd-bg-muted);
  box-shadow: inset 0 0 0 1px var(--sd-border);
  color: var(--sd-navy);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}

.sd-tag .sd-icon {
  color: var(--sd-primary);
  font-size: 15px;
}


/* =====================================================================
   18  VARIANTY – „A nebo B“
   ===================================================================== */

.sd-options {
  display: grid;
  gap: 32px;
}

.sd-options__item {
  position: relative;
  padding: var(--sd-s4);
  border-radius: var(--sd-radius);
  background: var(--sd-bg);
  box-shadow: inset 0 0 0 1px var(--sd-border-strong);
  color: var(--sd-text);
}

.sd-options__head {
  display: flex;
  align-items: center;
  gap: var(--sd-s3);
}

.sd-options__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--sd-blue-50);
  color: var(--sd-navy);
  font-size: 18px;
}

.sd-options__title {
  display: block;
  color: var(--sd-navy);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.sd-options__text {
  display: block;
  margin-top: 10px;
  color: var(--sd-text-muted);
  font-size: 14px;
  line-height: 1.55;
}

/* „nebo“ – čte se i čtečkou („nebo PDF s ručním podpisem“) */
.sd-options__or {
  position: absolute;
  top: -27px;
  left: 50%;
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  /* background: var(--sd-bg);
  box-shadow: inset 0 0 0 1px var(--sd-border); */
  color: var(--sd-text-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  transform: translateX(-50%);
}

@media (min-width: 576px) {
  .sd-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 52px;
  }

  .sd-options__item { padding: 20px; }

  /* Přesně uprostřed mezery mezi kartami */
  .sd-options__or {
    top: 50%;
    left: -26px;
    transform: translate(-50%, -50%);
  }
}


/* =====================================================================
   19  MÉDIA – obsah + obrázek vedle sebe (od 576 px)
   ===================================================================== */

.sd-media {
  display: grid;
  gap: var(--sd-s4);
  align-items: start;
}

.sd-media__figure {
  overflow: hidden;
  border-radius: var(--sd-radius);
  background: var(--sd-bg-muted);
}

.sd-media__figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (min-width: 576px) {
  .sd-media {
    grid-template-columns: minmax(0, 1fr) 170px;
    gap: 20px;
  }

  .sd-media__figure img { aspect-ratio: 8 / 7; }
}

@media (min-width: 768px) {
  .sd-media { grid-template-columns: minmax(0, 1fr) 200px; }
}

@media (min-width: 1200px) {
  .sd-media {
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: var(--sd-s5);
  }
}


/* =====================================================================
   20  LIDÉ – odborní garanti (fotka garanta, bez fotky → iniciály)
   ===================================================================== */

.sd-people {
  display: grid;
  gap: var(--sd-s3);
}

/* Hlavička (avatar + jméno) nahoře, praxe a osvědčení na celou šířku karty */
.sd-person {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--sd-s4);
  border-radius: var(--sd-radius);
  background: var(--sd-bg-muted);
  color: var(--sd-text);
}

.sd-person__head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sd-person__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--sd-navy);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .03em;
  line-height: 1;
}

/* Fotka garanta: <img class="sd-person__avatar sd-person__avatar--photo">
   ze Site/images/landing-pages/odborni-garanti/garant-<prijmeni>-<jmeno>-L.png
   (kruhový výřez 192 × 192 px, vždy verze -L). Bez fotky zůstávají iniciály. */
.sd-person__avatar--photo {
  display: block;
  object-fit: cover;
  background: var(--sd-bg-muted);
}

.sd-person__name {
  display: block;
  color: var(--sd-navy);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
}

.sd-person__role {
  display: block;
  margin-top: 2px;
  color: var(--sd-text-muted);
  font-size: 13.5px;
  line-height: 1.45;
}

.sd-person__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--sd-bg);
  box-shadow: inset 0 0 0 1px var(--sd-border);
  color: var(--sd-green-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

.sd-person__badge .sd-icon {
  font-size: 13px;
}

.sd-person__creds {
  display: grid;
  gap: 6px;
  align-self: stretch;
  margin-top: var(--sd-s3);
  padding-top: var(--sd-s3);
  border-top: 1px solid var(--sd-border);
}

.sd-person__cred {
  display: flex;
  align-items: flex-start;
  gap: var(--sd-s2);
  color: var(--sd-text);
  font-size: 13px;
  line-height: 1.5;
}

.sd-person__cred .sd-icon {
  margin-top: 2px;
  color: var(--sd-primary);
  font-size: 15px;
}

@media (min-width: 768px) {
  .sd-people {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sd-s4);
  }

  .sd-person { padding: 20px; }
}


/* =====================================================================
   21  TLAČÍTKA (odkazy) – rámečky přes box-shadow, protože web
       na a:hover nastavuje `border: none`
   ===================================================================== */

.sd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: var(--sd-radius-sm);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.sd-btn:active {
  transform: translateY(1px);
}

.sd-btn .sd-icon {
  font-size: 18px;
}

.sd-btn--primary {
  background: var(--sd-blue);
  box-shadow: 0 6px 16px rgba(47, 107, 208, .22);
  color: #fff;
}

.sd-btn--primary:hover {
  background: var(--sd-blue-700);
  color: #fff;
}

.sd-btn--light {
  background: #fff;
  color: var(--sd-navy);
}

.sd-btn--light:hover {
  background: var(--sd-blue-50);
  color: var(--sd-navy);
}

.sd-btn--ghost {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4);
  color: #fff;
}

.sd-btn--ghost:hover {
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1px #fff;
  color: #fff;
}

.sd-btn--sm {
  min-height: 40px;
  padding: 8px 14px;
  font-size: 13.5px;
}

.sd-btn--sm .sd-icon {
  font-size: 16px;
}

.sd-btn--block {
  width: 100%;
}


/* =====================================================================
   22  ZÁVĚREČNÝ PANEL (CTA) – zpět k objednávce + kontakt
   ===================================================================== */

.sd-cta {
  position: relative;
  display: grid;
  gap: var(--sd-s5);
  margin-top: var(--sd-s8);
  padding: 28px 20px;
  overflow: hidden;
  border-radius: var(--sd-radius-xl);
  background: var(--sd-navy);
  box-shadow: var(--sd-shadow-lg);
  color: #fff;
  scroll-margin-top: var(--sd-scroll-offset);
}

/* Dekorativní záře (čistě vizuální) */
.sd-cta::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -160px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(85, 136, 212, .42), rgba(85, 136, 212, 0));
  pointer-events: none;
}

.sd-cta__body,
.sd-cta__actions {
  position: relative;
  z-index: 1;
}

.sd-cta__eyebrow {
  color: #9fc0ef;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.sd-cta__title {
  margin-top: var(--sd-s2);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.sd-cta__text {
  max-width: 36em;
  margin-top: 10px;
  color: var(--sd-text-on-dark);
  font-size: 15px;
  line-height: 1.6;
}

.sd-cta__stat {
  display: inline-flex;
  align-items: center;
  gap: var(--sd-s2);
  margin-top: var(--sd-s4);
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: #e6edf5;
  font-size: 13px;
  line-height: 1.4;
}

.sd-cta__stat strong {
  color: #fff;
}

.sd-cta__stat .sd-icon {
  color: #9fc0ef;
  font-size: 16px;
}

.sd-cta__actions {
  display: grid;
  gap: var(--sd-s3);
}

.sd-cta__link {
  justify-self: center;
  color: var(--sd-text-on-dark);
  font-size: 13.5px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.sd-cta__link:hover {
  color: #fff;
}

@media (min-width: 768px) {
  .sd-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sd-s6);
    padding: var(--sd-s7);
  }

  .sd-cta__title { font-size: 26px; }
  .sd-cta__actions { min-width: 260px; }
}

@media (min-width: 1200px) {
  .sd-cta { padding: var(--sd-s8) 56px; }
}


/* =====================================================================
   23  PŘÍSTUPNOST, POHYB, TISK
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  .sd *,
  .sd *::after {
    transition: none !important;
  }
}

@media print {
  .sd-toc,
  .sd-cta__actions,
  .sd-summary {
    display: none;
  }

  .sd-layout { display: block; }

  .sd-qa {
    box-shadow: none;
    break-inside: avoid;
  }
}


/* =====================================================================
   24  NAPOJENÍ NA ŠABLONY DETAILU (jediná pravidla mimo .sd)
   ---------------------------------------------------------------------
   Cíle odkazů z horní karty a z postranního panelu:
     #popisSkoleni / #popisBalicku = wrapper v EDU_DETAIL.ascx /
       BALICEK_EDU_DETAIL.ascx („Více informací o školení / balíčku“),
       :has(> .sd) = jen u převedených stránek,
     #objednavka = horní karta s košíkem („Přejít k objednávce“).
   Odsazení = výška fixní hlavičky webu (jako --sd-header-h) + 16 px.
   ===================================================================== */

#objednavka,
#popisSkoleni:has(> .sd),
#popisBalicku:has(> .sd) {
  scroll-margin-top: 80px;        /* ≤680 px: fixní hlavička 64 px */
}

@media (min-width: 681px) {
  #objednavka,
  #popisSkoleni:has(> .sd),
  #popisBalicku:has(> .sd) {
    scroll-margin-top: 102px;     /* 681–1300 px: fixní hlavička 86 px */
  }
}

@media (min-width: 1301px) {
  #objednavka,
  #popisSkoleni:has(> .sd),
  #popisBalicku:has(> .sd) {
    scroll-margin-top: 16px;      /* ≥1301 px: hlavička není fixní */
  }
}

.training-variant-preparing {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid #ead6a5;
    border-radius: 20px;
    background: #fff6df;
    color: #795519;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.training-variant-preparing .mdi {
    font-size: 18px;
    line-height: 1;
}