/* ============================================================================
   EDITORIAL — obsahová vrstva JLCasino
   ----------------------------------------------------------------------------
   Přepsáno podle DESIGN-JLCASINO.md. Soubor byl fork RespinnersTV: skleněné
   karty s rádiusem 16 px, tabulka v zaobleném obalu se zebrou a hover tintem,
   gradientní pruhy a pilulkové štítky. Majitel poznal tabulku na první pohled.

   Zásah je subtraktivní. Neřeší se vrstvou navrch — mění se pravidla tady,
   a přebytečné vrstvy v karty.css, karty-parts/30-seo.css a kick-skin.css
   se ruší. V tomhle souboru není ani jeden !important.

   Konstrukce podle sedmi pravidel:
     rádius   0 (kruh jen tam, kde je věc doopravdy kruh: tečka, pecka)
     hrana    3px border-left, barva = stav (line-2 / green / live)
     plocha   dvě úrovně a nic mezi nimi — --kt-pg pod vším, --kt-sf jen tam,
              co doopravdy leží nad stránkou. Karta plocha NENÍ.
     visutý   značky, čísla a odrážky stojí 2.6ch nalevo od textového sloupce
     tabulka  border-collapse: collapse, vlásečnice, žádná zebra, žádný hover
     zelená   nejvýš jednou v uzavřeném bloku, nikdy jako výplň nebo záře
     odznak   první vysázený řádek, ne stužka přes roh

   POZOR: každý blokový wrapper potřebuje display:block, protože
   core/base.css dává display:flex všem <section>.
   ============================================================================ */

.ed,
.ed-prose,
.ed-card,
.ed-callout,
.ed-faq,
.ed-table-wrap {
    display: block;
}

/* ── Visutý sloupec ───────────────────────────────────────────────────────
   Sdílená míra pro všechno, co stojí nalevo od textu: čísla kroků, odrážky,
   ikony, pořadí v žebříčku. Drží se v jedné proměnné, aby se sloupce napříč
   komponentami srovnaly na stejnou hranu. */
:root {
    --ed-hang: 2.6ch;
    --ed-hang-gap: 0.9ch;
}

.jl-hang {
    display: grid;
    grid-template-columns: var(--ed-hang) 1fr;
    column-gap: var(--ed-hang-gap);
    align-items: baseline;
}

/* ============================================================================
   1. TEXT
   ============================================================================ */
.ed-prose {
    max-width: var(--ed-read);
    font-size: var(--ed-body);
    line-height: var(--ed-body-lh);
    color: var(--kt-ink-2);
}

/* Svislý rytmus přes lobotomized owl — nesbírá margin collapse a nepotřebuje
   výjimku pro první a poslední prvek. */
.ed-prose > * + * {
    margin-top: 18px;
}

.ed-prose > p {
    margin-bottom: 0;
}

/* Úvodní odstavec sekce. Hierarchii nese velikost a jas, ne barva. */
.ed-lead,
.ed-prose--lead {
    max-width: var(--ed-read);
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--kt-ink);
}

.ed-prose strong,
.ed-prose b,
.ed-lead strong {
    color: var(--kt-ink);
    font-weight: 700;
}

.ed-prose em {
    color: var(--kt-ink-2);
    font-style: italic;
}

/* Nadpisy uvnitř textu */
.ed-prose h2 {
    font-family: var(--font-display);
    font-size: var(--ed-h2);
    font-weight: 800;
    line-height: 1.25;
    color: var(--kt-ink);
    margin: 44px 0 14px;
    letter-spacing: -0.01em;
    text-transform: none;
}

.ed-prose h3 {
    font-family: var(--font-display);
    font-size: var(--ed-h3);
    font-weight: 800;
    line-height: 1.35;
    color: var(--kt-ink);
    margin: 30px 0 10px;
    text-transform: none;
    letter-spacing: 0;
}

.ed-prose h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--kt-ink);
    margin: 24px 0 8px;
    text-transform: none;
    letter-spacing: 0;
}

.ed-prose > :is(h2, h3, h4):first-child {
    margin-top: 0;
}

/* Široká varianta pro mřížky, tabulky a pruhy, které text nejsou. */
.ed-wide {
    max-width: var(--ed-measure);
}

.ed-full {
    max-width: none;
}

.ed-center {
    margin-inline: auto;
}

/* ── Odkazy v textu ───────────────────────────────────────────────────────
   base.css má globální `a { color: var(--color-secondary) }`, takže každý
   blok, který si barvu nepřepsal, míchal dvě barvy odkazů v jednom průvodci.

   :not() guard je POVINNÝ. `.landing-editorial a` má specificitu (0,1,1)
   a přebíjela `.jl-btn--primary` (0,1,0), takže affiliate tlačítka uvnitř
   textu měla podtržený text v barvě odkazu na barevném tlačítku. */
.ed-prose a:not([class]),
.ed-prose a[class=""],
.ed-prose a:not([class*="btn"]):not([class*="cta"]):not([class*="card"]) {
    color: var(--kt-green);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: color-mix(in srgb, var(--kt-green) 40%, transparent);
    transition: text-decoration-color 0.15s ease;
}

.ed-prose a:not([class*="btn"]):not([class*="cta"]):not([class*="card"]):hover {
    text-decoration-color: var(--kt-green);
}

/* Tlačítka uvnitř textu si drží vlastní vzhled za všech okolností. */
.ed-prose :is(.jl-btn, .btn, .cta-btn-h, [class*="btn"], [class*="cta"]) {
    text-decoration: none;
}

.ed-prose .jl-btn--primary,
.ed-prose .jl-btn-primary {
    color: #fff;
    text-decoration: none;
}

/* ============================================================================
   2. HLAVIČKA SEKCE
   ----------------------------------------------------------------------------
   Kanonická jednotka je .jl-section-label (core/shared.css:208). Tady jen
   modifikátory, ať se nevyrábí čtvrtý paralelní systém nadpisů.
   ============================================================================ */
.jl-section-label--sub h2,
.jl-section-label--sub h3 {
    font-size: var(--ed-h2);
}

.jl-section-label--stacked {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

/* Kotva sekce je vlásečnice pod nadpisem, ne gradientní sloupec s rádiusem.
   Podtržení je jediný způsob, jak nadpis odlišit, aniž by se text odsadil
   od odstavců pod ním — sazba všech bloků začíná na stejné hraně. */
.ed-head {
    display: block;
    position: relative;
    margin: 0 0 18px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--kt-line);
}

.ed-head h2,
.ed-head h3,
.ed-band-head h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--ed-h2);
    font-weight: 800;
    line-height: 1.25;
    color: var(--kt-ink);
    letter-spacing: -0.01em;
    text-transform: none;
}

.ed-head h3 {
    font-size: var(--ed-h3);
}

/* Zdroj dával druhé polovině nadpisu gradient přes background-clip.
   Hierarchii nese velikost a váha, ne barva — span je jen text. */
.ed-head h2 span,
.ed-head h3 span,
.ed-band-head h2 span {
    color: inherit;
    background: none;
    -webkit-text-fill-color: currentColor;
}

.ed-head p,
.ed-band-head p {
    margin: 6px 0 0;
    max-width: var(--ed-read);
    font-size: var(--ed-small);
    color: var(--kt-ink-2);
}

/* Vycentrovaná hlavička pruhu — symetrický protipól k zarovnání vlevo. */
.ed-band-head {
    display: block;
    max-width: 760px;
    margin: 0 auto 28px;
    text-align: center;
}

.ed-band-head h2 {
    margin: 6px 0 10px;
}

.ed-band-head p {
    margin-inline: auto;
}

/* .ed-eyebrow { odešel: oční linky nad nadpisy jsou zakázané a markup je pryč. */

/* ============================================================================
   3. OBSAHOVÁ KARTA
   ----------------------------------------------------------------------------
   Karta je plocha, ne obrys. Stejné hodnoty jako u referenční řádkové karty
   nabídky (.bp-row, core/shared.css): --kt-card, vlásečnice, rádius --kt-r
   a černý stín --kt-shadow. Stav nese 3px levá hrana (--acc).

   Předchozí verze byla průhledná s rádiusem 0 — to je jazyk zamítnutého
   návrhu. DESIGN-JLCASINO.md: „Stín je standard, ne prohřešek" a rádius karty
   je 10 px; nikdo z devíti českých ani šesti světových webů v průzkumu nemá
   plochou kartu bez stínu i bez obrysu.
   ============================================================================ */
.ed-card {
    --acc: var(--kt-line-2);
    position: relative;
    padding: 22px 22px 22px 19px;
    background: var(--kt-card);
    border: 1px solid rgba(255, 255, 255, .09);
    border-left: 3px solid var(--acc);
    border-radius: var(--kt-r);
    box-shadow: var(--kt-shadow);
}

.ed-card--compact { padding: 16px 16px 16px 13px; }
.ed-card--feature { padding: 28px 28px 28px 25px; }

/* Stav se nese hranou, ne rámečkem a ne pruhem nahoře. Zděděné názvy
   --magenta / --purple ukazují na stav, aby se nemusel přepsat obsah
   devadesáti stránek; nové se pojmenují sémanticky. */
.ed-card--accent,
.ed-card--rec,
.ed-card--magenta { --acc: var(--kt-green); }

.ed-card--live { --acc: var(--kt-live); }
.ed-card--purple { --acc: var(--kt-line-2); }

/* Karta jako odkaz: mění se hrana, nic se nezvedá a nic nevrhá stín. */
a.ed-card,
.ed-card--link {
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

a.ed-card:hover,
.ed-card--link:hover {
    --acc: var(--kt-green);
    border-color: rgba(255, 255, 255, .16);
    box-shadow: var(--kt-shadow-hi);
}

.ed-card > :first-child { margin-top: 0; }
.ed-card > :last-child  { margin-bottom: 0; }

.ed-card-title {
    display: flex;
    align-items: baseline;
    gap: var(--ed-hang-gap);
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--kt-ink);
    text-transform: none;
    letter-spacing: 0;
}

.ed-card-text {
    margin: 0;
    font-size: 0.96rem;
    line-height: 1.65;
    color: var(--kt-ink-2);
}

/* Definiční dvojice uvnitř karty */
.ed-card dt {
    margin: 14px 0 4px;
    font-weight: 700;
    color: var(--kt-ink);
}

.ed-card dt:first-child { margin-top: 0; }

.ed-card dd {
    margin: 0;
    font-size: 0.96rem;
    line-height: 1.65;
    color: var(--kt-ink-2);
}

/* Ikona stojí ve visutém sloupci, ne v barevném čipu. Zdrojová dlaždice
   měla vlastní gradientní povrch, což je zakázaná třetí úroveň plochy. */
.ed-ico {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ed-hang);
    height: 1.5em;
    background: none;
    border: 0;
    color: var(--acc, var(--kt-ink-2));
    font-size: 1em;
    line-height: 1;
}

.ed-ico svg {
    width: 1.05em;
    height: 1.05em;
}

.ed-ico--lg {
    height: 1.9em;
}

.ed-ico--lg svg {
    width: 1.3em;
    height: 1.3em;
}

/* Mřížka obsahových karet. auto-fit nechával poslední kartu samotnou na
   řádku, proto pevný počet sloupců se sestupem přes media query níž. */
.ed-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    max-width: var(--ed-measure);
}

.ed-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ed-grid--wide { max-width: none; }
.ed-grid > * { min-width: 0; }

/* ============================================================================
   4. SEZNAMY — visutý sloupec, ne číslovaný čip
   ----------------------------------------------------------------------------
   POZOR: <li> MUSÍ zůstat display:block s absolutně umístěnou značkou.
   display:grid ani display:flex tu nejde použít, i když je visutý sloupec
   v dokumentu popsaný přes grid: každý <strong> a každý textový uzel uvnitř
   <li> by se stal vlastní položkou a věta by se rozpadla na sloupce.
   Absolutní značka dává stejnou hranu bez téhle vady.
   ============================================================================ */
.ed-steps {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    counter-reset: ed-step;
    max-width: var(--ed-read);
}

.ed-steps li {
    display: block;
    position: relative;
    padding-left: calc(var(--ed-hang) + var(--ed-hang-gap));
    margin-bottom: 12px;
    counter-increment: ed-step;
    font-size: var(--ed-body);
    line-height: 1.7;
    color: var(--kt-ink-2);
}

.ed-steps li:last-child { margin-bottom: 0; }

.ed-steps li::before {
    content: counter(ed-step);
    position: absolute;
    left: 0;
    top: 0;
    width: var(--ed-hang);
    background: none;
    color: var(--kt-ink-3);
    font-family: var(--font-display);
    font-size: 0.9em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: inherit;
}

.ed-steps--lg li {
    margin-bottom: 16px;
}

.ed-steps--lg li::before {
    font-size: 1em;
    font-weight: 800;
}

/* Odrážkový seznam. Tečka je doopravdy kruh, takže si 50 % nechá. */
.ed-list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    max-width: var(--ed-read);
}

.ed-list li {
    display: block;
    position: relative;
    padding-left: calc(var(--ed-hang) + var(--ed-hang-gap));
    margin-bottom: 8px;
    font-size: var(--ed-body);
    line-height: 1.7;
    color: var(--kt-ink-2);
}

.ed-list li:last-child { margin-bottom: 0; }

.ed-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--kt-line-2);
}

/* Klady / zápory */
.ed-list--pro li::before { background: var(--kt-green); }
.ed-list--con li::before { background: var(--kt-live); }

/* Seznam, kde každá položka je samostatný objekt — dostane hranu. */
.ed-steps--cards li,
.ed-list--cards li {
    padding: 14px 18px 14px calc(var(--ed-hang) + var(--ed-hang-gap) + 15px);
    margin-bottom: 10px;
    background: none;
    border: 1px solid var(--kt-line);
    border-left: 3px solid var(--kt-line-2);
}

.ed-steps--cards li::before {
    left: 15px;
    top: 14px;
}

.ed-list--cards li::before {
    left: 15px;
    top: calc(14px + 0.72em);
}

/* ============================================================================
   5. TABULKA — vysázená, ne obalená
   ----------------------------------------------------------------------------
   Tohle byl nejnápadnější zbytek zdrojového webu. Zdroj měl obal s rádiusem
   a vlastním povrchem, border-collapse: separate, zebru rgba(255,255,255,.022)
   a hover tint na celém řádku. Majitel podle toho poznal, že je tabulka
   odjinud.

   Zůstává sazba: vlásečnice pod řádkem, první sloupec na hraně textového
   bloku, čísla tabulárně. Obal drží už jen vodorovné posouvání na úzkém
   displeji, žádnou grafiku.
   ============================================================================ */
.ed-table-wrap {
    max-width: var(--ed-measure);
    overflow-x: auto;
    background: none;
    border: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.ed-table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.ed-table th,
.ed-table td {
    /* První sloupec bez levého odsazení: sazba začíná na hraně textového
       bloku, stejně jako odstavec nad tabulkou. Rozteč nese padding vpravo. */
    padding-left: 0;
    padding-right: 24px;
    text-align: left;
    vertical-align: baseline;
}

.ed-table th:last-child,
.ed-table td:last-child {
    padding-right: 0;
}

.ed-table th {
    padding-top: 0;
    padding-bottom: 9px;
    font-family: var(--font-display);
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kt-ink-2);
    background: none;
    border-bottom: 1px solid var(--kt-line-2);
    white-space: nowrap;
}

.ed-table td {
    padding-top: 13px;
    padding-bottom: 13px;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--kt-ink-2);
    border-bottom: 1px solid var(--kt-line);
}

/* Levá hrana nese stav řádku. Neviditelnou hranu drží každá první buňka,
   aby se sloupec nerozjel podle toho, jestli je řádek označený. */
.ed-table th:first-child,
.ed-table td:first-child {
    border-left: 3px solid transparent;
    padding-left: 0;
}

.ed-table tr.is-partner > td:first-child,
.ed-table tr.rt-featured > :first-child {
    /* --acc drzi znackovou barvu radku (Herna u dedka ma zlatou),
       zelena je az vychozi hodnota. Natvrdo zapsana zelena tu znackovou
       barvu tise prebila. */
    border-left-color: var(--acc, var(--kt-green));
}

/* Zvýraznění nese váha a jas, ne barevný podklad. */
.ed-t-name,
.ed-table tbody th {
    color: var(--kt-ink);
    font-weight: 700;
}

/* POZOR na display. Zdroj dával .ed-t-name plošně display:flex, jenže třída
   sedí jednou na <td>, jindy na <span>/<div> uvnitř <td>. Na buňce flex
   vyřadí buňku z rozvržení tabulky: jakmile se sousední buňka zalomí na dva
   řádky, první sloupec se nedotáhne na výšku řádku. Recenze si kvůli tomu
   musela držet vlastní opravu. Buňka proto zůstává buňkou a řádek s logem
   se skládá až v obalu uvnitř ní. */
span.ed-t-name,
div.ed-t-name {
    display: flex;
    align-items: baseline;
    gap: var(--ed-hang-gap);
    flex-wrap: wrap;
}

.ed-t-name img {
    flex: none;
    width: 22px;
    height: 22px;
    object-fit: contain;
    vertical-align: -0.35em;
    margin-right: 8px;
}

span.ed-t-name > img,
div.ed-t-name > img {
    align-self: center;
    margin-right: 0;
}

.ed-t-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--kt-ink);
}

/* Prázdná buňka dostane slovo, ne pomlčku. */
.ed-t-muted {
    color: var(--kt-ink-3);
    font-size: 0.88rem;
}

.ed-table-note {
    margin: 12px 0 0;
    max-width: var(--ed-measure);
    font-size: 0.82rem;
    color: var(--kt-ink-3);
}

.ed-table-note a {
    color: var(--kt-green);
}

/* ============================================================================
   6. FAQ
   ----------------------------------------------------------------------------
   Devět nezávislých harmonik sdílelo dvě vady: skoro neviditelný řádek
   a justify-content:space-between na šířce 1344px, takže přepínač seděl
   1250px daleko od otázky, ke které patří. Šířku řeší measure.
   ============================================================================ */
.ed-faq {
    max-width: var(--ed-read);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ed-faq--wide { max-width: var(--ed-measure); }

.ed-faq details {
    background: none;
    border: 1px solid var(--kt-line);
    border-left: 3px solid var(--kt-line-2);
    transition: border-color 0.15s ease;
}

.ed-faq details:hover {
    border-color: var(--kt-line-2);
}

/* Otevřená položka je stav, a stav nese hrana. */
.ed-faq details[open] {
    border-left-color: var(--kt-green);
}

.ed-faq summary {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 15px 18px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--kt-ink);
    list-style: none;
}

.ed-faq summary::-webkit-details-marker { display: none; }
.ed-faq summary::marker { content: ''; }

/* Šipka dolů, ne "+", které se otočí na "×" (to čte jako smazat).
   Kreslí se hranou, takže nepotřebuje kolečko ani datovou URL. */
.ed-faq summary::after {
    content: '';
    flex: none;
    margin-left: auto;
    width: 0.46em;
    height: 0.46em;
    border-right: 1.5px solid var(--kt-ink-2);
    border-bottom: 1.5px solid var(--kt-ink-2);
    transform: translateY(-0.2em) rotate(45deg);
    transition: transform 0.2s ease;
}

.ed-faq details[open] summary::after {
    transform: translateY(0.05em) rotate(225deg);
}

.ed-faq details[open] summary {
    border-bottom: 1px solid var(--kt-line);
}

.ed-faq-a,
.ed-faq details > div,
.ed-faq details > p {
    padding: 14px 18px 16px;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--kt-ink-2);
}

.ed-faq-a p { margin: 0 0 12px; }
.ed-faq-a p:last-child { margin-bottom: 0; }

.ed-faq-a a {
    color: var(--kt-green);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ============================================================================
   7. CALLOUT / UPOZORNĚNÍ / PRÁVNÍ POZNÁMKA
   ----------------------------------------------------------------------------
   Zdroj kreslil hranu přes `box-shadow: inset 3px 0 0` a podkládal ji
   gradientem. Inset je podpis zdrojového webu; hrana se dělá border-left.
   ============================================================================ */
.ed-callout {
    --acc: var(--kt-line-2);
    max-width: var(--ed-read);
    padding: 15px 18px;
    background: none;
    border: 1px solid var(--kt-line);
    border-left: 3px solid var(--acc);
    font-size: 0.96rem;
    line-height: 1.7;
    color: var(--kt-ink-2);
}

.ed-callout > :first-child { margin-top: 0; }
.ed-callout > :last-child  { margin-bottom: 0; }

.ed-callout strong { color: var(--kt-ink); }

.ed-callout--warn { --acc: var(--kt-warn); }

.ed-callout--legal {
    font-size: 0.85rem;
    color: var(--kt-ink-3);
    max-width: var(--ed-measure);
}

.ed-callout--wide { max-width: var(--ed-measure); }

.ed-callout-head {
    display: flex;
    align-items: baseline;
    gap: var(--ed-hang-gap);
    margin-bottom: 6px;
    font-weight: 800;
    color: var(--kt-ink);
}

.ed-callout-body > :first-child { margin-top: 0; }
.ed-callout-body > :last-child  { margin-bottom: 0; }

/* ============================================================================
   8. ODZNAK — první vysázený řádek, ne stužka přes roh
   ----------------------------------------------------------------------------
   Zdroj z nich dělal pilulky s výplní 8 %, rámečkem 25 % a rádiusem 9999px.
   Pilulka se na tomhle webu nepoužívá vůbec; odznak je sazba.
   ============================================================================ */
.ed-tag,
.ed-pill,
.ed-badge,
.jl-badge {
    --acc: var(--kt-ink-2);
    position: static;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    font-family: var(--font-display);
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--acc);
    white-space: nowrap;
}

/* Odznak uvnitř karty je první řádek obsahu, ne plovoucí štítek. */
.ed-card > .ed-tag,
.ed-card > .ed-pill,
.ed-card > .ed-badge,
.ed-card > .jl-badge {
    order: -1;
    margin-bottom: 6px;
}

/* Sémantika: zelená je vyhrazená hraně a stavu, odznak si ji nebere.
   Kladné se pozná jasem, varovné jedinou varovnou barvou. */
.ed-tag--ok,    .ed-pill--ok,    .ed-badge--ok    { --acc: var(--kt-ink); }
.ed-tag--warn,  .ed-pill--warn,  .ed-badge--warn  { --acc: var(--kt-warn); }
.ed-tag--muted, .ed-pill--muted, .ed-badge--muted { --acc: var(--kt-ink-3); }
.ed-tag--purple,.ed-pill--purple { --acc: var(--kt-ink-2); }

.ed-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    align-items: baseline;
}

/* ============================================================================
   9. HODNOCENÍ — pecka je doopravdy kruh, rádius si nechá
   ============================================================================ */
.ed-rating {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ed-rating-pips {
    display: inline-flex;
    gap: 3px;
}

.ed-rating-pip {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--kt-line-2);
}

.ed-rating-pip.is-on {
    background: var(--kt-green);
}

.ed-rating-pip.is-half {
    background: linear-gradient(90deg, var(--kt-green) 0 50%, var(--kt-line-2) 50% 100%);
}

.ed-rating-num {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--kt-ink);
}

/* ============================================================================
   10. ODDĚLOVAČ SEKCÍ — vlásečnice, ne prosvícený gradient
   ============================================================================ */
.ed-rule {
    border: 0;
    border-top: 1px solid var(--kt-line);
    height: 0;
    margin: 44px 0;
    background: none;
}

/* ============================================================================
   11. ROZVRŽENÍ — jak se využívá šířka stránky
   ----------------------------------------------------------------------------
   Samotné měřítko řádku udělá text čitelný, ale nechá vedle sebe prázdno.
   Pravidlo: souvislý text má VŽDY společníka (panel, mřížku, obrázek), nebo
   sedí v užším rámu stránky (.ed-frame). Nikdy ne úzký sloupec nalepený
   vlevo v 1600px rámu.
   ============================================================================ */
.ed-frame {
    width: 100%;
    max-width: var(--ed-frame);
    margin-inline: auto;
}

.ed-split {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

.ed-split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ed-split--aside-wide { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.ed-split--aside-slim { grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); }

.ed-split--reverse > :first-child { order: 2; }

/* Uvnitř sloupce se text neomezuje podruhé, jinak vznikne další prázdný pruh. */
.ed-split .ed-prose,
.ed-split .ed-prose > *,
.ed-split .ed-lead,
.ed-split .ed-steps,
.ed-split .ed-list,
.ed-split .ed-callout,
.ed-split .ed-faq {
    max-width: none;
}

/* Lepivý společník. Odsazení počítá s výškou sticky hlavičky. */
.ed-aside {
    position: sticky;
    top: calc(var(--nav-height, 80px) + 20px);
}

/* ── Panel faktů — společník textu ────────────────────────────────────────
   Není to plocha nad stránkou, takže povrch nemá. Řádky drží vlásečnice,
   stejně jako v tabulce — je to tabulka o dvou sloupcích. */
.ed-facts {
    display: block;
    padding: 0;
    background: none;
    border: 0;
    border-left: 3px solid var(--kt-line-2);
    padding-left: 16px;
}

.ed-facts-title {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kt-ink-2);
}

.ed-facts-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--kt-line);
}

.ed-facts-row:last-child { border-bottom: none; padding-bottom: 0; }
.ed-facts-row:first-of-type { padding-top: 0; }

.ed-facts-k {
    font-size: 0.8rem;
    color: var(--kt-ink-3);
}

.ed-facts-v {
    font-size: 0.95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--kt-ink);
    text-align: right;
}

/* ── Číselné pilíře — vodorovný pruh ──────────────────────────────────────
   Zdroj je slepoval přes 1px gap na barevném podkladu a schovával rohy
   pod overflow:hidden. Stačí hrana na každém pilíři. */
.ed-pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px 24px;
    background: none;
    border: 0;
}

.ed-pillar {
    padding: 0 0 0 13px;
    background: none;
    border-left: 3px solid var(--kt-line-2);
}

.ed-pillar-num {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--kt-ink);
    background: none;
    -webkit-text-fill-color: currentColor;
}

.ed-pillar-label {
    margin-top: 4px;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kt-ink-3);
}

/* ── FAQ ve dvou sloupcích — akordeon jinak nechá půl šířky ladem ───────── */
.ed-faq--2col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    /* align-items, ne align-content: bez toho se zavřené položky natáhnou na
       výšku otevřené ve stejném řádku a vzniknou vysoké prázdné rámečky. */
    align-items: start;
    gap: 8px 18px;
    max-width: none;
}

/* Klasický redakční rytmus: úzké čtení, široké figury. */
.ed-flow > * {
    max-width: var(--ed-read);
}

.ed-flow > .ed-bleed,
.ed-flow > .ed-table-wrap,
.ed-flow > .ed-grid,
.ed-flow > .ed-pillars,
.ed-flow > .ed-split,
.ed-flow > .ed-faq--2col,
.ed-flow > figure,
.ed-flow > img {
    max-width: none;
    width: 100%;
}

/* ============================================================================
   12. RESPONZIVITA
   ----------------------------------------------------------------------------
   Tabulka na mobilu: obal se posouvá vodorovně sám v sobě, ne celou
   stránkou. Tabulka si drží čitelnou minimální šířku, aby se sloupce
   nezmáčkly na jedno písmeno na řádek.
   ============================================================================ */
@media (max-width: 1100px) {
    .ed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    :root {
        --ed-body: 1rem;
        --ed-read: 100%;
    }

    .ed-card { padding: 18px 18px 18px 15px; }
    .ed-card--feature { padding: 22px 22px 22px 19px; }
    .ed-faq summary { padding: 14px 16px; font-size: 0.95rem; }
    .ed-faq-a { padding: 12px 16px 14px; }
    .ed-faq--2col { grid-template-columns: minmax(0, 1fr); }
    .ed-prose h2 { margin-top: 34px; }
    .ed-table th,
    .ed-table td { padding-right: 16px; }
}

@media (max-width: 700px) {
    /* Pod tuhle šířku se čtyřsloupcová tabulka nedá vysázet bez zmáčknutí.
       Obal proto dostane vodorovné posouvání a tabulka minimální šířku. */
    .ed-table { min-width: 34rem; }
    .ed-table th,
    .ed-table td { padding-right: 14px; }
    .ed-table td { padding-top: 11px; padding-bottom: 11px; }
}

@media (max-width: 640px) {
    .ed-grid,
    .ed-grid--2 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
    .ed-card { padding: 16px 16px 16px 13px; }
    .ed-lead, .ed-prose--lead { font-size: 1.04rem; }
    .ed-callout { padding: 14px 16px; }
    .ed-facts-row { flex-wrap: wrap; gap: 2px 16px; }
    .ed-facts-v { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    .ed-faq summary::after,
    a.ed-card,
    .ed-card--link,
    .ed-faq details,
    .ed-prose a {
        transition: none;
    }
}