/*
 * B&K Energy Plus — vzhled webu.
 * Bez inline stylů (CSP style-src 'self'), písmo Figtree hostované lokálně.
 * Barvy z loga (fialová → růžová) jen jako plné plochy a akcenty; přechod jen v logu.
 */

@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url(../fonts/figtree-cs.woff2) format('woff2');
}

:root {
    --fialova: #8d29ca;
    --ruzova: #ed4772;
    --noc: #120e24;
    --noc-2: #1c1735;
    --text: #1b1830;
    --tlumeny: #5d5872;
    --linka: #e7e2ef;
    --pozadi: #f7f5fb;
    --bila: #fff;
    --odkaz: #7a22b3;
    --chyba: #b42318;
    --uspech: #067647;
    --fialova-tmava: #6f1fa6;
    --radius: 12px;
    --radius-s: 8px;
    --stin: 0 18px 44px -28px rgba(40, 18, 72, .45);
    --stin-maly: 0 8px 22px -16px rgba(40, 18, 72, .4);
    --sirka: 1200px;
    --okraj: clamp(1.1rem, 4vw, 2rem);
    --hlavicka: 76px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--hlavicka) + 16px);
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
    margin: 0;
    font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--text);
    background: var(--bila);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
    margin: 0 0 .6em;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--noc);
    text-wrap: balance;
}

h1 { font-size: clamp(2.2rem, 5.2vw, 4rem); }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.75rem); }
h3 { font-size: 1.3rem; letter-spacing: -.01em; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--odkaz); text-underline-offset: .18em; }
a:hover { color: var(--ruzova); }

:focus-visible {
    outline: 3px solid var(--fialova);
    outline-offset: 3px;
    border-radius: 6px;
}

.vizualne-skryte {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

.preskocit {
    position: absolute;
    left: 1rem; top: -4rem;
    z-index: 100;
    padding: .7rem 1rem;
    background: var(--noc);
    color: #fff;
    border-radius: 10px;
    font-weight: 700;
}
.preskocit:focus { top: 1rem; color: #fff; }

.obal {
    width: 100%;
    max-width: calc(var(--sirka) + 2 * var(--okraj));
    margin: 0 auto;
    padding: 0 var(--okraj);
}

.sekce { padding: clamp(4rem, 9vw, 7.5rem) 0; }
.sekce--svetla { background: var(--pozadi); }
.sekce--tmava { background: var(--noc); color: #d9d4e8; }
.sekce--tmava h2, .sekce--tmava h3 { color: #fff; }

.nadtitulek {
    display: block;
    margin: 0 0 .9rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--fialova);
}
.sekce--tmava .nadtitulek, .hero .nadtitulek { color: #f3b6d0; }

.uvod-sekce { max-width: 760px; margin-bottom: clamp(2.2rem, 5vw, 3.5rem); }
.uvod-sekce--stred { margin-left: auto; margin-right: auto; text-align: center; }
.uvod-sekce--stred .nadtitulek { justify-content: center; }
.perex { font-size: clamp(1.1rem, 1.6vw, 1.25rem); color: var(--tlumeny); }
.sekce--tmava .perex { color: #c9c2dc; }

/* ------------------------------------------------------------ tlačítka */
.tlacitko {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 50px;
    padding: .8rem 1.5rem;
    border: 0;
    border-radius: 10px;
    background: var(--fialova);
    color: #fff;
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.tlacitko:hover { color: #fff; background: var(--fialova-tmava); }
.tlacitko[disabled] { opacity: .65; cursor: progress; }
.tlacitko svg { width: 20px; height: 20px; flex: none; }

.tlacitko--obrys {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, .55);
}
.tlacitko--obrys:hover { background: #fff; border-color: #fff; color: var(--noc); }

.tlacitko--svetle {
    background: var(--bila);
    color: var(--noc);
    border: 1.5px solid var(--linka);
}
.tlacitko--svetle:hover { background: var(--bila); color: var(--fialova); border-color: var(--fialova); }

.tlacitka { display: flex; flex-wrap: wrap; gap: .8rem; }
.tlacitko--akcent { background: var(--ruzova); }
.tlacitko--akcent:hover { background: #d23561; }

/* ------------------------------------------------------------ hlavička */
.hlavicka {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .25s ease, box-shadow .25s ease;
}
.hlavicka.je-posunuto { border-bottom-color: var(--linka); box-shadow: 0 10px 30px -24px rgba(30, 10, 60, .5); }

.hlavicka__obal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: var(--hlavicka);
}

.logo { display: block; flex: none; }
.logo img { width: 196px; }
@media (max-width: 560px) { .logo img { width: 156px; } }

.menu-tlacitko {
    display: none;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    padding: .5rem .95rem;
    border: 1.5px solid var(--linka);
    border-radius: 999px;
    background: var(--bila);
    color: var(--noc);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.menu-tlacitko svg { width: 22px; height: 22px; }

.menu,
.menu[popover] {
    position: static;
    inset: auto;
    display: flex;
    align-items: center;
    gap: 1.6rem;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: visible;
    background: transparent;
    color: inherit;
}
.menu ul {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.menu ul a {
    position: relative;
    padding: .4rem 0;
    color: var(--noc);
    font-weight: 600;
    text-decoration: none;
}
.menu ul a::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 2px;
    border-radius: 2px;
    background: var(--ruzova);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}
.menu ul a:hover::after, .menu ul a[aria-current='page']::after { transform: scaleX(1); }
.menu .telefon {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--noc);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.menu .telefon svg { width: 18px; height: 18px; color: var(--fialova); }
.menu .tlacitko { min-height: 44px; padding: .6rem 1.2rem; }
.menu__zavrit { display: none; }

@media (max-width: 1080px) {
    .menu-tlacitko { display: inline-flex; }
    .menu[popover] {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(380px, 100%);
        height: 100dvh;
        margin: 0;
        padding: 1.2rem var(--okraj) 2rem;
        border: 0;
        background: var(--bila);
        box-shadow: -30px 0 60px -30px rgba(18, 14, 36, .45);
        flex-direction: column;
        align-items: stretch;
        gap: 1.4rem;
        overflow-y: auto;
    }
    .menu[popover]:not(:popover-open) { display: none; }
    .menu[popover]::backdrop { background: rgba(18, 14, 36, .45); }
    .menu ul { flex-direction: column; align-items: stretch; gap: 0; }
    .menu ul a { display: block; padding: .95rem 0; border-bottom: 1px solid var(--linka); font-size: 1.15rem; }
    .menu ul a::after { display: none; }
    .menu .telefon { font-size: 1.15rem; }
    .menu__zavrit {
        display: inline-flex;
        align-self: flex-end;
        align-items: center;
        justify-content: center;
        width: 44px; height: 44px;
        border: 1.5px solid var(--linka);
        border-radius: 50%;
        background: var(--bila);
        color: var(--noc);
        cursor: pointer;
    }
    .menu__zavrit svg { width: 20px; height: 20px; }
}

/* Prohlížeč bez podpory popover: menu jako řádek pod logem */
@supports not selector(:popover-open) {
    @media (max-width: 1080px) {
        .menu-tlacitko { display: none; }
        .hlavicka__obal { flex-wrap: wrap; padding: .6rem 0; }
        .menu[popover] { display: flex; position: static; width: 100%; height: auto; padding: 0; box-shadow: none; flex-direction: row; flex-wrap: wrap; }
        .menu ul { flex-direction: row; flex-wrap: wrap; gap: .4rem 1.2rem; }
        .menu ul a { border: 0; padding: .3rem 0; font-size: 1rem; }
        .menu__zavrit { display: none; }
    }
}

/* ------------------------------------------------------------ hero */
.hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: min(86vh, 780px);
    padding: clamp(6rem, 14vw, 9rem) 0 clamp(3rem, 7vw, 5.5rem);
    color: #fff;
    overflow: hidden;
    background: var(--noc);
}
.hero__foto, .hero__foto img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% 40%;
    z-index: -2;
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(18, 14, 36, .9) 0%, rgba(18, 14, 36, .72) 38%, rgba(18, 14, 36, .2) 72%, rgba(18, 14, 36, 0) 100%),
        linear-gradient(0deg, rgba(18, 14, 36, .55) 0%, rgba(18, 14, 36, 0) 45%);
}
.hero > .obal {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 2rem 3rem;
}
.hero__obsah { max-width: 700px; }

/* upoutávka na EMS 2026 v úvodu — decentní karta vpravo dole */
.hero-ems {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    align-items: center;
    gap: 1.1rem;
    width: 410px;
    margin-bottom: 1.2rem;
    padding: 1rem 1.25rem 1rem 1rem;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .94);
    color: var(--text);
    text-decoration: none;
    box-shadow: 0 22px 50px -24px rgba(10, 6, 24, .7);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: transform .25s ease, box-shadow .25s ease;
}
.hero-ems:hover { color: var(--text); transform: translateY(-3px); box-shadow: 0 28px 60px -24px rgba(10, 6, 24, .8); }
.hero-ems__foto {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: var(--radius-s);
    background: #fff;
    border: 1px solid var(--linka);
    overflow: hidden;
}
.hero-ems__foto img { width: 88%; height: auto; transition: transform .35s ease; }
.hero-ems:hover .hero-ems__foto img { transform: scale(1.06) rotate(-2deg); }
.hero-ems__text { display: grid; gap: .2rem; line-height: 1.35; }
.hero-ems__stitek {
    justify-self: start;
    padding: .1rem .5rem;
    border-radius: 6px;
    background: #fde7ee;
    color: #b8264f;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.hero-ems__nazev { font-size: 1.08rem; font-weight: 800; color: var(--noc); }
.hero-ems__popis { font-size: .88rem; color: var(--tlumeny); }
.hero-ems__cena { margin-top: .15rem; font-size: .9rem; color: var(--tlumeny); }
.hero-ems__cena b { font-size: 1.05rem; font-weight: 800; color: var(--fialova); }
.hero-ems__odkaz { display: inline-flex; align-items: center; gap: .35rem; margin-top: .2rem; font-size: .88rem; font-weight: 700; color: var(--fialova); }
.hero-ems__odkaz svg { width: 15px; height: 15px; transition: transform .2s ease; }
.hero-ems:hover .hero-ems__odkaz svg { transform: translateX(3px); }
@media (max-width: 1080px) {
    .hero > .obal { grid-template-columns: 1fr; }
    .hero-ems { width: min(100%, 460px); margin-bottom: 0; }
}
@media (max-width: 700px) {
    .hero-ems { grid-template-columns: 76px minmax(0, 1fr); gap: .9rem; padding: .85rem 1rem .85rem .85rem; }
    .hero-ems__popis { display: none; }
}
.hero h1 { color: #fff; margin-bottom: .45em; max-width: 15ch; }
.hero .perex { color: #ece8f6; max-width: 600px; margin-bottom: 2rem; }

@media (max-width: 700px) {
    .hero { min-height: 82vh; align-items: flex-end; }
    .hero__foto img { object-position: 60% 30%; }
    .hero::before {
        background: linear-gradient(0deg, rgba(18, 14, 36, .95) 0%, rgba(18, 14, 36, .78) 48%, rgba(18, 14, 36, .25) 80%, rgba(18, 14, 36, .1) 100%);
    }
    .hero .tlacitka .tlacitko { flex: 1 1 100%; }
}

/* ------------------------------------------------------------ úvodní blok O nás */
.uvodni {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center;
}
.uvodni__text p { color: var(--tlumeny); }
.uvodni__text p.zvyrazneny { color: var(--text); font-size: 1.2rem; font-weight: 600; }
.uvodni__foto { position: relative; }
.uvodni__foto img {
    width: 100%;
    aspect-ratio: 4 / 3.4;
    object-fit: cover;
    border-radius: var(--radius);
    box-shadow: var(--stin);
}
.uvodni__stitek {
    position: absolute;
    left: clamp(-1.5rem, -2vw, -.5rem);
    bottom: 1.6rem;
    max-width: 270px;
    padding: 1rem 1.2rem;
    border-radius: var(--radius-s);
    background: var(--bila);
    box-shadow: var(--stin);
    font-size: .95rem;
    line-height: 1.45;
}
.uvodni__stitek strong { display: block; color: var(--noc); }
.uvodni__stitek span { color: var(--tlumeny); }

@media (max-width: 900px) {
    .uvodni { grid-template-columns: 1fr; }
    .uvodni__stitek { left: 1rem; right: 1rem; bottom: 1rem; max-width: none; }
}

/* ------------------------------------------------------------ tematické řádky (text + foto) */
.temata { display: grid; gap: clamp(3.5rem, 8vw, 6rem); }
.tema {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center;
}
.tema:nth-child(even) .tema__foto { order: 2; }
.tema__foto img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius);
    box-shadow: var(--stin);
}
.tema p { color: var(--tlumeny); }
.tema .tlacitka { margin-top: 1.6rem; }

@media (max-width: 900px) {
    .tema { grid-template-columns: 1fr; }
    .tema:nth-child(even) .tema__foto { order: 0; }
}

/* Kostarika — karta přes spodní hranu úvodní fotky */
.kostarika { position: relative; z-index: 2; margin-top: -2.6rem; }
.kostarika__karta {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.2rem 1.4rem;
    padding: 1.3rem 1.5rem;
    border-radius: var(--radius);
    background: var(--bila);
    border: 1px solid var(--linka);
    box-shadow: var(--stin);
}
.kostarika__karta .ikona {
    display: inline-grid;
    place-items: center;
    flex: none;
    color: var(--fialova);
}
.kostarika__karta .ikona svg { width: 34px; height: 34px; }
.kostarika__karta h2 { margin: 0 0 .2rem; font-size: 1.3rem; }
.kostarika__karta p { margin: 0; color: var(--tlumeny); }
.kostarika + .sekce { padding-top: clamp(3rem, 7vw, 5.5rem); }
@media (max-width: 760px) {
    .kostarika { margin-top: -1.6rem; }
    .kostarika__karta { grid-template-columns: 44px minmax(0, 1fr); padding: 1.1rem 1.1rem 1.2rem; }
    .kostarika__karta .tlacitko { grid-column: 1 / -1; }
}
.info-karta--kostarika { background: #f5effb; border-color: #e6d8f3; }

/* ------------------------------------------------------------ video */
.video {
    position: relative;
    overflow: hidden;
}
.video__mrizka {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center;
}
.prehravac {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius);
    background: #000;
}
.prehravac iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.prehravac__spustit {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    cursor: pointer;
}
.prehravac__spustit img { width: 100%; height: 100%; object-fit: cover; }
.prehravac__spustit::after { content: ''; position: absolute; inset: 0; background: rgba(18, 14, 36, .2); transition: background-color .2s ease; }
.prehravac__spustit:hover::after { background: rgba(18, 14, 36, .35); }
.prehravac__tlacitko {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem 1.3rem .85rem 1rem;
    border-radius: 10px;
    background: #fff;
    color: var(--noc);
    font-weight: 700;
    transform: translate(-50%, -50%);
    transition: background-color .2s ease, color .2s ease;
}
.prehravac__spustit:hover .prehravac__tlacitko { background: var(--fialova); color: #fff; }
.prehravac__tlacitko svg { width: 22px; height: 22px; color: var(--ruzova); }
.prehravac__spustit:hover .prehravac__tlacitko svg { color: #fff; }
.video__pozn { margin-top: 1rem; font-size: .9rem; color: #a59fbb; }

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

/* ------------------------------------------------------------ EMS */
.ems__hlavni {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center;
    margin-bottom: clamp(2.5rem, 6vw, 4rem);
}
.ems__zarizeni {
    position: relative;
    display: grid;
    place-items: center;
    padding: clamp(1.5rem, 4vw, 3rem);
    border-radius: var(--radius);
    background: var(--bila);
    border: 1px solid var(--linka);
}
.ems__zarizeni img { width: min(100%, 380px); mix-blend-mode: multiply; }
.ems__cena {
    margin-top: 1.8rem;
    padding: 1.5rem 1.6rem;
    border-radius: var(--radius);
    background: var(--noc);
    color: #d9d4e8;
    box-shadow: var(--stin);
}
.ems__cena p { margin: 0; }
.ems__cena .castka {
    display: block;
    margin: .25rem 0 .35rem;
    font-size: clamp(2rem, 4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: #fff;
}
.ems__cena .castka small { font-size: 1rem; font-weight: 600; letter-spacing: 0; color: #c9c2dc; }
.ems__cena .konkurence { margin-top: .6rem; font-size: .95rem; color: #a59fbb; }
.ems__cena + .tlacitka { margin-top: 1.75rem; }

.funkce {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 4vw, 3.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}
.funkce li {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 1rem;
    padding: 1.4rem 0;
    border-top: 1px solid #ddd3ea;
}
.funkce h3 { margin: 0 0 .3rem; font-size: 1.08rem; }
.funkce .ikona { align-self: start; margin-top: .1rem; }
.funkce .ikona svg { width: 26px; height: 26px; }
.funkce p { margin: 0; font-size: .98rem; color: var(--tlumeny); }
.ikona {
    display: inline-grid;
    place-items: center;
    flex: none;
    color: var(--fialova);
}
.ikona svg { width: 22px; height: 22px; }

@media (max-width: 900px) {
    .ems__hlavni { grid-template-columns: 1fr; }
    .funkce { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ nabídka */
.nabidka {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto;
    gap: 1.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.nabidka > li:nth-child(1), .nabidka > li:nth-child(2) { grid-row: span 2; }
.karta {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--bila);
    border: 1px solid var(--linka);
}
.karta__foto { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: #ece7f3; }
.karta__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.karta:hover .karta__foto img { transform: scale(1.03); }
.karta__telo { display: flex; flex: 1; flex-direction: column; padding: 1.4rem 1.5rem 1.5rem; }
.karta h3 { margin-bottom: .35rem; font-size: 1.35rem; }
.karta__popis { color: var(--tlumeny); font-size: .98rem; }
.karta__cena {
    margin: auto 0 1.1rem;
    padding-top: 1rem;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--noc);
    letter-spacing: -.01em;
}
.karta__cena span { font-size: .95rem; font-weight: 600; color: var(--tlumeny); letter-spacing: 0; }
.karta .tlacitko { align-self: flex-start; }
.karta--svetla { background: #f5effb; border-color: #e6d8f3; }
.karta--tmava { background: var(--noc); border-color: var(--noc); color: #d9d4e8; }
.karta--tmava h3, .karta--tmava .karta__cena { color: #fff; }
.karta--tmava .karta__popis { color: #c9c2dc; }

@media (max-width: 1000px) {
    .nabidka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nabidka > li:nth-child(1), .nabidka > li:nth-child(2) { grid-row: auto; }
}
@media (max-width: 600px) { .nabidka { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ značky komponent */
.znacky {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 5vw, 3.8rem);
    margin: 0;
    padding: 0;
    list-style: none;
}
.znacky img {
    height: 38px;
    width: auto;
    filter: grayscale(1);
    opacity: .7;
    transition: filter .3s ease, opacity .3s ease;
}
.znacky li:hover img { filter: none; opacity: 1; }
.znacky__popisek {
    margin: 0 0 2.2rem;
    text-align: center;
    font-size: .85rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tlumeny);
}

/* ------------------------------------------------------------ galerie */
.galerie {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
    gap: .8rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.galerie--ukazka { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.galerie a {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--radius-s);
    background: #ece7f3;
    aspect-ratio: 4 / 3;
}
.galerie img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease, opacity .3s ease;
}
.galerie a::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(18, 14, 36, .18);
    opacity: 0;
    transition: opacity .3s ease;
}
.galerie a:hover img { transform: scale(1.03); }
.galerie a:hover::after, .galerie a:focus-visible::after { opacity: 1; }
.galerie-stav { color: var(--tlumeny); }
.galerie-stav[hidden] { display: none; }
.galerie__vice { margin-top: 2rem; text-align: center; }

@media (max-width: 900px) { .galerie--ukazka { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; } .galerie a { border-radius: 10px; } }

/* mozaika vybraných fotek na úvodní stránce */
.mozaika {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .8rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.mozaika a {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-s);
    background: #ece7f3;
}
.mozaika__velka { grid-column: span 2; grid-row: span 2; }
.mozaika__velka a { aspect-ratio: auto; height: 100%; border-radius: var(--radius); }
.mozaika img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.mozaika a::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(18, 14, 36, .18);
    opacity: 0;
    transition: opacity .3s ease;
}
.mozaika a:hover img { transform: scale(1.03); }
.mozaika a:hover::after, .mozaika a:focus-visible::after { opacity: 1; }
@media (max-width: 700px) {
    .mozaika { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
    .mozaika__velka { grid-row: span 1; }
    .mozaika__velka a { aspect-ratio: 4 / 3; height: auto; }
}

/* lightbox */
.lightbox {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(12, 9, 24, .96);
    color: #fff;
    overflow: hidden;
}
.lightbox::backdrop { background: rgba(12, 9, 24, .96); }
.lightbox__plocha {
    position: absolute;
    inset: 64px 0 64px;
    display: grid;
    place-items: center;
    padding: 0 clamp(.5rem, 6vw, 5rem);
    touch-action: pan-y;
}
.lightbox__plocha img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9);
    user-select: none;
}
.lightbox__horni {
    position: absolute;
    left: 0; right: 0; top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    padding: 0 1rem 0 1.4rem;
    font-weight: 600;
    color: #c9c2dc;
}
.lightbox button {
    display: grid;
    place-items: center;
    width: 48px; height: 48px;
    border: 1.5px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}
.lightbox button:hover { background: rgba(255, 255, 255, .16); border-color: #fff; }
.lightbox button svg { width: 22px; height: 22px; }
.lightbox__sipka {
    position: absolute;
    top: 50%;
    margin-top: -24px;
    z-index: 2;
}
.lightbox__sipka--zpet { left: clamp(.5rem, 2vw, 1.5rem); }
.lightbox__sipka--dal { right: clamp(.5rem, 2vw, 1.5rem); }

@media (max-width: 700px) {
    .lightbox__plocha { padding: 0; }
    .lightbox__sipka { top: auto; bottom: 8px; margin: 0; }
}

/* ------------------------------------------------------------ výzva (pás) */
.pas {
    position: relative;
    padding: clamp(4rem, 9vw, 6.5rem) 0;
    background: linear-gradient(90deg, rgba(24, 14, 40, .92) 0%, rgba(24, 14, 40, .8) 55%, rgba(24, 14, 40, .55) 100%), url(../img/vyber-33-1600.webp) center / cover no-repeat;
    color: #fff;
}
.pas__obsah {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}
.pas h2 { color: #fff; max-width: 680px; margin: 0; }
.pas .tlacitko:not(.tlacitko--obrys) { background: var(--ruzova); }
.pas .tlacitko:not(.tlacitko--obrys):hover { background: #d23561; }

/* ------------------------------------------------------------ záhlaví podstránek */
.zahlavi {
    position: relative;
    overflow: hidden;
    padding: clamp(3.5rem, 8vw, 5.5rem) 0 clamp(3rem, 6vw, 4.5rem);
    background: var(--noc);
    color: #d9d4e8;
}
.zahlavi .obal { position: relative; }
.zahlavi h1 { color: #fff; margin-bottom: .3em; }
.zahlavi .perex { color: #c9c2dc; max-width: 640px; margin: 0; }

/* ------------------------------------------------------------ kontakt */
.kontakt {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}
.kontakt__karty { display: grid; gap: 1rem; }
.info-karta {
    padding: 1.5rem 1.6rem;
    border-radius: var(--radius);
    background: var(--pozadi);
    border: 1px solid var(--linka);
}
.info-karta h2 { font-size: 1.25rem; margin-bottom: .8rem; }
.info-karta p { color: var(--tlumeny); }
.info-karta--tmava { background: var(--noc); border-color: var(--noc); color: #d9d4e8; }
.info-karta--tmava h2 { color: #fff; }
.info-karta--tmava a { color: #fff; }
.spojeni { display: grid; gap: .9rem; margin: 0; padding: 0; list-style: none; }
.spojeni a {
    display: flex;
    align-items: center;
    gap: .8rem;
    font-size: 1.15rem;
    font-weight: 700;
    text-decoration: none;
    word-break: break-word;
}
.spojeni a:hover { color: #f6b3cb; }
.spojeni .ikona { width: 24px; color: #f3b6d0; }
.spojeni .ikona svg { width: 22px; height: 22px; }
.hodiny { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1.2rem; margin: 0; }
.hodiny dt { font-weight: 700; color: var(--noc); }
.hodiny dd { margin: 0; color: var(--tlumeny); }
.udaje { margin: 0; color: var(--tlumeny); font-style: normal; line-height: 1.7; }
.udaje strong { color: var(--noc); }
.odkaz-sipka { display: inline-flex; align-items: center; gap: .4rem; margin-top: .8rem; font-weight: 700; }
.odkaz-sipka svg { width: 16px; height: 16px; }

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

/* ------------------------------------------------------------ formulář */
.formular-box {
    padding: clamp(1.5rem, 4vw, 2.6rem);
    border-radius: var(--radius);
    background: var(--bila);
    border: 1px solid var(--linka);
    box-shadow: var(--stin);
}
.formular-box > h2 { margin-bottom: .3rem; }
.formular-box > .perex { font-size: 1.02rem; margin-bottom: 1.8rem; }
.formular { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.1rem 1rem; }
.pole { grid-column: span 6; display: grid; gap: .4rem; align-content: start; }
.pole--pul { grid-column: span 3; }
.pole--tretina { grid-column: span 2; }
.pole--dve-tretiny { grid-column: span 4; }
.pole label, .pole legend { font-weight: 700; font-size: .95rem; color: var(--noc); }
.pole .povinne { color: var(--ruzova); }
.pole input[type='text'], .pole input[type='email'], .pole input[type='tel'], .pole textarea {
    width: 100%;
    min-height: 50px;
    padding: .75rem .95rem;
    border: 1.5px solid #d8d1e4;
    border-radius: 12px;
    background: #fdfcff;
    color: var(--text);
    font: inherit;
    font-size: 1rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.pole textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.pole input:focus, .pole textarea:focus {
    outline: none;
    border-color: var(--fialova);
    box-shadow: 0 0 0 4px rgba(141, 41, 202, .14);
}
.pole [aria-invalid='true'] { border-color: var(--chyba); }
.pole fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.pole legend { padding: 0; margin-bottom: .55rem; }
.volby { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.volba {
    position: relative;
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: 50px;
    padding: .6rem .9rem;
    border: 1.5px solid #d8d1e4;
    border-radius: 12px;
    background: #fdfcff;
    font-weight: 600;
    font-size: .98rem;
    line-height: 1.3;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}
.volba input { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--fialova); }
.volba:has(input:checked) { border-color: var(--fialova); background: #f6effc; }
.volba:has(input:focus-visible) { outline: 3px solid var(--fialova); outline-offset: 2px; }
.pole__pocet { justify-self: end; font-size: .85rem; color: var(--tlumeny); }
.pole__chyba { margin: 0; font-size: .9rem; font-weight: 600; color: var(--chyba); }
.pole__chyba[hidden] { display: none; }
.past { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.turnstile { min-height: 70px; }
.formular__pata { grid-column: span 6; display: grid; gap: 1rem; }
.formular__pata .tlacitko { justify-self: start; min-width: 220px; }
.formular__pozn { margin: 0; font-size: .9rem; color: var(--tlumeny); }
.hlaseni {
    grid-column: span 6;
    margin: 0;
    padding: .9rem 1.1rem;
    border-radius: 12px;
    font-weight: 600;
}
.hlaseni--chyba { background: #fef3f2; color: var(--chyba); border: 1px solid #fecdca; }
.hlaseni[hidden] { display: none; }
.uspech {
    padding: 2rem 1.6rem;
    border-radius: var(--radius-s);
    background: #ecfdf3;
    border: 1px solid #abefc6;
    color: #054f31;
    text-align: center;
}
.uspech[hidden] { display: none; }
.uspech h3 { color: #054f31; }
.uspech svg { width: 48px; height: 48px; margin: 0 auto 1rem; color: var(--uspech); }

@media (max-width: 640px) {
    .pole--pul, .pole--tretina, .pole--dve-tretiny { grid-column: span 6; }
    .volby { grid-template-columns: 1fr; }
    .formular__pata .tlacitko { justify-self: stretch; }
}

/* ------------------------------------------------------------ patička */
.paticka {
    padding: clamp(3.5rem, 7vw, 5rem) 0 5rem;   /* místo pro ikonu nastavení cookies vlevo dole */
    background: var(--noc);
    color: #b9b2cf;
    font-size: .98rem;
}
.paticka a { color: #e9e4f5; text-decoration: none; }
.paticka a:hover { color: #f6b3cb; }
.paticka__mrizka {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: 2rem 3rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.paticka__logo img { width: 210px; margin-bottom: 1.2rem; }
.paticka h2 {
    margin: 0 0 1rem;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
}
.paticka ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.paticka address { font-style: normal; line-height: 1.7; }
.paticka__spodek {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.6rem;
    font-size: .9rem;
    color: #8f88a8;
}
.socialni { display: inline-flex; align-items: center; gap: .5rem; }
.socialni svg { width: 18px; height: 18px; }

@media (max-width: 960px) { .paticka__mrizka { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .paticka__mrizka { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ 404 */
.chyba-404 { padding: clamp(5rem, 12vw, 9rem) 0; text-align: center; }
.chyba-404 .tlacitka { justify-content: center; margin-top: 2rem; }
.chyba-404 .kod {
    display: block;
    font-size: clamp(5rem, 16vw, 9rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--fialova);
}

/* ------------------------------------------------------------ cookie lišta */
.cookie {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 60;
    width: min(520px, calc(100% - 2rem));
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    padding: 1.4rem 1.5rem 1.5rem;
    border-radius: var(--radius);
    background: var(--bila);
    border: 1px solid var(--linka);
    box-shadow: 0 30px 70px -20px rgba(18, 14, 36, .45);
}
.cookie[hidden] { display: none; }
.cookie h2 { margin: 0 0 .45rem; font-size: 1.15rem; }
.cookie p { margin: 0 0 1rem; font-size: .95rem; line-height: 1.55; color: var(--tlumeny); }
.cookie__volby { display: grid; gap: .5rem; margin-bottom: 1rem; }
.cookie__volby[hidden] { display: none; }
.cookie__volba {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .65rem .85rem;
    border: 1.5px solid var(--linka);
    border-radius: 12px;
    font-size: .95rem;
    line-height: 1.35;
    cursor: pointer;
}
.cookie__volba input { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--fialova); }
.cookie__volba strong { color: var(--noc); }
.cookie__tlacitka { display: flex; flex-wrap: wrap; gap: .5rem; }
.cookie__tlacitka .tlacitko { flex: 1 1 auto; min-height: 44px; padding: .6rem 1.1rem; font-size: .95rem; }
.cookie__tlacitka [hidden] { display: none; }
@media (max-width: 560px) {
    .cookie { left: .5rem; right: .5rem; bottom: .5rem; width: auto; padding: 1.1rem 1.1rem 1.2rem; }
    .cookie__tlacitka .tlacitko { flex: 1 1 40%; }
}

.odkaz-tlacitko {
    padding: 0;
    border: 0;
    background: none;
    color: #e9e4f5;
    font: inherit;
    cursor: pointer;
}
.odkaz-tlacitko:hover { color: #f6b3cb; }

.cookie p a { color: var(--odkaz); font-weight: 600; }
.cookie__id {
    margin: -.2rem 0 1rem;
    padding: .55rem .75rem;
    border-radius: 10px;
    background: var(--pozadi);
    font-size: .82rem !important;
    color: var(--tlumeny);
    word-break: break-all;
}
.cookie__id[hidden] { display: none; }

.cookie-ikona {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 55;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid var(--linka);
    border-radius: 50%;
    background: var(--bila);
    color: var(--fialova);
    box-shadow: var(--stin-maly);
    cursor: pointer;
    transition: transform .2s ease, color .2s ease;
}
.cookie-ikona:hover { transform: scale(1.06); color: var(--ruzova); }
.cookie-ikona svg { width: 24px; height: 24px; }
.cookie-ikona[hidden] { display: none; }
@media (max-width: 560px) { .cookie-ikona { left: .6rem; bottom: .6rem; width: 42px; height: 42px; } }

/* ------------------------------------------------------------ textová stránka (cookies) */
.text-stranka { max-width: 860px; }
.text-stranka h2 { margin: 2.4rem 0 .7rem; font-size: 1.45rem; }
.text-stranka h2:first-child { margin-top: 0; }
.text-stranka p { color: var(--tlumeny); }
.text-stranka code { padding: .1rem .35rem; border-radius: 6px; background: var(--pozadi); font-size: .92em; color: var(--noc); }
.text-stranka__pata { margin-top: 2.4rem; font-size: .92rem; }
.tabulka-obal { overflow-x: auto; margin: 1.2rem 0; border: 1px solid var(--linka); border-radius: var(--radius-s); }
.tabulka { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .95rem; }
.tabulka th, .tabulka td { padding: .75rem .9rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linka); }
.tabulka th { background: var(--pozadi); color: var(--noc); font-weight: 700; }
.tabulka tr:last-child td { border-bottom: 0; }

/* hlavička sekce: nadpis vlevo, odkaz vpravo */
.hlava-sekce {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
}
.hlava-sekce h2 { margin: 0; }