/* Krupinský – zámková dlažba, ploty, schody
   Všechny hodnoty podle DESIGN.md (17. 10. 2026). */

[hidden] { display: none !important; }

/* ---------- Písma (podmnožina cs/sk/en, SIL OFL 1.1) ---------- */
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* ---------- Tokeny ---------- */
:root {
  --antracit: #272523;
  --antracit-hluboky: #1F1D1B;
  --antracit-svetly: #3A3633;
  --pisek: #F7F2E8;
  --loze: #EDE7DB;
  --papir: #FFFCF6;
  --cihlova: #A8472F;
  --cihlova-tmava: #8A3622;
  --hlina: #C98A62;
  --beton: #5E6469;
  --beton-svetly: #B9B1A6;
  --spara: #D3CEC4;
  --spara-tmava: #47423D;
  --zastupny-text: #9A9288;
  --kostka-1: #A8472F;
  --kostka-2: #B45B40;
  --kostka-3: #9C4129;
  --kostka-4: #B96549;
  --kostka-5: #C07255;
  --kostka-antracit: #2F2C29;
  --zasyp: #E4DACA;

  --pismo-nadpis: "Barlow Condensed", "Arial Narrow", sans-serif;
  --pismo-text: "Barlow", "Segoe UI", Arial, sans-serif;
  --h1: clamp(2.875rem, 2.09rem + 3.24vw, 5rem);
  --h2: clamp(2.25rem, 1.88rem + 1.52vw, 3.25rem);
  --h3: clamp(1.625rem, 1.53rem + 0.38vw, 1.875rem);
  --perex: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);
  --telefon: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);

  --m-1: 4px; --m-2: 8px; --m-3: 12px; --m-4: 16px; --m-5: 24px; --m-6: 32px; --m-7: 48px; --m-8: 64px; --m-9: 96px; --m-10: 128px;
  --sekce: clamp(72px, 4.5vw + 56px, 136px);
  --sirka: 1180px;
  --okraj: clamp(20px, 5vw, 48px);
  --mezera: 24px;
  --spara-sirka: 6px;
  --zaobleni: 4px;
  --zaobleni-kostka: 3px;
  --vyska-hlavicky: 80px;
  --krivka: cubic-bezier(.22, .61, .36, 1);
  --rychle: 180ms;
  --pohyb: 300ms;
}
@media (max-width: 899px) { :root { --vyska-hlavicky: 64px; --spara-sirka: 5px; } }
@media (min-width: 1800px) { :root { --sirka: 1320px; --h1: clamp(2.875rem, 2.09rem + 3.24vw, 5.5rem); --h2: clamp(2.25rem, 1.88rem + 1.52vw, 3.5rem); } }

/* ---------- Základ ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--vyska-hlavicky) + 8px); }
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
body {
  margin: 0;
  background: var(--pisek);
  color: var(--antracit);
  font: 400 1.0625rem/1.65 var(--pismo-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3, .nadpis-velky { text-wrap: balance; }
h1, h2, h3 { margin: 0; font-weight: 700; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--cihlova); outline-offset: 3px; border-radius: 2px; }
.kontakt :focus-visible, .hlavicka :focus-visible, .paticka :focus-visible, .prohlizec :focus-visible { outline-color: var(--hlina); }
::selection { background: var(--cihlova); color: var(--pisek); }

.ikony { position: absolute; width: 0; height: 0; overflow: hidden; }
.ikona { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.preskocit { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--pisek); color: var(--antracit); padding: 12px 18px; border-radius: var(--zaobleni); font-weight: 600; }
.preskocit:focus { top: 12px; }

.obal { width: 100%; max-width: calc(var(--sirka) + 2 * var(--okraj)); margin-inline: auto; padding-inline: var(--okraj); }
@supports (padding: max(0px)) {
  .obal, .mobilni-menu { padding-left: max(var(--okraj), env(safe-area-inset-left)); padding-right: max(var(--okraj), env(safe-area-inset-right)); }
}

.stitek { font: 600 .78rem/1.3 var(--pismo-text); letter-spacing: .16em; text-transform: uppercase; color: var(--cihlova); margin: 0; }
.stitek--tecka { display: flex; align-items: center; gap: 10px; }
.stitek--tecka::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 1px; background: var(--cihlova); }
.stitek--tmavy { color: var(--hlina); }

h2 { font-family: var(--pismo-nadpis); font-size: var(--h2); line-height: 1; letter-spacing: -.01em; text-transform: uppercase; margin-top: 12px; }
.nadpis-velky { font-family: var(--pismo-nadpis); font-size: var(--h2); line-height: 1; letter-spacing: -.01em; text-transform: uppercase; margin: 12px 0 22px; }
.nadpis-velky span { display: block; }

.hlava { display: grid; gap: 16px 48px; margin-bottom: clamp(32px, 4vw, 56px); }
.hlava__text { color: var(--beton); margin: 0; max-width: 27rem; }
@media (min-width: 900px) { .hlava { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); align-items: end; } }

.odkaz { color: var(--antracit); font-weight: 600; text-decoration: underline; text-decoration-color: var(--cihlova); text-decoration-thickness: 2px; text-underline-offset: 5px; transition: color var(--rychle) var(--krivka); }
.odkaz:hover { color: var(--cihlova-tmava); }

.doplnit { background: #FFF1B8; color: #5A4500; padding: 1px 5px; border-radius: 2px; font-weight: 500; font-size: .9em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.doplnit--tmave { background: #5A4A1A; color: #FFE9A8; }
.tlumene { color: var(--beton-svetly); }

/* ---------- Tlačítka ---------- */
.tlacitko {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: var(--zaobleni);
  border: 1px solid transparent; font: 600 1rem/1 var(--pismo-text); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--rychle) var(--krivka), color var(--rychle) var(--krivka), border-color var(--rychle) var(--krivka), transform var(--rychle) var(--krivka);
}
.tlacitko .ikona { width: 18px; height: 18px; }
.tlacitko:active { transform: scale(.97); }
.tlacitko--hlavni { background: var(--cihlova); border-color: var(--cihlova); color: var(--pisek); }
.tlacitko--hlavni:hover { background: var(--cihlova-tmava); border-color: var(--cihlova-tmava); color: var(--pisek); transform: translateY(-1px); }
.tlacitko--obrys { background: transparent; border-color: var(--antracit); color: var(--antracit); }
.tlacitko--obrys:hover { background: var(--antracit); border-color: var(--antracit); color: var(--pisek); transform: translateY(-1px); }
.tlacitko--obrys-svetle { background: transparent; border-color: var(--hlina); color: var(--pisek); }
.tlacitko--obrys-svetle:hover { background: var(--pisek); border-color: var(--pisek); color: var(--antracit); }
.tlacitko--plne { width: 100%; }
@media (max-width: 599px) { .tlacitko { min-height: 56px; } }

/* ---------- Hlavička ---------- */
.hlavicka { position: sticky; top: 0; z-index: 50; background: var(--antracit); color: var(--pisek); border-bottom: 1px solid transparent; transition: border-color var(--pohyb) var(--krivka); }
.hlavicka.je-posunuta { border-bottom-color: var(--spara-tmava); }
.hlavicka__vnitrek { height: var(--vyska-hlavicky); display: flex; align-items: center; gap: 24px; }
.logo { display: block; flex: none; text-decoration: none; }
.logo img { width: 184px; height: auto; }
.menu { margin-left: auto; display: flex; gap: 34px; }
.menu a { position: relative; color: var(--pisek); text-decoration: none; font-weight: 500; font-size: 1rem; padding: 6px 0; }
.menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--hlina); transform: scaleX(0); transform-origin: left; transition: transform var(--pohyb) var(--krivka); }
.menu a:hover::after, .menu a.je-aktivni::after { transform: scaleX(1); }
.hlavicka__telefon { flex: none; padding: 0 20px; min-height: 48px; }
.hlavicka__zavolat { display: none; }
.hamburger { display: none; flex: none; width: 48px; height: 48px; margin-right: -8px; border: 0; background: transparent; color: var(--pisek); cursor: pointer; align-items: center; justify-content: center; border-radius: var(--zaobleni); }
.hamburger .ikona { width: 26px; height: 26px; }
.hamburger .ikona--zavrit { display: none; }
.hamburger[aria-expanded="true"] .ikona--menu { display: none; }
.hamburger[aria-expanded="true"] .ikona--zavrit { display: block; }

@media (max-width: 899px) {
  .hlavicka__vnitrek { gap: 12px; }
  .logo img { width: 148px; }
  .menu { display: none; }
  .hlavicka__telefon { margin-left: auto; min-height: 44px; padding: 0 16px; }
  .hlavicka__cislo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hlavicka__zavolat { display: inline; }
  .hamburger { display: inline-flex; }
}
@media (max-width: 389px) { .hlavicka__vnitrek { gap: 8px; } .logo img { width: 128px; } .hlavicka__telefon { padding: 0 12px; gap: 8px; } }
@media (max-width: 339px) { .logo img { width: 112px; } }
@media (max-width: 319px) { .hlavicka__zavolat { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .hlavicka__telefon { padding: 0 13px; } }

.mobilni-menu { position: fixed; inset: var(--vyska-hlavicky) 0 0 0; z-index: 49; background: var(--antracit); display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 24px var(--okraj) calc(28px + env(safe-area-inset-bottom)); overflow-y: auto; border-top: 1px solid var(--spara-tmava); }
.mobilni-menu__odkazy { display: flex; flex-direction: column; }
.mobilni-menu__odkazy a { font: 700 clamp(2rem, 1.5rem + 3vw, 2.75rem)/1 var(--pismo-nadpis); text-transform: uppercase; color: var(--pisek); text-decoration: none; padding: 14px 0; border-bottom: 1px solid var(--spara-tmava); }
.mobilni-menu__kontakt { display: grid; gap: 14px; }
.mobilni-menu__kontakt p { display: flex; gap: 10px; align-items: center; justify-content: center; color: var(--beton-svetly); margin: 0; }
.mobilni-menu__kontakt .ikona { color: var(--hlina); }
html.menu-otevrene { overflow: hidden; }

/* ---------- Úvod ---------- */
.uvod { padding: clamp(36px, 4vw, 72px) 0 clamp(56px, 6vw, 96px); }
.uvod__mrizka { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 900px) { .uvod__mrizka { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); align-items: center; gap: clamp(40px, 5vw, 80px); } }
.uvod h1 { font-family: var(--pismo-nadpis); font-size: var(--h1); line-height: .96; letter-spacing: -.015em; text-transform: uppercase; margin: 22px 0 26px; }
.uvod h1 span { display: block; color: var(--cihlova); }
.uvod__perex { font-size: var(--perex); line-height: 1.55; color: var(--beton); max-width: 33em; margin: 0; }
.uvod__akce { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.uvod__fakta { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: .9375rem; font-weight: 500; color: var(--antracit); }
.uvod__fakta li { display: flex; align-items: center; gap: 8px; }
.uvod__fakta .ikona { width: 18px; height: 18px; color: var(--cihlova); stroke-width: 2; }
@media (max-width: 599px) {
  .uvod__akce { flex-direction: column; }
  .uvod__akce .tlacitko { width: 100%; }
  .uvod__fakta { flex-direction: column; gap: 8px; }
}
.uvod__foto { position: relative; margin: 0; }
.uvod__foto-ram { overflow: hidden; border-radius: var(--zaobleni); aspect-ratio: 4 / 5; background: var(--loze); }
.uvod__foto-ram img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; animation: usazeni 1.4s var(--krivka) both; }
@media (min-width: 640px) and (max-width: 899px) { .uvod__foto-ram { aspect-ratio: 4 / 3; } }
@keyframes usazeni { from { transform: scale(1.05); } to { transform: none; } }
.uvod__foto figcaption { position: absolute; inset: 0; pointer-events: none; border-radius: var(--zaobleni); background: linear-gradient(to top, rgba(31, 29, 27, .78) 0%, rgba(31, 29, 27, 0) 42%); }
.uvod__foto-stitek { position: absolute; top: 18px; left: 18px; background: var(--pisek); color: var(--antracit); font: 600 .72rem/1 var(--pismo-text); letter-spacing: .14em; text-transform: uppercase; padding: 9px 12px; border-left: 3px solid var(--cihlova); }
.uvod__foto-motto { position: absolute; left: clamp(18px, 2.4vw, 30px); bottom: clamp(18px, 2.2vw, 28px); font: 700 clamp(2.25rem, 1.5rem + 2.6vw, 3.6rem)/.95 var(--pismo-nadpis); text-transform: uppercase; color: var(--pisek); letter-spacing: -.01em; }
.uvod__foto-ikona { position: absolute; right: clamp(18px, 2.4vw, 30px); bottom: clamp(22px, 2.4vw, 32px); width: 46px; height: 46px; fill: none; stroke: var(--hlina); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Pruh oborů ---------- */
.pruh { background: var(--loze); border-block: 1px solid var(--spara); }
.pruh__seznam { list-style: none; margin: 0 auto; padding-block: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 28px; font-weight: 500; font-size: .9375rem; }
.pruh__seznam li { display: flex; align-items: center; gap: 10px; }
.pruh__seznam li:not(.pruh__misto)::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 1px; background: var(--cihlova); }
.pruh__misto .ikona { width: 18px; height: 18px; color: var(--cihlova); }
@media (max-width: 699px) { .pruh__seznam { justify-content: flex-start; gap: 8px 20px; } .pruh__misto { flex-basis: 100%; } }

/* ---------- Poznávací prvek: dlažba služeb ---------- */
.kostky { padding-block: var(--sekce); }
.dlazba {
  --sloupcu: 16; --radku: 6;
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: repeat(var(--sloupcu), minmax(0, 1fr)); grid-template-rows: repeat(var(--radku), minmax(0, 1fr));
  gap: var(--spara-sirka); padding: var(--spara-sirka);
  aspect-ratio: 16 / 6;
  background: var(--zasyp); border-radius: var(--zaobleni);
}
.dlazba::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .45 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23z)'/%3E%3C/svg%3E"); }
.kostka { position: relative; border-radius: var(--zaobleni-kostka); background: var(--barva, var(--kostka-1)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), inset 0 -2px 0 rgba(0, 0, 0, .16), inset 1px 0 0 rgba(255, 255, 255, .05), inset -1px 0 0 rgba(0, 0, 0, .08); overflow: hidden; }
.kostka--antracit { --barva: var(--kostka-antracit); }
.kostka--cihla { --barva: var(--cihlova-tmava); }
.kostka--sluzba { display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(12px, 1.4vw, 20px); color: var(--pisek); text-decoration: none; cursor: pointer; z-index: 1; }
.kostka--sluzba::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(31, 29, 27, .86) 0%, rgba(31, 29, 27, .2) 75%); opacity: 0; transition: opacity .35s var(--krivka); }
.kostka__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .35s var(--krivka), transform .7s var(--krivka); }
.kostka__nazev { position: relative; z-index: 2; font: 700 clamp(1.25rem, .95rem + .9vw, 1.75rem)/1 var(--pismo-nadpis); text-transform: uppercase; letter-spacing: .005em; max-width: 12.5ch; }
.kostka__pocet { position: relative; z-index: 2; margin-top: 6px; font: 500 .8125rem/1.3 var(--pismo-text); opacity: .86; }
.kostka__plus { position: absolute; z-index: 2; top: clamp(10px, 1.2vw, 16px); right: clamp(10px, 1.2vw, 16px); width: 24px; height: 24px; padding: 3px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; border: 1px solid rgba(247, 242, 232, .45); border-radius: 2px; transition: background-color var(--rychle), color var(--rychle); }
.kostka--volna { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 4px; padding: 10px; background: transparent; box-shadow: none; border: 2px dashed rgba(39, 37, 35, .38); color: var(--antracit); text-decoration: none; z-index: 1; transition: background-color var(--pohyb), border-color var(--pohyb); }
.kostka--volna .kostka__nazev { font-size: clamp(1rem, .85rem + .45vw, 1.25rem); max-width: 10ch; line-height: 1.02; }
.kostka--volna .kostka__pocet { color: var(--cihlova-tmava); font-weight: 600; opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.kostka--volna:hover { background: rgba(168, 71, 47, .07); border-color: var(--cihlova); }
@media (hover: hover) {
  .kostka--sluzba:hover .kostka__foto, .kostka--sluzba:focus-visible .kostka__foto { opacity: 1; transform: none; }
  .kostka--sluzba:hover::before, .kostka--sluzba:focus-visible::before { opacity: 1; }
  .kostka--sluzba:hover .kostka__plus { background: var(--pisek); color: var(--antracit); }
  .dlazba.je-hotova .kostka--sluzba { transition: transform var(--pohyb) var(--krivka), box-shadow var(--pohyb) var(--krivka); }
  .dlazba.je-hotova .kostka--sluzba:hover { transform: translateY(-3px); box-shadow: 0 14px 26px -12px rgba(0, 0, 0, .55); }
}
@media (hover: none) {
  .kostka__foto { opacity: 1; transform: none; }
  .kostka--sluzba::before { opacity: 1; }
}
/* počítač 16 × 6 */
.kostka[data-sluzba="dlazba"] { grid-area: 1 / 1 / span 2 / span 4; }
.kostka[data-sluzba="zatravnovaci"] { grid-area: 1 / 11 / span 2 / span 3; }
.kostka[data-sluzba="ploty"] { grid-area: 3 / 6 / span 2 / span 3; }
.kostka[data-sluzba="schody"] { grid-area: 4 / 14 / span 2 / span 3; }
.kostka[data-sluzba="drobne"] { grid-area: 5 / 2 / span 2 / span 3; }
.kostka--volna { grid-area: 5 / 10 / span 2 / span 2; }
/* tablet 8 × 10 */
@media (max-width: 999px) {
  .dlazba { --sloupcu: 8; --radku: 10; aspect-ratio: 8 / 10; }
  .kostka[data-sluzba="dlazba"] { grid-area: 1 / 1 / span 2 / span 4; }
  .kostka[data-sluzba="zatravnovaci"] { grid-area: 2 / 6 / span 2 / span 3; }
  .kostka[data-sluzba="ploty"] { grid-area: 4 / 1 / span 2 / span 3; }
  .kostka[data-sluzba="schody"] { grid-area: 5 / 5 / span 2 / span 3; }
  .kostka[data-sluzba="drobne"] { grid-area: 7 / 2 / span 2 / span 3; }
  .kostka--volna { grid-area: 8 / 6 / span 2 / span 2; }
}
/* mobil 4 × 10 */
@media (max-width: 639px) {
  .dlazba { --sloupcu: 4; --radku: 10; aspect-ratio: 4 / 10; }
  .kostka[data-sluzba="dlazba"] { grid-area: 1 / 1 / span 2 / span 4; }
  .kostka[data-sluzba="zatravnovaci"] { grid-area: 4 / 1 / span 2 / span 2; }
  .kostka[data-sluzba="ploty"] { grid-area: 4 / 3 / span 2 / span 2; }
  .kostka[data-sluzba="schody"] { grid-area: 7 / 1 / span 2 / span 2; }
  .kostka[data-sluzba="drobne"] { grid-area: 7 / 3 / span 2 / span 2; }
  .kostka--volna { grid-area: 9 / 2 / span 2 / span 2; }
  .kostka__nazev { font-size: 1.25rem; }
}
@media (max-width: 359px) { .kostka--sluzba { padding: 10px; } .kostka__nazev { font-size: 1.05rem; } .kostka__pocet { font-size: .75rem; } .kostka__plus { width: 20px; height: 20px; top: 8px; right: 8px; } .kostka--volna .kostka__nazev { font-size: .95rem; } }
.dlazba-faze { display: none; }
.js .dlazba-faze { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 18px 0 0; padding: 0; font: 600 .78rem/1 var(--pismo-text); letter-spacing: .12em; text-transform: uppercase; color: var(--beton); }
.dlazba-faze li { display: flex; align-items: center; gap: 10px; color: var(--beton); transition: color var(--pohyb); }
.dlazba-faze li::before { content: ""; width: 9px; height: 9px; border-radius: 1px; border: 1.5px solid currentColor; transition: background-color var(--pohyb); }
.dlazba-faze li.je-aktivni { color: var(--cihlova); }
.dlazba-faze li.je-aktivni::before { background: currentColor; }
.dlazba-faze li.je-hotova { color: var(--antracit); }
.dlazba-faze li.je-hotova::before { background: currentColor; }

/* ---------- Služby ---------- */
.sluzby { padding-block: var(--sekce); background: var(--loze); }
.sluzba { display: grid; gap: 32px; align-items: center; margin-top: clamp(56px, 7vw, 112px); }
.sluzba:first-of-type { margin-top: 0; }
@media (min-width: 900px) {
  .sluzba { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); }
  .sluzba--obracene .sluzba__foto { order: 2; }
}
.sluzba__foto { margin: 0; overflow: hidden; border-radius: var(--zaobleni); aspect-ratio: 4 / 5; background: var(--spara); }
.sluzba__foto img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 640px) and (max-width: 899px) { .sluzba__foto { aspect-ratio: 3 / 2; } }
.sluzba__text > p:not(.stitek) { color: var(--beton); max-width: 34em; }
.odrazky { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.odrazky li { display: flex; gap: 12px; align-items: baseline; font-weight: 500; }
.odrazky li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 1px; background: var(--cihlova); transform: translateY(-2px); }
.sluzba__nahledy { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 28px 0; max-width: 440px; }
.nahled { position: relative; display: block; aspect-ratio: 3 / 4; padding: 0; border: 0; border-radius: var(--zaobleni-kostka); overflow: hidden; background: var(--spara); cursor: zoom-in; }
.nahled img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--krivka); }
.nahled:hover img { transform: scale(1.06); }
.nahled--vic { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: var(--antracit); color: var(--pisek); text-decoration: none; cursor: pointer; transition: background-color var(--rychle); }
.nahled--vic strong { font: 700 1.75rem/1 var(--pismo-nadpis); }
.nahled--vic span { font-size: .8125rem; color: var(--beton-svetly); }
.nahled--vic:hover { background: var(--cihlova-tmava); }
.nahled--vic:hover span { color: var(--pisek); }
.sluzba__akce { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

/* ---------- Realizace (galerie) ---------- */
.realizace { padding-block: var(--sekce); }
.realizace .obal { container-type: inline-size; }
.filtry { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.filtr { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--spara); background: var(--papir); color: var(--antracit); font: 600 .9375rem/1 var(--pismo-text); cursor: pointer; transition: background-color var(--rychle), color var(--rychle), border-color var(--rychle); }
.filtr__pocet { font-weight: 500; font-size: .8125rem; color: var(--beton); }
.filtr:hover { border-color: var(--antracit); }
.filtr[aria-pressed="true"] { background: var(--antracit); border-color: var(--antracit); color: var(--pisek); }
.filtr[aria-pressed="true"] .filtr__pocet { color: var(--beton-svetly); }
.galerie {
  --sl: 2;
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(var(--sl), minmax(0, 1fr)); grid-auto-flow: row dense;
  grid-auto-rows: calc((100cqw - (var(--sl) - 1) * var(--spara-sirka)) / var(--sl) * 4 / 3);
  gap: var(--spara-sirka);
}
@media (min-width: 640px) { .galerie { --sl: 3; } }
@media (min-width: 1000px) { .galerie { --sl: 4; } }
.dlazdice { position: relative; overflow: hidden; border-radius: var(--zaobleni-kostka); background: var(--loze); }
.dlazdice--siroka { grid-column: span 2; }
.dlazdice--vysoka { grid-row: span 2; }
.dlazdice.je-skryta { display: none; }
.dlazdice__odkaz { position: absolute; inset: 0; display: block; cursor: zoom-in; }
.dlazdice__odkaz img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--krivka); }
.dlazdice__popis { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 14px 12px; font-size: .8125rem; line-height: 1.35; font-weight: 500; color: var(--pisek); background: linear-gradient(to top, rgba(31, 29, 27, .88), rgba(31, 29, 27, 0)); opacity: 0; transform: translateY(6px); transition: opacity var(--pohyb) var(--krivka), transform var(--pohyb) var(--krivka); }
@media (hover: hover) {
  .dlazdice__odkaz:hover img { transform: scale(1.04); }
  .dlazdice__odkaz:hover .dlazdice__popis, .dlazdice__odkaz:focus-visible .dlazdice__popis { opacity: 1; transform: none; }
}
.dlazdice__odkaz:focus-visible { outline-offset: -3px; }
.galerie__pata { display: flex; justify-content: center; margin-top: 32px; }
.galerie__pata .tlacitko span { color: var(--beton); font-weight: 500; }
.galerie__pata .tlacitko:hover span { color: var(--beton-svetly); }

/* ---------- Hodnocení a proč my ---------- */
.hodnoceni { padding-block: var(--sekce); border-top: 1px solid var(--spara); }
.hodnoceni__mrizka { display: grid; gap: 40px; }
@media (min-width: 1000px) { .hodnoceni__mrizka { grid-template-columns: minmax(0, .85fr) minmax(0, 2fr); gap: 64px; align-items: start; } }
.hodnoceni__skore { display: flex; align-items: center; gap: 18px; margin: 26px 0 22px; }
.hodnoceni__skore strong { font: 700 clamp(3.5rem, 2.7rem + 3vw, 5.25rem)/.85 var(--pismo-nadpis); color: var(--cihlova); letter-spacing: -.02em; }
.hodnoceni__skore span { font-size: .875rem; line-height: 1.45; color: var(--beton); }
.citace { display: grid; gap: 28px; }
@media (min-width: 700px) { .citace { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
.citace__polozka { margin: 0; padding-left: 20px; border-left: 2px solid var(--spara); display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.citace__polozka p { margin: 0; font-size: 1.0625rem; line-height: 1.6; font-weight: 500; }
.citace__polozka footer { font-size: .875rem; color: var(--beton); }
.citace__polozka footer strong { color: var(--antracit); font-weight: 600; }
.proc { list-style: none; padding: 0; margin: clamp(48px, 6vw, 88px) 0 0; display: grid; border-top: 1px solid var(--spara); }
.proc li { display: flex; flex-direction: column; gap: 6px; padding: 24px 0; border-bottom: 1px solid var(--spara); }
.proc strong { font: 700 clamp(1.75rem, 1.4rem + 1vw, 2.25rem)/1 var(--pismo-nadpis); text-transform: uppercase; }
.proc span { color: var(--beton); }
@media (min-width: 800px) {
  .proc { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--spara); }
  .proc li { padding: 30px 28px 30px 0; border-bottom: 0; }
  .proc li + li { padding-left: 28px; border-left: 1px solid var(--spara); }
}

/* ---------- Postup ---------- */
.postup { padding-block: var(--sekce); background: var(--loze); }
.kroky { list-style: none; padding: 0; margin: 0; display: grid; gap: 36px; }
.krok { position: relative; padding-left: 76px; }
.krok__cislo { position: absolute; left: 0; top: 0; width: 52px; height: 52px; display: grid; place-items: center; background: var(--cihlova); color: var(--pisek); font: 700 1.75rem/1 var(--pismo-nadpis); border-radius: var(--zaobleni-kostka); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), inset 0 -2px 0 rgba(0, 0, 0, .18); }
.krok:not(:last-child)::before { content: ""; position: absolute; left: 25px; top: 64px; bottom: -28px; width: 2px; background: repeating-linear-gradient(to bottom, var(--spara) 0 9px, transparent 9px 15px); }
.krok h3 { font: 700 var(--h3)/1.08 var(--pismo-nadpis); margin: 10px 0 10px; }
.krok p { color: var(--beton); margin: 0; }
@media (min-width: 900px) {
  .kroky { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .krok { padding-left: 0; padding-top: 80px; }
  .krok:not(:last-child)::before { left: 66px; right: -20px; top: 25px; bottom: auto; width: auto; height: 2px; background: repeating-linear-gradient(to right, var(--spara) 0 9px, transparent 9px 15px); }
  .krok h3 { margin-top: 0; }
}

/* ---------- Kde působíme ---------- */
.oblast { padding-block: var(--sekce); }
.oblast__mrizka { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .oblast__mrizka { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 88px); } }
.oblast__text h2 { margin-bottom: 20px; }
.oblast__text > p:not(.stitek):not(.drobny) { color: var(--beton); max-width: 32em; }
.oblast__seznam { list-style: none; padding: 0; margin: 26px 0 14px; border-top: 1px solid var(--spara); }
.oblast__seznam li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--spara); }
.oblast__mesto { font: 700 1.375rem/1.15 var(--pismo-nadpis); text-transform: uppercase; }
.oblast__km { color: var(--beton); font-weight: 500; font-variant-numeric: tabular-nums; }
.drobny { font-size: .875rem; color: var(--beton); margin: 0; }
.mapka { margin: 0; background: var(--antracit); border-radius: var(--zaobleni); padding: clamp(10px, 2vw, 24px); overflow: hidden; }
.mapka__svg { width: 100%; height: auto; }
.mapka__kruh { fill: none; stroke: var(--spara-tmava); stroke-width: 1.5; stroke-dasharray: 4 7; }
.mapka__km { fill: var(--beton-svetly); font: 500 15px var(--pismo-text); }
.mapka__bod { fill: var(--hlina); }
.mapka__sidlo { fill: var(--cihlova); stroke: var(--pisek); stroke-width: 2; }
.mapka__nazev { fill: var(--pisek); font: 700 27px var(--pismo-nadpis); text-transform: uppercase; letter-spacing: .02em; }
.mapka__nazev--sidlo { fill: var(--hlina); }
.mapka__pozn { fill: var(--beton-svetly); font: 500 17px var(--pismo-text); }
@media (max-width: 639px) { .mapka__nazev { font-size: 32px; } .mapka__pozn, .mapka__km { display: none; } }

/* ---------- Časté otázky ---------- */
.otazky { padding-block: var(--sekce); background: var(--loze); }
.otazky__mrizka { display: grid; gap: 32px; }
.otazky__hlava > p:last-child { color: var(--beton); margin-top: 18px; }
.otazky__hlava a { color: var(--antracit); font-weight: 600; text-decoration-color: var(--cihlova); text-underline-offset: 4px; }
@media (min-width: 1000px) {
  .otazky__mrizka { grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr); gap: 72px; }
  .otazky__hlava { position: sticky; top: calc(var(--vyska-hlavicky) + 32px); align-self: start; }
}
.otazka { border-bottom: 1px solid var(--spara); }
.otazka:first-child { border-top: 1px solid var(--spara); }
.otazka summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 0; cursor: pointer; font: 700 clamp(1.25rem, 1.15rem + .4vw, 1.5rem)/1.2 var(--pismo-nadpis); }
.otazka summary::-webkit-details-marker { display: none; }
.otazka summary .ikona { width: 30px; height: 30px; padding: 6px; border: 1px solid var(--spara); border-radius: var(--zaobleni-kostka); background: var(--papir); transition: transform var(--pohyb) var(--krivka), background-color var(--pohyb), color var(--pohyb), border-color var(--pohyb); }
.otazka summary:hover .ikona { border-color: var(--antracit); }
.otazka[open] summary .ikona { transform: rotate(45deg); background: var(--antracit); border-color: var(--antracit); color: var(--pisek); }
.otazka__odpoved { padding: 0 54px 22px 0; color: var(--beton); }
.otazka__odpoved p { margin: 0; }
.otazka__odpoved a { color: var(--antracit); font-weight: 600; }

/* ---------- Kontakt a poptávka ---------- */
.kontakt { background: var(--antracit); color: var(--pisek); padding-block: var(--sekce); }
.kontakt__mrizka { display: grid; gap: 48px; }
@media (min-width: 1000px) { .kontakt__mrizka { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; } }
.kontakt h2 { color: var(--pisek); }
.kontakt__perex { color: var(--beton-svetly); max-width: 30em; margin: 20px 0 0; }
.kontakt__telefon { display: inline-flex; align-items: center; gap: 16px; margin: 28px 0; font: 700 var(--telefon)/1 var(--pismo-nadpis); color: var(--pisek); text-decoration: none; transition: color var(--rychle); }
.kontakt__telefon .ikona { width: .62em; height: .62em; color: var(--hlina); stroke-width: 1.5; }
.kontakt__telefon:hover { color: var(--hlina); }
.kontakt__udaje { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 16px; }
.kontakt__udaje li { display: flex; gap: 14px; align-items: flex-start; }
.kontakt__udaje .ikona { color: var(--hlina); margin-top: 3px; }
.kontakt__udaje a { color: var(--pisek); text-underline-offset: 4px; }
.kontakt__mapa { overflow: hidden; border-radius: var(--zaobleni); border: 1px solid var(--spara-tmava); aspect-ratio: 16 / 10; background: var(--antracit-svetly); }
.kontakt__mapa iframe { width: 100%; height: 100%; border: 0; display: block; }

.poptavka { position: relative; background: var(--antracit-svetly); border: 1px solid var(--spara-tmava); border-radius: var(--zaobleni); padding: clamp(22px, 3vw, 40px); scroll-margin-top: calc(var(--vyska-hlavicky) + 16px); }
.poptavka h3 { font: 700 clamp(1.875rem, 1.5rem + 1vw, 2.375rem)/1.02 var(--pismo-nadpis); margin: 0; }
.poptavka__uvod { color: var(--beton-svetly); margin: 8px 0 24px; }
.volby { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.volby legend { font-weight: 600; font-size: .9375rem; padding: 0; margin-bottom: 10px; }
.volby__seznam { display: flex; flex-wrap: wrap; gap: 8px; }
.volba { position: relative; }
.volba input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.volba span { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 16px 0 12px; border: 1px solid var(--spara-tmava); border-radius: var(--zaobleni); background: var(--antracit); color: var(--pisek); font-weight: 500; font-size: .9375rem; transition: background-color var(--rychle), border-color var(--rychle); pointer-events: none; }
.volba .ikona { width: 20px; height: 20px; padding: 2px; border: 1.5px solid var(--beton-svetly); border-radius: 3px; color: transparent; stroke-width: 2.6; transition: background-color var(--rychle), border-color var(--rychle), color var(--rychle); }
.volba:hover span { border-color: var(--beton-svetly); }
.volba input:checked + span { border-color: var(--hlina); background: rgba(201, 138, 98, .16); }
.volba input:checked + span .ikona { background: var(--hlina); border-color: var(--hlina); color: var(--antracit); }
.volba input:focus-visible + span { outline: 2px solid var(--hlina); outline-offset: 2px; }
.poptavka__dvojice { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 16px; }
@media (min-width: 560px) { .poptavka__dvojice { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pole { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 16px; min-width: 0; }
.pole label { font-weight: 600; font-size: .9375rem; }
.pole input, .pole textarea { width: 100%; min-width: 0; min-height: 52px; padding: 13px 16px; border: 1px solid var(--spara-tmava); border-radius: var(--zaobleni); background: var(--antracit); color: var(--pisek); font: 400 1rem/1.4 var(--pismo-text); -webkit-appearance: none; appearance: none; transition: border-color var(--rychle); }
.pole textarea { min-height: 124px; resize: vertical; }
.pole input::placeholder, .pole textarea::placeholder { color: var(--zastupny-text); opacity: 1; }
.pole input:hover, .pole textarea:hover { border-color: var(--beton-svetly); }
.pole input:focus, .pole textarea:focus { outline: 2px solid var(--hlina); outline-offset: 1px; border-color: var(--hlina); }
.pole input[aria-invalid="true"] { border-color: #E0866A; }
.pole__chyba { margin: 0; color: #F0A48C; font-size: .875rem; }
.poptavka .tlacitko--plne { margin-top: 6px; }
.poptavka__pozn { font-size: .8125rem; line-height: 1.5; color: var(--beton-svetly); margin: 14px 0 0; }
.poptavka__stav { margin-top: 18px; padding: 16px 18px; border-left: 3px solid var(--hlina); background: rgba(201, 138, 98, .12); border-radius: 0 var(--zaobleni) var(--zaobleni) 0; }
.poptavka__stav p { margin: 0 0 12px; }
.pole--past { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.poptavka__nahradni { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.poptavka__stav pre { white-space: pre-wrap; font: 400 .875rem/1.5 var(--pismo-text); color: var(--pisek); background: var(--antracit); border: 1px solid var(--spara-tmava); border-radius: var(--zaobleni); padding: 12px 14px; margin: 0 0 12px; }

/* ---------- Patička ---------- */
.paticka { background: var(--antracit-hluboky); color: var(--beton-svetly); padding: 64px 0 28px; font-size: .9375rem; }
.paticka__mrizka { display: grid; gap: 36px; }
@media (min-width: 640px) { .paticka__mrizka { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .paticka__mrizka { grid-template-columns: 1.35fr .75fr .75fr 1.35fr; gap: 40px; } }
.paticka__znacka p { margin: 18px 0 0; max-width: 24em; }
.paticka__nadpis { font: 600 .78rem/1.2 var(--pismo-text); letter-spacing: .16em; text-transform: uppercase; color: var(--hlina); margin: 0 0 16px; }
.paticka__seznam { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.paticka a { color: var(--pisek); text-decoration: none; }
.paticka a:hover { text-decoration: underline; text-underline-offset: 4px; }
.paticka__udaje { margin: 0; line-height: 1.6; }
.paticka__spodek { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--spara-tmava); font-size: .8125rem; }
.paticka__spodek p { margin: 0; }
.paticka__spodek a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Dokument (zásady zpracování osobních údajů) ---------- */
.hlavicka--jednoducha .hlavicka__telefon { margin-left: auto; }
.dokument { padding-block: clamp(32px, 4vw, 64px) var(--sekce); }
.dokument__obal { max-width: calc(780px + 2 * var(--okraj)); }
.dokument h1 { font-family: var(--pismo-nadpis); font-size: var(--h2); line-height: 1; letter-spacing: -.01em; text-transform: uppercase; margin: 20px 0 10px; }
.dokument h2 { font-size: clamp(1.375rem, 1.25rem + .5vw, 1.75rem); line-height: 1.15; letter-spacing: 0; text-transform: none; margin: 40px 0 12px; }
.dokument p, .dokument li { max-width: 68ch; }
.dokument ul { padding-left: 1.25em; margin: 0 0 1em; display: grid; gap: 10px; }
.dokument li::marker { color: var(--cihlova); }
.dokument a:not(.tlacitko):not(.dokument__zpet) { color: var(--cihlova-tmava); text-underline-offset: 3px; }
.dokument__platnost { color: var(--beton); font-size: .9375rem; margin: 0 0 20px; }
.dokument__perex { font-size: var(--perex); line-height: 1.55; color: var(--beton); }
.dokument__zpet { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; color: var(--antracit); text-decoration: none; }
.dokument__zpet:hover { color: var(--cihlova-tmava); }
.dokument__zpet .ikona { width: 18px; height: 18px; }
.dokument__tlacitko { margin-top: 36px; }
.chyba404 { min-height: calc(100svh - var(--vyska-hlavicky) - 120px); display: flex; align-items: center; }
.chyba404 h1 { font-size: var(--h1); line-height: .96; }
.chyba404__akce { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.paticka--jednoducha { padding: 28px 0 32px; }
.paticka--jednoducha .paticka__spodek { margin-top: 0; padding-top: 0; border-top: 0; }
.poptavka__pozn a { color: var(--pisek); text-underline-offset: 3px; }

/* ---------- Okno se službou ---------- */
.okno { width: min(940px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 6px; background: var(--papir); color: var(--antracit); box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .6); overflow: hidden; }
.okno::backdrop { background: rgba(31, 29, 27, .74); }
.okno[open] { animation: okno-dovnitr .32s var(--krivka); }
@keyframes okno-dovnitr { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.okno__obal { position: relative; display: grid; max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
@media (min-width: 800px), (min-width: 600px) and (max-height: 500px) { .okno__obal { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.okno__obal:focus, .prohlizec__obal:focus { outline: none; }
.okno__fotky { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; background: var(--loze); align-content: start; }
.okno__foto { position: relative; aspect-ratio: 3 / 4; padding: 0; border: 0; overflow: hidden; border-radius: 2px; background: var(--spara); cursor: zoom-in; }
.okno__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--krivka); }
.okno__foto:hover img { transform: scale(1.05); }
.okno__text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: clamp(24px, 3.4vw, 44px); }
.okno__nadpis { font: 700 clamp(2rem, 1.6rem + 1.6vw, 3rem)/1 var(--pismo-nadpis); text-transform: uppercase; margin: 0; letter-spacing: -.01em; }
.okno__text > p:not(.stitek) { color: var(--beton); margin: 0; }
.okno__akce { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.okno__zavrit { position: absolute; top: 10px; right: 10px; z-index: 3; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--spara); border-radius: var(--zaobleni); background: var(--papir); color: var(--antracit); cursor: pointer; transition: background-color var(--rychle), color var(--rychle); }
.okno__zavrit:hover { background: var(--antracit); color: var(--pisek); }
@media (max-width: 799px) { .okno__zavrit { background: var(--pisek); } }

/* ---------- Prohlížeč fotek ---------- */
.prohlizec { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(24, 22, 20, .97); color: var(--pisek); }
.prohlizec::backdrop { background: rgba(24, 22, 20, .97); }
.prohlizec[open] { animation: prolnuti .25s var(--krivka); }
@keyframes prolnuti { from { opacity: 0; } to { opacity: 1; } }
.prohlizec__obal { position: relative; width: 100%; height: 100%; display: grid; place-items: center; padding: 64px 84px 40px; touch-action: pan-y; }
.prohlizec__foto { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 100%; }
.prohlizec__foto img { width: auto; height: auto; max-width: min(100%, 1180px); max-height: calc(100dvh - 160px); object-fit: contain; border-radius: 3px; transition: opacity .25s var(--krivka); }
.prohlizec__foto figcaption { display: flex; justify-content: space-between; gap: 20px; width: 100%; font-size: .9375rem; color: var(--beton-svetly); }
.prohlizec__pocet { flex: none; font-variant-numeric: tabular-nums; }
.prohlizec__tlacitko { position: absolute; width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid var(--spara-tmava); border-radius: var(--zaobleni); background: rgba(39, 37, 35, .85); color: var(--pisek); cursor: pointer; transition: background-color var(--rychle), color var(--rychle), border-color var(--rychle); }
.prohlizec__tlacitko:hover { background: var(--pisek); color: var(--antracit); border-color: var(--pisek); }
.prohlizec__tlacitko .ikona { width: 24px; height: 24px; }
.prohlizec__predchozi { left: 16px; top: 50%; transform: translateY(-50%); }
.prohlizec__dalsi { right: 16px; top: 50%; transform: translateY(-50%); }
.prohlizec__zavrit { top: 12px; right: 16px; }
@media (max-width: 699px) {
  .prohlizec__obal { padding: 64px 10px 96px; }
  .prohlizec__foto img { max-height: calc(100dvh - 200px); }
  .prohlizec__predchozi, .prohlizec__dalsi { top: auto; bottom: 22px; transform: none; }
  .prohlizec__predchozi { left: calc(50% - 64px); }
  .prohlizec__dalsi { right: calc(50% - 64px); }
  .prohlizec__zavrit { right: 10px; }
}

/* ---------- Telefony na šířku (nízká obrazovka) ---------- */
@media (max-height: 500px) {
  .mobilni-menu { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 16px 32px; padding-top: 12px; }
  .mobilni-menu__odkazy { flex: 1 1 320px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .mobilni-menu__odkazy a { font-size: 1.6rem; padding: 10px 0; }
  .mobilni-menu__kontakt { flex: 0 1 280px; }
  .prohlizec__obal { padding: 8px 76px; }
  .prohlizec__foto { gap: 6px; }
  .prohlizec__foto img { max-height: calc(100dvh - 48px); }
  .prohlizec__foto figcaption { font-size: .8125rem; }
  .prohlizec__predchozi, .prohlizec__dalsi { top: 50%; bottom: auto; transform: translateY(-50%); }
  .prohlizec__predchozi { left: max(10px, env(safe-area-inset-left)); }
  .prohlizec__dalsi { right: max(10px, env(safe-area-inset-right)); }
  .prohlizec__zavrit { top: 8px; right: max(10px, env(safe-area-inset-right)); }
  .okno { max-height: calc(100dvh - 16px); }
  .okno__obal { max-height: calc(100dvh - 16px); }
}

/* ---------- Omezený pohyb ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .tlacitko:hover, .dlazba.je-hotova .kostka--sluzba:hover { transform: none; }
}