/* ============================================================
   JAKESCHOVÁ – REDESIGN · SPOLEČNÝ ZÁKLAD
   Rozvržení, funkční prvky (výkres, mapa, záložky, formulář, okna) a přístupnost.
   Barvy, písma a charakter dodává soubor stylu: styles/vykres.css, spis.css, krajina.css.
   Styl nastavuje primitiva --p-* (světlý i tmavý režim) a písma --sans / --display.
   ============================================================ */
:root {
    --p-bg: #ffffff; --p-surface: #f0f0ee; --p-ink: #151515; --p-muted: #5a5a5a;
    --p-accent: #1f4fcf; --p-accent-ink: #ffffff;
    --p-field: #151515; --p-field-surface: #252525; --p-field-ink: #ffffff; --p-field-muted: #b0b0b0;
    --p-field-accent: #ffffff; --p-field-accent-ink: #151515;
    /* barvy legendy územního plánu – shodné s výkresem v úvodu */
    --z-bi: #f0d796; --z-so: #e2ae84; --z-vd: #c5bfd3; --z-zv: #b4cf9f; --z-ov: #dc9a92; --z-w: #bddadd;
}

/* ============================================================
   2) ROLE, PÍSMO, ROZMĚRY
   ============================================================ */
:root {
    --bg: var(--p-bg);
    --surface: var(--p-surface);
    --ink: var(--p-ink);
    --muted: var(--p-muted);
    --accent: var(--p-accent);
    --accent-ink: var(--p-accent-ink);
    --danger: #b3261e;
    --ok: #1d7a46;

    --display: var(--sans);
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* jen popisky uvnitř výkresu a mapy */ /* taste-skill-ignore */
    --r: 2px;                                  /* jediné zaoblení na webu: téměř hrana, jako výkres */
    --ease: cubic-bezier(.2, .7, .2, 1);       /* pohyb na scéně (výkres, mapa, kolejnice) */
    --ease-out: cubic-bezier(.23, 1, .32, 1);  /* odezva ovládacích prvků */
    --press: 160ms;
    --hover: 200ms;
    --hdr: 72px;
    color-scheme: light;
}
/* Tmavá sekce: stejné role, jen z „pole“ */
.on-dark {
    --bg: var(--p-field);
    --surface: var(--p-field-surface);
    --ink: var(--p-field-ink);
    --muted: var(--p-field-muted);
    --accent: var(--p-field-accent);
    --accent-ink: var(--p-field-accent-ink);
    background: var(--bg);
    color: var(--ink);
}
:root[data-theme="dark"] .on-dark { --danger: #ff9c94; --ok: #8fe0ae; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --danger: #ff9c94; --ok: #8fe0ae; } }
.on-dark { --danger: #ffb0a8; --ok: #9fe8b9; }

/* ============================================================
   3) ZÁKLAD
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr) + 12px); -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 400 17px/1.55 var(--sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    overflow-x: clip;
    caret-color: var(--accent);
    accent-color: var(--accent);
    scrollbar-color: var(--muted) var(--bg);
}
::selection { background: var(--accent); color: var(--accent-ink); }
img, svg { max-width: 100%; }
img { height: auto; }
a { color: var(--accent); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a, button, summary, [role="button"] { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--accent); color: var(--accent-ink); padding: .7em 1.1em; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.08; letter-spacing: -.03em; color: var(--ink); margin: 0 0 .5em; text-wrap: balance; }
h1, .h1 { font-size: clamp(2.4rem, 4.4vw, 3.8rem); }
h2, .h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
h3 { font-size: 1.4rem; letter-spacing: -.02em; line-height: 1.2; }
h4 { font-size: 1.1rem; letter-spacing: -.01em; line-height: 1.3; }
h1 em, h2 em, h3 em { font-style: normal; }
p { margin: 0 0 1em; text-wrap: pretty; }
.lead { font-size: 1.2rem; line-height: 1.5; }
.small { font-size: .875rem; color: var(--muted); }
.center { text-align: center; }
strong, b { font-weight: 600; }

.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 48px); }
.wrap.narrow { max-width: 860px; }

.ico { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ============================================================
   4) TLAČÍTKA
   ============================================================ */
.btn, .btn-submit {
    display: inline-flex; align-items: center; justify-content: center; gap: .6em;
    padding: 1em 1.5em; border-radius: var(--r); border: 0;
    background: var(--accent); color: var(--accent-ink);
    font: 600 1rem/1 var(--sans); text-decoration: none; cursor: pointer;
    -webkit-user-select: none; user-select: none;
    transition: background var(--hover) ease, color var(--hover) ease, box-shadow var(--hover) ease, transform .25s var(--ease-out); /* taste-skill-ignore – vnitřní obrys / řádek tabulky, ne stín */
}
.btn:hover, .btn-submit:hover { background: color-mix(in srgb, var(--accent) 84%, var(--ink)); color: var(--accent-ink); text-decoration: none; }
.btn:active, .btn-submit:active { transform: scale(.97); transition-duration: var(--press); }
.btn .ico { width: 1.15em; height: 1.15em; transition: transform var(--hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .btn:hover .ico-arrow { transform: translateX(3px); } }
/* vedlejší tlačítko: obrys 2 px v barvě textu, při najetí se vyplní */
.btn.ghost { background: transparent; color: var(--ink); border: 2px solid var(--ink); padding: calc(1em - 2px) calc(1.5em - 2px); }
.btn.ghost.sm { padding: calc(.8em - 2px) calc(1.15em - 2px); }
.btn.ghost:hover, .btn.ghost.is-on { background: var(--ink); color: var(--bg); }
.btn.sm { padding: .8em 1.15em; font-size: .9375rem; }
.btn[disabled], .btn-submit[disabled] { opacity: .6; cursor: progress; transform: none; }

/* ============================================================
   5) HLAVIČKA
   ============================================================ */
.scroll-bar { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 90; pointer-events: none; }
.scroll-bar span { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: var(--accent); }

.site-header { position: fixed; inset: 0 0 auto 0; z-index: 70; height: var(--hdr); background: var(--bg); color: var(--ink); transition: background var(--hover) ease; }
.site-header.scrolled { background: var(--surface); }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
.nav { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.brand-mark { width: 40px; height: 40px; flex: none; }
.brand-mark rect { fill: var(--ink); }
.brand-mark text { font: 700 16px var(--sans); fill: var(--bg); letter-spacing: -.02em; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text b { font-size: 1.05rem; letter-spacing: -.01em; }
.brand-text small { font-size: .875rem; color: var(--muted); }

#nav-menu { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }
#nav-menu a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: .9375rem; padding: .6em 0; text-underline-offset: .35em; }
#nav-menu a:not(.btn-contact):hover { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--accent); }
#nav-menu .nav-tel { display: inline-flex; align-items: center; gap: .45em; font-variant-numeric: tabular-nums; }
#nav-menu .nav-tel .ico { width: 1.05em; height: 1.05em; }
#nav-menu .btn-contact { background: var(--accent); color: var(--accent-ink); padding: .75em 1.2em; border-radius: var(--r); font-weight: 600; transition: background var(--hover) ease, transform var(--press) var(--ease-out); }
#nav-menu .btn-contact:hover { background: color-mix(in srgb, var(--accent) 84%, var(--ink)); }
#nav-menu .btn-contact:active { transform: scale(.97); }

.nav-right { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 20px); }
.theme-btn, .hamburger { flex: none; width: 44px; height: 44px; border: 0; border-radius: var(--r); background: var(--surface); color: var(--ink); cursor: pointer; display: grid; place-items: center; padding: 0; transition: background var(--hover) ease, transform var(--press) var(--ease-out); }
.site-header.scrolled .theme-btn, .site-header.scrolled .hamburger { background: var(--bg); }
.theme-btn:active, .hamburger:active { transform: scale(.92); }
.theme-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-btn .i-sun { display: none; } .theme-btn[data-mode="dark"] .i-sun { display: block; } .theme-btn[data-mode="dark"] .i-moon { display: none; }

.hamburger { display: none; position: relative; }
.hamburger span { position: absolute; left: 12px; right: 12px; height: 2px; background: currentColor; transition: transform .3s var(--ease-out), opacity .2s; }
.hamburger span:nth-child(1) { top: 15px; } .hamburger span:nth-child(2) { top: 21px; } .hamburger span:nth-child(3) { top: 27px; }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1020px) {
    .hamburger { display: grid; }
    #nav-menu {
        position: fixed; inset: var(--hdr) 0 0 0; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px;
        background: var(--bg); padding: 18px clamp(20px, 5vw, 44px) 40px; opacity: 0; visibility: hidden; transform: translateY(-8px);
        transition: opacity .25s ease, transform .3s var(--ease-out), visibility .25s; overflow: auto;
    }
    #nav-menu.active { opacity: 1; transform: none; visibility: visible; }
    html.nav-open, html.nav-open body { overflow: hidden; }
    #nav-menu a:not(.btn-contact) { font-size: 1.75rem; font-weight: 600; letter-spacing: -.02em; padding: .35em 0; }
    #nav-menu .nav-tel { font-size: 1.15rem; font-weight: 500; letter-spacing: 0; padding-top: 1em; }
    #nav-menu .btn-contact { margin-top: 18px; text-align: center; padding: 1.1em; font-size: 1.05rem; }
}

/* ============================================================
   6) SEKCE A ÚVOD
   ============================================================ */
.section { padding: clamp(80px, 10vw, 150px) 0; background: var(--bg); position: relative; }
.section.alt { background: var(--surface); }
.section.dark { background: var(--bg); } /* barvy dodá .on-dark */

.head { max-width: 760px; margin: 0 0 clamp(36px, 5vw, 64px); }
.head.split { max-width: none; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(20px, 4vw, 72px); align-items: end; }
.head.split > p, .head > p { margin: 0; color: var(--muted); font-size: 1.1rem; }
.head h2 { margin-bottom: 0; }
.head > p { margin-top: 1rem; }
.head .more { white-space: nowrap; font-weight: 600; display: inline-flex; align-items: center; gap: .35em; }
@media (max-width: 820px) { .head.split { grid-template-columns: 1fr; align-items: start; } }

.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--bg); padding: calc(var(--hdr) + clamp(36px, 5vw, 72px)) 0 clamp(64px, 7vw, 110px); }
/* vrstevnice: skutečné izolinie z výškového modelu, kreslené maskou v barvě stylu */
.topo { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--topo-ink, var(--ink)); opacity: var(--topo-o, .08);
    -webkit-mask: var(--topo) center / cover no-repeat; mask: var(--topo) center / cover no-repeat; }
.scape, .clip, .pd-stamp, .lg { display: none; }
.plan-legend { list-style: none; display: none; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin: 16px auto 0; padding: 0; max-width: 520px; font-size: .875rem; color: var(--muted); }
.plan-legend li { display: inline-flex; align-items: center; gap: .45em; }
.plan-legend .lg { display: inline-block; width: 14px; height: 10px; }
.lg-bi { background: var(--z-bi); } .lg-so { background: var(--z-so); } .lg-vd { background: var(--z-vd); } .lg-zv { background: var(--z-zv); } .lg-ov { background: var(--z-ov); } .lg-w { background: var(--z-w); }
.lg-z { background: repeating-linear-gradient(45deg, #8b6a1d 0 1.5px, transparent 1.5px 4px); box-shadow: inset 0 0 0 1.5px #7a5a18; } /* taste-skill-ignore – šrafa z výkresu */
.doslo { margin: 0; font-weight: 600; color: var(--muted); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(36px, 5vw, 88px); align-items: center; }
.hero-title { font-size: clamp(2.1rem, 3.9vw, 3.5rem); line-height: 1.04; letter-spacing: -.035em; margin-bottom: .5em; }
.hero .lead { max-width: 54ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 2rem 0 0; }
.trust { list-style: none; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px clamp(16px, 2.4vw, 32px); max-width: 600px; }
.trust li { display: flex; flex-direction: column; gap: 2px; }
.trust b { font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.trust span { font-size: .9375rem; color: var(--muted); line-height: 1.35; }

.hero-visual { position: relative; }
.plan { position: relative; margin: 0 auto; max-width: 500px; }
.plan-sheet { overflow: hidden; line-height: 0; background: #f8f3e6; }
.hero-portrait { position: absolute; z-index: 5; /* vždy nad výkresem i přiloženými listy */ left: clamp(-64px, -4vw, -16px); bottom: 22%; display: flex; align-items: center; gap: 12px; background: var(--p-field); color: var(--p-field-ink); padding: 8px 18px 8px 8px; border-radius: var(--r); line-height: 1.25; }
.hero-portrait img { width: 76px; height: 76px; object-fit: cover; object-position: 50% 22%; display: block; }
.hero-portrait figcaption { display: flex; flex-direction: column; }
.hero-portrait b { font-size: 1.05rem; }
.hero-portrait span { font-size: .875rem; color: var(--p-field-muted); }

.plan-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 22px auto 0; max-width: 520px; }
.plan-steps button { -webkit-user-select: none; user-select: none; background: var(--surface); color: var(--ink); border: 0; border-radius: var(--r); padding: .65em 1em; font: 500 .9375rem/1 var(--sans); cursor: pointer; transition: background var(--hover) ease, color var(--hover) ease, transform var(--press) var(--ease-out); }
.plan-steps button:hover { background: color-mix(in srgb, var(--surface) 80%, var(--ink)); }
.plan-steps button.is-on { background: var(--ink); color: var(--bg); }
.plan-steps button:active { transform: scale(.96); }

@media (max-width: 960px) {
    .hero-grid { grid-template-columns: 1fr; }
    .hero-visual { max-width: 460px; margin-inline: auto; width: 100%; }
    .hero-portrait { left: 8px; }
}

/* ---- Výkres plánu (SVG) – kresba zůstává jako dřív ---- */
.plan-svg { display: block; width: 100%; height: auto; }
.ps-paper { fill: #f8f3e6; }
.ps-field { fill: #f3edda; }
.ps-cells path { fill: transparent; stroke: rgba(32, 46, 40, .3); stroke-width: .6; stroke-linejoin: round; transition: fill-opacity .9s ease; }
.ps-cells .z-BI { fill: #f0d796; } .ps-cells .z-SO { fill: #e2ae84; } .ps-cells .z-VD { fill: #c5bfd3; } .ps-cells .z-ZV { fill: #b4cf9f; } .ps-cells .z-OV { fill: #dc9a92; }
.ps-cells .dev { stroke-width: 1.5; stroke: #7a5a18; stroke-dasharray: 5 3; fill: transparent; transition: fill .6s ease; }
.ps-river .c { fill: none; stroke: #5f969f; stroke-width: 15; stroke-linecap: round; }
.ps-river .w { fill: none; stroke: #bddadd; stroke-width: 12.6; stroke-linecap: round; }
.ps-rail .c { fill: none; stroke: #26322d; stroke-width: 3.6; }
.ps-rail .w { fill: none; stroke: #f8f3e6; stroke-width: 1.9; stroke-dasharray: 6 6; }
.ps-roads .c path { fill: none; stroke: #26322d; stroke-width: 6.6; stroke-linecap: round; stroke-linejoin: round; }
.ps-roads .w path { fill: none; stroke: #fffaf0; stroke-width: 4.6; stroke-linecap: round; stroke-linejoin: round; }
.ps-bld path { fill: #26322d; opacity: .8; }
.ps-lbl text { font: 500 7.6px var(--mono); fill: #1d2a24; text-anchor: middle; letter-spacing: .05em; paint-order: stroke; stroke: rgba(255, 250, 236, .92); stroke-width: 2.4px; stroke-linejoin: round; }
.ps-devl text { font: 700 10px var(--mono); fill: #4a3508; text-anchor: middle; paint-order: stroke; stroke: rgba(255, 246, 220, .95); stroke-width: 2.6px; stroke-linejoin: round; }
.pin circle { fill: #c9a45c; stroke: #1d2a24; stroke-width: 1.2; }
.pin text { font: 700 8.5px var(--mono); fill: #14201b; text-anchor: middle; }
.ps-frame rect { fill: none; stroke: #1d2a24; stroke-width: 1.5; } .ps-frame rect.o { stroke-width: .6; }
.ps-frame path { stroke: #1d2a24; stroke-width: .7; fill: none; }
.ps-grid text { font: 500 7.5px var(--mono); fill: #3d4a44; }
.ps-scale path { stroke: #1d2a24; stroke-width: 1.2; fill: none; } .ps-scale text { font: 500 7px var(--mono); fill: #1d2a24; }
.ps-north circle { fill: #f8f3e6; stroke: #1d2a24; stroke-width: .9; } .ps-north path { fill: #1d2a24; } .ps-north text { font: 700 8px var(--sans); fill: #1d2a24; }
.ps-title .tb { fill: #f8f3e6; stroke: #1d2a24; stroke-width: 1.3; } .ps-title path { stroke: #1d2a24; stroke-width: .8; fill: none; }
.ps-title .t1 { font: 700 18px var(--sans); letter-spacing: .12em; fill: #14201b; }
.ps-title .t3 { font: 500 9px var(--mono); fill: #2e3a34; letter-spacing: .04em; }
.ps-title .t4 { font: 500 6.8px var(--mono); fill: #4a5851; letter-spacing: .14em; }
.ps-title .t5 { font: 600 12px var(--sans); fill: #14201b; }
.ps-title .t6 { font: 600 14px var(--sans); fill: #14201b; }
.ps-title .t7 { font: 500 8px var(--mono); fill: #4a5851; }
.ps-stamp rect { fill: none; stroke: #7a1f1a; stroke-width: 2.4; } .ps-stamp .in { stroke-width: .9; }
.ps-stamp .s1 { font: 800 23px var(--sans); letter-spacing: .18em; fill: #7a1f1a; }
.ps-stamp .s2 { font: 600 7px var(--mono); letter-spacing: .1em; fill: #6d1914; text-transform: uppercase; }
.ps-stamp { opacity: 1; transform-box: fill-box; transform-origin: center; }
.ps-bld { transition: opacity .8s; } .ps-lbl, .ps-devl, .ps-pins { transition: opacity .7s; } .pin { transition: opacity .5s; transform-box: fill-box; transform-origin: center; }
.plan[data-stage="0"] .ps-cells path { fill-opacity: 0; }
.plan[data-stage="0"] .ps-bld { opacity: .25; }
.plan[data-stage="0"] .ps-lbl, .plan[data-stage="0"] .ps-devl, .plan[data-stage="0"] .ps-pins, .plan[data-stage="0"] .ps-stamp { opacity: 0; }
.plan[data-stage="1"] .ps-devl, .plan[data-stage="1"] .ps-pins, .plan[data-stage="1"] .ps-stamp { opacity: 0; }
.plan[data-stage="0"] .ps-cells .dev, .plan[data-stage="1"] .ps-cells .dev { stroke-dasharray: none; stroke-width: .6; stroke: rgba(32, 46, 40, .3); }
.plan[data-stage="2"] .ps-cells .dev { fill: url(#ps-hatch); }
.plan[data-stage="2"] .ps-stamp { opacity: 0; }
.plan[data-stage="3"] .ps-cells .dev { fill: #e9c675; stroke-dasharray: none; stroke-width: 1.6; }
.plan[data-stage="3"] .ps-pins { opacity: 0; }
/* jediný „velký“ pohyb webu: razítko při vydání a špendlíky připomínek */
@keyframes stamp-in { 0% { opacity: 0; transform: scale(1.6) rotate(4deg); } 60% { opacity: 1; transform: scale(.97); } 100% { opacity: 1; transform: scale(1); } }
.plan[data-stage="3"].play .ps-stamp { animation: stamp-in .5s var(--ease-out) both; }
@keyframes pin-in { from { opacity: 0; transform: translateY(-6px) scale(.6); } to { opacity: 1; transform: none; } }
.plan[data-stage="2"].play .pin { animation: pin-in .4s var(--ease-out) both; animation-delay: calc(var(--i) * .12s); }

/* ============================================================
   7) OBCE (statický řádek místo běžícího pásu)
   ============================================================ */
.towns { background: var(--p-field); color: var(--p-field-ink); padding: 18px 0; font-size: .9375rem; line-height: 1.5; }
.towns p { margin-block: 0; }
.towns a { color: inherit; font-weight: 600; white-space: nowrap; margin-left: .4em; }

/* ============================================================
   8) PROČ SPOLUPRÁCE FUNGUJE
   ============================================================ */
.values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px) clamp(32px, 6vw, 96px); }
.value h3 { font-size: clamp(1.45rem, 2.2vw, 1.8rem); margin-bottom: .4em; }
.value p { margin: 0; max-width: 52ch; }
@media (max-width: 700px) { .values { grid-template-columns: 1fr; } }

/* ============================================================
   9) SLUŽBY
   ============================================================ */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.svc { display: grid; grid-template-columns: minmax(240px, .34fr) 1fr; gap: clamp(20px, 3vw, 40px); align-items: start; }
.svc-tabs { display: flex; flex-direction: column; gap: 4px; position: sticky; top: calc(var(--hdr) + 20px); }
.svc-tab { display: flex; flex-direction: column; gap: .25em; text-align: left; padding: 16px 18px; border: 0; border-radius: var(--r); background: transparent; color: var(--ink); cursor: pointer; font: inherit; transition: background var(--hover) ease, color var(--hover) ease; }
.svc-tab .t { font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.svc-tab .s { font-size: .9375rem; line-height: 1.4; color: var(--muted); }
.svc-tab:hover { background: var(--surface); }
.svc-tab.is-on { background: var(--ink); color: var(--bg); }
.svc-tab.is-on .s { color: inherit; opacity: .78; }

.svc-panels { min-width: 0; }
.svc-panel { background: var(--surface); border-radius: var(--r); padding: clamp(26px, 4vw, 52px); }
.svc-panel + .svc-panel { margin-top: 24px; }
html.js .svc-panel { display: none; }
html.js .svc-panel.is-on { display: block; animation: rise .3s var(--ease-out) both; }
html:not(.js) .svc-tabs { display: none; }
html:not(.js) .svc { grid-template-columns: minmax(0, 1fr); }
.svc-title { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: .6em; }
.svc-lead p { max-width: 68ch; }
.svc-sub { font-size: 1.15rem; margin: 2.2rem 0 1rem; }
.svc-stages { margin: 0; padding-left: 1.4em; display: grid; gap: .5em; }
.svc-stages li { padding-left: .3em; font-weight: 500; }
.svc-stages li::marker { color: var(--muted); font-variant-numeric: tabular-nums; }
.svc-more { margin: 1.1rem 0 0; }
.svc-more a { font-weight: 600; display: inline-flex; gap: .4em; align-items: center; }
.svc-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.svc-items li { display: grid; gap: .2em; }
.svc-items b { font-size: 1.1rem; }
.svc-items span { max-width: 68ch; }
.svc-goal { margin: 2.2rem 0 0; max-width: 68ch; }
.svc-cta { margin-top: 1.8rem; }
.scope { margin: clamp(40px, 5vw, 64px) 0 0; max-width: 90ch; }
.scope strong { color: var(--ink); }
@media (max-width: 900px) {
    .svc { grid-template-columns: 1fr; }
    .svc-tabs { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .svc-tab { background: var(--surface); }
    .svc-tab .s { display: none; }
}

/* ============================================================
   10) POSTUP (tmavé pole)
   ============================================================ */
.proc { overflow: hidden; }
.rail { position: relative; margin: 10px 0 12px; padding-top: 34px; }
.rail-line { position: absolute; left: 10%; right: 10%; top: 59px; height: 3px; background: var(--surface); z-index: 0; }
.rail-fill { position: absolute; inset: 0; background: var(--accent); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform .8s cubic-bezier(.5, 0, .2, 1); }
.rail-plane { position: absolute; left: calc(var(--p, 0) * 100%); top: 0; width: 32px; height: 27px; transform: translate(-50%, -50%) translateY(-36px); fill: var(--accent); transition: left .8s cubic-bezier(.5, 0, .2, 1); z-index: 2; }
.stns { display: grid; grid-template-columns: repeat(5, 1fr); list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; }
.stn { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; background: none; border: 0; padding: 0 4px; cursor: pointer; color: var(--muted); font: inherit; }
.stn-dot { width: 50px; height: 50px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-weight: 600; font-size: 1.05rem; color: var(--ink); font-variant-numeric: tabular-nums; transition: background var(--hover) ease, color var(--hover) ease, transform var(--hover) var(--ease-out); }
.stn:hover .stn-dot { background: color-mix(in srgb, var(--surface) 70%, var(--ink)); }
.stn:active .stn-dot { transform: scale(.94); transition-duration: var(--press); }
.stn.is-done .stn-dot { background: color-mix(in srgb, var(--accent) 35%, var(--surface)); }
.stn.is-on .stn-dot { background: var(--accent); color: var(--accent-ink); }
.stn-lbl { font-size: .9375rem; line-height: 1.25; text-align: center; max-width: 13ch; }
.stn.is-on .stn-lbl { color: var(--ink); font-weight: 600; }
.pds { margin-top: 32px; }
.pd { display: none; background: var(--surface); border-radius: var(--r); padding: clamp(24px, 3.6vw, 44px); }
.pd.is-on { display: block; animation: rise .3s var(--ease-out) both; }
html:not(.js) .pd { display: block; margin-bottom: 14px; }
.pd h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.pd ul { margin: .8em 0 0; padding-left: 1.2em; display: grid; gap: .5em; }
.pd li::marker { color: var(--accent); }
.proc-start { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px; margin-top: clamp(48px, 6vw, 80px); }
.proc-start h3 { font-size: 1.6rem; margin-bottom: .25em; }
.proc-start p { margin: 0; color: var(--muted); max-width: 56ch; }
@media (max-width: 760px) {
    .rail-line { top: 55px; }
    .rail-plane { width: 26px; height: 22px; transform: translate(-50%, -50%) translateY(-31px); }
    .stn-dot { width: 42px; height: 42px; font-size: .95rem; }
    .stn-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ============================================================
   11) O MNĚ
   ============================================================ */
.about-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.about-visual { position: sticky; top: calc(var(--hdr) + 24px); }
.portrait { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface); }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
.portrait-empty { display: grid; place-items: center; }
.portrait-empty span { font-size: 5rem; font-weight: 700; letter-spacing: -.04em; color: var(--muted); }
.certs { margin-top: 20px; padding: 24px 26px; background: var(--surface); border-radius: var(--r); }
.certs h3 { font-size: 1.05rem; margin: 0 0 .8rem; }
.certs ul { margin: 0; padding-left: 1.2em; display: grid; gap: .35em; }
.certs li { font-size: 1.05rem; }
.certs li::marker { color: var(--accent); }
.about-text .lead { font-size: 1.25rem; }
.about-text p:not(.lead) { max-width: 66ch; }
.path { list-style: none; margin: 2.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.path b { display: block; font-size: 2rem; letter-spacing: -.03em; margin-bottom: .2em; font-variant-numeric: tabular-nums; }
.path span { font-size: .9375rem; line-height: 1.45; color: var(--muted); display: block; }
@media (max-width: 900px) {
    .about-grid { grid-template-columns: 1fr; }
    .about-visual { position: static; max-width: 440px; }
}
@media (max-width: 560px) { .path { grid-template-columns: 1fr; gap: 16px; } }

/* ============================================================
   12) REFERENCE – MAPA
   Mapa je teď světlá „papírová“ – barvy bere z palety.
   ============================================================ */
.mapsec { overflow: hidden; }
.map-ui { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 clamp(26px, 3.4vw, 40px); }
.map-ui .chips { margin: 0; }
.chip, .chips a { -webkit-user-select: none; user-select: none; display: inline-flex; align-items: center; gap: .5em; border: 0; color: var(--ink); background: var(--bg); padding: .65em 1.05em; border-radius: var(--r); font: 500 .9375rem/1 var(--sans); text-decoration: none; cursor: pointer; transition: background var(--hover) ease, color var(--hover) ease, transform var(--press) var(--ease-out); }
.blog-section .chips a { background: var(--surface); }
.chip:hover, .chips a:hover { background: color-mix(in srgb, var(--bg) 82%, var(--ink)); }
.chip.is-on, .chips a.active { background: var(--ink); color: var(--bg); }
.chip:active { transform: scale(.96); }
.chip b { font-weight: 500; opacity: .7; font-variant-numeric: tabular-nums; }
.sw { display: inline-block; width: .75em; height: .75em; border-radius: 50%; flex: none; }
.sw.done { background: var(--accent); }
.sw.now { box-shadow: inset 0 0 0 2px currentColor; } /* taste-skill-ignore */
.sw.base { background: var(--ink); border-radius: 0; }
.chip.is-on .sw.done { background: var(--bg); }
.map-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.map-stage { position: relative; background: var(--bg); border-radius: var(--r); overflow: hidden; }
.jmap { position: relative; --k: 1; --ms: 1.1; --land-a: var(--surface); --land-b: var(--surface); }
.jmap svg { display: block; width: 100%; height: auto; }
.map-grat path { fill: none; stroke: var(--ink); stroke-opacity: .08; stroke-width: .7px; vector-effect: non-scaling-stroke; }
.map-grat-lbl text { font: 500 9px var(--sans); fill: var(--muted); }
.map-land { fill: url(#cz-land); stroke: none; }
#cz-dots circle { fill: var(--ink); fill-opacity: .06; }
.map-kraje { fill: none; stroke: var(--ink); stroke-opacity: .28; stroke-width: .9px; stroke-dasharray: 3 3.5; vector-effect: non-scaling-stroke; }
.map-praha { fill: var(--ink); fill-opacity: .06; stroke: var(--ink); stroke-opacity: .35; stroke-width: .8px; vector-effect: non-scaling-stroke; }
.map-rivers path { fill: none; stroke: #5f969f; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.r-major { stroke-width: 2px; opacity: .9; } .r-mid { stroke-width: 1.4px; opacity: .8; } .r-minor { stroke-width: 1px; opacity: .7; }
.map-outline { fill: none; stroke: var(--ink); stroke-width: 1.6px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.map-kraje-lbl text { font: 500 9px var(--sans); letter-spacing: .04em; fill: var(--muted); paint-order: stroke; stroke: var(--surface); stroke-width: 2.6px; stroke-linejoin: round; text-anchor: middle; }
.city { transform: scale(calc(var(--k) * var(--ms))); }
.city circle { fill: var(--bg); stroke: var(--muted); stroke-width: 1.2; }
.city.cap circle { fill: var(--ink); stroke: var(--ink); }
.city text { font: 500 10px var(--sans); fill: var(--muted); paint-order: stroke; stroke: var(--surface); stroke-width: 2.6px; stroke-linejoin: round; }
.map-scale path { fill: none; stroke: var(--ink); stroke-width: 1.2; } .map-scale text { font: 500 9px var(--sans); fill: var(--ink); }
.map-north circle { fill: none; stroke: var(--ink); stroke-opacity: .5; stroke-width: .9; } .map-north .thin { stroke-width: .6; }
.map-north path.thin { fill: none; stroke: var(--ink); stroke-opacity: .5; stroke-width: .8; }
.map-north .needle { fill: var(--ink); } .map-north .needle2 { fill: none; stroke: var(--ink); stroke-width: .8; }
.map-north text { font: 600 9px var(--sans); fill: var(--ink); text-anchor: middle; }

/* body, trasy, letadlo */
.arc { fill: none; stroke: var(--accent); stroke-opacity: .5; stroke-width: 1.1px; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; transition: opacity .3s, stroke-opacity .3s; }
.arc.now { stroke: var(--ink); stroke-opacity: .35; }
.arc.sel { stroke: var(--accent); stroke-opacity: 1; stroke-width: 2px; stroke-dasharray: none; opacity: 1 !important; }
.map-base { transform: scale(calc(var(--k) * var(--ms))); }
.b-ring { fill: none; stroke: var(--ink); stroke-width: 1px; opacity: .5; }
.b-ring2 { display: none; } /* pulzující kruh odstraněn */
.b-dot { fill: var(--ink); stroke: var(--bg); stroke-width: 1.4; }
.b-lbl { font: 600 11px var(--sans); fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.pt { transform: scale(calc(var(--k) * var(--ms))); cursor: pointer; outline: none; transition: opacity .3s; }
.pt .hit { fill: transparent; }
.pt .dot { stroke: var(--bg); stroke-width: 1.3; transition: transform .2s var(--ease-out); transform-box: fill-box; transform-origin: center; }
.pt.done .dot { fill: var(--accent); } .pt.done .core { fill: var(--accent-ink); }
.pt.now .dot { fill: var(--bg); stroke: var(--ink); stroke-width: 1.8; } .pt.now .core { fill: var(--ink); }
.pt .pulse { display: none; }
.pt:hover .dot, .pt:focus-visible .dot, .pt.sel .dot { transform: scale(1.5); }
.pt:focus-visible .hit { stroke: var(--accent); stroke-width: 1.4; }
.pt .lbl { font: 600 10px var(--sans); fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; opacity: 0; pointer-events: none; transition: opacity .2s; }
.pt.sel .lbl, .pt:hover .lbl, .pt:focus-visible .lbl, .jmap.zoomed .pt .lbl, .pt.lit .lbl { opacity: 1; }
.dir-r .lbl { text-anchor: start; transform: translate(8px, 3.4px); } .dir-l .lbl { text-anchor: end; transform: translate(-8px, 3.4px); }
.dir-t .lbl { text-anchor: middle; transform: translate(0, -9px); } .dir-b .lbl { text-anchor: middle; transform: translate(0, 17px); }
.jmap[data-filter="now"] .pt.done, .jmap[data-filter="now"] .arc.done, .jmap[data-filter="done"] .pt.now, .jmap[data-filter="done"] .arc.now { opacity: .12; pointer-events: none; }
.jmap.zoomed .map-grat-lbl, .jmap.zoomed .map-scale, .jmap.zoomed .map-north, .jmap.zoomed .map-kraje-lbl { opacity: 0; }
.map-plane { pointer-events: none; }
.plane-in { transform: scale(calc(var(--k) * var(--ms) * 1.3)); }
.map-plane path { fill: var(--ink); stroke: var(--bg); stroke-width: .8; }
.map-tip { position: absolute; z-index: 3; transform: translate(-50%, calc(-100% - 12px)); background: var(--ink); color: var(--bg); padding: .5em .8em; border-radius: var(--r); font: 600 .875rem/1.25 var(--sans); white-space: nowrap; pointer-events: none; }
.map-tip::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: inherit; transform: translateX(-50%) rotate(45deg); }
.map-tip span { display: block; font-weight: 400; opacity: .8; margin-top: .1em; }

.map-card { position: absolute; right: 16px; bottom: 16px; width: min(300px, calc(100% - 32px)); background: var(--p-field); color: var(--p-field-ink); border-radius: var(--r); padding: 20px 22px; z-index: 2; }
.map-card h3 { font-size: 1.4rem; margin: .3em 0 .25em; padding-right: 32px; color: inherit; }
.map-card p { margin: 0 0 .5em; font-size: .9375rem; line-height: 1.5; color: var(--p-field-muted); }
.map-card .mc-y { margin: 0; }
.mc-st { display: inline-flex; align-items: center; gap: .5em; font-size: .875rem; font-weight: 600; color: var(--p-field-ink); }
.mc-st::before { content: ""; width: .7em; height: .7em; border-radius: 50%; background: currentColor; }
.mc-st.now::before { background: transparent; box-shadow: inset 0 0 0 2px currentColor; } /* taste-skill-ignore */
.mc-x { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border: 0; border-radius: var(--r); background: transparent; color: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; transition: background var(--hover) ease, transform var(--press) var(--ease-out); }
.mc-x[hidden] { display: none; }
.mc-x:hover { background: var(--p-field-surface); }
.mc-x:active { transform: scale(.92); }
@media (max-width: 720px) {
    .jmap { --ms: 1.2; }
    .jmap svg { aspect-ratio: 1 / 1; }
    .map-kraje-lbl, .map-grat-lbl, .map-scale { display: none; }
    .map-card { position: static; width: auto; border-radius: 0; }
}
.map-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 16px 0 0; padding: 0; font-size: .9375rem; color: var(--muted); }
.map-legend li { display: inline-flex; align-items: center; gap: .55em; }
.map-legend .sw.now { color: var(--ink); }
.map-legend .note { margin-left: auto; }

.proj-list { list-style: none; margin: clamp(32px, 4vw, 52px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.proj[hidden] { display: none; }
.proj-b { width: 100%; height: 100%; text-align: left; font: inherit; background: var(--bg); border: 0; border-radius: var(--r); padding: 20px 22px; color: var(--ink); cursor: pointer; display: flex; flex-direction: column; gap: .3rem; transition: box-shadow var(--hover) ease, transform var(--press) var(--ease-out); } /* taste-skill-ignore – vnitřní obrys / řádek tabulky, ne stín */
.proj-b:hover, .proj.lit .proj-b { box-shadow: inset 0 0 0 2px var(--ink); } /* taste-skill-ignore */
.proj-b:active { transform: scale(.985); }
.pj-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: .5rem; }
.pj-st { display: inline-flex; align-items: center; gap: .45em; font-size: .875rem; font-weight: 600; }
.pj-st::before { content: ""; width: .65em; height: .65em; border-radius: 50%; }
.proj.done .pj-st::before { background: var(--accent); }
.proj.now .pj-st::before { box-shadow: inset 0 0 0 2px currentColor; } /* taste-skill-ignore */
.pj-y { font-size: .875rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.proj-b h3 { font-size: 1.25rem; margin: 0; }
.proj-b p { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--muted); flex: 1; }
.pj-k { margin-top: .6rem; font-size: .875rem; color: var(--muted); }
@media (min-width: 1021px) { .proj:last-child:nth-child(3n+1) { grid-column: 1 / -1; } .proj:last-child:nth-child(3n+1) .proj-b p { max-width: 80ch; flex: none; } }
@media (max-width: 1020px) { .proj-list { grid-template-columns: repeat(2, 1fr); } .proj:last-child:nth-child(2n+1) { grid-column: 1 / -1; } }
@media (max-width: 640px) { .proj-list { grid-template-columns: 1fr; } .map-legend .note { margin-left: 0; width: 100%; } }

/* ============================================================
   13) ZPĚTNÁ VAZBA
   ============================================================ */
.feedback-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 80px); align-items: start; margin-bottom: clamp(48px, 6vw, 88px); }
.feedback-grid h2 { margin: 0; }
.bigquote { margin: 0; }
.bigquote blockquote { margin: 0; }
.bigquote blockquote p { font-size: clamp(1.35rem, 2.3vw, 1.9rem); font-weight: 500; line-height: 1.3; letter-spacing: -.015em; margin: 0 0 1rem; text-wrap: balance; }
.bigquote figcaption { color: var(--muted); }
.bigquote figcaption b { color: var(--ink); }
.letters-title { font-size: 1.4rem; margin: 0 0 20px; }
.letters { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.ref-card { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r); overflow: hidden; text-decoration: none; color: var(--ink); transition: box-shadow var(--hover) ease, transform var(--press) var(--ease-out); } /* taste-skill-ignore – vnitřní obrys / řádek tabulky, ne stín */
.ref-card:hover { box-shadow: inset 0 0 0 2px var(--ink); } /* taste-skill-ignore */
.ref-card:active { transform: scale(.985); }
.ref-preview { aspect-ratio: 4 / 5; display: grid; place-items: center; overflow: hidden; }
.ref-preview img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ref-noimg .ico { width: 48px; height: 48px; color: var(--muted); }
.ref-card h4 { margin: 14px 16px 4px; font-size: 1.05rem; }
.ref-open { margin: 0 16px 16px; font-size: .9375rem; font-weight: 600; color: var(--accent); }
@media (max-width: 820px) { .feedback-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
    .letters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* ============================================================
   14) BLOG – karty a seznam
   ============================================================ */
.cards.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.article-card { display: flex; flex-direction: column; gap: .5rem; padding: 28px 26px 24px; background: var(--bg); border-radius: var(--r); text-decoration: none; color: var(--ink); transition: box-shadow var(--hover) ease, transform var(--press) var(--ease-out); } /* taste-skill-ignore – vnitřní obrys / řádek tabulky, ne stín */
.blog-section .article-card { background: var(--surface); }
.article-card:hover { box-shadow: inset 0 0 0 2px var(--ink); text-decoration: none; } /* taste-skill-ignore */
.article-card:active { transform: scale(.985); }
.article-card .meta { font-size: .875rem; color: var(--muted); }
.article-card h3 { font-size: 1.35rem; margin: .1em 0 .1em; }
.article-card p { margin: 0; color: var(--muted); font-size: .9375rem; flex: 1; }
.card-more { margin-top: .8rem; font-weight: 600; font-size: .9375rem; color: var(--accent); display: inline-flex; align-items: center; gap: .45em; }
.card-more::after { content: ""; width: 1.05em; height: 1.05em; background: currentColor; transition: transform var(--hover) var(--ease-out);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.ico-flip { transform: scaleX(-1); }
.back-link, .blog-pagination a { display: inline-flex; align-items: center; gap: .4em; }
@media (hover: hover) and (pointer: fine) { .article-card:hover .card-more::after { transform: translateX(4px); } }
.article-card.featured { grid-column: 1 / -1; padding: clamp(28px, 4vw, 48px); background: var(--p-field); color: var(--p-field-ink); }
.article-card.featured h3 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); color: inherit; }
.article-card.featured p { color: var(--p-field-muted); font-size: 1.05rem; max-width: 70ch; }
.article-card.featured .meta { color: var(--p-field-muted); } .article-card.featured .card-more { color: var(--p-field-accent); }
.article-card.featured:hover { box-shadow: inset 0 0 0 2px var(--p-field-accent); } /* taste-skill-ignore */
@media (max-width: 960px) { .cards.posts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cards.posts { grid-template-columns: 1fr; } }
.blog-section.page-top { padding-top: calc(var(--hdr) + clamp(40px, 6vw, 80px)); }
.empty { text-align: center; color: var(--muted); padding: 40px 0; }
.blog-pagination { margin-top: 40px; }
.blog-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.blog-pagination a, .blog-pagination span.page-numbers { padding: .65em 1.05em; background: var(--surface); border-radius: var(--r); text-decoration: none; color: var(--ink); font-weight: 500; }
.blog-pagination .page-numbers.current { background: var(--ink); color: var(--bg); }
.blog-pagination a:hover { background: color-mix(in srgb, var(--surface) 80%, var(--ink)); }
.blog-intro { position: relative; isolation: isolate; overflow: hidden; background: var(--bg); padding: calc(var(--hdr) + clamp(48px, 7vw, 96px)) 0 clamp(40px, 5vw, 64px); transition: max-height .8s ease, padding .8s ease, opacity .6s ease; max-height: 1400px; }
.blog-intro.zabalit-intro { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; }
.blog-intro h1 { max-width: 18ch; }
.blog-intro p { color: var(--muted); font-size: 1.1rem; max-width: 66ch; }
.blog-intro .btn { margin-top: .8rem; }
.blog-intro + .blog-section { padding-top: clamp(40px, 5vw, 64px); }

/* ============================================================
   15) ČASTÉ DOTAZY
   ============================================================ */
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq-grid .head { position: sticky; top: calc(var(--hdr) + 30px); margin: 0; }
.faq-grid .head .btn { margin-top: 1.6rem; }
.faq-list { display: grid; gap: 6px; }
.qa { background: var(--surface); border-radius: var(--r); }
.qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 22px; font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; color: var(--ink); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary i { position: relative; flex: none; width: 18px; height: 18px; }
.qa summary i::before, .qa summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: currentColor; transition: transform .3s var(--ease-out); }
.qa summary i::after { transform: rotate(90deg); }
.qa[open] summary i::after { transform: rotate(0); }
.qa-a { padding: 0 22px 22px; color: var(--muted); max-width: 66ch; animation: rise .28s var(--ease-out) both; }
.qa-a p { margin: 0; }
@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; } .faq-grid .head { position: static; } }

/* ============================================================
   16) KONTAKT (tmavé pole)
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(30px, 5vw, 76px); align-items: start; }
.info { display: grid; gap: 8px; }
.info-big { display: flex; align-items: flex-start; gap: 16px; padding: 18px 0; color: var(--ink); text-decoration: none; }
.info-big > .ico { width: 24px; height: 24px; margin-top: 1.55em; color: var(--accent); }
a.info-big:hover > span:last-child { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--accent); text-underline-offset: .2em; }
.info-big small { display: block; font-size: .875rem; color: var(--muted); margin-bottom: .3em; }
.info-big > span:last-child { font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.info-big.static > span:last-child { font-size: 1.05rem; font-weight: 500; letter-spacing: 0; line-height: 1.5; }
.info-actions { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; margin-top: 10px; }
.social { display: inline-flex; gap: 18px; }
.social a { display: inline-flex; align-items: center; gap: .45em; color: var(--ink); text-decoration: none; font-weight: 500; }
.social a:hover { text-decoration: underline; }
.after { margin: 20px 0 0; color: var(--muted); max-width: 46ch; }

/* formulář stojí na běžném světlém podkladu stránky */
.contact-form-container {
    --bg: var(--p-bg); --surface: var(--p-surface); --ink: var(--p-ink); --muted: var(--p-muted);
    --accent: var(--p-accent); --accent-ink: var(--p-accent-ink); --danger: #b3261e; --ok: #1d7a46;
    background: var(--bg); color: var(--ink); border-radius: var(--r); padding: clamp(26px, 3.8vw, 48px);
}
:root[data-theme="dark"] .contact-form-container { --danger: #ff9c94; --ok: #8fe0ae; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .contact-form-container { --danger: #ff9c94; --ok: #8fe0ae; } }
.contact-form-container h3 { font-size: 1.8rem; margin-bottom: 1em; }
.form-group { position: relative; margin-bottom: 12px; }
.form-group input[type="text"], .form-group input[type="email"], .form-group input[type="tel"], .form-group select, .form-group textarea {
    width: 100%; padding: 1.55em 1em .6em; border: 0; border-bottom: 2px solid var(--muted); border-radius: var(--r) var(--r) 0 0; background: var(--surface); color: var(--ink); font: 400 1rem/1.4 var(--sans); transition: border-color var(--hover) ease; appearance: none; -webkit-appearance: none;
}
.form-group textarea { resize: vertical; min-height: 120px; }
.form-group select { background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2.6em; } /* šipka rozbalovacího seznamu */ /* taste-skill-ignore */
.form-group select option { color: #121212; background: #ffffff; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-bottom-color: var(--accent); }
.form-group input:focus-visible, .form-group select:focus-visible, .form-group textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.form-group label { position: absolute; left: 1.05em; top: 1.1em; font-size: 1rem; color: var(--muted); pointer-events: none; transition: top .2s var(--ease-out), font-size .2s var(--ease-out), color .2s; }
.form-group input:focus + label, .form-group input:not(:placeholder-shown) + label, .form-group textarea:focus + label, .form-group textarea:not(:placeholder-shown) + label, .fg-static label { top: .45em; font-size: .8125rem; font-weight: 600; color: var(--ink); }
.form-group input:invalid:not(:placeholder-shown):not(:focus), .form-group textarea:invalid:not(:placeholder-shown):not(:focus) { border-bottom-color: var(--danger); }
.checkbox-group { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; }
.checkbox-group input { width: 22px; height: 22px; flex: none; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; }
.form-group.checkbox-group input[type="checkbox"] + label { position: static; font-size: .9375rem; font-weight: 400; line-height: 1.5; color: var(--muted); pointer-events: auto; }
.btn-submit { width: 100%; margin-top: 10px; padding: 1.15em; font-size: 1.05rem; }
#form-zprava { margin-top: 14px; font-weight: 600; font-size: .9375rem; min-height: 1.4em; }
#form-zprava.err { color: var(--danger); } #form-zprava.ok { color: var(--ok); }
.form-success { text-align: center; padding: 18px 6px; }
.form-success svg { stroke: var(--accent); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.form-success svg circle { stroke-dasharray: 190; stroke-dashoffset: 190; animation: draw .8s ease forwards; }
.form-success svg path { stroke-dasharray: 50; stroke-dashoffset: 50; animation: draw .5s .6s ease forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.form-success h3 { margin: .6em 0 .3em; }
.form-success p { color: var(--muted); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* ============================================================
   17) PATIČKA (tmavé pole navazuje na kontakt)
   ============================================================ */
.site-footer { padding: clamp(72px, 9vw, 120px) 0 28px; }
.foot-cta { max-width: 820px; margin: 0 0 clamp(56px, 7vw, 96px); }
.foot-cta h2 { font-size: clamp(2.6rem, 6vw, 4.6rem); letter-spacing: -.04em; line-height: 1; margin-bottom: .3em; }
.foot-lead { color: var(--muted); font-size: 1.15rem; max-width: 52ch; }
.foot-cta-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6rem; }
.site-footer { position: relative; }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr; gap: 28px; padding: 40px 0 8px; }
.fb { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: .9375rem; line-height: 1.5; }
.fb h3 { font-size: .9375rem; color: var(--ink); margin: 0 0 .35em; letter-spacing: 0; }
.foot-name { font-size: 1.15rem; color: var(--ink); }
.fb a { color: var(--muted); text-decoration: none; }
.fb a:hover { color: var(--ink); text-decoration: underline; }
.foot-social { display: flex; gap: 8px; margin-top: 6px; }
.foot-social a { width: 44px; height: 44px; background: var(--surface); border-radius: var(--r); display: grid; place-items: center; color: var(--ink); transition: background var(--hover) ease; }
.foot-social a:hover { background: var(--accent); color: var(--accent-ink); text-decoration: none; }
/* tlačítko nahoru stojí v toku pod sloupci vpravo – nikdy nepřekryje text, ať je .wrap v jakémkoli stylu pozicovaný */
.to-top { width: 44px; height: 44px; margin: 28px 0 0 auto; background: var(--surface); border-radius: var(--r); display: grid; place-items: center; color: var(--ink); transform: rotate(-90deg); text-decoration: none; transition: background var(--hover) ease; }
.to-top:hover { background: var(--accent); color: var(--accent-ink); }
.site-footer { padding-bottom: 36px; }
@media (max-width: 1020px) { .foot-grid { grid-template-columns: 1fr 1fr; } .fb-name { grid-column: 1 / -1; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }

/* ============================================================
   18) PLOVOUCÍ PRVKY, COOKIE, OKNA
   ============================================================ */
.quick-bar { display: none; }

/* cookie lišta (zobrazí ji JS třídou .show) – opravdu „plave“, proto jako jediná má stín */
#custom-cookie-banner { display: none; position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(860px, calc(100% - 24px)); z-index: 95; background: var(--p-field); color: var(--p-field-ink); border-radius: var(--r); padding: 14px 16px 14px 22px; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55); font-size: .9375rem; line-height: 1.45; transition: opacity .3s, transform .3s var(--ease-out); } /* taste-skill-ignore */
#custom-cookie-banner.show { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 24px; }
#custom-cookie-banner.gone { opacity: 0; transform: translateX(-50%) translateY(16px); }
#custom-cookie-banner strong { grid-column: 1; }
#custom-cookie-banner p { grid-column: 1; margin: 0; color: var(--p-field-muted); }
#custom-cookie-banner a { color: var(--p-field-ink); }
#custom-cookie-banner button { grid-column: 2; grid-row: 1 / span 2; background: var(--p-field-accent); color: var(--p-field-accent-ink); border: 0; border-radius: var(--r); padding: .85em 1.4em; font: 600 .9375rem var(--sans); cursor: pointer; white-space: nowrap; transition: background var(--hover) ease, transform var(--press) var(--ease-out); }
#custom-cookie-banner button:hover { background: color-mix(in srgb, var(--p-field-accent) 85%, var(--p-field-ink)); }
#custom-cookie-banner button:active { transform: scale(.97); }
@media (max-width: 760px) {
    #custom-cookie-banner.show { grid-template-columns: 1fr auto; padding: 12px 12px 12px 16px; font-size: .875rem; }
    #custom-cookie-banner p { display: none; } /* na telefonu jen titulek a tlačítko – nezakrývá půl obrazovky */
    #custom-cookie-banner button { grid-row: 1; padding: .8em 1.1em; }
}

.modal-overlay { position: fixed; inset: 0; z-index: 120; display: none; align-items: center; justify-content: center; padding: 18px; background: rgba(10, 10, 9, .72); }
.modal-overlay:target { display: flex; animation: fade .25s ease both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal-content { position: relative; width: 100%; max-width: 720px; max-height: calc(100vh - 36px); max-height: calc(100dvh - 36px); overflow: auto; overscroll-behavior: contain; background: var(--bg); color: var(--ink); border-radius: var(--r); padding: clamp(26px, 4vw, 46px); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .6); animation: rise .3s var(--ease-out) both; } /* taste-skill-ignore */
.close-modal { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r); font-size: 1.8rem; line-height: 1; color: var(--ink); text-decoration: none; background: var(--surface); z-index: 2; transition: background var(--hover) ease, color var(--hover) ease; }
.close-modal:hover { background: var(--ink); color: var(--bg); }
.modal-header { padding-right: 52px; margin-bottom: 1rem; }
.modal-header h3 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0; }
.modal-body p, .modal-body li { color: var(--muted); }
.modal-body strong { color: var(--ink); }

/* ============================================================
   19) ČLÁNEK / STRÁNKA / 404
   ============================================================ */
.article.page-top { padding: calc(var(--hdr) + clamp(36px, 5vw, 70px)) 0 clamp(60px, 8vw, 110px); }
.wrap.read { max-width: 760px; }
.back-link { display: inline-block; margin-bottom: 1.6rem; font-weight: 600; text-decoration: none; }
.article-head { margin-bottom: 2.4rem; }
.article-head h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); margin-bottom: .35em; }
.article-head .meta { font-size: .9375rem; color: var(--muted); }
.obsah-clanku { font-size: 1.125rem; line-height: 1.7; }
.obsah-clanku > p:first-of-type { font-size: 1.25rem; }
.obsah-clanku h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin: 2em 0 .5em; }
.obsah-clanku h3 { font-size: 1.4rem; margin: 1.8em 0 .4em; }
.obsah-clanku h4 { margin: 1.5em 0 .3em; }
.obsah-clanku img { height: auto; margin: 1.4em 0; }
.obsah-clanku blockquote { margin: 1.8em 0; padding: 1.2em 1.4em; background: var(--surface); border-radius: var(--r); font-size: 1.3rem; font-weight: 500; line-height: 1.4; }
.obsah-clanku ul, .obsah-clanku ol { padding-left: 1.3em; } .obsah-clanku li { margin-bottom: .45em; }
.obsah-clanku table { width: 100%; border-collapse: collapse; font-size: 1rem; display: block; overflow-x: auto; }
.obsah-clanku th, .obsah-clanku td { border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); padding: .6em .8em; text-align: left; } /* tabulka smí mít čáry */
.obsah-clanku th { background: var(--surface); }
.blog-cta-box { margin-top: clamp(44px, 6vw, 72px); padding: clamp(28px, 4vw, 46px); border-radius: var(--r); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 36px; }
.blog-cta-box h3 { font-size: 1.7rem; margin-bottom: .3em; }
.blog-cta-box p { margin: 0; color: var(--muted); max-width: 52ch; }
.error-404 { position: relative; isolation: isolate; overflow: hidden; background: var(--bg); min-height: 100vh; min-height: 100svh; padding: calc(var(--hdr) + 60px) 0 90px; display: grid; align-items: center; }
.error-404 p { color: var(--muted); }
.big404 { display: flex; align-items: center; justify-content: center; font-size: clamp(7rem, 22vw, 14rem); font-weight: 700; line-height: 1; color: var(--ink); letter-spacing: -.05em; }
.big404 span { display: inline-block; width: .8em; margin: 0 .04em; }
.big404 svg { width: 100%; height: auto; fill: var(--accent); transform: rotate(-25deg); }

/* ============================================================
   20) MOBIL
   ============================================================ */
@media (max-width: 760px) {
    body { font-size: 16px; padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
    .quick-bar { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 65; background: var(--p-field); padding-bottom: env(safe-area-inset-bottom); transition: transform .3s var(--ease-out); }
    .quick-bar.hide { transform: translateY(110%); }
    .quick-bar a { display: flex; align-items: center; justify-content: center; gap: .6em; padding: 1em; color: var(--p-field-ink); text-decoration: none; font-weight: 600; }
    .quick-bar a:first-child { background: var(--p-accent); color: var(--p-accent-ink); }
    #custom-cookie-banner { bottom: calc(68px + env(safe-area-inset-bottom)); }
    .hero-cta .btn { flex: 1 1 100%; }
    .hero-title { font-size: 2.15rem; }
    .trust { grid-template-columns: 1fr; gap: 10px; }
    .trust li { flex-direction: row; align-items: baseline; gap: .5em; }
    .brand-text small { font-size: .8125rem; }
    .btn { line-height: 1.25; text-align: center; }
    .info-big > span:last-child { font-size: 1.3rem; min-width: 0; overflow-wrap: anywhere; }
}

/* ============================================================
   21) POHYB: respektujeme nastavení systému
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* mapa na telefonu: v přiblížení ukazovat popisek jen u vybrané obce, bez názvů měst a krajů */
@media (max-width: 720px) {
    .jmap.zoomed .pt .lbl { opacity: 0; }
    .jmap.zoomed .pt.sel .lbl, .jmap.zoomed .pt.lit .lbl, .jmap.zoomed .pt:focus-visible .lbl { opacity: 1; }
    .jmap.zoomed .city text { opacity: 0; }
}

/* kreslený křížek v oknech a v kartě mapy */
.close-modal .ico, .mc-x .ico { width: 22px; height: 22px; }