/* ==========================================================================
   Valašské.cz — design systém
   Viz docs/05-design-system.md
   ========================================================================== */

/* --- Tokeny --------------------------------------------------------------- */
/* Písma hostovaná u nás (docs/05). Dřív tu byly jen názvy bez @font-face,
   takže návštěvníci bez nainstalovaných písem viděli systémové. Variabilní
   woff2 z Google Fonts (OFL), latinka zvlášť a čeština (latin-ext) zvlášť —
   prohlížeč si podle unicode-range stáhne jen to, co stránka potřebuje. */
@font-face {
  font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url('fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url('fonts/bricolage-grotesque-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/inter-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;
}

:root {
  /* Neutrály — převzaté z pepafolta.cz */
  --ink:      #333333;
  --ink-2:    #555555;
  --ink-3:    #6B6B6B;
  --paper:    #F8F9FA;
  --surface:  #FFFFFF;
  --line:     #E0E0E0;
  --line-2:   #EFEFEF;

  /* Značka — navy z pepafolta.cz (#12305C) */
  --navy:     #12305C;   /* primární, kontrast na bílé 13,1:1 */
  --navy-2:   #1B4479;   /* světlejší — akcenty, role, eyebrow */
  --navy-3:   #0C2144;   /* nejtmavší — hero, patička, hover CTA */
  --tint:     #E8F0FF;   /* světle modrá plocha z pepafolta.cz */
  --navy-lt:  #9DBBE8;   /* akcent na tmavém pozadí */

  /* CTA je plná navy — web nemá druhý brandový odstín a nebude ho mít */
  --accent:   #12305C;
  --accent-2: #0C2144;

  /* Stavy — jediné barvy mimo značku, protože nesou význam */
  --ok:       #12305C;
  --warn:     #8A6212;
  --warn-bg:  #FDF6E3;
  --err:      #A32B1E;
  --err-bg:   #FDF0EE;

  /* Typografie */
  --font-head: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-display: 60px;
  --fs-h2:      38px;
  --fs-h3:      22px;
  --fs-body:    17px;
  --fs-small:   14px;

  /* Spacing — 4px základ */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;  --s-5: 24px;
  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;  --s-9: 96px;  --s-10: 128px;

  /* Zaoblení */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-full: 999px;

  /* Elevace — jen pro věci, které skutečně plavou */
  --shadow-float: 0 1px 2px rgba(22,25,27,.05), 0 8px 24px rgba(22,25,27,.08);

  /* Rozvržení */
  --container: 1180px;
  --container-narrow: 760px;
  --gutter: 24px;

  /* Vrstvení */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-mobilebar: 300;
  --z-modal: 400;
}

@media (max-width: 900px) {
  :root {
    --fs-display: 38px;
    --fs-h2: 28px;
    --fs-h3: 20px;
    --fs-body: 16px;
    --gutter: 16px;
  }
}

/* --- Základ --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; } /* kotvy nezajedou pod lepicí hlavičku */

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

/* Nejmenší písmo na webu je 13 px. Prohlížeč dává <small> „smaller“,
   v buňce ceníku (15 px) to bylo 12,5 px. */
small { font-size: max(13px, .85em); }
h1 { font-size: var(--fs-display); line-height: 1.05; letter-spacing: -0.03em; }
h2 { font-size: var(--fs-h2); line-height: 1.15; }

/* Nadpis podstránky je sémanticky h1 (stránka musí mít hlavní nadpis),
   ale opticky patří k sekcím — velikost hera by tu byla mimo měřítko. */
h1.sec-title { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -0.02em; }
h3 { font-size: var(--fs-h3); line-height: 1.3; }

p { margin: 0 0 var(--s-4); max-width: 68ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy-2); }

img { max-width: 100%; display: block; }

/* Na tmavých plochách je navy obrys neviditelný (navy na navy ~1,3:1). */
.site-header, .hero, .section--dark, .site-footer, .mobilenav { --focus: #fff; }

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

.skip-link {
  position: absolute; left: var(--s-4); top: -60px;
  background: var(--navy); color: #fff; padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm); z-index: var(--z-modal);
  transition: top 150ms ease;
}
/* Jen při ovládání z klávesnice. Šipka „Zpět nahoru“ sem přesouvá fokus
   i po kliknutí myší či prstem — s :focus odkaz pokaždé problikl. */
.skip-link:focus-visible { top: var(--s-4); color: #fff; }

/* --- Pomocné -------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: var(--container-narrow); }

/* Užší sloupec textu se zarovnává na STEJNOU LEVOU HRANU jako široké sekce.
   Kdyby se centroval, levý okraj by mezi bloky poskakoval — nadpis „Proč parta"
   by začínal jinde než „Kdo je kdo" nebo ceník. */
.container.narrow { max-width: var(--container); }
.container.narrow > * { max-width: var(--container-narrow); }

/* Vycentrované sekce (CTA pruhy) zůstávají uprostřed záměrně. */
.container.narrow.center { max-width: var(--container-narrow); }
.container.narrow.center > * { max-width: none; }
.section { padding-block: var(--s-9); }
.section--tight { padding-block: var(--s-7); }
.section--dark { background: var(--navy); color: #fff; padding-block: var(--s-10); }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--surface { background: var(--surface); }

.eyebrow {
  font-size: var(--fs-small); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 var(--s-3);
}
.section--dark .eyebrow { color: var(--navy-lt); }
/* Řádek nad hlavním nadpisem je uvnitř h1 (SEO) — nesmí zdědit písmo
   a řádkování nadpisu, má vypadat stejně jako samostatný odstavec. */
h1 > .eyebrow { display: block; font-family: var(--font-body); line-height: 1.6; }

/* `pretty` řeší sirotky — bez něj zbyde na posledním řádku perexu jedno
   slovo („…obvykle / dřív.") a odstavec vypadá useknutě. Nadpisy mají
   `balance` výš, ten je na víceřádkový text moc agresivní. */
.lead { font-size: 19px; color: var(--ink-2); text-wrap: pretty; }
.section--dark .lead { color: rgba(255,255,255,.82); }
.muted { color: var(--ink-3); font-size: var(--fs-small); }
.section--dark .muted { color: rgba(255,255,255,.6); }

/* Úvod stránky (eyebrow + h1 + perex) a obsah pod ním jsou jedna věc.
   Když se sečte spodní odsazení úvodu a horní odsazení další sekce,
   zůstane mezi perexem a obsahem přes 140 px prázdna a čtenář to čte tak,
   že tam něco chybí. Úvod proto spodní odsazení nemá a řídí ho sekce pod ním. */
.section--lede { padding-block: var(--s-9) 0; }
.section--lede + .section { padding-block-start: var(--s-7); }

/* Výjimka: sekce s vlastním pozadím. Pruh, který začne těsně pod perexem,
   vypadá jako chyba — tady se odstup nechává. */
.section--lede:has(+ .section--surface),
.section--lede:has(+ .section--dark) { padding-bottom: var(--s-7); }
.section--lede + .section--surface { padding-block-start: var(--s-9); }

.section-head { margin-bottom: var(--s-8); }
.section-head p { color: var(--ink-2); }
/* Mezera pod nadpisem, když za ním následuje perex. */
.section-head h2:not(:last-child) { margin-bottom: var(--s-4); }

.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } }


/* Vycentrovaný text musí přebít max-width: 68ch, jinak se centruje uvnitř úzkého boxu */
.center { text-align: center; max-width: none; margin-inline: auto; }

/* --- Tlačítka ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 14px 24px;
  font-family: var(--font-body); font-size: 16px; font-weight: 600;
  border-radius: var(--r-md); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color 150ms ease, border-color 150ms ease,
              color 150ms ease, transform 150ms ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-2); color: #fff; }

.btn--secondary { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--secondary:hover { background: var(--navy); color: #fff; }

.btn--onDark { background: #fff; color: var(--ink); }
.btn--onDark:hover { background: var(--paper); color: var(--ink); }

.btn--ghostDark { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn--ghostDark:hover { background: rgba(255,255,255,.1); color: #fff; border-color: #fff; }

.btn--lg { min-height: 54px; padding: 16px 30px; font-size: 17px; }
/* Tlačítko na konci karty služby — odsazení od textu nad ním. */
.btn--spaced { margin-top: 8px; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

.link-arrow { font-weight: 600; text-decoration: none; display: inline-flex; }
/* Šipka jen o mezeru vedle textu. S `gap` se mezera počítala i za skrytým
   doplňkem pro čtečku (.sr-only) a mezi slovem a šipkou bylo 16 px. */
.link-arrow > [aria-hidden] { margin-left: .3em; }
.link-arrow:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .btn { min-height: 52px; width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
}

/* --- Hlavička -------------------------------------------------------------
   Tmavá na všech stránkách, ne jen nad hero. Světlá hlavička na podstránkách
   a tmavá na úvodu působila jako dva různé weby.
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--navy-3);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); min-height: 72px; }

.logo {
  font-family: var(--font-head); font-weight: 700; font-size: 20px;
  letter-spacing: -0.02em; color: #fff; text-decoration: none;
  transition: opacity 150ms ease;
}
/* Bez tohohle by globální a:hover obarvil logo na tmavou navy,
   která na tmavé hlavičce zmizí. */
.logo:hover { color: #fff; opacity: .8; }
/* .cz není hlavní část názvu — stejná barva jako položky menu. */
.logo span { color: rgba(255,255,255,.85); font-weight: 500; }

/* Aktivní položka jen bílá a tučná, bez podtržení (to svítilo jako pěst
   na oko). Najetí myší = jemná podložka, jako na farmavranany. */
.nav { display: flex; align-items: center; gap: var(--s-2); }
.nav a {
  color: rgba(255,255,255,.78); text-decoration: none; font-size: 16px;
  font-weight: 500; padding: 8px 14px; border-radius: var(--r-md);
  transition: color 150ms ease, background-color 150ms ease;
}
.nav a:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav a[aria-current="page"] { color: #fff; font-weight: 600; }

/* Bílé tlačítko na tmavé hlavičce — navy na navy by zmizelo.
   Stejné řešení používá pepafolta.cz. */
.header-phone {
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: #fff; color: var(--navy); text-decoration: none;
  padding: 11px 18px; border-radius: var(--r-md); font-weight: 600; font-size: 15px;
  transition: background-color 150ms ease;
}
.header-phone:hover { background: var(--tint); color: var(--navy); }
/* Pod 1100 px by se výzva i s pěti položkami menu nevešla — zůstane číslo. */
.header-phone { white-space: nowrap; }
@media (max-width: 1100px) { .header-phone__cta { display: none; } }

@media (max-width: 900px) {
  .nav, .header-phone { display: none; }
  .header-inner { min-height: 62px; }
}

/* --- Hero ----------------------------------------------------------------- */
.hero {
  position: relative; isolation: isolate;
  background: var(--navy-3);
  color: #fff; overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; object-fit: cover; width: 100%; height: 100%; }
/* Překryv není dekorace — bez něj text přes fotku neprojde na kontrast (WCAG AA). */
.hero__scrim { position: absolute; inset: 0; z-index: 1; background: rgba(8,20,42,.30); }
.hero__inner { position: relative; z-index: 2; padding-block: var(--s-10); }

/* Karta s Pepou dole — spodní hrana s řádkem pod tlačítky. Na středu
   visela mezi nadpisem a tlačítky a nesedla k ničemu. */
.hero__grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-8); align-items: end; }
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; gap: var(--s-6); } }

.hero h1 { color: #fff; margin-bottom: var(--s-5); }
.hero .lead { color: rgba(255,255,255,.85); font-size: 19px; margin-bottom: var(--s-6); max-width: 56ch; }
.hero__eyebrow { color: var(--navy-lt); }

.hero__assurance {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  margin-top: var(--s-5); font-size: var(--fs-small); color: rgba(255,255,255,.72);
}
.hero__assurance li { list-style: none; display: flex; align-items: center; gap: var(--s-2); }
ul.hero__assurance { padding: 0; margin-top: var(--s-5); margin-bottom: 0; }

.hero__card {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-lg); padding: var(--s-6); backdrop-filter: blur(4px);
}
/* Jméno a role vlevo, fotka vpravo — fotka sama nahoře vlevo nechávala
   vedle sebe prázdné místo. */
.hero__card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); margin-bottom: var(--s-4);
}
.hero__card-head p { margin-bottom: var(--s-1); }
.hero__card-head p:last-child { margin-bottom: 0; }
.hero__card-name { font-family: var(--font-head); font-size: 19px; font-weight: 700; color: #fff; }
.hero__card-head .hero__portrait { margin-bottom: 0; flex-shrink: 0; }
.hero__portrait {
  width: 84px; height: 84px; border-radius: var(--r-full);
  background: var(--navy-2); border: 1px solid rgba(255,255,255,.28);
  display: grid; place-items: center; font-family: var(--font-head);
  font-size: 28px; font-weight: 700; color: #fff; margin-bottom: var(--s-4);
}

/* --- Pás log -------------------------------------------------------------- */
.logobar { background: var(--surface); border-block: 1px solid var(--line); padding-block: var(--s-6); }
.logobar__title { font-size: var(--fs-small); color: var(--ink-3); text-align: center; margin: 0 auto var(--s-5); max-width: none; }
/* Certifikace pod štítky — jeden řádek textu, ne další pilulky. */
.logobar__note { font-size: var(--fs-small); color: var(--ink-2); text-align: center; margin: var(--s-5) auto 0; max-width: 72ch; }
.logobar__list {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: var(--s-3) var(--s-5); list-style: none; padding: 0; margin: 0;
}
.logobar__list li {
  font-family: var(--font-head); font-weight: 600; font-size: 16px;
  color: var(--ink-3); padding: var(--s-2) var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-full);
}

/* --- Karty ---------------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s-6);
}
.card h3 { margin-bottom: var(--s-2); }
.card p { color: var(--ink-2); }

.card__meta {
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--fs-small); color: var(--ink-3); margin-bottom: var(--s-4);
}

/* Chybová stránka 404 — podle pepafolta.cz. Krátký text v úzkém sloupci
   by nechal pravou půlku prázdnou, proto vedle něj velké obrysové „404“. */
.notfound__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-8); align-items: center;
}
.notfound__title {
  font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -0.02em;
  margin-bottom: var(--s-4);
}
.notfound .lead { max-width: 52ch; }
.notfound__btns { margin-top: var(--s-6); }
.notfound__num {
  font-family: var(--font-head); font-weight: 800; font-size: 210px;
  line-height: 1; letter-spacing: -0.04em; user-select: none;
  color: var(--tint); -webkit-text-stroke: 2px #C9D1DC;
}
@media (max-width: 900px) {
  .notfound__grid { grid-template-columns: minmax(0, 1fr); }
  .notfound__num { display: none; }
}

.notfound-next { padding-block: var(--s-7) var(--s-8); }
.notfound-next__title { font-size: var(--fs-h3); margin-bottom: var(--s-5); }
.notfound-next__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4);
}
@media (max-width: 900px) { .notfound-next__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 359px) { .notfound-next__grid { grid-template-columns: minmax(0, 1fr); } }
.notfound-next__card {
  display: flex; flex-direction: column; gap: var(--s-2); height: 100%;
  padding: var(--s-5); text-decoration: none; color: var(--ink-2); font-size: 15px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.notfound-next__card:hover { border-color: var(--navy); box-shadow: var(--shadow-float); }
.notfound-next__card strong { color: var(--navy); font-size: 17px; }
.notfound-next__icon {
  display: inline-grid; place-items: center; width: 36px; height: 36px;
  border-radius: var(--r-sm); background: var(--tint); color: var(--navy);
  margin-bottom: var(--s-2);
}
.notfound-next__report { margin: var(--s-6) 0 0; font-size: 15px; color: var(--ink-2); }

/* Problém → řešení */
.pain { border-top: 3px solid var(--accent); }
.pain h3 { font-size: 18px; color: var(--ink); }
.pain__quote { color: var(--ink-2); font-size: 16px; margin-bottom: var(--s-4); }
.pain__fix {
  border-top: 1px solid var(--line); padding-top: var(--s-4);
  font-weight: 600; color: var(--navy); font-size: 16px;
}

/* Metriky případovek */
.metrics {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--paper); padding: var(--s-4) var(--s-3); margin: var(--s-4) 0;
}
.metric { text-align: center; }
.metric__value {
  font-family: var(--font-head); font-size: 24px; font-weight: 700;
  color: var(--navy); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.metric__label { font-size: 13px; color: var(--ink-3); margin-top: var(--s-1); }

/* Služby */
.service { display: flex; flex-direction: column; gap: var(--s-2); height: 100%; }
.service__price {
  font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.service__price small { font-weight: 500; color: var(--ink-3); font-size: 13px; }
/* Zvýrazněná karta: tint z pepafolta.cz místo druhé barvy */
.service--featured { border-color: var(--navy); border-width: 2px; background: var(--tint); }

/* Podrobný výpis služeb stojí v podbarveném pruhu ohraničeném linkami. */
.services--band { border-block: 1px solid var(--line); }

/* Hlavní služba přes obě kolony — jinak by lichá karta zbyla sama
   vedle prázdné poloviny mřížky. Text se uvnitř dělí na dva sloupce,
   přes celou šířku by měl řádky přes 1100 px. */
.service--wide { grid-column: 1 / -1; }
.service__cols {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-4) var(--s-8); align-items: start;
}
@media (max-width: 900px) {
  .service__cols { grid-template-columns: 1fr; gap: var(--s-4); }
}

/* Kroky procesu */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-5); }
.steps--3col { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .steps--3col { grid-template-columns: 1fr; } }
.step { position: relative; padding-left: 56px; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 40px; height: 40px; border-radius: var(--r-full);
  background: var(--navy); color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; font-size: 17px;
}
.section--dark .step::before { background: #fff; color: var(--navy); }
.step h3 { font-size: 17px; margin-bottom: var(--s-1); }
.step p { font-size: 15px; color: var(--ink-2); margin-bottom: var(--s-1); }
.section--dark .step p { color: rgba(255,255,255,.75); }
.step__when { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.section--dark .step__when { color: var(--navy-lt); }

/* Co naopak neděláme
   Vědomě tlumené karty — tohle není nabídka, nesmí to přebít služby nad tím.
   Proto paper místo surface, žádný akcent a šedý křížek.
   Křížek je nakreslený v CSS (dva proužky v kolečku, celé otočené o 45°),
   ne znakem — čtečka by „✕" přečetla jako text. */
/* Průhledné pozadí a světlejší linka: karta ustoupí do pozadí na šedé
   stránce i v bílé sekci. Napevno nastavená barva by v jedné z nich zmizela. */
.nope { background: transparent; border-color: var(--line-2); }
.nope__title {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: 17px; margin-bottom: var(--s-3);
}
.nope__title::before {
  content: ""; flex: 0 0 22px; height: 22px; border-radius: var(--r-full);
  background-color: var(--line);
  background-image:
    linear-gradient(var(--ink-3), var(--ink-3)),
    linear-gradient(var(--ink-3), var(--ink-3));
  background-size: 10px 2px, 2px 10px;
  background-position: center;
  background-repeat: no-repeat;
  transform: rotate(45deg);
}
.nope p { font-size: 15px; margin-bottom: 0; }

/* Karta parťáka — rovnocenná, bez hierarchie (viz docs/08) */
.mate { display: flex; flex-direction: column; height: 100%; }
.mate__top { display: flex; gap: var(--s-4); align-items: center; margin-bottom: var(--s-4); }
.mate__avatar {
  width: 72px; height: 72px; border-radius: var(--r-full); flex-shrink: 0;
  background: var(--navy); color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-head); font-size: 22px; font-weight: 700;
}
.hero__portrait--photo { object-fit: cover; padding: 0; }

/* Blok „Fotka s popiskem“ (blocks/photo.php). */
.photo { margin: 0; }
.photo img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); background: var(--tint); }
.photo figcaption { margin-top: var(--s-3); font-size: var(--fs-small); color: var(--ink-3); }

/* Fotka drží přesně rozměr iniciál, aby doplnění fotky nepohnulo kartou. */
.mate__photo {
  width: 72px; height: 72px; border-radius: var(--r-full); flex-shrink: 0;
  object-fit: cover; background: var(--paper); border: 1px solid var(--line);
}
.mate__name { font-family: var(--font-head); font-size: 19px; font-weight: 700; line-height: 1.2; }
.mate__role { font-size: var(--fs-small); color: var(--accent); font-weight: 600; margin-top: 2px; }
.mate p { font-size: 15px; color: var(--ink-2); }
.mate__body { flex: 1; }
.mate__foot {
  display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center;
  margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line-2);
}
.pill {
  display: inline-flex; align-items: center; gap: var(--s-1);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-full);
  padding: 4px 12px; font-size: 13px; font-weight: 600; color: var(--ink-2);
  white-space: nowrap;
}
.section--dark .mate__avatar { background: #fff; color: var(--navy); }
.section--dark .mate p { color: rgba(255,255,255,.78); }
.section--dark .mate__name { color: #fff; }
.section--dark .mate__role { color: var(--navy-lt); }
.section--dark .mate__foot { border-top-color: rgba(255,255,255,.16); }
.section--dark .pill { background: transparent; border-color: rgba(255,255,255,.28); color: rgba(255,255,255,.8); }

/* Reference */
.quote {
  margin: 0; /* <figure> má v prohlížeči okraj 40 px — rozbíjel levou hranu */
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md); padding: var(--s-6);
}
.quote blockquote { margin: 0 0 var(--s-4); font-size: 19px; line-height: 1.55; color: var(--ink); }
.quote figcaption { font-size: var(--fs-small); color: var(--ink-3); }
.quote figcaption strong { color: var(--ink); display: block; font-size: 15px; }

/* Zásady / seznam s odrážkou */
.principles { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-5); }
.principle { padding-left: var(--s-6); border-left: 2px solid var(--navy); }
.principle h3 { font-size: 17px; margin-bottom: var(--s-1); }
.principle p { font-size: 15px; color: var(--ink-2); }
.section--dark .principle { border-left-color: var(--navy-lt); }
.section--dark .principle p { color: rgba(255,255,255,.78); }

/* --- Štítek K DOPLNĚNÍ ---------------------------------------------------- */
.todo {
  display: inline-flex; align-items: center; gap: var(--s-1);
  background: var(--warn-bg); color: var(--warn);
  border: 1px solid rgba(138,98,18,.28); border-radius: var(--r-full);
  padding: 2px 10px; font-size: 13px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.todo-box {
  background: var(--warn-bg); border: 1px dashed rgba(138,98,18,.4);
  border-radius: var(--r-sm); padding: var(--s-3) var(--s-4);
  color: var(--warn); font-size: var(--fs-small);
}

/* --- Tabulka balíčků ------------------------------------------------------ */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
table.pricing { width: 100%; border-collapse: collapse; font-size: 15px; }
/* Pevná šířka jen u víc než dvou balíčků — se dvěma se tabulka vejde i na
   mobil. S min-width 640 px byly na telefonu vidět jen názvy řádků, ceny
   a tlačítka až po posunu, o kterém nic nevědělo. */
table.pricing--wide { min-width: 640px; }
@media (max-width: 640px) {
  table.pricing { font-size: 14px; }
  table.pricing th, table.pricing td { padding: var(--s-2) var(--s-3); }
  table.pricing thead th { font-size: 15px; }
  table.pricing .btn { padding-inline: var(--s-3); }
}
table.pricing th, table.pricing td { padding: var(--s-3) var(--s-4); text-align: left; border-bottom: 1px solid var(--line-2); }
table.pricing thead th { background: var(--paper); font-family: var(--font-head); font-size: 16px; vertical-align: top; }
table.pricing thead th small { display: block; font-family: var(--font-body); font-weight: 500; color: var(--ink-3); font-size: 13px; margin-top: 2px; }
table.pricing td:not(:first-child), table.pricing th:not(:first-child) { text-align: center; }
table.pricing tbody tr:last-child td { border-bottom: 0; }
table.pricing .price { font-family: var(--font-head); font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
table.pricing .col-featured { background: var(--tint); }
.yes { color: var(--ok); font-weight: 700; }
.no { color: var(--ink-3); }

/* --- FAQ ------------------------------------------------------------------ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--s-5) var(--s-8) var(--s-5) 0;
  font-family: var(--font-head); font-weight: 600; font-size: 18px;
  position: relative; transition: color 150ms ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--navy); }
.faq summary::after {
  content: "+"; position: absolute; right: var(--s-2); top: 50%;
  transform: translateY(-50%); font-size: 24px; font-weight: 400; color: var(--ink-3);
  transition: transform 150ms ease;
}
.faq details[open] summary::after { content: "−"; }
.faq details p { padding-bottom: var(--s-5); color: var(--ink-2); }

/* --- Formulář ------------------------------------------------------------- */
.form { display: grid; gap: var(--s-5); }
.field { display: grid; gap: var(--s-2); }
.field label { font-weight: 600; font-size: 15px; }
.field input, .field textarea {
  font-family: var(--font-body); font-size: 16px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 13px var(--s-4); width: 100%;
  transition: border-color 150ms ease;
}
.field input:hover, .field textarea:hover { border-color: var(--ink-3); }
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--navy); }
.field textarea { resize: vertical; min-height: 130px; }
.field .hint { font-size: 13px; color: var(--ink-3); }
.field--error input, .field--error textarea { border-color: var(--err); background: var(--err-bg); }
.field .error { font-size: 13px; color: var(--err); font-weight: 600; }

.check { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-small); color: var(--ink-2); }
.check input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--navy); }

/* --- Kontaktní panel ------------------------------------------------------ */
.contact-grid { display: grid; grid-template-columns: 3fr 2fr; gap: var(--s-8); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: var(--s-6); } }

.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-5); }
.contact-list li { display: flex; gap: var(--s-4); align-items: flex-start; }
.contact-list .ico {
  width: 40px; height: 40px; border-radius: var(--r-sm); flex-shrink: 0;
  background: var(--paper); border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--navy);
}
.contact-list .k { font-size: 13px; color: var(--ink-3); }
.contact-list .v { font-family: var(--font-head); font-weight: 700; font-size: 18px; }
.contact-list .v a { color: var(--ink); text-decoration: none; }
.contact-list .v a:hover { color: var(--navy); text-decoration: underline; }

/* --- Patička -------------------------------------------------------------- */
.site-footer { background: var(--navy-3); color: rgba(255,255,255,.7); padding-block: var(--s-8) var(--s-6); font-size: 15px; }
/* Nadpisy v patičce jsou <h2> — na stránce jsou nejvýš h2, takže h4
   by přeskakoval úroveň. Velikost dělá třída, ne značka. */
.site-footer .foot-h { font-family: var(--font-head); font-size: 15px; font-weight: 700; color: #fff; margin: 0 0 var(--s-4); letter-spacing: 0; }
.site-footer a { color: rgba(255,255,255,.7); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: var(--s-7); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); } }
@media (max-width: 640px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.14); margin-top: var(--s-7); padding-top: var(--s-5);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); justify-content: space-between;
  font-size: 13px;
}

/* --- Mobilní lišta -------------------------------------------------------- */
.mobilebar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-mobilebar);
  background: var(--surface); border-top: 1px solid var(--line);
  box-shadow: var(--shadow-float);
  padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom));
  gap: var(--s-3);
}
.mobilebar .btn { flex: 1; min-height: 50px; width: auto; }
@media (max-width: 900px) {
  .mobilebar { display: flex; }
  body { padding-bottom: 82px; }
}

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

/* ==========================================================================
   Doplňky pro živý web — admin lišta, mobilní menu, formulářové stavy
   ========================================================================== */

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

.prose p { margin-bottom: var(--s-4); }
.tight-list { color: var(--ink-2); font-size: 15px; padding-left: 20px; margin: 0 0 20px; }
.tight-list li { margin-bottom: 4px; }
.callout {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 12px 16px; font-size: 15px;
}
.details-summary {
  cursor: pointer; font-family: var(--font-head); font-weight: 600; font-size: 17px;
}
.card--form { padding: var(--s-8); }
.req { color: var(--accent); }

/* Past na roboty — musí zůstat v DOM, ale mimo dohled i mimo tab pořadí. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-alert {
  background: var(--err-bg); border: 1px solid var(--err); color: var(--err);
  border-radius: var(--r-sm); padding: var(--s-3) var(--s-4);
  font-size: 15px; font-weight: 600; margin-bottom: var(--s-5);
}

.pill--link { text-decoration: none; color: var(--navy); border-color: var(--navy); }
.pill--link:hover { background: var(--tint); color: var(--navy); }

/* --- Mobilní menu --------------------------------------------------------- */
.navtoggle {
  display: none; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; padding: 10px; flex-direction: column;
  justify-content: center; gap: 5px;
}
.navtoggle span {
  display: block; height: 2px; background: #fff; border-radius: 2px;
  transition: transform 150ms ease, opacity 150ms ease;
}
.navtoggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navtoggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navtoggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobilenav { display: none; }
@media (max-width: 900px) {
  .navtoggle { display: flex; }
  .mobilenav[hidden] { display: none; }
  .mobilenav {
    display: flex; flex-direction: column;
    background: var(--navy-3); border-top: 1px solid rgba(255,255,255,.14);
    padding: var(--s-3) var(--gutter) var(--s-4);
  }
  .mobilenav a {
    padding: var(--s-3) 0; text-decoration: none; color: #fff;
    font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .mobilenav a:last-child { border-bottom: 0; }
}

/* --- Admin lišta ---------------------------------------------------------- */
.adminbar {
  position: sticky; top: 0; z-index: 400;
  background: var(--ink); color: #fff; font-size: 13px;
}
.adminbar--visitor { background: var(--accent); }
.adminbar__inner {
  max-width: var(--container); margin-inline: auto; padding: 8px var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5);
}
.adminbar__brand { font-weight: 700; }
.adminbar__hint { color: rgba(255,255,255,.6); }
.adminbar__nav { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.adminbar a { color: rgba(255,255,255,.85); text-decoration: none; }
.adminbar a:hover { color: #fff; text-decoration: underline; }

/* Přepínač náhledu a odhlášení jsou formuláře (mění stav, takže POST
   s tokenem), ale v liště mají vypadat jako zbytek navigace. */
.adminbar__form { display: contents; }
.adminbar__form button {
  font: inherit; color: rgba(255,255,255,.85);
  background: none; border: 0; padding: 0; cursor: pointer;
}
.adminbar__form button:hover { color: #fff; text-decoration: underline; }
.adminbar__toggle {
  background: rgba(255,255,255,.15); padding: 4px 12px; border-radius: var(--r-full);
  font-weight: 600; color: #fff !important;
}
.adminbar__toggle:hover { background: rgba(255,255,255,.28); text-decoration: none !important; }

/* Sticky hlavička musí být pod admin lištou, ne přes ni. */
.has-adminbar .site-header { top: 37px; }

/* --- Bloky v režimu editace ---------------------------------------------- */
.admin-block { position: relative; isolation: isolate; }
.admin-block__bar {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  display: flex; align-items: center; gap: var(--s-2);
  background: var(--ink); color: #fff; font-size: 13px;
  padding: 4px 6px 4px 12px; border-radius: var(--r-full);
  opacity: 0; transition: opacity 150ms ease;
}
.admin-block:hover .admin-block__bar,
.admin-block:focus-within .admin-block__bar { opacity: 1; }
.admin-block--off .admin-block__bar { opacity: 1; }
.admin-block__name { font-weight: 600; }
.admin-block__badge { color: #FFD98A; }
.admin-block__edit {
  background: #fff; color: var(--ink); text-decoration: none;
  padding: 3px 10px; border-radius: var(--r-full); font-weight: 600;
}
.admin-block__edit:hover { background: var(--tint); color: var(--navy); }

/* Vypnutý blok: admin ho vidí, ale je jasné, že návštěvník ne. */
.admin-block--off { opacity: .45; filter: grayscale(1); }
.admin-block--off::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  border: 2px dashed var(--warn); pointer-events: none;
}
.admin-missing {
  background: var(--err-bg); color: var(--err); border: 1px dashed var(--err);
  padding: var(--s-4); text-align: center; font-size: 14px;
}

/* --- Právní řádek pod formulářem ------------------------------------------ */
.form-legal { font-size: 13px; color: var(--ink-3); margin: 0; }

/* --- Cookie lišta ---------------------------------------------------------
   Plovoucí karta, ne pruh přes celou šířku. Obě tlačítka mají shodnou
   velikost i výraznost — vyžaduje to ÚOOÚ, „přijmout" nesmí být
   nápadnější než „odmítnout".
   -------------------------------------------------------------------------- */
.cookiebar {
  position: fixed; z-index: 500;
  /* Vpravo: vlevo dole zakrývala nadpis hera a hlavní tlačítko. */
  right: var(--s-5); bottom: var(--s-5); width: min(520px, calc(100vw - 2 * var(--s-5)));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 2px 8px rgba(12,33,68,.08), 0 16px 48px rgba(12,33,68,.18);
  animation: cookiebar-in 220ms ease-out both;
}
@keyframes cookiebar-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .cookiebar { animation: none; } }

.cookiebar__inner { padding: var(--s-6); }

.cookiebar__head { display: flex; gap: var(--s-3); align-items: center; margin-bottom: var(--s-3); }
.cookiebar__icon {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--r-full);
  background: var(--tint); color: var(--navy);
  display: grid; place-items: center; font-size: 18px;
}
.cookiebar h2 { font-size: 17px; margin: 0; }

.cookiebar p { font-size: 14px; color: var(--ink-2); margin-bottom: var(--s-4); max-width: none; }

.cookiebar__detail { border-top: 1px solid var(--line-2); margin-bottom: var(--s-4); }
.cookiebar__detail summary {
  cursor: pointer; font-size: 14px; font-weight: 600; color: var(--navy);
  padding: var(--s-3) 0; list-style: none; display: flex; align-items: center; gap: var(--s-2);
}
.cookiebar__detail summary::-webkit-details-marker { display: none; }
.cookiebar__detail summary::before { content: "+"; font-size: 16px; line-height: 1; }
.cookiebar__detail[open] summary::before { content: "−"; }
.cookiebar__detail summary:hover { color: var(--navy-2); }

.cookiebar__form { display: grid; gap: var(--s-4); padding-bottom: var(--s-4); }
.cookiebar__cat {
  display: flex; gap: var(--s-3); align-items: flex-start;
  font-size: 13px; color: var(--ink-2); line-height: 1.5;
}
.cookiebar__cat input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--navy); flex-shrink: 0; }
.cookiebar__cat strong { color: var(--ink); }
.cookiebar__cat em { font-style: normal; color: var(--ink-3); font-size: 13px; }

/* Potvrzení podrobné volby. Je to třetí, samostatná akce — smí být
   výraznější než dvojice níž, protože ÚOOÚ řeší rovnost mezi
   „přijmout" a „odmítnout", ne vůči tomuhle. */
.cookiebar__form .btn {
  width: 100%; min-height: 44px; padding: 11px 20px; font-size: 15px;
  background: var(--navy); color: #fff; border-color: var(--navy);
}
.cookiebar__form .btn:hover { background: var(--navy-3); color: #fff; border-color: var(--navy-3); }

.cookiebar__actions { display: flex; gap: var(--s-3); }
/* Shodná velikost i váha obou tlačítek. Liší se jen výplní, ne důrazem. */
.btn--cookie {
  flex: 1; min-height: 46px; padding: 12px 20px; width: auto;
  background: var(--surface); color: var(--navy);
  border: 2px solid var(--navy); font-weight: 600; font-size: 15px;
}
.btn--cookie:hover { background: var(--tint); color: var(--navy); }

.cookiebar__foot {
  border-top: 1px solid var(--line-2); margin-top: var(--s-4); padding-top: var(--s-3);
  font-size: 13px; color: var(--ink-3);
}

@media (max-width: 640px) {
  .cookiebar {
    left: var(--s-3); right: var(--s-3); width: auto;
    bottom: calc(76px + var(--s-3)); /* nad mobilní lištou se zavoláním */
    max-height: calc(100vh - 120px); overflow-y: auto;
  }
  /* Kratší: dřív zabírala 461 px a z hera zbyl jeden řádek nadpisu. */
  .cookiebar__inner { padding: var(--s-4); }
  .cookiebar__head { margin-bottom: var(--s-2); }
  .cookiebar p { font-size: 13px; margin-bottom: var(--s-3); }
  .cookiebar__detail { margin-bottom: var(--s-3); }
  .cookiebar__detail summary { padding-block: var(--s-2); }
  .btn--cookie { min-height: 44px; padding: 10px 12px; }
  .cookiebar__foot { margin-top: var(--s-3); padding-top: var(--s-2); }
}

@media (min-width: 641px) and (max-width: 900px) {
  .cookiebar { bottom: calc(76px + var(--s-5)); }
}


/* Štítek u skryté stránky v navigaci — vidí ho jen přihlášený admin. */
.nav-hidden {
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--warn); color: #fff; border-radius: var(--r-full);
  padding: 1px 7px; margin-left: 4px; vertical-align: middle;
}

/* [hidden] musí přebít display z .btn — jinak zůstane vidět. */
[hidden] { display: none !important; }

/* Reference jako karta ve výpisu — na rozdíl od jedné citace na úvodu. */
.quote--card blockquote { font-size: 17px; }
/* Výpis referencí do sloupců jako zeď — reference jsou různě dlouhé
   a v mřížce by krátké karty měly půl výšky prázdné. */
.refs { columns: 3 300px; column-gap: var(--s-5); }
.refs .quote { break-inside: avoid; margin-bottom: var(--s-5); }
.quote__service {
  display: table; margin-top: var(--s-2);
  background: var(--tint); color: var(--navy); border-radius: var(--r-full);
  padding: 2px 10px; font-size: 13px; font-weight: 600;
}
.quote__about {
  font-size: 13px; font-weight: 600; color: var(--ink-3);
  margin-bottom: var(--s-2);
}

/* --- Zpět nahoru ---------------------------------------------------------- */
.totop {
  position: fixed; right: var(--s-5); bottom: var(--s-5); z-index: var(--z-sticky);
  width: 46px; height: 46px; border-radius: var(--r-full);
  background: var(--navy); color: #fff; border: 0; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(12,33,68,.16), 0 8px 24px rgba(12,33,68,.18);
  transition: background-color 150ms ease, transform 150ms ease, opacity 150ms ease;
}
.totop:hover { background: var(--navy-3); transform: translateY(-2px); }
.totop:active { transform: translateY(0); }

@media (max-width: 900px) {
  /* Nad mobilní lištou se zavoláním, ne přes ni. */
  /* Lišta je vysoká 82 px + pruh s gesty na iPhonu (safe-area) — bez něj
     šipka zajela pod lištu, a ta má vyšší vrstvu. */
  .totop {
    bottom: calc(82px + env(safe-area-inset-bottom) + var(--s-3));
    z-index: calc(var(--z-mobilebar) + 1);
    width: 42px; height: 42px;
  }
}

.todo-box p { margin-bottom: var(--s-3); max-width: none; }
.todo-box p:last-child { margin-bottom: 0; }

/* --- Doplňkové služby pod ceníkem ---------------------------------------- */
.extras {
  margin-top: var(--s-8); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-6);
}
.extras h3 { font-size: 20px; margin-bottom: var(--s-2); }
/* Seznam jako hlavní ceník (bez tabulky balíčků). */
.extras--main { margin-top: var(--s-6); }
.extras--main .extras__row dt strong { font-size: 17px; }
.extras--main .extras__row dd { font-size: 18px; }
.extras > .muted { margin-bottom: var(--s-5); }
.extras__list { margin: 0; }
.extras__row {
  display: flex; gap: var(--s-5); align-items: baseline; justify-content: space-between;
  padding: var(--s-4) 0; border-top: 1px solid var(--line-2);
}
.extras__row:first-child { border-top: 0; padding-top: 0; }
.extras__row dt { flex: 1; }
.extras__row dt strong { font-size: 16px; }
.extras__note { display: block; font-size: 14px; color: var(--ink-3); margin-top: 2px; }
.extras__row dd {
  margin: 0; font-family: var(--font-head); font-weight: 700; color: var(--navy);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  .extras__row { flex-direction: column; gap: var(--s-1); }
  .extras__row dd { font-size: 17px; }
}

/* ==========================================================================
   Svislý rytmus na mobilu
   Design systém počítá s 96 px na desktopu a 48 px na mobilu — tenhle blok
   to teprve zavádí. Bez něj si i telefon držel desktopové mezery a mezi
   sekcemi zůstávaly prázdné pásy přes půl obrazovky.
   ========================================================================== */
@media (max-width: 900px) {
  .section        { padding-block: var(--s-7); }   /* 96 → 48 */
  .section--tight { padding-block: var(--s-6); }   /* 48 → 32 */
  .section--dark  { padding-block: var(--s-8); }   /* 128 → 64 */

  /* Úvod stránky se musí zmenšit se zbytkem, jinak by ho `.section` výš
     v tomhle bloku přebil a spodní odsazení by se vrátilo. */
  .section--lede  { padding-block: var(--s-7) 0; }
  .section--lede + .section { padding-block-start: var(--s-6); }
  .section--lede:has(+ .section--surface),
  .section--lede:has(+ .section--dark) { padding-bottom: var(--s-6); }
  .section--lede + .section--surface { padding-block-start: var(--s-7); }

  .hero__inner    { padding-block: var(--s-8); }   /* 128 → 64 */
  .logobar        { padding-block: var(--s-5); }   /* 32 → 24 */
  /* Štítky na mobilu těsněji — s mezerou 24 px byl pás přes celou obrazovku. */
  .logobar__list  { gap: var(--s-2); }
  .logobar__list li { padding: 6px var(--s-3); font-size: 14px; }
  .logobar__title { margin-bottom: var(--s-4); }

  .section-head   { margin-bottom: var(--s-6); }   /* 64 → 32 */
  .hero .lead     { margin-bottom: var(--s-5); }

  /* Karty a bloky pod sebou nepotřebují stejný odstup jako vedle sebe. */
  .grid           { gap: var(--s-4); }
}

@media (max-width: 640px) {
  .section        { padding-block: var(--s-6); }   /* 32 */
  .section--tight { padding-block: var(--s-5); }
  .section--dark  { padding-block: var(--s-7); }   /* 48 */

  .section--lede  { padding-block: var(--s-6) 0; }
  .section--lede + .section { padding-block-start: var(--s-5); }
  .section--lede:has(+ .section--surface),
  .section--lede:has(+ .section--dark) { padding-bottom: var(--s-5); }
  .section--lede + .section--surface { padding-block-start: var(--s-6); }
  .hero__inner    { padding-block: var(--s-7); }

  .card           { padding: var(--s-5); }
  .card--form     { padding: var(--s-5); }
  .extras         { padding: var(--s-5); margin-top: var(--s-6); }
  .steps          { gap: var(--s-4); }
}

/* --- Před a po (blocks/beforeafter.php) -----------------------------------
   Dva snímky přes sebe, horní („před“) se ořezává podle --pp. Průhledný
   range přes celou plochu = jezdec funguje myší, prstem i šipkami. */
.pp__ovladani { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.pp__volby { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.pp__volby button { font: 600 15px/1.2 var(--font-body); padding: 10px 14px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink); cursor: pointer; transition: background-color 150ms ease, color 150ms ease; }
.pp__volby button:hover { background: var(--tint); color: var(--navy); }
.pp__volby button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.pp__plocha { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 1280 / 860; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.pp__plocha img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pp__pred { clip-path: inset(0 calc(100% - var(--pp)) 0 0); }
.pp__cara { position: absolute; top: 0; bottom: 0; left: var(--pp); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(18, 48, 92, .35); pointer-events: none; z-index: 2; }
.pp__cara span { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: #fff; font-size: 20px; }
.pp__stitek { position: absolute; top: 12px; z-index: 2; padding: 4px 12px; border-radius: var(--r-full); background: var(--navy); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; pointer-events: none; }
.pp__stitek--pred { left: 12px; background: #fff; color: var(--navy); border: 1px solid var(--line); }
.pp__stitek--po { right: 12px; }
.pp__jezdec { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.pp__plocha:has(.pp__jezdec:focus-visible) { outline: 3px solid var(--navy-2); outline-offset: 3px; }
.pp__pod { margin: var(--s-4) 0 0; color: var(--ink-2); }
@media (max-width: 640px) {
  .pp__volby { width: 100%; }
  .pp__volby button { flex: 1 1 auto; padding: 10px 8px; font-size: 14px; }
  .pp__plocha { aspect-ratio: 390 / 780; max-width: 360px; margin-inline: auto; }
}

/* --- Zaškrtávací seznam (blocks/checklist.php) ----------------------------- */
.checklist { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
@media (max-width: 900px) { .checklist { grid-template-columns: 1fr; } }
.checklist__item { display: flex; gap: 14px; align-items: flex-start; padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease; }
.checklist__item:hover { border-color: var(--navy); }
.checklist__item input { flex: none; width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--navy); cursor: pointer; }
.checklist__item:has(input:checked) { border-color: var(--navy); background: var(--tint); }
.checklist__body { display: grid; gap: 8px; }
.checklist__title { font-family: var(--font-head); font-weight: 600; font-size: 18px; line-height: 1.3; color: var(--navy); }
.checklist__text { color: var(--ink-2); font-size: 16px; }
.checklist__fix { font-size: 15px; color: var(--ink); border-top: 1px solid var(--line); padding-top: 10px; }
.checklist__fix strong { color: var(--navy); }
.checklist__souhrn { position: sticky; bottom: var(--s-3); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); margin-top: var(--s-5); padding: 14px 16px 14px 24px; border-radius: var(--r-md); background: var(--navy); color: #fff; }
.checklist__souhrn[hidden] { display: none; }
/* Do 900 px je dole mobilní lišta (82 px) — souhrn musí stát nad ní. */
@media (max-width: 900px) { .checklist__souhrn { bottom: calc(82px + var(--s-3) + env(safe-area-inset-bottom)); } }
/* Šipka nahoru nad souhrnem zaškrtnutých chyb (třídu přidává site.js) */
body.souhrn-dole .totop { bottom: calc(var(--s-5) + var(--s-3) + var(--souhrn-h, 0px)); }
@media (max-width: 900px) {
  body.souhrn-dole .totop { bottom: calc(82px + env(safe-area-inset-bottom) + var(--s-3) * 2 + var(--souhrn-h, 0px)); }
}

/* --- Úvod prodejní podstránky (blocks/pagehero.php) -----------------------
   Světlý, dva sloupce: text a tlačítka vlevo, obrázek s kartičkou vpravo,
   pod tím pás faktů přes celou šířku. */
.pagehero { padding-bottom: 0; }
.pagehero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s-8); align-items: center; padding-bottom: var(--s-8); }
.pagehero__title { font-size: clamp(36px, 4.4vw, 54px); line-height: 1.08; letter-spacing: -0.03em; margin-bottom: var(--s-5); text-wrap: balance; }
.pagehero .lead { margin-bottom: var(--s-6); }
.pagehero__media { position: relative; }
.pagehero__media img { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 860; object-fit: cover; object-position: top; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.pagehero__card { position: absolute; left: calc(var(--s-6) * -1); bottom: var(--s-6); max-width: 270px; margin: 0; padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-float); font-size: 14px; color: var(--ink-2); }
.pagehero__card strong { display: block; font-family: var(--font-head); font-size: 16px; color: var(--navy); }
.pagehero__facts { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.pagehero__facts ul { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; }
.pagehero__facts li { padding: var(--s-5) var(--s-4); border-right: 1px solid var(--line); }
.pagehero__facts li:first-child { padding-left: 0; }
.pagehero__facts li:last-child { border-right: 0; }
.pagehero__facts strong { display: block; font-family: var(--font-head); font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; color: var(--navy); }
.pagehero__facts span { font-size: 15px; color: var(--ink-3); }
@media (max-width: 900px) {
  .pagehero__grid { grid-template-columns: 1fr; gap: var(--s-6); padding-bottom: var(--s-6); }
  .pagehero__media { max-width: 560px; }
  .pagehero__card { left: var(--s-3); bottom: var(--s-3); }
  .pagehero__facts ul { grid-template-columns: 1fr 1fr; }
  .pagehero__facts li:nth-child(2) { border-right: 0; }
  .pagehero__facts li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .pagehero__facts li:nth-child(odd) { padding-left: 0; }
}
@media (max-width: 640px) { .pagehero__facts strong { font-size: 22px; } }
/* Prodejní stránka /shoptet/: nadpisy sekcí přes celou šířku (úzký sloupec 760 px je lámal
   a vpravo zůstávalo prázdno), perex dál úzký kvůli čitelnosti. Ostatní stránky beze změny. */
body[data-page="shoptet"] .section-head { max-width: none; }
body[data-page="shoptet"] .section-head h2 { max-width: none; text-wrap: balance; }
body[data-page="shoptet"] .section-head .lead { max-width: var(--container-narrow); }
.pp__pod { max-width: none; }