/* =============================================================================
   Chalupy Vítějeves — hlavní styl
   Vanilla CSS, žádný build. Struktura:
     1) tokeny · 2) reset · 3) layout · 4) typografie · 5) tlačítka
     6) hlavička · 7) patička · 8) hero · 9) domovská stránka
     10) nabídka chalup + interaktivní vizualizace · 11) detail chalupy
     12) článek · 13) aktuality · 14) formulář · 15) galerie
     16) efekty · 17) responzivita · 18) tisk
   Barvy a rozměry odpovídají schválené grafice projektu.
   ========================================================================== */

/* --- 1) Tokeny ----------------------------------------------------------- */
:root {
    /* paleta */
    --c-ink:        #111111;   /* Figma „Dark“ — text, tlačítka, linky */
    --c-bezova:     #f8ebe2;   /* Figma „Gray bg“ — pozadí sekcí */
    --c-bila:       #ffffff;
    --c-zlata:      #d8c4b8;   /* Figma „Gold“ — popisky na tmavém podkladu */
    --c-linka:      #e3d5cb;   /* Figma „Gray line“ — linky hlavičky a patičky */
    --c-linka-jemna:#dcdcdc;   /* linky mezi řádky tabulky */
    --c-dostupny:   #c3dd4d;
    --c-rezervovany:#e6973d;
    --c-prodany:    #dd634d;
    --c-chyba:      #ee0031;

    /* typografie */
    --f-text:  "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --f-nadpis:"Barlow Condensed", "Barlow", -apple-system, BlinkMacSystemFont, sans-serif;

    /* rozměry */
    --w-obsah: 1520px;   /* hlavní šířka webu */
    --w-uzky:  1000px;   /* úzký sloupec článků */
    --pad-x:   6%;       /* boční odsazení pod 1540 px */
    --h-header: 111px;   /* výška fixní hlavičky podle grafiky (odsazení obsahu) */
    --radius: 4px;

    /* pohyb */
    --t: 250ms;
    --e: cubic-bezier(.22, .61, .36, 1);
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}
html:focus-within { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--c-bila);
    color: var(--c-ink);
    font-family: var(--f-text);
    font-size: 18px;
    line-height: 24px;
    font-optical-sizing: auto;
    overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

a { color: inherit; text-decoration: underline; }
a:hover { text-decoration: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--c-ink);
    outline-offset: 3px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--c-ink);
    color: var(--c-bezova);
    padding: 12px 20px;
    text-decoration: none;
}
.skip-link:focus { left: 0; }

/* --- 3) Layout ----------------------------------------------------------- */
.container {
    width: min(var(--w-obsah), 100% - 2 * var(--pad-x));
    margin-inline: auto;
}
.container--uzky { width: min(var(--w-uzky), 100% - 2 * var(--pad-x)); }

main { display: block; }
body:not(.page-home) main { padding-top: var(--h-header); }

.sekce         { padding: 80px 0; }
.sekce--bezova { background: var(--c-bezova); }
.sekce--tesna  { padding: 40px 0; }

/* --- 4) Typografie ------------------------------------------------------- */
h1, h2, h3, h4 {
    font-family: var(--f-nadpis);
    font-weight: 600;
    margin: 0;
    line-height: 1.15;
}

.h1-hero {
    font-size: clamp(2.5rem, 6.54vw, 7.0625rem);   /* 113 px v grafice */
    line-height: 1.01;                             /* 114 px */
    text-transform: uppercase;
    color: var(--c-bila);
    margin-bottom: 30px;
}
.h1-vypis {
    font-size: clamp(2.125rem, 5.2vw, 5rem);
    line-height: 1.12;
    text-transform: uppercase;
    margin-bottom: 40px;
}
.h1-vypis--stred { text-align: center; }

/* úvodní odstavec nad výpisem — užší sloupec na střed */
.vypis-uvod {
    max-width: var(--w-uzky);
    margin: 0 auto 40px;
    text-align: center;
}
.h1-clanek {
    font-size: clamp(2.25rem, 4.6vw, 4.375rem);
    line-height: 1.14;
    text-transform: uppercase;
}
.h2-sekce {
    font-size: clamp(1.75rem, 3.9vw, 4.125rem);   /* 66 px v grafice */
    line-height: 1.09;                            /* 72 px */
    text-transform: uppercase;
    margin-bottom: 30px;
}
.h3-podnadpis {
    font-size: clamp(1.5rem, 2.2vw, 1.875rem);
    line-height: 1.2;
    margin-bottom: 14px;
}

/* nadpis s krátkou béžovou linkou pod textem (detail chalupy, galerie) */
.nadpis-linka {
    position: relative;
    font-size: clamp(1.875rem, 3vw, 2.875rem);
    line-height: 1.22;
    text-transform: uppercase;
    text-align: center;
    padding-bottom: 20px;
    margin-bottom: 30px;
}
.nadpis-linka::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 80px;
    height: 5px;
    background: var(--c-bezova);
}
.nadpis-linka--vlevo { text-align: left; padding-bottom: 0; }
.nadpis-linka--vlevo::after { display: none; }

.stred { text-align: center; }

/* jen pro čtečky — vizuálně skryté popisky sloupců tabulky */
.vh {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.text-blok p { margin: 0 0 16px; }
.text-blok p:last-child { margin-bottom: 0; }
.text-blok ul { margin: 0 0 16px; padding-left: 22px; }
.text-blok li { margin-bottom: 6px; }
.text-blok h2 { font-size: clamp(1.5rem, 2vw, 1.75rem); margin: 28px 0 12px; }
.text-blok h3 { font-size: clamp(1.25rem, 1.6vw, 1.375rem); margin: 24px 0 10px; }

.perex { font-size: 20px; line-height: 26px; }

/* --- 5) Tlačítka --------------------------------------------------------- */
/* Rozměry sedí na komponentu button_70 z grafiky: 40/32 po stranách, 20 nahoře
   a dole, mezera 40 px k šipce, písmo 20/30. Hrany jsou ostré, ne zaoblené. */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 40px;
    border: 1px solid var(--c-ink);
    padding: 20px 32px 20px 40px;
    font-family: var(--f-nadpis);
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color var(--t) var(--e), color var(--t) var(--e),
                opacity var(--t) var(--e), transform var(--t) var(--e);
}
.btn .icon { width: 22px; height: 22px; flex: none; transition: transform var(--t) var(--e); }
.btn:hover .icon { transform: translateX(4px); }

/* hero — komponenta button_78: větší písmo i odsazení */
.btn--lg {
    gap: 48px;
    padding: 24px 40px 24px 48px;
    font-size: 24px;
}

.btn--primary { background: var(--c-ink); color: var(--c-zlata); }
.btn--primary:hover { opacity: .82; }

.btn--outline { background: transparent; color: var(--c-ink); }
.btn--outline:hover { background: var(--c-ink); color: var(--c-zlata); }

.btn--bezove { background: var(--c-bezova); color: var(--c-ink); }
.btn--bezove:hover { background: var(--c-ink); color: var(--c-zlata); }

/* komponenta button_50 — tabulka nabídky, panel chalupy */
.btn--sm {
    gap: 16px;
    padding: 13px 16px 13px 24px;
    font-size: 16px;
    line-height: 22px;
}
.btn--sm .icon { width: 18px; height: 18px; }

/* --- 6) Hlavička --------------------------------------------------------- */
.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    background: var(--c-bila);
    border-bottom: 1px solid var(--c-linka);
    transition: padding var(--t) var(--e), background-color var(--t) var(--e),
                border-color var(--t) var(--e);
    padding: 19px 0;
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* Na domovské stránce leží hlavička na fotce — dokud se neodscrolluje.
   Průhledné je jen pozadí; dělicí linka pod menu zůstává i nad fotkou.
   Pod hlavičkou je v grafice tmavý přechod, jinak by na světlé fotce nebylo
   menu ani poptávkové tlačítko čitelné. Sahá o kus níž než hlavička sama. */
.has-hero .site-header { background: transparent; }
.has-hero .site-header::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 170px;
    z-index: -1;
    /* Lineární přechod vybledne moc brzo — v grafice drží tma přes celou výšku
       hlavičky a rozpouští se až pod ní. Proto ta mezizastavení. */
    background: linear-gradient(to bottom,
        var(--c-ink) 0%,
        rgba(17, 17, 17, .92) 22%,
        rgba(17, 17, 17, .62) 55%,
        rgba(17, 17, 17, .28) 80%,
        rgba(17, 17, 17, 0) 100%);
    transition: opacity var(--t) var(--e);
}
.has-hero .site-header.is-scrolled::before { opacity: 0; }
.site-header.is-scrolled { padding: 8px 0; }
.has-hero .site-header.is-scrolled { background: var(--c-bila); }

.brand {
    display: block;
    flex: none;
    text-decoration: none;
    line-height: 0;
    color: var(--c-ink);
}
/* Logo je vektor s fill: currentColor — nad fotkou stačí přebarvit .brand,
   nepřepínají se dvě verze obrázku a nic neproblikne. */
.brand__img {
    display: block;
    width: 204px;
    height: auto;
    transition: width var(--t) var(--e), color var(--t) var(--e);
}
.has-hero .brand { color: var(--c-bila); }
.has-hero .site-header.is-scrolled .brand { color: var(--c-ink); }
.site-header.is-scrolled .brand__img { width: 150px; }

/* --- navigace --- */
.main-nav { flex: 1; display: flex; justify-content: center; }
.main-nav__list {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Oddělovač je v grafice samostatná šikmá čárka ve zlaté, ne lomítko z písma
   — má jiný sklon i barvu než text. Kreslíme ji otočeným proužkem: 1×21 px
   otočený o 31° dá stejný obrys 11,9 × 18,5 px jako vektor ve Figmě. */
.main-nav__item + .main-nav__item::before {
    content: "";
    flex: none;
    width: 1px;
    height: 21px;
    margin: 0 30px;
    background: var(--c-zlata);
    transform: rotate(31.4deg);
}
.main-nav__item { display: flex; align-items: center; }

.main-nav__link {
    position: relative;
    display: block;
    padding: 6px 0;
    font-family: var(--f-nadpis);
    font-size: 22px;
    font-weight: 600;
    line-height: 28px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--c-ink);
    transition: color var(--t) var(--e);
}
/* Linka najíždí zleva místo skokového podtržení; dědí barvu textu, takže je
   nad hero fotkou bílá a na ostatních stránkách černá. */
.main-nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s var(--e);
}
.main-nav__link:hover::after,
.main-nav__link.is-active::after { transform: scaleX(1); }
/* odchod myší nechá linku zmizet doprava — pohyb pak není „zpětný“ */
.main-nav__link:not(:hover)::after { transform-origin: right; }
.main-nav__link.is-active:not(:hover)::after { transform-origin: left; }

.has-hero .main-nav,
.has-hero .main-nav__link { color: var(--c-bila); }
.has-hero .site-header.is-scrolled .main-nav,
.has-hero .site-header.is-scrolled .main-nav__link { color: var(--c-ink); }

/* Poptávkové tlačítko v hlavičce (komponenta button_big). Nad fotkou je zlaté
   jako v grafice, na bílé hlavičce černé. Na mobilu ustupuje hamburgeru. */
.nav-cta {
    flex: none;
    padding: 20px 40px;
    font-size: 22px;
    line-height: 30px;
    color: var(--c-ink);
    border-color: currentColor;
    background: transparent;
}
.nav-cta:hover { background: var(--c-ink); color: var(--c-zlata); border-color: var(--c-ink); }
.has-hero .nav-cta { color: var(--c-zlata); }
.has-hero .nav-cta:hover { background: var(--c-zlata); color: var(--c-ink); }
.has-hero .site-header.is-scrolled .nav-cta { color: var(--c-ink); }
.has-hero .site-header.is-scrolled .nav-cta:hover { background: var(--c-ink); color: var(--c-zlata); }
.site-header.is-scrolled .nav-cta { padding: 12px 32px; font-size: 18px; }
.nav-cta--panel { display: none; }

/* --- hamburger --- */
.nav-toggle {
    display: none;
    align-items: center;
    gap: 12px;
    background: none;
    border: 0;
    padding: 8px 0;
    font-family: var(--f-nadpis);
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    color: inherit;
    /* nad vysunutým panelem — ten je uvnitř hlavičky, takže samotný z-index
       hlavičky by tlačítko nad panel nedostal (společný stacking context) */
    position: relative;
    z-index: 96;
}
.nav-toggle__bars {
    position: relative;
    width: 30px;
    height: 20px;
    display: block;
}
.nav-toggle__bars span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    border-radius: 3px;
    background: currentColor;
    transition: transform var(--t) var(--e), opacity var(--t) var(--e), top var(--t) var(--e);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 8.5px; }
.nav-toggle__bars span:nth-child(3) { top: 17px; }

.nav-open .nav-toggle__bars span:nth-child(1) { top: 8.5px; transform: rotate(45deg); }
.nav-open .nav-toggle__bars span:nth-child(2) { opacity: 0; transform: translateX(-12px); }
.nav-open .nav-toggle__bars span:nth-child(3) { top: 8.5px; transform: rotate(-45deg); }

.nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    transition: opacity var(--t) var(--e);
}
.nav-backdrop.is-visible { opacity: 1; }

/* --- 7) Patička ---------------------------------------------------------- */
.site-footer { background: var(--c-bila); }

.site-footer__top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
    border-bottom: 1px solid var(--c-linka);
}
.footer-contacts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 40px;
}

.contact-line {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-family: var(--f-nadpis);
    font-size: 30px;
    line-height: 36px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity var(--t) var(--e);
}
.contact-line:hover { text-decoration: underline; }
.contact-line__ic {
    display: grid;
    place-items: center;
    flex: none;
    width: 48px;
    height: 48px;
    border: 1px solid var(--c-ink);
    background: var(--c-bila);
    transition: background-color var(--t) var(--e), color var(--t) var(--e);
}
.contact-line__ic .icon { width: 22px; height: 22px; }
.contact-line:hover .contact-line__ic { background: var(--c-ink); color: var(--c-bila); }
/* rámeček kolem ikony má v grafice jen patička; u formuláře je čtvereček bílý */
.form-intro__contacts .contact-line__ic { border: 0; }

.to-top {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1px solid var(--c-ink);
    background: var(--c-bila);
    border-radius: var(--radius);
    transition: background-color var(--t) var(--e), color var(--t) var(--e);
}
.to-top .icon { width: 24px; height: 24px; }
.to-top:hover { background: var(--c-ink); color: var(--c-bila); }

.site-footer__bottom {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    padding: 20px 0;
    font-size: 14px;
    line-height: 24px;
}
.copyright { justify-self: start; }

.footer-nav {
    display: flex;
    justify-content: center;
    gap: 8px 28px;
    flex-wrap: wrap;
}
.footer-nav a { text-decoration: none; }
.footer-nav a:hover,
.footer-nav a.is-active { text-decoration: underline; }

.made-by {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}
.made-by:hover span:first-child { text-decoration: underline; }
.made-by__logo {
    display: block;
    width: 66px;
    height: 18px;
    background: url("../img/mcrai.svg") no-repeat center / contain;
}

/* --- 8) Hero (domovská stránka) ------------------------------------------ */
.hero {
    position: relative;
    display: grid;
    align-content: start;
    justify-items: center;
    min-height: 100vh;
    min-height: 100svh;
    /* text začíná ve 26 % výšky jako v grafice, nikdy ale ne pod fixní hlavičkou */
    padding: max(26vh, calc(var(--h-header) + 20px)) 0 90px;
    background: var(--c-ink) url("../img/hero.jpg") no-repeat center center / cover;
    text-align: center;
    isolation: isolate;
}
/* spodní vinětace — v grafice samostatná bitmapa přes fotku */
.hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 46%;
    background: url("../img/hero-stin.webp") no-repeat center bottom / 100% 100%;
    pointer-events: none;
    z-index: -1;
}
.hero__inner {
    width: min(1040px, 100% - 2 * var(--pad-x));
    margin-inline: auto;
}
.hero__perex {
    /* šířka z grafiky — text se pak láme za slovem „uprostřed" */
    max-width: 736px;
    margin: 0 auto 30px;
    color: var(--c-bila);
    font-family: var(--f-nadpis);
    font-size: clamp(1.25rem, 3.1vw, 3rem);
    line-height: 1.2;
}

/* animovaná „myš“ dole */
.hero__scroll {
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    display: grid;
    place-items: start center;
    width: 20px;
    height: 36px;
    padding-top: 6px;
    border: 1px solid var(--c-ink);
    border-radius: 20px;
    background: none;
    color: var(--c-ink);
}
.hero__scroll span {
    display: block;
    width: 2px;
    height: 8px;
    border-radius: 2px;
    background: currentColor;
    animation: mys 1s var(--e) infinite;
}
@keyframes mys {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(10px); }
}

/* --- 9) Domovská stránka ------------------------------------------------- */
/* pruh čtyř výhod */
.vyhody {
    background: var(--c-bezova);
    padding: 100px 0 70px;
}
.vyhody__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px 2%;
}
.vyhoda { text-align: center; }
/* Ilustrace nemají v grafice jednotný rozměr — střecha je široká a nízká,
   strom vysoký, okno malé. Řádek je proto vysoký a tvary se centrují na
   společnou osu, velikost dává modifikátor illu--*. */
.vyhoda__ic {
    display: grid;
    place-items: center;
    height: 160px;
    margin-bottom: 56px;
}
.illu--stromy  { width: 97px;  height: 97px; }
.illu--strecha { width: 152px; height: 152px; }
.illu--poloha  { width: 152px; height: 152px; }
.illu--okno    { width: 94px;  height: 94px; }
.illu--klenba  { width: 106px; height: 106px; }

.vyhoda__nazev {
    font-family: var(--f-nadpis);
    font-size: clamp(1.5rem, 2.4vw, 2.3125rem);   /* 37 px v grafice */
    line-height: 36px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.vyhoda__text { margin: 0; font-size: 18px; line-height: 24px; }

/* úvodní odstavce nad fotkou terasy */
/* Béžová z pruhu výhod tu plynule pokračuje a asi po 220 px se rozpouští do
   bílé. Fotka terasy je průhledné PNG, takže jí přechod prosvítá — proto je
   pozadí na sekci a ne až pod fotkou. */
.uvod {
    padding: 110px 0 0;
    background: linear-gradient(to bottom,
        var(--c-bezova) 0, var(--c-bezova) 220px, var(--c-bila) 580px);
    text-align: center;
    font-family: var(--f-nadpis);
    /* tři vrstvy jako v grafice: přechod → fotka → text */
    isolation: isolate;
}
.uvod > .container { position: relative; z-index: 2; }
.uvod__text {
    max-width: 1122px;          /* šířka odstavce v grafice */
    margin-inline: auto;
    font-size: clamp(1.25rem, 2.6vw, 2.5rem);
    line-height: 1.275;         /* 51 px při 40 px písma */
}
.uvod__text strong { font-weight: 600; }
.uvod__text p { margin: 0 0 20px; }
.uvod__text p:last-child { margin-bottom: 0; }
/* Fotka je průhledné PNG a leží pod textem — v grafice zasahuje 110 px do
   posledního odstavce, takže střecha vystupuje zpoza textu. */
.uvod__foto {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    max-width: 1920px;
    margin: -110px auto 0;
}
/* nad prvním cik-cak pruhem je v grafice o kus širší bílá mezera */
.uvod + .cikcak { margin-top: 55px; }

/* cik-cak bloky (text × fotka) */
/* V grafice není béžová přes celý pruh: panel s textem začíná na mřížce webu
   (bílý pruh vedle něj), zatímco fotka teče až do kraje obrazovky. */
.cikcak {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    margin: 0 0 43px;
    overflow: hidden;
}
.cikcak__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--c-bezova);
    padding: 79px 71px 68px;
    margin-inline-start: max(var(--pad-x), (100vw - var(--w-obsah)) / 2);
    text-align: center;
}
.cikcak--obraz-vlevo .cikcak__text {
    order: 2;
    margin-inline: 0 max(var(--pad-x), (100vw - var(--w-obsah)) / 2);
}
.cikcak--obraz-vlevo .cikcak__foto { order: 1; }
.cikcak__foto img { width: 100%; height: 100%; object-fit: cover; }
.cikcak__ic {
    display: flex;
    justify-content: center;
    margin-bottom: 34px;
}
.cikcak__foto-resp { display: none; }
/* text v grafice nedosahuje k okrajům panelu — je v užším sloupci na střed */
.cikcak p {
    max-width: 551px;
    margin: 0 auto 30px;
    font-size: 22px;
    line-height: 30px;
}
.cikcak .h2-sekce {
    max-width: 616px;
    margin-inline: auto;
}

/* Osobní vzkaz „Zavítejte k nám“ — text vlevo, ne na střed jako ostatní pruhy.
   Béžová jde přes celou šířku a dole přechází do bílé, aby na ni fotopás
   navázal; fotka je průhledné PNG, takže jí přechod prosvítá. */
.cikcak--zavitejte {
    padding-top: 85px;
    margin-bottom: 0;
    align-items: center;
    background: linear-gradient(to top, var(--c-bila) 0, var(--c-bezova) 330px);
}
.cikcak--zavitejte .cikcak__text {
    /* béžovou tu drží celý pruh (i s přechodem do bílé), panel ji nesmí přebít */
    background: none;
    align-items: flex-start;
    margin-inline: 0;
    padding-inline: 0 max(var(--pad-x), (100vw - var(--w-obsah)) / 2);
    text-align: left;
}
.cikcak--zavitejte .cikcak__text p,
.cikcak--zavitejte .cikcak__text .h2-sekce { margin-inline: 0; }
.cikcak--zavitejte .cikcak__text p { font-style: italic; }
.cikcak--zavitejte .cikcak__text .btn { margin-inline: 0; }
/* Fotka je v grafice 578 × 740 px (celé PNG, nic se neořezává) a stojí
   spodkem na fotopásu. V polovině 960 px to je 60,2 % šířky s odsazením
   27,7 % zleva — tím vyjde na stejné místo jako v návrhu. */
.cikcak--zavitejte .cikcak__foto { display: flex; align-items: flex-end; }
.cikcak--zavitejte .cikcak__foto img {
    width: 60.2%;
    margin-inline-start: 27.7%;
}
.podpis { margin-top: 20px; max-height: 80px; width: auto; }

/* pás fotogalerie */
.galerie-pas {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}
.galerie-pas::-webkit-scrollbar { display: none; }
.galerie-pas { cursor: grab; }
.galerie-pas.je-tazeny { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.galerie-pas.je-tazeny .galerie-pas__item img { pointer-events: none; }
/* fotky nejsou slepené — v grafice je mezi nimi dvoupixelová bílá mezera */
.galerie-pas { gap: 2px; }
.galerie-pas__item {
    flex: 0 0 calc(25% - 1.5px);
    scroll-snap-align: start;
    aspect-ratio: 480 / 270;
    overflow: hidden;
    background: var(--c-bezova);
}
.galerie-pas__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--e);
}
.galerie-pas__item:hover img { transform: scale(1.05); }

.galerie-wrap { position: relative; }
.galerie-sip {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border: 0;
    background: var(--c-ink);
    color: var(--c-bila);
    z-index: 4;
    transition: opacity var(--t) var(--e);
}
.galerie-sip:hover { opacity: .8; }
.galerie-sip--prev { left: max(var(--pad-x), (100vw - var(--w-obsah)) / 2); }
.galerie-sip--next { right: max(var(--pad-x), (100vw - var(--w-obsah)) / 2); }
.galerie-sip[hidden] { display: none; }

/* --- 10) Nabídka chalup -------------------------------------------------- */
.nabidka-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}
.nabidka-hero__text {
    padding: 40px 10% 40px 0;
    padding-inline-start: max(var(--pad-x), (100vw - var(--w-obsah)) / 2);
}
.nabidka-hero__text .h1-vypis { margin-bottom: 30px; }
.nabidka-hero__foto img { width: 100%; }

/* Úvodní text a panel chalupy leží na sobě — panel se vysune přes text při
   najetí na chalupu ve fotce. Výšku drží vyšší z obou, ať sekce neposkakuje. */
.nabidka-hero__vrstvy { position: relative; display: grid; }
.nabidka-hero__uvod,
.nabidka-hero .chalupa-karta {
    grid-area: 1 / 1;
    transition: opacity var(--t) var(--e), transform var(--t) var(--e);
}
.nabidka-hero__uvod { align-self: center; }
.nabidka-hero .chalupa-karta { align-self: center; }
.js .nabidka-hero .chalupa-karta {
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
}
.nabidka-hero.is-vybrano .chalupa-karta {
    opacity: 1;
    visibility: visible;
    transform: none;
}
.js .nabidka-hero.is-vybrano .nabidka-hero__uvod {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-14px);
}

/* Zavírací křížek — na dotyku není mouseleave, kterým by se panel schoval sám. */
.chalupa-karta__zavrit {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid var(--c-linka);
    border-radius: var(--radius);
    background: var(--c-bila);
    color: var(--c-ink);
}
.chalupa-karta__zavrit .icon { width: 20px; height: 20px; }
/* Dotyk nemá mouseleave, úzký displej zase panel překrývá přes celý text —
   v obou případech musí jít zavřít ručně. */
@media (hover: none), (max-width: 1023px) {
    .js .nabidka-hero .chalupa-karta__zavrit { display: grid; }
    .nabidka-hero .chalupa-karta { padding-right: 58px; }
}

/* --- interaktivní vizualizace: hot-spoty na chalupách --- */
.situace__obrazek {
    position: relative;
    overflow: hidden;
    background: var(--c-linka);
}
.situace__obrazek img { width: 100%; display: block; }

.situace__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.chalupa-tvar {
    fill: rgba(0, 0, 0, 0);
    stroke: rgba(255, 255, 255, 0);
    stroke-width: 0.5;
    cursor: pointer;
    transition: fill 200ms var(--e), stroke 200ms var(--e);
}
.chalupa-tvar:hover,
.chalupa-tvar:focus-visible,
.chalupa-tvar.is-active {
    fill: rgba(248, 235, 226, .34);
    stroke: var(--c-bila);
    outline: none;
}
.chalupa-tvar.is-dostupny:hover,
.chalupa-tvar.is-dostupny.is-active    { fill: rgba(195, 221, 77, .38); }
.chalupa-tvar.is-rezervovany:hover,
.chalupa-tvar.is-rezervovany.is-active { fill: rgba(230, 151, 61, .38); }
.chalupa-tvar.is-prodany:hover,
.chalupa-tvar.is-prodany.is-active     { fill: rgba(221, 99, 77, .38); }

/* číslo chalupy přímo ve vizualizaci */
.chalupa-cislo {
    fill: var(--c-bila);
    font-family: var(--f-nadpis);
    font-size: 4px;
    font-weight: 600;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
    paint-order: stroke;
    stroke: rgba(0, 0, 0, .55);
    stroke-width: 1.1px;
    stroke-linejoin: round;
}
.chalupa-znacka { pointer-events: none; }
.chalupa-znacka circle {
    fill: rgba(0, 0, 0, .45);
    stroke: var(--c-bila);
    stroke-width: .4;
    transition: fill 200ms var(--e);
}
.chalupa-tvar.is-active + .chalupa-znacka circle { fill: var(--c-ink); }

.situace__hint {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 0;
    font-size: 16px;
}
.situace__hint .icon { width: 18px; height: 18px; }

/* na dotykových zařízeních se nenajíždí myší — text se přepne na klepnutí */
.situace__hint .hint--dotyk { display: none; }
@media (hover: none) {
    .situace__hint .hint--mys   { display: none; }
    .situace__hint .hint--dotyk { display: inline; }
}

/* panel s informacemi o vybrané chalupě */
.chalupa-karta {
    position: relative;   /* kotva pro zavírací křížek */
    background: var(--c-bila);
    border: 1px solid var(--c-linka);
    border-radius: var(--radius);
    padding: 26px 30px;
}
.chalupa-karta__nazev {
    font-family: var(--f-nadpis);
    font-size: 30px;
    line-height: 36px;
    font-weight: 600;
    margin: 0 0 8px;
}
.chalupa-karta__cena {
    font-family: var(--f-nadpis);
    font-size: 32px;
    font-weight: 600;
    margin: 0 0 18px;
}
.chalupa-karta__radky { margin: 0 0 20px; }
.chalupa-radek {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--c-linka);
}
.chalupa-radek dt { display: flex; align-items: center; gap: 10px; margin: 0; }
.chalupa-radek dd { margin: 0; font-weight: 600; text-align: right; }
/* Linkové ilustrace (střecha u stavu) potřebují v této velikosti silnější tah,
   aby vedle plných ikon Material Symbols nepůsobily vybledle. */
.chalupa-radek .illu { width: 26px; height: 26px; flex: none; stroke-width: 4; }
.chalupa-karta .btn { width: 100%; justify-content: space-between; }

/* stavový štítek */
.stav {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
}
.stav__ic {
    display: grid;
    place-items: center;
    flex: none;
    width: 30px;
    height: 30px;
    color: var(--c-bila);
}
.stav__ic .icon { width: 18px; height: 18px; stroke-width: 2.4; }
.stav--dostupny    .stav__ic { background: var(--c-dostupny); }
.stav--rezervovany .stav__ic { background: var(--c-rezervovany); }
.stav--prodany     .stav__ic { background: var(--c-prodany); }

.stav--velky { font-size: 20px; }
.stav--velky .stav__ic { width: 34px; height: 34px; }

/* --- tabulka nabídky --- */
.tabulka-chalup { width: 100%; border-collapse: collapse; }
.tabulka-chalup th,
.tabulka-chalup td {
    padding: 16px 30px;
    text-align: left;
    vertical-align: middle;
    font-size: 16px;
    border-bottom: 1px solid var(--c-linka-jemna);
}
.tabulka-chalup th {
    font-weight: 600;
    border-bottom: 1px solid var(--c-linka);
}
.tabulka-chalup .col-nazev { font-size: 18px; font-weight: 600; }
.tabulka-chalup .col-dispozice { font-weight: 600; }
.tabulka-chalup .col-cena { font-size: 18px; font-weight: 600; white-space: nowrap; }
.tabulka-chalup .col-akce { text-align: right; }
.tabulka-chalup tr { transition: background-color var(--t) var(--e); }
.tabulka-chalup tbody tr:hover,
.tabulka-chalup tbody tr.is-active { background: rgba(255, 255, 255, .55); }
.tabulka-chalup td::before { display: none; }

/* --- 11) Detail chalupy -------------------------------------------------- */
.detail-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--c-bezova);
}
.detail-hero__foto { position: relative; min-height: 100%; }
.detail-hero__foto img { width: 100%; height: 100%; object-fit: cover; }
.detail-hero__data { padding: 70px; }
.detail-hero__data .h1-clanek { font-size: clamp(2.25rem, 4.2vw, 4rem); margin: 14px 0 0; }

.detail-cena {
    font-family: var(--f-nadpis);
    font-size: clamp(2rem, 3.1vw, 3rem);
    font-weight: 600;
    margin: 16px 0 24px;
}
.detail-parametry { margin: 0 0 40px; }
.detail-parametr {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 0;
    border-bottom: 1px solid var(--c-ink);
}
.detail-parametr .illu { width: 32px; height: 32px; flex: none; stroke-width: 2.2; }
.detail-parametr__hodnota {
    flex: none;
    min-width: 110px;
    font-size: 22px;
    line-height: 30px;
    font-weight: 600;
}
.detail-parametr__popis { font-size: 20px; line-height: 30px; }

.detail-telo {
    display: grid;
    grid-template-columns: 1fr 45%;
    gap: 5%;
    padding: 40px 0;
}
/* chalupa bez souborů ke stažení — popis dostane celou šířku, ale zůstane čitelný */
.detail-telo--siroky { grid-template-columns: minmax(0, var(--w-uzky)); justify-content: center; }
.detail-soubory { display: grid; gap: 10px; }
.soubor {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: var(--c-bezova);
    border-radius: var(--radius);
    text-decoration: none;
    transition: opacity var(--t) var(--e);
}
.soubor:hover { opacity: .8; }
.soubor .icon { width: 26px; height: 26px; flex: none; }
.soubor__nazev { font-weight: 600; }

/* soubor, ke kterému zatím nemáme podklad od klienta */
.soubor--ceka { opacity: .55; cursor: default; }
.soubor--ceka:hover { opacity: .55; }
.soubor__stav {
    margin-left: auto;
    font-family: var(--f-nadpis);
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

/* ============ Dispozice po patrech: tabulka místností + půdorys ============
   Rozvržení podle grafiky (frame „nabidka domu detail“): vlevo tabulka
   s plochami, vpravo půdorys z projektové dokumentace. */
.patro { padding-top: 56px; }
.patro__nadpis { margin: 0 0 18px; }
.patro__obsah {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 4%;
    align-items: start;
}

.tabulka-mistnosti { width: 100%; border-collapse: collapse; }
.tabulka-mistnosti th,
.tabulka-mistnosti td {
    padding: 11px 16px;
    text-align: left;
    border-bottom: 1px solid var(--c-linka-jemna);
}
.tabulka-mistnosti thead th {
    background: var(--c-bezova);
    font-family: var(--f-nadpis);
    font-weight: 600;
    letter-spacing: .02em;
    border-bottom: none;
}
.tabulka-mistnosti .je-vpravo { text-align: right; white-space: nowrap; }
.tabulka-mistnosti tbody td:last-child { font-weight: 600; }
.tabulka-mistnosti tfoot td {
    background: var(--c-bezova);
    font-weight: 700;
    font-size: 18px;
    border-bottom: none;
}

.patro__pudorys {
    display: block;
    padding: 14px;
    background: var(--c-bila);
    border: 1px solid var(--c-linka);
    border-radius: var(--radius);
    transition: transform var(--t) var(--e), box-shadow var(--t) var(--e);
}
.patro__pudorys:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(17, 17, 17, .10); }
.patro__pudorys img { display: block; width: 100%; height: auto; }

/* ---- Pohledy na dům (fasády z dokumentace) ---- */
.pohledy__pozn { margin: -14px 0 24px; text-align: center; color: #6f5b50; }
.pohledy {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2%;
}
.pohled { margin: 0; }
.pohled__obr {
    display: flex;
    align-items: center;
    justify-content: center;
    /* kresby mají různý poměr stran, pevný rámeček je srovná do mřížky */
    aspect-ratio: 4 / 3;
    padding: 16px;
    background: var(--c-bila);
    border: 1px solid var(--c-linka);
    border-radius: var(--radius);
    transition: transform var(--t) var(--e), box-shadow var(--t) var(--e);
}
.pohled__obr:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(17, 17, 17, .10); }
.pohled__obr img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.pohled__popis {
    margin-top: 10px;
    font-family: var(--f-nadpis);
    font-size: 20px;
    text-align: center;
}


/* ============ Reference (dokončené projekty) ============ */
/* Hlavička: velká fotka vlevo, text vpravo — stejný rozvrh jako detail chalupy. */
.ref-hero {
    display: grid;
    grid-template-columns: 1fr 42%;
    align-items: center;
    gap: 0 4%;
    padding-bottom: 20px;
}
.ref-hero__foto img { display: block; width: 100%; height: auto; }
.ref-hero__text { padding: 40px var(--pad-x) 40px 0; }
.ref-hero__text .perex { margin-bottom: 18px; }
.ref-hero__text .btn { margin-top: 14px; }

.reference__stav {
    display: inline-block;
    margin-bottom: 12px;
    padding: 5px 14px;
    background: var(--c-bezova);
    border-radius: 999px;
    font-family: var(--f-nadpis);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.reference__lokalita {
    margin: 6px 0 20px;
    font-family: var(--f-nadpis);
    font-size: 24px;
    color: #6f5b50;
}

/* Etapy rekonstrukce — číslovaný postup s fotkou */
.etapy__perex {
    max-width: var(--w-uzky);
    margin: -14px auto 34px;
    text-align: center;
    color: #6f5b50;
}
.etapy {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 34px 2%;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: etapa;
}
.etapa { margin: 0; }
.etapa__foto {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 8px;
    background: var(--c-linka);
}
.etapa__foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--e);
}
.etapa__foto:hover img { transform: scale(1.04); }
.etapa__cislo {
    position: absolute;
    left: 14px;
    top: 14px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    background: var(--c-ink);
    color: #fff;
    border-radius: 50%;
    font-family: var(--f-nadpis);
    font-size: 20px;
    font-weight: 600;
}
.etapa__telo { padding-top: 14px; }
.etapa__nadpis {
    margin: 0 0 6px;
    font-family: var(--f-nadpis);
    font-size: 26px;
    line-height: 1.2;
}
.etapa__text { margin: 0; }

/* galerie reference je hustší než u chalupy — fotek bývá víc */
.fotogalerie--reference { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.reference__ceka {
    margin: 8px 0 0;
    padding: 22px;
    background: var(--c-bezova);
    border-radius: var(--radius);
    text-align: center;
    color: #6f5b50;
}

/* ---- Pohledy na dům (fasády z dokumentace) ---- */
.pohledy__pozn { margin: -14px 0 24px; text-align: center; color: #6f5b50; }
.pohledy {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2%;
}
.pohled { margin: 0; }
.pohled__obr {
    display: flex;
    align-items: center;
    justify-content: center;
    /* kresby mají různý poměr stran, pevný rámeček je srovná do mřížky */
    aspect-ratio: 4 / 3;
    padding: 16px;
    background: var(--c-bila);
    border: 1px solid var(--c-linka);
    border-radius: var(--radius);
    transition: transform var(--t) var(--e), box-shadow var(--t) var(--e);
}
.pohled__obr:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(17, 17, 17, .10); }
.pohled__obr img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.pohled__popis {
    margin-top: 10px;
    font-family: var(--f-nadpis);
    font-size: 20px;
    text-align: center;
}


.detail-zpet { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; }
.detail-zpet .icon { width: 18px; height: 18px; }

/* --- Stránka Kontakt ----------------------------------------------------
   Celá je v grafice na béžové: nadpis, vlevo firemní údaje, vpravo kontaktní
   řádky, pod tím fotka majitele a bílá karta formuláře. */
/* fotka majitele stojí spodkem na patičce, proto sekce dole neodsazuje */
.page-kontakt .section-form { background: var(--c-bezova); padding: 0 0 0; }
.kontakt-hlavicka {
    background: var(--c-bezova);
    padding: 86px 0 40px;
}
.kontakt-hlavicka .h1-clanek { margin-bottom: 50px; }
.kontakt-grid {
    display: grid;
    grid-template-columns: 44% 1fr;
    gap: 6%;
    align-items: start;
}
.kontakt-firma { max-width: 437px; font-size: 22px; line-height: 28px; }
.kontakt-firma p { margin: 0 0 28px; }
.kontakt-firma p:last-child { margin-bottom: 0; }
.kontakt-firma__zapis { font-size: 16px; line-height: 22px; }
.kontakt-firma__stavba { font-size: 18px; line-height: 24px; }
.kontakt-grid .form-intro__contacts { gap: 8px; }

/* levý sloupec formuláře je tu fotka; stojí spodkem na patičce jako v grafice */
.form-split--foto { align-items: end; }
.form-foto { display: flex; align-items: flex-end; }
.form-foto img { width: 100%; max-width: 578px; margin-inline-start: auto; }

/* --- 12) Článek ---------------------------------------------------------- */
.clanek-hlavicka {
    background: var(--c-bezova);
    padding: 70px 0;
    text-align: center;
}
.clanek-telo { padding: 40px 0 60px; }
.clanek-telo .perex {
    font-weight: 600;
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--c-linka);
}
.clanek-sekce + .clanek-sekce { margin-top: 36px; }

/* rozcestník na 404 — rychlé odkazy do hlavních sekcí */
.rozcestnik {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin: 34px 0;
    text-align: left;
}
.rozcestnik__polozka {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    background: var(--c-bezova);
    border-radius: var(--radius);
    text-decoration: none;
    font-family: var(--f-nadpis);
    font-size: 20px;
    font-weight: 600;
    transition: background-color var(--t) var(--e), color var(--t) var(--e), transform var(--t) var(--e);
}
.rozcestnik__polozka:hover {
    background: var(--c-ink);
    color: var(--c-bila);
    transform: translateY(-2px);
}
.rozcestnik__polozka .icon { width: 20px; height: 20px; flex: none; transition: transform var(--t) var(--e); }
.rozcestnik__polozka:hover .icon { transform: translateX(4px); }

/* --- 13) Aktuality ------------------------------------------------------- */
.vypis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px 2%;
}
.karta {
    display: flex;
    flex-direction: column;
    background: var(--c-bila);
    border-radius: var(--radius);
    overflow: hidden;
}
.karta__foto {
    display: block;
    aspect-ratio: 504 / 336;
    overflow: hidden;
    background: var(--c-linka);
}
.karta__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--e);
}
.karta:hover .karta__foto img { transform: scale(1.04); }
.karta__telo {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 30px;
    text-align: center;
}
.karta__nazev {
    font-family: var(--f-nadpis);
    font-size: 30px;
    line-height: 36px;
    font-weight: 600;
    margin: 0 0 14px;
}
.karta__perex { margin: 0 0 20px; font-size: 16px; line-height: 22px; }
.karta__telo .btn { margin: auto auto 0; }

/* --- 14) Formulář -------------------------------------------------------- */
.section-form {
    background: var(--c-bezova);
    padding: 80px 0;
}
.section-form--svetla { background: var(--c-bila); border-bottom: 2px solid var(--c-bezova); }

.form-split {
    display: grid;
    grid-template-columns: 44% 1fr;
    gap: 6%;
    align-items: start;
}
.form-intro { padding-top: 40px; }
.section-form--svetla .form-intro { padding-top: 0; }
.form-intro__cta { font-size: 24px; line-height: 30px; margin: 0 0 30px; }
.form-intro__contacts { display: grid; gap: 8px; justify-items: start; }

.lead-form {
    /* --form-bg drží barvu podkladu formuláře; používá ji překrytí autofillu níže */
    --form-bg: var(--c-bila);
    background: var(--form-bg);
    padding: 64px 92px;
}
.section-form--svetla .lead-form { --form-bg: var(--c-bezova); }

.field-row { margin-bottom: 8px; }
.field-row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }

/* Plovoucí popisek (vzor pozemkyOtovice): popisek sedí v prázdném poli a při
   psaní nebo zaostření odjede nad něj. Pole je jen podtržená linka, žádný rámeček. */
.field { position: relative; margin-bottom: 30px; }
.field input,
.field textarea {
    width: 100%;
    padding: 8px 0;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .32);
    border-radius: 0;
    background: transparent;
    font: inherit;
    font-size: 17px;
    color: var(--c-ink);
    transition: border-color var(--t) var(--e);
}
.field input:focus,
.field textarea:focus {
    outline: none;
    border-bottom-color: var(--c-ink);
    border-bottom-width: 2px;
    padding-bottom: 7px;   /* dorovnání za tlustší linku, ať pole neposkočí */
}
.field textarea { resize: vertical; min-height: 76px; }

.field label {
    position: absolute;
    left: 0;
    top: 8px;
    color: rgba(0, 0, 0, .62);
    font-size: 17px;
    line-height: 1.4;
    pointer-events: none;
    transform-origin: left top;
    transition: transform var(--t) var(--e), color var(--t) var(--e);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label {
    transform: translateY(-22px) scale(.78);
    color: var(--c-ink);
    font-weight: 600;
}
.field .req { color: rgba(0, 0, 0, .45); }

.field--err input,
.field--err textarea { border-bottom-color: var(--c-chyba); }
.field--err label,
.field--err .req { color: var(--c-chyba); }

/* Autofill: prohlížeč si na vyplněná pole kreslí vlastní modrošedé pozadí, které
   pod průhledným inputem bije do očí. Vnitřní stín ho překryje barvou formuláře
   (--form-bg nastavuje .lead-form podle sekce) a nekonečná transition zabrání
   tomu, aby si ji prohlížeč po chvíli dokreslil zpátky. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field textarea:-webkit-autofill {
    -webkit-text-fill-color: var(--c-ink);
    -webkit-box-shadow: 0 0 0 100px var(--form-bg, var(--c-bila)) inset;
    box-shadow: 0 0 0 100px var(--form-bg, var(--c-bila)) inset;
    caret-color: var(--c-ink);
    transition: background-color 600000s 0s, border-color var(--t) var(--e);
}
.field input:autofill,
.field textarea:autofill {
    -webkit-text-fill-color: var(--c-ink);
    box-shadow: 0 0 0 100px var(--form-bg, var(--c-bila)) inset;
}

.gdpr {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 6px 0 24px;
    font-size: 15px;
    line-height: 20px;
}
.gdpr input { margin-top: 2px; flex: none; width: 16px; height: 16px; accent-color: #000; }
.gdpr.gdpr--err span { color: var(--c-chyba); }

/* honeypot — skryté pole pro roboty */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.form-flash {
    margin: 0 0 20px;
    padding: 12px 16px;
    border-radius: var(--radius);
    font-size: 16px;
}
.form-flash--ok  { background: rgba(195, 221, 77, .3); border: 1px solid var(--c-dostupny); }
.form-flash--err { background: rgba(238, 0, 49, .08); border: 1px solid var(--c-chyba); }
.form-chalupa-note {
    margin: 0 0 20px;
    padding: 12px 16px;
    background: var(--c-bezova);
    border-radius: var(--radius);
    font-size: 16px;
}
.section-form--svetla .form-chalupa-note { background: var(--c-bila); }

/* --- 15) Galerie / lightbox ---------------------------------------------- */
.fotogalerie {
    display: grid;
    /* auto-fit místo pevných 4 sloupců: tři fotky vyplní řádek, deset se zalomí */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2%;
}
.fotogalerie__item {
    display: block;
    aspect-ratio: 360 / 270;
    border-radius: 8px;
    overflow: hidden;
    background: var(--c-linka);
}
.fotogalerie__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--e);
}
.fotogalerie__item:hover img { transform: scale(1.05); }

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: 5vmin;
    background: rgba(0, 0, 0, .88);
    opacity: 0;
    transition: opacity var(--t) var(--e);
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }
.lightbox__img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: var(--radius);
}
.lightbox__btn {
    position: absolute;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: var(--radius);
    background: rgba(0, 0, 0, .4);
    color: #fff;
    transition: background-color var(--t) var(--e);
}
.lightbox__btn:hover { background: rgba(255, 255, 255, .2); }
.lightbox__btn--close { top: 20px; right: 20px; }
.lightbox__btn--prev  { left: 20px;  top: 50%; transform: translateY(-50%); }
.lightbox__btn--next  { right: 20px; top: 50%; transform: translateY(-50%); }
.lightbox__btn .icon { width: 24px; height: 24px; }

/* --- 16) Efekty ---------------------------------------------------------- */
/* Scroll reveal — stejné časování i křivka jako pozemkyOtovice a AllTradeFoods.
   Gate přes .js = progressive enhancement: bez JS se nic neschová. */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(42px) scale(.97);
    transition: opacity .8s cubic-bezier(.16, 1, .3, 1),
                transform .8s cubic-bezier(.16, 1, .3, 1);
    will-change: opacity, transform;
}
.js [data-reveal="left"]  { transform: translateX(-44px); }
.js [data-reveal="right"] { transform: translateX(44px); }
.js [data-reveal="fade"]  { transform: none; }
.js [data-reveal].je-videt { opacity: 1; transform: none; }

/* Tlačítka — nadzvednutí, posun koncové ikony a měkký stín pod plným tlačítkem */
.btn:hover:not(:active) { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary:hover { box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .55); }
.btn--outline:hover,
.btn--bezove:hover  { box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .5); }

/* Karty výpisu — nadzvednutí spolu se zvětšením fotky (ta má vlastní transition) */
.karta {
    transition: transform var(--t) var(--e), box-shadow var(--t) var(--e);
}
.karta:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 34px -22px rgba(0, 0, 0, .45);
}

/* Fotogalerie a pás — jemný stín pod položkou, na kterou se najede */
.fotogalerie__item,
.galerie-pas__item { transition: box-shadow var(--t) var(--e); }
.fotogalerie__item:hover { box-shadow: 0 16px 30px -20px rgba(0, 0, 0, .5); }

/* Soubory ke stažení — posun ikony místo pouhého ztmavení */
.soubor .icon { transition: transform var(--t) var(--e); }
.soubor:hover .icon { transform: translateY(2px); }

/* Kotva z vizualizace: řádek tabulky nesmí skončit pod fixní hlavičkou. */
.tabulka-chalup tbody tr { scroll-margin-top: calc(var(--h-header) + 24px); }

/* Dojezd kotvy — krátké prosvětlení, ať je vidět, kam se přistálo.
   Bez `forwards`: po doznění řádek spadne zpět na .is-active (stejný odstín →
   plynule), jinak by animace držela pozadí i po přesunu výběru jinam. */
.tabulka-chalup tbody tr.is-target { animation: radekBlik 2.4s var(--e); }
@keyframes radekBlik {
    0%, 45% { background: rgba(255, 255, 255, .95); }
    100%    { background: rgba(255, 255, 255, .55); }
}

/* Stavový štítek — barevná plocha lehce povyroste při najetí na řádek */
.stav__ic { transition: transform var(--t) var(--e); }
.tabulka-chalup tbody tr:hover .stav__ic,
.chalupa-radek:hover .stav__ic { transform: scale(1.08); }

/* Odkazy v textu — podtržení dojede zprava místo skokového zmizení */
.text-blok a,
.clanek-telo a {
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 100% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--t) var(--e);
}
.text-blok a:hover,
.clanek-telo a:hover { background-size: 0 1px; }
.text-blok a.btn,
.clanek-telo a.btn { background-image: none; }

/* --- 17) Responzivita ---------------------------------------------------- */
@media (max-width: 1540px) {
    .cikcak__text { padding-inline-start: 80px; }
    .cikcak--obraz-vlevo .cikcak__text { padding-inline-end: 80px; }
    .detail-hero__data { padding: 50px; }
}

@media (max-width: 1340px) {
    :root { --h-header: 88px; }
    .site-header { padding: 14px 0; }
    .site-header.is-scrolled { padding: 12px 0; }
    .brand__img,
    .site-header.is-scrolled .brand__img { width: 150px; }
    .main-nav__item + .main-nav__item::before { margin: 0 16px; }
    .vyhody { padding: 60px 0 40px; }
    .uvod { padding-top: 60px; }
}

@media (max-width: 1180px) {
    /* mobilní navigace — panel vysunutý zprava */
    .nav-toggle { display: inline-flex; }
    .site-header__inner > .nav-cta { display: none; }
    .nav-cta--panel { display: inline-flex; width: 100%; justify-content: center; margin-top: 24px; }
    .main-nav { flex: 0; }
    .has-hero .nav-toggle { color: var(--c-bila); }
    .has-hero .site-header.is-scrolled .nav-toggle,
    .nav-open .nav-toggle { color: var(--c-ink); }

    .main-nav {
        display: block;          /* na desktopu je to flex kvůli středění */
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(360px, 84vw);
        z-index: 95;
        padding: calc(var(--h-header) + 20px) 30px 40px;
        background: var(--c-bila);
        border-left: 1px solid var(--c-linka);
        transform: translateX(100%);
        transition: transform var(--t) var(--e);
        overflow-y: auto;
    }
    .has-hero .main-nav,
    .has-hero .main-nav__link { color: var(--c-ink); }
    .nav-open .main-nav { transform: none; }

    .main-nav__list { flex-direction: column; align-items: stretch; gap: 4px; }
    .main-nav__item { align-items: stretch; }
    .main-nav__item > .main-nav__link { flex: 1; }
    .main-nav__item + .main-nav__item::before { display: none; }
    .main-nav__link {
        padding: 14px 4px;
        font-size: 20px;
        border-bottom: 1px solid var(--c-linka);
    }

    .form-split { grid-template-columns: 1fr; gap: 30px; }
    .kontakt-grid { grid-template-columns: 1fr; gap: 34px; }
    .form-split--foto { align-items: stretch; }
    .form-foto img { margin-inline: auto; }
    .form-intro { padding-top: 0; }
    .lead-form { padding: 34px; }
    .vypis { grid-template-columns: repeat(2, 1fr); }
    .fotogalerie { grid-template-columns: repeat(3, 1fr); }
    .galerie-pas__item { flex-basis: 33.333%; }
    .detail-telo { grid-template-columns: 1fr; gap: 30px; }
    .site-footer__bottom { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .copyright, .made-by { justify-self: center; }
    .to-top { display: none; }
}

@media (max-width: 1024px) {
    /* cik-cak: fotka nad textem, oba na plnou šířku */
    .cikcak { grid-template-columns: 1fr; }
    .cikcak__text,
    .cikcak--obraz-vlevo .cikcak__text {
        order: 1;
        /* v jednom sloupci už panel nemá kam odsazovat — okraj na mřížku webu
           patří jen k rozvržení vedle sebe */
        margin-inline: 0;
        padding: 30px var(--pad-x);
        text-align: center;
    }
    .cikcak__ic { display: flex; justify-content: center; }
    .cikcak__foto,
    .cikcak--zavitejte .cikcak__foto { display: none; }   /* v jednom sloupci jede .cikcak__foto-resp */
    .cikcak__foto-resp {
        display: block;
        margin: 0 auto 20px;
        max-height: 300px;
        width: auto;
    }
    .cikcak--zavitejte { padding-top: 30px; }
    /* osobní vzkaz zůstává vlevo i v jednom sloupci — pravidlo výš ho
       centruje přes .cikcak--obraz-vlevo, které má tenhle blok taky */
    .cikcak--zavitejte .cikcak__text { text-align: left; }
    .cikcak .btn { margin-inline: auto; }
    .podpis { margin-inline: auto; }

    /* Jeden sloupec: fotka nahoře, pod ní text a panel pod sebou — dotykové
       zařízení hover nemá, takže se panel nemá čím vysunout a musí být vidět. */
    .nabidka-hero { grid-template-columns: 1fr; }
    .nabidka-hero__text {
        padding: 24px var(--pad-x) 30px;
        text-align: center;
    }
    .nabidka-hero__foto { order: -1; padding: 0; }
    .nabidka-hero__foto img { width: 100%; }

    /* Panel překrývá text i tady — po klepnutí na chalupu musí být vidět hned
       pod fotkou, ne někde dole ve stránce. Zavírá se křížkem v jeho rohu. */
    .nabidka-hero .chalupa-karta { text-align: left; }

    .detail-hero { grid-template-columns: 1fr; }
    .detail-hero__foto img { max-height: 340px; }
    .detail-hero__data { padding: 34px var(--pad-x); }

    .section-form, .vyhody { padding: 50px 0; }
}

@media (max-width: 780px) {
    body { font-size: 16px; line-height: 22px; }
    :root { --pad-x: 7%; }

    .vyhody__grid { grid-template-columns: repeat(2, 1fr); gap: 30px 4%; }
    .vypis { grid-template-columns: 1fr; }
    .fotogalerie { grid-template-columns: repeat(2, 1fr); }
    .galerie-pas__item { flex-basis: 60%; }
    .galerie-sip--prev { left: 12px; }
    .galerie-sip--next { right: 12px; }

    .sekce { padding: 50px 0; }
    .clanek-hlavicka { padding: 40px 0; }
    .lead-form { padding: 24px; }
    .field-row--2 { grid-template-columns: 1fr; }

    /* tabulka nabídky → karty pod sebou */
    .tabulka-chalup,
    .tabulka-chalup tbody,
    .tabulka-chalup tr,
    .tabulka-chalup td { display: block; width: 100%; }
    .tabulka-chalup thead { display: none; }
    .tabulka-chalup tr {
        background: var(--c-bila);
        border-radius: var(--radius);
        padding: 6px 16px 16px;
        margin-bottom: 14px;
    }
    .tabulka-chalup td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 10px 0;
        border-bottom: 1px solid var(--c-linka-jemna);
        text-align: right;
    }
    .tabulka-chalup td::before {
        content: attr(data-label);
        display: block;
        font-weight: 600;
        text-align: left;
    }
    .tabulka-chalup td.col-nazev {
        font-size: 20px;
        border-bottom: 1px solid var(--c-linka);
        padding-top: 14px;
    }
    .tabulka-chalup td.col-nazev::before { display: none; }
    .tabulka-chalup td.col-akce { border-bottom: 0; padding-top: 16px; }
    .tabulka-chalup td.col-akce::before { display: none; }
    .tabulka-chalup td.col-akce .btn { width: 100%; justify-content: space-between; }

    .detail-parametr__hodnota { min-width: 90px; font-size: 19px; }
    .detail-parametr__popis { font-size: 17px; }
}

/* --- Mobil: samostatné rozvržení z grafiky (rám 320 px) -------------------
   Není to zúžený desktop. Hero je pruh fotky a text pod ním na béžové, výhody
   jsou stručný seznam bez popisků, cik-cak bloky mají fotku přes celou šířku
   nad textem a tlačítka jdou na plnou šířku. */
@media (max-width: 640px) {
    :root { --h-header: 64px; --pad-x: 16px; }
    body { font-size: 16px; line-height: 22px; }

    /* hlavička je i nad fotkou bílá, hamburger je černý blok u kraje */
    .site-header,
    .has-hero .site-header,
    .has-hero .site-header.is-scrolled { background: var(--c-bila); padding: 0; }
    /* tmavý přechod patří jen k průhledné hlavičce na velkém webu */
    .has-hero .site-header::before { display: none; }
    .has-hero .brand,
    .has-hero .site-header.is-scrolled .brand { color: var(--c-ink); }
    .site-header__inner { gap: 0; min-height: 64px; }
    .brand__img,
    .site-header.is-scrolled .brand__img { width: 150px; }

    .nav-toggle,
    .has-hero .nav-toggle,
    .has-hero .site-header.is-scrolled .nav-toggle,
    .nav-open .nav-toggle {
        align-self: stretch;
        gap: 0;
        width: 76px;
        margin-inline-start: auto;
        margin-inline-end: calc(-1 * var(--pad-x));
        padding: 0;
        background: var(--c-ink);
        color: var(--c-bila);
        justify-content: center;
    }
    .nav-toggle__label { display: none; }
    .nav-toggle__bars { width: 40px; height: 12px; }
    .nav-toggle__bars span { height: 2px; }
    .nav-toggle__bars span:nth-child(2) { top: 5px; }
    .nav-toggle__bars span:nth-child(3) { top: 10px; }
    .nav-open .nav-toggle__bars span:nth-child(1),
    .nav-open .nav-toggle__bars span:nth-child(3) { top: 5px; }

    /* hero: pruh fotky 300 px, pod ním text na béžové */
    .hero {
        display: block;
        min-height: 0;
        padding: var(--h-header) 0 0;
        background: var(--c-bezova);
        text-align: center;
    }
    .hero::before {
        content: "";
        display: block;
        width: 100%;
        height: 300px;
        /* nadpis v grafice začíná ještě v doznívající fotce */
        margin-bottom: -12px;
        background: url("../img/hero.jpg") no-repeat center / cover;
        -webkit-mask-image: linear-gradient(to bottom, #000 66%, transparent);
        mask-image: linear-gradient(to bottom, #000 66%, transparent);
    }
    .hero::after { display: none; }
    .hero__inner { width: calc(100% - 2 * var(--pad-x)); }
    .h1-hero {
        color: var(--c-ink);
        font-size: 40px;
        line-height: 43px;
        margin-bottom: 20px;
    }
    .hero__perex {
        display: block;
        color: var(--c-ink);
        font-size: 22px;
        line-height: 29px;
        margin-bottom: 24px;
    }
    .hero .btn,
    .cikcak .btn,
    .lead-form .btn { width: 100%; justify-content: space-between; }
    .hero__scroll { display: none; }

    /* výhody: seznam ikona + nadpis, popisky jsou jen na velkém webu */
    .vyhody { padding: 38px 0 30px; border-bottom: 0; }
    .vyhody__grid { grid-template-columns: 1fr; gap: 24px; }
    .vyhoda { display: flex; align-items: center; gap: 23px; text-align: left; }
    .vyhoda__ic { height: auto; width: 40px; margin: 0; flex: none; }
    .vyhoda__ic .illu { width: 40px; height: 40px; }
    .vyhoda__nazev { font-size: 24px; line-height: 36px; margin: 0; }
    .vyhoda__text { display: none; }

    /* úvodní odstavce — na mobilu jde béžová plynule od hero až k fotce */
    .uvod { background: var(--c-bezova); padding-top: 40px; }
    .uvod__text { font-size: 22px; line-height: 30px; }
    .uvod__foto { margin-top: 40px; }

    /* cik-cak: fotka přes celou šířku nad textem */
    .cikcak, .cikcak--zavitejte { margin: 0; }
    .cikcak__text,
    .cikcak--obraz-vlevo .cikcak__text,
    .cikcak--zavitejte .cikcak__text {
        margin-inline: 0;
        padding: 0 var(--pad-x) 40px;
    }
    .cikcak__foto-resp {
        order: -1;
        display: block;
        width: calc(100% + 2 * var(--pad-x));
        max-width: none;
        max-height: none;
        height: 224px;
        object-fit: cover;
        margin: 0 calc(-1 * var(--pad-x)) 29px;
    }
    .cikcak__ic { margin-bottom: 12px; }
    .cikcak__ic .illu { width: 55px; height: 55px; }
    .cikcak .h2-sekce { font-size: 30px; line-height: 36px; margin-bottom: 16px; }
    .cikcak p { font-size: 16px; line-height: 22px; margin-bottom: 24px; }
    /* Postava je v grafice široká 233 z 320 px (73 vw) a stojí na střed —
       neroztahuje se na celou šířku a nic se neořezává, jen se dole rozplyne
       do béžové. */
    .cikcak--zavitejte .cikcak__foto-resp {
        width: 73vw;
        height: auto;
        aspect-ratio: auto;
        object-fit: fill;
        margin: 22px auto 24px;
        -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 92%);
        mask-image: linear-gradient(to bottom, #000 62%, transparent 92%);
    }
    .podpis { margin-inline: 0; max-height: 51px; }

    /* galerie: jedna fotka a pod ní dvě šipky vedle sebe na střed */
    .fotogalerie { grid-template-columns: 1fr 1fr; }
    .galerie-pas__item { flex-basis: 100%; }
    .galerie-wrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
        padding-bottom: 16px;
    }
    .galerie-pas { flex: 0 0 100%; }
    .galerie-sip {
        position: static;
        transform: none;
        width: 40px;
        height: 40px;
        border: 1px solid var(--c-ink);
        background: transparent;
        color: var(--c-ink);
    }

    /* stránka Kontakt */
    .kontakt-hlavicka { padding: 30px 0 24px; }
    .kontakt-hlavicka .h1-clanek { margin-bottom: 24px; }
    .kontakt-firma { font-size: 18px; line-height: 24px; }
    .kontakt-firma p { margin-bottom: 20px; }
    .form-foto img { max-width: 73vw; }

    /* formulář a patička */
    .section-form { padding: 40px 0; }
    .section-form .h2-sekce { font-size: 30px; line-height: 36px; }
    .form-intro__cta { font-size: 16px; line-height: 22px; }
    .contact-line { gap: 16px; font-size: 24px; line-height: 36px; }
    .contact-line__ic { width: 40px; height: 40px; }
    .contact-line__ic .icon { width: 20px; height: 20px; }
    .footer-contacts { flex-direction: column; align-items: center; gap: 14px; }
    .footer-contacts .contact-line { justify-content: flex-start; min-width: 250px; }
    .lead-form { padding: 24px 16px; }
    .detail-hero__data { padding: 26px var(--pad-x); }
    .btn,
    .btn--lg { padding: 13px 24px; gap: 16px; font-size: 20px; line-height: 30px; }
}

/* --- 18) Přístupnost a tisk ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .js [data-reveal] { opacity: 1; transform: none; }
}


/* ---- Dispozice po patrech: pod 900 px pod sebe ---- */
@media (max-width: 900px) {
    .patro__obsah { grid-template-columns: 1fr; gap: 24px; }
    .patro { padding-top: 40px; }
    .tabulka-mistnosti th,
    .tabulka-mistnosti td { padding: 10px 12px; }
    .soubor__stav { font-size: 14px; }
}



/* ---- Scroll reveal: do 1024 px posouvat svisle, ne vodorovně ----
   Boční okraj je 6 % (na 390 px jen 16 px), takže translateX(44px) u bloku, který
   ještě nebyl odhalen, vystrčí stránku do vodorovného scrollu — a u sekcí tekoucích
   do kraje (hero nabídky) to platí až do ~1024 px. Svislý posun dělá totéž opticky
   a šířku neovlivní. Musí být až za definicemi na ř. ~1490, jinak by ho přebily —
   @media specificitu nepřidává. */
@media (max-width: 1024px) {
    .js [data-reveal="left"],
    .js [data-reveal="right"] { transform: translateY(24px); }
    .js [data-reveal].je-videt { transform: none; }
}


/* Přehled cookies na /gdpr/ — tabulku vkládá CookieScript a na mobilu je širší
   než sloupec (555 px v 343 px), takže by protáhla celou stránku do vodorovného
   scrollu. Posouvá se tedy sama v sobě. */
.cookie-report { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cookie-report table { min-width: 520px; }

/* Vzhled reportu v paletě webu. Report si vkládá vlastní <style> až do <body>,
   takže selektory jdou přes dvě třídy, aby ho přebily bez !important. */
.cookie-report__zmena { margin: 4px 0 28px; }

/* Zaškrtávátka + „Uložit" reportu neukládají (viz gdpr.php) — mění se v liště. */
.cookie-report ._CookieScriptReportPageCheckboxes,
.cookie-report ._CookieScriptReportPageConsentKey { display: none !important; }

.cookie-report h4 {
    margin: 32px 0 10px;
    font-family: var(--f-nadpis);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
}
.cookie-report h4:first-of-type { margin-top: 0; }

.cookie-report ._CookieScriptReportPageTable {
    width: 100%;
    font-family: var(--f-text);
    border-collapse: collapse;
    margin-bottom: 8px;
}
.cookie-report ._CookieScriptReportPageTableTh,
.cookie-report ._CookieScriptReportPageTableTd {
    padding: 12px 16px;
    border: 0;
    border-bottom: 1px solid var(--c-linka-jemna);
    font-size: 15px;
    line-height: 21px;
    text-align: left;
    vertical-align: top;
}
.cookie-report ._CookieScriptReportPageTableTh {
    background: var(--c-bezova);
    font-weight: 600;
    border-bottom-color: var(--c-linka);
}
.cookie-report ._CookieScriptReportPageTableTd:first-child { font-weight: 600; }
.cookie-report ._CookieScriptReportPageTable a { color: var(--c-ink); }

/* Na mobilu by úzký sloupec Popis natáhl řádek do výšky — buňky jdou pod sebe. */
@media (max-width: 640px) {
    .cookie-report table,
    .cookie-report ._CookieScriptReportPageTable { min-width: 0; }
    .cookie-report ._CookieScriptReportPageTable thead,
    .cookie-report ._CookieScriptReportPageTable tr:has(> th) { display: none; }
    .cookie-report ._CookieScriptReportPageTable tr {
        display: block;
        padding: 14px 0;
        border-bottom: 1px solid var(--c-linka-jemna);
    }
    .cookie-report ._CookieScriptReportPageTableTd {
        display: block;
        padding: 2px 0;
        border: 0;
    }
    .cookie-report ._CookieScriptReportPageTableTd:first-child { font-size: 16px; margin-bottom: 4px; }
    .cookie-report ._CookieScriptReportPageTableTd:last-child { margin-top: 6px; }
}


/* Pojistka proti vodorovnému scrollu: bloky, které při scroll revealu najíždějí
   ze strany (translateX 44 px), i prvky tekoucí do kraje by jinak protáhly
   stránku doprava — nejvíc kolem 1024 px. `clip` místo `hidden` proto, že
   nezakládá scroll kontejner, takže sticky prvky uvnitř dál fungují. */
main { overflow-x: clip; }


/* ---- Pohledy: na mobilu jeden sloupec s menším rámečkem ---- */
@media (max-width: 700px) {
    .pohledy { grid-template-columns: 1fr; gap: 18px; }
    .pohled__obr { padding: 10px; }
    .pohled__popis { font-size: 18px; }
    .pohledy__pozn { margin-bottom: 18px; }
}


/* ---- Reference: pod 900 px fotka nad textem ---- */
@media (max-width: 900px) {
    .ref-hero { grid-template-columns: 1fr; gap: 0; }
    .ref-hero__text { padding: 26px var(--pad-x) 10px; }
    .reference__lokalita { font-size: 20px; margin: 4px 0 14px; }
    .etapy { gap: 26px; }
    .etapa__nadpis { font-size: 23px; }
    .etapy__perex { margin-bottom: 26px; }
}


/* Tabulka nabídky se mezi kartovým zlomem (780 px) a ~1060 px nevejde do sloupce —
   šest sloupců potřebuje přes 1060 px. Posouvá se proto ve vlastním obalu, místo aby
   protahovala celou stránku. Nad 1080 px není co posouvat a obal nic nedělá. */
.tabulka-obal {
    position: relative;   /* ukotvení pro .vh uvnitř tabulky — bez něj se skryté
                             popisky hlaviček pozicují vůči stránce a protahují ji */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
@media (min-width: 781px) {
    .tabulka-obal .tabulka-chalup { min-width: 1060px; }
}
@media (max-width: 780px) {
    /* pod tímhle zlomem se z tabulky stávají karty a posouvat není co */
    .tabulka-obal { overflow-x: visible; }
}

@media print {
    .site-header, .site-footer, .nav-toggle, .to-top,
    .hero__scroll, .galerie-sip, .section-form { display: none !important; }
    body { font-size: 12pt; }
    main { padding-top: 0 !important; }
    .cikcak, .sekce--bezova, .clanek-hlavicka { background: none !important; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* ---- Průběh výstavby (O projektu) ---------------------------------------
   Etapy z data/vystavba.json, nejnovější nahoře. Vzor: pozemkyOtovice/galerie,
   místo pevné mozaiky na 7 fotek naše .fotogalerie (etapy mají 4–7 fotek). */
.vystavba__perex {
    max-width: var(--w-uzky);
    margin: -14px auto 10px;
    text-align: center;
    color: #6f5b50;
}
.vystavba-etapa {
    padding-top: clamp(40px, 5vw, 70px);
    scroll-margin-top: 110px;
}
.vystavba-etapa + .vystavba-etapa { margin-top: clamp(40px, 5vw, 70px); border-top: 1px solid var(--c-linka); }
.vystavba-etapa__hlava {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px 18px;
    margin-bottom: 26px;
}
.vystavba-etapa__cislo {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    background: var(--c-ink);
    color: #fff;
    border-radius: 50%;
    font-family: var(--f-nadpis);
    font-size: 22px;
    font-weight: 600;
}
.vystavba-etapa__nadpis {
    margin: 0;
    font-family: var(--f-nadpis);
    font-size: clamp(1.5rem, 2.2vw, 1.875rem);
    line-height: 1.2;
    text-transform: uppercase;
}
.vystavba-etapa__datum { margin: 2px 0 0; color: #6f5b50; }
.vystavba-etapa__popis { grid-column: 2; max-width: 68ch; margin: 0; }
.fotogalerie--vystavba { row-gap: 20px; }

@media (max-width: 640px) {
    .vystavba-etapa__cislo { width: 42px; height: 42px; font-size: 18px; }
    .vystavba-etapa__popis { grid-column: 1 / -1; }
}