/* ============================================================
   O Fajn skupině — Fajn Skupina
   BEM, namespace .osk-*
   Styluje POUZE vlastní obsah podstránky, nesahá na kontejner.

   Princip 2026: jeden silný barevný moment (hero), zbytek vzdušný
   a bílý. Barva se používá jako přízvuk, ne jako výplň.
   ============================================================ */

.osk {
    /* Modrá skupiny + oranžový accent */
    --osk-modra:         #016ae6;
    --osk-modra-tmava:   #0058c4;
    --osk-modra-svetla:  #eef5ff;
    --osk-oranz:         #ff8c00;
    --osk-oranz-tmava:   #b35f00;   /* tmavší kvůli kontrastu na světlém (WCAG AA) */
    --osk-oranz-svetla:  #fff5e8;

    --osk-text:          #16233a;   /* hlavní text */
    --osk-text-tichy:    #4a5a75;   /* doprovodný text */
    --osk-text-slaby:    #6b7a94;   /* poznámky, zdroje — stále AA na bílé */
    --osk-linka:         #e3e9f2;
    --osk-podklad:       #f7f9fc;

    /* Jednotný rytmus mezer mezi sekcemi */
    --osk-mezera:        clamp(48px, 7vw, 84px);
    /* Odsazení textu zleva — netýká se modrého hero, ten má vlastní vnitřní
       odsazení a drží se kraje kontejneru. */
    --osk-odsazeni:      clamp(16px, 4vw, 56px);
    /* Šířka obrázku maskota. Používá ji box i světlý sloupec v hero,
       aby se obě čísla nemohla rozejít. */
    --osk-maskot:        clamp(200px, 32vw, 360px);

    display: block;
    padding-bottom: 8px;
    font-family: "Rubik", sans-serif;
    color: var(--osk-text);
    /* Sjednocené zvýraznění — semibold je vždy 500 */
    font-weight: 400;
}

.osk strong,
.osk b {
    font-weight: 500;
    color: var(--osk-text);
}

/* Sekce drží mezi sebou stejný odstup */
.osk > section + section {
    margin-top: var(--osk-mezera);
}

/* Všechny sekce kromě hero jsou odsazené z obou stran stejně — text
   tak nezačíná hned u hrany kontejneru a stránka dýchá. */
.osk > section:not(.osk-hero) {
    padding-left: var(--osk-odsazeni);
    padding-right: var(--osk-odsazeni);
}

/* Sekce s vlastním podkladem si odsazení řeší uvnitř, aby podklad
   sahal přes celou šířku. */
.osk > .osk-vyz {
    padding-left: 0;
    padding-right: 0;
}


/* ============================================================
   SPOLEČNÁ HLAVIČKA SEKCE
   Zarovnaná doleva — čte se přirozeněji než vycentrovaný blok.
   ============================================================ */
.osk-hlavicka {
    max-width: 46rem;
    margin-bottom: clamp(24px, 3vw, 34px);
}

.osk-hlavicka__eyebrow {
    display: inline-block;
    margin: 0 0 12px;
    padding: 5px 13px;
    border-radius: 999px;
    background: var(--osk-oranz-svetla);
    color: var(--osk-oranz-tmava);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.osk-hlavicka__eyebrow--modry {
    background: var(--osk-modra-svetla);
    color: var(--osk-modra-tmava);
}

.osk-hlavicka__nadpis {
    margin: 0;
    font-size: clamp(26px, 3.4vw, 38px);
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: -.015em;
    color: var(--osk-text);
    /* Nadpis se nesmí rozdělit na osamocené slovo */
    text-wrap: balance;
}

.osk-hlavicka__perex {
    max-width: 40rem;
    margin: 12px 0 0;
    font-size: clamp(15px, 1.6vw, 17px);
    line-height: 1.65;
    color: var(--osk-text-tichy);
}


/* ============================================================
   HERO — jediný barevný blok na stránce
   ============================================================ */
.osk-hero {
    position: relative;
    padding: clamp(34px, 5vw, 56px) clamp(22px, 4vw, 46px) 0;
    border-radius: 24px;
    /* Hero je rozdělené: vlevo modrá s textem, vpravo světlý sloupec
       s maskotem. Světlá část musí zůstat čistě bílá — obrázek maskota
       má bílé pozadí a jakýkoli odstín by z něj udělal viditelný obdélník.
       Aby hero přesto nesplývalo s bílou stránkou pod sebou, má vlastní
       rámeček a stín — čte se jako samostatný blok. */
    /* Světlý sloupec musí být širší než obrázek maskota — jeho bílé rohy
       by jinak přesahovaly do modré a četly by se jako obdélník. Proto se
       stopy měří zprava v pixelech a odvozují se od šířky maskota. */
    background:
        linear-gradient(
            to right,
            var(--osk-modra-tmava) 0%,
            var(--osk-modra) calc(100% - var(--osk-maskot) - 96px),
            #1f86ff calc(100% - var(--osk-maskot) - 56px),
            #8dc4ff calc(100% - var(--osk-maskot) - 30px),
            #fff calc(100% - var(--osk-maskot) - 4px),
            #fff 100%
        );
    border: 1px solid var(--osk-linka);
    box-shadow: 0 18px 44px -28px rgba(0, 40, 100, .45);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}

.osk-hero__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.osk-hero__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(64px);
}

.osk-hero__blob--a {
    width: 300px;
    height: 300px;
    top: -130px;
    /* Oranžová záře drží na modré polovině, na bílou nesmí zasahovat */
    left: 44%;
    background: var(--osk-oranz);
    opacity: .34;
}

.osk-hero__blob--b {
    width: 340px;
    height: 340px;
    bottom: -170px;
    left: 2%;
    background: #2b8cff;
    opacity: .5;
}

.osk-hero__obsah {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(16px, 3vw, 34px);
}

.osk-hero__text {
    flex: 1 1 440px;
    /* Text musí zůstat na modré polovině — proto se nesmí roztáhnout
       až k přechodu do bílé. */
    max-width: 56%;
    min-width: 0;
    padding-bottom: clamp(38px, 5vw, 54px);
}

/* Pozdrav s pulzující tečkou */
.osk-hero__stitek {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 18px;
    padding: 7px 15px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .01em;
    /* Delší název se na úzkém displeji radši zalomí, než aby
       vylezl z bloku. Tečka drží nahoře u prvního řádku. */
    max-width: 100%;
    text-align: left;
}

.osk-hero__stitek .osk-hero__tecka {
    align-self: center;
}

.osk-hero__tecka {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--osk-oranz);
    animation: osk-pulz 2s infinite;
}

@keyframes osk-pulz {
    0%   { box-shadow: 0 0 0 0 rgba(255, 140, 0, .7); }
    70%  { box-shadow: 0 0 0 10px rgba(255, 140, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 140, 0, 0); }
}

.osk-hero__nadpis {
    margin: 0 0 18px;
    font-size: clamp(30px, 5vw, 52px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -.025em;
    color: #fff;
}

/* Klíčové slovo podtržené oranžovou */
.osk-hero__zvyraz {
    position: relative;
    white-space: nowrap;
}

.osk-hero__zvyraz::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.05em;
    height: .1em;
    border-radius: 999px;
    background: var(--osk-oranz);
}

.osk-hero__perex {
    max-width: 42ch;
    margin: 0 0 16px;
    font-size: clamp(16px, 1.8vw, 18px);
    line-height: 1.62;
    color: rgba(255, 255, 255, .9);
}

.osk-hero__perex strong {
    color: #fff;
}

/* ---------- Maskot s bublinou ----------
   Obrázek má vlastní bílé pozadí. Nevadí — stojí na bílé polovině
   hero, takže s ní splyne a žádný trik není potřeba.
   ------------------------------------------------------ */
.osk-hero__maskot-box {
    position: relative;
    flex: 0 0 auto;
    width: var(--osk-maskot);
    align-self: flex-end;
    /* Vyruší pravé odsazení hero — maskot jde až k hraně bloku,
       aby vedle něj nezůstávalo prázdné místo. */
    margin-right: calc(-1 * clamp(22px, 4vw, 46px));
    /* Pohupuje se celý box i s bublinou. Kdyby se hýbal jen obrázek,
       posunul by se uvnitř svého ořezu a přišel by o kus hlavy. */
    animation: osk-pohup 5s ease-in-out infinite;
}

.osk-hero__maskot {
    display: block;
    width: 100%;
    /* Obrázek je čtverec, ale nad hlavou má ~7 % prázdné výšky.
       Ořezáváme jen 5 %, aby zůstala rezerva a nikde se nekrojila
       hlava — ani v nejvyšší fázi pohupování. */
    aspect-ratio: 1 / .95;
    height: auto;
    object-fit: cover;
    object-position: 50% 100%;
    /* Sedí na spodní hraně — jako by z bloku vykukoval */
    margin-bottom: -5px;
}

/* ---------- Bublina, ve které maskot mluví ----------
   Stejný styl jako bublina u závěrečné výzvy a na 404:
   3px modrý rámeček, rádius 26px, špička dole na středu. */
.osk-hero__bublina {
    position: absolute;
    z-index: 2;
    /* Bublina stojí NAD hlavou a je vysazená doleva, aby nechala
       maskota vyniknout a nepřekrývala pravou hranu bloku.
       Špička se o stejný kus posouvá doprava (viz ::before/::after),
       aby dál mířila na hlavu. */
    left: 50%;
    bottom: calc(100% - clamp(40px, 10%, 64px));
    width: max-content;
    max-width: min(14rem, 58vw);
    margin: 0;
    transform: translateX(-104%);
    padding: 13px 22px;
    border: 3px solid var(--osk-modra);
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(1, 106, 230, .16);
    font-size: clamp(13px, 1.5vw, 15.5px);
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    color: var(--osk-modra);
}

/* Špička bubliny — dvojitá, aby seděl i modrý rámeček.
   Sedí blíž pravému okraji, protože bublina je vysazená doleva —
   takhle pořád míří na hlavu maskota. */
.osk-hero__bublina::before,
.osk-hero__bublina::after {
    content: "";
    position: absolute;
    top: 100%;
    /* Skoro u pravého okraje — dál už by špička lezla do zaobleného
       rohu. Bublinu proto nelze posunout doleva o mnoho víc. */
    left: 84%;
    border: solid transparent;
    border-top-color: var(--osk-modra);
    border-width: 14px;
    margin-left: -14px;
}

.osk-hero__bublina::after {
    border-top-color: #fff;
    border-width: 10px;
    margin-left: -10px;
}

@keyframes osk-pohup {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}


/* ============================================================
   ČÍSLA — bílý vzdušný pás, čísla nesou tvar samy
   ============================================================ */
.osk-cisla__nadpis {
    margin: 0 0 clamp(22px, 3vw, 32px);
    font-size: clamp(22px, 2.6vw, 28px);
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--osk-text);
}

.osk-cisla__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(18px, 2.5vw, 30px);
    margin: 0;
}

.osk-cisla__item {
    /* Tenká linka vlevo místo rámečku kolem dokola */
    padding-left: 18px;
    border-left: 2px solid var(--osk-linka);
}

/* Barva se u čísel střídá modrá / oranžová */
.osk-cisla__item:nth-child(odd) {
    border-left-color: var(--osk-modra);
}

.osk-cisla__item:nth-child(even) {
    border-left-color: var(--osk-oranz);
}

.osk-cisla__hlava {
    display: block;
    margin: 0;
}

.osk-cisla__cislo {
    display: block;
    font-size: clamp(30px, 3.8vw, 42px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    color: var(--osk-modra);
}

.osk-cisla__item:nth-child(even) .osk-cisla__cislo {
    color: var(--osk-oranz-tmava);
}

.osk-cisla__jednotka {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 500;
    color: var(--osk-text);
}

.osk-cisla__popis {
    margin: 8px 0 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--osk-text-tichy);
}


/* ============================================================
   PROČ U NÁS — podbarvené karty, střídá se modrá a oranžová
   ============================================================ */
.osk-duvody__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(14px, 2vw, 20px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.osk-duvody__item {
    position: relative;
    display: flex;
    gap: 16px;
    padding: clamp(22px, 2.8vw, 28px);
    border-radius: 20px;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}

/* Liché karty modré, sudé oranžové — barva nese celou kartu */
.osk-duvody__item:nth-child(odd) {
    background: linear-gradient(140deg, #eef5ff 0%, #dfeaff 100%);
}

.osk-duvody__item:nth-child(even) {
    background: linear-gradient(140deg, #fff5e8 0%, #ffe9cc 100%);
}

/* Barevný proužek u horní hrany — dodá kartě „hlavu“ */
.osk-duvody__item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--osk-modra);
}

.osk-duvody__item:nth-child(even)::before {
    background: var(--osk-oranz);
}

.osk-duvody__item:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px -20px rgba(1, 106, 230, .45);
}

.osk-duvody__item:nth-child(even):hover {
    box-shadow: 0 18px 38px -20px rgba(255, 140, 0, .5);
}

/* Ikona v bílém kolečku — vystoupí z barevného podkladu */
.osk-duvody__ikona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: #fff;
    color: var(--osk-modra);
    box-shadow: 0 4px 12px -4px rgba(1, 106, 230, .35);
}

.osk-duvody__item:nth-child(even) .osk-duvody__ikona {
    color: var(--osk-oranz-tmava);
    box-shadow: 0 4px 12px -4px rgba(255, 140, 0, .4);
}

.osk-duvody__ikona svg {
    width: 22px;
    height: 22px;
}

.osk-duvody__telo {
    min-width: 0;
}

.osk-duvody__nadpis {
    margin: 0 0 7px;
    font-size: clamp(16px, 1.8vw, 18px);
    font-weight: 500;
    line-height: 1.3;
    color: var(--osk-text);
}

.osk-duvody__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.62;
    /* Na barevném podkladu potřebuje text vyšší kontrast */
    color: #35435c;
}

/* Krátká poznámka pod textem — vtípek nebo upřesnění */
.osk-duvody__stitek {
    display: inline-block;
    margin: 12px 0 0;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .75);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--osk-modra-tmava);
}

.osk-duvody__item:nth-child(even) .osk-duvody__stitek {
    color: var(--osk-oranz-tmava);
}


/* ============================================================
   VÝZKUMY — záložky + kruhový graf
   (stejný princip jako varianta B na Fajn Práci, jiné barvy)
   ============================================================ */
.osk-vyz {
    padding: clamp(30px, 4vw, 46px) clamp(18px, 3vw, 38px);
    border-radius: 26px;
    background:
        radial-gradient(700px 260px at 100% 0%, rgba(255, 140, 0, .07), transparent 60%),
        radial-gradient(700px 260px at 0% 0%, rgba(1, 106, 230, .07), transparent 60%),
        var(--osk-podklad);
}

/* Hlavička je uvnitř sekce, takže odsazení zleva si drží sama */
.osk-vyz .osk-hlavicka {
    margin-left: clamp(0px, 1vw, 18px);
}

/* ---------- Záložky ---------- */
.osk-vyz__zalozky {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 20px;
    margin-left: clamp(0px, 1vw, 18px);
    padding: 6px;
    border-radius: 999px;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--osk-linka);
}

.osk-vyz__zalozka {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* Dotyková plocha min. 44 px — WCAG 2.2 */
    min-height: 44px;
    padding: 10px 18px;
    border: none;
    border-radius: 999px;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--osk-text-tichy);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

.osk-vyz__zalozka svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

.osk-vyz__zalozka:hover {
    background: var(--osk-podklad);
    color: var(--osk-text);
}

.osk-vyz__zalozka.is-aktivni {
    background: var(--osk-modra);
    color: #fff;
    box-shadow: 0 4px 14px -4px rgba(1, 106, 230, .55);
}

/* Krátký popisek záložky se objeví až na úzkém displeji */
.osk-vyz__zalozka-text--kratky {
    display: none;
}

/* ---------- Panel s výzkumem ---------- */
.osk-vyz__panel {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: clamp(22px, 3.5vw, 40px);
    align-items: center;
    padding: clamp(24px, 3.2vw, 34px);
    border: 1px solid var(--osk-linka);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 14px 40px -26px rgba(0, 30, 90, .3);
    animation: osk-vyz-panel .35s ease-out;
}

.osk-vyz__panel[hidden] {
    display: none;
}

@keyframes osk-vyz-panel {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Kruhový graf ---------- */
.osk-vyz__graf {
    position: relative;
    width: 240px;
    max-width: 100%;
    aspect-ratio: 1;
    justify-self: center;
}

.osk-vyz__kruh {
    display: block;
    width: 100%;
    height: 100%;
    /* Kruh začíná nahoře, ne vpravo */
    transform: rotate(-90deg);
}

.osk-vyz__kruh-podklad {
    fill: none;
    stroke: #e8eef7;
    stroke-width: 14;
}

.osk-vyz__kruh-hodnota {
    fill: none;
    stroke: var(--osk-modra);
    stroke-width: 14;
    stroke-linecap: round;
    transition: stroke-dashoffset 1.4s cubic-bezier(.2, .7, .2, 1);
}

/* Oranžová varianta panelu */
.osk-vyz__panel--oranz .osk-vyz__kruh-hodnota {
    stroke: var(--osk-oranz);
}

/* Panel s pořadím (č. 1) není procento — plný kruh by se četl jako
   „100 %“. Proto je čárkovaný: čte se jako značka, ne jako podíl. */
.osk-vyz__panel--poradi .osk-vyz__kruh-hodnota {
    stroke-dasharray: 10 9;
    stroke-linecap: butt;
    transition: none;
}

.osk-vyz__graf-stred {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.osk-vyz__velke {
    margin: 0;
    font-size: clamp(38px, 5vw, 52px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    color: var(--osk-modra);
}

.osk-vyz__panel--oranz .osk-vyz__velke {
    color: var(--osk-oranz-tmava);
}

.osk-vyz__velke-popis {
    max-width: 11ch;
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.35;
    color: var(--osk-text-tichy);
}

/* ---------- Text panelu ---------- */
.osk-vyz__obsah {
    min-width: 0;
}

.osk-vyz__stitek {
    display: inline-block;
    margin: 0 0 12px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--osk-modra-svetla);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .03em;
    color: var(--osk-modra-tmava);
}

.osk-vyz__panel--oranz .osk-vyz__stitek {
    background: var(--osk-oranz-svetla);
    color: var(--osk-oranz-tmava);
}

.osk-vyz__titulek {
    margin: 0 0 10px;
    font-size: clamp(19px, 2.4vw, 25px);
    font-weight: 500;
    line-height: 1.28;
    letter-spacing: -.01em;
    color: var(--osk-text);
    text-wrap: balance;
}

/* Klíčová část titulku barevně */
.osk-vyz__titulek span {
    color: var(--osk-modra);
}

.osk-vyz__panel--oranz .osk-vyz__titulek span {
    color: var(--osk-oranz-tmava);
}

.osk-vyz__text {
    max-width: 52ch;
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--osk-text-tichy);
}

/* ---------- Rozpad vzorku (kolik, kdy, kde) ---------- */
.osk-vyz__fakta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.osk-vyz__fakt {
    padding: 11px 12px;
    border: 1px solid var(--osk-linka);
    border-radius: 12px;
    background: var(--osk-podklad);
    text-align: center;
}

.osk-vyz__fakt-cislo {
    display: block;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    color: var(--osk-modra);
}

.osk-vyz__panel--oranz .osk-vyz__fakt-cislo {
    color: var(--osk-oranz-tmava);
}

.osk-vyz__fakt-popis {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    line-height: 1.3;
    color: var(--osk-text-slaby);
}

.osk-vyz__zdroj {
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid var(--osk-linka);
    font-size: 12.5px;
    color: var(--osk-text-slaby);
}

.osk-vyz__zdroj strong {
    color: var(--osk-text-tichy);
}


/* ============================================================
   PŘÍBĚH — časová osa jako vyprávění
   ============================================================ */
.osk-osa {
    position: relative;
    display: grid;
    gap: clamp(20px, 2.6vw, 28px);
    margin: 0;
    padding: 0 0 0 clamp(24px, 3vw, 34px);
    list-style: none;
}

/* Svislá linka osy */
.osk-osa::before {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 5px;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(to bottom, var(--osk-modra), var(--osk-oranz));
}

.osk-osa__bod {
    position: relative;
    max-width: 52rem;
}

/* Puntík na ose */
.osk-osa__bod::before {
    content: "";
    position: absolute;
    top: 8px;
    left: calc(-1 * clamp(24px, 3vw, 34px) + 1px);
    width: 12px;
    height: 12px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--osk-modra);
    box-shadow: 0 0 0 2px var(--osk-modra);
}

.osk-osa__bod--dnes::before {
    background: var(--osk-oranz);
    box-shadow: 0 0 0 2px var(--osk-oranz);
}

.osk-osa__rok {
    display: inline-block;
    margin-bottom: 6px;
    padding: 3px 11px;
    border-radius: 999px;
    background: var(--osk-modra-svetla);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--osk-modra-tmava);
}

.osk-osa__bod--dnes .osk-osa__rok {
    background: var(--osk-oranz-svetla);
    color: var(--osk-oranz-tmava);
}

.osk-osa__nadpis {
    margin: 0 0 7px;
    font-size: clamp(17px, 2vw, 20px);
    font-weight: 500;
    line-height: 1.3;
    color: var(--osk-text);
}

.osk-osa__text {
    max-width: 58ch;
    margin: 0;
    font-size: 15.5px;
    line-height: 1.68;
    color: var(--osk-text-tichy);
}


/* ============================================================
   PROJEKTY SKUPINY
   ============================================================ */
.osk-projekty__zeme-holder {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(14px, 2vw, 20px);
}

.osk-projekty__zeme {
    padding: clamp(20px, 2.6vw, 26px);
    border: 1px solid var(--osk-linka);
    border-radius: 18px;
    background: #fff;
}

.osk-projekty__zeme-nadpis {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--osk-linka);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--osk-text-tichy);
}

.osk-projekty__vlajka {
    font-size: 18px;
    line-height: 1;
}

.osk-projekty__seznam {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.osk-projekty__polozka {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    transition: background-color .2s ease;
}

.osk-projekty__polozka:hover {
    background: var(--osk-podklad);
}

.osk-projekty__nazev {
    font-size: 15.5px;
    font-weight: 500;
    color: var(--osk-modra);
}

.osk-projekty__zeme--sk .osk-projekty__nazev {
    color: var(--osk-oranz-tmava);
}

.osk-projekty__popis {
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--osk-text-slaby);
}


/* ============================================================
   ZÁVĚREČNÁ VÝZVA — maskot s bublinou (navazuje na 404)
   ============================================================ */
.osk-zaver {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: clamp(10px, 2vw, 20px);
    text-align: center;
}

.osk-zaver__maskot-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Bublina — stejný jazyk jako na 404 */
.osk-zaver__bublina {
    position: relative;
    max-width: 330px;
    margin-bottom: 22px;
    padding: 18px 26px;
    border: 3px solid var(--osk-modra);
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(1, 106, 230, .16);
    animation: osk-bublina 4s ease-in-out infinite;
}

@keyframes osk-bublina {
    0%, 100% { transform: translateY(0) rotate(-1.2deg); }
    50%      { transform: translateY(-7px) rotate(1.2deg); }
}

/* Špička bubliny — dvojitá, aby seděl i modrý rámeček */
.osk-zaver__bublina::before,
.osk-zaver__bublina::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    border: solid transparent;
    border-top-color: var(--osk-modra);
    border-width: 17px;
    margin-left: -17px;
}

.osk-zaver__bublina::after {
    border-top-color: #fff;
    border-width: 12px;
    margin-left: -12px;
}

.osk-zaver__vykrik {
    margin: 0;
    font-size: clamp(20px, 2.6vw, 26px);
    font-weight: 500;
    line-height: 1.2;
    color: var(--osk-modra);
}

.osk-zaver__mumlani {
    margin: 7px 0 0;
    font-size: 14.5px;
    font-style: italic;
    line-height: 1.4;
    color: var(--osk-text-slaby);
}

.osk-zaver__maskot {
    display: block;
    width: 100%;
    max-width: 220px;
    height: auto;
    transform-origin: 50% 100%;
    animation: osk-houpani 5s ease-in-out infinite;
}

@keyframes osk-houpani {
    0%, 100% { transform: rotate(-1.8deg); }
    50%      { transform: rotate(1.8deg); }
}

.osk-zaver__akce {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px 22px;
    margin-top: clamp(24px, 3vw, 34px);
}

.osk-zaver__tlacitko {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Dotyková plocha min. 48 px — WCAG 2.2 Target Size */
    min-height: 52px;
    padding: 14px 36px;
    border-radius: 999px;
    background: var(--osk-modra);
    font-size: 17px;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(1, 106, 230, .3);
    transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}

.osk-zaver__tlacitko:hover,
.osk-zaver__tlacitko:focus {
    background: #0074ff;
    color: #fff;
    text-decoration: none;
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(1, 106, 230, .4);
}

.osk-zaver__odkaz {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 16px;
    color: var(--osk-text-slaby);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .2s ease, border-color .2s ease;
}

.osk-zaver__odkaz:hover,
.osk-zaver__odkaz:focus {
    color: var(--osk-modra);
    text-decoration: none;
    border-bottom-color: var(--osk-modra);
}


/* ============================================================
   ZDROJE
   ============================================================ */
.osk-zdroje {
    padding-top: clamp(24px, 3vw, 32px);
    border-top: 1px solid var(--osk-linka);
}

.osk-zdroje__nadpis {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--osk-text-tichy);
}

.osk-zdroje__seznam {
    display: grid;
    gap: 7px;
    max-width: 70ch;
    margin: 0;
    padding: 0;
    list-style: none;
}

.osk-zdroje__polozka {
    font-size: 13px;
    line-height: 1.6;
    color: var(--osk-text-slaby);
}


/* ============================================================
   VIDITELNÝ FOCUS — povinnost dle WCAG 2.4.11 (EN 301 549)
   ============================================================ */
.osk a:focus-visible,
.osk button:focus-visible {
    outline: 3px solid var(--osk-modra);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Na modrém pozadí musí být focus bílý, aby byl vidět */
.osk-hero a:focus-visible {
    outline-color: #fff;
}


/* ============================================================
   TABLET
   ============================================================ */
@media (max-width: 900px) {
    .osk-cisla__grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 26px;
    }

    /* Kruh nad textem — vedle sebe se to na tablet nevejde */
    .osk-vyz__panel {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .osk-vyz__graf {
        width: clamp(170px, 42vw, 220px);
    }

    .osk-vyz__obsah {
        width: 100%;
    }

    .osk-vyz__text {
        margin-left: auto;
        margin-right: auto;
    }
}


/* ============================================================
   MOBIL
   ============================================================ */
@media (max-width: 720px) {
    .osk-hero {
        padding-left: 20px;
        padding-right: 20px;
        text-align: center;
    }

    /* Na mobilu je maskot NAD textem, takže se hero dělí vodorovně:
       bílý pruh nahoře pro maskota, modrá pod ním pro text.
       Svislé dělení by tu bílou hodilo za nadpis.

       Stopy se měří v pixelech od horní hrany, ne v procentech výšky —
       maskot má pevných 200 px, ale hero je podle délky textu různě
       vysoké. V procentech by bílá končila nad jeho nohama a bílé
       pozadí obrázku by se ukázalo na modré. */
    .osk-hero {
        background: linear-gradient(
            180deg,
            #fff 0px,
            #fff calc(var(--osk-hero-bila) + 46px),
            rgba(255, 255, 255, .55) calc(var(--osk-hero-bila) + 74px),
            #2b8cff calc(var(--osk-hero-bila) + 108px),
            var(--osk-modra) calc(var(--osk-hero-bila) + 190px),
            var(--osk-modra-tmava) 100%
        );
    }

    /* Maskot jde nad text a stojí na spodní hraně */
    .osk-hero__obsah {
        flex-direction: column-reverse;
        align-items: center;
        gap: 0;
    }

    .osk-hero__text {
        flex-basis: auto;
        /* Na mobilu je hero dělené vodorovně — text má celou šířku */
        max-width: 100%;
    }

    .osk-hero__perex {
        margin-left: auto;
        margin-right: auto;
    }

    /* Na mobilu leží štítek v bílém pruhu pod maskotem — bílý text
       na bílé by nebyl vidět, proto se překlápí do modré varianty. */
    .osk-hero__stitek {
        font-size: 12.5px;
        padding: 7px 14px;
        text-align: center;
        border-color: rgba(1, 106, 230, .3);
        background: var(--osk-modra-svetla);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        color: var(--osk-modra-tmava);
    }

    /* Mění se proměnná, ne šířka boxu — hero je na mobilu dělené
       vodorovně, ale ostatní výpočty tak zůstanou v souladu. */
    .osk-hero {
        --osk-maskot: 200px;
        /* Kam sahá spodní hrana maskota: horní odsazení hero
           + jeho výška po ořezu (0,95 × šířka). */
        --osk-hero-bila: calc(clamp(34px, 5vw, 56px) + var(--osk-maskot) * .95);
    }

    /* Maskot je na mobilu vycentrovaný nad textem — desktopové
       odsazení doprava se tu ruší, jinak stojí mimo osu. */
    .osk-hero__maskot-box {
        margin-left: auto;
        margin-right: auto;
    }

    /* Čára pod maskotem — stejný prvek jako v průvodci Fajn účtu:
       zaoblený proužek, který se ke krajům vytrácí. Odděluje maskota
       od textu pod ním, aby nestál "ve vzduchu". */
    .osk-hero__maskot-box::after {
        content: "";
        position: absolute;
        z-index: 2;
        left: 8px;
        right: 8px;
        bottom: -5px;
        height: 5px;
        border-radius: 999px;
        background: linear-gradient(
            90deg,
            var(--osk-modra) 0%,
            #2b8cff 50%,
            var(--osk-modra) 100%
        );
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
        box-shadow: 0 2px 6px rgba(1, 106, 230, .45);
    }

    /* Barevné záře jsou na mobilu vypnuté — blob --a leží v místě,
       kde je teď bílý pruh, a probarvoval by ho dožluta. Bílá pod
       maskotem musí zůstat čistá, jinak z obrázku vystoupí obdélník. */
    .osk-hero__bg {
        display: none;
    }

    /* Na mobilu je maskot vycentrovaný a místa je málo — velké
       vysazení doleva z desktopu by bublinu vystrčilo mimo blok.
       Proto stojí nad hlavou a špička se vrací skoro na střed.
       Posazená výš, aby nezasahovala do obličeje. */
    .osk-hero__bublina {
        max-width: min(13rem, 66vw);
        padding: 10px 16px;
        font-size: 13px;
        /* Posazená výš a dál doleva, aby nepřekrývala hlavu.
           Špička zůstává blíž jejímu pravému okraji než o kolik je
           bublina vysazená — míří tak na kraj hlavy, ne přes ni. */
        bottom: calc(100% - 8px);
        transform: translateX(-76%);
    }

    .osk-hero__bublina::before,
    .osk-hero__bublina::after {
        left: 66%;
    }

    .osk-duvody__grid {
        grid-template-columns: 1fr;
    }

    /* Na úzkém displeji se do záložek vejde jen krátký popisek */
    .osk-vyz__zalozky {
        width: 100%;
        justify-content: center;
    }

    .osk-vyz__zalozka {
        flex: 1 1 auto;
        justify-content: center;
        padding: 10px 12px;
        font-size: 13px;
    }

    .osk-vyz__zalozka-text--plny   { display: none; }
    .osk-vyz__zalozka-text--kratky { display: inline; }
}

@media (max-width: 520px) {
    .osk-cisla__grid {
        grid-template-columns: 1fr;
    }

    /* Na úzkém displeji se karta rozpadá — ikona nad text */
    .osk-duvody__item {
        flex-direction: column;
        gap: 14px;
    }

    .osk-projekty__polozka {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .osk-vyz__fakta {
        grid-template-columns: 1fr;
    }

    .osk-vyz__zalozka svg {
        display: none;
    }

    .osk-zaver__bublina {
        max-width: 100%;
        padding: 16px 20px;
        border-width: 2.5px;
    }

    .osk-zaver__maskot {
        max-width: 175px;
    }

    .osk-zaver__akce {
        flex-direction: column;
        gap: 12px;
    }
}


/* ============================================================
   Kdo nechce animace, ten je mít nebude
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .osk-hero__maskot-box,
    .osk-hero__tecka,
    .osk-zaver__bublina,
    .osk-zaver__maskot {
        animation: none;
    }

    .osk-vyz__panel {
        animation: none;
    }

    /* Kruh skočí rovnou na hodnotu, nedotáčí se */
    .osk-vyz__kruh-hodnota,
    .osk-duvody__item,
    .osk-zaver__tlacitko {
        transition: none;
    }

    .osk-duvody__item:hover,
    .osk-zaver__tlacitko:hover {
        transform: none;
    }
}