/* =====================================================================
   Acrax – globální styly
   Ruční moderní CSS: proměnné, grid/flex, clamp() fluidní typografie.
   Žádný Bootstrap ani jiný framework.

   Barvy vycházejí z loga ACRAX (tmavě modrý sloupcový graf se šipkou růstu)
   a z barevného schématu původního webu. Navy je značka, zlatá je akcent
   VÝHRADNĚ na tmavém podkladu – na bílé má jen ~1,9:1 a jako text ani ikona
   se tam použít nesmí.
   ===================================================================== */

/* --- Písmo Inter (self-hosted, latin + latin-ext kvůli české diakritice) ---
   Adresy jdou schválně BEZ otisku obsahu – v App.razor se stejná dvě písma
   preloadují taky bez otisku (@Assets se na ně nepoužívá), takže se adresy
   musí shodovat, jinak by prohlížeč stáhl každé písmo dvakrát. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url('fonty/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url('fonty/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =====================================================================
   1. Designové tokeny
   Nové barvy se VŽDY přidávají sem, nikdy natvrdo hexem v pravidlech.
   ===================================================================== */
:root {
    /* --- Značka: navy z loga --- */
    --barva-primarni: #1E2B4B;      /* hlavní navy: nadpisy, primární CTA, ikony (14,0:1 na bílé) */
    --barva-menu: #1A2540;          /* navy pro menu a odkazy (o stupeň hlubší) */
    --barva-tmava: #1A253E;         /* podklad tmavých sekcí a patičky */

    /* --- Zlatý akcent ---
       POZOR: --akcent je určený JEN na tmavý podklad (na navy 7,7:1).
       Na světlém podkladu se jako text/ikona používá --akcent-tmavy (4,8:1). */
    --akcent: #D0B66F;
    --akcent-tmavy: #8A6E28;
    --akcent-jemny: rgba(208, 182, 111, .34);   /* ozdobné linky na tmavém */

    /* --- Text --- */
    --text: #404B66;                /* tělo textu (8,7:1 na bílé) */
    --text-tlumeny: #566078;        /* popisky, perex, drobný text (6,3:1 na bílé) */
    --text-na-tmavem: rgba(255, 255, 255, .86);
    --text-na-tmavem-tlumeny: rgba(255, 255, 255, .68);

    /* --- Podklady a linky --- */
    --podklad: #ffffff;
    --podklad-teply: #FDFBF8;       /* krémový pás sekcí */
    --podklad-sedy: #F6F7F8;        /* světle šedý pás sekcí */
    --podklad-tint: color-mix(in srgb, var(--barva-primarni) 7%, #fff);  /* dlaždice ikon, hover */
    --linka: #E8EAED;
    --linka-vyrazna: color-mix(in srgb, var(--barva-primarni) 26%, #fff);

    /* --- Elevace: dvouvrstvé měkké stíny (těsný + rozptýlený) laděné do navy,
           ne šedý mour. Krok mezi stupni = jedno vyzdvižení prvku. --- */
    --stin-xs: 0 1px 2px rgba(26, 37, 64, .06);
    --stin-s: 0 1px 2px rgba(26, 37, 64, .05), 0 3px 8px rgba(26, 37, 64, .06);
    --stin-m: 0 2px 4px rgba(26, 37, 64, .05), 0 10px 22px rgba(26, 37, 64, .09);
    --stin-l: 0 4px 10px rgba(26, 37, 64, .07), 0 22px 46px rgba(26, 37, 64, .14);

    /* Barevné stíny pod tlačítky – tlačítko „svítí" vlastní barvou. */
    --stin-tlacitko: 0 4px 12px rgba(30, 43, 75, .26);
    --stin-tlacitko-hover: 0 10px 24px rgba(30, 43, 75, .32);
    --stin-tlacitko-akcent: 0 4px 12px rgba(138, 110, 40, .28);
    --stin-tlacitko-akcent-hover: 0 10px 24px rgba(138, 110, 40, .34);

    /* --- Tvar --- */
    --radius-s: 12px;
    --radius-m: 16px;
    --radius-l: 24px;
    --radius-pilulka: 999px;

    /* --- Rozměry --- */
    --obal-sirka: 1200px;
    --obal-sirka-uzka: 820px;
    --vyska-hlavicky: 84px;
    --vyska-hlavicky-zmensena: 66px;
    --cil-dotyk: 44px;              /* nejmenší dotykový cíl (WCAG) */
    --cil-dotyk-maly: 24px;         /* WCAG 2.2 SC 2.5.8 – absolutní minimum pro drobné odkazy */

    /* Výška spodní mobilní lišty BEZ bezpečné zóny. Jeden zdroj pravdy pro
       lištu i pro rozpěrku pod patičkou (MobilniLista.razor.css) a pro spodní
       výplň rozbaleného mobilního menu (Navigace.razor.css). Rozpěrka měla
       dřív vlastních 64 px, zatímco lišta vyrostla na 77 – posledních 13 px
       patičky (copyright a odkaz na ochranu údajů) zůstalo pod lištou.
       Lišta si proto tuhle výšku bere jako PEVNOU (height, ne min-height),
       aby se obě hodnoty nemohly rozejít, ani když se popisek zalomí na dva
       řádky (na 390 px se „Nezávazná poptávka“ zalomí). */
    --vyska-mobilni-listy: 76px;

    /* --- Typografie --- */
    --pismo: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --vaha-silna: 600;
    --vaha-nadpis: 700;
    --text-zaklad: clamp(1rem, .97rem + .15vw, 1.06rem);
    --text-h1: clamp(2.1rem, 1.4rem + 2.9vw, 3.5rem);
    --text-h2: clamp(1.65rem, 1.2rem + 1.8vw, 2.5rem);
    --text-h3: clamp(1.15rem, 1.02rem + .55vw, 1.45rem);
    --text-perex: clamp(1.06rem, 1rem + .32vw, 1.24rem);
    --text-drobny: .9rem;

    /* --- Pohyb --- */
    --prechod: .22s cubic-bezier(.4, 0, .2, 1);
    --prechod-rychly: .16s cubic-bezier(.3, 0, .1, 1);

    /* --- Aliasy pro soubory mimo designový systém ---
       Stránky, poptávkový formulář a jejich scoped CSS zdědily jména tokenů
       ze sesterského webu. Aby se nemusely přepisovat naráz (a aby nikdy
       nesvítily zeleně), mapujeme je sem na nové tokeny. Nová pravidla je
       nepoužívají – piš rovnou jména výš.

       Zbyly jen ty, které opravdu někdo používá (ověřeno grepem přes celý
       Acrax.Web); --barva-primarni-tmava, --barva-akcent-tmava, --barva-text,
       --barva-podklad-teply a --radius nepoužíval nikdo a jsou pryč.
       Až se na nová jména přepíšou i tři poslední soubory (Kontakt.razor.css,
       Odeslano.razor.css, PoptavkaFormular.razor.css), může zmizet celý blok. */
    --barva-primarni-tint: var(--podklad-tint);   /* Odeslano.razor.css */
    --barva-text-tlumeny: var(--text-tlumeny);    /* Kontakt.razor.css, Odeslano.razor.css */
    --barva-podklad: var(--podklad);              /* PoptavkaFormular.razor.css, Odeslano.razor.css */
    --barva-linka: var(--linka);                  /* PoptavkaFormular.razor.css, Odeslano.razor.css */
    --barva-linka-vyrazna: var(--linka-vyrazna);  /* Odeslano.razor.css */
}

/* =====================================================================
   2. Základ
   ===================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* Kotvy nesmí zmizet pod lepivou hlavičkou */
    scroll-padding-top: calc(var(--vyska-hlavicky) + 16px);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100dvh;
    /* Kotva pro .hlavicka-hlidka (absolutně umístěné hlídky scrollu). */
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: var(--pismo);
    font-size: var(--text-zaklad);
    line-height: 1.7;
    color: var(--text);
    background: var(--podklad);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

main {
    flex: 1;
}

img {
    max-width: 100%;
    height: auto;
}

h1, h2, h3, h4 {
    margin: 0 0 .6em;
    line-height: 1.15;
    font-weight: var(--vaha-nadpis);
    letter-spacing: -.015em;
    color: var(--barva-primarni);
    text-wrap: balance;
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }

h4 {
    font-size: 1.05rem;
}

p {
    margin: 0 0 1.1em;
}

a {
    color: var(--barva-menu);
    text-underline-offset: .15em;
    transition: color var(--prechod-rychly), text-decoration-color var(--prechod-rychly);
}

strong {
    font-weight: var(--vaha-silna);
    color: var(--barva-primarni);
}

/* Fokus je navy – na světlém má 14:1, takže i tenký rámeček je vidět. */
:focus-visible {
    outline: 3px solid var(--barva-primarni);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Na tmavých plochách by navy zanikla – tam svítí zlatá (na navy 7,7:1). */
.hero-tmavy :focus-visible,
.sekce-tmava :focus-visible,
.paticka :focus-visible {
    outline-color: var(--akcent);
}

/* Po „enhanced" navigaci zaostřuje js/web.js nadpis H1 kvůli čtečkám –
   rámeček kolem nadpisu ale nechceme. */
h1[tabindex="-1"]:focus,
h1[tabindex="-1"]:focus-visible {
    outline: none;
}

/* Cíl odkazu „Přeskočit na obsah". <main> má tabindex="-1", jinak by na něj
   fokus vůbec neskočil – jenže pak dostane fokusový obrys kolem CELÉHO obsahu
   stránky (rám přes celou výšku dokumentu), což vypadá jako chyba vykreslení.

   ROZHODNUTÍ: obrys tady vypínáme. Je to zavedená praxe právě u cíle skip
   linku – uživatel PRÁVĚ aktivoval odkaz, který mu doslova říká, kam jde,
   takže „kde jsem" je zodpovězené bez rámečku; čtečka navíc přečte obsah
   <main>. Fokus přitom zůstává na <main>, takže další Tab pokračuje uvnitř
   obsahu, ne zpátky v menu – tedy přesně to, kvůli čemu odkaz existuje.
   Obrys se vypíná POUZE tady; nic jiného na stránce o fokusový prstenec
   nepřichází. */
main#obsah:focus,
main#obsah:focus-visible {
    outline: none;
}

/* Neviditelné hlídky scrollu pro lepivou hlavičku (vyrábí je js/web.js).
   Jsou ukotvené k začátku dokumentu, takže je změna výšky hlavičky
   neposune – jinak by se stav hlavičky rozkmital. Nic nekreslí ani nechytají. */
.hlavicka-hlidka {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    pointer-events: none;
    background: transparent;
}

.preskocit {
    position: absolute;
    left: -9999px;
    z-index: 200;
    padding: .9rem 1.3rem;
    background: var(--barva-primarni);
    color: #fff;
    font-weight: var(--vaha-silna);
    border-radius: 0 0 var(--radius-s) 0;
}

.preskocit:focus {
    left: 0;
    top: 0;
}

/* Jen pro čtečky – text, který nemá být vidět, ale musí být přečtený. */
.jen-pro-ctecky {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* =====================================================================
   3. Layout
   ===================================================================== */
.obal {
    width: min(100% - 2.5rem, var(--obal-sirka));
    margin-inline: auto;
}

.obal-uzky {
    width: min(100% - 2.5rem, var(--obal-sirka-uzka));
    margin-inline: auto;
}

/* Vzdušné sekce – finanční web má dýchat, ne se tlačit. */
.sekce {
    padding: clamp(3.5rem, 7vw, 6.5rem) 0;
}

.sekce-teple {
    background: var(--podklad-teply);
}

/* Tmavá sekce = navy plocha s bílým textem a zlatými detaily. */
.sekce-tmava {
    background: linear-gradient(155deg, var(--barva-primarni), var(--barva-tmava) 72%);
    color: var(--text-na-tmavem);
}

.sekce-tmava h1,
.sekce-tmava h2,
.sekce-tmava h3,
.sekce-tmava h4,
.sekce-tmava strong {
    color: #fff;
}

/* Odkazy na tmavém jsou zlaté – ALE tlačítka ne: ta si nesou vlastní plochu
   i barvu popisku. Bez :not(.tlacitko) vyhrálo tohle pravidlo (0-1-1) nad
   .tlacitko-akcent (0-1-0) a zlaté CTA mělo zlatý text na zlaté ploše, tedy
   kontrast 1:1 – popisek se objevil až při hoveru, na dotyku nikdy. */
.sekce-tmava a:not(.tlacitko) {
    color: var(--akcent);
}

/* Blok nadpisu sekce (nadhodnocení + h2 + perex). */
.nadpis-sekce,
.hlavicka-sekce {  /* alias: stránky zděděné ze sesterského webu */
    max-width: 62ch;
    margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.nadpis-sekce.na-stred,
.hlavicka-sekce.na-stred {
    margin-inline: auto;
    text-align: center;
}

/* Nadhodnocení = drobný popisek nad nadpisem. Na světlém podkladu ztmavená
   zlatá (4,8:1), na tmavém plná zlatá. */
.nadhodnoceni {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .8rem;
    color: var(--akcent-tmavy);
    font-size: .82rem;
    font-weight: var(--vaha-silna);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.nadhodnoceni::before {
    content: '';
    width: 26px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
}

.na-stred .nadhodnoceni::before {
    display: none;
}

.sekce-tmava .nadhodnoceni,
.hero-tmavy .nadhodnoceni {
    color: var(--akcent);
}

.perex {
    font-size: var(--text-perex);
    color: var(--text-tlumeny);
}

.sekce-tmava .perex,
.hero-tmavy .perex {
    color: var(--text-na-tmavem);
}

/* =====================================================================
   4. Tlačítka
   Dotykový cíl drží min-height + výplň, ne velikost písma.
   ===================================================================== */
.tlacitko {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: var(--cil-dotyk);
    padding: .8rem 1.7rem;
    border: 2px solid transparent;
    border-radius: var(--radius-pilulka);
    font: inherit;
    font-weight: var(--vaha-silna);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--prechod), box-shadow var(--prechod), background var(--prechod), border-color var(--prechod), color var(--prechod);
}

/* Nadzvednutí jen tam, kde je opravdový kurzor – na dotyku by hover „zůstal viset". */
@media (hover: hover) and (pointer: fine) {
    .tlacitko:hover {
        transform: translateY(-2px);
    }
}

/* Stisk: tlačítko se zaboří zpět k ploše a ztratí část stínu. */
.tlacitko:active {
    transform: translateY(1px) scale(.985);
}

.tlacitko-male {
    padding: .6rem 1.2rem;
    font-size: .93rem;
}

/* Primární CTA: navy plocha + bílý text (15:1). */
.tlacitko-primarni {
    background: var(--barva-primarni);
    border-color: var(--barva-primarni);
    color: #fff;
    box-shadow: var(--stin-tlacitko);
}

.tlacitko-primarni:hover {
    background: var(--barva-menu);
    border-color: var(--barva-menu);
    color: #fff;
    box-shadow: var(--stin-tlacitko-hover);
}

.tlacitko-primarni:active {
    box-shadow: var(--stin-xs);
}

/* Sekundární CTA: zlatá plocha + NAVY popisek (7,7:1). Zlatá jako plocha
   vypadá prémiově a je čitelná – jako text na světlém by to neplatilo. */
.tlacitko-akcent {
    background: var(--akcent);
    border-color: var(--akcent);
    color: var(--barva-menu);
    box-shadow: var(--stin-tlacitko-akcent);
}

.tlacitko-akcent:hover {
    background: color-mix(in srgb, var(--akcent) 84%, #fff);
    border-color: color-mix(in srgb, var(--akcent) 84%, #fff);
    color: var(--barva-menu);
    box-shadow: var(--stin-tlacitko-akcent-hover);
}

.tlacitko-akcent:active {
    box-shadow: var(--stin-xs);
}

/* Obrysové tlačítko dědí barvu z okolí – funguje na světlém i tmavém. */
.tlacitko-obrys {
    background: transparent;
    border-color: currentColor;
    color: var(--barva-primarni);
}

.tlacitko-obrys:hover {
    background: var(--barva-primarni);
    border-color: var(--barva-primarni);
    color: #fff;
    box-shadow: var(--stin-tlacitko);
}

.sekce-tmava .tlacitko-obrys,
.hero-tmavy .tlacitko-obrys {
    color: #fff;
}

.sekce-tmava .tlacitko-obrys:hover,
.hero-tmavy .tlacitko-obrys:hover {
    background: #fff;
    color: var(--barva-primarni);
    border-color: #fff;
}

.tlacitka {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
}

/* =====================================================================
   5. Karty a mřížky
   ===================================================================== */
.mrizka {
    display: grid;
    gap: clamp(1rem, 2vw, 1.75rem);
}

.mrizka-2 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.mrizka-3 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.mrizka-4 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}

.karta {
    display: flex;
    flex-direction: column;
    padding: clamp(1.5rem, 2.5vw, 2.1rem);
    background: #fff;
    border: 1px solid var(--linka);
    border-radius: var(--radius-m);
    box-shadow: var(--stin-s);
    transition: transform var(--prechod), box-shadow var(--prechod), border-color var(--prechod);
}

/* Nadzvednutí o jeden stupeň elevace. Jen pro myš – na dotyku hover „zamrzá". */
@media (hover: hover) and (pointer: fine) {
    .karta:hover {
        transform: translateY(-4px);
        box-shadow: var(--stin-m);
        border-color: var(--linka-vyrazna);
    }

    /* Ikona v hlavičce karty se při hoveru jemně nadechne. */
    .karta:hover .karta-ikona {
        transform: scale(1.07);
    }
}

/* Karty, které jsou samy odkazem, musí reagovat i na klávesnici. */
.karta:focus-within {
    box-shadow: var(--stin-m);
    border-color: var(--linka-vyrazna);
}

.karta h3 {
    margin-bottom: .5rem;
}

.karta p:last-child {
    margin-bottom: 0;
}

.karta-telo {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* „Zjistit víc" na patě karty. Dotykový cíl drží min-height: bez něj měl odkaz
   43 px (16 px výplň + 27 px řádek), tedy o pixel míň, než chce WCAG. */
.karta-odkaz {
    margin-top: auto;
    padding-top: 1rem;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: var(--cil-dotyk);
    font-weight: var(--vaha-silna);
    color: var(--barva-primarni);
    text-decoration: none;
}

.karta-odkaz:hover {
    text-decoration: underline;
}

/* Karta na tmavé sekci – průsvitná plocha se zlatým okrajem. */
.sekce-tmava .karta {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .16);
    box-shadow: none;
    color: var(--text-na-tmavem);
}

.sekce-tmava .karta-odkaz {
    color: var(--akcent);
}

/* Dlaždice s ikonou. Světlá varianta = navy ikona na velmi světlém navy tintu.
   Akcentní varianta = zlatá ikona na plné navy ploše (7,7:1). */
.karta-ikona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 1.1rem;
    border-radius: 14px;
    background: var(--podklad-tint);
    color: var(--barva-primarni);
    transition: transform var(--prechod), background var(--prechod), color var(--prechod);
}

.karta-ikona.je-akcentni {
    background: var(--barva-primarni);
    color: var(--akcent);
}

.sekce-tmava .karta-ikona {
    background: rgba(255, 255, 255, .1);
    color: var(--akcent);
}

.seznam-fajfky {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.seznam-fajfky li {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    line-height: 1.55;
}

/* Fajfka na světlém je navy (zlatá by měla 1,9:1 a zmizela by). */
.seznam-fajfky .ikona {
    flex: none;
    margin-top: .3rem;
    color: var(--barva-primarni);
}

.sekce-tmava .seznam-fajfky .ikona,
.hero-tmavy .seznam-fajfky .ikona {
    color: var(--akcent);
}

/* =====================================================================
   6. Hero
   Bez fotky – Acrax jich má málo a překryv nad špatnou fotkou vypadá levně.
   Výchozí hero je SVĚTLÉ (krémový podklad, navy nadpis, zlaté podtržítko),
   modifikátorem .hero-tmavy se překlopí na navy plochu s bílým textem.
   ===================================================================== */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    padding: clamp(3rem, 7vw, 6rem) 0 clamp(3rem, 7vw, 6rem);
    background: var(--podklad-teply);
    overflow: hidden;
}

/* Jemná navy záře v pravém horním rohu – dekorace, žádný obrázek navíc. */
.hero::after {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: min(60vw, 620px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(30, 43, 75, .07), transparent 68%);
    pointer-events: none;
}

.hero-tmavy {
    background: linear-gradient(150deg, var(--barva-primarni) 0%, var(--barva-tmava) 70%);
    color: var(--text-na-tmavem);
}

.hero-tmavy::after {
    background: radial-gradient(circle, rgba(208, 182, 111, .16), transparent 68%);
}

.hero-tmavy h1,
.hero-tmavy h2,
.hero-tmavy strong {
    color: #fff;
}

.hero-obsah {
    position: relative;
    /* Nad kontrastním překryvem hero fotky (ten má z-index 1). */
    z-index: 2;
    max-width: 46rem;
}

.hero h1 {
    margin-bottom: .45em;
}

.hero-perex {
    font-size: clamp(1.08rem, 1rem + .45vw, 1.32rem);
    color: var(--text-tlumeny);
    max-width: 42rem;
}

.hero-tmavy .hero-perex {
    color: var(--text-na-tmavem);
}

.hero-tlacitka {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 2rem;
}

/* =====================================================================
   7. Kroky (jak spolupráce probíhá)
   ===================================================================== */
.kroky {
    counter-reset: krok;
    display: grid;
    gap: clamp(1.2rem, 2vw, 1.8rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.krok {
    position: relative;
    counter-increment: krok;
    padding: 2rem 1.5rem 1.5rem;
    background: #fff;
    border: 1px solid var(--linka);
    border-radius: var(--radius-m);
    box-shadow: var(--stin-s);
    transition: transform var(--prechod), box-shadow var(--prechod);
}

@media (hover: hover) and (pointer: fine) {
    .krok:hover {
        transform: translateY(-4px);
        box-shadow: var(--stin-m);
    }
}

/* Číslo kroku: navy destička se zlatou číslicí – motiv z loga. */
.krok::before {
    content: counter(krok);
    position: absolute;
    top: -18px;
    left: 1.5rem;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--barva-primarni);
    color: var(--akcent);
    font-weight: var(--vaha-nadpis);
    font-size: 1.05rem;
    box-shadow: var(--stin-tlacitko);
    transition: transform var(--prechod), box-shadow var(--prechod);
}

@media (hover: hover) and (pointer: fine) {
    .krok:hover::before {
        transform: scale(1.06);
        box-shadow: var(--stin-tlacitko-hover);
    }
}

.krok h3 {
    margin: .4rem 0 .4rem;
    font-size: 1.1rem;
}

.krok p {
    margin: 0;
    color: var(--text-tlumeny);
    font-size: .96rem;
}

/* =====================================================================
   8. Dva sloupce (text + panel/obrázek)
   ===================================================================== */
.dva-sloupce {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
}

.dva-sloupce img {
    width: 100%;
    border-radius: var(--radius-l);
    box-shadow: var(--stin-l);
}

@media (max-width: 860px) {
    .dva-sloupce {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   9. Formulář
   ===================================================================== */
.formular {
    display: grid;
    gap: 1.1rem;
    grid-template-columns: 1fr 1fr;
}

.pole {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.pole-siroke {
    grid-column: 1 / -1;
}

.pole label {
    font-size: .92rem;
    font-weight: var(--vaha-silna);
    color: var(--barva-primarni);
}

.pole .napoveda {
    font-size: .84rem;
    color: var(--text-tlumeny);
}

.pole input,
.pole select,
.pole textarea {
    width: 100%;
    min-height: var(--cil-dotyk);
    padding: .8rem .95rem;
    font: inherit;
    color: var(--text);
    background: #fff;
    border: 1.5px solid var(--linka);
    border-radius: var(--radius-s);
    box-shadow: var(--stin-xs);
    transition: border-color var(--prechod), box-shadow var(--prechod);
}

@media (hover: hover) and (pointer: fine) {
    .pole input:hover,
    .pole select:hover,
    .pole textarea:hover {
        border-color: var(--linka-vyrazna);
    }
}

.pole input:focus,
.pole select:focus,
.pole textarea:focus {
    outline: none;
    border-color: var(--barva-primarni);
    box-shadow: 0 0 0 4px rgba(30, 43, 75, .16);
}

.pole textarea {
    min-height: 130px;
    resize: vertical;
}

.pole .validation-message {
    font-size: .85rem;
    font-weight: var(--vaha-silna);
    color: #b4231f;
}

.pole input.invalid,
.pole select.invalid,
.pole textarea.invalid {
    border-color: #d9534f;
}

/* Honeypot – skryté pole pro roboty */
.past {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.hlaska {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: 1rem 1.2rem;
    border-radius: var(--radius-s);
    border: 1px solid;
    margin-bottom: 1.5rem;
}

.hlaska-uspech {
    background: #eef6f0;
    border-color: #bcdcc7;
    color: #14603d;
}

.hlaska-chyba {
    background: #fdeceb;
    border-color: #f3c3c1;
    color: #9c211d;
}

.hlaska p {
    margin: 0;
}

/* Kotva s výsledkem odeslání. Formulář posílá na /kontakt#poptavka-vysledek,
   takže i bez JS prohlížeč doskroluje sem; fokus na ni míří jen programově,
   proto při myší práci žádný rámeček nekreslíme. */
.poptavka-vysledek:focus {
    outline: none;
}

.poptavka-vysledek:focus-visible {
    outline: 3px solid var(--barva-primarni);
    outline-offset: 4px;
    border-radius: var(--radius-s);
}

/* Počítadlo zbývajících znaků – doplňuje js/web.js, bez JS je skryté. */
.pocitadlo-znaku {
    align-self: flex-end;
}

@media (max-width: 640px) {
    .formular {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   10. Kontaktní dlaždice
   ===================================================================== */
.kontakt-dlazdice {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1.1rem 1.2rem;
    background: #fff;
    border: 1px solid var(--linka);
    border-radius: var(--radius-m);
    box-shadow: var(--stin-s);
    text-decoration: none;
    color: inherit;
    transition: transform var(--prechod), box-shadow var(--prechod), border-color var(--prechod);
}

@media (hover: hover) and (pointer: fine) {
    a.kontakt-dlazdice:hover {
        transform: translateY(-3px);
        box-shadow: var(--stin-m);
        border-color: var(--linka-vyrazna);
    }

    a.kontakt-dlazdice:hover .karta-ikona {
        transform: scale(1.07);
    }
}

a.kontakt-dlazdice:focus-within {
    box-shadow: var(--stin-m);
    border-color: var(--linka-vyrazna);
}

.kontakt-dlazdice .karta-ikona {
    margin: 0;
    width: 46px;
    height: 46px;
    flex: none;
}

.kontakt-dlazdice strong {
    display: block;
    color: var(--barva-primarni);
}

.kontakt-dlazdice span {
    font-size: var(--text-drobny);
    color: var(--text-tlumeny);
}

/* =====================================================================
   11. Obsahová typografie na textových stránkách
   ===================================================================== */
.text-obsah > h2 {
    margin-top: 2.4rem;
}

.text-obsah > h3 {
    margin-top: 1.8rem;
}

.text-obsah ul,
.text-obsah ol {
    margin: 0 0 1.2rem;
    padding-left: 1.3rem;
}

.text-obsah li {
    margin-bottom: .45rem;
}

/* Zvýrazněný odstavec – navy tint se zlatou linkou po straně. */
.text-obsah .zvyrazneni {
    padding: 1.2rem 1.4rem;
    border-left: 4px solid var(--akcent);
    border-radius: 0 var(--radius-s) var(--radius-s) 0;
    background: var(--podklad-tint);
    color: var(--barva-primarni);
}

.text-obsah .zvyrazneni p:last-child {
    margin-bottom: 0;
}

/* Tabulka v textu (dnes jen přehled cookies na stránce o ochraně údajů).
   Na úzkém displeji se posouvá vodorovně uvnitř obalu – rozsypaná tabulka přes
   okraj je horší než posuvník. Obal má v HTML tabindex a název, aby se k posuvu
   dostala i klávesnice a čtečka.

   NÁZNAK POSUVU: na 390 px je tabulka 512 px v 350px obalu, useknuté sloupce
   ale samy o sobě neříkají, že se dá táhnout do strany (posuvník se na dotyku
   nekreslí). Přidáváme proto klasické „scroll shadows": čtyři vrstvy pozadí –
   dvě KRYCÍ (bílý přechod, background-attachment: local, takže se posouvají
   s obsahem a stojí na úplném začátku a konci) a pod nimi dvě STÍNOVÉ
   (radial-gradient, attachment: scroll, tedy přibité k okrajům obalu).
   Když je obsah u kraje, krycí vrstva stín překryje; jakmile se odscrolluje,
   stín se odkryje. Čistě CSS, nic se nedokresluje skriptem → CLS zůstává 0. */
.text-obsah .tabulka-obal {
    overflow-x: auto;
    margin: 0 0 1.4rem;
    background-color: var(--podklad);
    background-image:
        linear-gradient(to right, var(--podklad) 35%, transparent),
        linear-gradient(to left, var(--podklad) 35%, transparent),
        radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--barva-tmava) 40%, transparent), transparent),
        radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--barva-tmava) 40%, transparent), transparent);
    background-position: left center, right center, left center, right center;
    background-size: 44px 100%, 44px 100%, 20px 100%, 20px 100%;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;
}

/* Obal je fokusovatelný (tabindex="0"), takže musí mít i vidět, že ho má
   klávesnice. Globální :focus-visible mu dá navy obrys – doplníme jen rádius,
   ať rámeček nesedí přesně na hraně buněk. */
.text-obsah .tabulka-obal:focus-visible {
    outline-offset: 3px;
    border-radius: var(--radius-s);
}

.text-obsah .tabulka {
    width: 100%;
    min-width: 32rem;
    border-collapse: collapse;
    font-size: .93rem;
}

.text-obsah .tabulka caption {
    padding-bottom: .5rem;
    color: var(--text-tlumeny);
    font-size: .88rem;
    text-align: left;
}

.text-obsah .tabulka th,
.text-obsah .tabulka td {
    padding: .6rem .7rem;
    border-bottom: 1px solid var(--linka);
    text-align: left;
    vertical-align: top;
}

.text-obsah .tabulka thead th {
    border-bottom-color: var(--linka-vyrazna);
    color: var(--barva-primarni);
}

.text-obsah .tabulka code {
    font-size: .88em;
    word-break: break-word;
}

/* Odkazy uvnitř textu: plynulé ztmavení a zesílení podtržení. */
.text-obsah a:hover {
    color: var(--barva-primarni);
    text-decoration-thickness: 2px;
}

/* =====================================================================
   12. Drobečková navigace
   ===================================================================== */
/* Seznam sedí v <nav aria-label="Drobečková navigace"> – bez něj je to pro
   čtečku jen další seznam odkazů uprostřed hera. Odsazení zůstává na seznamu,
   aby fungoval i tam, kde obal (zatím) není. */
.drobecky {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    margin: 0 0 1.2rem;
    padding: 0;
    list-style: none;
    font-size: .88rem;
    color: var(--text-tlumeny);
}

.drobecky li {
    display: flex;
    align-items: center;
}

.drobecky li::after {
    content: '/';
    margin-left: .45rem;
    color: var(--linka-vyrazna);
}

.drobecky li:last-child::after {
    content: '';
}

/* Odkaz „Domů" měl 39 × 17 px – i na drobný odkaz chce WCAG 2.2 (SC 2.5.8)
   aspoň 24 × 24 px. Plochu dělá svislá výplň, ne větší písmo. */
.drobecky a {
    display: inline-flex;
    align-items: center;
    min-height: var(--cil-dotyk-maly);
    padding-block: .3rem;
    color: var(--text-tlumeny);
    text-decoration: none;
    transition: color var(--prechod-rychly);
}

.drobecky a:hover {
    color: var(--barva-primarni);
    text-decoration: underline;
}

/* =====================================================================
   13. Lišta souhlasu vs. spodní mobilní lišta
   Obě sedí na stejném místě u spodního okraje. Dokud návštěvník o cookies
   nerozhodl, spodní lištu schováváme – dvě lepivé lišty přes sebe se na mobilu
   nedají obsloužit a souhlas by trvale překrýval tlačítka „Zavolat/Poptávka".
   Třídu ma-souhlas nasazuje js/cookies.js a hned po volbě ji zase sundá.

   Rozpěrka (.mobilni-lista-rozpera) se schválně NEskrývá: drží místo pod
   patičkou, takže se obsah po zmizení lišty neposune (CLS 0).

   !important je tu vědomě – pravidlo pro .mobilni-lista žije ve scoped CSS
   (Acrax.Web.styles.css), které se načítá až po app.css.
   ===================================================================== */
html.ma-souhlas .mobilni-lista {
    display: none !important;
}

/* =====================================================================
   14. Odhalování při scrollu (IntersectionObserver v js/web.js)
   ===================================================================== */
/* Skrývá se JEN když je JavaScript k dispozici (třídu ma-js nasazuje inline skript
   v hlavičce) – bez JS zůstane obsah normálně viditelný. */
.ma-js .odhal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.2, .6, .2, 1);
    will-change: opacity, transform;
}

.ma-js .odhal.je-videt {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .ma-js .odhal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    /* Barvy a stíny se měnit smějí, pohyb ne – všechny posuny a zvětšení vypnout. */
    .tlacitko:hover,
    .tlacitko:active,
    .karta:hover,
    .karta:hover .karta-ikona,
    .krok:hover,
    .krok:hover::before,
    a.kontakt-dlazdice:hover,
    a.kontakt-dlazdice:hover .karta-ikona {
        transform: none;
    }
}