/* ============================================================================
   EDITORIAL — sdílená obsahová vrstva RespinnersTV
   ----------------------------------------------------------------------------
   Web měl sedm paralelních obsahových systémů (.landing-editorial, .bp-ed-*,
   .idx-seo, .lot-*, .ca-*, .cs2-*, .jh-*) plus zhruba 1500 řádků inline <style>
   v PHP. Každý si po svém vymyslel nadpis sekce, kartu, tabulku, FAQ i odstavec,
   takže průvodce a SEO obsah vypadaly jako jiný, starší web než bonusové karty.

   Tenhle soubor je JEDINÝ zdroj pravdy pro dlouhý obsah. Všechny hodnoty jsou
   odvozené z kontraktu bonusové karty (.bonus-card-h, core/shared.css:1967):
     povrch  linear-gradient(160deg, rgba(20,15,30,.80), rgba(10,8,15,.95))
     rámeček 1px var(--alpha-white-5), rádius 16px, BEZ klidového stínu
     čip     24-28px, gradient magenta→purple, bílá 700

   PRAVIDLA:
     • Odstavec nikdy pod 0.95rem a vždy s max-width (--ed-read).
     • Nadpis je nadpis. Drobné šedé verzálky nesmí zastupovat <h2>.
     • Barvy jen azurová / magenta / fialová na téměř černé.
     • Každý blokový wrapper musí mít display:block, protože base.css
       dává display:flex všem <section>.
   ============================================================================ */

/* ── Základní blok ────────────────────────────────────────────────────────
   .ed je neutrální obal sekce obsahu. Drží blokový tok proti base.css. */
.ed,
.ed-prose,
.ed-card,
.ed-callout,
.ed-faq,
.ed-table-wrap {
    display: block;
}

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

/* 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: o něco větší a světlejší, ať se do textu dá vejít. */
.ed-lead,
.ed-prose--lead {
    max-width: var(--ed-read);
    font-size: 1.12rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.88);
}

/* Tučné nesmí předstírat odkaz — proto bílá, ne azurová. */
.ed-prose strong,
.ed-prose b {
    color: var(--text-primary);
    font-weight: 700;
}

.ed-prose em {
    color: rgba(255, 255, 255, 0.75);
    font-style: italic;
}

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

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

.ed-prose h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    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;
}

/* Vycentrovaný sloupec obsahu (sekce, které mají stát uprostřed stránky). */
.ed-center {
    margin-inline: auto;
}

/* ── Odkazy v textu ───────────────────────────────────────────────────────
   base.css má globální `a { color: var(--color-secondary) }` = magenta, takže
   každý blok, který si barvu nepřepsal, míchal magentové a azurové odkazy
   v jednom průvodci. Sjednoceno na azurovou s tlumeným podtržením.

   :not() guard je POVINNÝ. `.landing-editorial a` má specificitu (0,1,1)
   a přebíjela `.rsp-btn--primary` (0,1,0), takže affiliate tlačítka uvnitř
   textu měla azurový podtržený text na azurovo-magentovém gradientu, tedy
   prakticky nečitelný. Týkalo se to všech hlavních CTA na /nejlepsi-online-casino. */
.ed-prose a:not([class]),
.ed-prose a[class=""],
.ed-prose a:not([class*="btn"]):not([class*="cta"]):not([class*="card"]) {
    color: var(--neon-cyan);
    text-decoration: underline;
    text-decoration-color: rgba(0, 245, 255, 0.35);
    text-underline-offset: 3px;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

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

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

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

/* ============================================================================
   2. HLAVIČKA SEKCE
   ----------------------------------------------------------------------------
   Kanonická jednotka je .rsp-section-label (core/shared.css:208). Tady jen
   modifikátory, ať se nevyrábí čtvrtý paralelní systém nadpisů.
   ============================================================================ */

/* Nadpis nad textovým blokem uvnitř průvodce — menší než hlavní sekce stránky. */
.rsp-section-label--sub h2,
.rsp-section-label--sub h3 {
    font-size: var(--ed-h2);
}

/* Eyebrow nad nadpisem (např. "Kapitola 3") nesmí být tažený vlevo od H2. */
.rsp-section-label--stacked {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

/* Svislá gradientová linka jako kotva sekce. */
.ed-head {
    display: block;
    position: relative;
    padding-left: 18px;
    margin: 0 0 18px;
}

.ed-head::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 4px;
    border-radius: 2px;
    background: var(--gradient-cyber);
}

.ed-head h2,
.ed-head h3 {
    margin: 0;
    font-size: var(--ed-h2);
    font-weight: 900;
    line-height: 1.25;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    text-transform: none;
}

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

/* Druhá polovina nadpisu v <span> dostane gradient — stejná konvence
   jako .rsp-section-label na zbytku webu. */
.ed-head h2 span,
.ed-head h3 span {
    background: var(--gradient-neon-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ed-head p {
    margin: 6px 0 0;
    font-size: var(--ed-small);
    color: var(--text-secondary);
}

/* Jediný povolený styl eyebrow. Nikdy nesmí být jediným nadpisem bloku. */
.ed-eyebrow {
    display: inline-block;
    font-family: var(--font-accent, 'Exo 2', sans-serif);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--neon-cyan);
}

/* ============================================================================
   3. OBSAHOVÁ KARTA — přesně povrch bonusové karty
   ============================================================================ */
.ed-card {
    --acc: var(--neon-cyan);
    position: relative;
    padding: 28px;
    background: linear-gradient(160deg, rgba(20, 15, 30, 0.80), rgba(10, 8, 15, 0.95));
    border: 1px solid var(--alpha-white-5);
    border-radius: var(--radius-card);
}

.ed-card--compact { padding: 20px; }
.ed-card--feature { padding: 32px; }

/* Akcentovaná karta: barevný rámeček plus horní lišta. --acc se dědí,
   takže se dá přebarvit jedním deklarátorem na rodiči (stejně jako .bp-dedek). */
.ed-card--accent {
    border-color: color-mix(in srgb, var(--acc) 22%, transparent);
    overflow: hidden;
}

.ed-card--accent::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--acc), transparent 85%);
}

.ed-card--magenta { --acc: var(--neon-magenta); }
.ed-card--purple  { --acc: var(--neon-purple); }

/* Zvednutí jen tam, kde je karta odkaz. */
a.ed-card,
.ed-card--link {
    text-decoration: none;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

a.ed-card:hover,
.ed-card--link:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--acc) 40%, transparent);
    box-shadow: 0 16px 40px var(--alpha-black-40);
}

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

/* Nadpis karty — váha jako u karet bonusů, ne jako drobný popisek. */
.ed-card-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 10px;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--text-primary);
    text-transform: none;
    letter-spacing: 0;
}

.ed-card-text {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--text-secondary);
}

/* Ikonový čip — nahrazuje holé emoji používané jako ikona sekce. */
.ed-ico {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-tile);
    background: linear-gradient(150deg, rgba(40, 30, 60, 0.95), rgba(20, 15, 30, 0.95));
    border: 1px solid color-mix(in srgb, var(--acc, var(--neon-cyan)) 25%, transparent);
    color: var(--acc, var(--neon-cyan));
    font-size: 1rem;
    line-height: 1;
}

.ed-ico svg {
    width: 19px;
    height: 19px;
}

.ed-ico--lg {
    width: 48px;
    height: 48px;
}

.ed-ico--lg svg {
    width: 23px;
    height: 23px;
}

/* Mřížka obsahových karet — auto-fit, aby nevznikaly prázdné fantomové sloupce. */
.ed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    max-width: var(--ed-measure);
}

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

/* ============================================================================
   4. SEZNAMY — číslovaný čip je nejrozpoznatelnější prvek dobrého designu
   ----------------------------------------------------------------------------
   POZOR: <li> musí být display:block s absolutně umístěným čipem.
   Varianta s display:flex (page-landing.css .steps-list) rozbíjí větu na
   sloupce, protože každý <strong> a textový uzel se stane flex položkou.
   ============================================================================ */
.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: 44px;
    margin-bottom: 14px;
    counter-increment: ed-step;
    font-size: var(--ed-body);
    line-height: 1.7;
    color: var(--text-secondary);
}

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

.ed-steps li::before {
    content: counter(ed-step);
    position: absolute;
    left: 0;
    top: 2px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--neon-magenta), var(--twitch-purple));
    border-radius: var(--radius-chip);
    color: #fff;
    font-family: var(--font-accent, 'Exo 2', sans-serif);
    font-size: 0.82rem;
    font-weight: 700;
}

.ed-steps--lg li {
    padding-left: 54px;
    margin-bottom: 18px;
}

.ed-steps--lg li::before {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-tile);
    font-size: 0.95rem;
    font-weight: 800;
}

/* Odrážkový seznam s azurovou tečkou */
.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: 24px;
    margin-bottom: 10px;
    font-size: var(--ed-body);
    line-height: 1.7;
    color: var(--text-secondary);
}

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

.ed-list li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 0.72em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--neon-cyan);
    opacity: 0.75;
}

/* Klady / zápory — nahrazuje prostý text "Klady: ... Zápory: ..." */
.ed-list--pro li::before { background: var(--neon-cyan); opacity: 1; }
.ed-list--con li::before { background: var(--neon-magenta); opacity: 1; }

/* Seznam, kde každá položka je karta */
.ed-steps--cards li,
.ed-list--cards li {
    padding: 18px 20px 18px 60px;
    margin-bottom: 12px;
    background: linear-gradient(160deg, rgba(20, 15, 30, 0.80), rgba(10, 8, 15, 0.95));
    border: 1px solid var(--alpha-white-5);
    border-radius: var(--radius-card);
}

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

/* ============================================================================
   5. TABULKA
   ----------------------------------------------------------------------------
   Model je .gw-winners-table (page-giveaways.css), která to už dělá správně.
   Devět stránek renderovalo stejný výpis bez zebry, bez hoveru a přes celou
   šířku 1400px, takže buňky byly od sebe 500px.
   ============================================================================ */
.ed-table-wrap {
    max-width: var(--ed-measure);
    overflow-x: auto;
    border-radius: var(--radius-card);
    border: 1px solid var(--alpha-white-8);
    background: linear-gradient(160deg, rgba(20, 15, 30, 0.80), rgba(10, 8, 15, 0.95));
    -webkit-overflow-scrolling: touch;
}

.ed-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.ed-table th {
    padding: 16px 22px;
    text-align: left;
    font-family: var(--font-accent, 'Exo 2', sans-serif);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(0, 245, 255, 0.75);
    background: rgba(0, 245, 255, 0.05);
    border-bottom: 1px solid rgba(0, 245, 255, 0.12);
    white-space: nowrap;
}

.ed-table td {
    padding: 15px 22px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--alpha-white-5);
    vertical-align: middle;
}

.ed-table tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.022);
}

.ed-table tbody tr {
    transition: background 0.15s ease;
}

.ed-table tbody tr:hover td {
    background: rgba(0, 245, 255, 0.05);
}

.ed-table tbody tr:last-child td {
    border-bottom: none;
}

/* Zvýraznění místo jednotné šedi */
.ed-t-name {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
    font-weight: 700;
}

.ed-t-name img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex: none;
}

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

/* Prázdná buňka dostane slovo, ne pomlčku (a tím mizí i zakázané em-dashe). */
.ed-t-muted {
    color: rgba(255, 255, 255, 0.38);
    font-size: 0.88rem;
}

/* Partnerský řádek má reálnou váhu, ne neviditelný 4% nádech.
   Lišta patří JEN na první buňku, jinak se svislý pruh nakreslí na začátku
   každé buňky a z řádku je mřížka. */
.ed-table tr.is-partner td {
    background: color-mix(in srgb, var(--acc, var(--neon-magenta)) 7%, transparent);
}

.ed-table tr.is-partner td:first-child {
    box-shadow: inset 3px 0 0 var(--acc, var(--neon-magenta));
}

.ed-table tr.is-partner:hover td {
    background: color-mix(in srgb, var(--acc, var(--neon-magenta)) 12%, transparent);
}

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

.ed-table-note a {
    color: rgba(0, 245, 255, 0.8);
}

/* ============================================================================
   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: 10px;
}

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

.ed-faq details {
    background: linear-gradient(160deg, rgba(20, 15, 30, 0.80), rgba(10, 8, 15, 0.95));
    border: 1px solid var(--alpha-white-8);
    border-radius: var(--radius-card);
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.ed-faq details:hover {
    border-color: var(--alpha-cyan-20);
}

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

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

.ed-faq summary::after {
    content: '';
    margin-left: auto;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: rgba(0, 245, 255, 0.1);
    border: 1px solid rgba(0, 245, 255, 0.28);
    /* šipka dolů — nikdy "+", které se otočí na "×" (to čte jako smazat) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300f5ff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px 15px;
    transition: transform 0.25s ease;
}

.ed-faq details[open] {
    border-color: rgba(0, 245, 255, 0.28);
}

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

.ed-faq details[open] summary::after {
    transform: rotate(180deg);
}

.ed-faq-a,
.ed-faq details > div,
.ed-faq details > p {
    padding: 16px 22px 20px;
    margin: 0;
    font-size: 0.96rem;
    line-height: 1.75;
    color: var(--text-secondary);
}

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

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

/* ============================================================================
   7. CALLOUT / UPOZORNĚNÍ / PRÁVNÍ POZNÁMKA
   ============================================================================ */
.ed-callout {
    --acc: var(--neon-cyan);
    max-width: var(--ed-read);
    padding: 18px 22px;
    border-radius: var(--radius-card);
    border: 1px solid color-mix(in srgb, var(--acc) 25%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 8%, transparent), transparent);
    box-shadow: inset 3px 0 0 var(--acc);
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

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

.ed-callout strong { color: var(--text-primary); }

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

.ed-callout--legal {
    --acc: rgba(255, 255, 255, 0.18);
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.55);
    max-width: var(--ed-measure);
}

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

/* Hlavička calloutu s ikonovým čipem */
.ed-callout-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    font-weight: 800;
    color: var(--text-primary);
}

/* ============================================================================
   8. PILL / TAG / BADGE
   ----------------------------------------------------------------------------
   Jednotný vzorec, který web už používá všude kromě obsahových bloků:
   výplň akcentu na 8 %, rámeček 25 %, text 100 %.
   ============================================================================ */
.ed-tag,
.ed-pill,
.ed-badge {
    --acc: var(--neon-cyan);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-accent, 'Exo 2', sans-serif);
    text-transform: uppercase;
    background: color-mix(in srgb, var(--acc) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--acc) 25%, transparent);
    color: var(--acc);
    white-space: nowrap;
}

.ed-tag {
    padding: 5px 12px;
    border-radius: var(--radius-chip);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.06em;
}

.ed-pill {
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.ed-badge {
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}

/* Sémantika se mapuje na značkovou paletu, ne na semafor.
   Kladné = azurová, pozor = magenta, neutrální = tlumená bílá. */
.ed-tag--ok,    .ed-pill--ok    { --acc: var(--neon-cyan); }
.ed-tag--warn,  .ed-pill--warn  { --acc: var(--neon-magenta); }
.ed-tag--muted, .ed-pill--muted { --acc: rgba(255, 255, 255, 0.45); }
.ed-tag--purple,.ed-pill--purple{ --acc: var(--neon-purple); }

.ed-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* ============================================================================
   9. HODNOCENÍ — azurové pecky místo zlatých hvězd
   ============================================================================ */
.ed-rating {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

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

.ed-rating-pip {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
}

.ed-rating-pip.is-on {
    background: var(--neon-cyan);
    box-shadow: 0 0 8px rgba(0, 245, 255, 0.5);
}

/* Půlka bodu — pro hodnocení typu 4,5 z 5. */
.ed-rating-pip.is-half {
    background: linear-gradient(90deg, var(--neon-cyan) 0 50%, rgba(255, 255, 255, 0.14) 50% 100%);
}

.ed-rating-num {
    font-family: var(--font-accent, 'Exo 2', sans-serif);
    font-size: 0.9rem;
    font-weight: 900;
    color: var(--text-primary);
}

/* ============================================================================
   10. ODDĚLOVAČ SEKCÍ
   ============================================================================ */
.ed-rule {
    border: 0;
    height: 1px;
    margin: 44px 0;
    background: linear-gradient(90deg, transparent, var(--alpha-white-8) 20%, var(--alpha-white-8) 80%, transparent);
}

/* ============================================================================
   11. ROZVRŽENÍ — jak se využívá šířka stránky
   ----------------------------------------------------------------------------
   Samotné měřítko řádku udělá text čitelný, ale nechá vedle sebe prázdno.
   Tady jsou rozvržení, která šířku skutečně zaplní. 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), aby neplaval v prázdnu.
   Nikdy ne úzký sloupec nalepený vlevo v 1600px rámu.
   ============================================================================ */

/* ── Rám pro čtecí typy stránek (článek, recenze, metodika) ───────────────
   Stránka se zúží k obsahu, místo aby obsah plaval v širokém rámu. */
.ed-frame {
    width: 100%;
    max-width: var(--ed-frame);
    margin-inline: auto;
}

/* ── Split: obsah + společník ─────────────────────────────────────────────
   Základní nástroj proti prázdné pravé polovině. Text drží čitelnou šířku
   sám od sebe, protože ho omezuje sloupec, ne max-width. */
.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); }

/* Prohozené pořadí, ať se stejný vzor neopakuje na každé sekci. */
.ed-split--reverse > :first-child { order: 2; }

/* Uvnitř sloupce se text neomezuje podruhé, jinak by vznikl 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: drží se u textu při scrollu dlouhé sekce. */
.ed-aside {
    position: sticky;
    top: calc(var(--nav-height, 80px) + 20px);
}

@media (max-width: 980px) {
    .ed-split,
    .ed-split--even,
    .ed-split--aside-wide,
    .ed-split--aside-slim { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .ed-split--reverse > :first-child { order: 0; }
    .ed-aside { position: static; }
}

/* ── Panel faktů — typický společník textu ────────────────────────────────
   Svislý seznam štítek/hodnota, vizuálně jiný než běžná karta, ať sekce
   nevypadá jako dvě stejné kachle vedle sebe. */
.ed-facts {
    display: block;
    padding: 22px 24px;
    border-radius: var(--radius-card);
    border: 1px solid var(--alpha-white-8);
    background:
        radial-gradient(ellipse 90% 60% at 100% 0%, color-mix(in srgb, var(--acc, var(--neon-cyan)) 9%, transparent), transparent 70%),
        linear-gradient(160deg, rgba(20, 15, 30, 0.85), rgba(10, 8, 15, 0.96));
}

.ed-facts-title {
    margin: 0 0 14px;
    font-family: var(--font-accent, 'Exo 2', sans-serif);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--acc, var(--neon-cyan));
}

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

.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: rgba(255, 255, 255, 0.45);
}

.ed-facts-v {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: right;
}

/* ── Číselné pilíře — vodorovný pruh, který zaplní celou šířku ─────────── */
.ed-pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1px;
    border-radius: var(--radius-card);
    overflow: hidden;
    border: 1px solid var(--alpha-white-8);
    background: var(--alpha-white-8);
}

.ed-pillar {
    padding: 22px 24px;
    background: linear-gradient(160deg, rgba(20, 15, 30, 0.92), rgba(10, 8, 15, 0.97));
}

.ed-pillar-num {
    font-family: var(--font-accent, 'Exo 2', sans-serif);
    font-size: 1.7rem;
    font-weight: 900;
    line-height: 1;
    background: var(--gradient-neon-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ed-pillar-label {
    margin-top: 8px;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

/* ── 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;
    font-size: var(--ed-h2);
    font-weight: 900;
    line-height: 1.2;
    color: var(--text-primary);
    text-transform: none;
    letter-spacing: -0.01em;
}

.ed-band-head h2 span {
    background: var(--gradient-neon-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ed-band-head p {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--text-secondary);
}

/* ── FAQ ve dvou sloupcích — akordeon jinak nechá půl šířky ladem ───────── */
.ed-faq--2col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(460px, 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: 12px;
    max-width: none;
}

/* ── Text obtékající vlastní šířku, ale prvky, co textem nejsou, jdou přes
   celý sloupec (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
   ============================================================================ */
@media (max-width: 900px) {
    :root {
        --ed-body: 1rem;
        --ed-read: 100%;
    }

    .ed-card { padding: 22px; }
    .ed-card--feature { padding: 24px; }
    .ed-table th { padding: 14px 16px; }
    .ed-table td { padding: 13px 16px; }
    .ed-faq summary { padding: 16px 18px; font-size: 0.95rem; }
    .ed-faq-a { padding: 14px 18px 18px; }
    .ed-prose h2 { margin-top: 34px; }
}

@media (max-width: 600px) {
    .ed-card { padding: 18px; }
    .ed-steps li { padding-left: 38px; }
    .ed-steps li::before { width: 24px; height: 24px; font-size: 0.74rem; }
    .ed-lead, .ed-prose--lead { font-size: 1.05rem; }
    .ed-callout { padding: 16px 18px; }
}

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

    a.ed-card:hover,
    .ed-card--link:hover {
        transform: none;
    }
}