/* ==========================================================================
   Fonts — self-hosted (Crimson Text + Montserrat), latin + latin-ext.
   Subset from Google Fonts; no cyrillic/greek/vietnamese.
   ========================================================================== */
/* Crimson Text 400 italic — latin-ext */
@font-face {
  font-family: 'Crimson Text';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/crimson-text-400i-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;
}
/* Crimson Text 400 italic — latin */
@font-face {
  font-family: 'Crimson Text';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/crimson-text-400i-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;
}
/* Crimson Text 600 italic — latin-ext */
@font-face {
  font-family: 'Crimson Text';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/crimson-text-600i-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;
}
/* Crimson Text 600 italic — latin */
@font-face {
  font-family: 'Crimson Text';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/crimson-text-600i-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;
}
/* Crimson Text 400 — latin-ext */
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/crimson-text-400-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;
}
/* Crimson Text 400 — latin */
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/crimson-text-400-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;
}
/* Crimson Text 600 — latin-ext */
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/crimson-text-600-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;
}
/* Crimson Text 600 — latin */
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/crimson-text-600-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;
}
/* Crimson Text 700 — latin-ext */
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/crimson-text-700-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;
}
/* Crimson Text 700 — latin */
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/crimson-text-700-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;
}
/* Montserrat — jeden variabilní font (wght 100–900), 2 subsety. Dřív 8 byte-identických klonů. */
/* Montserrat — latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/montserrat-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;
}
/* Montserrat — latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/montserrat-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;
}

/* ==========================================================================
   Účetnictví Pokorná — style.css
   Fialová + cihlová CTA. Crimson Text (serif) + Montserrat (sans).
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --c-ink:        #1B1D1A;
  --c-primary:    #845EC2;
  --c-primary-dk: #5E3D96;
  --c-cta:        #D23927;
  --c-cta-hover:  #B62F20;
  --c-bg:         #F7F1FB;
  --c-bg-alt:     #F1E9F8;
  --c-line:       #E6D3F2;
  --c-hero:       #EFE3FB;
  --c-muted:      #626661;
  --c-white:      #FFFFFF;
  --c-error:      #B4262C;

  --font-serif: "Crimson Text", Georgia, "Times New Roman", serif;
  --font-sans:  "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --maxw: 1360px;
  --gutter: 24px;
  --pad-x: 20px;
  --radius: 4px;

  --shadow-card: 0 12px 34px -16px rgba(35,22,55,0.16), 0 1px 4px rgba(35,22,55,0.05);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }

body {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.65;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

ul, ol { list-style: none; padding: 0; }

a { color: var(--c-primary); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--c-primary-dk); }

button { font-family: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- Type scale ---------- */
h1, h2, h3 { font-family: var(--font-sans); color: var(--c-ink); font-weight: 600; }

h1 { font-size: 34px; line-height: 1.1;  letter-spacing: -0.01em; }
h2 { font-size: 30px; line-height: 1.2;  letter-spacing: -0.005em; font-weight: 700; }
h3 { font-size: 20px; line-height: 1.3;  font-weight: 500; }

p  { text-wrap: pretty; }

.lead  { font-size: 20px; line-height: 1.6; color: var(--c-muted); }
.small { font-size: 14px; line-height: 1.5; }
.label {
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 600; font-family: var(--font-sans); color: var(--c-muted);
}

.tnum { font-variant-numeric: tabular-nums; }

@media (min-width: 480px) {
  h1 { font-size: 42px; }
}
@media (min-width: 768px) {
  h1 { font-size: 56px; }
  h3 { font-size: 24px; }
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section { padding-block: 50px; }
/* sekce hned za překrývající kartou nemá horní padding — mezeru dává karta.
   Jen na desktopu (tam kartu přesahuje gradient); na mobilu normální padding. */
@media (min-width: 768px) {
  .hero-services + .section { padding-top: 0; }
}

.section--bg   { background: var(--c-bg); }
.section--white { background: var(--c-white); }

.section__head { max-width: 68ch; margin-bottom: 48px; }
.section__head .lead { margin-top: 16px; }

/* ── Univerzální hlavička stránky (partial page-header) ─────────────────────
   ZATÍM NEUTRÁLNÍ oddělovací pruh — jen odděluje nadpis+perex od obsahu
   (levandulové pozadí + spodní linka). Finální design se ladí jen tady. */
.page-header {
  /* Levandulový pruh + textura na ~60 % síly. Dvě vrstvy: nahoře 40% krycí
     levandulový overlay (normal), dole textura (multiply s background-color) →
     bílý podklad vzoru splyne, zůstane ~60 % šumu/teček.
     Sílu ladíš alfou overlaye: NIŽŠÍ = výraznější textura (0.4 = teď, 0.8 = jemné). */
  background-color: var(--c-bg);
  background-image:
    linear-gradient(rgba(247, 241, 251, 0.4), rgba(247, 241, 251, 0.4)),
    url("../img/svg/pattern-randomized.svg");
  /* Overlay: cover (flat, škáluje). Textura: FIXNÍ velikost + repeat → buňky mají
     konstantní px velikost, na 4K se jen dlaždicují, neroztahují. */
  background-size: cover, 1360px auto;
  background-position: center, center calc(50% + 20px); /* vzor o 20px níž (tečka lezla do textu) */
  background-repeat: no-repeat, repeat;
  background-blend-mode: normal, multiply;
  border-bottom: 1px solid var(--c-line);
  padding-block: 16px;
}
/* Text na celou šířku headeru (bez ořezu na 68ch). */
.page-header__inner { max-width: none; }
.page-header__title { font-size: 45px; font-weight: 800; }
.page-header__lead  { margin-top: 16px; font-size: 23px; }
@media (min-width: 768px) {
  .page-header { padding-block: 22px; }
}

.stack > * + * { margin-top: 16px; }

.textblock { max-width: 68ch; }
.textblock p + p { margin-top: 16px; }

/* Článek detailu služby (_includes/sluzba-layout.php) — čtivý sloupec:
   odstavce 16px od sebe, H2 s většími rozestupy, zvýrazněný závěrečný řádek. */
.sluzba-article > * + * { margin-top: 16px; }
.sluzba-article h2 { margin-top: 44px; }
.sluzba-article > h2:first-child { margin-top: 0; } /* úvodní (marketingový) nadpis nahoře */
.sluzba-article__cta {
  margin-top: 36px; font-family: var(--font-sans); font-weight: 600;
  font-size: 22px; line-height: 1.4; color: var(--c-ink);
}

/* Stránka O mně — text na celou šířku kontejneru, foto plovoucí vpravo. */
.about-body { display: flow-root; }          /* obsahuje float fotky */
.about-body > * + * { margin-top: 16px; }
.about-body > h2 { margin-top: 44px; }        /* nadpisy uvnitř textu */
.about-body > figure + h2 { margin-top: 0; }  /* úvodní nadpis hned po fotce */
.about-photo { margin: 0 0 20px; }
.about-photo img {
  width: 100%; max-width: 340px; height: auto; border-radius: 14px;
  border: 1px solid var(--c-line); box-shadow: var(--shadow-card);
}
.about-photo figcaption {
  margin-top: 12px; font-family: var(--font-sans); font-weight: 600;
  font-size: 15px; color: var(--c-muted);
}
@media (min-width: 768px) {
  .about-photo { float: right; width: 300px; margin: 4px 0 20px 44px; }
  .about-photo img { max-width: none; }
}
.about-lead {
  font-family: var(--font-sans); font-weight: 600; font-size: 22px;
  line-height: 1.4; color: var(--c-ink); margin-top: 28px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  font-family: var(--font-sans); font-weight: 600; font-size: 16px;
  line-height: 1; text-decoration: none;
  padding: 15px 24px;
  border: 1px solid transparent; border-radius: var(--radius);
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
/* CTA accent = cihlová #D23927 (bílý text kvůli a11y — na červené projde kontrast bílý, ne tmavý) */
.btn--cta { background: var(--c-cta); color: var(--c-white); }
.btn--cta:hover { background: var(--c-cta-hover); color: var(--c-white); }

.btn--outline { background: transparent; color: var(--c-primary); border-color: var(--c-line); }
.btn--outline:hover { border-color: var(--c-primary); color: var(--c-primary-dk); }

/* action link styled as a soft purple pill button */
.link-action {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  font-weight: 600; text-decoration: none; color: var(--c-primary-dk);
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  padding: 10px 20px;
  border-radius: 999px;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.link-action:hover {
  background: var(--c-primary); color: var(--c-white); border-color: var(--c-primary);
}
.link-action svg { transition: transform 150ms ease; }
.link-action:hover svg { transform: translateX(3px); }

/* magnetic variant — purple fill slides in from the left, text/arrow nudge */
.link-action--magnetic {
  position: relative; overflow: hidden; isolation: isolate;
  font-family: var(--font-sans);
  font-size: 16px; font-weight: 500;
  padding: 9px 14px;
  border-radius: 10px;
  transition: color 300ms ease, border-color 200ms ease, transform 120ms ease;
}
.link-action--magnetic > span { display: inline-block; transition: transform 350ms ease; }
.link-action--magnetic::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--c-primary);
  transform: translateX(-120%);
  transition: transform 450ms ease;
}
.link-action--magnetic:hover { background: var(--c-bg-alt); color: var(--c-white); border-color: var(--c-primary); }
.link-action--magnetic:hover::before { transform: translateX(0); }
.link-action--magnetic:hover > span,
.link-action--magnetic:hover svg { transform: translateX(6px); }
.link-action--magnetic:active { transform: scale(0.95); }

/* ---------- Icons ---------- */
.icon { width: 28px; height: 28px; stroke: currentColor; stroke-width: 1.5; fill: none;
        stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 18px; height: 18px; }
.card__ico { width: 28px; height: 28px; }
.header-phone img { width: 18px; height: 18px; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 72px;
}
.wordmark {
  font-family: var(--font-serif); font-weight: 500; font-size: 21px;
  color: var(--c-primary); text-decoration: none; white-space: nowrap;
}
.wordmark:hover { color: var(--c-primary-dk); }
.site-logo { display: block; height: 34px; width: auto; }
@media (max-width: 600px) { .site-logo { height: 28px; } }

.primary-nav { display: none; }
.primary-nav ul { display: flex; align-items: center; gap: 26px; }
.primary-nav a {
  color: var(--c-ink); text-decoration: none; font-weight: 500; font-size: 16px;
  font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.03em;
  padding: 6px 0; transition: color 150ms ease;
}
.primary-nav a:hover, .primary-nav a[aria-current="page"] { color: var(--c-primary); }

/* Dropdown submenu služeb (desktop) — otevírá se hoverem / focusem uvnitř. */
.primary-nav .has-submenu { position: relative; }
.primary-nav .submenu {
  position: absolute; top: 100%; left: -12px; z-index: 60;
  min-width: 250px; margin: 0; padding: 8px; list-style: none;
  background: var(--c-white); border: 1px solid var(--c-line);
  border-radius: 12px; box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 150ms ease, transform 150ms ease, visibility 150ms;
}
.primary-nav .has-submenu:hover > .submenu,
.primary-nav .has-submenu:focus-within > .submenu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.primary-nav .submenu a {
  display: block; padding: 9px 12px; border-radius: 8px;
  text-transform: none; letter-spacing: normal; font-size: 15px; font-weight: 500;
  color: var(--c-ink); white-space: nowrap;
}
.primary-nav .submenu a:hover,
.primary-nav .submenu a[aria-current="page"] { background: var(--c-bg); color: var(--c-primary-dk); }

.header-actions { display: none; align-items: center; gap: 20px; }
.header-phone {
  color: var(--c-ink); text-decoration: none; font-weight: 600; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px;
}
.header-phone:hover { color: var(--c-primary); }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; background: transparent; border: 1px solid var(--c-line);
  border-radius: var(--radius); color: var(--c-ink);
}
.nav-toggle .icon { width: 22px; height: 22px; }

/* Mobilní nav = nativní <details>: summary = hamburger (zavřeno) / křížek (otevřeno). */
.mobile-nav > summary { list-style: none; cursor: pointer; }
.mobile-nav > summary::-webkit-details-marker { display: none; }
.mobile-nav > summary .icon--close { display: none; }
.mobile-nav[open] > summary .icon--menu { display: none; }
.mobile-nav[open] > summary .icon--close { display: inline; }

@media (min-width: 1300px) {
  .primary-nav { display: block; }
  .header-actions { display: flex; }
  .mobile-nav { display: none; }
}

/* mobile overlay menu — začíná POD headerem (72px), takže header s logem + summary(X)
   zůstává nahoře a X je klikatelný i BEZ JS (overlay ho nepřekrývá). Otevírá/zavírá
   nativní <details>. z-index 40 < header (50). */
.mobile-menu {
  position: fixed; top: 72px; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--c-bg);
  display: flex; flex-direction: column;
}
@media (prefers-reduced-motion: no-preference) {
  .mobile-nav[open] > .mobile-menu { animation: mobile-menu-in 200ms ease-out; }
}
@keyframes mobile-menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.mobile-menu__body {
  flex: 1; overflow-y: auto; padding: 24px var(--pad-x) 40px;
  display: flex; flex-direction: column; gap: 4px;
}
.mobile-menu__body a.m-link {
  font-family: var(--font-sans); font-size: 20px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--c-ink); text-decoration: none; padding: 12px 0;
  border-bottom: 1px solid var(--c-line);
}
.mobile-menu__body a.m-link:hover { color: var(--c-primary); }
/* Podpoložky služeb v mobilním menu (odsazené, vždy viditelné). */
.m-submenu {
  display: flex; flex-direction: column;
  padding-left: 14px; margin: 2px 0 6px;
  border-left: 2px solid var(--c-line);
}
.m-submenu a.m-sublink {
  font-family: var(--font-sans); font-size: 17px; font-weight: 500;
  color: var(--c-ink); text-decoration: none; padding: 8px 0;
}
.m-submenu a.m-sublink:hover,
.m-submenu a.m-sublink[aria-current="page"] { color: var(--c-primary); }
.mobile-menu__foot { margin-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.mobile-menu__foot .header-phone {
  align-self: center; font-family: var(--font-sans); font-size: 22px; font-weight: 600; gap: 10px;
}
.mobile-menu__foot .header-phone img { width: 22px; height: 22px; }

@media (min-width: 1300px) { .mobile-menu { display: none; } }

/* Tlačítko „nahoru na začátek" — vpravo dole, zobrazí se po odscrollování.
   z-index pod mobilním menu (100), aby ho otevřené menu překrylo. */
.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-primary); color: var(--c-white);
  border: 2px solid var(--c-white); cursor: pointer; box-shadow: var(--shadow-card);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity 200ms ease, transform 200ms ease, visibility 200ms, background 150ms ease;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--c-primary-dk); }
.to-top .icon { width: 22px; height: 22px; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; background: var(--c-hero); overflow-x: clip; }
.hero__grid {
  display: grid; grid-template-columns: 1fr; gap: 28px;
  align-items: end;
  padding-top: 52px;
}
.hero__quote {
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--c-primary); color: var(--c-white);
  margin-bottom: 26px;
}
.hero__quote svg { width: 32px; height: 32px; fill: currentColor; stroke: none; }
.hero__title { margin-bottom: 20px; font-weight: 800; }
.hero__accent { color: var(--c-primary); }
.accent { color: var(--c-primary); }
.hero__lead { max-width: 46ch; font-size: clamp(20px, 5.5vw, 26px); font-weight: 400; line-height: 1.45; margin-top: 32px; margin-bottom: 32px; }
.hero__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px;
  margin-top: 32px;
}

.hero__photo { position: relative; justify-self: center; align-self: end; }
.hero__photo::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 6%;
  width: 144%;
  aspect-ratio: 1 / 1;
  transform: translateX(-50%) translateY(160px);
  border-radius: 50%;
  background: radial-gradient(circle,
              #ebd9fd 48%,
              rgba(235, 217, 253, 0) 100%);
  pointer-events: none;
}
.hero__photo img {
  position: relative; z-index: 1;
  width: 100%; max-width: 320px; height: auto;
  filter: drop-shadow(0 20px 32px rgba(94,61,150,0.20));
}

/* floating card that overlaps the hero bottom */
.hero-card {
  position: relative; z-index: 3;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: 30px 22px;
  margin-top: 0;
}
.hero-card__grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
.hero-card__item { display: flex; flex-direction: column; }
.hero-card__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.hero-card__head .card__icon { color: var(--c-primary); margin: 0; flex-shrink: 0; }
.hero-card__head h3 { margin: 0; }
.hero-card__item p { color: var(--c-muted); font-size: 20px; }
.hero-card__item .link-action { margin-top: auto; }

/* mobil: položky pod sebou → jemný fialový oddělovač mezi nimi */
@media (max-width: 767px) {
  .hero-card__grid { gap: 0; }
  .hero-card__item + .hero-card__item {
    margin-top: 24px; padding-top: 24px;
    border-top: 1px solid var(--c-line);
  }
}

@media (min-width: 768px) {
  .hero { padding-bottom: 0; }
  .hero__grid {
    grid-template-columns: 1.4fr 0.6fr; gap: 48px;
    padding-top: 50px;
  }
  .hero__text { padding-bottom: 0; padding-left: 20px; }
  .hero__photo { justify-self: end; transform: translateX(-120px); }
  .hero__photo img { max-width: 400px; }
  .hero-card {
    padding: 40px;
    margin-top: 0;
  }
  .hero-card__grid { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .hero-card__item { padding-inline: 34px; }
  .hero-card__item:first-child { padding-left: 0; }
  .hero-card__item:last-child { padding-right: 0; }
  .hero-card__item + .hero-card__item { border-left: 1px solid var(--c-line); }
}
@media (min-width: 1024px) {
  .hero__photo img { max-width: 440px; }
}

/* ==========================================================================
   Hero services strip — the card straddles a lavender→white gradient.
   Overlap is done via the section background, not negative margins.
   The lavender continues seamlessly from .hero; the white matches the
   .section--white below. Adjust the gradient stop (px) to move the line.
   ========================================================================== */
.hero-services { background: var(--c-hero); padding-bottom: 32px; }

@media (min-width: 768px) {
  .hero-services {
    padding-bottom: 48px;
    background: linear-gradient(
      to bottom,
      var(--c-hero) 0,
      var(--c-hero) 150px,
      var(--c-white) 150px,
      var(--c-white) 100%
    );
  }
}


/* ==========================================================================
   Cards (generic grid)
   ========================================================================== */
.grid {
  display: grid; grid-template-columns: 1fr; gap: 20px;
}
@media (min-width: 768px) { .grid--2 { grid-template-columns: repeat(2, 1fr); }
                            .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: 28px;
  display: flex; flex-direction: column; height: 100%;
}
.card__icon { color: var(--c-primary); margin-bottom: 18px; }
.card__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.card__head .card__icon { margin: 0; flex-shrink: 0; }
.card__head h3 { margin: 0; }
.card h3 { margin-bottom: 10px; font-size: 26px; }
.card p { color: var(--c-muted); margin-bottom: 24px; }
.card .link-action { margin-top: auto; }

/* ==========================================================================
   Process steps
   ========================================================================== */
.steps { display: grid; grid-template-columns: 1fr; gap: 32px; }
.step { display: flex; flex-direction: column; }
.step__num {
  display: flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--c-primary); color: var(--c-white);
  font-family: var(--font-sans); font-weight: 700; font-size: 20px; line-height: 1;
  margin: 0 auto 16px;
}
.step h3 { margin-bottom: 8px; }
.step p { color: var(--c-muted); }
.step__box {
  flex: 1;
  border: 1px solid var(--c-line);
  border-radius: 12px;
  padding: 24px 22px;
  background: var(--c-white);
}

/* desktop timeline: numbered circle nodes joined by a connector line */
@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .step { position: relative; }
  .step__num { position: relative; z-index: 1; }
  .step:not(:last-child)::after {
    content: ""; position: absolute; top: 29px; left: 50%;
    width: calc(100% + 28px); height: 2px;
    background: var(--c-line); z-index: 0;
  }
}

/* ==========================================================================
   Pricing
   ========================================================================== */
.pricing-actions { margin-top: 24px; }

/* ==========================================================================
   References — statické karty (bez JS, bez modalu). Struktura opakovatelná
   (1 blockquote = 1 reference) kvůli budoucímu PHP foreach.
   ========================================================================== */
.quote__text {
  font-family: var(--font-serif); font-weight: 500; font-size: 20px; line-height: 1.5; color: var(--c-ink);
}
.quote__by { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 24px; font-size: 15px; }
.quote__avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.quote__meta strong { display: block; font-family: var(--font-sans); font-weight: 600; font-size: 17px; color: var(--c-ink); }
.quote__meta span { color: var(--c-muted); }
.quote__meta a { color: var(--c-primary-dk); text-decoration: none; }
.quote__meta a:hover { text-decoration: underline; }

/* ==========================================================================
   FAQ — nativní <details>/<summary> (funguje bez JS)
   ========================================================================== */
.faq { max-width: 820px; }
.faq__item { border-bottom: 1px solid var(--c-line); }
.faq__item:first-child { border-top: 1px solid var(--c-line); }
.faq__q {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0; color: var(--c-ink);
  font-family: var(--font-serif); font-weight: 500; font-size: 20px; line-height: 1.3;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
.faq__q:hover { color: var(--c-primary); }
.faq__icon { flex-shrink: 0; color: var(--c-primary); transition: transform 150ms ease; }
.faq__item[open] .faq__icon { transform: rotate(45deg); }
.faq__panel p { color: var(--c-muted); padding-bottom: 22px; }
.faq__panel .faq__badge {
  display: inline-block; padding: 4px 12px; margin-bottom: 22px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600; line-height: 1.4;
  color: var(--c-primary-dk); background: var(--c-bg-alt); border-radius: 999px;
}
.faq-intro { margin-bottom: 36px; color: var(--c-muted); font-size: 20px; }
.faq-outro { margin-top: 36px; color: var(--c-muted); font-size: 20px; }

/* ==========================================================================
   Contact CTA panel (60/40 split s FAQ)
   ========================================================================== */
.faq-cta { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 900px) {
  .faq-cta { grid-template-columns: 3fr 2fr; gap: 48px; }
}
.cta-panel {
  background: var(--c-primary);
  border-radius: 16px;
  padding: 32px 40px;
  display: flex; flex-direction: column; justify-content: center;
  text-align: left;
  container-type: inline-size; /* 60/40 se přepíná dle šířky PANELU, ne viewportu */
}
.cta-panel__inner { display: flex; flex-direction: column; gap: 32px; }
.cta-panel h2 { color: var(--c-white); }
.cta-panel .lead { color: var(--c-white); margin-top: 16px; }
.cta-panel__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px;
}
/* Široký panel (spodní CTA na vnitřních stránkách) → text 60 % vlevo, akce 40 %
   vpravo. Úzký panel (homepage v .faq-cta 40 % sloupci) zůstává stacked. */
@container (min-width: 620px) {
  .cta-panel__inner { flex-direction: row; align-items: center; gap: 48px; }
  .cta-panel__text { flex: 0 0 60%; }
  .cta-panel__actions { flex: 1; }
}
.cta-panel__phone {
  color: var(--c-white); text-decoration: none;
  font-family: var(--font-serif); font-weight: 500; font-size: 26px;
  display: inline-flex; align-items: center; gap: 10px;
}
.cta-panel__phone:hover { color: rgba(255,255,255,0.85); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--c-primary); color: var(--c-white); }
.site-footer a { color: var(--c-white); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer__grid {
  display: grid; grid-template-columns: 1fr; gap: 40px;
  padding-block: 64px;
}
.site-footer .wordmark { color: var(--c-white); display: inline-block; margin-bottom: 18px; }
.site-footer address { font-style: normal; line-height: 1.7; }
.footer-col h4 { font-family: var(--font-sans); font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 800; color: var(--c-white); margin-bottom: 14px; }
.footer-col ul + h4 { margin-top: 28px; }
.footer-col ul { display: flex; flex-direction: column; gap: 6px; line-height: 1.35; }
.footer-col ul a { display: inline-block; padding-block: 6px; }
.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.14);
  padding-block: 24px;
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  font-size: 17px; color: var(--c-white);
}
.footer-cookies { color: rgba(255,255,255,0.72); text-decoration: underline; text-underline-offset: 2px; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.footer-cookies:hover { color: var(--c-white); }
@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; padding-block: 72px; }
}

/* ==========================================================================
   Forms
   ========================================================================== */
.form { max-width: 620px; }
.form { font-family: var(--font-sans); } /* celý formulář Montserrat */
.form__row { margin-bottom: 20px; }
.form__label { display: block; font-weight: 500; font-size: 16px; margin-bottom: 6px; color: var(--c-ink); }
.form__label .req { color: var(--c-primary); }
.form__control {
  width: 100%; font-family: inherit; font-size: 17px; color: var(--c-ink);
  background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: 12px 14px; transition: border-color 150ms ease;
}
.form__control:focus { border-color: var(--c-primary); outline: 2px solid var(--c-primary); outline-offset: 2px; }
textarea.form__control { min-height: 140px; resize: vertical; }
select.form__control { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23626661' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.form__check { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; color: var(--c-muted); line-height: 1.5; }
.form__check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--c-primary); flex-shrink: 0; }
.form__control.is-error { border-color: var(--c-error); }
.form__error { color: var(--c-error); font-size: 14px; margin-top: 6px; display: none; }
.form__control.is-error ~ .form__error { display: block; }
.form__success {
  display: none; background: var(--c-primary); color: var(--c-white);
  padding: 16px 18px; border-radius: var(--radius); margin-bottom: 24px; font-weight: 500;
}
.form__success[data-show="true"] { display: block; }

/* ==========================================================================
   Utilities
   ========================================================================== */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.no-scroll { overflow: hidden; }
.error-page { padding-block: 96px; text-align: center; }

/* skip-link — skrytý, viditelný na fokus (klávesnice/SR) */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 300;
  background: var(--c-primary-dk); color: var(--c-white);
  padding: 10px 16px; border-radius: var(--radius);
  font-family: var(--font-sans); font-weight: 600; text-decoration: none;
  transition: top 150ms ease;
}
.skip-link:focus, .skip-link:focus-visible { top: 12px; color: var(--c-white); }

/* ==========================================================================
   Podstránky — breadcrumb, checklist, kontakt (přidáno při PHP migraci)
   ========================================================================== */
/* Breadcrumb — samostatný bílý pruh POD headerem, stejný na všech vnitřních
   stránkách (page-header.php ho skládá z breadcrumb_trail()). Separátory „›"
   dělá CSS (::before), aby je čtečka nepředčítala; <ol>/<li> = korektní sémantika. */
.breadcrumb-bar {
  background: var(--c-white);
  border-bottom: 1px solid var(--c-line);
}
.breadcrumb {
  list-style: none; margin: 0; padding: 12px 0;
  font-family: var(--font-sans); font-size: 14px; color: var(--c-muted);
  display: flex; flex-wrap: wrap; align-items: center;
}
.breadcrumb__item { display: inline-flex; align-items: center; }
.breadcrumb__item + .breadcrumb__item::before {
  content: "›"; margin: 0 8px; color: var(--c-line);
}
.breadcrumb a { color: var(--c-primary-dk); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--c-muted); }

.checklist { display: flex; flex-direction: column; gap: 12px; max-width: 68ch; }
.checklist li { position: relative; padding-left: 30px; color: var(--c-muted); }
.checklist li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--c-primary); font-weight: 700; font-family: var(--font-sans);
}

.contact-list { display: flex; flex-direction: column; gap: 14px; margin: 20px 0; }
.contact-list li { display: flex; align-items: center; gap: 12px; font-family: var(--font-sans); font-size: 18px; }
.contact-list a { color: var(--c-primary-dk); text-decoration: none; font-weight: 600; }
.contact-list a:hover { text-decoration: underline; }
.contact-address { font-style: normal; line-height: 1.7; color: var(--c-muted); margin-top: 8px; }
.contact-note { color: var(--c-muted); margin-top: 16px; font-size: 16px; }

/* Ceník */
.pricelist { display: flex; flex-direction: column; max-width: 820px; }
.pricelist__row { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--c-line); }
.pricelist__row:first-child { border-top: 1px solid var(--c-line); }
.pricelist__name { display: flex; flex-direction: column; gap: 2px; font-family: var(--font-sans); font-weight: 600; color: var(--c-ink); }
.pricelist__detail { font-weight: 400; font-size: 14px; color: var(--c-muted); }
.pricelist__price { flex-shrink: 0; color: var(--c-primary-dk); font-family: var(--font-sans); font-weight: 600; text-align: right; white-space: nowrap; }
.pricelist__row--sub { padding: 10px 0; }
.pricelist__row--sub .pricelist__name { padding-left: 20px; position: relative; font-weight: 500; color: var(--c-muted); }
.pricelist__row--sub .pricelist__name::before { content: "–"; position: absolute; left: 0; }
/* Ceník — sekce */
.price-section { max-width: 820px; }
.price-section + .price-section { margin-top: 44px; }
.price-section__title { font-size: 24px; margin: 0 0 6px; }
.price-section__intro { color: var(--c-muted); margin: 0 0 8px; }
.pricelist__note { max-width: 820px; margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--c-muted); }

/* Ceník — úvodní text + výčet faktorů paušálu */
.price-intro { max-width: 820px; margin: 0 0 44px; }
.price-intro p { margin: 0 0 14px; }
.price-factors { list-style: disc; padding-left: 22px; margin: 0 0 20px; max-width: 820px; }
.price-factors li { margin-bottom: 6px; }

/* Ceník — sekce „Jak probíhá spolupráce?" (recykluje .steps z homepage) */
.price-process { margin-top: 56px; }
.price-process .steps { margin-top: 28px; }
.price-process .step__box { display: flex; align-items: center; justify-content: center; text-align: center; }
.price-process .step__box p { margin: 0; }
.price-process__closing { margin: 28px 0 0; font-family: var(--font-serif); font-size: 20px; line-height: 1.5; color: var(--c-ink); }
/* na širší obrazovce jeden řádek; na mobilu se přirozeně zalomí (jinak by přetekla) */
@media (min-width: 960px) { .price-process__closing { white-space: nowrap; } }

/* Formulář — bannery + chybové hlášky */
.form-banner { padding: 14px 18px; border-radius: var(--radius); margin-bottom: 20px; font-family: var(--font-sans); font-weight: 500; }
.form-banner--ok  { background: var(--c-bg-alt); color: var(--c-primary-dk); border: 1px solid var(--c-line); }
.form-banner--err { background: #fdeceb; color: var(--c-error); border: 1px solid #f3c9c6; }
.form__err-msg { display: block; color: var(--c-error); font-size: 14px; margin-top: 6px; }
.req { color: var(--c-primary); }
.form__note { font-size: 13px; color: var(--c-muted); margin: 4px 0 16px; }

/* Předkvalifikace v <details> (nativní, bez JS). */
.form-extra { margin: 4px 0 20px; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-bg); }
.form-extra > summary {
  list-style: none; cursor: pointer; padding: 14px 16px; min-height: 44px;
  font-family: var(--font-sans); font-weight: 600; font-size: 15px; color: var(--c-ink);
  display: flex; align-items: center; gap: 8px;
}
.form-extra > summary::-webkit-details-marker { display: none; }
.form-extra > summary::before {
  content: "+"; font-weight: 700; color: var(--c-primary); font-size: 20px; line-height: 1; width: 16px;
}
.form-extra[open] > summary::before { content: "×"; }
.form-extra > summary:hover { color: var(--c-primary); }
.form-extra > summary:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.form-extra__opt { color: var(--c-muted); font-weight: 400; }
.form-extra__hint { margin: 0 16px 16px; color: var(--c-muted); font-size: 14px; }
.form-extra .form__row,
.form-extra .form__fieldset { margin-left: 16px; margin-right: 16px; }

/* Radio skupiny předkvalifikace (fieldset + legend). */
.form__fieldset { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.form__legend { padding: 0; font-family: var(--font-sans); font-weight: 500; font-size: 16px; color: var(--c-ink); margin-bottom: 8px; }
.form__radios { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.form__radio { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 16px; color: var(--c-ink); cursor: pointer; }
.form__radio input { width: 18px; height: 18px; accent-color: var(--c-primary); flex-shrink: 0; }

/* Výběr služby — zaškrtávací mřížka (2 sloupce na širším). */
.form__checks { display: grid; grid-template-columns: 1fr; gap: 2px 20px; }
@media (min-width: 560px) { .form__checks { grid-template-columns: 1fr 1fr; } }
.form__check-inline { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 16px; color: var(--c-ink); cursor: pointer; }
.form__check-inline input { width: 18px; height: 18px; accent-color: var(--c-primary); flex-shrink: 0; }

/* Kontakt: fialové tlačítko poptávky (ne cihlové — červená = chyba/varování). */
.btn--primary { background: var(--c-primary); color: var(--c-white); }
.btn--primary:hover { background: var(--c-primary-dk); color: var(--c-white); }

/* Kontakt: mapa + kontakt nahoře, formulář v užším sloupci dole. */
.contact-top { align-items: stretch; }
.contact-map-wrap { display: flex; flex-direction: column; gap: 10px; }
.contact-map { width: 100%; min-height: 280px; flex: 1; border: 1px solid var(--c-line); border-radius: 14px; display: block; }
.contact-map__link { font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--c-primary-dk); text-decoration: none; align-self: flex-start; }
.contact-map__link:hover { text-decoration: underline; }
.form-wrap { max-width: 760px; margin-inline: auto; }
.form-wrap__title { scroll-margin-top: 88px; } /* aby sticky header nepřekryl kotvu #poptavka */
.form-wrap__lead { color: var(--c-muted); margin: 8px 0 28px; }

/* GDPR modal — nativní <dialog>. Bez JS: odkaz jde na /pravni (nový tab). */
.modal {
  max-width: min(680px, 92vw); width: 100%; max-height: 88vh; overflow-y: auto;
  margin: auto; /* na střed viewportu (nativní <dialog> modal) */
  border: 1px solid var(--c-line); border-radius: 16px; padding: 0;
  color: var(--c-ink); background: var(--c-white);
}
.modal::backdrop { background: rgba(27,29,26,0.55); }
.modal__inner { padding: 34px; }
.modal__title { font-size: 24px; margin-bottom: 14px; }
.modal__body { color: var(--c-muted); font-size: 16px; line-height: 1.6; margin-bottom: 22px; }
.modal__body > * + * { margin-top: 12px; }
.modal__body a { color: var(--c-primary-dk); }
#cookies-modal .modal__body { font-size: 20px; }

/* Success modal (po odeslání poptávky) — vycentrovaný obsah + ikona. */
.modal--sent .modal__inner { text-align: center; }
.modal__icon { display: inline-block; margin-bottom: 4px; line-height: 0; }
.modal__lead { color: var(--c-muted); font-size: 16px; line-height: 1.6; margin: 10px 0 24px; }
.modal--sent .btn { min-width: 160px; }

/* Jemné otevření dialogu; při prefers-reduced-motion bez animace. */
@media (prefers-reduced-motion: no-preference) {
  dialog.modal[open] { animation: modal-in 0.2s ease-out; }
  dialog.modal[open]::backdrop { animation: modal-fade 0.2s ease-out; }
}
@keyframes modal-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }

/* Právní dokument — odrážky + patička s datem. */
.legal ul { list-style: disc; padding-left: 22px; color: var(--c-muted); }
.legal li { margin-top: 6px; }
.legal__updated { color: var(--c-muted); font-size: 15px; margin-top: 28px; }

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