/* css/fonts.css */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url("/fonts/raleway-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url("/fonts/raleway-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("/fonts/instrument-sans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("/fonts/instrument-sans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* vendor/lenis.css */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

/* shared/zaklad.css */
/* Společný základ všech tří návrhů. Barvy a písma dodává každý návrh přes proměnné:
   --c-pozadi, --c-text, --c-tlumeny, --c-plocha, --c-linka, --c-akcent, --c-akcent-text,
   --c-odkaz, --c-fokus, --f-nadpis, --f-text, --hrana, --sirka, --okraj */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5.5rem; }
html.okno-otevrene { overflow: hidden; }
body {
  margin: 0;
  background: var(--c-pozadi);
  color: var(--c-text);
  font-family: var(--f-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-nadpis); font-weight: 800; line-height: 1.08; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--c-fokus); outline-offset: 3px; }

.preskocit {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--c-text); color: var(--c-pozadi); padding: .6rem 1rem; text-decoration: none;
}
.preskocit:focus { top: 1rem; }
.vizualne-skryte { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.obal { width: min(100% - 2 * var(--okraj), var(--sirka)); margin-inline: auto; }

/* ---------- logo GardenGO (od 13. 10. 2026 bez dovětku TECH) ----------
   úvodní stránka na počítači: nahoře celý kruh (přesahuje pod hlavičku), po posunu jen nápis;
   na mobilu a na podstránkách vždy nápis bez kruhu */
.logo { position: relative; display: block; line-height: 0; flex: none; }
.logo__napis { width: var(--logo-napis-w, 10rem); height: auto; }
.logo__kruh { display: none; }
@media (min-width: 900px) and (not ((max-width: 1199px) and (max-height: 560px))) and (not ((hover: none) and (pointer: coarse) and (max-width: 1199px))) {
  .logo--kruh .logo__kruh {
    display: block; position: absolute; left: var(--logo-kruh-left, 0); top: var(--logo-kruh-top, -.6rem);
    width: var(--logo-kruh-w, 9.5rem); height: auto; transform-origin: 0 0;
    transition: opacity .35s ease, transform .45s cubic-bezier(.2, .7, .2, 1);
  }
  .logo--kruh .logo__napis { opacity: 0; transition: opacity .35s ease; }
  .je-posunuta .logo--kruh .logo__kruh { opacity: 0; transform: scale(.8); pointer-events: none; }
  .je-posunuta .logo--kruh .logo__napis { opacity: 1; }
}

/* ---------- tlačítka ---------- */
.tlacitko {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3rem; padding: .8rem 1.4rem; border: 2px solid currentColor; border-radius: var(--hrana);
  background: transparent; color: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  line-height: 1.2; transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.tlacitko:active { transform: scale(.97); }
.tlacitko--hlavni { background: var(--c-akcent); border-color: var(--c-akcent); color: var(--c-akcent-text); }
.tlacitko--hlavni:hover { background: var(--c-akcent-hover, var(--c-akcent)); border-color: var(--c-akcent-hover, var(--c-akcent)); }

/* ---------- formuláře ---------- */
.formular { display: grid; grid-template-columns: 1fr; gap: 1rem 1.25rem; }
@media (min-width: 640px) { .formular { grid-template-columns: 1fr 1fr; } .pole--cele { grid-column: 1 / -1; } }
.pole { display: grid; gap: .35rem; }
.pole label { font-weight: 600; font-size: .95rem; }
.nepovinne { font-weight: 400; color: var(--c-tlumeny); }
.pole input, .pole textarea, .pole select {
  width: 100%; min-height: 3rem; padding: .7rem .85rem; border: 1.5px solid var(--c-pole-okraj, var(--c-linka));
  border-radius: var(--hrana); background: var(--c-pole, transparent); color: inherit;
}
.pole textarea { resize: vertical; min-height: 6.5rem; }
.pole input:focus, .pole textarea:focus { outline: 3px solid var(--c-fokus); outline-offset: 1px; border-color: transparent; }
.pole input[readonly] { background: var(--c-plocha); font-weight: 600; }
.formular--zkontrolovano :invalid { border-color: #C2361B; }
.formular__souhlas { font-size: .85rem; color: var(--c-tlumeny); }
.formular__stav:empty { display: none; }
.formular__stav { padding: .8rem 1rem; border-radius: var(--hrana); font-weight: 500; }
.formular__stav[data-typ="ok"] { background: var(--c-plocha); border-left: 4px solid var(--c-akcent); }
.formular__stav[data-typ="chyba"] { background: #FCE9E5; color: #8A230F; }

/* ---------- poptávkové okno ---------- */
.poptavka {
  width: min(100% - 2rem, 40rem); max-height: calc(100dvh - 2rem); overflow: auto;
  padding: clamp(1.25rem, 4vw, 2.25rem); border: 0; border-radius: var(--hrana-okno, var(--hrana));
  background: var(--c-okno, var(--c-pozadi)); color: var(--c-text);
  overscroll-behavior: contain;
}
.poptavka::backdrop { background: rgba(20, 20, 18, .6); }
.poptavka[open] { animation: okno .28s cubic-bezier(.2, .7, .2, 1); }
@keyframes okno { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.poptavka__zavrit {
  position: absolute; top: .75rem; right: .75rem; width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  border: 0; background: transparent; cursor: pointer; border-radius: var(--hrana);
}
.poptavka__nadpis { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); padding-right: 3rem; }
.poptavka__uvod { margin: .5rem 0 1.5rem; color: var(--c-tlumeny); }
.poptavka__popisek { font-weight: 600; font-size: .95rem; }
.poptavka__produkt { padding: .7rem .9rem; background: var(--c-plocha); border-radius: var(--hrana); font-weight: 600; line-height: 1.35; }

/* ---------- katalog ---------- */
.katalog__mrizka { display: grid; grid-template-columns: 1fr; gap: 2.5rem 1.5rem; }
@media (min-width: 600px) { .katalog__mrizka { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .katalog__mrizka { grid-template-columns: repeat(3, 1fr); } }
.produkt { display: flex; flex-direction: column; gap: .4rem; }
.produkt__foto { position: relative; aspect-ratio: 1 / 1; background: var(--c-plocha); overflow: hidden; margin-bottom: .6rem; border-radius: var(--hrana-foto, 0); }
.produkt__foto img { width: 100%; height: 100%; object-fit: cover; }
.produkt__nahradni { position: absolute; inset: 0; display: grid; place-items: center; color: var(--c-linka); }
.produkt__nahradni svg { fill: currentColor; }
.produkt__cena {
  position: absolute; left: .75rem; top: .75rem; padding: .35rem .6rem; font-weight: 700;
  background: var(--c-cenovka, var(--c-akcent)); color: var(--c-cenovka-text, var(--c-akcent-text)); border-radius: 2px; font-size: .95rem; line-height: 1.2;
  font-variant-numeric: lining-nums tabular-nums;
}
.produkt__nazev { font-size: 1.15rem; line-height: 1.25; }
.produkt__detail { color: var(--c-tlumeny); font-size: .95rem; }
.produkt__zajem { margin-top: auto; align-self: flex-start; } /* tlačítko vždy dole – i u produktu bez popisu */
.produkt > :nth-last-child(2) { margin-bottom: .35rem; }
.katalog__paticka { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 3rem; }
.katalog__info { color: var(--c-tlumeny); font-size: .95rem; }
.strany { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.strany ol { display: flex; gap: .35rem; }
/* stránkování katalogu – odkazy ze serveru (13. 10. 2026), vypnutý krok je <span> */
.strany a, .strany span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.75rem; height: 2.75rem; padding: 0 .9rem; border: 1.5px solid var(--c-linka); border-radius: var(--hrana);
  background: transparent; font-weight: 600; font-variant-numeric: lining-nums; text-decoration: none; color: inherit;
}
.strany a[aria-current="page"] { background: var(--c-text); color: var(--c-pozadi); border-color: var(--c-text); }
.strany span { opacity: .4; }
.strany a:not([aria-current]):hover { border-color: var(--c-text); }
/* past na roboty ve formulářích – člověk pole nevidí */
.pole--past { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular { position: relative; }

/* ---------- realizace (karty, seznam, detail) ---------- */
.realizace-karta a { display: block; text-decoration: none; }
.realizace-karta__foto { overflow: hidden; aspect-ratio: 4 / 3; background: var(--c-plocha); border-radius: var(--hrana-foto, 0); }
.realizace-karta__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.realizace-karta a:hover .realizace-karta__foto img { transform: scale(1.04); }
.realizace-karta__typ { margin-top: 1rem; font-size: .9rem; color: var(--c-tlumeny); }
.realizace-karta__nazev { margin-top: .25rem; font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); line-height: 1.2; }
.realizace-karta__popis { margin-top: .4rem; color: var(--c-tlumeny); }
.realizace-karta__odkaz { display: inline-block; margin-top: .75rem; font-weight: 600; color: var(--c-odkaz); text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1.5px; }

.stranka-hlava { padding-block: clamp(3rem, 7vw, 6rem) clamp(2rem, 4vw, 3.5rem); }
.stranka-hlava h1 { font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.6rem); }
.stranka-perex { margin-top: 1rem; max-width: 40rem; font-size: 1.15rem; color: var(--c-tlumeny); }
.realizace-seznam { display: grid; gap: 3rem 1.75rem; grid-template-columns: 1fr; padding-bottom: clamp(4rem, 8vw, 7rem); }
@media (min-width: 640px) { .realizace-seznam { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1020px) { .realizace-seznam { grid-template-columns: repeat(3, 1fr); } }

.detail { padding-bottom: clamp(4rem, 8vw, 7rem); }
.detail__hlava { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2.5rem); max-width: 52rem; }
.detail__zpet { display: inline-block; margin-bottom: 1.5rem; font-weight: 600; color: var(--c-odkaz); text-underline-offset: .25em; }
.detail__typ { color: var(--c-tlumeny); }
.detail__nazev { margin-top: .4rem; font-size: clamp(2.1rem, 1.4rem + 3vw, 4rem); }
.detail__perex { margin-top: 1rem; font-size: 1.2rem; max-width: 42rem; }
.detail__telo { display: grid; gap: 2rem; }
@media (min-width: 900px) { .detail__telo { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; } }
.detail__foto img { width: 100%; max-height: 82vh; object-fit: cover; border-radius: var(--hrana-foto, 0); }
.detail figcaption { margin-top: .5rem; color: var(--c-tlumeny); font-size: .9rem; }
.detail__info { margin: 0; display: grid; gap: 0; border-top: 1.5px solid var(--c-text); }
.detail__info div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--c-linka); }
.detail__info dt { font-weight: 600; }
.detail__info dd { margin: 0; color: var(--c-tlumeny); overflow-wrap: break-word; }
@media (max-width: 340px) { .detail__info div { grid-template-columns: minmax(0, 1fr); gap: .15rem; } }
.detail__galerie { display: grid; gap: 1.5rem; margin-top: 2rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 24rem)); }
.detail__galerie img { width: 100%; max-height: 80vh; object-fit: cover; border-radius: var(--hrana-foto, 0); }
.detail__dalsi { display: grid; gap: 1rem; margin-top: 3.5rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .detail__dalsi { grid-template-columns: 1fr 1fr; } .detail__dalsi a[rel="next"] { text-align: right; } }
.detail__dalsi a { display: block; padding: 1.25rem; border: 1.5px solid var(--c-linka); border-radius: var(--hrana); text-decoration: none; font-family: var(--f-nadpis); font-weight: 700; font-size: 1.15rem; line-height: 1.25; }
.detail__dalsi a:hover { border-color: var(--c-text); }
.detail__dalsi span { display: block; font-family: var(--f-text); font-weight: 500; font-size: .9rem; color: var(--c-tlumeny); margin-bottom: .3rem; }

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

/* css/style.css */
/* Návrh 1 – „Nášlapy“: světlý, čistý; desky jako nášlapy přes trávník */
:root {
  --vapno: #FFFFFF;
  --deska: #EEF0EC;
  --deska-hrana: #DCDFD8;
  --grafit: #322F31;
  --sterk: #5E626C;
  --trava: #5CD804;
  --trava-svetla: #7BE62F;
  --trava-hluboka: #2E7300;
  --travnik: #E4F4D6;
  --deska-svetla: #F7F8F5;
  --deska-bok: #CBD0C6;
  --outlet: #252422;
  --outlet-text: #F2F3EE;
  --outlet-sedy: #B9BDC6;
  /* Koordinace – modrá z vizitky (CMYK 99/66/0/0) */
  --modra: #045598;
  --modra-tmava: #03467D;
  --modra-svetla: #E8EFF7;
  --modra-seda: #D3E1F0;

  --c-pozadi: var(--vapno);
  --c-text: var(--grafit);
  --c-tlumeny: var(--sterk);
  --c-plocha: var(--deska);
  --c-linka: var(--deska-hrana);
  --c-akcent: var(--trava);
  --c-akcent-hover: var(--trava-svetla);
  --c-akcent-text: var(--outlet);
  --c-odkaz: var(--trava-hluboka);
  --c-fokus: var(--trava-hluboka);
  --c-pole: var(--vapno);
  --c-pole-okraj: #C9CDC5;

  --f-nadpis: 'Raleway', 'Avenir Next', system-ui, sans-serif;
  --f-text: 'Instrument Sans', system-ui, sans-serif;
  --hrana: 4px;
  --sirka: 84rem;
  --okraj: clamp(1rem, 4vw, 3rem);
  --sekce: clamp(4.5rem, 9vw, 8.5rem);
  --krivka: cubic-bezier(.2, .7, .2, 1);
}
h1, h2, h3 { font-variant-numeric: lining-nums; letter-spacing: -.015em; }
h1, h2, h3, .detail__nazev { overflow-wrap: break-word; }
@media (max-width: 520px) { h1, h2, h3, .detail__nazev { hyphens: auto; -webkit-hyphens: auto; } }
h2 { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.6rem); }

/* ---------- hlavička ---------- */
.hlavicka { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .94); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; transition: border-color .3s ease; }
.hlavicka.je-posunuta { border-bottom-color: var(--deska-hrana); }
.hlavicka__in { display: flex; align-items: center; gap: 1.5rem; min-height: 4.75rem; }
.logo { --logo-napis-w: clamp(9rem, 7.6rem + 3vw, 11.5rem); --logo-kruh-w: 10.5rem; --logo-kruh-top: -.2rem; } /* nápis GardenGO je od 13. 10. jednořádkový */
.menu { margin-left: auto; display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.25rem); }
.menu__odkazy { display: flex; gap: clamp(1rem, 2vw, 2rem); }
.menu__odkazy a { text-decoration: none; font-weight: 500; padding-block: .5rem; background: linear-gradient(var(--trava), var(--trava)) left bottom / 0 3px no-repeat; transition: background-size .25s var(--krivka); }
.menu__odkazy a:hover, .menu__odkazy a[aria-current="page"] { background-size: 100% 3px; }
.menu__tlacitka { display: flex; align-items: center; gap: .5rem; }
.menu__koordinace { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.6rem; padding: .55rem 1rem .55rem .75rem; background: var(--modra); color: #fff; border-radius: var(--hrana); text-decoration: none; font-weight: 600; font-size: .95rem; transition: background-color .2s ease; }
.menu__koordinace:hover { background: var(--modra-tmava); }
.menu__koordinace img, .hlavicka__koordinace img { width: 1.5rem; height: auto; flex: none; }
.menu__koordinace[aria-current="page"], .hlavicka__koordinace[aria-current="page"] { outline: 3px solid var(--modra-seda); outline-offset: 2px; }
/* 2. 11. 2026 (klient): tlačítko větší, celý název; na užším počítači na dva řádky */
.menu__koordinace { min-height: 3.25rem; padding: .6rem 1.15rem .6rem .85rem; font-size: 1rem; line-height: 1.2; }
@media (max-width: 1320px) { .menu__koordinace span { max-width: 11.5rem; } }
.menu__tel { font-weight: 600; text-decoration: none; font-variant-numeric: lining-nums; white-space: nowrap; }
.hlavicka__koordinace, .menu-tlacitko { display: none; }

@media (max-width: 1080px) {
  .menu__tel { display: none; }
}
@media (max-width: 899px), (max-width: 1199px) and (max-height: 560px), (hover: none) and (pointer: coarse) and (max-width: 1199px) {
  .hlavicka__in { min-height: 4rem; gap: .75rem; }
  .hlavicka__koordinace { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .9rem; background: var(--outlet); color: var(--outlet-text); border-radius: var(--hrana); font-weight: 600; text-decoration: none; font-size: .95rem; }
  .hlavicka__koordinace { margin-left: auto; gap: .45rem; padding-left: .65rem; background: var(--modra); color: #fff; }
  .hlavicka__koordinace img { width: 1.35rem; }
  .hlavicka__in { gap: .5rem; }
  .menu__tlacitka { flex-direction: column; align-items: stretch; }
  .menu__koordinace { padding: 1rem; font-size: 1.05rem; }
  .menu-tlacitko { display: grid; place-content: center; gap: 6px; width: 2.9rem; height: 2.9rem; border: 1.5px solid var(--deska-hrana); border-radius: var(--hrana); background: var(--vapno); cursor: pointer; }
  .menu-tlacitko span { display: block; width: 20px; height: 2px; background: var(--grafit); transition: transform .25s var(--krivka); }
  .menu-otevrene .menu-tlacitko span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-otevrene .menu-tlacitko span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .menu {
    position: fixed; inset: 4rem 0 0; z-index: 40; margin: 0; padding: 2rem var(--okraj) 3rem;
    overflow-y: auto; overscroll-behavior: contain;
    flex-direction: column; align-items: stretch; gap: 1.5rem; background: var(--vapno);
    visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .25s ease, transform .25s var(--krivka), visibility 0s linear .25s;
  }
  .menu-otevrene .menu { visibility: visible; opacity: 1; transform: none; transition: opacity .25s ease, transform .25s var(--krivka); }
  .menu__odkazy { flex-direction: column; gap: 0; }
  .menu__odkazy a { display: block; padding: 1rem 0; font-family: var(--f-nadpis); font-weight: 800; font-size: 1.9rem; border-bottom: 1px solid var(--deska-hrana); background: none; }
  .menu__tel { display: block; font-size: 1.3rem; }
}
/* úzké telefony: dvě tlačítka + menu se musí vejít vedle loga */
/* telefony do 520 px (i iPhone Plus / Pro Max 430–440 px): kompaktní tlačítka. 14. 10. 2026: dřív jen do 420 px
   a v Safari na 430–440 px přetékal nápis „Koordinace“ z tlačítka */
@media (max-width: 520px) {
  .logo { --logo-napis-w: min(28vw, 7.75rem); }
  .hlavicka__in { flex-wrap: nowrap; }
  .hlavicka__koordinace { padding: .3rem .6rem; font-size: .8125rem; line-height: 1.15; max-width: 11.5rem; }
  .menu-tlacitko { width: 2.75rem; height: 2.75rem; }
}
/* tlačítka v hlavičce se nikdy nezmáčknou pod velikost textu – když chybí místo, zmenší se logo */
@media (max-width: 899px), (max-width: 1199px) and (max-height: 560px), (hover: none) and (pointer: coarse) and (max-width: 1199px) {
  .menu-tlacitko { flex: none; white-space: nowrap; }
  .hlavicka__koordinace { flex: 0 1 auto; min-width: 0; text-wrap: balance; }
  .hlavicka__in > .logo { flex: 0 1 auto; min-width: 0; }
  .hlavicka__in > .logo .logo__napis { max-width: 100%; }
}
/* telefony: logo si drží velikost, zalamuje se text tlačítka */
@media (max-width: 520px) { .hlavicka__in > .logo { flex: none; } }
/* nejužší telefony: ikonka Koordinace se do hlavičky nevejde */
@media (max-width: 389px) { .hlavicka__koordinace img { display: none; } .hlavicka__koordinace { padding-left: .6rem; font-size: .75rem; } }

/* ---------- úvod ---------- */
.uvod { padding-block: clamp(1.5rem, 4vw, 3.5rem) clamp(2.5rem, 5vw, 4rem); } /* menší spodek – navazuje pás partnerů */
.uvod__in { display: grid; gap: 2.25rem; }
/* 19. 10. 2026 (klient): nadpis tak velký, aby se každý ze 3 řádků z administrace vešel na jeden řádek
   (10 % šířky sloupce ≈ nejdelší řádek „stavba pod kontrolou“); delší text se normálně zalomí */
.uvod__text { container-type: inline-size; }
.uvod__nadpis { font-size: clamp(2rem, 10cqi, 4rem); line-height: 1; letter-spacing: -.03em; }
@media (min-width: 900px) { .uvod__nadpis { font-size: clamp(2rem, 10cqi, 5rem); } }
.uvod__nadpis span { display: block; }
/* 19. 10. 2026: slova v **hvězdičkách** zeleně v barvě z loga (#4FC601, změřeno z logo-gardengo-kruh.webp) */
.uvod__nadpis .zelene { font-style: normal; color: #4FC601; }
.uvod__perex { margin-top: 1.5rem; max-width: 34rem; font-size: clamp(1.08rem, 1rem + .3vw, 1.25rem); color: var(--sterk); }
.uvod__akce { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.uvod__tel { text-decoration: none; font-weight: 700; font-size: 1.15rem; font-variant-numeric: lining-nums; }
.uvod__tel span { display: block; font-weight: 500; font-size: .85rem; color: var(--sterk); }
.uvod__foto { position: relative; overflow: hidden; border-radius: var(--hrana); aspect-ratio: 4 / 3; }
.uvod__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; }
@media (min-width: 900px) {
  /* 19. 10. 2026 (klient): víc místa pod kulatým logem, text sladěný s fotkou –
     horní hrana nadpisu = horní hrana fotky, tlačítka dole = spodek fotky (fotka má výšku textu) */
  .uvod { padding-top: 7.5rem; }
  .uvod__in { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: stretch; gap: clamp(2rem, 4vw, 4.5rem); }
  .uvod__text { display: flex; flex-direction: column; }
  .uvod__akce { margin-top: auto; padding-top: 2rem; }
  .uvod__foto { aspect-ratio: auto; min-height: 26rem; }
}

/* ---------- partneři – pás pod úvodem ---------- */
.partneri { padding-block: 0 clamp(3rem, 6vw, 4.5rem); }
.partneri__in { display: grid; gap: 1rem; padding-top: clamp(1.5rem, 3vw, 2.25rem); border-top: 1px solid var(--deska-hrana); }
.partneri__nadpis { font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); letter-spacing: -.015em; }
.partneri__seznam li + li { border-top: 1px solid var(--deska-hrana); }
.partner { display: grid; grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); align-items: center; gap: 1.25rem; padding-block: .9rem; text-decoration: none; }
.partner__logo { height: 3.5rem; display: flex; align-items: center; }
.partner__logo img { height: 100%; width: 100%; object-fit: contain; object-position: left center; }
.partner__nazev { overflow-wrap: anywhere; font-family: var(--f-nadpis); font-weight: 700; font-size: 1.08rem; line-height: 1.2; text-decoration: underline 2px transparent; text-underline-offset: .3em; transition: color .25s ease, text-decoration-color .25s ease; }
.partner:hover .partner__nazev, .partner:focus-visible .partner__nazev { color: var(--trava-hluboka); text-decoration-color: currentColor; }
@media (min-width: 900px) {
  .partneri__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(2rem, 4vw, 4.5rem); }
  .partneri__seznam { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .partneri__seznam li + li { border-top: 0; border-left: 1px solid var(--deska-hrana); }
  .partner { grid-template-columns: none; justify-items: center; text-align: center; gap: .85rem; padding: .25rem clamp(.75rem, 1.5vw, 1.5rem); }
  .partner__logo { height: 4.5rem; width: 100%; justify-content: center; }
  .partner__logo img { object-position: center; }
}

/* ---------- koordinace – modrý obdélník pod partnery (jako Outlet) ---------- */
.tlacitko--bile { background: #fff; border-color: #fff; color: var(--modra); }
.tlacitko--bile:hover { background: var(--modra-svetla); border-color: var(--modra-svetla); }
.koord { padding-block: 0 clamp(3.5rem, 7vw, 6rem); }
.koord__in { display: grid; gap: 1.5rem; align-items: end; }
.koord__vedle { font-family: var(--f-nadpis); font-weight: 800; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem); line-height: 1.15; max-width: 18ch; }
.koord__blok { background: var(--modra); color: #fff; border-radius: var(--hrana); padding: clamp(1.5rem, 4vw, 3rem); display: grid; gap: 2rem; }
.koord__text { display: grid; gap: 1.25rem; justify-items: start; align-content: center; }
.koord__text h2 { font-size: clamp(2rem, 1.5rem + 2vw, 3.2rem); }
.koord__logo { width: clamp(10rem, 6rem + 12vw, 16rem); height: auto; }
.koord__text p { color: var(--modra-seda); font-size: 1.1rem; max-width: 30rem; }
.koord__cena { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; font-variant-numeric: lining-nums; }
.koord__text .koord__cena { color: #fff; }
.koord__cena span { flex-basis: 100%; font-size: .9rem; color: var(--modra-seda); }
.koord__cena strong { font-family: var(--f-nadpis); font-weight: 800; font-size: clamp(1.5rem, 1.3rem + .6vw, 1.85rem); line-height: 1.05; } /* 19. 10. menší (klient) */
.koord__foto { position: relative; overflow: hidden; border-radius: 2px; aspect-ratio: 3 / 2; }
.koord__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; } /* obrázek od klienta – dům nahoře */
@media (min-width: 900px) {
  /* 19. 10. 2026 (klient): modrý blok vlevo, věta vpravo – Outlet pod ním je vpravo, bloky se střídají */
  .koord__in { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: clamp(1.5rem, 3.5vw, 3.5rem); }
  .koord__vedle { order: 2; padding-bottom: 1rem; }
  .koord__blok { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: stretch; }
  .koord__foto { aspect-ratio: auto; min-height: 25rem; }
}

/* ---------- stránka Koordinace – modrý svět vizitky ---------- */
.svet-modry { --c-akcent: var(--modra); --c-akcent-hover: var(--modra-tmava); --c-akcent-text: #fff; --c-odkaz: var(--modra-tmava); --c-fokus: var(--modra); }
.koord-uvod { background: var(--modra); color: #fff; padding-block: clamp(2.5rem, 6vw, 5.5rem); }
.koord-uvod__in { display: grid; gap: 2.5rem; }
.koord-uvod__logo { width: clamp(9.5rem, 7rem + 6vw, 13rem); height: auto; margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.koord-uvod h1 { font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.6rem); line-height: 1.02; letter-spacing: -.025em; max-width: 18ch; }
.koord-uvod__perex { margin-top: 1.5rem; max-width: 36rem; font-size: clamp(1.08rem, 1rem + .3vw, 1.25rem); color: var(--modra-seda); }
.koord-uvod__cena { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .28); display: grid; gap: .35rem; max-width: 30rem; }
.koord-uvod__cena-nazev { font-weight: 600; color: var(--modra-seda); }
.koord-uvod__cena-castka { font-variant-numeric: lining-nums; font-size: 1.15rem; }
.koord-uvod__cena-castka strong { font-family: var(--f-nadpis); font-weight: 800; font-size: clamp(1.9rem, 1.6rem + 1vw, 2.5rem); line-height: 1; margin-right: .2rem; } /* 19. 10. menší (klient) */
.koord-uvod__cena-pozn { font-size: .9rem; }
.koord-uvod__akce { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.koord-uvod__tel { color: #fff; text-decoration: none; font-weight: 700; font-size: 1.15rem; font-variant-numeric: lining-nums; }
.koord-uvod__tel span { display: block; font-weight: 500; font-size: .85rem; color: var(--modra-seda); }
.koord-uvod__foto { position: relative; overflow: hidden; border-radius: var(--hrana); aspect-ratio: 4 / 5; max-height: 80vh; }
.koord-uvod__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
@media (min-width: 900px) {
  .koord-uvod__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
  .koord-uvod__foto { aspect-ratio: 3 / 4; max-height: none; }
}
.koord-pro { background: var(--modra-svetla); padding-block: clamp(3rem, 6vw, 5rem); }
.koord-pro__in { display: grid; gap: 2rem; }
.koord-pro h2 { font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem); max-width: 16ch; }
.koord-pro__text p { margin-top: 1rem; color: var(--sterk); font-size: 1.12rem; max-width: 34rem; }
.koord-pro__seznam { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: .75rem; align-content: center; }
.koord-pro__seznam li { display: flex; align-items: center; gap: .7rem; min-height: 4rem; padding: .9rem 1.1rem; background: #fff; border-radius: var(--hrana); font-family: var(--f-nadpis); font-weight: 700; font-size: clamp(1.02rem, .95rem + .35vw, 1.25rem); line-height: 1.15; }
.koord-pro__seznam li::before { content: ""; flex: none; width: .7rem; height: .7rem; background: var(--modra); border-radius: 2px; }
@media (min-width: 900px) {
  .koord-pro__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
  .koord-pro__seznam { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.koord-cinnosti { padding-block: var(--sekce); }
.koord-cinnosti h2 { font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.6rem); margin-bottom: clamp(2rem, 4vw, 3rem); }
.koord-cinnosti__seznam li { display: grid; gap: .4rem; padding-block: 1.4rem; border-top: 1px solid var(--deska-hrana); }
.koord-cinnosti__seznam li:last-child { border-bottom: 1px solid var(--deska-hrana); }
.koord-cinnosti__seznam h3 { position: relative; padding-left: 1.4rem; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); }
.koord-cinnosti__seznam h3::before { content: ""; position: absolute; left: 0; top: .42em; width: .7rem; height: .7rem; background: var(--modra); border-radius: 2px; }
.koord-cinnosti__seznam p { color: var(--sterk); font-size: 1.08rem; max-width: 40rem; padding-left: 1.4rem; }
.koord-cinnosti__seznam strong { color: var(--modra-tmava); font-weight: 700; }
@media (min-width: 900px) {
  .koord-cinnosti__seznam li { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: baseline; gap: clamp(2rem, 4vw, 4.5rem); padding-block: 1.75rem; }
  .koord-cinnosti__seznam p { padding-left: 0; }
}
.svet-modry .kontakt { background: var(--modra-svetla); }
.svet-modry .kontakt__tel { background-image: linear-gradient(var(--modra), var(--modra)); }
.svet-modry .kontakt__seznam a { text-decoration-color: var(--modra); }

/* ---------- nášlapy (služby) ---------- */
.sluzby { padding-block: 0 var(--sekce); overflow: hidden; }
.sluzby__hlava { display: grid; gap: 1rem; max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sluzby__hlava p { color: var(--sterk); font-size: 1.15rem; }
/* pás trávníku přes celou šířku, na něm desky */
.naslapy { position: relative; display: grid; grid-auto-rows: 1fr; gap: 1.1rem; padding-block: 2.5rem; } /* všechny desky stejně vysoké */
.naslapy::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); background: var(--travnik); }
.naslap {
  position: relative; background: var(--deska-svetla); border-radius: var(--hrana);
  box-shadow: 0 5px 0 var(--deska-bok);
  padding: 1.5rem 1.4rem 1.7rem; display: grid; gap: .55rem; align-content: start;
  transition: background-color .3s ease, box-shadow .3s ease;
}
.sluzby { isolation: isolate; }
.naslap h3 { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); line-height: 1.15; }
.naslap p { color: var(--sterk); font-size: .98rem; transition: color .3s ease; }
.naslap:hover, .naslap:focus-within { background: var(--trava); box-shadow: 0 5px 0 #46A800; }
.naslap:hover p { color: var(--grafit); }
/* desky rovně v řadě (14. 10. 2026 – klient nechtěl schody ani cikcak), všechny stejně vysoké */
@media (min-width: 600px) {
  .naslapy { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; padding-block: 3.5rem; }
}
@media (min-width: 1200px) {
  .naslapy { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.1rem; padding-block: 4.5rem; }
  .naslap { min-height: 15rem; }
}
.sluzby__dale { margin-top: clamp(2.5rem, 5vw, 4rem); max-width: 54rem; font-size: 1.12rem; color: var(--sterk); }
.sluzby__dale strong { color: var(--grafit); font-weight: 600; }

/* ---------- o nás ---------- */
.onas { padding-block: var(--sekce); background: var(--deska); }
.onas__in { display: grid; gap: 3rem; }
.onas__fotky { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.onas__foto { position: relative; }
.onas__foto img { width: 100%; aspect-ratio: 3 / 4.6; object-fit: cover; border-radius: var(--hrana); }
.onas__foto--b { margin-top: 3.5rem; }
.onas__foto figcaption { margin-top: .6rem; font-size: .9rem; color: var(--sterk); }
.onas__text { display: grid; gap: 1.25rem; align-content: center; }
.onas__perex { font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem); color: var(--grafit); }
.onas__text > p:not(.onas__perex) { color: var(--sterk); }
.onas__seznam { display: grid; gap: 0; border-top: 1.5px solid var(--grafit); }
.onas__seznam li { padding: .75rem 0 .75rem 1.6rem; border-bottom: 1px solid var(--deska-hrana); position: relative; font-weight: 500; }
.onas__seznam li::before { content: ""; position: absolute; left: 0; top: 1.15rem; width: .8rem; height: .55rem; background: var(--trava); border-radius: 1px; }
@media (min-width: 900px) {
  .onas__in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(3rem, 6vw, 6rem); }
}

/* ---------- realizace ---------- */
.realizace { padding-block: var(--sekce) clamp(3rem, 6vw, 5rem); }
.realizace__hlava { display: grid; gap: 1rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.realizace__hlava p { color: var(--sterk); font-size: 1.15rem; max-width: 36rem; }
.realizace__mrizka { display: grid; gap: 3rem 1.5rem; }
@media (min-width: 640px) { .realizace__mrizka { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1020px) {
  .realizace__hlava { grid-template-columns: 1fr 1fr; align-items: end; }
  .realizace__mrizka { grid-template-columns: repeat(3, 1fr); gap: 3.5rem 2rem; }
  .realizace__mrizka > li:nth-child(3n+2) { translate: 0 3.5rem; }
}
.realizace-karta__foto { border-radius: var(--hrana); }
.realizace__vse { margin-top: clamp(2.5rem, 6vw, 5rem); }

/* ---------- kontakt ---------- */
.kontakt { padding-block: var(--sekce); background: var(--deska); }
.kontakt__in { display: grid; gap: 3rem; }
.kontakt__perex { margin-top: 1rem; color: var(--sterk); font-size: 1.15rem; max-width: 30rem; }
.kontakt__tel { display: inline-block; margin-top: 2rem; font-family: var(--f-nadpis); font-weight: 800; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.9rem); text-decoration: none; font-variant-numeric: lining-nums; background: linear-gradient(var(--trava), var(--trava)) left 92% / 100% .3em no-repeat; }
.kontakt__seznam { margin-top: 2rem; display: grid; gap: 1rem; }
.kontakt__seznam span { display: block; font-size: .85rem; color: var(--sterk); }
.kontakt__seznam .nezalomit { display: inline; font-size: inherit; color: inherit; }
.nezalomit { white-space: nowrap; } /* název banky se nerozdělí na dva řádky (19. 10.) */
@media (max-width: 19em) { .nezalomit { white-space: normal; } } /* em = podle písma v telefonu: jen když se na řádek opravdu nevejde */
.kontakt__seznam a { font-weight: 600; text-decoration-color: var(--trava); text-underline-offset: .25em; text-decoration-thickness: 2px; }
.kontakt__formular { background: var(--vapno); padding: clamp(1.25rem, 3vw, 2.5rem); border-radius: var(--hrana); }
@media (min-width: 900px) { .kontakt__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(3rem, 6vw, 6rem); } }

/* ---------- patička ---------- */
/* černý blok OutletProGastro (2. 11. 2026, klient: bez náhledů fotek, v patičce, s doménou) */
.paticka__outlet { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; justify-items: start; margin-bottom: clamp(2.5rem, 5vw, 4rem); padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--outlet); color: var(--outlet-sedy); border-radius: var(--hrana); text-decoration: none; }
.paticka__outlet-logo { width: min(100%, 14rem); height: auto; }
.paticka__outlet .tlacitko { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.paticka__outlet-text { max-width: 34rem; font-size: 1.05rem; }
.paticka__outlet:hover .tlacitko--hlavni { background: var(--c-akcent-hover); border-color: var(--c-akcent-hover); }
@media (min-width: 900px) { .paticka__outlet { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); } }
.paticka { padding-block: clamp(3rem, 6vw, 5rem) 2rem; font-size: .95rem; }
.paticka__in { display: grid; gap: 2rem; }
.paticka__logo { width: 9rem; }
.paticka__sloupec { display: grid; gap: .4rem; align-content: start; color: var(--sterk); }
.paticka__sloupec a { text-decoration: none; color: var(--grafit); }
.paticka__sloupec a:hover { text-decoration: underline; }
.paticka__rejstrik { font-size: .85rem; }
.paticka__copy { color: var(--sterk); border-top: 1px solid var(--deska-hrana); padding-top: 1.5rem; grid-column: 1 / -1; }
@media (min-width: 900px) { .paticka__in { grid-template-columns: 1.2fr 2fr 1fr 1fr; } }

/* ---------- podstránky ---------- */
.stranka { min-height: 60vh; }

/* výzva pod realizacemi */
.vyzva { background: var(--travnik); padding-block: clamp(3rem, 6vw, 5rem); }
.vyzva__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
.vyzva h2 { font-size: clamp(1.8rem, 1.3rem + 2vw, 3rem); }
.vyzva__akce { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.vyzva__tel { font-weight: 700; font-size: 1.2rem; text-decoration: none; font-variant-numeric: lining-nums; }
.detail__nazev, .stranka-hlava h1 { letter-spacing: -.025em; }

/* na mobilu bez rozmazání pozadí – jinak by se rozbilo pevné menu přes celou obrazovku */
@media (max-width: 899px), (max-width: 1199px) and (max-height: 560px), (hover: none) and (pointer: coarse) and (max-width: 1199px) { .hlavicka { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--vapno); } }

/* ---------- textová stránka (zásady) a 404 – 13. 10. 2026 ---------- */
.text-stranky { max-width: 46rem; padding-bottom: var(--sekce); }
.text-stranky h2 { font-size: clamp(1.35rem, 1.15rem + .8vw, 1.75rem); margin: 2.5rem 0 .75rem; }
.text-stranky p, .text-stranky li { color: var(--grafit); }
.text-stranky p + p { margin-top: .6rem; }
.text-stranky ul { display: grid; gap: .5rem; margin: .5rem 0 .75rem; }
.text-stranky li { position: relative; padding-left: 1.4rem; }
.text-stranky li::before { content: ""; position: absolute; left: 0; top: .62em; width: .6rem; height: .4rem; background: var(--trava); border-radius: 1px; }
.text-stranky a:not(.tlacitko) { color: var(--trava-hluboka); }
.text-stranky .tlacitko { margin-top: 2.5rem; }
.odkazy-404 { display: flex; flex-wrap: wrap; gap: .75rem; padding-bottom: var(--sekce); }
.formular__souhlas a { color: inherit; text-underline-offset: .2em; }

/* ---------- mobil: větší plochy pro prst (audit 13. 10. 2026, WCAG 2.5.8) ---------- */
@media (max-width: 899px) {
  .logo { padding-block: .5rem; }
  .paticka__sloupec { gap: .1rem; }
  .paticka__sloupec a { display: inline-block; padding-block: .3rem; }
  .kontakt__seznam a { display: inline-block; padding-block: .2rem; }
}

/* drobečková navigace u detailu realizace (SEO, 13. 10. 2026) */
.drobecky { margin-bottom: 1.5rem; font-size: .92rem; }
.drobecky ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
.drobecky li { color: var(--sterk); }
.drobecky li + li::before { content: "/"; margin-right: .5rem; color: var(--deska-bok); }
.drobecky a { color: var(--trava-hluboka); font-weight: 600; text-underline-offset: .2em; display: inline-block; padding-block: .2rem; }
.drobecky [aria-current] { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* ---------- úvodní animace v CSS (13. 10. 2026) ----------
   Spustí se hned při prvním vykreslení – nečekají na GSAP. Fotky nahoře se neprolínají (jen usadí),
   jinak by je měření rychlosti (LCP) započítalo až po animaci. */
@keyframes vjezd { from { opacity: 0; transform: translateY(30px); } }
@keyframes usadit-foto { from { transform: scale(1.07); } }
@media (prefers-reduced-motion: no-preference) {
  .uvod__nadpis span, .uvod__perex, .uvod__akce,
  .koord-uvod__text > *, .stranka-hlava > *, .detail__hlava > * {
    animation: vjezd 1s cubic-bezier(.2, .7, .2, 1) both;
  }
  .uvod__nadpis span:nth-child(2), .koord-uvod__text > :nth-child(2), .stranka-hlava > :nth-child(2), .detail__hlava > :nth-child(2) { animation-delay: .1s; }
  .uvod__nadpis span:nth-child(3), .koord-uvod__text > :nth-child(3), .detail__hlava > :nth-child(3) { animation-delay: .2s; }
  .uvod__perex, .koord-uvod__text > :nth-child(4), .detail__hlava > :nth-child(4) { animation-delay: .3s; }
  .uvod__akce, .koord-uvod__text > :nth-child(5) { animation-delay: .4s; }
  .uvod__foto img, .koord-uvod__foto img { animation: usadit-foto 1.8s cubic-bezier(.2, .7, .2, 1) both; }
}