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

/* --- Písmo Inter (self-hosted, latin + latin-ext kvůli české diakritice) --- */
@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
   Primární je firemní zelená přímo z loga (#157a51) – web tak drží stejnou
   barvu jako značka. Vodní modř zůstává jako SEKUNDÁRNÍ akcent (jsme firma
   od závlah, voda do obrazu patří), ale jen v detailech: CTA tlačítko na
   tmavém, fokusové rámečky, ikony v patičce, zvýrazněné bloky.
   ===================================================================== */
:root {
    /* --- Primární: zelená z loga --- */
    --barva-primarni: #157a51;          /* 5,34:1 na bílé – projde AA i pro běžný text */
    --barva-primarni-tmava: #0d5238;    /* nadpisy, hover, tmavé plochy – 9,21:1 */
    --barva-primarni-hlubka: #083c2a;   /* konec přechodu u tmavých sekcí a patičky */
    --barva-primarni-tint: #e9f4ee;     /* velmi světlý zelený podklad (odznaky, ikony, hover) */

    /* --- Sekundární: vodní modř --- */
    --barva-akcent: #34a9c9;            /* CTA na tmavém pozadí, vodní detaily */
    --barva-akcent-tmava: #1d7a96;      /* hover CTA + modré prvky na světlém (4,91:1) */
    --barva-akcent-svetla: #b6e3f2;     /* modré ikony a odznaky na tmavém pozadí */
    --barva-akcent-text: #06323f;       /* popisek na akcentovém tlačítku (4,99:1) */

    /* --- Listová zelená z lístku v logu: fajfky a „přírodní" ikony --- */
    --barva-zelena: #3f8f3a;
    --barva-zelena-svetla: #ecf5e8;

    --barva-text: #1a2620;
    --barva-text-tlumeny: #55665e;
    --barva-podklad: #ffffff;
    --barva-podklad-teply: #f7f5f1;
    --barva-podklad-svezi: #f1f7f2;     /* dřív chladná modrá plocha, teď zelenkavá */
    --barva-linka: #e3e9e4;
    --barva-linka-vyrazna: #bcd8c6;     /* linka zvýrazněná při hoveru / otevření */

    /* --- Elevace: dvouvrstvé měkké stíny (těsný + rozptýlený) laděné do zelené,
           ne šedý mour. Krok mezi stupni = jeden stupeň vyzdvižení prvku. --- */
    --stin-xs: 0 1px 2px rgba(13, 82, 56, .06);
    --stin-s: 0 1px 2px rgba(13, 82, 56, .05), 0 3px 8px rgba(13, 82, 56, .05);
    --stin-m: 0 2px 4px rgba(13, 82, 56, .05), 0 10px 22px rgba(13, 82, 56, .08);
    --stin-l: 0 4px 10px rgba(13, 82, 56, .06), 0 22px 46px rgba(13, 82, 56, .12);

    /* Barevné stíny pod tlačítky – ať tlačítko „svítí" vlastní barvou. */
    --stin-tlacitko: 0 4px 12px rgba(21, 122, 81, .26);
    --stin-tlacitko-hover: 0 10px 24px rgba(21, 122, 81, .32);
    --stin-tlacitko-akcent: 0 4px 12px rgba(29, 122, 150, .3);
    --stin-tlacitko-akcent-hover: 0 10px 24px rgba(29, 122, 150, .36);

    --radius: 16px;
    --radius-s: 12px;
    --radius-l: 24px;

    --sirka-obsahu: 1200px;
    --vyska-hlavicky: 78px;

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

/* =====================================================================
   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: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: clamp(1rem, .97rem + .15vw, 1.06rem);
    line-height: 1.65;
    color: var(--barva-text);
    background: var(--barva-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: 700;
    letter-spacing: -.015em;
    color: var(--barva-primarni-tmava);
    text-wrap: balance;
}

h1 {
    font-size: clamp(2rem, 1.35rem + 2.8vw, 3.4rem);
}

h2 {
    font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.4rem);
}

h3 {
    font-size: clamp(1.15rem, 1.02rem + .55vw, 1.4rem);
}

p {
    margin: 0 0 1.1em;
}

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

/* Fokus je vodní modř – odliší se od zelené značky i od zeleného tlačítka pod ním.
   Na světlém pozadí má 4,91:1, což je i na 3px rámeček s rezervou. */
:focus-visible {
    outline: 3px solid var(--barva-akcent-tmava);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Na tmavě zelených plochách by tmavá modř zanikla – tam svítí světlá vodní. */
.hero :focus-visible,
.sekce-tmava :focus-visible,
.paticka :focus-visible,
.lightbox :focus-visible {
    outline-color: var(--barva-akcent-svetla);
}

/* 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;
}

/* 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: .8rem 1.2rem;
    background: var(--barva-primarni);
    color: #fff;
    border-radius: 0 0 var(--radius-s) 0;
}

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

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

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

.sekce {
    padding: clamp(3rem, 6vw, 5.5rem) 0;
}

.sekce-tesna {
    padding: clamp(2rem, 4vw, 3.5rem) 0;
}

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

.sekce-svezi {
    background: var(--barva-podklad-svezi);
}

.sekce-tmava {
    background: linear-gradient(155deg, var(--barva-primarni-tmava), var(--barva-primarni-hlubka));
    color: rgba(255, 255, 255, .88);
}

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

.hlavicka-sekce {
    max-width: 62ch;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

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

.nadhodnoceni {
    display: inline-block;
    margin-bottom: .8rem;
    padding: .35rem .8rem;
    border-radius: 999px;
    background: var(--barva-primarni-tint);
    color: var(--barva-primarni);
    font-size: .8rem;
    font-weight: 650;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.sekce-tmava .nadhodnoceni {
    background: rgba(255, 255, 255, .14);
    color: var(--barva-akcent-svetla);
}

.perex {
    font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem);
    color: var(--barva-text-tlumeny);
}

.sekce-tmava .perex {
    color: rgba(255, 255, 255, .8);
}

/* =====================================================================
   4. Tlačítka
   ===================================================================== */
.tlacitko {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .85rem 1.6rem;
    border: 2px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-weight: 650;
    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.15rem;
    font-size: .93rem;
}

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

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

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

.tlacitko-akcent {
    background: var(--barva-akcent);
    border-color: var(--barva-akcent);
    color: var(--barva-akcent-text);
    box-shadow: var(--stin-tlacitko-akcent);
}

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

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

.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 {
    color: #fff;
}

.sekce-tmava .tlacitko-obrys:hover {
    background: #fff;
    color: var(--barva-primarni-tmava);
    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.4rem, 2.5vw, 2rem);
    background: #fff;
    border: 1px solid var(--barva-linka);
    border-radius: var(--radius);
    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(--barva-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 (realizace), musí reagovat i na klávesnici. */
.karta:focus-within {
    box-shadow: var(--stin-m);
    border-color: var(--barva-linka-vyrazna);
}

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

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

.karta-ikona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 1rem;
    border-radius: 14px;
    background: var(--barva-primarni-tint);
    color: var(--barva-primarni);
    transition: transform var(--prechod), background var(--prechod), color var(--prechod);
}

.karta-ikona.je-zelena {
    background: var(--barva-zelena-svetla);
    color: var(--barva-zelena);
}

.karta-foto {
    margin: -1px -1px 1.2rem;
    border-radius: var(--radius) var(--radius) 0 0;
    overflow: hidden;
}

.karta-obrazkova {
    padding: 0;
    overflow: hidden;
}

.karta-obrazkova .karta-telo {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: clamp(1.2rem, 2.2vw, 1.7rem);
}

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

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

.seznam-fajfky .ikona {
    flex: none;
    margin-top: .25rem;
    color: var(--barva-zelena);
}

/* =====================================================================
   6. Hero
   ===================================================================== */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(460px, 74vh, 720px);
    padding: clamp(3rem, 8vw, 6rem) 0;
    overflow: hidden;
    color: #fff;
}

.hero-pozadi {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.hero-pozadi img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 55%;
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Úvodní fotka je hodně světlá (osluněný trávník), takže překryv musí být
       hustší než u té původní. Text hera sahá zhruba do 60 % šířky – tam drží
       sytost a teprve pak se otevře do fotky, ať je vidět postřikovač.
       Měřeno na nejsvětlejším pixelu pod textem, cíl ≥ 4,5:1 pro bílý text. */
    background: linear-gradient(105deg, rgba(6, 44, 30, .94) 0%, rgba(7, 48, 33, .89) 40%, rgba(9, 56, 39, .72) 68%, rgba(10, 62, 43, .3) 100%);
}

/* Na užších displejích (mobil i tablet) text zabírá skoro celou šířku a fotka
   pod ním je světlá – překryv proto musí být svislý a plošně hustší. */
@media (max-width: 900px) {
    .hero::after {
        background: linear-gradient(180deg, rgba(6, 44, 30, .9) 0%, rgba(8, 52, 36, .86) 60%, rgba(8, 52, 36, .78) 100%);
    }
}

.hero-obsah {
    max-width: 46rem;
}

/* Obrysové tlačítko v heru je na fotce, potřebuje bílý tah i text. */
.hero .tlacitko-obrys {
    color: #fff;
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(4px);
}

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

.hero h1 {
    color: #fff;
    margin-bottom: .5em;
    text-shadow: 0 2px 20px rgba(0, 0, 0, .25);
}

.hero-perex {
    font-size: clamp(1.05rem, 1rem + .45vw, 1.3rem);
    color: rgba(255, 255, 255, .92);
    max-width: 40rem;
}

.hero-znacky {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 2.2rem;
}

.hero-odrazky {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
    margin: 1.6rem 0 0;
    padding: 0;
    list-style: none;
    font-weight: 600;
}

.hero-odrazky li {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.hero-odrazky .ikona {
    color: var(--barva-akcent-svetla);
}

/* Textové odznaky značek – žádná cizí loga */
.odznak {
    display: inline-flex;
    align-items: center;
    padding: .4rem .9rem;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .05em;
    backdrop-filter: blur(4px);
}

.odznak-tmavy {
    border-color: var(--barva-linka);
    background: #fff;
    color: var(--barva-primarni);
}

/* =====================================================================
   7. Kroky (jak to probíhá)
   ===================================================================== */
.kroky {
    counter-reset: krok;
    display: grid;
    gap: clamp(1rem, 2vw, 1.6rem);
    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: 1.8rem 1.4rem 1.4rem;
    background: #fff;
    border: 1px solid var(--barva-linka);
    border-radius: var(--radius);
    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);
    }
}

.krok::before {
    content: counter(krok);
    position: absolute;
    top: -18px;
    left: 1.4rem;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--barva-primarni);
    color: #fff;
    font-weight: 700;
    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(--barva-text-tlumeny);
    font-size: .96rem;
}

/* =====================================================================
   8. Čísla (počítadla)
   ===================================================================== */
.cisla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: clamp(1.2rem, 3vw, 2.5rem);
    text-align: center;
}

.cislo-hodnota {
    display: block;
    font-size: clamp(2.4rem, 1.6rem + 3vw, 3.8rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: #fff;
}

.cislo-popis {
    display: block;
    margin-top: .35rem;
    font-size: .95rem;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .75);
}

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

.dva-sloupce.uzsi-text {
    grid-template-columns: 1.05fr .95fr;
}

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

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

/* =====================================================================
   10. Galerie + lightbox
   ===================================================================== */
.galerie {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: clamp(.7rem, 1.5vw, 1.1rem);
}

.galerie-polozka {
    position: relative;
    display: block;
    padding: 0;
    border: 0;
    background: var(--barva-podklad-svezi);
    border-radius: var(--radius-s);
    overflow: hidden;
    cursor: zoom-in;
    aspect-ratio: 4 / 3;
    box-shadow: var(--stin-xs);
    transition: box-shadow var(--prechod);
}

.galerie-polozka img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s cubic-bezier(.2, 0, .2, 1);
}

.galerie-polozka::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6, 44, 30, .38), transparent 55%);
    opacity: 0;
    transition: opacity var(--prechod);
}

@media (hover: hover) and (pointer: fine) {
    .galerie-polozka:hover img {
        transform: scale(1.04);
    }

    .galerie-polozka:hover::after {
        opacity: 1;
    }

    .galerie-polozka:hover {
        box-shadow: var(--stin-m);
    }
}

/* Klávesnice dostane stejné zvýraznění jako myš (a navíc fokusový rámeček). */
.galerie-polozka:focus-visible img {
    transform: scale(1.04);
}

.galerie-polozka:focus-visible::after {
    opacity: 1;
}

.galerie-poznamka {
    margin-top: 1rem;
    font-size: .9rem;
    color: var(--barva-text-tlumeny);
}

/* Lightbox – ovládá js/web.js */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 3rem);
    background: rgba(5, 26, 18, .92);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.lightbox.je-otevreny {
    display: flex;
    animation: nabehni .2s ease;
}

.lightbox img {
    max-width: 100%;
    max-height: 82dvh;
    border-radius: var(--radius-s);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .5);
}

.lightbox-popis {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(.75rem, 3vw, 2rem);
    text-align: center;
    color: rgba(255, 255, 255, .85);
    font-size: .95rem;
    padding: 0 1rem;
}

.lightbox-tlacitko {
    position: absolute;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    cursor: pointer;
    transition: background var(--prechod), transform var(--prechod);
}

.lightbox-tlacitko:hover {
    background: rgba(255, 255, 255, .26);
    transform: scale(1.08);
}

.lightbox-tlacitko:active {
    transform: scale(.94);
}

.lightbox-zavrit {
    top: clamp(.75rem, 3vw, 1.5rem);
    right: clamp(.75rem, 3vw, 1.5rem);
}

.lightbox-predchozi {
    left: clamp(.5rem, 3vw, 1.5rem);
}

.lightbox-dalsi {
    right: clamp(.5rem, 3vw, 1.5rem);
}

@keyframes nabehni {
    from {
        opacity: 0;
    }
}

/* =====================================================================
   11. Akordeon (nejčastější dotazy) – nativní <details>
   ===================================================================== */
.dotazy {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.dotaz {
    background: #fff;
    border: 1px solid var(--barva-linka);
    border-radius: var(--radius-s);
    box-shadow: var(--stin-s);
    overflow: hidden;
    transition: border-color var(--prechod), box-shadow var(--prechod);
}

.dotaz[open] {
    border-color: var(--barva-linka-vyrazna);
    box-shadow: var(--stin-m);
}

@media (hover: hover) and (pointer: fine) {
    .dotaz:hover {
        border-color: var(--barva-linka-vyrazna);
        box-shadow: var(--stin-s);
    }
}

.dotaz summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.05rem 1.3rem;
    font-weight: 650;
    color: var(--barva-primarni-tmava);
    cursor: pointer;
    list-style: none;
    transition: background var(--prechod-rychly), color var(--prechod-rychly);
}

.dotaz summary::-webkit-details-marker {
    display: none;
}

.dotaz summary::after {
    content: '';
    flex: none;
    width: 12px;
    height: 12px;
    border-right: 2.4px solid var(--barva-primarni);
    border-bottom: 2.4px solid var(--barva-primarni);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--prechod);
}

.dotaz[open] summary::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}

.dotaz summary:hover {
    background: var(--barva-primarni-tint);
}

.dotaz-odpoved {
    padding: 0 1.3rem 1.25rem;
    color: var(--barva-text-tlumeny);
}

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

/* =====================================================================
   12. 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: 600;
    color: var(--barva-primarni-tmava);
}

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

.pole input,
.pole select,
.pole textarea {
    width: 100%;
    padding: .8rem .95rem;
    font: inherit;
    color: var(--barva-text);
    background: #fff;
    border: 1.5px solid var(--barva-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(--barva-linka-vyrazna);
    }
}

/* Fokus pole je vodní modř – shodně s globálním fokusovým rámečkem. */
.pole input:focus,
.pole select:focus,
.pole textarea:focus {
    outline: none;
    border-color: var(--barva-akcent-tmava);
    box-shadow: 0 0 0 4px rgba(29, 122, 150, .18);
}

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

.pole .validation-message,
.chyba-pole {
    font-size: .85rem;
    font-weight: 600;
    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: var(--barva-primarni-tint);
    border-color: #b7ddc7;
    color: #0f5c3c;
}

.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-akcent-tmava);
    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;
    }
}

/* =====================================================================
   13. Kontaktní dlaždice
   ===================================================================== */
.kontakt-dlazdice {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1.1rem 1.2rem;
    background: #fff;
    border: 1px solid var(--barva-linka);
    border-radius: var(--radius);
    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(--barva-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(--barva-linka-vyrazna);
}

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

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

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

/* =====================================================================
   14. 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;
}

/* Zelený podklad s vodní linkou po straně – zelená značka, voda jako doplněk. */
.text-obsah .zvyrazneni {
    padding: 1.2rem 1.4rem;
    border-left: 4px solid var(--barva-akcent-tmava);
    border-radius: 0 var(--radius-s) var(--radius-s) 0;
    background: var(--barva-primarni-tint);
    color: var(--barva-primarni-tmava);
    font-weight: 500;
}

.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. */
.text-obsah .tabulka-obal {
    overflow-x: auto;
    margin: 0 0 1.4rem;
}

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

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

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

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

.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-tmava);
    text-decoration-thickness: 2px;
}

/* =====================================================================
   15. Drobečková navigace
   ===================================================================== */
.drobecky {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: 0 0 1.2rem;
    padding: 0;
    list-style: none;
    font-size: .88rem;
    color: var(--barva-text-tlumeny);
}

.drobecky li::after {
    content: '/';
    margin-left: .45rem;
    color: #a4b4aa;
}

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

.drobecky a {
    color: var(--barva-text-tlumeny);
    text-decoration: none;
    transition: color var(--prechod-rychly);
}

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

/* =====================================================================
   16. 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
   (SvetZavlah.Web.styles.css), které se načítá až po app.css.
   ===================================================================== */
html.ma-souhlas .mobilni-lista {
    display: none !important;
}

/* =====================================================================
   17. 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,
    .lightbox-tlacitko:hover,
    .lightbox-tlacitko:active {
        transform: none;
    }

    .galerie-polozka:hover img,
    .galerie-polozka:focus-visible img {
        transform: none;
    }
}