/* ============================================================================
   /casino-automaty — stránková vrstva NAD components/editorial.css
   ----------------------------------------------------------------------------
   Dřív žilo 175 řádků v <style> uvnitř pages/casino-automaty.php (za footerem)
   a kopírovalo .bp-ed-* z page-bonuses.css, který se na téhle route vůbec
   nenačítá. Půlka stránky proto renderovala bez stylu a zbytek běžel na druhé
   azurové #00d4ff, která neodpovídá --neon-cyan (#00f5ff).

   Teď je tady jen to, co editorial.css neumí:
     • rytmus sekcí (jedno pravidlo místo šesti identických .ca-*-section)
     • mřížka casin (povrch a CTA zrcadlí .bonus-card-h / .cta-btn-h ze shared.css)
     • drobné dolady RTP tabulky, kroků a interních odkazů

   PRAVIDLA: jen azurová / magenta / fialová na téměř černé. Zlatá výhradně pro
   značku Herna u dědka (stejně jako .bp-dedek v shared.css). Žádný semafor.
   ============================================================================ */

.ca-page { color: var(--text-primary); }

/* ── Rytmus sekcí ─────────────────────────────────────────────────────────
   base.css dává `section:not(.hero-section) + section:not(.hero-section)`
   margin-top 2rem (specificita 0,2,2), takže mezi sekcemi vznikala mrtvá
   stovka pixelů navíc k paddingu. Nulujeme a rozestupy řídí jen padding. */
.ca-page section:not(.hero-section) + section:not(.hero-section) {
    margin-top: 0;
}

.ca-page section:not(.hero-section) + .seo-guide {
    margin-top: 40px;
}

/* Jedno pravidlo pro všechny sekce průvodce. Dřív jich bylo šest (.ca-edu-section,
   .ca-top-section, .ca-types-section, .ca-rtp-section, .ca-guide-section,
   .ca-myths-section) a na sedmou (Automaty zdarma) se zapomnělo, takže se
   slila s předchozí. */
.ca-page .ca-sec {
    display: block;
    padding-block: 56px 32px;
    border-top: 1px solid var(--alpha-white-6);
}

.ca-page .ca-sec:first-child {
    border-top: 0;
    padding-block-start: 4px;
}

/* ── Nadpisy: jedna škála pro celou stránku ───────────────────────────────
   Kanonická jednotka je .rsp-section-label (shared.css). H1 dostane vlastní,
   větší clamp, aby nadpis stránky nebyl stejně velký jako nadpis sekce. */
.ca-page .rsp-section-label {
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.ca-page .rsp-section-label h1 {
    font-size: clamp(2.1rem, 3.2vw, 2.9rem);
    line-height: 1.12;
    letter-spacing: 0.02em;
}

/* ── Hero ─────────────────────────────────────────────────────────────────
   Longhand padding-block, aby nepřebil padding-inline z section.rsp-container. */
.ca-page .ca-hero {
    padding-block: 40px 28px;
}

.ca-page .ca-hero .rsp-section-label {
    margin-bottom: 0;
}

/* .ed-lead nese typografii i measure, tady zůstává jen rytmus. */
.ca-page .ca-intro {
    margin: 18px 0 22px;
}

.ca-page .ca-badges .ed-pill {
    padding: 6px 14px;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
}

.ca-page .ca-badges .ed-pill svg {
    flex: none;
    width: 13px;
    height: 13px;
}

/* Ikona uvnitř věty (upozornění, právní poznámka). Nahrazuje ⚠️ emoji,
   barvu dědí z --acc rodičovského .ed-callout. */
.ca-ico-inline {
    display: inline-flex;
    margin-right: 9px;
    vertical-align: -3px;
    color: var(--acc, var(--neon-cyan));
}

.ca-ico-inline svg {
    width: 16px;
    height: 16px;
}

.ca-disclaimer .ca-ico-inline {
    color: var(--alpha-white-40);
}

/* Odkaz v upozornění. :not() guard je povinný, jinak by pravidlo přebilo
   gradientová affiliate tlačítka a napsalo na ně nečitelnou azurovou. */
.ca-page .ed-callout a:not([class*="btn"]):not([class*="cta"]):not([class*="card"]) {
    color: rgba(var(--neon-cyan-rgb), 0.8);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ca-page .ed-callout a:not([class*="btn"]):not([class*="cta"]):not([class*="card"]):hover {
    color: var(--neon-cyan);
}

/* ── Mřížka casin ─────────────────────────────────────────────────────────
   Povrch je doslova kontrakt bonusové karty (.bonus-card-h, shared.css):
   gradient 160deg, rámeček alpha-white-5, rádius 16px, padding 28px,
   žádný klidový stín. --acc drží značkový akcent (magenta pro exkluzivní
   partnery, zlatá pro Hernu u dědka, jinak azurová). */
.ca-page .ca-casinos {
    padding-block: 0 48px;
}

.ca-section-sub {
    margin: 0;
}

.ca-casino-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 26px;
}

.ca-casino-card {
    --acc: var(--neon-cyan);
    position: relative;
    display: flex;
    flex-direction: column;
    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);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

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

.ca-casino-card--featured {
    border-color: color-mix(in srgb, var(--acc) 26%, transparent);
}

.ca-casino-card--magenta { --acc: var(--neon-magenta); }
.ca-casino-card--gold    { --acc: #ffb43d; }

/* .ed-pill si nastavuje vlastní --acc, tady ho vracíme na akcent karty. */
.ca-casino-card .ed-pill { --acc: inherit; }

.ca-casino-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 46px;
    margin-bottom: 16px;
}

.ca-casino-logo {
    height: 42px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
    object-position: left center;
}

.ca-casino-name-fallback {
    font-family: var(--font-display, 'Montserrat'), sans-serif;
    font-size: 1.05rem;
    font-weight: 900;
    color: var(--text-primary);
}

.ca-featured-tag {
    flex: none;
    gap: 5px;
}

.ca-featured-tag svg {
    width: 11px;
    height: 11px;
}

/* Bonus je headline karty, ne popiska vpravo dole. */
.ca-casino-bonus {
    font-family: var(--font-display, 'Montserrat'), sans-serif;
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--acc);
}

.ca-casino-subtitle {
    margin: 10px 0 18px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* .ed-steps primitivum, jen zmenšené na velikost karty. */
.ca-casino-steps {
    max-width: none;
    margin: 0 0 22px;
}

.ca-casino-steps li {
    padding-left: 36px;
    margin-bottom: 10px;
    font-size: 0.88rem;
    line-height: 1.55;
}

.ca-casino-steps li::before {
    top: 0;
    width: 26px;
    height: 26px;
    font-size: 0.74rem;
}

/* CTA = přesně .cta-btn-h ze shared.css, tady jen dorovnání na spodní hranu,
   aby tlačítka v řadě seděla na jedné lince i u karet s delším textem. */
.ca-btn {
    margin-top: auto;
}

.ca-casino-card--magenta .ca-btn {
    background: linear-gradient(120deg, var(--neon-magenta) 0%, var(--neon-purple) 100%);
    border-color: rgba(var(--neon-magenta-rgb), 0.45);
}

.ca-casino-card--gold .ca-btn {
    background: linear-gradient(135deg, #ffb43d, #ff6a3d);
    border-color: rgba(255, 180, 61, 0.45);
    color: #1a1206;
}

/* ============================================================================
   ROZVRŽENÍ STRÁNKY — podpis /casino-automaty: MŘÍŽKY PŘES CELOU ŠÍŘKU
   ----------------------------------------------------------------------------
   Stránka běžela jako 70ch sloupec nalepený vlevo v 1500px rámu, takže vedle
   každého odstavce zůstávalo 700 a víc pixelů prázdna. Pravidlo pro tuhle
   route: text má vždy společníka vpravo (panel čísel, panel faktů, upozornění)
   a všechno, co text není, jde přes celou šířku kontejneru.
   Aby stránka neměla shora dolů jeden rytmus, střídají se čtyři různé útvary:
     hero split + pruh čísel → panel faktů → souvislý pruh (band) →
     dlaždice typů → tabulka → dvousloupcové kroky → tři sloupce textu →
     mřížka mýtů s textovou buňkou → FAQ ve dvou sloupcích.
   ============================================================================ */

/* ── Hero: text vlevo, čtyři čísla vpravo ────────────────────────────────── */
.ca-page .ca-hero-split {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 40px;
    margin-top: 22px;
}

.ca-page .ca-hero-split .ca-intro {
    margin: 0 0 20px;
    max-width: 62ch;   /* měřítko řádku drží text, ne šířku sloupce */
}

.ca-hero-pillars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ca-hero-pillars .ed-pillar-num { font-size: 1.9rem; }

/* ── Text + panel faktů (Co jsou automaty) ───────────────────────────────── */
.ca-page .ca-lead-split {
    gap: 44px;
    margin-bottom: 30px;
}

.ca-page .ca-lead-split .ed-lead { max-width: 64ch; }

/* Panel faktů je na 700px široko moc rozvleklý, proto řádky ve dvou sloupcích. */
.ca-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 28px;
    align-content: start;
}

.ca-facts .ed-facts-title { grid-column: 1 / -1; }

.ca-facts .ed-facts-row:nth-child(2),
.ca-facts .ed-facts-row:nth-child(3) { padding-top: 0; }

.ca-facts .ed-facts-row:nth-last-child(2) { border-bottom: none; }

/* ── Mřížky obsahových karet ──────────────────────────────────────────────
   Čtyři karty = čtyři sloupce přes celý kontejner. Kartu nesmí nikdy
   omezovat measure, jinak vznikne prázdný pruh vpravo. */
.ca-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: none;
}

/* ── „Jak vybrat": jeden souvislý pruh místo čtyř plovoucích karet ────────
   Jiný útvar než mřížka karet o dvě sekce výš, i když je obsah příbuzný. */
.ca-choose-band {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid var(--alpha-white-8);
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--alpha-white-8);
}

.ca-choose-cell {
    padding: 26px 24px 28px;
    background:
        radial-gradient(ellipse 120% 70% at 50% 0%, rgba(var(--neon-cyan-rgb), 0.07), transparent 70%),
        linear-gradient(160deg, rgba(20, 15, 30, 0.92), rgba(10, 8, 15, 0.97));
}

.ca-choose-cell .ed-card-title {
    display: block;
    margin-bottom: 12px;
}

.ca-choose-cell .ed-ico {
    display: flex;
    margin-bottom: 12px;
}

/* ── Typy automatů: svislé dlaždice s velkou ikonou ──────────────────────── */
.ca-type-card .ed-card-title {
    display: block;
}

.ca-type-card .ed-ico {
    display: flex;
    width: 46px;
    height: 46px;
    margin-bottom: 14px;
}

.ca-type-card .ed-ico svg {
    width: 22px;
    height: 22px;
}

/* ── RTP: úvod vlevo, varování vpravo, tabulka pod tím přes celou šířku ─── */
.ca-page .ca-rtp-intro {
    gap: 40px;
    margin-bottom: 26px;
    align-items: stretch;
}

.ca-page .ca-rtp-intro .ed-lead { max-width: 62ch; }

.ca-page .ca-rtp-intro .ed-callout {
    display: flex;
    align-items: center;
    margin-top: 0;   /* .ca-rtp-note dřív odsazovalo od tabulky nad sebou */
    max-width: none;
}

/* ── Kroky „jak hrát": dva sloupce karet, ne 780px sloupec nalepený vlevo ── */
.ca-page .ca-howto-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    max-width: none;
}

.ca-page .ca-howto-grid li { margin-bottom: 0; }

/* ── Automaty zdarma: tři textové sloupce (úvod + dvě témata) ────────────── */
.ca-page .ca-free-cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
}

.ca-page .ca-free-cols > .ed-lead { max-width: none; }

/* ── Mýty: úvodní text je první buňkou mřížky, takže 5 karet + text = 3×2 ── */
.ca-myth-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
}

/* Úvodní text je buňka mřížky, ne osiřelý odstavec nad ní, proto kotva vlevo
   (stejná gradientová linka jako .ed-head), ať čte jako záměr. */
.ca-myth-intro {
    display: flex;
    align-items: center;
    position: relative;
    padding: 6px 20px 6px 20px;
}

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

.ca-myth-intro .ed-lead { max-width: none; margin: 0; }

/* ── RTP tabulka ──────────────────────────────────────────────────────────
   Základ je .ed-table. Hodnotové čipy dřív nesly semafor (#3ddc84 zelená,
   #ff8a65 oranžová) plus zlaté hvězdičky, tedy čtyři cizí odstíny v jedné
   tabulce. Silné = azurová, průměrné = tlumená bílá, slabé = magenta. */
.ca-rtp-val {
    display: inline-block;
    padding: 3px 9px;
    border-radius: var(--radius-chip);
    font-size: 0.85rem;
    font-weight: 800;
    white-space: nowrap;
}

.ca-rtp-high {
    color: var(--neon-cyan);
    background: rgba(var(--neon-cyan-rgb), 0.12);
    border: 1px solid rgba(var(--neon-cyan-rgb), 0.28);
}

.ca-rtp-mid {
    color: var(--alpha-white-70);
    background: var(--alpha-white-6);
    border: 1px solid var(--alpha-white-10);
}

.ca-rtp-low {
    color: var(--neon-magenta);
    background: rgba(var(--neon-magenta-rgb), 0.1);
    border: 1px solid rgba(var(--neon-magenta-rgb), 0.28);
}

.ca-rtp-table tr.ca-rtp-best td {
    background: rgba(var(--neon-cyan-rgb), 0.04);
}

.ca-rtp-table tr.ca-rtp-warn td {
    background: rgba(var(--neon-magenta-rgb), 0.04);
}

.ca-rtp-table tr.ca-rtp-best:hover td,
.ca-rtp-table tr.ca-rtp-warn:hover td {
    background: rgba(var(--neon-cyan-rgb), 0.07);
}

/* Doporučení: azurový pětisegmentový ukazatel místo zlatých ⭐ emoji. */
.ca-rtp-rec {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.ca-rtp-rec .ed-rating-pips {
    flex: none;
}

.ca-rtp-note {
    margin-top: 16px;
}

/* ── Kroky průvodce ───────────────────────────────────────────────────────
   .ed-steps--lg --cards dělá čip i povrch, tady jen měřítko textu.
   Bez max-width běžel popis kroku přes celých 1344 px na jeden řádek. */
.ca-steps-grid {
    max-width: 780px;
    margin-bottom: 0;
}

.ca-steps-grid li h3 {
    margin: 0 0 6px;
    font-family: var(--font-display, 'Montserrat'), sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.35;
    color: var(--text-primary);
    letter-spacing: 0;
    text-transform: none;
}

.ca-steps-grid li p {
    margin: 0;
    font-size: 0.96rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

/* Odkaz v textu kroku. Cílíme na konkrétní třídu, ne na potomka `a`,
   aby pravidlo nemohlo přebít gradientová affiliate tlačítka. */
.ca-page a.ca-inline-link {
    color: var(--neon-cyan);
    text-decoration: underline;
    text-decoration-color: rgba(var(--neon-cyan-rgb), 0.35);
    text-underline-offset: 3px;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.ca-page a.ca-inline-link:hover {
    color: var(--text-primary);
    text-decoration-color: var(--neon-cyan);
}

/* ── Mýty ─────────────────────────────────────────────────────────────────
   Dřív ❌ / ✅ emoji plus #ff6464 a #3ddc84. Teď SVG v .ed-badge,
   mýtus = magenta, pravda = azurová. */
.ca-myth-verdict {
    margin-bottom: 12px;
    padding: 5px 11px;
    font-size: 0.64rem;
}

.ca-myth-verdict svg {
    flex: none;
    width: 12px;
    height: 12px;
}

.ca-myth--true .ca-myth-verdict { --acc: var(--neon-cyan); }
.ca-myth--false .ca-myth-verdict { --acc: var(--neon-magenta); }

.ca-myth .ed-card-title {
    font-size: 1rem;
}

/* ── Přečti také ──────────────────────────────────────────────────────────
   Byl to sloupec odkazů jako v patičce. Teď plnohodnotné karty s ikonovým
   čipem a šipkou na hover. */
.ca-related-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 34px;   /* místo pro šipku, ať nepřekryje popisek */
}

.ca-related-txt {
    display: block;
    min-width: 0;
}

.ca-related-card strong {
    display: block;
    margin-bottom: 4px;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--text-primary);
}

.ca-related-txt span {
    display: block;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--alpha-white-60);
}

.ca-related-card::after {
    content: '';
    position: absolute;
    right: 18px;
    bottom: 16px;
    width: 16px;
    height: 16px;
    background: currentColor;
    color: var(--neon-cyan);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
}

.ca-related-card:hover::after {
    opacity: 1;
    transform: translateX(0);
}

/* ── FAQ + patičkové sekce ────────────────────────────────────────────────
   Harmoniku dělá .ed-faq, tady zbývá jen rytmus sekcí. */
.ca-page .ca-related {
    padding-block: 48px 8px;
}

.ca-page .ca-faq {
    padding-block: 48px;
    border-top: 1px solid var(--alpha-white-6);
}

.ca-page .ca-disclaimer {
    padding-block: 24px 56px;
}

/* ── Responzivita ─────────────────────────────────────────────────────────
   Bez !important — kaskáda je teď v pořádku, protože duplicitní .bp-ed-*
   z page-bonuses.css se na téhle stránce už nepoužívají. */
@media (max-width: 1360px) {
    .ca-grid-4,
    .ca-choose-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ca-choose-band { gap: 1px; }
}

@media (max-width: 1200px) {
    .ca-casino-grid { grid-template-columns: repeat(2, 1fr); }
    .ca-myth-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ca-page .ca-free-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ca-page .ca-free-cols > .ed-lead { grid-column: 1 / -1; max-width: 68ch; }
}

/* Zlom sdílené vrstvy (.ed-split, editorial.css:874). Vlastní třídy mají vyšší
   specificitu, takže se musí složit samy, jinak by na tabletu zůstaly dva
   nečitelně úzké sloupce. */
@media (max-width: 980px) {
    .ca-page .ca-hero-split,
    .ca-page .ca-lead-split,
    .ca-page .ca-rtp-intro,
    .ca-page .ca-free-cols {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .ca-page .ca-hero-split .ca-intro,
    .ca-page .ca-lead-split .ed-lead,
    .ca-page .ca-rtp-intro .ed-lead,
    .ca-page .ca-free-cols > .ed-lead { max-width: none; }

    .ca-facts { grid-template-columns: minmax(0, 1fr); }
    .ca-facts .ed-facts-row:nth-child(3) { padding-top: 11px; }
    .ca-facts .ed-facts-row:nth-last-child(2) { border-bottom: 1px solid var(--alpha-white-5); }
}

@media (max-width: 900px) {
    .ca-page .ca-howto-grid { grid-template-columns: minmax(0, 1fr); }
    .ca-page .ca-sec { padding-block: 44px 24px; }
    .ca-hero-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .ca-grid-4,
    .ca-choose-band,
    .ca-myth-grid { grid-template-columns: minmax(0, 1fr); }
    .ca-myth-intro { padding: 0; }
}

@media (max-width: 768px) {
    .ca-casino-grid { grid-template-columns: 1fr; }
    .ca-casino-card { padding: 22px; }
    .ca-casino-bonus { font-size: 1.25rem; }
    .ca-steps-grid { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .ca-casino-card,
    .ca-related-card::after {
        transition: none;
    }

    .ca-casino-card:hover {
        transform: none;
    }
}