/* ============================================================
   PAGE-CHANCE.CSS, značkové téma landingu /chance.

   Základ nese sdílený .cp-* systém (page-casino-promo.css), který
   se načítá PŘED tímhle souborem. Tady se řeší JEN téma značky:

     ZELENÁ #007c4d = plocha, na které se hraje. Firemní zelená
       Chance drží CTA, brankové čáry sekcí a světlo za hero.
     ORANŽOVÁ #f5a200 = wordmark. Přísný rozpočet: akcentní slovo
       v nadpisu, chip nad částkou, dotyková čára pod hero, sticky.
     MOTIV = fotbalová Chance Liga. Posekaný trávník v pozadí hero,
       půlicí čára se středovým kruhem na horní hraně bonusové karty,
       postranní čára jako šev pod hero. Nikde kýčovitý míč.

   Paletu webu (cyan/magenta/fialová) NEPŘEBARVUJEME: jemné lemy,
   ikony a odškrtnutí dál jedou na --cp-accent = neonová azurová.
   Zelená a oranžová jsou akcent, ne převlek.

   KRITICKÉ: každý token i selektor MUSÍ viset na kořenové třídě
   .cp-chance (nebo :has(.cp-chance)). Tokeny na kořenovém
   selektoru dokumentu by přelily
   /dedek a /partneri, které sdílejí tentýž .cp-* systém.
   ============================================================ */

.cp-page.cp-chance {
    /* ── značka ── */
    --ch-green:      #007c4d;   /* firemní zelená Chance */
    --ch-green-deep: #00522f;
    --ch-green-mid:  #0a9a5f;
    --ch-green-hi:   #17c47c;
    --ch-green-soft: #4fe0a4;   /* čitelný text a lemy na tmavé */
    --ch-green-rgb:  0, 124, 77;
    --ch-turf-rgb:   23, 196, 124;

    --ch-orange:     #f5a200;   /* oranžový wordmark */
    --ch-orange-hi:  #ffc24d;
    --ch-orange-rgb: 245, 162, 0;

    /* ── povrchy: near-black rodina webu s náznakem zelené ── */
    --ch-card:    linear-gradient(170deg, #131c19 0%, #0c1012 100%);
    --ch-card-hi: linear-gradient(170deg, #17231e 0%, #0e1315 100%);
    --ch-line:    rgba(79, 224, 164, .16);
    --ch-line-2:  rgba(255, 255, 255, .07);

    --ch-lift:
        inset 0 1px 0 rgba(207, 255, 232, .06),
        0 18px 38px -24px rgba(0, 0, 0, .95);
    --ch-lift-lg:
        inset 0 1px 0 rgba(207, 255, 232, .10),
        0 30px 64px -34px rgba(0, 0, 0, 1);

    /* Druhý akcent sdíleného systému = zelená. Gradienty, živá tečka
       a ikonové knoflíky tím dostanou brandový spád, aniž by se
       z azurového základu webu stal zelený převlek. */
    --cp-accent-2: var(--ch-green-hi);
    --cp-accent-2-rgb: var(--ch-turf-rgb);

    --text-primary: #f2fbf6;
    --text-secondary: #c2cfc8;
    --text-muted: #a3b1aa;
}

/* ── Pozadí stránky: tmavá plocha s chladným zeleným nádechem ──
   Signal Field (globální WebGL vrstva) i jeho statický fallback čtou
   tyhle proměnné, takže stačí přepsat je. */
body:has(.cp-page.cp-chance) {
    background-color: #080c0a;
    --sbg-base: #080c0a;
    --sbg-c1:   #062018;
    --sbg-c2:   #04130f;
    --sbg-c3:   #0a2a1c;
}
body.cyber-body:has(.cp-page.cp-chance)::before {
    background:
        linear-gradient(180deg, rgba(0, 124, 77, .07) 0%, rgba(0, 124, 77, .03) 45%, rgba(0, 124, 77, .012) 100%),
        linear-gradient(180deg, #0a0f0c 0%, #080c0a 40%, #050807 100%);
}

/* ── HERO: posekaný trávník a světlo nad hřištěm ───────────────
   Jediné místo, kde smí zelená svítit naplno. Přímo pod ním sedí CTA. */
.cp-chance .cp-hero-bg {
    background:
        radial-gradient(80% 92% at 50% -10%, rgba(0, 124, 77, .30), transparent 66%),
        radial-gradient(46% 54% at 84% 18%, rgba(245, 162, 0, .07), transparent 70%),
        linear-gradient(180deg, rgba(23, 196, 124, .05), transparent 56%);
}
/* Pruhy posekaného trávníku. Čistá dekorace: pod obsahem, bez interakce,
   shora naplno, dolů mizí do tmy webu. */
.cp-chance .cp-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    pointer-events: none;
    background: repeating-linear-gradient(
        90deg,
        rgba(var(--ch-turf-rgb), .045) 0 72px,
        transparent 72px 144px);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .45) 46%, transparent 82%);
            mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .45) 46%, transparent 82%);
}
/* Šev pod hero = postranní čára hřiště, na konci přechází do wordmarku. */
.cp-chance .cp-hero::after {
    content: ""; position: absolute; z-index: 0;
    left: 0; right: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--ch-turf-rgb), .30) 20%, rgba(var(--ch-orange-rgb), .30) 80%, transparent);
}
.cp-chance .cp-hero-act { max-width: 460px; }
.cp-chance .cp-hero-sub { color: var(--text-secondary); }

/* Akcentní slovo v nadpisu = oranžový wordmark, ne přeliv. */
.cp-chance .cp-hero h1 .cp-grad,
.cp-chance .cp-cta-band h2 .cp-grad {
    background: none;
    -webkit-background-clip: border-box; background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    color: var(--ch-orange);
    text-shadow: 0 0 26px rgba(var(--ch-orange-rgb), .40), 0 0 64px rgba(var(--ch-orange-rgb), .20);
}

/* Odznaky: tichý tmavý štítek, živý jen ten ligový. */
.cp-chance .cp-badge {
    color: #dfeee7;
    background: rgba(207, 255, 232, .05);
    border-color: rgba(207, 255, 232, .15);
}
.cp-chance .cp-badge.cp-badge-live {
    color: #b9f5d8;
    background: rgba(var(--ch-green-rgb), .22);
    border-color: rgba(var(--ch-turf-rgb), .38);
}

/* ── Plotny: tmavý povrch zřetelně nad pozadím ─────────────────
   Odsud bere stránka hierarchii, ne z barvy. */
.cp-chance .cp-feature,
.cp-chance .cp-step,
.cp-chance .cp-facts,
.cp-chance .cp-faq details,
.cp-chance .cp-disclaimer {
    background: var(--ch-card);
    border: 1px solid var(--ch-line-2);
    box-shadow: var(--ch-lift);
}

/* ── Bonusová karta: půlicí čára se středovým kruhem ───────────
   Podpis stránky, použitý přesně jednou. */
.cp-chance .cp-hero-card {
    padding: 42px 30px 30px;
    border: 1px solid rgba(var(--ch-turf-rgb), .18);
    background:
        radial-gradient(120% 64% at 50% 0%, rgba(0, 124, 77, .26), transparent 66%),
        var(--ch-card-hi);
    box-shadow: var(--ch-lift-lg), 0 0 90px -46px rgba(var(--ch-turf-rgb), .7);
}
.cp-chance .cp-hero-card > .cp-pitch {
    position: absolute; z-index: 2;
    top: 15px; left: 18px; right: 18px; height: 15px;
    display: block; pointer-events: none; user-select: none;
    background-image:
        radial-gradient(circle at 50% 50%,
            transparent 0 6px,
            rgba(var(--ch-turf-rgb), .55) 6px 7.1px,
            transparent 7.1px),
        linear-gradient(90deg, rgba(var(--ch-turf-rgb), .40), rgba(var(--ch-turf-rgb), .40));
    background-size: 100% 15px, 100% 1px;
    background-position: 0 0, 0 50%;
    background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
/* Chip nad částkou = oranžový wordmark v malém. */
.cp-chance .cp-hc-eyebrow {
    display: block; width: fit-content; margin: 0 auto 10px;
    padding: 6px 15px; border-radius: 999px;
    border: 1px solid rgba(var(--ch-orange-rgb), .40);
    background: rgba(var(--ch-orange-rgb), .12);
    color: var(--ch-orange-hi);
    font-size: .74rem; letter-spacing: .12em;
}
.cp-chance .cp-hc-amount { color: var(--text-primary); text-shadow: 0 0 40px rgba(var(--ch-turf-rgb), .24); }
.cp-chance .cp-hc-note { font-size: .9rem; color: var(--text-secondary); }
.cp-chance .cp-hc-list li { font-size: .95rem; line-height: 1.5; }
.cp-chance .cp-hc-tick {
    background: rgba(var(--ch-turf-rgb), .13);
    border: 1px solid rgba(var(--ch-turf-rgb), .22);
    color: var(--ch-green-soft);
}

/* ── CTA: nejsvětlejší a nejhlasitější prvek stránky ───────────
   Firemní zelená jako podsvícené tlačítko, bílý text kvůli kontrastu. */
.cp-chance .cp-cta {
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(180deg, var(--ch-green-mid) 0%, var(--ch-green) 52%, var(--ch-green-deep) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .28),
        inset 0 -2px 0 rgba(0, 40, 24, .38),
        0 0 0 1px rgba(var(--ch-turf-rgb), .32),
        0 14px 34px -12px rgba(var(--ch-green-rgb), .75);
}
.cp-chance .cp-cta:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .34),
        inset 0 -2px 0 rgba(0, 40, 24, .38),
        0 0 0 1px rgba(var(--ch-turf-rgb), .55),
        0 20px 44px -14px rgba(var(--ch-green-rgb), .9);
}
.cp-chance .cp-cta:focus-visible { outline: 2px solid var(--ch-orange); outline-offset: 3px; }
.cp-chance .cp-cta-reassure { font-size: .82rem; color: var(--text-muted); }

/* ── Trust pruh: brankové čáry místo azurových lemů ────────────── */
.cp-page.cp-chance .cp-trust { border-block-color: rgba(var(--ch-turf-rgb), .16); }
.cp-page.cp-chance .cp-trust::before {
    background: linear-gradient(90deg, transparent, rgba(var(--ch-turf-rgb), .5) 25%, rgba(var(--ch-orange-rgb), .45) 75%, transparent);
}
.cp-chance .cp-trust-ico {
    background: linear-gradient(180deg, rgba(var(--ch-turf-rgb), .14), rgba(var(--ch-turf-rgb), .03));
    border: 1px solid rgba(var(--ch-turf-rgb), .20);
}
.cp-chance .cp-trust-ico svg { stroke: var(--ch-green-soft); }
.cp-chance .cp-trust-body span { font-size: .82rem; color: var(--text-secondary); }
.cp-chance .cp-trust-item:hover strong { color: var(--ch-green-soft); }
.cp-chance .cp-trust-item + .cp-trust-item::before {
    background: linear-gradient(rgba(var(--ch-turf-rgb), 0), rgba(var(--ch-turf-rgb), .26), rgba(var(--ch-turf-rgb), 0));
}

/* ── Záhlaví sekcí: štítek nese brandovou zeleň ────────────────── */
.cp-chance .cp-section-head .cp-kicker { color: var(--ch-green-soft); letter-spacing: .16em; }
.cp-chance .cp-section-head h2 { color: var(--text-primary); }
.cp-chance .cp-section-head p { color: var(--text-secondary); }

/* Vlasový šev mezi sekcemi (základní .cp-rule je jen prázdný div). */
.cp-chance .cp-rule { margin: 0 auto clamp(34px, 4vw, 56px); }
.cp-chance .cp-rule::before {
    content: ""; display: block; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--ch-turf-rgb), .16) 16%, rgba(var(--ch-turf-rgb), .16) 84%, transparent);
}

/* ── Feature karty ─────────────────────────────────────────────── */
.cp-chance .cp-feature:hover {
    border-color: var(--ch-line);
    box-shadow:
        inset 0 1px 0 rgba(207, 255, 232, .10),
        0 26px 48px -26px rgba(0, 0, 0, 1),
        0 0 44px -26px rgba(var(--ch-turf-rgb), .5);
}
.cp-chance .cp-feature-ico {
    color: var(--ch-green-soft);
    background: linear-gradient(180deg, rgba(var(--ch-turf-rgb), .16), rgba(var(--ch-turf-rgb), .04));
    border: 1px solid rgba(var(--ch-turf-rgb), .22);
}
.cp-chance .cp-feature h3 { color: var(--text-primary); }
.cp-chance .cp-feature p { font-size: .95rem; line-height: 1.65; color: var(--text-secondary); }

/* ── Kroky: číslo v zeleném dresu ──────────────────────────────── */
.cp-chance .cp-step::before {
    border-radius: 12px;
    color: #ffffff;
    background: linear-gradient(180deg, var(--ch-green-mid), var(--ch-green-deep));
    border: 1px solid rgba(var(--ch-turf-rgb), .30);
    box-shadow:
        0 0 0 5px #080c0a,
        inset 0 1px 0 rgba(255, 255, 255, .22);
}
.cp-chance .cp-step h4 { color: var(--text-primary); }
.cp-chance .cp-step p { font-size: .94rem; line-height: 1.6; color: var(--text-secondary); }

/* ── Velké CTA: světlo nad hřištěm podruhé a naposled ──────────── */
.cp-chance .cp-cta-band {
    border: 1px solid rgba(var(--ch-turf-rgb), .18);
    background:
        radial-gradient(72% 100% at 50% 0%, rgba(0, 124, 77, .28), transparent 64%),
        var(--ch-card-hi);
    box-shadow: var(--ch-lift-lg), 0 0 100px -50px rgba(var(--ch-turf-rgb), .75);
}
.cp-chance .cp-cta-band h2 { color: var(--text-primary); }
.cp-chance .cp-cta-band p { color: var(--text-secondary); }

/* ── Rychlá fakta ──────────────────────────────────────────────── */
.cp-chance .cp-fact { border-bottom: 1px solid rgba(207, 255, 232, .06); }
.cp-chance .cp-fact:nth-child(4n+3),
.cp-chance .cp-fact:nth-child(4n+4) { background: rgba(207, 255, 232, .026); }
.cp-chance .cp-fact:hover { background: rgba(var(--ch-turf-rgb), .08); }
.cp-chance .cp-fact:nth-last-child(-n+2) { border-bottom: none; }
.cp-chance .cp-fact .cp-fact-label { color: var(--text-secondary); }
.cp-chance .cp-fact .cp-fact-val { color: var(--text-primary); }

/* ── FAQ ───────────────────────────────────────────────────────── */
.cp-chance .cp-faq { gap: 14px; }
.cp-chance .cp-faq details { margin-bottom: 0; }
.cp-chance .cp-faq details[open] {
    border-color: rgba(var(--ch-turf-rgb), .30);
    box-shadow: var(--ch-lift), 0 0 40px -26px rgba(var(--ch-turf-rgb), .6);
}
.cp-chance .cp-faq summary { color: var(--text-primary); }
.cp-chance .cp-faq summary::after {
    border-right-color: var(--ch-green-soft);
    border-bottom-color: var(--ch-green-soft);
}
.cp-chance .cp-faq details p { font-size: .96rem; line-height: 1.7; color: var(--text-secondary); }

/* ── Disclaimer ────────────────────────────────────────────────── */
.cp-chance .cp-disclaimer { font-size: .9rem; color: var(--text-secondary); }
.cp-chance .cp-disclaimer strong { color: var(--text-primary); }

/* ── Odkaz v běžném textu ──────────────────────────────────────
   Guard :not() je POVINNÝ: bez něj pravidlo přebije .cp-cta a nalije
   podtržený barevný text na zelené tlačítko (tj. nečitelné CTA). */
.cp-chance a:not([class]):not([class*="btn"]):not([class*="cta"]):not([class*="card"]) {
    color: var(--ch-green-soft);
    text-decoration: underline;
    text-decoration-color: rgba(var(--ch-turf-rgb), .45);
    text-underline-offset: 3px;
}
.cp-chance a:not([class]):not([class*="btn"]):not([class*="cta"]):not([class*="card"]):hover {
    color: var(--ch-orange-hi);
}

/* ── Sticky mobilní lišta ──────────────────────────────────────── */
.cp-chance .cp-sticky {
    background: rgba(8, 12, 10, .94);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid rgba(var(--ch-turf-rgb), .22);
    box-shadow: 0 -14px 30px -18px rgba(0, 0, 0, 1);
}
.cp-chance .cp-sticky-info strong { color: var(--text-primary); }
.cp-chance .cp-sticky-info span { color: var(--ch-orange-hi); }

/* Poslední zbytky studené palety: výběr textu a focus prstenec. */
.cp-chance ::selection { background: rgba(var(--ch-green-rgb), .9); color: #f2fbf6; }
.cp-chance a:focus-visible,
.cp-chance summary:focus-visible,
.cp-chance button:focus-visible { outline: 2px solid var(--ch-green-soft); outline-offset: 3px; }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 920px) {
    .cp-chance .cp-faq { grid-template-columns: 1fr; }
    /* jeden sloupec: zebra po řádcích, ne po dvojicích */
    .cp-chance .cp-fact:nth-child(4n+3),
    .cp-chance .cp-fact:nth-child(4n+4) { background: none; }
    .cp-chance .cp-fact:nth-child(even) { background: rgba(207, 255, 232, .026); }
    .cp-chance .cp-fact:nth-last-child(-n+2) { border-bottom: 1px solid rgba(207, 255, 232, .06); }
    .cp-chance .cp-fact:last-child { border-bottom: none; }
    /* užší pruhy trávníku, ať motiv nezmizí na úzkém výřezu */
    .cp-chance .cp-hero::before {
        background: repeating-linear-gradient(
            90deg,
            rgba(var(--ch-turf-rgb), .045) 0 44px,
            transparent 44px 88px);
    }
}
@media (max-width: 600px) {
    .cp-chance .cp-hero-card { padding: 38px 20px 24px; }
    .cp-chance .cp-hero-card > .cp-pitch { left: 12px; right: 12px; }
    .cp-chance .cp-cta-band { padding: 42px 20px 34px; }
    .cp-chance .cp-rule { margin-bottom: 28px; }
}

/* ── Reduced motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .cp-chance .cp-cta,
    .cp-chance .cp-feature,
    .cp-chance .cp-trust-ico { transition: none; }
    .cp-chance .cp-cta:hover,
    .cp-chance .cp-feature:hover { transform: none; }
}