/* ============================================================
   vasekrby.cz — značková vrstva (NAČÍTÁ SE POSLEDNÍ)

   Tokeny, obecné komponenty a sekce stavebnice jsou v `site.css`.
   Tady je jen to, co je vzhled TOHOHLE webu: písmo, hlavička, hero,
   sekce úvodní stránky, výpis realizací a patička.

   ⚠️ Oba soubory si nárokuje `moduly-webu.php` (modul `vk-vzhled`,
      typ `na-miru`), takže se nikdy nezabalí do jádra a aktualizace
      na ně nesahá.

   OBSAH
     1  Písmo (self-hostovaný Jost)
     2  Základ a typografie
     3  Kontejner a sekce
     4  Drobné komponenty (štítek, odkaz se šipkou, tlačítko)
     5  Hlavička a mobilní zásuvka
     6  Hero
     7  Rozdělená sekce (nadpis + text)
     8  Karty nabídky a mřížka obrázků (loga, dokumenty)
     9  Atmosférický pás
    10  Realizace
    11  Kontaktní blok
    12  Patička
    13  Obsahové stránky
    13b Poptávkový formulář (sekce stavebnice `contact_form`)
    14  Responzivita
    15  Průřezové bloky (tisk, omezený pohyb)
   ============================================================ */


/* ============================================================
   1  PÍSMO
   Jost — bezpatkové geometrické písmo (rod Futury). Nahradilo patkový
   Spectral 14. 10. 2026 na přání zadavatele: web působil „nevýrazně",
   patkové písmo v drobných velikostech (menu, štítky, popisky) ztrácelo
   na krémovém podkladu kontrast.

   ⚠️ Celá rodina je SELF-HOSTOVANÁ. CSP jádra cizí doménu nepustí
      a načítání z Googlu posílá IP návštěvníka třetí straně.
   ⚠️ `latin-ext` nese českou diakritiku, `latin` zbytek — oba podsoubory
      musí být deklarované, jinak se „ě š č ř ž ů" vykreslí náhradním
      systémovým písmem a text uprostřed slova změní tvar.
   ⚠️ Kurzíva existuje jen v řezu 400 (citát v hero, podpis u kontaktu,
      `<em>` v textu). Další řez kurzívy = další dva soubory SEM i do
      `public/assets/fonts/jost/`.

   Výměna rodiny je JEDNO MÍSTO: tenhle blok + tři tokeny `--font-*`
   v `site.css`. Nikde jinde se název písma neuvádí.
   ============================================================ */
@font-face{
    font-family:'Jost'; font-style:normal; font-weight:400; font-display:swap;
    src:url("../fonts/jost/jost-latin-ext-400-normal.woff2") format("woff2");
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
    font-family:'Jost'; font-style:normal; font-weight:400; font-display:swap;
    src:url("../fonts/jost/jost-latin-400-normal.woff2") format("woff2");
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
    font-family:'Jost'; font-style:normal; font-weight:500; font-display:swap;
    src:url("../fonts/jost/jost-latin-ext-500-normal.woff2") format("woff2");
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
    font-family:'Jost'; font-style:normal; font-weight:500; font-display:swap;
    src:url("../fonts/jost/jost-latin-500-normal.woff2") format("woff2");
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
    font-family:'Jost'; font-style:normal; font-weight:600; font-display:swap;
    src:url("../fonts/jost/jost-latin-ext-600-normal.woff2") format("woff2");
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
    font-family:'Jost'; font-style:normal; font-weight:600; font-display:swap;
    src:url("../fonts/jost/jost-latin-600-normal.woff2") format("woff2");
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Řez 700 je tu kvůli <strong> z editoru. Bez něj by prohlížeč sáhl
   po nejbližším nižším (600) a tučné slovo ve větě by se od okolí
   skoro nelišilo. */
@font-face{
    font-family:'Jost'; font-style:normal; font-weight:700; font-display:swap;
    src:url("../fonts/jost/jost-latin-ext-700-normal.woff2") format("woff2");
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
    font-family:'Jost'; font-style:normal; font-weight:700; font-display:swap;
    src:url("../fonts/jost/jost-latin-700-normal.woff2") format("woff2");
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
    font-family:'Jost'; font-style:italic; font-weight:400; font-display:swap;
    src:url("../fonts/jost/jost-latin-ext-400-italic.woff2") format("woff2");
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
    font-family:'Jost'; font-style:italic; font-weight:400; font-display:swap;
    src:url("../fonts/jost/jost-latin-400-italic.woff2") format("woff2");
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ── Spectral: POUZE NADPISY (`--font-display`). ──────────────────────
   Běžný text, menu a tlačítka zůstávají v bezpatkovém Jostu; patkové
   písmo tu dělá jen nadpisy. Proto jen dva řezy a žádná kurzíva —
   `h1`–`h4` jiný řez nepoužívají a každý další je dva soubory k přenosu.
   ⚠️ Řez 300 a 400 se ZÁMĚRNĚ nedeklaruje: právě v nich Spectral na
      krémovém podkladu „zmizel" (výtka „všechno je nevýrazné").
   ⚠️ Soubory leží v `public/assets/fonts/spectral/` a ta složka MUSÍ být
      nárokovaná v `moduly-webu.php`, jinak spadne do jádra.
   ──────────────────────────────────────────────────────────────────── */
@font-face{
    font-family:'Spectral'; font-style:normal; font-weight:500; font-display:swap;
    src:url("../fonts/spectral/spectral-latin-ext-500-normal.woff2") format("woff2");
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
    font-family:'Spectral'; font-style:normal; font-weight:500; font-display:swap;
    src:url("../fonts/spectral/spectral-latin-500-normal.woff2") format("woff2");
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
    font-family:'Spectral'; font-style:normal; font-weight:600; font-display:swap;
    src:url("../fonts/spectral/spectral-latin-ext-600-normal.woff2") format("woff2");
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
    font-family:'Spectral'; font-style:normal; font-weight:600; font-display:swap;
    src:url("../fonts/spectral/spectral-latin-600-normal.woff2") format("woff2");
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}


/* ============================================================
   2  ZÁKLAD A TYPOGRAFIE
   ============================================================ */
body{
    font-family:var(--font-sans);
    font-weight:400;
    font-size:17px;
    line-height:1.75;
    color:var(--c-ink-soft);
    background:var(--c-bg);
    /* Dlouhá slova (e-mail, adresa) nesmí přispět do min-content mřížky. */
    overflow-wrap:anywhere;
}
/* Plošná pojistka proti rozjetí layoutu jedním velkým obrázkem. */
img,svg,video,canvas{max-width:100%;}

/* 🔴 `responsive_img()` z jádra balí každou fotku do `<picture>`, a to je
      ve výchozím stavu `inline` — pod obrázkem vzniká mezera účaří a `height:100%`
      na vnitřním `<img>` nemá k čemu se vztáhnout. Rozměry se nastavují na
      `<img>`, takže obal musí být průhledný pro layout. */
picture{display:block; height:100%;}

h1,h2,h3,h4{
    font-family:var(--font-display);
    color:var(--c-ink);
    /* 🔴 Patkové písmo prostrkání NESNÁŠÍ tak jako bezpatkové: Spectral má
          vlastní rytmus daný patkami a stažení k sobě mu slepí dříky.
          U Jostu tu bylo -0.005em, u Spectralu 0. */
    letter-spacing:0;
}
/* 🔴 U patkového Spectralu byl řez 300 elegantní. Jost je geometrický
      a ve 300 na krémovém podkladu „zmizí" — tenké tahy ztratí hmotu
      a nadpis působí jako šedý obláček. 400 drží stejnou vzdušnost
      a nadpis je vidět. (Výtka zadavatele „všechno je nevýrazné".) */
/* ⚠️ 500, ne 400. Spectral je textové písmo — ve 400 je navržený na
      odstavec o velikosti 17 px, ne na nadpis o 62. Ve velké velikosti
      pak působí jako zvětšený běžný text, ne jako nadpis. Malé nadpisy
      (`h3`/`h4`) jsou blíž velikosti textu, takže jim 500 stačí;
      `h1`/`h2` dostaly 600, aby proti 17px Jostu obstály hmotou. */
h1,h2{font-weight:600;}
h3,h4{font-weight:500;}
h1{font-size:clamp(34px,4.6vw,62px); line-height:1.14;}
h2{font-size:clamp(28px,3.4vw,44px); line-height:1.2;}
h3{font-size:clamp(19px,1.7vw,24px); line-height:1.3;}
h4{font-size:clamp(17px,1.4vw,20px); line-height:1.35;}

a{color:var(--c-secondary);}
a:hover{color:var(--c-secondary-2);}

::selection{background:var(--c-gold-light); color:var(--c-ink);}

/* Viditelný fokus pro klávesnici — web se neovládá jen myší. */
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,summary:focus-visible{
    outline:2px solid var(--c-secondary);
    outline-offset:3px;
}

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


/* ============================================================
   3  KONTEJNER A SEKCE
   ============================================================ */
.vk-wrap{
    width:100%;
    max-width:var(--container);
    margin-inline:auto;
    padding-inline:var(--gutter);
}
/* Užší sloupec pro souvislý text (čitelná délka řádku).
   🔴 Omezuje se ŠÍŘKA OBSAHU, ne kontejner. Dokud se zužoval kontejner
      (`max-width:820px` na `.vk-wrap--uzky`), byl text vycentrovaný na
      střed obrazovky a začínal na 414 px, zatímco mřížka, kontaktní blok
      i patička začínají na 184 px. Levý okraj stránky tím mezi sekcemi
      uhýbal do strany — na `/dodavatele` stály dva nadpisy pod sebou
      s rozdílem 230 px. Teď má celý web jednu levou hranu. */
.vk-wrap--uzky > *{max-width:820px;}

/* Plná sekce (mřížka, kontaktní blok, bloky úvodní stránky).
   🔴 120 px byl rytmus z předlohy, ale mezi DVĚMA takovými sekcemi se sčítá:
      naměřeno **240 px prázdna** mezi obsahem dvou sekcí na úvodní stránce
      a 248 px pod „Naše filozofie". Na 1440 px je to přes čtvrtinu okna, ve
      které není nic — zadavatel 15. 10. 2026: „je to takové suché".
      Krok dolů po stejné škále: 80 px → 160 px mezi obsahem. */
.vk-section{padding-block:var(--space-9);}
/* 🔴 Textová sekce má typicky nadpis a dva řádky (naměřeno 144 px obsahu).
      S 80 px nahoře i dole kolem ní bylo 160 px prázdna — víc než samotný
      text — a stránka „O nás“ vypadala jako pět samostatných plakátů místo
      jednoho souvislého textu. Krok dolů po stejné škále: 64 px → 128 px
      mezi pruhy. */
.vk-section--mensi{padding-block:var(--space-8);}
.vk-section--cream{background:var(--c-cream);}
.vk-section--tmava{background:var(--c-very-dark); color:#E9E1D6;}
.vk-section--tmava h1,
.vk-section--tmava h2,
.vk-section--tmava h3{color:#F6F0E6;}


/* ============================================================
   4  DROBNÉ KOMPONENTY
   ============================================================ */

/* Štítek nad nadpisem sekce — „NAŠE FILOZOFIE". */
/* Štítek nad nadpisem. Měděná linka před textem je JEDINÝ opakovaný
   značkový detail na webu — drží pohromadě úvodní stránku, podstránky
   i záhlaví a bez ní působily sekce jako holý text na krému
   (zadavatel 15. 10. 2026: „je to takové suché"). */
.vk-eyebrow{
    display:flex; align-items:center; gap:var(--space-3);
    margin:0 0 var(--space-5);
    font-size:12px;
    font-weight:500;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--c-muted);
}
.vk-eyebrow::before{
    content:'';
    /* `flex:none` je povinné: bez něj se linka ve flexu smrskne na nulu,
       jakmile má text málo místa. */
    flex:none; width:28px; height:2px;
    background:var(--c-secondary);
}
/* Na tmavém podkladu je #9A4E2C skoro černá — linka by zmizela. */
.vk-section--tmava .vk-eyebrow::before,
.vk-pas .vk-eyebrow::before,
.vk-hero .vk-eyebrow::before{background:#C9794E;}
/* V zásuvce je „Menu" popisek ovládání, ne štítek sekce. */
.vk-drawer .vk-eyebrow::before{display:none;}
/* 🔴 Každý tmavý podklad musí být v tomhle výčtu — stejná past jako
      u `.vk-link` níž. `.vk-pas` tu chybělo a štítek „ATMOSFÉRA, KTERÁ
      ZŮSTÁVÁ" měl na tmavém pásu 4,33 : 1 (tlumená šedá z `--c-muted`
      určená pro světlé pozadí). Nový tmavý blok = nový řádek sem. */
.vk-section--tmava .vk-eyebrow,
.vk-pas .vk-eyebrow{color:#CFC3B2;}

/* Odkaz s podtržením a šipkou. Šipka je inline SVG, ne znak ani emoji —
   znak „→" má v Spectralu jinou výšku než text a visel by nad účařím. */
/* 🔴 Podtržení bylo `--c-line` (#E2D9CB) — na krémovém podkladu prakticky
      neviditelné, takže odkaz vypadal jako obyčejný text a nebylo poznat,
      že se dá kliknout. Teď je linka 2 px v barvě textu a při najetí
      zčervená do měděné. Řez 500 kvůli tomu, že Jost je v 400 subtilnější
      než patkový Spectral. */
.vk-link{
    display:inline-flex;
    align-items:center;
    gap:var(--space-3);
    padding-bottom:6px;
    border-bottom:2px solid var(--c-muted);
    font-size:16px;
    font-weight:500;
    color:var(--c-ink);
    text-decoration:none;
    transition:color .2s var(--ease), border-color .2s var(--ease);
}
.vk-link svg{
    display:block; width:18px; height:10px; flex:none;
    transition:transform .2s var(--ease);
}
.vk-link:hover{color:var(--c-secondary); border-color:var(--c-secondary);}
.vk-link:hover svg{transform:translateX(5px);}
/* 🔴 Každý tmavý podklad musí být v tomhle výčtu. `.vk-pas` tu chybělo
      a odkaz „Nechte se inspirovat" byl tmavý na tmavém — čitelný jen
      po najetí myší. Nový tmavý blok = nový řádek sem. */
.vk-section--tmava .vk-link,
.vk-pas .vk-link,
.vk-hero .vk-link{color:#F6F0E6; border-color:rgba(246,240,230,.45);}
.vk-section--tmava .vk-link:hover,
.vk-pas .vk-link:hover,
.vk-hero .vk-link:hover{color:#fff; border-color:#fff;}

/* Tlačítko dědí z `.btn` v site.css; tady jen pevná výška z tokenu,
   aby měla stejná třída všude stejný rozměr. */
/* 🔴 V `site.css` si velikost tlačítek přehazuje šest bloků z různých webů
      a vyhrává ten poslední: `.btn{font-size:11px; letter-spacing:.24em}`.
      Naměřeno 11 px na hlavní výzvě „Nezávazná poptávka" — verzálky
      s prostrkáním 0,24 em v jedenácti pixelech jsou na hranici čitelnosti
      a tlačítko působí jako drobná poznámka, ne jako akce.
      🔴 `.btn-lg` z téhož souboru NEFUNGOVALO: má stejnou specificitu
         (0,1,0) a stojí o 3 000 řádků VÝŠ, takže ho `.btn` přebilo —
         „velké" tlačítko bylo stejně malé jako běžné.
      Značková vrstva se načítá poslední, takže se to srovná tady. */
.btn{
    min-height:var(--ctl-h);
    font-size:13px;
    letter-spacing:0.14em;
}
.btn-lg{min-height:52px; font-size:14px; padding:18px 38px;}


/* ============================================================
   5  HLAVIČKA A MOBILNÍ ZÁSUVKA
   ============================================================ */
.vk-header{
    position:sticky; top:0; z-index:50;
    background:var(--c-bg);
    border-bottom:1px solid var(--c-line);
    transition:background .3s var(--ease), border-color .3s var(--ease);
}
/* Na úvodní stránce leží hlavička na fotce. Třídu dává `main.php`. */
.vk-header--pres-hero{
    position:fixed; left:0; right:0;
    background:transparent;
    border-bottom-color:transparent;
}
.vk-header--pres-hero .vk-nav a,
.vk-header--pres-hero .vk-brand__text,
.vk-header--pres-hero .vk-burger{color:#F6F0E6;}
/* Po odrolování se i na úvodce zaplní, jinak by menu zmizelo v obsahu.
   Třídu přepíná `vasekrby.js` podle polohy, ne breakpointem. */
.vk-header--pres-hero.is-prilepena{
    background:var(--c-bg);
    border-bottom-color:var(--c-line);
}
.vk-header--pres-hero.is-prilepena .vk-nav a,
.vk-header--pres-hero.is-prilepena .vk-brand__text,
.vk-header--pres-hero.is-prilepena .vk-burger{color:var(--c-ink);}

.vk-header__inner{
    display:flex;
    align-items:center;
    gap:var(--space-6);
    min-height:var(--header-h);
}

/* 🔴 Zmenšuje se navigace, nikdy logo ani tlačítko. */
.vk-brand{display:flex; align-items:center; gap:var(--space-3); flex:none; text-decoration:none;}
.vk-brand__logo{display:block; height:46px; width:auto;}
.vk-brand__text{
    font-size:18px; font-weight:500; letter-spacing:0.16em;
    text-transform:uppercase; color:var(--c-ink); line-height:1.1;
}
.vk-brand__sub{
    display:block; margin-top:4px;
    font-size:10px; letter-spacing:0.28em; text-transform:uppercase;
    color:var(--c-muted); font-weight:400;
}

.vk-nav{flex:1 1 auto; min-width:0;}
.vk-nav ul{
    display:flex; flex-wrap:wrap; justify-content:center;
    gap:var(--space-6); list-style:none; margin:0; padding:0;
}
/* 🔴 Menu bylo „nevidět" (výtka zadavatele). Tři příčiny naráz:
      patkové písmo 15/400 na krémovém podkladu, podtržení jen 1 px
      v barvě textu a hover, který měnil jen odstín. Teď je menu
      o stupeň větší, v řezu 500 a podtržení je 2 px. */
.vk-nav a{
    display:inline-flex; align-items:center;
    font-size:16px; font-weight:500; color:var(--c-ink); text-decoration:none;
    padding-block:8px;
    border-bottom:2px solid transparent;
    transition:color .2s var(--ease), border-color .2s var(--ease);
}
.vk-nav a:hover{color:var(--c-secondary); border-bottom-color:currentColor;}
/* Aktivní položka se pozná i bez barvy — podtržení je plné, ne průhledné.
   (Stav nikdy jen barvou: barvoslepý uživatel by rozdíl neviděl.) */
.vk-nav a[aria-current="page"]{
    color:var(--c-secondary-2);
    border-bottom-color:var(--c-secondary);
}

.vk-header__akce{display:flex; align-items:center; gap:var(--space-4); flex:none;}

.vk-burger{
    display:none;
    align-items:center; justify-content:center;
    width:44px; height:44px;
    padding:0; border:0; background:none; color:var(--c-ink); cursor:pointer;
}
.vk-burger svg{display:block; width:22px; height:22px;}

/* Zásuvka */
.vk-scrim{
    position:fixed; inset:0; z-index:60;
    background:rgba(36,30,24,.55);
    opacity:0; pointer-events:none;
    transition:opacity .3s var(--ease);
}
.vk-scrim[data-open="1"]{opacity:1; pointer-events:auto;}
.vk-scrim[hidden]{display:none;}

.vk-drawer{
    position:fixed; top:0; right:0; bottom:0; z-index:61;
    width:min(360px,86vw);
    display:flex; flex-direction:column; gap:var(--space-5);
    padding:var(--space-5) var(--space-5) var(--space-7);
    background:var(--c-cream);
    transform:translateX(100%);
    transition:transform .3s var(--ease);
    overflow-y:auto;
    overscroll-behavior:contain;
    /* 🔴 Zavřená zásuvka nesmí chytat kliky přes celou pravou část obrazovky. */
    pointer-events:none;
}
.vk-drawer[data-open="1"]{transform:translateX(0); pointer-events:auto;}
.vk-drawer[hidden]{display:none;}
.vk-drawer__head{display:flex; align-items:center; justify-content:space-between;}
.vk-drawer nav{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-1);}
.vk-drawer nav a{
    display:flex; align-items:center;
    padding:var(--space-3) 0;
    font-size:18px; color:var(--c-ink); text-decoration:none;
    border-bottom:1px solid var(--c-line-soft);
}
.vk-drawer nav a:hover{color:var(--c-secondary);}


/* ============================================================
   6  HERO
   ============================================================ */
.vk-hero{
    position:relative;
    display:flex; align-items:center;
    min-height:min(92vh,860px);
    padding-block:calc(var(--header-h) + var(--space-9)) var(--space-9);
    color:#F6F0E6;
    overflow:hidden;
}
.vk-hero__foto{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover; object-position:center;
    z-index:0;
}
/* 🔴 Hero je pruh asi 2,8:1, fotky realizací jsou 4:3 — `cover` ukáže jen
      vodorovný výsek. Kde ten výsek leží, volí redaktor v sekci; bez toho
      by se u každé druhé fotky ořízlo to podstatné. */
.vk-hero__foto--nahore{object-position:center top;}
.vk-hero__foto--stred{object-position:center center;}
.vk-hero__foto--dole{object-position:center bottom;}
/* `<picture>` kolem hero fotky musí vyplnit sekci, ne jen obtékat obrázek. */
.vk-hero > picture{position:absolute; inset:0; z-index:0;}
/* Gradient zleva — text musí být čitelný i na světlé fotce.
   🔴 Měří se z VYKRESLENÝCH PIXELŮ, neodhaduje se z fotky. Původní hodnoty
      byly vyladěné na tmavou fotku realizace; po výměně za světlý interiér
      (14. 10. 2026) spadl podtitulek na 3,27 : 1 a štítek na 3,39 : 1 —
      v nejsvětlejších 5 % plochy pod textem, průměr vycházel ještě dobře.
      Proto se neměří průměr, ale nejsvětlejší místo pod každým prvkem. */
.vk-hero::after{
    content:''; position:absolute; inset:0; z-index:1;
    background:
        /* 1) Pruh pod hlavičkou. Navigace na úvodní stránce leží na fotce
              a vpravo, kde je šikmý gradient nejslabší, byla světlá na světlé
              stěně (3,63 : 1). Výška se váže na `--header-h`, aby pruh
              nepřerostl hlavičku, až se na užších šířkách zmenší. */
        linear-gradient(to bottom,
            rgba(28,22,16,.52) 0,
            rgba(28,22,16,.30) calc(var(--header-h) * .9),
            rgba(28,22,16,0)   calc(var(--header-h) * 1.7)),
        /* 2) Šikmý gradient pod text. Těžiště je posunuté doprava (42 %),
              aby pokrylo celou šířku `.vk-hero__obsah`; kamna leží až za
              70 % a zůstávají světlá. */
        linear-gradient(100deg,
            rgba(28,22,16,.88) 0%,
            rgba(28,22,16,.74) 42%,
            rgba(28,22,16,.26) 72%,
            rgba(28,22,16,.34) 100%);
}
.vk-hero > .vk-wrap{position:relative; z-index:2;}
.vk-hero__obsah{max-width:660px;}
.vk-hero .vk-eyebrow{color:#D8CCBB;}
.vk-hero h1{color:#FBF6EE; margin:0 0 var(--space-5);}
.vk-hero__lead{
    margin:0 0 var(--space-7);
    font-size:clamp(16px,1.4vw,19px);
    color:#E6DCCE;
    max-width:36em;
}

/* Svislé popisky po stranách — dekorace z předlohy. */
.vk-hero__svisle{
    position:absolute; z-index:2; top:50%;
    font-size:11px; letter-spacing:0.3em; text-transform:uppercase;
    color:rgba(246,240,230,.72);
    line-height:2.2;
}
.vk-hero__svisle--vlevo{left:var(--gutter); transform:translateY(-50%);}
.vk-hero__svisle--vpravo{right:var(--gutter); transform:translateY(-50%); text-align:right;}

.vk-hero__citat{
    position:absolute; z-index:2; right:var(--gutter); bottom:var(--space-7);
    max-width:260px; text-align:right;
    font-style:italic; font-size:15px; color:rgba(246,240,230,.82);
}

/* ── Hlavní výzva v hero ──────────────────────────────────────────────
   🔴 Byl to podtržený odkaz jako každý jiný. Na fotce přes celou obrazovku
      se ztratil: jediná akce úvodní stránky vypadala stejně jako odkaz
      „Více o nás" o tři sekce níž. Teď je to plná měděná plocha — stejná
      jako tlačítko „Nezávazná poptávka" v hlavičce, takže web má jednu
      podobu hlavní akce, ne dvě.
   ⚠️ Pořadí v souboru rozhoduje: `.vk-hero .vk-link` výš nastavuje světlý
      text a rámeček, obě pravidla mají specificitu (0,2,0). Tohle musí
      zůstat NÍŽ. */
.vk-hero .vk-cta{
    padding:15px 28px;
    min-height:52px;
    border:0;
    background:var(--c-secondary);
    /* #FFF na #9A4E2C = 6,4 : 1 — stejná dvojice jako u tlačítka v hlavičce. */
    color:#fff;
    font-size:15px; font-weight:600; letter-spacing:0.04em;
    transition:background .2s var(--ease);
}
.vk-hero .vk-cta:hover{background:var(--c-secondary-2); color:#fff; border:0;}
.vk-hero .vk-cta:focus-visible{outline:2px solid #F6F0E6; outline-offset:3px;}

/* ── Náznak, že stránka pokračuje ─────────────────────────────────────
   Tenká linka u spodní hrany s měděným bodem, který po ní pomalu sjíždí.
   ⚠️ Záměrně to NENÍ tlačítko ani odkaz: `pointer-events:none` a
      `aria-hidden`. Ovládací prvek, na který se nedá kliknout, je horší
      než žádný. */
.vk-hero__dolu{
    position:absolute; z-index:2; left:50%; bottom:var(--space-6);
    width:1px; height:56px;
    background:rgba(246,240,230,.3);
    transform:translateX(-50%);
    pointer-events:none;
    overflow:hidden;
}
.vk-hero__dolu::after{
    content:''; position:absolute; left:-2px; top:0;
    width:5px; height:5px; border-radius:50%;
    background:#C9794E;
}
@media (prefers-reduced-motion: no-preference){
    .vk-hero__dolu::after{animation:vk-dolu 2.6s var(--ease) infinite;}
    /* Pomalé dojetí přiblížené fotky. Začíná zvětšená a dosedá na 1 —
       opačný směr by na konci odhalil holý okraj. */
    .vk-hero__foto{animation:vk-hero-zoom 24s ease-out both;}
}
@keyframes vk-dolu{
    0%{transform:translateY(-6px); opacity:0;}
    25%{opacity:1;}
    75%{opacity:1;}
    100%{transform:translateY(56px); opacity:0;}
}
@keyframes vk-hero-zoom{
    from{transform:scale(1.06);}
    to{transform:scale(1);}
}


/* ============================================================
   7  ROZDĚLENÁ SEKCE (nadpis vlevo, text vpravo)
   ============================================================ */
.vk-split{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    gap:var(--space-8) var(--space-10);
    align-items:start;
}
.vk-split__nadpis{margin:0;}
.vk-split__text{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-5);}
.vk-split__text p{margin:0;}
.vk-split__text .vk-link{margin-top:var(--space-3); justify-self:start;}


/* ============================================================
   8  KARTY NABÍDKY
   ============================================================ */
.vk-karty{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
    gap:var(--space-7) var(--space-6);
    margin-top:var(--space-9);
}
.vk-karta{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-4);}
.vk-karta__foto{
    aspect-ratio:4/3;
    width:100%;
    object-fit:cover;
    object-position:center;
    background:var(--c-bg-soft);
}
.vk-karta h3{margin:0;}
.vk-karta p{margin:0; color:var(--c-ink-soft);}
.vk-karta .vk-link{justify-self:start; margin-top:var(--space-2);}

/* ── Mřížka obrázků ───────────────────────────────────────────
   Dvě podoby téhož gridu. 🔴 Liší se jen tím, co se smí s obrázkem
   stát: logo musí zůstat celé, scan dokumentu se ořezává na náhled. */
.vk-mrizka{
    display:grid;
    gap:var(--space-5);
    margin-top:var(--space-8);
}
/* 🔴 `align-content:start` je povinné. Mřížka nahoře srovná všechny položky
      na stejnou výšku (nejvyšší popisek), a kdyby se řádky uvnitř položky
      směly roztáhnout, rozdělí se přebytek mezi dlaždici a popisek — každá
      položka jinak podle délky svého popisku. Naměřeno: dlaždice 151 px
      u „Romotop" vs. 162 px u „Hein" v jednom řádku a nadpisy o 10 px
      přeskočené. Přebytek musí zůstat dole, ne v dlaždici. */
.vk-mrizka__polozka{
    display:grid; grid-template-columns:minmax(0,1fr);
    align-content:start;
    gap:var(--space-3); margin:0;
}
.vk-mrizka__popis{
    display:grid; gap:2px;
    font-size:14px; line-height:1.5; color:var(--c-muted);
}
.vk-mrizka__popis strong{font-weight:500; color:var(--c-ink-soft);}

/* Loga: dlaždice pevného poměru, logo se do ní vejde celé.
   ⚠️ Podklad je světlý úmyslně — část log přišla jako JPEG na bílé
   a na krémovém pozadí stránky by měla viditelný obdélník. */
.vk-mrizka--loga{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));}
.vk-mrizka--loga .vk-mrizka__obrazek{
    aspect-ratio:3/2;
    width:100%;
    object-fit:contain;
    background:#FFFFFF;
    border:1px solid var(--c-line);
    padding:var(--space-4);
}
.vk-mrizka--loga .vk-mrizka__popis{text-align:center;}

/* Dokumenty: náhled na výšku (scany jsou A4), plná velikost v rámu. */
.vk-mrizka--dokumenty{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));}
.vk-mrizka--dokumenty a{display:block; text-decoration:none;}
.vk-mrizka--dokumenty .vk-mrizka__obrazek{
    aspect-ratio:3/4;
    width:100%;
    object-fit:cover;
    object-position:center top;
    background:#FFFFFF;
    border:1px solid var(--c-line);
    transition:border-color .2s var(--ease), opacity .2s var(--ease);
}
.vk-mrizka--dokumenty a:hover .vk-mrizka__obrazek,
.vk-mrizka--dokumenty a:focus-visible .vk-mrizka__obrazek{
    border-color:var(--c-secondary);
    opacity:.92;
}

/* 🔴 `picture` je blokový obal nad `img` — bez toho si bere výšku řádku
      a `aspect-ratio` obrázku uvnitř se pak počítá z jiné šířky.
      `height:auto` ruší `height:100%` ze základu (kap. 2), které je kvůli
      hero fotce; tady by z obalu udělalo roztahovací položku mřížky.
      `img` musí být blokový taky, jinak pod ním zůstane ~10 px mezery
      účaří a dlaždice je vyšší než její `aspect-ratio`. */
.vk-mrizka__polozka picture{display:block; height:auto;}
.vk-mrizka__obrazek{display:block;}


/* ============================================================
   9  ATMOSFÉRICKÝ PÁS (fotka vlevo, text vpravo na tmavé)
   ============================================================ */
.vk-pas{background:var(--c-very-dark); color:#E9E1D6;}
.vk-pas__mrizka{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:center;
}
/* 🔴 Výšku pásu určuje TEXT, nikdy fotka.
      `responsive_img()` dává obrázku atributy `width`/`height` podle originálu,
      takže `width: 100%` + `height: 100%` v buňce s automatickou výškou spadne
      zpátky na vlastní poměr obrázku. U fotky na výšku (669×1024) z toho byl
      pás vysoký 1458 px místo 477 — a nikde to nehlásilo chybu.
      Obrázek je proto vytržený z toku (`absolute`) a výšku buňky neovlivní. */
.vk-pas__mrizka > picture{
    position:relative;
    align-self:stretch;
    min-height:420px;
    overflow:hidden;
}
.vk-pas__foto{
    position:absolute; inset:0;
    width:100%; height:100%;
    min-height:0;
    object-fit:cover; object-position:center;
}
.vk-pas__text{padding:var(--space-9) clamp(var(--gutter),5vw,var(--space-9));}
.vk-pas__text h2{color:#F6F0E6; margin:0 0 var(--space-5);}
.vk-pas__text p{margin:0 0 var(--space-7); color:#CFC3B4; max-width:40em;}


/* ============================================================
   10  REALIZACE
   ============================================================ */
.vk-realizace__hlava{
    display:flex; flex-wrap:wrap; align-items:flex-end;
    justify-content:space-between; gap:var(--space-5);
}
.vk-realizace__hlava h2{margin:0;}

.vk-realizace__mrizka{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));
    gap:var(--space-7) var(--space-6);
}
/* 🔴 Odstup od nadpisu NAD mřížkou — jen když nad ní opravdu něco je.
      Na `/realizace` je mřížka jediný obsah sekce, takže se těch 64 px
      sčítalo s výplní sekce i s výplní filtru nad ní: naměřeno 192 px
      prázdna mezi filtrem a první fotkou (zadavatel to 15. 10. 2026
      zakroužkoval červeně). `:first-child` to vyřeší bez výjimky
      v šabloně.
   ⚠️ Přepis v media query MUSÍ mít stejný selektor, jinak ho základní
      pravidlo (0,2,0) přebije a na mobilu zůstane 64 px. */
.vk-realizace__mrizka:not(:first-child){margin-top:var(--space-8);}
/* Filtr a mřížka k sobě patří — mezi nimi je menší odstup než mezi
   nesouvisejícími bloky. 48 px stačí na to, aby se řádek filtru nepletl
   s první řadou fotek. */
.vk-filtr + .vk-realizace__mrizka{margin-top:var(--space-7);}
/* Tři a více v řadě na výpisu všech realizací. */
.vk-realizace__mrizka--husta{
    grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
}

.vk-realizace-karta{
    display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-4);
    text-decoration:none; color:inherit;
}
.vk-realizace-karta__obal{overflow:hidden; background:var(--c-bg-soft);}
.vk-realizace-karta__foto{
    aspect-ratio:3/2; width:100%;
    object-fit:cover; object-position:center;
    transition:transform .5s var(--ease);
}
.vk-realizace-karta:hover .vk-realizace-karta__foto{transform:scale(1.04);}
.vk-realizace-karta h3{margin:0; font-size:clamp(18px,1.5vw,21px);}
.vk-realizace-karta:hover h3{color:var(--c-secondary);}
.vk-realizace-karta__misto{
    display:flex; align-items:center; gap:var(--space-2);
    margin:0; font-size:14px; color:var(--c-muted);
}
.vk-realizace-karta__misto::before{
    content:''; width:16px; height:1px; flex:none; background:var(--c-muted);
}

/* Filtr podle typu stavby na výpisu realizací */
.vk-filtr{display:flex; flex-wrap:wrap; gap:var(--space-3);}
.vk-filtr__polozka{
    display:inline-flex; align-items:center; gap:var(--space-2);
    min-height:var(--ctl-h);
    padding:0 var(--space-5);
    border:1px solid var(--c-line);
    font-size:15px; color:var(--c-ink); text-decoration:none;
    transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
/* Při najetí se položka i podbarví — samotná změna odstínu rámečku
   a písma se na krémovém podkladu skoro neprojeví. */
.vk-filtr__polozka:hover{
    border-color:var(--c-secondary);
    color:var(--c-secondary-2);
    background:rgba(154,78,44,.08);
}
/* Stav nikdy jen barvou — aktivní položka má i plnou výplň a silnější rámeček. */
.vk-filtr__polozka.is-aktivni{
    background:var(--c-ink); border-color:var(--c-ink); color:#F6F0E6;
}
.vk-filtr__pocet{font-size:13px; color:var(--c-muted);}
.vk-filtr__polozka.is-aktivni .vk-filtr__pocet{color:#C9BCAA;}

/* Zpětný odkaz nad nadpisem detailu — šipka míří doleva. */
.vk-zpet{margin:0 0 var(--space-5);}
.vk-link--zpet svg{transform:scaleX(-1);}
.vk-link--zpet:hover svg{transform:scaleX(-1) translateX(5px);}

/* Podpis v kontaktním bloku */
.vk-kontakt__podpis{
    margin:var(--space-6) 0 0;
    font-style:italic; color:var(--c-muted);
}

/* Detail realizace — galerie fotek */
.vk-galerie{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
    gap:var(--space-4);
    margin-top:var(--space-7);
}
.vk-galerie a{display:block; overflow:hidden; background:var(--c-bg-soft);}
.vk-galerie img{
    aspect-ratio:3/2; width:100%;
    object-fit:cover; object-position:center;
    transition:transform .5s var(--ease);
}
.vk-galerie a:hover img{transform:scale(1.05);}


/* ============================================================
   11  KONTAKTNÍ BLOK
   ============================================================ */
.vk-kontakt{position:relative; background:var(--c-cream); overflow:hidden;}
.vk-kontakt__mrizka{
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    gap:var(--space-8) var(--space-10);
    align-items:start;
}
.vk-kontakt h2{margin:0 0 var(--space-5);}
.vk-kontakt__lead{margin:0 0 var(--space-7); max-width:42em;}

.vk-kontakt__udaje{margin:0; padding:0; list-style:none;
    display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-4);}
.vk-kontakt__udaje li{
    display:flex; align-items:flex-start; gap:var(--space-3);
    font-size:16px;
}
/* 🔴 Ikona se zarovnává výškou řádku, ne odhadnutým odsazením shora —
      konstanta by seděla jen při té velikosti písma, u které vznikla. */
.vk-kontakt__udaje svg{
    display:block; width:18px; height:1.6em; flex:none; color:var(--c-secondary);
}
.vk-kontakt__udaje a{color:var(--c-ink); text-decoration:none;}
.vk-kontakt__udaje a:hover{color:var(--c-secondary);}


/* ============================================================
   12  PATIČKA
   ============================================================ */
.vk-footer{
    border-top:1px solid var(--c-line);
    background:var(--c-bg);
    padding-block:var(--space-6);
    font-size:14px;
    color:var(--c-muted);
}
.vk-footer__inner{
    display:flex; flex-wrap:wrap; align-items:center;
    justify-content:space-between; gap:var(--space-4) var(--space-6);
}
.vk-footer__znacka{display:flex; align-items:center; gap:var(--space-3);}
.vk-footer__znacka img{display:block; height:30px; width:auto;}
.vk-footer nav{display:flex; flex-wrap:wrap; gap:var(--space-5);}
.vk-footer nav a{color:var(--c-muted); text-decoration:none;}
.vk-footer nav a:hover{color:var(--c-secondary);}

/* Kontaktní údaje v patičce — zapínají se ve stavebnici (sekce „Patička
   Vaše krby"), takže se na části webů nevykreslí vůbec.
   ⚠️ Ikona má výšku odvozenou od řádku, ne odhadnutou konstantu — stejně
      jako v kontaktním bloku. Konstanta by seděla jen při té velikosti
      písma, u které vznikla, a patička má písmo menší než blok. */
.vk-footer__udaje{
    margin:0; padding:0; list-style:none;
    display:flex; flex-wrap:wrap; gap:var(--space-3) var(--space-5);
}
.vk-footer__udaje li{display:flex; align-items:center; gap:var(--space-2);}
.vk-footer__udaje svg{
    display:block; width:16px; height:1.5em; flex:none; color:var(--c-secondary);
}
.vk-footer__udaje a{color:var(--c-muted); text-decoration:none;}
.vk-footer__udaje a:hover{color:var(--c-secondary);}


/* ============================================================
   12b  PROHLÍŽEČ FOTEK (Swiper)
   Staví ho `vasekrby.js` při prvním otevření galerie; bez
   JavaScriptu se místo něj otevře fotka v plné velikosti jako
   obyčejný odkaz.

   🔴 Listuje SWIPER, ne vlastní kód — tažení prstem i myší je
      povinnost (skill `web-slidery-carousel`). Do 15. 10. 2026
      tu byl holý `<img>` se šipkami, což zadavatel vrátil.
   ============================================================ */
.vk-lightbox{
    position:fixed; inset:0;
    /* 🔴 Nad VŠÍM: hlavička má 50, závoj zásuvky 60, zásuvka 61.
          Otevřená fotka je modální okno — dokud svítí, patří jí
          celá obrazovka. Rezerva do stovek je tu pro cookie lištu
          jádra, která se na jiných webech usazuje na 300. */
    z-index:400;
    /* Svislý sloupec: plocha Swiperu se roztáhne na zbytek a popisek
       s počítadlem leží POD ní. 🔴 Záměrně v toku, ne absolutně —
       fotka se pak omezuje výškou plochy (`max-height:100%` ze
       Swiperu) a nemusí se dopočítávat žádné `calc(100vh - …)`,
       které se při každé změně popisku rozjede. */
    display:flex; flex-direction:column;
    gap:var(--space-3);
    padding:var(--space-5);
    background:rgba(20,16,12,.94);
}
/* 🔴 Guard proti autorskému `display:flex`, který přebíjí UA stylesheet:
      bez něj by zavřený překryv neviditelně blokoval kliky na celé stránce. */
.vk-lightbox[hidden]{display:none;}

.vk-lightbox__swiper{
    /* `min-height:0` je podmínka toho, aby se plocha směla ZMENŠIT —
       bez něj flexbox drží výchozí `min-height:auto` podle obsahu
       a vysoká fotka vytlačí popisek pod okraj obrazovky. */
    flex:1 1 auto; min-height:0; width:100%;
}

/* 🔴 DVĚ TŘÍDY, NE JEDNA. `swiper-bundle.min.css` se stahuje až při
      prvním otevření, takže v `<head>` přistane AŽ ZA `vasekrby.css` —
      a při shodné specificitě vyhrává pozdější pravidlo. Jednotřídní
      `.vk-lightbox__snimek{display:flex}` by prohrálo se `.swiper-slide
      {display:block}` a fotka by se nalepila k levému okraji (naměřeno
      na kacenistromubaar.cz 10. 10. 2026: 48 px od kraje místo 518 na
      střed). `!important` sem nepatří — stačí sáhnout o třídu výš. */
.vk-lightbox .swiper-slide{
    display:flex; align-items:center; justify-content:center;
}
/* Tažení fotky nesmí spustit nativní drag & drop obrázku — Swiper by
   o gesto přišel a prohlížeč by začal fotku „přenášet". */
.vk-lightbox__foto{
    display:block;
    -webkit-user-drag:none; user-select:none;
    background:var(--c-ink);
}

.vk-lightbox__popis,
.vk-lightbox__pocitadlo{
    flex:0 0 auto; margin:0; text-align:center;
}
.vk-lightbox__popis{font-size:15px; color:#E4D9C8;}
.vk-lightbox__pocitadlo{
    font-size:13px; letter-spacing:.08em; color:#C9BCAA;
}
.vk-lightbox__popis[hidden],
.vk-lightbox__pocitadlo[hidden]{display:none;}

/* 🔴 OVLÁDÁNÍ MUSÍ MÍT `z-index`. Swiper dává `.swiper-wrapper`
      `z-index:1`, takže plocha se snímky přebije každé tlačítko, které
      leží uvnitř kontejneru a z-index nemá: jde fokusovat i přečíst,
      jen se do něj nedá trefit myší ani prstem — klik spadne na snímek
      a obslouží ho „klik mimo fotku", takže galerie se ZAVŘE místo
      přetočení (kacenistromubaar.cz, 9. 10. 2026). */
.vk-lightbox__zavrit,
.vk-lightbox__sip{
    position:absolute; z-index:3;
    display:inline-flex; align-items:center; justify-content:center;
    /* Dotykový cíl — 48 px je minimum pro ovládání na fotce. */
    width:48px; height:48px;
    padding:0; border:1px solid rgba(246,240,230,.3);
    /* Tmavé kolečko pod ikonou: fotka pod ovládáním může být světlá
       i tmavá, takže kontrast nesmí záležet na tom, co je za ní. */
    background:rgba(20,16,12,.55);
    color:#F6F0E6; cursor:pointer;
    transition:border-color .2s var(--ease), background .2s var(--ease);
}
.vk-lightbox__zavrit:hover,
.vk-lightbox__sip:hover{border-color:#F6F0E6; background:rgba(246,240,230,.18);}
.vk-lightbox__zavrit:focus-visible,
.vk-lightbox__sip:focus-visible{outline:2px solid #F6F0E6; outline-offset:2px;}
.vk-lightbox__zavrit svg,
.vk-lightbox__sip svg{display:block;}

.vk-lightbox__zavrit{top:var(--space-5); right:var(--space-5);}
.vk-lightbox__sip{top:50%; transform:translateY(-50%);}
.vk-lightbox__sip--zpet{left:0;}
.vk-lightbox__sip--vpred{right:0;}
/* Nedostupná šipka na kraji galerie — Swiper jí přidá vlastní třídu. */
.vk-lightbox .swiper-button-disabled{opacity:.35; pointer-events:none;}

@media (max-width: 599px){
    .vk-lightbox{padding:var(--space-4);}
    .vk-lightbox__zavrit{top:var(--space-4); right:var(--space-4);}
    .vk-lightbox__zavrit,
    .vk-lightbox__sip{width:44px; height:44px;}
}

@media (prefers-reduced-motion: reduce){
    .vk-lightbox__zavrit,
    .vk-lightbox__sip{transition:none;}
}


/* ============================================================
/* ============================================================
   12c  COOKIE LIŠTA
   Markup kreslí JÁDRO (`views/partials/cookie_lista.php`, třídy `jta-*`
   zděděné po sourozeneckém webu), chování `cookies.js`. Vzhled si ale
   jádro nenese — do 15. 10. 2026 na tyhle třídy neexistovalo ANI JEDNO
   pravidlo. Lišta se nevykreslovala jen proto, že web nic neměřil;
   po zapnutí GA4 by se objevila jako holý text s nativními tlačítky
   nalepený na spodek stránky.
   ============================================================ */
.jta-cookies{
    position:fixed; inset:auto 0 0 0;
    /* 🔴 Pod prohlížečem fotek (400), nad vším ostatním (hlavička 50,
          zásuvka 61). Kdyby byla výš, zakryla by na mobilu spodek
          zvětšené fotky i její ovládání. */
    z-index:300;
    padding:var(--space-5) var(--gutter);
    background:var(--c-cream);
    border-top:2px solid var(--c-secondary);
    box-shadow:0 -8px 28px rgba(42,35,24,.14);
}
/* Guard proti autorskému `display`, který by přebil atribut `hidden`. */
.jta-cookies[hidden]{display:none;}

.jta-cookies__panel{
    width:100%; max-width:var(--container); margin-inline:auto;
    display:grid; grid-template-columns:minmax(0,1fr) auto;
    align-items:center; gap:var(--space-5) var(--space-7);
}
.jta-cookies__hlavni{grid-column:1; min-width:0;}
.jta-cookies__nadpis{
    margin:0 0 var(--space-2);
    font-family:var(--font-display);
    font-size:19px; font-weight:600; color:var(--c-ink);
}
.jta-cookies__text{margin:0; font-size:15px; line-height:1.6; color:var(--c-ink-soft); max-width:62ch;}
.jta-cookies__odkaz-radek{margin:var(--space-2) 0 0;}
.jta-cookies__odkaz{font-size:14px; color:var(--c-secondary); text-decoration:underline; text-underline-offset:3px;}
.jta-cookies__odkaz:hover{color:var(--c-secondary-2);}

.jta-cookies__akce{
    grid-column:2; grid-row:1;
    display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3);
}

/* 🔴 OBĚ ROZHODNUTÍ MAJÍ STEJNOU VÁHU. „Jen nezbytné" nesmí být menší,
      světlejší ani schované pod „Nastavit podrobně" — souhlas, kde je
      odmítnutí nenápadnější, není platný (a je to i vymahatelná vada,
      ne jen doporučení). Proto mají obě tlačítka tentýž rozměr, řez
      i velikost písma; liší se jen barvou. */
.jta-cookies__btn{
    display:inline-flex; align-items:center; justify-content:center;
    min-height:48px; padding:12px 22px;
    border:2px solid var(--c-secondary);
    background:none; color:var(--c-ink);
    font-family:inherit; font-size:15px; font-weight:600; letter-spacing:.01em;
    line-height:1.2; cursor:pointer;
    transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.jta-cookies__btn:hover{background:rgba(154,78,44,.1);}
.jta-cookies__btn:focus-visible{outline:2px solid var(--c-ink); outline-offset:3px;}
/* #FFF na #9A4E2C = 6,4 : 1 — táž dvojice jako hlavní tlačítko webu. */
.jta-cookies__btn--hlavni{background:var(--c-secondary); color:#fff;}
.jta-cookies__btn--hlavni:hover{background:var(--c-secondary-2); border-color:var(--c-secondary-2);}
/* „Nastavit podrobně" NENÍ rozhodnutí o souhlasu — jen otevírá výběr,
   takže smí být tišší. */
.jta-cookies__btn--tichy{
    border-color:transparent; color:var(--c-ink-soft);
    font-weight:500; text-decoration:underline; text-underline-offset:4px;
    padding-inline:var(--space-3);
}
.jta-cookies__btn--tichy:hover{background:none; color:var(--c-secondary);}

/* „Uložit výběr" dává smysl jen s rozbalenými podrobnostmi.
   ⚠️ Skrývá ho CSS, ne JS — `cookies.js` s tímhle tlačítkem nehýbe.
      Prohlížeč bez `:has()` ho ukáže vždy; to je horší vzhled, ne chyba. */
.jta-cookies:not(:has([data-souhlas-podrobnosti]:not([hidden]))) .jta-cookies__btn--vyber{
    display:none;
}

/* ── Podrobný výběr ────────────────────────────────────────────── */
.jta-cookies__podrobnosti{
    grid-column:1 / -1; grid-row:2;
    display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
    gap:var(--space-4) var(--space-6);
    margin-top:var(--space-2);
    padding-top:var(--space-5);
    border-top:1px solid var(--c-line);
}
.jta-cookies__podrobnosti[hidden]{display:none;}
.jta-cookies__kategorie{min-width:0;}
.jta-cookies__prepinac{
    display:flex; align-items:center; gap:var(--space-3);
    min-height:44px; cursor:pointer;
}
.jta-cookies__prepinac input{width:20px; height:20px; flex:none; accent-color:var(--c-secondary); cursor:pointer;}
.jta-cookies__prepinac input:disabled{cursor:default;}
.jta-cookies__prepinac-nazev{font-size:15px; font-weight:500; color:var(--c-ink);}
.jta-cookies__vzdy{font-size:13px; color:var(--c-muted);}
.jta-cookies__popis{margin:0; font-size:14px; line-height:1.6; color:var(--c-ink-soft);}

@media (max-width:900px){
    /* Pod sebe: text, pak tlačítka přes celou šířku. Na úzkém displeji
       by se čtyři tlačítka vedle textu zmáčkla do nečitelných sloupců. */
    .jta-cookies__panel{grid-template-columns:minmax(0,1fr);}
    .jta-cookies__akce{grid-column:1; grid-row:2;}
    .jta-cookies__podrobnosti{grid-row:3;}
}
@media (max-width:560px){
    .jta-cookies{padding:var(--space-4) var(--gutter); max-height:85vh; overflow-y:auto;}
    .jta-cookies__akce{flex-direction:column; align-items:stretch;}
    .jta-cookies__btn{width:100%;}
}
@media (prefers-reduced-motion: reduce){
    .jta-cookies__btn{transition:none;}
}

   13  OBSAHOVÉ STRÁNKY
   Stránky ze stavebnice si vzhled nesou samy; tahle vrstva je pro
   jednoduché textové stránky (`.vk-prose`) a pro záhlaví podstránky.
   ============================================================ */
/* 🔴 Záhlaví podstránky bylo plochý krémový pruh s textem a linkou dole —
      proti hero úvodní stránky to vypadalo jako nedodělaná stránka.
      Tři věci, které to spraví, aniž by se cokoli měřitelného zhoršilo:
      1) podklad má SPÁD ze světlejšího krému do barvy stránky, takže
         přechod do obsahu není hrana, ale doznění,
      2) uvozující věta je o stupeň větší (stejná role jako `vk-hero__lead`),
      3) nahoře je víc vzduchu než dole — nadpis tím dostane místo,
         místo aby se mačkal pod hlavičkou. */
.vk-zahlavi{
    position:relative;
    padding-block:var(--space-8) var(--space-7);
    background:linear-gradient(180deg, var(--c-cream) 0%, var(--c-bg) 100%);
    border-bottom:1px solid var(--c-line-soft);
}
.vk-zahlavi h1{margin:0;}
.vk-zahlavi p{
    margin:var(--space-5) 0 0; max-width:44em;
    font-size:clamp(17px,1.4vw,19px);
    line-height:1.7;
    color:var(--c-ink-soft);
}
/* 🔴 Zpětný odkaz si nese vlastní okraje, ale `.vk-zahlavi p` (0,1,1) přebilo
      `.vk-zpet` (0,1,0) — a protože `.vk-zahlavi` stojí v souboru níž, prohrál
      zpětný odkaz i na pořadí. Naměřeno 0 px: „Zpět na realizace" sedělo
      nadpisu na hlavě. Řeší to dvojitá třída, ne `!important`. */
.vk-zahlavi .vk-zpet{margin:0 0 var(--space-5);}
/* ⚠️ Stejná past podruhé: `.vk-zahlavi p` (0,1,1) přebíjí i řádek
      „místo · rok" na detailu realizace (0,1,0) a nafoukl by metadata
      na velikost uvozující věty. Dvojitá třída, ne `!important`. */
.vk-zahlavi .vk-realizace-karta__misto{margin:0; font-size:14px;}

/* Popis realizace. Patří k nadpisu — dokud stál ve vlastní sekci, plaval
   jeden řádek textu v pruhu vysokém 206 px. */
.vk-zahlavi__popis{margin-top:var(--space-5); max-width:48em;}
.vk-zahlavi__popis p{margin:0;}
.vk-zahlavi__popis p + p{margin-top:var(--space-4);}

/* Nadpis textové sekce — mezera k textu pod ním je součást rytmu stránky. */
.vk-text__nadpis{margin:0 0 var(--space-6);}
/* Uvozující věta — o stupeň větší než text, stejnou roli má `vk-hero__lead`. */
.vk-text__lead{
    margin:0 0 var(--space-6);
    font-size:clamp(17px,1.5vw,20px);
    line-height:1.75;
    color:var(--c-ink-soft);
    max-width:36em;
}
.vk-eyebrow + .vk-text__nadpis{margin-top:0;}

/* 🔴 Rytmus textu dělá JEDINÉ pravidlo. Nulovat se smí jen spodní okraj —
      `p{margin:0}` má vyšší specificitu a mezery by tiše zmizely. */
.vk-prose > * + *{margin-top:var(--space-5);}
.vk-prose > :first-child{margin-top:0;}
.vk-prose p{margin-bottom:0;}
.vk-prose ul,.vk-prose ol{margin-bottom:0; padding-left:1.3em;}
.vk-prose li + li{margin-top:var(--space-2);}
.vk-prose h2{margin-top:var(--space-8);}
.vk-prose h3{margin-top:var(--space-6);}
.vk-prose img{margin-inline:auto;}
.vk-prose a{text-decoration:underline; text-underline-offset:3px;}
.vk-prose a.btn{text-decoration:none;}
.vk-prose table{border-collapse:collapse; width:100%;}
.vk-prose th,.vk-prose td{
    padding:var(--space-3) var(--space-4);
    border:1px solid var(--c-line);
    text-align:left; vertical-align:top;
}
.vk-prose th{background:var(--c-cream); font-weight:500;}


/* ============================================================
   13b  POPTÁVKOVÝ FORMULÁŘ (sekce stavebnice `contact_form`)

   Markup kreslí JÁDRO (`BuilderRenderer::renderContactForm()`) — honeypot,
   časová past, zaškrtávátko GDPR, reCAPTCHA i tlačítko. Hlášky pod poli
   kreslí `formular.js` a styluje jádrový `formular.css`.

   🔴 VZHLED POLÍ SI JÁDRO NENESE a říká to samo v komentáři u téhle
      metody. Do 25. 10. 2026 na `builder-contact-form`, `form-fields-grid`
      ani `form-field-width-*` neexistovalo ani jedno pravidlo — tatáž
      past jako cookie lišta 15. 10. 2026. Celá tahle kapitola je ten
      chybějící vzhled; hlášky se tu ZÁMĚRNĚ nestylují, ty patří jádru.
   ============================================================ */

/* 🔴 Obálku dává jádro jako `.builder-section` + `.section-inner.container`,
      ne `.vk-section` + `.vk-wrap`. Kdyby se nesrovnala, formulář by začínal
      na jiné levé hraně než sekce nad ním i pod ním (`.container` má
      `padding: 0 48px`, web má `--gutter: 24px`) a měl by jiný svislý rytmus
      (48 px proti 64). Levá hrana celého webu je jedna — srovnávalo se to
      14. 10. 2026 u `.vk-wrap--uzky` a platí to i tady. */
.section-contact_form{padding-block:var(--space-8);}
.section-contact_form > .section-inner.container{
    max-width:var(--container);
    padding-inline:var(--gutter);
}

/* Formulář je KRÉMOVÝ PANEL na základním pozadí, ne další krémový pruh.
   Sekce pod ním („Kde nás najdete") má `pozadi: krem`, takže krémová sekce
   formuláře by s ní splynula v jeden blok bez hranice. Panel navíc říká
   „tady se vyplňuje", což je u formuláře celý smysl.
   🔴 `max-width` je 820 px — tatáž čtecí míra jako `.vk-wrap--uzky > *`.
      Pole roztažené přes 1280 px se nevyplňuje o nic lépe, jen se k němu
      daleko míří očima od popisku. */
.builder-contact-form{
    max-width:820px;
    padding:var(--space-6);
    background:var(--c-cream);
    border:1px solid var(--c-line);
    border-top:3px solid var(--c-secondary);
}

/* Nadpis a popis sedí UVNITŘ formuláře (markup jádra je tak staví), ale
   rolí jsou to nadpis a uvozující věta sekce — drží proto typografii
   `.vk-text__nadpis` / `.vk-text__lead` ze sousedních sekcí. */
/* 🔴 RYTMUS FORMULÁŘE MÁ DVĚ HODNOTY, NE PĚT. Zadavatel 25. 10. 2026:
      „moc velké mezery, kompaktnější to udělali, ověř si, ať jsou stejné
      všude“. Původně tu stálo 48 (panel) / 16 (nadpis) / 32 (popis) /
      24 (mezi poli) / 32 (akce) — pokaždé jiná. Teď:
        · **16 px mezi poli** (`--space-4`), všude stejně,
        · **24 px mezi bloky** (`--space-5`): úvod → pole → odeslání,
        · 12 px nadpis → popis, 8 px popisek → vstup (patří k sobě).
      Víc hodnot do formuláře o čtyřech polích nepatří. */
.builder-contact-form .form-heading{margin:0 0 var(--space-3);}
.builder-contact-form .form-description{
    margin:0 0 var(--space-5);
    font-size:clamp(17px,1.5vw,20px);
    line-height:1.75;
    color:var(--c-ink-soft);
    max-width:36em;
}

/* ── Mřížka polí ──────────────────────────────────────────────────
   Dva sloupce; `half` zabere jeden, `full` oba.
   🔴 `minmax(0,1fr)`, nikdy holé `1fr` — jediné nezalomitelné slovo
      v popisku nebo dlouhý placeholder by jinak roztáhl celou stránku. */
.builder-contact-form .form-fields-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:var(--space-4);
}
.builder-contact-form .form-field-width-full{grid-column:1 / -1;}
/* ⚠️ Třetina na dvou sloupcích nemá kam — chová se jako polovina.
      Kdyby se v administraci nastavila, zůstane řádek celý, ne rozsypaný. */
.builder-contact-form .form-field-width-half,
.builder-contact-form .form-field-width-third{grid-column:span 1;}

/* Popisek nad polem, pole pod ním — jeden sloupec, ať se popisek
   nikdy neocitne vedle vstupu. `min-width:0` kvůli mřížce.
   🔴 `align-content:start` JE POVINNÉ. Dvě pole vedle sebe srovná mřížka
      na stejnou výšku (výchozí `stretch`) a ta výška se pak uvnitř skupiny
      rozdělí mezi její řádky — jenže u pole s nápovědou jsou řádky tři
      a u pole bez ní dva, takže KAŽDÉ dostane jiný přebytek. Naměřeno
      25. 10. 2026: „Jméno“ 62 px vedle „Telefonu“ 48 px, protože pod
      telefonem je věta o tom, že je nepovinný. Tatáž past jako u dlaždic
      log 14. 10. 2026 — výška položky se nesmí odvíjet od délky jejího
      popisku. */
.builder-contact-form .form-group{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    align-content:start;
    gap:var(--space-2);
    min-width:0;
    /* 🔴 `site.css` dává `.form-group{margin-bottom:20px}` a ten se SČÍTÁ
          s `gap` mřížky — naměřeno 36 px tam, kde měl být rytmus 16.
          Mezery v mřížce řídí `gap`, a to je jediný mechanismus; druhý
          vedle něj znamená, že se hodnota v CSS nikdy neshoduje s tím,
          co je na obrazovce. Nulovat se smí jen SPODNÍ okraj. */
    margin-bottom:0;
}
.builder-contact-form .form-group > label{
    font-size:14px;
    font-weight:500;
    letter-spacing:.01em;
    color:var(--c-ink);
    /* Totéž o patro níž: `site.css` má `.form-group label{margin-bottom:6px}`,
       takže popisek od pole dělilo 14 px místo 8. */
    margin-bottom:0;
}

/* ── Vstupní pole ─────────────────────────────────────────────────
   🔴 `:not([type=checkbox])` je povinné: zaškrtávátko GDPR je taky
      `input` uvnitř formuláře a `width:100%` by z něj udělalo pruh
      přes celou šířku panelu.
   🔴 `font-size:16px` není volba — pod 16 px iOS při kliknutí do pole
      stránku přiblíží a návštěvník dopisuje poptávku v zoomu. */
.builder-contact-form input:not([type="checkbox"]):not([type="hidden"]),
.builder-contact-form textarea,
.builder-contact-form select{
    width:100%;
    min-height:var(--ctl-h);
    padding:11px 14px;
    /* Pole musí mluvit písmem webu; bez `inherit` si prohlížeč sáhne
       po svém systémovém a formulář vypadá jako cizí vložka. */
    font-family:inherit;
    font-size:16px;
    line-height:1.5;
    color:var(--c-ink);
    background:var(--c-bg);
    /* 🔴 `--c-line` (#E2D9CB) NESTAČÍ. Na krémovém panelu má proti pozadí
          1,32 : 1 — naměřeno, ne odhadnuto —, zatímco ovládací prvek musí
          mít podle WCAG 1.4.11 aspoň 3 : 1. Pole pak nebylo poznat jako
          pole; rozdíl byl jen v odstínu výplně. `--c-muted` dá 5,2 : 1
          a je to týž token, kterým se 14. 10. 2026 srovnávaly popisky
          po výtce „je to takové všechno nevýrazné". */
    border:1px solid var(--c-muted);
    border-radius:var(--radius);
    transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.builder-contact-form textarea{
    min-height:150px;
    /* Svisle smí, vodorovně ne — tažením do šířky by uživatel rozhodil panel. */
    resize:vertical;
}
.builder-contact-form input::placeholder,
.builder-contact-form textarea::placeholder{color:var(--c-muted); opacity:1;}

.builder-contact-form input:not([type="checkbox"]):focus-visible,
.builder-contact-form textarea:focus-visible,
.builder-contact-form select:focus-visible{
    outline:none;
    border-color:var(--c-secondary);
    /* Rámeček navíc, ne jen barva: stav se nikdy nesmí hlásit pouze barvou. */
    box-shadow:0 0 0 3px rgba(154,78,44,.22);
}

/* Nápověda pod polem (např. u nepovinného telefonu). */
.builder-contact-form .form-help{
    margin:0;
    font-size:13px;
    line-height:1.5;
    color:var(--c-muted);
}

/* 🔴 SOUHLAS LEŽÍ MIMO MŘÍŽKU, takže `gap` se ho netýká — odstup mu dělal
      `margin-bottom` předchozí skupiny ze `site.css`, a ten je tu vynulovaný.
      Bez tohohle pravidla sedí zaškrtávátko natěsno na poli nad sebou
      (naměřeno 0 px). Hodnota je táž jako `gap` mřížky, aby rytmus
      pokračoval i tam, kde ho už nedrží mřížka.
   ⚠️ `:not(:first-child)` — kdyby formulář neměl žádné pole, margin by
      se přičetl k výplni panelu. */
.builder-contact-form > .form-group:not(:first-child){margin-top:var(--space-4);}

/* ── Souhlas se zpracováním údajů ─────────────────────────────────
   Zaškrtávátko vedle víceřádkového textu: `flex-start`, a protože text
   může mít dva řádky, srovnává se ikona na výšku prvního řádku, ne
   odhadnutou konstantou. */
.builder-contact-form .form-checkbox{
    display:flex;
    align-items:flex-start;
    gap:var(--space-3);
    /* Celý řádek je klikatelný cíl, proto rovnou dotyková výška. */
    min-height:44px;
    font-size:15px;
    line-height:1.6;
    color:var(--c-ink-soft);
    cursor:pointer;
}
.builder-contact-form .form-checkbox input[type="checkbox"]{
    flex:none;
    width:22px; height:22px;
    /* Zarovnání na účaří prvního řádku textu (1.6 × 15 px = 24 px). */
    margin-top:1px;
    accent-color:var(--c-secondary);
    cursor:pointer;
}
.builder-contact-form .form-checkbox a{
    color:var(--c-secondary);
    text-decoration:underline;
    text-underline-offset:3px;
}
.builder-contact-form .form-checkbox a:hover{color:var(--c-secondary-2);}

/* ── Odesílací řádek ──────────────────────────────────────────────
   Tlačítko dědí `.btn.btn-primary.btn-lg` z kapitoly 4 — nic se tu
   nepředefinovává, jen se mu dá odstup a zarovnání. */
.builder-contact-form .form-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--space-4);
    margin-top:var(--space-5);
}
.builder-contact-form .form-actions-align-center{justify-content:center;}
.builder-contact-form .form-actions-align-right{justify-content:flex-end;}
/* `.btn-block` z administrace znamená „přes celou šířku". */
.builder-contact-form .form-actions .btn-block{width:100%;}

/* Rozdělené rozložení (`layout: split` v administraci). Web ho dnes
   nepoužívá, ale bez tohohle pravidla by se sloupce vykreslily pod
   sebou — jádro na to v komentáři upozorňuje. */
.builder-contact-split{
    display:grid;
    grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
    gap:var(--space-7);
    align-items:start;
}


/* ============================================================
   14  RESPONZIVITA
   Breakpointy 1024 / 860 / 768 / 480. Mobil není zmenšený desktop —
   mění se pořadí, velikosti i to, co se vůbec zobrazí.
   ============================================================ */
@media (max-width:1200px){
    .vk-hero__svisle{display:none;}
}

@media (max-width:1024px){
    :root{--header-h:72px;}
    .vk-section{padding-block:var(--space-8);}
    .vk-section--mensi{padding-block:var(--space-7);}
    .vk-split{grid-template-columns:minmax(0,1fr); gap:var(--space-6);}
    .vk-pas__mrizka{grid-template-columns:minmax(0,1fr);}
    .vk-pas__foto{min-height:320px;}
    .vk-pas__text{padding:var(--space-8) var(--gutter);}
    .vk-kontakt__mrizka{grid-template-columns:minmax(0,1fr); gap:var(--space-7);}
    .vk-hero__citat{display:none;}
    /* Sekce formuláře drží rytmus `.vk-section` i tady — svislý krok
       se mění na témže breakpointu jako u ostatních sekcí. */
    .section-contact_form{padding-block:var(--space-7);}
    /* Dělené rozložení se srovná pod sebe dřív než mřížka polí: dva
       sloupce textu a formuláře se do 1024 px nevejdou čitelně. */
    .builder-contact-split{grid-template-columns:minmax(0,1fr); gap:var(--space-6);}
}

@media (max-width:860px){
    /* Navigace se stěhuje do zásuvky; tlačítko „poptávka" zůstává vidět. */
    .vk-nav{display:none;}
    .vk-burger{display:inline-flex;}
    .vk-header__inner{justify-content:space-between; gap:var(--space-4);}
}

@media (max-width:768px){
    body{font-size:16px;}
    .vk-section{padding-block:var(--space-7);}
    .section-contact_form{padding-block:var(--space-6);}
    /* 🔴 JEDEN SLOUPEC. Jméno a telefon vedle sebe mají na 390 px přes
          polovinu šířky každý — s popiskem nad polem se text popisku zalomí
          a řádek vyroste o patro. Formulář se na mobilu vyplňuje shora dolů. */
    /* Gap zůstává 16 px jako na desktopu — rytmus se mezi šířkami
       nemění, mění se jen počet sloupců. */
    .builder-contact-form .form-fields-grid{grid-template-columns:minmax(0,1fr);}
    .builder-contact-form .form-field-width-half,
    .builder-contact-form .form-field-width-third{grid-column:1 / -1;}
    /* Panel si na mobilu nemůže dovolit 48 px výplně na každé straně —
       z 390px displeje by zbylo na pole 258 px. */
    .builder-contact-form{padding:var(--space-5);}
    .vk-hero{min-height:auto; padding-block:calc(var(--header-h) + var(--space-8)) var(--space-8);}
    /* 🔴 Hero se tu smrskne na výšku obsahu, takže náznak rolování (56 px
          u spodní hrany) leží PŘES tlačítko — naměřeno na 390 px: náznak
          419–475 px, tlačítko 387–443 px. Na mobilu ho navíc nikdo nepotřebuje,
          rolování je tam samozřejmost. */
    .vk-hero__dolu{display:none;}
    .vk-karty{margin-top:var(--space-7); gap:var(--space-6);}
    .vk-realizace__mrizka:not(:first-child){margin-top:var(--space-6);}
    .vk-footer__inner{flex-direction:column; align-items:flex-start;}
    /* Dotykové cíle minimálně 44 px.
       🔴 Telefon a e-mail v kontaktním bloku tu chyběly a měly 28 px —
          přitom jsou to na mobilu jediné dvě věci, kterými se zákazník
          ozve (web nemá formulář). Filtr realizací měl 44 px jen náhodou
          přes `.vk-link`, vlastní třídu tu neměl. */
    .vk-drawer nav a,.vk-footer nav a,.vk-link,.vk-brand,.vk-footer__znacka,
    .vk-kontakt__udaje a,.vk-footer__udaje a,.vk-filtr__polozka{min-height:44px;}
    /* `.vk-filtr__polozka` je `inline-flex` už v základu, stačí mu výška. */
    .vk-footer nav a,.vk-link,.vk-kontakt__udaje a,
    .vk-footer__udaje a{display:inline-flex; align-items:center;}
    /* Ikona se pak musí srovnat na střed řádku, ne na jeho začátek. */
    .vk-kontakt__udaje li{align-items:center;}
}

@media (max-width:480px){
    :root{--gutter:18px;}
    .vk-brand__logo{height:38px;}
    .vk-brand__text{font-size:15px;}
    /* 🔴 Tlačítko z hlavičky jde pryč, ne jen zmenšit. Na 390 px ho
          vedle burgeru nejde doskládat — burger by vyjel mimo obrazovku
          a menu by se nedalo otevřít. V zásuvce tatáž výzva zůstává. */
    .vk-header__akce .btn{display:none;}
    .vk-drawer .btn{width:100%;}
    .vk-drawer nav a,.vk-footer nav a{min-height:48px;}

    /* 🔴 Dotykový cíl 48 px i tam, kde je obsah menší. Roste jen plocha
          odkazu, ne logo ani písmo — jinak by se rozpadla výška hlavičky.
          `.vk-link`, filtr realizací a kontaktní údaje tu chyběly a zůstávaly
          na 44 px z bloku ≤768; na 390 px je hranice 48 px (Apple HIG). */
    .vk-brand,.vk-footer__znacka,.vk-burger,.btn,
    .vk-link,.vk-filtr__polozka,.vk-kontakt__udaje a,
    .vk-footer__udaje a{min-height:48px;}
    .vk-burger{width:48px;}

    /* Pole a souhlas na dotykovou výšku. `.btn` ji má z výčtu výš. */
    .builder-contact-form input:not([type="checkbox"]):not([type="hidden"]),
    .builder-contact-form select{min-height:48px;}
    .builder-contact-form .form-checkbox{min-height:48px;}
    /* 🔴 Odesílací tlačítko přes celou šířku. Na 390 px je to poslední krok
          poptávky a cíl na půl šířky se na mobilu míjí palcem; `.btn` má
          navíc verzálky s prostrkáním, takže „Odeslat poptávku" by se
          v úzkém tlačítku zalomilo na dva řádky. */
    .builder-contact-form .form-actions{margin-top:var(--space-5);}
    .builder-contact-form .form-actions .btn{width:100%;}
}


/* ============================================================
   15  PRŮŘEZOVÉ BLOKY
   🔴 Patří NA KONEC souboru — při stejné specificitě vyhrává to,
      co je níž. Napsané výš by se tiše neuplatnily.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
    .vk-link svg,
    .vk-realizace-karta__foto,
    .vk-galerie img,
    .vk-drawer,
    .vk-scrim,
    .vk-header{transition:none;}
    .vk-realizace-karta:hover .vk-realizace-karta__foto,
    .vk-galerie a:hover img{transform:none;}
}

@media print{
    .vk-header,.vk-drawer,.vk-scrim,.vk-burger,.vk-hero__svisle,.vk-hero__citat{display:none;}
    .vk-hero{min-height:auto; color:var(--c-ink);}
    .vk-hero::after{display:none;}
    body{background:#fff; color:#000;}
}

/* ── Pruh náhledu konceptu ───────────────────────────────────────────────
   🔴 MUSÍ BÝT POZNAT NA PRVNÍ POHLED. Náhled skryté realizace vypadá jinak
      jako hotová stránka a redaktor by si myslel, že je realizace na webu —
      přitom veřejně vrací 404. Proto nahoře, výrazně, přes celou šířku.
   ⚠️ Nelepí se k hornímu okraji (`position: sticky`): hlavička webu je
      `fixed` a pruh by se s ní překryl. */
.vk-nahled-pruh {
    position: relative;
    z-index: 250;
    padding: 14px 24px;
    background: #9A4E2C;
    color: #fff;
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
}

.vk-nahled-pruh strong { font-weight: 600; }

@media (max-width: 768px) {
    .vk-nahled-pruh { padding: 12px 16px; font-size: 14px; }
}