/* =============================================================================
   Chráníme budovy — hlavní styl

   Hodnoty (barvy, rozměry, typografie) jsou naměřené na původním webu, ne
   odhadnuté — vzhled musí zůstat 1:1. Struktura tokenů je převzatá z
   pozemkyOtovice, hodnoty ne.

   Klíčové rozměry hlavičky, ověřené v prohlížeči na 1440 px:
     deska 1160×109 px, 30 px od horního okraje, stín 0 0 15px rgba(0,0,0,.3)
     logo 300×52, 30 px od levého kraje desky
     kontakty 14px/40px #707070, zarovnané doprava, 30 px od pravého kraje
     menu 14px uppercase #000, mezera mezi položkami 15 px
   ========================================================================== */

:root {
    /* Barvy */
    /* Barvy — od rebrandingu (Michal, říjen 2026) jeho paleta, dřív #e00007
       a šedé naměřené na originále. */
    --c-red: #df1233;          /* brand */
    --c-red-dark: #b90a28;     /* hover */
    --c-black: #000;
    --c-white: #fff;
    --c-text: #343a43;         /* běžný text */
    --c-ink: #202832;          /* tmavý text hlavičky (telefon) */
    --c-ink-soft: #414852;     /* menu */
    --c-muted: #66707b;        /* popisky */
    --c-gray-bg: #f4f5f6;      /* podklad střídavých sekcí */
    --c-line: #e8eaed;
    --c-footer: #19232e;       /* tmavá patička */
    --c-footer-text: #c5ced7;

    /* Sémantické role */
    --bg-page: var(--c-white);
    --bg-alt: var(--c-gray-bg);
    --text: var(--c-text);

    /* Typografie */
    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --fs-body: 16px;
    --lh-body: 24px;

    /* Layout */
    --container: 1190px;       /* včetně 2×15 px paddingu → obsah 1160 */
    --gutter: 15px;

    /* Rytmus sekcí */
    --section-py: clamp(40px, 5vw, 70px);

    /* Efekty */
    --ease: cubic-bezier(.4, 0, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);   /* reveal a hover (vzor pozemkyOtovice) */

    /* Zaoblení a stíny — od rebrandingu (vzor pozemkyOtovice) */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --shadow-card: 0 10px 30px -12px rgba(23, 35, 48, .22);
}

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

body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text);
    background: var(--bg-page);
    /* Záměrně BEZ -webkit-font-smoothing: antialiased — na macOS ztenčuje
       písmo a proti originálu (který má výchozí `auto`) je to vidět. */
}

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

a { color: var(--c-red); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--c-red-dark); }

/* Nadpisy jsou v originále v základní váze, ne tučné — Raleway 400 při 36 px
   drží ten vzdušný dojem, který web má. Tučné je jen to, co je <strong>. */
h1, h2, h3, h4 { margin: 0 0 .6em; font-weight: 400; line-height: 1.2; }

ul { margin: 0; padding: 0; list-style: none; }

button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

:focus-visible { outline: 2px solid var(--c-red); outline-offset: 3px; }

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.skip-link {
    position: absolute;
    left: -9999px;
    z-index: 100;
    padding: 12px 20px;
    background: var(--c-white);
    color: var(--c-red);
}
.skip-link:focus { left: 20px; top: 20px; }

/* =============================================================================
   Hlavička — rebranding (Michal, říjen 2026)

   Bílý pruh v toku stránky, nic nepřekrývá. Hodnoty převzaté z jeho
   rebrand.css (web-nahled), referenční screenshot rebrand-hlavicka.png.
   Desktop: logo | „Zavolejte, poradíme vám" + telefon | POPTÁVKA,
   pod tím linka, menu a e-mail vpravo.
   ========================================================================== */

.header {
    position: relative;
    z-index: 40;
    background: var(--c-white);
    box-shadow: 0 2px 20px rgba(23, 35, 48, .045);
    color: var(--c-ink);
}
.header .container { padding-top: 24px; }

.header__main { display: flex; align-items: center; gap: 30px; }
.header__logo { flex-shrink: 0; margin-right: auto; }
.header__logo img { width: 265px; height: auto; }

.header__call {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--c-ink);
    white-space: nowrap;
}
.header__call:hover { color: var(--c-red); }
.header__call span { font-size: 12px; line-height: 1.5; color: var(--c-muted); }
.header__call strong { font-size: 26px; line-height: 1.3; letter-spacing: -.6px; font-weight: 750; }

/* Červené tlačítko — sdílí ho hlavička i patička. */
.header__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 50px;
    padding: 14px 24px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 750;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--c-white);
    background: var(--c-red);
    box-shadow: 0 4px 12px rgba(223, 18, 51, .1);
    transition: background .2s var(--ease);
}
.header__cta:hover { color: var(--c-white); background: var(--c-red-dark); }
.header__cta-icon { width: 16px; height: 16px; }

.header__burger { display: none; }
.header__mobile-actions { display: none; }

.header__navline {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 56px;
    margin-top: 20px;
    border-top: 1px solid var(--c-line);
}
.header__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 27px; }
.header__nav a,
.header__email {
    position: relative;
    padding: 18px 0;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 550;
    color: var(--c-ink-soft);
}
.header__nav a:hover,
.header__email:hover { color: var(--c-red); }
.header__nav a[aria-current="page"] { color: var(--c-red); }
/* Linka pod položkou: u aktuální stránky stojí, u ostatních při najetí
   vyjede zleva. */
.header__nav a::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 3px;
    border-radius: 2px 2px 0 0;
    background: var(--c-red);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .35s var(--ease-out);
}
.header__nav a:hover::after,
.header__nav a:focus-visible::after,
.header__nav a[aria-current="page"]::after { transform: scaleX(1); }
.header__email { margin-left: auto; }

/* --- Zmenšení při scrollu (desktop) ---------------------------------------
   Hlavička je na desktopu `fixed` a její plnou výšku drží padding-top na body
   (nastavuje main.js podle skutečné výšky). Díky tomu zmenšení nemění výšku
   stránky ani pozici scrollu — jinak by se hlavička zmenšila, stránka by
   poskočila, scroll klesl pod práh a hlavička by se zase zvětšila (cyklení).
   Mobil zůstává v toku stránky. */
@media (min-width: 768px) {
    .header { position: fixed; inset: 0 0 auto; transition: box-shadow .3s var(--ease); }
    html { scroll-padding-top: 130px; }   /* kotvy (#poptavka) nezajedou pod hlavičku */

    .header .container,
    .header__logo img,
    .header__call strong,
    .header__call span,
    .header__cta,
    .header__navline,
    .header__nav a,
    .header__email {
        transition: padding .35s var(--ease-out), width .35s var(--ease-out), font-size .35s var(--ease-out),
                    min-height .35s var(--ease-out), margin .35s var(--ease-out), opacity .25s var(--ease),
                    max-height .35s var(--ease-out), color .2s var(--ease), background .2s var(--ease),
                    transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
    }
    .header__call span { max-height: 20px; overflow: hidden; }

    .header.je-maly { box-shadow: 0 6px 24px rgba(23, 35, 48, .1); }
    .header.je-maly .container { padding-top: 10px; }
    .header.je-maly .header__logo img { width: 190px; }
    .header.je-maly .header__call span { max-height: 0; opacity: 0; }
    .header.je-maly .header__call strong { font-size: 20px; }
    .header.je-maly .header__cta { min-height: 40px; padding-block: 9px; }
    .header.je-maly .header__navline { min-height: 44px; margin-top: 8px; }
    .header.je-maly .header__nav a,
    .header.je-maly .header__email { padding-block: 12px; }
}

/* =============================================================================
   Tlačítko zpět nahoru — kolečko 50×50 vpravo dole
   ========================================================================== */

.gotop {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    color: var(--c-white);
    background: var(--c-red);
    border-radius: 50%;
    opacity: 0;
    transition: opacity .3s var(--ease), background .2s var(--ease);
}
.gotop[hidden] { display: none; }
.gotop.is-visible { opacity: 1; }
.gotop:hover { background: var(--c-red-dark); }
/* Ikona je šipka doleva otočená vzhůru. */
.gotop__ikona { width: 12px; height: 19px; transform: rotate(90deg); }

/* =============================================================================
   Patička — rebranding (Michal, říjen 2026)

   Tmavá #19232e. Nahoře výzva k poptávce, pod ní tři sloupce (kontakt,
   adresy, služby), dole právní řádek. Referenční screenshot
   rebrand-paticka.png, hodnoty z rebrand.css.
   ========================================================================== */

.footer {
    margin-top: var(--section-py);
    color: var(--c-white);
    background: var(--c-footer);
}
.footer a { color: var(--c-white); }
.footer a:hover { color: var(--c-white); text-decoration: underline; }

.footer__lead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 48px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.footer__kicker {
    margin: 0;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #ff718b;
}
.footer__title {
    margin: 10px 0 12px;
    font-size: 34px;
    line-height: 1.2;
    letter-spacing: -.8px;
    font-weight: 650;
    color: var(--c-white);
}
.footer__perex { margin: 0; font-size: 16px; line-height: 1.5; color: var(--c-footer-text); }
.footer .footer__cta { text-transform: none; text-decoration: none; }

.footer__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 50px;
    padding: 42px 0;
}
.footer__grid p,
.footer__grid li { font-size: 14px; line-height: 1.8; color: var(--c-footer-text); }
.footer__grid p { margin: 0 0 14px; }
.footer__grid strong { color: var(--c-footer-text); font-weight: 650; }

.footer__label { font-size: 13px; }
.footer__grid .footer__label { margin-bottom: 10px; }
.footer__phone {
    display: block;
    font-size: 34px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -.5px;
}
.footer__mail { display: inline-block; margin: 12px 0 24px; font-size: 18px; }
.footer__grid .footer__owner { margin: 0; line-height: 1.7; }

.footer__heading { margin: 0 0 14px; font-size: 15px; font-weight: 650; color: var(--c-white); }
.footer__links li + li { margin-top: 5px; }
.footer__links a { color: #dce3e9; }

.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: 12px;
    color: #aebac5;
}
.footer__bottom a { color: var(--c-footer-text); }

.header a:focus-visible,
.footer a:focus-visible,
.header__burger:focus-visible { outline: 3px solid #4f91ff; outline-offset: 5px; }

/* =============================================================================
   Hero s artem a zoomy (includes/hero-art.php) — úvod a stránka sítí

   Výška hero roste s šířkou (1/3 šířky), v rozmezí 430–680 px. Scéna drží
   poměr 3:1 a je ukotvená vpravo, takže na užších displejích se ořezává
   jen tmavá plocha vlevo — kolečka a tečky zůstávají na svých místech.
   ========================================================================== */

.hero-art {
    --h: clamp(430px, 33.333vw, 680px);
    position: relative;
    height: var(--h);
    overflow: hidden;
    color: var(--c-white);
    background: #1d2733;
    isolation: isolate;
}

.hero-art__foto img,
.hero-art__scena {
    position: absolute;
    top: 50%;
    right: 0;
    width: max(100%, calc(var(--h) * 3));
    aspect-ratio: 3 / 1;
    transform: translateY(-50%);
}
/* max-width: none — globální `img { max-width: 100% }` by fotku stáhl na šířku
   okna a přestala by krýt scénu s kolečky. */
.hero-art__foto img { z-index: -1; max-width: none; height: auto; object-fit: cover; }

/* --- Kolečka -------------------------------------------------------------- */
.hero-art__cary { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero-art__cary line { stroke: var(--c-red); stroke-width: 2; }

.hero-art__tecka,
.hero-art__zoom {
    position: absolute;
    transform: translate(-50%, -50%);
}
.hero-art__tecka {
    width: 14px;
    height: 14px;
    border: 3px solid var(--c-white);
    border-radius: 50%;
    background: var(--c-red);
    box-shadow: 0 0 0 4px rgba(223, 18, 51, .25);
}
.hero-art__zoom {
    width: 9%;
    aspect-ratio: 1;
}
.hero-art__zoom img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 3px solid var(--c-white);
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.hero-art__zoom b {
    position: absolute;
    top: 50%;
    font-size: clamp(13px, 1.05vw, 19px);
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
    transform: translateY(-50%);
}
.hero-art__zoom--vlevo b { right: calc(100% + 14px); }
.hero-art__zoom--vpravo b { left: calc(100% + 14px); }

.hero-art__pozn {
    position: absolute;
    right: 1.2%;
    bottom: 3%;
    font-size: 11px;
    color: rgba(255, 255, 255, .7);
}

/* Nájezd: tečky problesknou, kolečka se po jednom „nafouknou". */
@keyframes hero-art-zoom {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes hero-art-cara { from { opacity: 0; } to { opacity: 1; } }
.hero-art__tecka,
.hero-art__zoom { animation: hero-art-zoom .6s var(--ease) both; animation-delay: calc(.35s + var(--i) * .2s); }
.hero-art__cary { animation: hero-art-cara .6s .3s both; }

/* --- Text ----------------------------------------------------------------- */
.hero-art__obsah {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
}
/* Tmavý přechod zleva — na užších desktopech se tmavá plocha artu ořízne
   a text by jinak ležel na světlé zástavbě. */
.hero-art__obsah::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(20, 28, 38, .72) 0%, rgba(20, 28, 38, .35) 38%, rgba(20, 28, 38, 0) 55%);
    pointer-events: none;
}
/* Pořadí vrstev: fotka (-1) → přechod → kolečka (1) → text (2). */
.hero-art__scena { z-index: 1; }
.hero-art__obsah > .container { position: relative; z-index: 2; }
/* 38 %: od 1200 px tak text končí před kolečkem „Síť" (změřeno 1200–1366). */
.hero-art__text { max-width: 38%; }
.hero-art__klic { display: none; }
.hero-art__title {
    margin: 0 0 24px;
    font-size: clamp(32px, 2.9vw, 46px);
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--c-white);
    text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.hero-art__title strong { font-weight: 700; }
.hero-art__cta { text-transform: none; font-size: 15px; }
.hero-art__popis { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: #e7e8e9; text-shadow: 0 1px 6px rgba(0, 0, 0, .7); }

.hero-art__radek { display: none; }

@media (max-width: 899px) {
    /* Mobil 1:1 podle Michalovy ukázky (mobilni-banner/01-ukazka-s-textem.png):
       nadpis, věta a tlačítko nahoře na obloze, pod nimi celá fotka bez ořezu
       — balkon se sítí a hroty zůstane volně vidět. Výška = poměr fotky
       828×1092, takže se nic neořezává. Zoomy v pruhu pod hero. */
    .hero-art { height: auto; }
    .hero-art__foto img {
        top: 0;
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        object-position: center bottom;
        transform: none;
    }
    .hero-art__scena { display: none; }
    .hero-art__obsah::before {
        background: linear-gradient(180deg, rgba(20, 28, 38, .55) 0%, rgba(20, 28, 38, 0) 45%);
    }
    .hero-art__obsah {
        height: auto;
        min-height: min(131.9vw, 900px);
        align-items: flex-start;
        padding: 26px 0 0;
    }
    .hero-art__text { display: flex; flex-direction: column; align-items: flex-start; max-width: 560px; }
    .hero-art__klic {
        display: block;
        margin: 0 0 12px;
        font-size: 13px;
        letter-spacing: .1em;
        text-transform: uppercase;
    }
    .hero-art__title { margin-bottom: 10px; font-size: clamp(28px, 8.2vw, 42px); }
    /* Pořadí jako u Michala: nadpis → věta → tlačítko. */
    .hero-art__popis { order: 2; margin: 0 0 16px; font-size: 15px; font-weight: 600; color: var(--c-white); }
    .hero-art__cta { order: 3; min-height: 46px; padding: 11px 20px; font-size: 15px; }


}

/* --- Tlačítko -------------------------------------------------------------
   Naměřeno na originále: 225×50 při textu „Více o ochraně budov", odsazení
   5px/31.25px, rámeček 2 px v barvě pozadí (ten dělá ty 4 px šířky navíc)
   a výška 50 px daná napevno, ne řádkováním. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 5px 31.25px;
    border: 2px solid var(--c-red);
    font-size: 13px;
    line-height: 19.5px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--c-white);
    background: var(--c-red);
    transition: background .2s var(--ease), border-color .2s var(--ease);
}
.btn:hover {
    color: var(--c-white);
    background: var(--c-red-dark);
    border-color: var(--c-red-dark);
}


/* Pod 1200 px se scéna 3:1 ořezává zleva tolik, že kolečko „Síť" vjede do
   nadpisu (změřeno: překryv 40–210 px mezi 900 a 1250). Kolečka proto
   z fotky zmizí a ukážou se v pruhu pod hero — stejně jako na mobilu. */
@media (max-width: 1199px) {
    .hero-art__scena { display: none; }
    .hero-art__text { max-width: 480px; }
    .hero-art__radek {
        position: relative;
        display: flex;
        justify-content: center;
        gap: clamp(14px, 6vw, 40px);
        padding: 22px var(--gutter) 24px;
        background: var(--c-footer);
    }
    .hero-art__radek li { display: flex; flex-direction: column; align-items: center; gap: 10px; }
    .hero-art__radek img {
        width: clamp(78px, 24vw, 110px);
        aspect-ratio: 1;
        border: 3px solid var(--c-white);
        border-radius: 50%;
        object-fit: cover;
    }
    .hero-art__radek b { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
}

@media (min-width: 900px) and (max-width: 1199px) {
    /* Pevnou výšku nese jen fotka s textem — pruh se zoomy je pod ní. */
    .hero-art { height: auto; }
    .hero-art__obsah { height: var(--h); }
}

/* =============================================================================
   Hero podstránek — hlavička na nich nepřekrývá obsah, takže stačí pruh
   ========================================================================== */

.page-hero { padding-block: 46px 34px; background: var(--bg-alt); }
.page-hero__title { margin: 0; font-size: 36px; font-weight: 400; }

/* Varianta s fotkou: nízký pruh pod hlavičkou, nadpis přitlačený ke spodku.
   Rozměry z rebrand.css (235 px desktop, 180 px mobil). */
.page-hero--foto {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 235px;
    padding-top: 40px;
    padding-bottom: 26px;
    isolation: isolate;
}
.page-hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Ztmavení kvůli čitelnosti nadpisu — stejný princip jako hero na domovské,
   jen o něco silnější: fotky jsou světlé a nadpis je na nich delší. */
.page-hero--foto::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .55) 100%);
}
.page-hero--foto .container { width: 100%; }
.page-hero--foto .page-hero__title { color: var(--c-white); text-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.page-hero--foto .page-hero__title strong { font-weight: 700; }

/* =============================================================================
   Obsahové sekce
   ========================================================================== */

.section { padding-block: var(--section-py); }
.section--alt { background: var(--bg-alt); }

/* Úvodní sekce a reference stojí na šedém podkladu — v originále je pás
   #ededed od konce hero po začátek služeb a druhý kolem galerie. */
.section--uvod,
.section--reference { background: var(--bg-alt); }

/* Reference mají navíc fotku ptáka přes celou šířku sekce (v originále přes
   ::before, roztažená na 100 % šířky a zarovnaná k hornímu okraji). */
.section--reference { position: relative; isolation: isolate; }
.section--reference::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("../img/reference-pozadi.jpg") 50% 0 / 100% no-repeat;
}

.section__title {
    /* Pevných 36 px na všech šířkách včetně mobilu — originál tenhle nadpis
       neškáluje. */
    font-size: 36px;
    font-weight: 400;
    text-align: center;
    margin-bottom: 28px;
}

/* Textový sloupec je užší než mřížka — originál drží 960 px na střed. */
.prose { max-width: 960px; }
.prose--center { margin-inline: auto; text-align: center; }
.prose p { margin: 0 0 16px; }
.prose strong { font-weight: 700; }

.lead { max-width: 960px; font-size: 17px; }

.placeholder {
    max-width: 960px;
    margin-inline: auto;
    padding: 18px 22px;
    text-align: center;
    color: #8a8a8a;
    background: var(--bg-alt);
    border: 1px dashed var(--c-line);
}

/* Scroll reveal — bez JS zůstává obsah viditelný, schová se jen pod .js */
/* Vzor pozemkyOtovice: delší dráha, jemné zvětšení a „měkký" dojezd.
   Směr jde zvolit atributem: data-reveal="left" | "right" | "fade". */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(42px) scale(.97);
    /* translate a box-shadow kvůli hoveru karet — `translate` je samostatná
       vlastnost, takže se s `transform` revealu nepere. */
    transition: opacity .8s var(--ease-out), transform .8s var(--ease-out),
                translate .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.js [data-reveal="left"]  { transform: translateX(-44px); }
.js [data-reveal="right"] { transform: translateX(44px); }
.js [data-reveal="fade"]  { transform: none; }
.js [data-reveal].is-revealed { opacity: 1; transform: none; }

/* =============================================================================
   Sekce služeb — dvousloupcový blok text/foto

   Naměřeno na originále: nadpis přes celou šířku na střed, pod ním fotka
   567×355 a textový sloupec ~540 px. U první služby je fotka vlevo, u dalších
   vpravo.
   ========================================================================== */

.split {
    display: grid;
    grid-template-columns: 567px 1fr;
    gap: 39px;
    align-items: start;
}
/* Fotka vpravo: prohodíme pořadí sloupců, ne pořadí v HTML — čtečky a klávesnice
   tak pořád dostanou nejdřív text. */
.split--obraceny { grid-template-columns: 1fr 567px; }
.split--obraceny .split__media { order: 2; }
.split--obraceny .split__text { order: 1; }

.split__media img { width: 100%; height: auto; }
.split__text p { margin: 0 0 24px; }
/* Odstup od seznamu výhod nad tlačítkem — originál měl 4 px a tlačítko
   se lepilo na poslední řádek. */
.split__text .split__cta { margin: 28px 0 0; }

/* Menší varianta tlačítka — v sekcích má originál 40 px místo 50. */
.btn--sm { min-height: 40px; padding: 5px 25px; }

/* =============================================================================
   Galerie realizací — mozaika karet (vzor pozemkyOtovice)

   Čtyři sloupce, řádky po 230 px. Fotka na výšku zabírá dva řádky, panorama
   dva sloupce; pořadí bez děr skládá galerie_rozvrh() v includes/galerie.php.
   Popisek fotky vyjede zespodu při najetí myší.
   ========================================================================== */

.galerie {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 230px;
    grid-auto-flow: dense;
    gap: 16px;
    margin-top: 34px;
}
.galerie__item { margin: 0; min-width: 0; }
.galerie__item--vyska { grid-row: span 2; }
.galerie__item--siroka { grid-column: span 2; }

.galerie__odkaz {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--c-line);
    cursor: zoom-in;
    isolation: isolate;
}
.galerie__odkaz img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ease-out);
}
.galerie__odkaz:hover img,
.galerie__odkaz:focus-visible img { transform: scale(1.06); }

.galerie__popis {
    position: absolute;
    inset: auto 0 0;
    padding: 40px 16px 14px;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 550;
    text-align: left;
    color: var(--c-white);
    background: linear-gradient(0deg, rgba(15, 22, 30, .82) 0%, rgba(15, 22, 30, 0) 100%);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.galerie__odkaz:hover .galerie__popis,
.galerie__odkaz:focus-visible .galerie__popis { opacity: 1; transform: none; }

.section__cta { margin-top: 38px; text-align: center; }

/* Lightbox — vlastní, místo fancyboxu (66 KB), který na originále obsluhoval
   jen tuhle jednu galerii. */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, .88);
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 90vh; width: auto; height: auto; }
.lightbox__zavrit {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 44px;
    height: 44px;
    color: var(--c-white);
}
.lightbox__zavrit svg { width: 16px; height: 16px; margin-inline: auto; }
.lightbox__krok {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    color: var(--c-white);
}
.lightbox__krok svg { width: 14px; height: 22px; margin-inline: auto; }
.lightbox__krok--zpet { left: 8px; }
.lightbox__krok--vpred { right: 8px; }

/* =============================================================================
   Formulář
   ========================================================================== */

.form-blok { max-width: 760px; margin-inline: auto; }

/* Bílá karta formuláře — na šedém podkladu sekce i na bílé stránce. */
.form {
    --form-bg: var(--c-white);
    padding: 36px 40px 32px;
    border-radius: var(--radius-lg);
    background: var(--form-bg);
    box-shadow: 0 18px 50px -24px rgba(23, 35, 48, .28);
}
.section:not(.section--alt):not(.section--poptavka) .form { box-shadow: 0 0 0 1px var(--c-line), 0 18px 50px -24px rgba(23, 35, 48, .2); }

.form__radek { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.form__povinne { color: var(--c-red); }
.form__napoveda { font-size: 13px; font-weight: 400; color: var(--c-muted); }
.form__uvod { margin: 0 0 24px; font-size: 17px; line-height: 1.5; text-align: center; color: var(--c-ink-soft); }

fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { padding: 0; }

/* --- Výběr s vlastním vzhledem (main.js staví nad <select>) ----------- */
.field--vyber { z-index: 5; }
.field--vyber select {
    width: 100%;
    height: 58px;
    padding: 24px 16px 8px;
    border: 1px solid #d5d9de;
    border-radius: 10px;
    background: var(--form-bg);
    font: inherit;
    font-size: 16px;
    color: var(--c-ink);
}
.field--vyber > label { transform: translateY(-11px) scale(.78); color: var(--c-ink-soft); font-weight: 600; }
/* S JS: nativní select zůstane jen kvůli odeslání, vidět je vlastní tlačítko. */
.field--vyber.je-vylepseny select { position: absolute; inset: 0; opacity: 0; pointer-events: none; }

.vyber__tlacitko {
    display: flex;
    align-items: center;
    width: 100%;
    height: 58px;
    padding: 24px 46px 8px 16px;
    border: 1px solid #d5d9de;
    border-radius: 10px;
    background: var(--form-bg);
    font-size: 16px;
    text-align: left;
    color: var(--c-ink);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.vyber__tlacitko:hover { border-color: #b8bec6; }
.vyber__tlacitko:focus-visible,
.je-otevreny .vyber__tlacitko {
    outline: none;
    border-color: var(--c-red);
    box-shadow: 0 0 0 4px rgba(223, 18, 51, .12);
}
.je-otevreny > label,
.field--vyber:focus-within > label { color: var(--c-red); }
.vyber__hodnota { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vyber__sipka {
    position: absolute;
    top: 50%;
    right: 16px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    color: var(--c-muted);
    transition: transform .25s var(--ease-out), color .2s var(--ease);
}
.je-otevreny .vyber__sipka { transform: rotate(180deg); color: var(--c-red); }

.vyber__seznam {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 290px;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    border: 1px solid var(--c-line);
    border-radius: 12px;
    background: var(--c-white);
    box-shadow: 0 18px 40px -14px rgba(23, 35, 48, .35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(.98);
    transform-origin: top center;
    transition: opacity .18s var(--ease), transform .25s var(--ease-out), visibility .18s;
}
.vyber__seznam:focus { outline: none; }
.je-otevreny .vyber__seznam { opacity: 1; visibility: visible; transform: none; }
.vyber__seznam li {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 14px 10px 38px;
    border-radius: 8px;
    font-size: 15px;
    color: var(--c-ink-soft);
    cursor: pointer;
    position: relative;
}
.vyber__seznam li.je-aktivni { background: #f4f5f6; color: var(--c-ink); }
.vyber__seznam li[aria-selected="true"] { font-weight: 600; color: var(--c-red); }
.vyber__seznam li[aria-selected="true"]::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 50%;
    width: 10px;
    height: 6px;
    margin-top: -5px;
    border-left: 2px solid var(--c-red);
    border-bottom: 2px solid var(--c-red);
    transform: rotate(-45deg);
}

/* --- Pole s plovoucím popiskem ----------------------------------------- */
.field { position: relative; margin-bottom: 18px; }
.field input,
.field textarea {
    width: 100%;
    height: 58px;
    padding: 24px 16px 8px;
    border: 1px solid #d5d9de;
    border-radius: 10px;
    background: var(--form-bg);
    font: inherit;
    font-size: 16px;               /* pod 16 px iOS při fokusu přiblíží stránku */
    color: var(--c-ink);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { height: auto; min-height: 130px; padding-top: 28px; resize: vertical; line-height: 1.5; }
.field input:hover,
.field textarea:hover { border-color: #b8bec6; }
.field input:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--c-red);
    box-shadow: 0 0 0 4px rgba(223, 18, 51, .12);
}

.field label {
    position: absolute;
    top: 18px;
    left: 17px;
    max-width: calc(100% - 34px);
    overflow: hidden;
    font-size: 16px;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--c-muted);
    pointer-events: none;
    transform-origin: left top;
    transition: transform .2s var(--ease), color .2s var(--ease);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label {
    transform: translateY(-11px) scale(.78);
    color: var(--c-ink-soft);
    font-weight: 600;
}
.field input:focus + label,
.field textarea:focus + label { color: var(--c-red); }

/* Příklad pod popiskem textarey — jen dokud je prázdná a nemá fokus. */
.field__priklad {
    position: absolute;
    top: 44px;
    left: 17px;
    right: 17px;
    font-size: 15px;
    color: #a3a9b1;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s var(--ease);
}
.field textarea:focus ~ .field__priklad { opacity: 1; }
.field textarea:not(:placeholder-shown) ~ .field__priklad { opacity: 0; }

/* Chybné pole až po pokusu o odeslání (třídu přidá JS), ne hned při psaní. */
.form.je-kontrola .field input:invalid,
.form.je-kontrola .field textarea:invalid { border-color: var(--c-red); background: #fff7f8; }

/* Autofill: prohlížeč kreslí šedomodré pozadí — vnitřní stín ho překryje
   barvou formuláře a nekonečná transition zabrání, aby se vrátilo
   (vzor chalupy-vitejeves). */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--c-ink);
    -webkit-box-shadow: 0 0 0 100px var(--form-bg) inset;
    box-shadow: 0 0 0 100px var(--form-bg) inset;
    caret-color: var(--c-ink);
    transition: background-color 600000s 0s, border-color .2s var(--ease);
}
.field input:autofill {
    -webkit-text-fill-color: var(--c-ink);
    box-shadow: 0 0 0 100px var(--form-bg) inset;
}

/* Telefon + e-mail jsou jedna otázka („jak se vám ozvat"). */
.form__kontakt legend { margin-bottom: 10px; font-size: 15px; font-weight: 600; color: var(--c-ink); }
.form__kontakt legend .form__napoveda { font-weight: 400; }

/* --- Fotka ---------------------------------------------------------------- */
.soubor { position: relative; margin-bottom: 18px; }
.soubor__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}
.soubor__plocha {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    min-height: 58px;
    padding: 8px 16px;
    border: 1.5px dashed #c3c9d0;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .2s var(--ease), background .2s var(--ease);
}
.soubor__plocha:hover,
.soubor__input:focus-visible + .soubor__plocha { border-color: var(--c-red); background: #fff7f8; }
.soubor__input:focus-visible + .soubor__plocha { outline: 3px solid #4f91ff; outline-offset: 2px; }
.soubor__ikona { flex: 0 0 26px; width: 26px; height: 26px; color: var(--c-red); }
.soubor__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.soubor__text strong { overflow: hidden; font-size: 15px; font-weight: 600; color: var(--c-ink); white-space: nowrap; text-overflow: ellipsis; }
.soubor__text small { font-size: 12px; color: var(--c-muted); }
.soubor.ma-soubor .soubor__plocha { border-style: solid; border-color: var(--c-red); }
/* Soubor tažený nad plochou. */
.soubor.je-nad .soubor__plocha {
    border-style: solid;
    border-color: var(--c-red);
    background: #fff0f2;
    box-shadow: 0 0 0 4px rgba(223, 18, 51, .12);
}
.soubor.je-nad .soubor__ikona { transform: translateY(-3px) scale(1.1); }
.soubor__ikona { transition: transform .25s var(--ease-out); }
.soubor.ma-chybu .soubor__plocha { border-color: var(--c-red); background: #fff7f8; }
.soubor.ma-chybu .soubor__text strong { color: var(--c-red); }
.soubor__text small { white-space: normal; }

/* --- Odeslání ------------------------------------------------------------- */
.form__odeslat { margin: 8px 0 0; }
.form__tlacitko { min-height: 56px; padding-inline: 30px; font-size: 16px; text-transform: none; }
.form__tlacitko.is-odesila { opacity: .6; cursor: progress; transform: none; box-shadow: none; }
.form__info { margin: 14px 0 0; font-size: 14px; line-height: 1.55; color: var(--c-muted); }

/* Honeypot — poctivý návštěvník ho nikdy neuvidí, robot ho vyplní. */
.form__past {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.zprava { padding: 14px 18px; margin-bottom: 24px; font-size: 15px; border-radius: var(--radius-sm); }
.zprava strong { display: block; margin-bottom: 2px; }
.zprava--ok { color: #14532d; background: #dcfce7; border-left: 3px solid #16a34a; }
.zprava--chyba { color: #7f1d1d; background: #fee2e2; border-left: 3px solid var(--c-red); }
.zprava a { color: inherit; text-decoration: underline; }

/* =============================================================================
   CTA pruh v obsahu (includes/cta-pruh.php) — rebranding

   Desktop 800×300 podle Michalova banner-pruh.png: text vlevo na bílé,
   fotka vpravo, přechod do bílé mezi nimi. Na mobilu se skládá pod sebe.
   ========================================================================== */

.cta-pruh {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 800px;
    min-height: 300px;
    margin: 48px auto;
    overflow: hidden;
    border-radius: 10px;
    background: var(--c-white);
    box-shadow: 0 10px 34px rgba(23, 35, 48, .12);
    isolation: isolate;
}
.cta-pruh__foto {
    position: absolute;
    inset: 0 0 0 auto;
    z-index: -1;
    width: 60%;
}
.cta-pruh__foto { overflow: hidden; }   /* přiblížení fotky nesmí přelézt přes přechod */
.cta-pruh__foto img { width: 100%; height: 100%; object-fit: cover; }
.cta-pruh__foto::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .85) 18%, rgba(255, 255, 255, 0) 55%);
}
.cta-pruh__text { width: 58%; padding: 34px 0 34px 40px; }
.cta-pruh__nadpis {
    margin: 0 0 6px;
    font-size: 38px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--c-ink);
    text-wrap: balance;
}
.cta-pruh__veta { margin: 0 0 24px; font-size: 19px; line-height: 1.35; color: var(--c-ink-soft); }
.cta-pruh__cta { text-transform: none; font-size: 16px; }

/* Na šedém podkladu sekce pruh nepotřebuje tak silný stín. */
.section--alt .cta-pruh { box-shadow: 0 6px 20px rgba(23, 35, 48, .08); }

@media (max-width: 640px) {
    .cta-pruh { flex-direction: column; align-items: stretch; min-height: 0; margin: 32px 0; }
    .cta-pruh__foto { position: relative; width: 100%; aspect-ratio: 16 / 9; }
    .cta-pruh__foto::after { background: linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0) 45%); }
    .cta-pruh__text { width: auto; padding: 0 22px 26px; margin-top: -18px; }
    .cta-pruh__nadpis { font-size: 30px; }
    .cta-pruh__veta { font-size: 17px; margin-bottom: 18px; }
    .cta-pruh__cta { width: 100%; white-space: normal; }
}

/* =============================================================================
   Responzivita

   Breakpointy kopírují originál (stojí na Bootstrapu) a jsou DVA, ne jeden:
     < 992 px  hlavička přepne na burger
     < 768 px  obsah se skládá pod sebe, galerie na dva sloupce a hero text
               sjede pod fotku
   Mezi 768 a 991 má tedy originál burger, ale pořád dvousloupcové sekce.
   ========================================================================== */

@media (max-width: 1000px) {
    /* Hlavička se jen zúží — e-mail z linky menu pryč, menší logo a telefon. */
    .header__main { gap: 20px; }
    .header__logo img { width: 225px; }
    .header__call strong { font-size: 23px; }
    .header__nav { gap: 17px; }
    .header__email { display: none; }
}

@media (max-width: 991px) {
    .page-hero--foto { min-height: 190px; padding-top: 30px; }
}

@media (max-width: 767px) {
    /* Sekce služeb a formulář na jeden sloupec, galerie na dva. */
    .split, .split--obraceny { grid-template-columns: 1fr; gap: 24px; }
    .split--obraceny .split__media,
    .split--obraceny .split__text { order: 0; }

    /* Galerie na dva sloupce — panorama přes celou šířku, výška dva řádky. */
    .galerie { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; gap: 10px; }

    .form__radek { grid-template-columns: 1fr; gap: 0; }

    /* --- Mobilní hlavička: logo + Menu, pod tím telefon a POPTÁVKA vedle
       sebe (obě akce musí být vidět bez otevírání menu). Menu se rozbalí
       přímo v hlavičce pod nimi. */
    .header .container { padding-top: 18px; }
    .header__main { flex-wrap: wrap; gap: 16px; }
    .header__logo img { width: 220px; }
    .header__main > .header__call,
    .header__main > .header__cta { display: none; }

    .header__burger {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        padding: 10px 12px;
        border-radius: 5px;
        font-size: 14px;
        font-weight: 600;
        color: #25303c;
        background: #f2f3f5;
    }
    .header__burger-icon { width: 14px; height: 12px; }

    .header__mobile-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        padding: 16px 0;
    }
    .header__mobile-actions .header__call { justify-content: center; }
    .header__mobile-actions .header__call strong { font-size: 21px; }
    .header__mobile-actions .header__cta { min-height: 46px; padding: 12px 15px; }

    .header__navline { display: none; min-height: 0; margin: 0; }
    .header__navline.is-open { display: block; padding: 8px 0 16px; }
    .header__nav { flex-direction: column; align-items: stretch; gap: 0; }
    .header__nav a { padding: 12px 0; font-size: 16px; }
    .header__nav a::after { display: none; }

    /* --- Patička na mobilu: výzva nad sebou, kontakt přes celou šířku,
       adresy a služby vedle sebe. */
    .footer__lead { flex-direction: column; align-items: flex-start; gap: 24px; padding: 35px 0; }
    .footer__title { font-size: 29px; }
    .footer__cta { width: 100%; }
    .footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; padding: 32px 0; }
    .footer__contact { grid-column: 1 / -1; }
    .footer__phone { font-size: 32px; }
    .footer__mail { font-size: 17px; }
    .footer__bottom { flex-direction: column; gap: 10px; }

    .form { padding: 24px 18px 22px; border-radius: var(--radius-md); }
    .form__uvod { font-size: 16px; text-align: left; }
    .form__tlacitko { width: 100%; white-space: normal; }

    /* Nadpis podstránky se na úzkém displeji láme na dva řádky a v 36 px
       vylezl z fotopruhu ven. Pruh je i tak nižší, ať nesebere čtvrt obrazovky. */
    /* Inter je širší než původní Raleway — 36 px se na 360 px nevešlo. */
    .section__title { font-size: clamp(28px, 8.4vw, 36px); }
    .page-hero__title { font-size: 26px; }
    .page-hero { padding-block: 30px 24px; }
    .page-hero--foto { min-height: 180px; padding-block: 25px 20px; }
}

@media (max-width: 360px) {
    .header__logo img { width: 185px; }
    .header__main { gap: 8px; }
    .header__mobile-actions .header__call strong { font-size: 19px; }
    .header__mobile-actions .header__cta { padding: 12px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* =============================================================================
   Výhody služby — odrážkový seznam s fajfkou
   ========================================================================== */

.vyhody { margin-top: 46px; }
.vyhody__title { font-size: 22px; margin-bottom: 20px; }

.vyhody__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 34px;
    max-width: 960px;
}
.vyhody__list li { display: flex; align-items: flex-start; gap: 12px; }
.vyhody__ikona { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 3px; color: var(--c-red); }

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

/* Výhody uvnitř sekce služby na domovské stránce — v originále je nadpis
   červený a seznam jednosloupcový. */
.vyhody__nadpis { margin: 6px 0 10px; color: var(--c-red); }
.vyhody__list--uzky { grid-template-columns: 1fr; gap: 6px; }

/* =============================================================================
   Obsahové bloky podstránek — text, karty, kroky, dotazy

   Blok je jednotka obsahu z obsah.json. Sekce je rámuje, blok si drží jen
   vlastní vnitřní rytmus, aby šly libovolně řadit za sebe.
   ========================================================================== */

.blok + .blok { margin-top: 54px; }

.blok__nadpis {
    margin-bottom: 22px;
    font-size: 26px;
    line-height: 1.2;
}
.blok__nadpis::after {
    content: "";
    display: block;
    width: 46px;
    height: 2px;
    margin-top: 12px;
    background: var(--c-red);
}

/* Delší text se hůř čte přes celou šířku 1160 px — sloupec se drží na ~72 znacích. */
.prose--uzky { max-width: 760px; }
.blok--text .prose { max-width: 860px; }

/* `:not(.vyhody__list)` je nutné — seznam výhod uvnitř `.prose` na domovské
   stránce má vlastní odsazení a fajfku, druhá odrážka by ho rozbila. */
.prose ul:not(.vyhody__list) {
    margin: 12px 0;
    padding-left: 0;
    list-style: none;
}
.prose ul:not(.vyhody__list) li {
    position: relative;
    margin-bottom: 8px;
    padding-left: 20px;
}
.prose ul:not(.vyhody__list) li::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 0;
    width: 7px;
    height: 7px;
    background: var(--c-red);
}
.prose h2 { margin: 34px 0 12px; font-size: 22px; }
.prose h3 { margin: 26px 0 8px; font-size: 18px; }
.prose > :first-child { margin-top: 0; }

/* --- Tabulka (zásady zpracování údajů) ----------------------------------- */
.tabulka {
    width: 100%;
    margin: 16px 0;
    border-collapse: collapse;
    font-size: 15px;
}
.tabulka th,
.tabulka td {
    padding: 10px 14px;
    text-align: left;
    vertical-align: top;
    border: 1px solid var(--c-line);
}
.tabulka th { font-weight: 700; background: var(--c-gray-bg); }

/* --- Karty ---------------------------------------------------------------- */
.karty {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    list-style: none;
}
.karta {
    padding: 24px 22px;
    background: var(--c-white);
    border-bottom: 2px solid var(--c-red);
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, .08);
}
.karta__nadpis { margin-bottom: 8px; font-size: 17px; font-weight: 700; }
.karta__text { font-size: 15px; }

/* Na bílé sekci by karta na bílém zanikla — dostane světlý podklad. */
.section:not(.section--alt) .karta { background: var(--bg-alt); box-shadow: none; }

/* --- Číslovaný postup ----------------------------------------------------- */
.kroky {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 40px;
    max-width: 1000px;
    list-style: none;
    counter-reset: krok;
}
.krok { display: flex; gap: 16px; align-items: flex-start; }
.krok__cislo {
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    font-size: 17px;
    font-weight: 700;
    color: var(--c-white);
    background: var(--c-red);
    border-radius: 50%;
}
.krok__nadpis { margin-bottom: 4px; font-size: 17px; font-weight: 700; }
.krok__text { font-size: 15px; }

/* --- Časté dotazy --------------------------------------------------------- */
.faq { max-width: 860px; }
.faq__item { border-bottom: 1px solid var(--c-line); }
.faq__item:first-child { border-top: 1px solid var(--c-line); }

.faq__otazka {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 56px;
    padding: 14px 0;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}
.faq__otazka::-webkit-details-marker { display: none; }

/* Znaménko dělá CSS, ne glyf v textu — musí se otáčet a brát barvu z rodiče. */
.faq__otazka::before {
    content: "";
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    border-right: 2px solid var(--c-red);
    border-bottom: 2px solid var(--c-red);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s var(--ease);
}
.faq__item[open] .faq__otazka::before { transform: rotate(-135deg) translate(-4px, -4px); }
.faq__otazka:hover { color: var(--c-red); }

.faq__odpoved { padding: 0 0 18px 26px; }
.faq__odpoved p { max-width: 70ch; }

/* --- Kontaktní dlaždice --------------------------------------------------- */
.kontakt-karty {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 54px;
    list-style: none;
}
.kontakt-karta {
    padding: 26px 22px;
    text-align: center;
    background: var(--bg-alt);
    border-bottom: 2px solid var(--c-red);
}
.kontakt-karta__ikona { width: 26px; height: 26px; margin-bottom: 10px; color: var(--c-red); }
.kontakt-karta__nadpis { margin-bottom: 6px; font-size: 15px; text-transform: uppercase; }
.kontakt-karta__hodnota { display: block; font-size: 17px; font-weight: 700; color: var(--c-black); }
a.kontakt-karta__hodnota { min-height: 44px; }
a.kontakt-karta__hodnota:hover { color: var(--c-red); }

@media (max-width: 991px) {
    .karty, .kontakt-karty { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    .blok + .blok { margin-top: 40px; }
    .blok__nadpis { font-size: 22px; }
    .karty, .kontakt-karty, .kroky { grid-template-columns: 1fr; }
    .kroky { gap: 18px; }

    /* Tabulka se na úzkém displeji nezalomí — scrolluje sama v sobě. Scroll
       nesmí být na `.prose`, ta by ořízla reveal animace okolních bloků. */
    .tabulka {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }
    .tabulka thead, .tabulka tbody, .tabulka tr { display: table; width: 100%; min-width: 480px; }
}

/* =============================================================================
   Vzhled po rebrandingu — zaoblení, karty a efekty

   Vzor pozemkyOtovice / chalupy-vitejeves: fotky a karty se zaoblením
   12–20 px, hover s jemným zdvihem, fotky se při najetí pomalu přiblíží.
   Blok je záměrně na konci souboru — přepisuje původní hranaté hodnoty
   převzaté z originálu, které zůstávají výš kvůli historii měření.
   ========================================================================== */

:root { interpolate-size: allow-keywords; }   /* plynulé otevírání <details> */

/* --- Fotky v obsahu ------------------------------------------------------- */
.split__media {
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}
.split__media img { transition: transform .8s var(--ease-out); }
.split__media:hover img { transform: scale(1.04); }

.lightbox img { border-radius: var(--radius-md); }

/* --- Tlačítka: zdvih, jemná záře, posun šipky ------------------------------ */
.btn,
.header__cta {
    border-radius: var(--radius-sm);
    transition: background .2s var(--ease), border-color .2s var(--ease),
                transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.btn:hover:not(:active),
.header__cta:hover:not(:active) {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -12px rgba(223, 18, 51, .75);
}
.header__cta-icon { transition: transform .25s var(--ease-out); }
.header__cta:hover .header__cta-icon { transform: translate(2px, -2px); }

/* --- Karty --------------------------------------------------------------- */
.karta,
.kontakt-karta {
    border-bottom: 0;
    border-radius: var(--radius-md);
    transition: translate .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.karta { box-shadow: 0 4px 18px -8px rgba(23, 35, 48, .18); }
.karta::before,
.kontakt-karta::before {
    content: "";
    display: block;
    width: 32px;
    height: 3px;
    margin-bottom: 14px;
    border-radius: 2px;
    background: var(--c-red);
}
.kontakt-karta::before { margin-inline: auto; }
.karta:hover,
.kontakt-karta:hover { translate: 0 -4px; box-shadow: var(--shadow-card); }
.section:not(.section--alt) .karta { box-shadow: none; }

/* --- Časté dotazy jako karty ------------------------------------------- */
.faq__item,
.faq__item:first-child {
    margin-bottom: 12px;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-md);
    background: var(--c-white);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.faq__item[open] { border-color: rgba(223, 18, 51, .45); box-shadow: var(--shadow-card); }
.faq__otazka { padding: 16px 22px; }
.faq__odpoved { padding: 0 22px 18px 48px; }
/* Plynulé rozbalení tam, kde to prohlížeč umí (Chrome 131+), jinde skokem. */
.faq__item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size .35s var(--ease-out), content-visibility .35s allow-discrete;
}
.faq__item[open]::details-content { block-size: auto; }

/* --- Hero: kolečka reagují na myš ------------------------------------- */
.hero-art__zoom img { transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.hero-art__scena { pointer-events: none; }
.hero-art__zoom { pointer-events: auto; }
.hero-art__zoom:hover img { transform: scale(1.08); box-shadow: 0 14px 34px rgba(0, 0, 0, .45); }

/* --- CTA pruh: fotka se při najetí lehce přiblíží --------------------- */
.cta-pruh__foto img { transition: transform .8s var(--ease-out); }
.cta-pruh:hover .cta-pruh__foto img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
    .split__media:hover img,
    .galerie__odkaz:hover img,
    .cta-pruh:hover .cta-pruh__foto img { transform: none; }
}

/* Starší tlačítka (sekce služeb, „Zobrazit všechny reference") sladěná
   s novými CTA — bez verzálek, stejné písmo a zaoblení. */
.btn {
    padding-inline: 26px;
    font-size: 15px;
    font-weight: 750;
    text-transform: none;
    letter-spacing: 0;
}

/* Reveal zprava/zleva posouvá prvky o 44 px mimo okno, dokud se neodkryjí —
   bez ořezu by stránka šla posunout do strany. `clip` (ne `hidden`) nevytváří
   scrollovací kontejner, takže nerozbije sticky ani kotvy. */
.main { overflow-x: clip; }

/* Měření plné výšky hlavičky v main.js — bez animace, ať se změří hned. */
.header.bez-animace,
.header.bez-animace * { transition: none !important; }

/* =============================================================================
   Responzivita — dočištění (audit 360–1024 px, říjen 2026)
   ========================================================================== */

/* Fotka u služeb měla napevno 567 px (měření originálu) — na tabletu z textu
   zbyl sloupec 70 px. Teď dva pružné sloupce, pod 992 px pod sebou. */
.split,
.split--obraceny { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

@media (max-width: 1000px) {
    /* Patička: kontakt přes celou šířku, adresy a služby vedle sebe —
       ve třech sloupcích se telefon lámal na dva řádky. */
    .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px 40px; }
    .footer__contact { grid-column: 1 / -1; }
}

@media (max-width: 991px) {
    .split,
    .split--obraceny { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .split--obraceny .split__media,
    .split--obraceny .split__text { order: 0; }
    .split__media img { width: 100%; max-height: 460px; object-fit: cover; }
}

@media (max-width: 767px) {
    /* Dotykové plochy v patičce — odkazy měly 17 px, e-mail 24 px. */
    .footer__links li + li { margin-top: 0; }
    .footer__links a,
    .footer__bottom a { display: inline-flex; align-items: center; min-height: 40px; }
    .footer__mail { display: inline-flex; align-items: center; min-height: 44px; margin: 4px 0 18px; }
    .footer__phone { display: inline-flex; align-items: center; min-height: 48px; }
    .footer__bottom { font-size: 13px; gap: 4px; }

    /* Tabulka cookies (GDPR): na mobilu karty místo posuvné tabulky.
       Popisky sloupců doplňuje CSS podle pořadí — tabulka je na webu jediná
       a má pevné sloupce Název / Služba / Účel / Doba uložení. */
    .tabulka,
    .tabulka thead,
    .tabulka tbody,
    .tabulka tr { display: block; width: 100%; min-width: 0; overflow: visible; }
    .tabulka thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .tabulka tr {
        margin-bottom: 12px;
        padding: 6px 0;
        border: 1px solid var(--c-line);
        border-radius: var(--radius-md);
        background: var(--c-white);
    }
    .tabulka td {
        display: grid;
        grid-template-columns: 7.5em 1fr;
        gap: 10px;
        padding: 8px 14px;
        border: 0;
    }
    .tabulka td::before { font-weight: 700; color: var(--c-ink); }
    .tabulka td:nth-child(1)::before { content: "Název"; }
    .tabulka td:nth-child(2)::before { content: "Služba"; }
    .tabulka td:nth-child(3)::before { content: "Účel"; }
    .tabulka td:nth-child(4)::before { content: "Doba uložení"; }

    .soubor__text small { font-size: 13px; }

    /* Logo je odkaz na úvod — dotyková plocha aspoň 44 px. */
    .header__logo { display: flex; align-items: center; min-height: 44px; }
}