/* Kaspr — správa SVJ Brno.
   Styl podle docs/brief/KASPR-web-brief.md:
   vzdušně, hodně bílého prostoru, střídmá konzervativní paleta,
   klidná typografie, vysoký kontrast, velké písmo. Přístupnost je
   tvrdý požadavek — čtenář je často starší a netechnický. */

:root {
  /* Vínová (burgundy) jako primární akcent dle zadání — hover stavy,
     tlačítka i odkazy z ní vychází. Neutrály jsou do vínova tónované. */
  --barva-akcent: #721936;
  --barva-akcent-tmava: #4a1123;
  --barva-akcent-svetla: #f4e7ea;

  --barva-text: #241a1c;
  --barva-text-tlumeny: #5c4d50;
  --barva-pozadi: #ffffff;
  --barva-pozadi-alt: #faf4f6;
  --barva-ramecek: #e6d6db;
  --barva-ramecek-vyrazny: #c9aeb8;

  /* ---- Stupnice rozestupů ----
     JEDINÝ zdroj vertikálního i vnitřního rytmu celého webu. Všechny
     hodnoty jsou násobky 4 px, takže se dají sčítat bez nahodilých
     zbytků. Pravidlo: v CSS se pro margin / padding / gap NEPÍŠE
     konkrétní hodnota — použije se token. Když nějaký chybí, doplní
     se sem, ne ad hoc do pravidla. Právě z ad hoc hodnot vznikaly
     náhodné prázdné díry mezi bloky. */
  --sp-1: 0.25rem;  /*  4 px */
  --sp-2: 0.5rem;   /*  8 px */
  --sp-3: 0.75rem;  /* 12 px */
  --sp-4: 1rem;     /* 16 px */
  --sp-5: 1.5rem;   /* 24 px */
  --sp-6: 2rem;     /* 32 px */
  --sp-7: 3rem;     /* 48 px */
  --sp-8: 4rem;     /* 64 px */
  --sp-9: 6rem;     /* 96 px */

  /* ---- Zaoblení a stíny ----
     Stejná logika jako u rozestupů: dvě pojmenované hodnoty, ne
     roztroušená čísla. Malé zaoblení pro drobné prvky (tlačítka,
     vstupy, lišty), normální pro plochy (karty, panely). */
  --radius-small: 0.25rem;  /* 4 px */
  --radius-normal: 0.5rem;  /* 8 px */
  --stin-karta: 0 var(--sp-1) var(--sp-3) rgba(36, 26, 28, 0.1);
  --stin-submenu: 0 var(--sp-2) var(--sp-5) rgba(36, 26, 28, 0.12);

  /* ---- Šířky ----
     Dvě hodnoty, které spolu drží optickou rovnováhu stránky. Textový
     blok musí zabírat výraznou část kontejneru — jinak vypadá
     nahrnutý vlevo a vpravo zbývá prázdná plocha.

     Kontejner 72 rem = 1152 px, vycentrovaný v okně. Používají ho
     VŠECHNY stránky bez výjimky — hlavička, patička, hero, mřížky
     karet, tabulka i prosté textové podstránky. Web nemá mít stránky
     různě široké; kdo přejde z Úvodu na podstránku služby, nesmí
     zaznamenat skok v šířce obsahu.

     Měřítko textu 46 em ≈ 828 px při 18px písmu, tedy ~75 % šířky
     kontejneru. Je v `em`, ne v `rem`, aby délka řádku nezávisela na
     velikosti písma bloku (perex má větší písmo, ale stejný počet
     znaků na řádek). */
  --sirka-obsahu: 90rem;
  --sirka-textu: 46em;

  /* Barlow — rozhodnutí zadavatele 2026-08-05, řeší ADR-007
     (varianta A). Bahnschrift byl jen na Windows 10/11, na macOS/iOS/
     Android spadal na Verdanu — dvě různě široké podoby webu, trvalá
     povinnost měřit v obou. Barlow je samohostovaný webfont (soubory
     v src/fonts/, žádná externí CDN závislost, viz ADR-003), takže se
     vykresluje stejně na všech zařízeních — dvojí měření šířky
     (Bahnschrift/Verdana) už není potřeba, viz ADR-007. */
  --font-zaklad: "Barlow", Verdana, Geneva, Tahoma, sans-serif;
}

/* Samohostovaný Barlow (SIL Open Font License 1.1) — soubory
   v src/fonts/, žádná externí CDN závislost (ADR-003). Dvě sady na
   váhu (latin / latin-ext) pokrývají i českou diakritiku; prohlížeč
   stáhne jen tu, kterou pro daný text skutečně potřebuje.
   font-display: swap — text je čitelný hned v záložním fontu, jakmile
   Barlow dorazí, jen se vymění. */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/barlow-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;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/barlow-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;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/barlow-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;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/barlow-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;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/barlow-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;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/barlow-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;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-zaklad);
  /* 18px — brief žádá dostatečně velké písmo pro staršího čtenáře
     (poznámka o Verdaně z dřívějška neplatí, viz ADR-007 — od
     2026-08-05 základní font je Barlow) */
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--barva-text);
  background: var(--barva-pozadi);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
  line-height: 1.2;
  font-weight: 700;
  /* Prokládání nadpisů dle KAP manuálu (tracking 50 ≈ 0.05em) */
  letter-spacing: 0.05em;
  color: var(--barva-akcent-tmava);
  max-width: 30em;
}

h1 {
  /* Zvětšeno na žádost uživatele (2026-08-05) — cíleně mezi původní
     velikostí (2.75rem) a .h1-velky (5.5rem), ne na úroveň Úvodu. */
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  /* U velkého stupně písma působí manuálové prokládání 0.05em příliš
     rozvolněně — h1 má proto těsnější 0.02em (výslovné zadání). */
  letter-spacing: 0.02em;
  margin: 0 0 var(--sp-5);
  /* Pojistka proti přetečení na úzkém displeji nebo u širšího
     fallback fontu (viz ADR-007) — pokud by se i jedno slovo
     nevešlo na řádek, zalomí se uvnitř slova místo přetečení mimo
     viewport. */
  overflow-wrap: break-word;
}

/* Výslovné zadání: 2× větší h1 na Úvodu (index.html — hero „Komplexní
   správa domu pro SVJ") a na O nás (na žádost uživatele 2026-08-06,
   „velikost jaká je na úvodní stránce") — ne plošně pro všechny h1 na
   webu, proto vlastní třída, ne úprava pravidla `h1` výše. Ostatní
   stránky mají menší h1 — sjednocení všech na jednu velikost je pořád
   otevřená otázka (viz ADR-007).

   Podlaha 3rem je změřená, ne odhadnutá — viz protokol v poznámce
   z úprav. Původní 4rem přetékalo z obrazovky na 320 px šířky, a to
   ve výchozím fontu (Bahnschrift, jen na Windows); s fallbackem na
   Verdanu (macOS/iOS/Android — viz ADR-007) přetékalo i na 360–414 px.
   3rem má na 320 px v obou fontech ještě rezervu ~40–60 px do
   přetečení, což dává prostor pro drobné budoucí úpravy textu bez
   nového měření. */
.h1-velky {
  font-size: clamp(3rem, 9vw, 5.5rem);
  /* Text se láme na dva řádky — bez tohoto by druhý řádek mohl
     skončit jako krátký útržek, který vizuálně nesedí s koncem
     prvního řádku. Prohlížeč rozloží slova na oba řádky rovnoměrněji. */
  text-wrap: balance;
}
.h2-velky {
  font-size: clamp(2rem, 6vw, 4rem);
}
h2 {
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  margin: 0 0 var(--sp-4);
}

h3 {
  font-size: 1.25rem;
  margin: 0 0 var(--sp-2);
}

p {
  margin: 0 0 var(--sp-5);
  max-width: var(--sirka-textu);
}

ul, ol {
  max-width: var(--sirka-textu);
}

a {
  color: var(--barva-akcent);
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--barva-akcent-tmava);
}

/* Viditelný focus je součást přístupnosti, ne dekorace */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--barva-akcent);
  outline-offset: 2px;
  border-radius: 2px;
}

.wrap {
  max-width: var(--sirka-obsahu);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

/* Vizuálně skrytý stejnou technikou jako .mobile-menu-toggle — ne
   "left: -999px", které umí prodloužit scrollWidth stránky vlevo
   mimo viewport (falešný vodorovný přetok, viz poznámky z úprav). */
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  background: var(--barva-akcent);
  color: #ffffff;
  z-index: 100;
}

.skip-link:focus {
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  padding: var(--sp-3) var(--sp-5);
  top: var(--sp-4);
  left: var(--sp-4);
}

/* ---------- Přednadpis / malé verzálky (jediná utilita) ---------- */
/* Dřív byl tentýž vzorec (malé tlumené verzálky s prokládáním)
   opsaný pětkrát pod různými jmény — pás odbornosti, podnabídka,
   nadpisy v patičce, role u podpisu, štítky kontaktních údajů.
   Teď je jedna třída a používá se všude, včetně přednadpisu nad h1. */

.eyebrow {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--barva-text-tlumeny);
  margin: 0 0 var(--sp-2);
  max-width: none;
}

/* ---------- Hlavička ---------- */
/* Inverzní: tmavé vínové pozadí, světlý text a bílá varianta loga.
   Tmavý pruh tvoří vůči bílému hero čistou hranu sám o sobě, žádné
   rámečky nejsou potřeba. Hlavička není sticky (brief: žádné chytré
   interakce), scrollovaný stav tedy neexistuje. */

.site-header {
  background: var(--barva-akcent);
  /* Fixní hlavička — zůstává vidět i při scrollování (na žádost
     uživatele 2026-08-31). z-index nad běžným obsahem stránky, ale
     pod .skip-link (100), aby ten byl vidět i nad hlavičkou při
     focusu. */
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Viditelný focus musí mít na tmavém pozadí světlou barvu */
.site-header a:focus-visible,
.site-header summary:focus-visible {
  outline-color: #ffffff;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-6);
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-5);
}

.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.logo img {
  display: block;
  height: 2.75rem;
  width: auto;
}

.header-inner nav {
  flex: 1 1 auto;
  min-width: 0;
  /* Celé menu tučně — na žádost uživatele 2026-08-06. */
  font-weight: 700;
}

/* Hamburger přepínač na mobilu — čisté CSS (checkbox hack), žádné
   JS. Checkbox zůstává funkčně přítomný (klikatelný přes <label>,
   ovladatelný klávesnicí), jen vizuálně schovaný stejným způsobem
   jako screen-reader-only obsah — na rozdíl od `display: none` ho to
   nevyřadí z přístupnostního stromu ani z pořadí tabulátoru. */
.mobile-menu-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Ikona vidět jen na mobilu (viz media query níže) — na širší
   obrazovce se navigace zobrazuje celá, přepínač je zbytečný. */
.hamburger {
  display: none;
}

/* Jen přímý seznam hlavní navigace — vnořený seznam rozbalovací
   nabídky má vlastní blokový layout (viz .submenu níže). Bez omezení
   na `> ul` by se flex a zarovnání doprava propsaly i do nabídky. */
.header-inner nav > ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-3) var(--sp-6);
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}

/* Jen přímo viditelné položky hlavní navigace (ne vnořená rozbalovací
   nabídka pod „Služby") — verzálky stejně jako v patičkovém menu. */
.header-inner nav > ul > li > a,
.header-inner nav > ul > li > details > summary {
  text-transform: uppercase;
}

.header-inner nav a {
  text-decoration: none;
  color: #ffffff;
}

/* Krémová #f4e7ea na vínové #721936 má kontrast ~9:1 (AA) */
.header-inner nav a:hover,
.header-inner nav a:focus-visible {
  text-decoration: underline;
  color: var(--barva-akcent-svetla);
}

.header-inner nav a.active,
.header-inner summary.active {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
  color: #ffffff;
}

/* Tlačítko Kontakt na tmavé hlavičce inverzně: bílé s vínovým textem */
.header-inner nav a.nav-cta {
  color: var(--barva-akcent);
  background: #ffffff;
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--radius-small);
}

.header-inner nav a.nav-cta:hover,
.header-inner nav a.nav-cta:focus-visible {
  background: var(--barva-akcent-svetla);
  color: var(--barva-akcent-tmava);
  text-decoration: none;
}

.header-inner nav a.nav-cta.active {
  text-decoration: none;
  box-shadow: inset 0 0 0 2px var(--barva-akcent), 0 0 0 2px #ffffff;
  color: var(--barva-akcent);
}

/* Rozbalovací nabídka „Služby" — bez JS, přes <details>/<summary>.
   Zavřená ve výchozím stavu, aby nikdy nepřekryla obsah stránky.
   V <summary> není vnořený odkaz (kolidoval by s rozbalováním);
   na přehled služeb vede první položka nabídky. */

.has-submenu {
  position: relative;
}

.has-submenu summary {
  cursor: pointer;
  list-style: none;
  color: #ffffff;
}

.has-submenu summary::-webkit-details-marker {
  display: none;
}

.has-submenu summary::after {
  content: " ▾";
  font-size: 0.75em;
}

.has-submenu details[open] summary::after {
  content: " ▴";
}

.has-submenu summary:hover {
  text-decoration: underline;
  color: var(--barva-akcent-svetla);
}

.submenu {
  position: absolute;
  top: calc(100% + var(--sp-2));
  left: 0;
  margin: 0;
  padding: var(--sp-2) 0;
  min-width: 18rem;
  max-width: none;
  list-style: none;
  background: var(--barva-pozadi);
  border: 1px solid var(--barva-ramecek-vyrazny);
  border-radius: var(--radius-small);
  box-shadow: var(--stin-submenu);
  z-index: 30;
}

.submenu li {
  display: block;
}

/* Položky nabídky: odkaz vyplňuje celý řádek panelu, zarovnaný vlevo
   s jednotným odsazením. Zvýraznění je jednotně JEDNÍM způsobem —
   podbarvením celého řádku (hover = podbarvení, aktivní = podbarvení
   + tučně), bez podtrhávání. */
.header-inner nav .submenu a {
  display: block;
  width: 100%;
  padding: var(--sp-3) var(--sp-5);
  text-align: left;
  color: var(--barva-text);
  white-space: nowrap;
}

.header-inner nav .submenu a:hover,
.header-inner nav .submenu a:focus-visible {
  background: var(--barva-akcent-svetla);
  color: var(--barva-akcent-tmava);
  text-decoration: none;
}

.header-inner nav .submenu a.active {
  background: var(--barva-akcent-svetla);
  color: var(--barva-akcent-tmava);
  font-weight: 700;
  text-decoration: none;
}

/* Jediná oprava nabídky pro mobil — přetékání z obrazovky.
   Panel se odměřuje od pravé hrany položky „Služby" (`right: 0`) a má
   pevnou minimální šířku 18 rem, takže na úzké obrazovce vyjede
   288 px vlevo od té položky, tedy mimo viewport.
   Oprava: na mobilu se panel neváže na položku, ale na celou
   navigaci, a bere si její šířku. Zůstává plovoucí (neodstrkává
   obsah) a ostatní položky ho neobtékají, protože je mimo tok —
   koncept, struktura ani chování nabídky se nemění, jen se nemá kam
   přetéct. */
@media (max-width: 48rem) {
  .header-inner nav {
    position: relative;
    flex: 0 0 auto;
  }

  .hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 1.75rem;
    height: 1.25rem;
    cursor: pointer;
  }

  .hamburger span {
    display: block;
    height: 3px;
    border-radius: 2px;
    background: #ffffff;
  }

  .mobile-menu-toggle:focus-visible + .hamburger {
    outline: 3px solid #ffffff;
    outline-offset: 4px;
  }

  /* Sbalená nabídka: skrytá, dokud checkbox není zaškrtnutý (klik na
     hamburger přes <label>), pak se zobrazí jako svislý panel pod
     hlavičkou. Koncept i chování rozbalovací nabídky „Služby" uvnitř
     zůstává beze změny (viz .has-submenu / .submenu níže). */
  .header-inner nav > ul {
    display: none;
    position: absolute;
    top: calc(100% + var(--sp-4));
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-1);
    min-width: 14rem;
    padding: var(--sp-4);
    background: var(--barva-akcent-tmava);
    border-radius: var(--radius-normal);
    box-shadow: var(--stin-submenu);
    z-index: 40;
  }

  .mobile-menu-toggle:checked ~ ul {
    display: flex;
  }

  .header-inner nav a.nav-cta {
    text-align: center;
  }

  .has-submenu {
    position: static;
  }

  .submenu {
    left: 0;
    right: auto;
    width: 100%;
    min-width: 0;
  }

  .header-inner nav .submenu a {
    white-space: normal;
  }
}

/* ---------- Drobečková navigace ---------- */
/* Decentní, v tlumených barvách — má říct „kde jsem", ne soutěžit
   s nadpisem stránky. Je prvním prvkem <main>, aby se odstup k hero
   dal řídit sousedským selektorem (viz .breadcrumbs + .hero). */

.breadcrumbs {
  padding-top: var(--sp-5);
  font-size: 1rem;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-3);
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  color: var(--barva-text-tlumeny);
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* Oddělovač je dekorace, proto v CSS a ne v textu — čtečka ho
   nepředčítá a v HTML nezůstává balast */
.breadcrumbs li + li::before {
  content: "›";
  color: var(--barva-ramecek-vyrazny);
}

.breadcrumbs a {
  color: var(--barva-text-tlumeny);
  text-decoration: none;
}

.breadcrumbs a:hover,
.breadcrumbs a:focus-visible {
  color: var(--barva-akcent);
  text-decoration: underline;
}

.breadcrumbs [aria-current="page"] {
  color: var(--barva-text);
}

/* Na podstránkách služeb s fotografií na pozadí (viz .hero-foto výše)
   sdílí drobečková navigace tutéž fotku jako hlavička a hero — jinak
   by mezi tmavou hlavičkou a tmavým hero zůstal bílý pruh a fotka by
   nepůsobila jako jeden souvislý pás. Tlumené barvy pro bílé pozadí
   tu nemají dost kontrastu, proto vlastní světlá varianta. */
.breadcrumbs.breadcrumbs-foto ol {
  color: rgba(255, 255, 255, 0.75);
}

.breadcrumbs.breadcrumbs-foto li + li::before {
  color: rgba(255, 255, 255, 0.5);
}

.breadcrumbs.breadcrumbs-foto a {
  color: rgba(255, 255, 255, 0.75);
}

.breadcrumbs.breadcrumbs-foto a:hover,
.breadcrumbs.breadcrumbs-foto a:focus-visible {
  color: #ffffff;
  outline-color: #ffffff;
}

.breadcrumbs.breadcrumbs-foto [aria-current="page"] {
  color: #ffffff;
}

/* Hero za drobečky už nepotřebuje plný vrchní padding. Nižší
   min-height než obecné .hero-foto — obsah (krátký h1 + krátký
   perex) je tu přirozeně nejkratší z celého webu, sdílená vyšší
   hodnota by tu dělala obrovskou prázdnou plochu (naměřeno: 286 px
   mezery navíc při 26rem). Specificita `.breadcrumbs + .hero` (dvě
   třídy) je vyšší než `.hero-foto` (jedna třída), takže tohle
   pravidlo obecné přebije bez !important. */
.breadcrumbs + .hero {
  padding-top: var(--sp-5);
  min-height: 13rem;
}

/* ---------- Sekce a vertikální rytmus ---------- */
/* Rozestup mezi bloky dělá VÝHRADNĚ padding sekce. Vlastní margin
   krajních prvků se nuluje (viz níže), aby se nesčítal s paddingem
   sekce — přesně tím vznikala díra mezi perexem a kartami. */

.section {
  padding: var(--sp-8) 0;
}

/* První prvek sekce nepřidává svůj vrchní margin k paddingu sekce
   (typicky .cards s margin-top) a poslední nepřidává spodní. */
.hero > .wrap > :first-child,
.section > .wrap > :first-child {
  margin-top: 0;
}

.hero > .wrap > :last-child,
.section > .wrap > :last-child {
  margin-bottom: 0;
}

/* Hero a navazující bílá sekce mají stejné pozadí, hranice mezi nimi
   není vidět — platit plný padding dvakrát tam nemá smysl. */
.hero + .section {
  padding-top: var(--sp-6);
}

/* Dvě obyčejné sekce za sebou (stejné bílé pozadí, žádná linka) mají
   stejný problém jako hero+section výše — bez zásahu to byl dvojitý
   padding (64+64=128 px), naměřeno jako zbytečně velká "hnusná"
   mezera na Proč my? (mezi pásem čísel a kartami). `:not(.section-alt)`
   na obou stranách zajišťuje, že se tohle nedotkne přechodů, kde je
   hranice sekcí vidět (jiné pozadí/linka) — tam plný padding zůstává
   (viz pravidlo níže). Na O nás už neplatí — sekce s podpisem je teď
   `.section-alt` (viditelná hranice), takže tam přechody dostávají
   plný padding stejně jako všude jinde. */
.section:not(.section-alt) + .section:not(.section-alt) {
  padding-top: var(--sp-6);
}

/* Kde je hranice sekcí vidět (jiné pozadí, linka), plný padding
   naopak smysl má. */
.hero + .section-alt {
  padding-top: var(--sp-8);
}

/* Trust-strip a navazující sekce s fotkou — jen na Úvodu (trust-strip
   se jinde na webu nepoužívá). Na žádost uživatele méně vzduchu nad
   fotkou (plný padding sekce) i pod ní (margin bloku fotka+text). */
.trust-strip + .section {
  padding-top: var(--sp-6);
}

.trust-strip + .section .prekryv-foto-text {
  margin-bottom: var(--sp-5);
}

/* Odstup ke kartám po bloku fotka+karta+tlačítko na Úvodu — běžných
   64 px (.cards) tu bylo zbytečně moc, 24 px zase málo (zpětná vazba
   2026-08-31). Selektor cílí výhradně na tenhle výskyt (jediné .cards
   hned po .prekryv-foto-text na webu). */
.prekryv-foto-text + .cards {
  margin-top: var(--sp-7);
}

/* Totéž na Proč my? — jediná stránka, kde je .cards hned po
   .foto-text-uvnitr (na podstránkách služeb mezi nimi vždy je
   .vycet-cislovany). */
.foto-text-uvnitr + .cards {
  margin-top: var(--sp-5);
}

.section-alt {
  background: var(--barva-pozadi-alt);
  border-top: 1px solid var(--barva-ramecek);
  border-bottom: 1px solid var(--barva-ramecek);
}

/* O nás: sekce s podpisem — horní linka byla dřív schovaná (dvojitá
   čára s barevnou hranicí na malém odstupu), ale po přestavbě na
   variantu 1 s menší fotkou už tenhle problém neplatí a uživatel
   linku i nahoře chtěl zpátky (2026-08-31), stejně jako jinde na
   webu. */
.section-alt:has(.signature-podpis) {
  /* Méně místa nad fotkou Tomáše i pod ní (na žádost uživatele
     2026-08-31) — jinde má .section-alt plný padding záměrně, tady
     na krátký obsah (fotka + citace) byl zbytečně velký. */
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-6);
}

/* Víc místa nahoře u bílé sekce s kartami pilířů, ne u podbarvené
   sekce nad ní (na žádost uživatele 2026-08-31) — vyšší specificita
   než sdílené `.section-cta-final`, aby to přebilo jeho padding-top. */
.section-alt:has(.signature-podpis) + .section.section-cta-final {
  padding-top: var(--sp-7);
}

/* Méně místa pod první fotkou (nad sekcí s podpisem). */
.section-pred-podpisem {
  padding-bottom: var(--sp-6);
}

/* Mezera mezi sekcí s podpisem a kartami pilířů pod ní teď řeší
   `.section-cta-final` přímo na té sekci (stejný padding nahoře i
   dole na žádost uživatele 2026-08-31) — samostatné pravidlo pro tenhle
   přechod už proto není potřeba. */

/* Podstránky služeb: podbarvená sekce s výčtem má míň volného místa
   nahoře/dole (na žádost uživatele 2026-08-31) — jinde na webu má
   .section-alt plný padding záměrně, tady byl na krátký obsah (jen
   pár řádků seznamu) zbytečně velký. Sousední bílé sekce mají ze
   svého konce/začátku (u hranice s tímhle výčtem) stejné zmenšení,
   aby odstup na obou stranách hranice odpovídal.
   `.section-alt-vycet` je vlastní třída přímo v HTML (ne
   `:has(.vycet-cislovany)`) — vnořené `:has()` uvnitř dalšího
   `:has()` se v prohlížeči uživatele nechovalo spolehlivě, tohle je
   jistota. */
.section-alt-vycet {
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-4);
}

.section:has(+ .section-alt-vycet) {
  padding-bottom: var(--sp-6);
}

.section-alt-vycet + .section {
  padding-top: var(--sp-6);
}

/* Izolovaná koncová CTA sekce (KONTAKT / proklik na další službu) na
   konci stránky — na žádost uživatele 2026-08-31 méně místa nahoře i
   dole, a stejně, ne asymetricky jako dřív kvůli sousedním pravidlům
   výše. Dvě třídy na stejném prvku (`.section.section-cta-final`),
   aby to mělo dost specificity a přebilo pravidla pro sousední sekce
   (např. `.section-alt-vycet + .section` o pár řádků výš). */
.section.section-cta-final {
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-6);
}

/* Služby (Přehled služeb): stejná mezera pod fotkou, nad podbarvenou
   sekcí „Oblasti služeb" (na žádost uživatele 2026-08-31). */
.section:has(+ .section-alt-oblasti) {
  padding-bottom: var(--sp-6);
}

.section-alt-oblasti {
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-6);
}

/* Míň místa mezi nadpisem „Oblasti služeb" a kartami pod ním — běžný
   margin-top karet (64 px) tu byl na krátký nadpis nad nimi zbytečně
   velký. */
.section-alt-oblasti .cards {
  margin-top: var(--sp-5);
}

/* Totéž na Úvodu, nad kartami pod „Klíčové oblasti správy SVJ pod
   jednou střechou". */
#oblasti + .cards {
  margin-top: var(--sp-5);
}

/* ---------- Hero ---------- */
/* Bílý a vzdušný — bez dekorativních prvků, kontrast tvoří tmavá
   hlavička nad ním */

.hero {
  padding: var(--sp-8) 0 var(--sp-7);
  background: var(--barva-pozadi);
}

/* Hero s fotografií na pozadí — na Úvodu a na hlavních stránkách
   (O nás, Proč my?, Služby, Kontakt), ne na podstránkách jednotlivých
   služeb ani na stránce zásad ochrany osobních údajů. Fotka se
   nastavuje přes proměnnou `--hero-img` na samostatné modifikační
   třídě pro každou stránku (viz níže) — tohle pravidlo řeší jen
   sdílený vzhled (přechod, ukotvení, tmavá vrstva), ne konkrétní
   obrázek. Fallback na brněnskou fotku Sergeje Guka drží Úvod funkční
   i bez vlastní modifikační třídy.

   Průhledná vrstva je tmavá vínová (--barva-akcent-tmava) na 82 %
   krytí, ne světlejší --barva-akcent — spočítáno tak, aby bílý text
   měl kontrast aspoň AA (4.5:1) i nad nejsvětlejším místem fotky
   (žlutý pruh oblohy u obzoru na Úvodu): vychází ~9.9:1, tedy s
   velkou rezervou i nad AAA. Krytí 82 % je voleno kvůli tomu — nižší
   už by nad světlou oblohou kontrast neuhájilo spolehlivě. Stejné
   krytí se použije i na fotkách ostatních stránek — všechny jsou
   podobně světlé venkovní scény ve dne, takže rezerva platí i tam.

   Hlavička (.header-foto) sdílí tutéž fotku jako hero pod sebou, aby
   působily jako jeden souvislý pás bez viditelného švu. Header je
   mimo <main>, takže to není jeden společný box, ale dva samostatné
   elementy vedle sebe — `background-attachment: fixed` ukotvuje
   obrázek k viewportu (ne ke svému elementu), takže oba „vidí" tutéž
   fotku ve stejném měřítku a na stejném místě a švu na rozhraní si
   nelze všimnout. Cena: na starším Safari na iOS se fixní pozadí
   nepodporuje spolehlivě — tam se každý box vrátí k vlastnímu ořezu
   obrázku (funkční degradace, ne rozbití). */
.hero-foto,
.site-header.header-foto,
.breadcrumbs.breadcrumbs-foto {
  background:
    linear-gradient(rgba(74, 17, 35, 0.82), rgba(74, 17, 35, 0.82)),
    var(--hero-img, url("../images/hero-brno.jpg")) center / cover no-repeat;
  background-attachment: fixed;
}

.hero-foto-o-nas,
.header-foto-o-nas {
  /* Náměstí Svobody, foto: Ignat Arapov, Unsplash */
  --hero-img: url("../images/hero-o-nas.jpg");
}

.hero-foto-proc-my,
.header-foto-proc-my {
  /* Katedrála sv. Petra a Pavla, foto: Leonhard Niederwimmer, Unsplash */
  --hero-img: url("../images/hero-proc-my.jpg");
}

.hero-foto-sluzby,
.header-foto-sluzby {
  /* Vila Tugendhat, foto: Tamas Meszaros, Unsplash */
  --hero-img: url("../images/hero-sluzby.jpg");
}

.hero-foto-kontakt,
.header-foto-kontakt {
  /* Ulice s tramvají, foto: Aneta Voborilova, Unsplash */
  --hero-img: url("../images/hero-kontakt.jpg");
}

.hero-foto-sprava-svj,
.header-foto-sprava-svj,
.breadcrumbs-foto-sprava-svj {
  /* Ulice při západu slunce, foto: Ignat Arapov, Unsplash */
  --hero-img: url("../images/hero-sprava-svj.jpg");
}

.hero-foto-technicka-sprava,
.header-foto-technicka-sprava,
.breadcrumbs-foto-technicka-sprava {
  /* Kostel Nanebevzetí Panny Marie, foto: Uladzislau Petrushkevich, Unsplash */
  --hero-img: url("../images/hero-technicka-sprava.jpg");
}

.hero-foto-ucetnictvi,
.header-foto-ucetnictvi,
.breadcrumbs-foto-ucetnictvi {
  /* Vánoční trh na náměstí Svobody, foto: Martin Lostak, Unsplash */
  --hero-img: url("../images/hero-ucetnictvi.jpg");
}

.hero-foto-pravni-podpora,
.header-foto-pravni-podpora,
.breadcrumbs-foto-pravni-podpora {
  /* Ambrožova kašna v noci, foto: Edvinas Daugirdas, Unsplash */
  --hero-img: url("../images/hero-pravni-podpora.jpg");
}

/* Sjednocená výška fotografického hero pásu napříč stránkami — bez
   toho by výška padala jen na délku textu dané stránky a hlavička +
   hero by při proklikávání mezi stránkami viditelně „skákaly"
   (naměřeno: rozptyl 130 px na 1440 px, 465 px na 375 px — viz
   poznámky z úprav, Etapa 1, bod 1.3).

   Záměrně BEZ svislého centrování (flex/align-items). Vertikální
   centrování dělá pozici h1 závislou na množství obsahu pod ním —
   stránka bez perexu (O nás) by měla h1 jinak vysoko než stránka
   s perexem (Služby), i při stejné min-height. Blokový layout drží
   h1 na stejném odstupu od horního okraje na všech stránkách bez
   ohledu na to, kolik textu je pod ním; min-height jen zaručuje
   společnou minimální výšku pásu, přebytek jde dolů, ne nahoru.

   26rem bylo naměřeno v Etapě 1, kdy hero na většině stránek ještě
   obsahovalo delší odstavce. Ty se bodem 1.3 přesunuly do sekce pod
   hero — obsah hero se tím zkrátil, ale tahle hodnota se od té doby
   nepřeladila, takže na strankách s kratším obsahem (Proč my?,
   Služby, Kontakt) zbývalo 200+ px prázdného pozadí navíc (naměřeno).
   15.5rem je přeladěno na aktuální obsah: stránky s perexem (Proč
   my?, Služby, O nás) teď mají jen běžný spodní padding navíc, ne
   vynucenou mezeru. */
.hero-foto {
  min-height: 15.5rem;
  color: #ffffff;
}

.hero-foto .eyebrow {
  color: var(--barva-akcent-svetla);
}

.hero-foto h1 {
  color: #ffffff;
}

.hero-foto p {
  color: #ffffff;
}

.hero-foto a:focus-visible,
.hero-foto button:focus-visible {
  outline-color: #ffffff;
}

.hero-foto .btn-primary {
  background: #ffffff;
  color: var(--barva-akcent);
}

.hero-foto .btn-primary:hover,
.hero-foto .btn-primary:focus-visible {
  background: var(--barva-akcent-svetla);
  color: var(--barva-akcent-tmava);
}

.hero-lead {
  /* Opticky přesně třetinová velikost oproti .h1-velky
     (clamp(3rem, 9vw, 5.5rem)) — na žádost uživatele 2026-08-06. */
  font-size: clamp(1rem, 3vw, 1.83rem);
  /* Menší line-height než zděděných 1.65 z body — u většího písma by
     jinak mezi řádky vznikla nápadná mezera. */
  line-height: 1.25;
  /* Tučně jako H1, na žádost uživatele — sladěné s hlavním titulkem. */
  font-weight: 700;
  /* Na žádost uživatele roztažené na celou šířku stránky (.wrap),
     ne omezené na --sirka-textu jako běžný odstavec — perex pod H1
     má být nápadnější, širší blok textu. */
  max-width: none;
}

/* Zvýrazněný úvodní odstavec uprostřed stránky — stejný princip jako
   .hero-lead (větší písmo, beze změny textu), navíc tmavší vínová
   barva a vyšší tloušťka řezu, aby odstavec i mimo hero vizuálně
   vystoupil jako klíčové sdělení, ne jen běžné tělo textu. */
.section-lead {
  font-size: 1.3125rem;
  /* Menší line-height než zděděných 1.65 z body — u většího/tučnějšího
     písma by jinak mezi řádky vznikla nápadná mezera (stejný princip
     jako .hero-lead). */
  line-height: 1.3;
  font-weight: 600;
  color: var(--barva-akcent-tmava);
  text-align: left;
  max-width: none;
}

/* ================ Text u fotky — čtyři varianty ================ */
/* Skica zadavatele 2026-08-17 (Malování): různá rozložení textu vůči
   fotce. Dřív bylo na webu jen jedno dvousloupcové rozložení na devíti
   místech, takže stránky působily monotónně:

     1. .prekryv-foto-text  — karta přesahuje přes okraj fotky
     2. .foto-text-uvnitr   — karta leží celá uvnitř fotky
     3. .text-foto-split + .text-foto-split-vlevo   — text vlevo, fotka vpravo
     4. .text-foto-split + .text-foto-split-vpravo  — fotka vlevo, text vpravo

   Varianty se po webu záměrně střídají, aby dvě sousední sekce nikdy
   neměly stejné rozložení ani text na stejné straně (rozpis v poznámce
   z úprav).

   Bývala i pátá varianta (.foto-text-panel — fotka a text v jednom
   společném rámu) pro bloky, kde je text delší než fotka. Naposledy ji
   používala Technická správa domu; po přepsání textu na kratší
   odstavce se vešel i do varianty 2, takže .foto-text-panel už nemá
   na webu žádné použití a byla odstraněna (2026-08-17) — nezůstává
   jako mrtvý kód.

   Společné principy:
   - Text NIKDY neleží přímo na fotce. U variant 1 a 2 je vždy
     v neprůhledné bílé kartě, takže jeho kontrast nezávisí na tom, co
     je na fotce zrovna světlé.
   - Fotka má růžový filtr (#AC8190, zadání 2026-08-06) kvůli sladění
     s vínovou paletou — vzhled fotky je proto sdílený všemi variantami
     na jednom místě, ne opsaný u každé zvlášť.
   - Pod 48 rem (mobil) se všechny sbalí na jeden sloupec, fotka nad
     textem. Absolutní pozicování karty (varianty 1 a 2) je proto
     výhradně v media query pro širší obrazovky — na úzkém displeji by
     karta fotku překryla a text by se stal nečitelným. */

/* ---- Fotka: sdílený vzhled všech variant ---- */
/* Obal je kvůli barevnému filtru (::after) — ten nejde dát na <img>,
   protože pseudoelementy na náhradních prvcích prohlížeč nevykresluje. */
.text-foto-split-foto,
.prekryv-foto-text-foto,
.foto-text-uvnitr-foto {
  position: relative;
  border-radius: var(--radius-normal);
  overflow: hidden;
}

.text-foto-split-foto::after,
.prekryv-foto-text-foto::after,
.foto-text-uvnitr-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(172, 129, 144, 0.65);
}

.text-foto-split-foto img,
.prekryv-foto-text-foto img,
.foto-text-uvnitr-foto img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---- Karta s textem: sdílený vzhled variant 1 a 2 ---- */
.prekryv-foto-text-karta,
.foto-text-uvnitr-karta {
  margin-top: var(--sp-5);
  background: var(--barva-pozadi);
  border-radius: var(--radius-normal);
  box-shadow: var(--stin-submenu);
  padding: var(--sp-5);
}

/* Poslední odstavec v kartě nesmí přidávat svůj spodní margin —
   jinak je karta zdola opticky vyšší než zhora. */
.prekryv-foto-text-karta > :last-child,
.foto-text-uvnitr-karta > :last-child {
  margin-bottom: 0;
}

/* Odstup od sousedního obsahu. Bez toho se text, výčet nebo nadpis
   lepil rovnou na fotku (naměřeno 30 px na O nás, 16 px mezi fotkou a
   nadpisem „Oblasti služeb" na Službách). Na krajích sekce se margin
   nuluje sám (viz `.section > .wrap > :first-child` / `:last-child`),
   takže se nesčítá s paddingem sekce. */
.text-foto-split,
.prekryv-foto-text,
.foto-text-uvnitr {
  margin: var(--sp-7) 0;
}

/* ---- Varianta 1: karta přesahuje přes okraj fotky ---- */
/* Fotka zabírá 78 % šířky, karta začíná v její druhé polovině a
   vybíhá až k okraji kontejneru — část karty tedy leží na fotce a
   část mimo ni. Modifikátor -zrcadlo obrací celé rozložení (fotka
   vpravo, karta přesahuje přes její levý okraj). */
.prekryv-foto-text {
  position: relative;
}

.prekryv-foto-text-zrcadlo .prekryv-foto-text-foto {
  margin-left: auto;
}

@media (min-width: 48rem) {
  .prekryv-foto-text-foto {
    width: 78%;
  }

  /* Strop výšky fotky, aby pás nepřebíjel stránku. Předlohy mají různý
     poměr stran (2,15:1 až 1,49:1) a při šířce 78 % kontejneru z toho
     vycházely pásy 505 až 814 px — nejvyšší z nich zabral většinu
     obrazovky a karta plavala v prázdné fotce. 32 rem odpovídá výšce
     pásu na Úvodu, takže mají všechny bloky varianty 1 srovnatelnou
     výšku; vyšší předlohy se ořežou (object-fit), nedeformují. */
  .prekryv-foto-text-foto img {
    max-height: 24rem;
    object-fit: cover;
  }

  .prekryv-foto-text-karta {
    position: absolute;
    top: 50%;
    right: 0;
    left: 52%;
    transform: translateY(-50%);
    margin-top: 0;
    padding: var(--sp-6);
  }

  .prekryv-foto-text-zrcadlo .prekryv-foto-text-karta {
    left: 0;
    right: 52%;
  }
}

/* Obal karty + tlačítka pod ní na Úvodu — tlačítko „Více o spolupráci
   kanceláří" má ležet nad fotkou stejně jako karta, hned pod ní.
   Absolutní pozicování se přesouvá z karty na obal (karta uvnitř se
   vrací do běžného toku), aby oba prvky plavaly nad fotkou společně.
   Použito jen na Úvodu — jinde `.prekryv-foto-text-karta` zůstává bez
   obalu a řídí se pravidly výše beze změny. */
.prekryv-foto-text-obal .cta-row-doprava {
  margin-top: var(--sp-4);
}

@media (min-width: 48rem) {
  .prekryv-foto-text-obal {
    position: absolute;
    top: 50%;
    right: 0;
    left: 52%;
    transform: translateY(-50%);
  }

  .prekryv-foto-text-zrcadlo .prekryv-foto-text-obal {
    left: 0;
    right: 52%;
  }

  .prekryv-foto-text-obal .prekryv-foto-text-karta {
    position: static;
    transform: none;
  }
}

/* ---- Varianta 2: karta leží celá uvnitř fotky ---- */
/* Fotka je široký pás přes celou šířku kontejneru, karta leží na něm
   svisle na středu a odsazená od kraje, takže je vidět, že leží NA
   fotce a nedělí ji na dvě části.
   Pás má pevný poměr stran a fotka se do něj ořezává (object-fit),
   protože předlohy jsou 900 px široké na výšku ~600 px — bez ořezu by
   na širokém displeji pás vyrostl do zbytečné výšky. Modifikátor
   -vpravo přesune kartu k pravému okraji fotky. */
.foto-text-uvnitr {
  position: relative;
}

@media (min-width: 48rem) {
  /* Ořez jen na širokých obrazovkách. Na mobilu (414 px) by pás
     v tomto poměru měl jen 177 px a z fotky by zbyl nečitelný výřez —
     tam se proto zobrazuje celá v přirozeném poměru, stejně jako
     u ostatních variant. */
  .foto-text-uvnitr-foto img {
    aspect-ratio: 7 / 2;
    object-fit: cover;
  }

  .foto-text-uvnitr-karta {
    position: absolute;
    top: 50%;
    left: var(--sp-7);
    transform: translateY(-50%);
    /* Karta smí zabrat nejvýš polovinu pásu, aby fotka zůstala
       čitelná jako fotka, ne jako pozadí. */
    width: min(34rem, 50%);
    margin-top: 0;
    padding: var(--sp-6);
  }

  .foto-text-uvnitr-vpravo .foto-text-uvnitr-karta {
    left: auto;
    right: var(--sp-7);
  }
}

/* Tlačítko „Zjistit více o společnostech" na Proč my? — leží nad
   fotkou stejně jako karta, ale na opačné straně (karta vlevo,
   tlačítko vpravo; modifikátor -vpravo obě strany přehodí, stejně
   jako u karty výše). */
.foto-text-uvnitr-cta {
  margin: var(--sp-5) 0 0;
  max-width: none;
}

@media (min-width: 48rem) {
  .foto-text-uvnitr-cta {
    position: absolute;
    bottom: var(--sp-6);
    right: var(--sp-7);
    margin-top: 0;
  }

  .foto-text-uvnitr-vpravo .foto-text-uvnitr-cta {
    right: auto;
    left: var(--sp-7);
  }
}

/* ---- Varianty 3 a 4: text a fotka vedle sebe ---- */
/* Obě strany se umísťují VÝSLOVNĚ — jak do sloupce, tak do řádku.
   Samotné určení sloupce nestačí: fotka je v HTML první, takže
   u varianty 3 (fotka vpravo) jde druhý sloupec před první a
   automatickému umísťování už mezitím ujel řádkový kurzor dopředu.
   Text pak spadl do druhého řádku POD fotku a vedle fotky zůstala
   prázdná plocha přes celou její výšku (naměřeno ~400 px na O nás) —
   právě tohle byla ta „prázdná díra" ve zpětné vazbě 2026-08-17.

   Pozor: pravidlo `grid-row: 1` počítá s tím, že blok má přesně dva
   potomky (fotku a text). Kdyby jich bylo víc, naskládaly by se do
   jednoho řádku přes sebe — pak je potřeba mřížku určit výslovně, ne
   přidat třetího potomka. */
.text-foto-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-7);
}

@media (min-width: 48rem) {
  .text-foto-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
  }

  .text-foto-split > * {
    grid-row: 1;
  }

  .text-foto-split-vlevo > * {
    grid-column: 1;
  }

  .text-foto-split-vpravo > * {
    grid-column: 2;
  }

  /* Fotka jde vždy na opačnou stranu než text. Vyšší specificita než
     pravidla pro text výše, proto vyhraje bez ohledu na pořadí. */
  .text-foto-split-vlevo > .text-foto-split-foto {
    grid-column: 2;
  }

  .text-foto-split-vpravo > .text-foto-split-foto {
    grid-column: 1;
  }
}

/* ---------- Důkazy odbornosti (tři subjekty, IČO, adresa) ---------- */
/* Redesign 2026-08-17 (zpětná vazba: holé odrážky nepůsobily
   esteticky). Místo textového výčtu pás log tří kanceláří — stejná
   loga, jaká už web používá u podpisu na O nás. Vše vycentrované,
   na desktopu tři sloupce oddělené jemnými svislými linkami.

   Loga sesterských firem (KAP, Ataxer) jsou klikací — vedou na jejich
   vlastní web (na žádost uživatele). Logo KOPEČNÝ SPRÁVA BYTŮ A SVJ
   je bez odkazu, protože to je tento web samotný (viz schema.org
   provider v <head>) — odkaz na aktuální stránku by byl zbytečný.
   Bez textu vedle loga (na žádost uživatele) nese název firmy alt
   atribut obrázku — jediná cesta ke jménu pro čtečku i vyhledávač. */

.trust-strip {
  border-top: 1px solid var(--barva-ramecek);
  border-bottom: 1px solid var(--barva-ramecek);
  background: var(--barva-pozadi-alt);
  /* Užší lišta a větší loga (zadání 2026-08-17) — méně svislého
     paddingu kolem větších log, ať pruh nenarůstá do výšky úměrně
     s tím, jak loga rostou. Dál zmenšeno 2026-08-31 (zpětná vazba:
     nad/pod logy pořád zbytečně moc místa). */
  padding: var(--sp-2) 0;
  text-align: center;
}

.trust-strip .eyebrow {
  margin-bottom: var(--sp-6);
}

.trust-list {
  list-style: none;
  /* Poslední prvek v .trust-strip (dřív pod ním bylo ještě tlačítko,
     teď je přesunuté na jiné místo stránky) — bez vlastního spodního
     marginu, ať pod logy nezbývá zbytečné prázdné místo. */
  margin: 0;
  padding: 0;
  max-width: none;
  display: grid;
  gap: var(--sp-6);
  align-items: center;
}

.trust-list li {
  display: flex;
  justify-content: center;
}

/* Jednotná výška srovná různě vysoké předlohy log do jedné linie.
   4.6rem = další zvětšení na žádost uživatele 2026-08-17 (dřív
   3.85rem = 2.75rem × 1,4 z předchozího kola). */
.trust-list img {
  height: 4.6rem;
  width: auto;
  /* Loga defaultně šedá, barevná až při najetí/focusu (na žádost
     uživatele 2026-08-31, obrácené chování oproti dřívějšku) —
     brightness místo opacity, ať je šedá tmavší, ne vymáchaná. */
  filter: grayscale(1) brightness(0.75);
}

/* KOPEČNÝ a KAP mají větší plochy tmavé barvy než Ataxer — se stejným
   ztmavením jako Ataxer vycházely skoro černé (zpětná vazba
   2026-08-31), takže mají o něco světlejší šedou. */
.trust-list img:not(.logo-ataxer) {
  filter: grayscale(1) brightness(1.1);
}

/* KOPEČNÝ SPRÁVA (první logo) o něco světlejší než KAP — zpětná vazba
   2026-08-31. */
.trust-list li:first-child img {
  filter: grayscale(1) brightness(1.5);
}

/* Ataxer logo má i při stejné výšce jako ostatní dvě loga menší
   vizuální váhu (tenčí tvary ikony i písma, víc prázdného místa okolo)
   — vedle silnějších wordmarků KOPEČNÝ působilo slabě a „zapadalo"
   (zpětná vazba 2026-08-17). O ~30 % vyšší kompenzuje ten rozdíl
   opticky, ne matematicky přesně. */
.trust-list .logo-ataxer {
  height: 6rem;
}

.trust-list a {
  display: flex;
  /* Vlastní přechod barvy loga při hoveru/focusu níže — podtržení
     jako u běžného textového odkazu by přes obrázek nedávalo smysl. */
  text-decoration: none;
}

/* SVG loga mají barvu zapečenou uvnitř (fill na jednotlivých tvarech),
   ne přes `currentColor` — filtr je jediný způsob, jak jim společně
   změnit vzhled při hoveru/focusu bez zásahu do každého souboru.
   `li:hover`, ne `a:hover` — logo KOPEČNÝ nemá odkaz (viz komentář u
   .trust-strip v HTML), takže bez toho by se jako jediné nikdy
   nezbarvilo. */
.trust-list li:hover img,
.trust-list a:focus-visible img {
  filter: none;
}

@media (min-width: 52rem) {
  .trust-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .trust-list li + li {
    border-left: 1px solid var(--barva-ramecek);
  }
}

/* ---------- Tlačítka ---------- */

.btn {
  display: inline-block;
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--radius-small);
  text-decoration: none;
  font-weight: 700;
  font-family: inherit;
  /* Stejný stupeň jako tělo textu — hlavní akce nemá být drobnější
     než okolní věty (a pro staršího čtenáře se lépe čte i míří). */
  font-size: 1.125rem;
  border: 2px solid transparent;
  cursor: pointer;
}

.btn-primary {
  background: var(--barva-akcent);
  color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--barva-akcent-tmava);
  color: #ffffff;
}

/* Bílé tlačítko s vínovým textem — druhá, méně nápadná akce vedle
   .btn-primary. */
.btn-secondary {
  background: #ffffff;
  color: var(--barva-akcent);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background: var(--barva-akcent-svetla);
  color: var(--barva-akcent-tmava);
}

.cta-row {
  margin-top: var(--sp-7);
  max-width: none;
}

/* Jen pro CTA tlačítko v hero na Úvodu — na žádost uživatele posunuté
   doprava, ne plošná změna pro .cta-row na všech stránkách. */
.cta-row-doprava {
  text-align: right;
}

/* ---------- Pás s čísly (Proč my?) ---------- */
/* Rychlé, "úderné" fakty hned pod hero — má vzbudit dojem hned na
   první pohled, ne až po přečtení odstavců pod tím. */

.stats-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--sp-6);
  text-align: center;
  max-width: none;
}

.stat-cislo {
  display: block;
  font-size: clamp(2.25rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--barva-akcent);
}

.stat-popis {
  margin: var(--sp-1) 0 0;
  color: var(--barva-text-tlumeny);
  max-width: none;
}

/* ---------- Karty ---------- */

.cards {
  display: grid;
  /* minmax(0, 1fr), ne holé 1fr — bez toho je implicitní minimum
     dráhy `auto` (min-content šířky obsahu karty), takže širší
     fallback font (Verdana) může kartu vytlačit přes okraj okna
     (naměřeno na Úvodu při 320 px: karta přetékala o ~38 px). */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-8);
  max-width: none;
}

/* Samostatný odstavec pod kartami — stejný odstup, jaký mají karty
   nad sebou, aby vertikální rytmus sekce byl symetrický a text
   nesplýval s kartami jako jejich popisek */
.po-kartach {
  margin-top: var(--sp-7);
  /* Stejná velikost jako .section-lead (text v kartě nad fotkou). */
  font-size: 1.3125rem;
  font-weight: 700;
  color: var(--barva-akcent);
}

.card {
  border: 1px solid var(--barva-ramecek);
  /* Horní linka v akcentní barvě dává kartám hlavu a odlišuje je od
     prostého rámečku */
  border-top: 3px solid var(--barva-akcent);
  border-radius: var(--radius-normal);
  padding: var(--sp-6);
  background: var(--barva-pozadi);
  text-align: left;
}

/* Nadpis karty má stejnou velikost bez ohledu na úroveň — úroveň
   řídí hierarchii dokumentu (h1 → h2 → h3), ne velikost písma.
   Barva je akcentová plošně pro všechny karty (dřív ji nastavovaly
   zvlášť .cards-2 a .card-link, obyčejná .card v .cards-3/.cards-4
   žádnou neměla a zdědila tmavý text — bez systémového důvodu, viz
   poznámky z úprav, Etapa 2, bod 2.2). */
.card h2,
.card h3 {
  font-size: 1.25rem;
  margin: 0 0 var(--sp-2);
  color: var(--barva-akcent);
}

/* Zvýrazněné boxy na Úvodu („Důvěra a transparentnost" / „Jistota
   odborného vedení" / „Mediace a řešení sporů") — výslovné zadání jen
   pro tyto boxy, ne pro .card plošně (ta se používá i pro klikací
   dlaždice služeb a boxy na jiných stránkách, které mít stín/větší
   padding nemají). Dřív jako `.cards-2 .card` pro tehdejší dvojici;
   po rozšíření na trojici (mediace, zadání 2026-08-17) je zvýraznění
   vlastní modifikátor a počet sloupců řídí obecná .cards-3. */
.cards-duraz .card {
  padding: var(--sp-7);
  box-shadow: var(--stin-karta);
}

.cards-duraz .card h2 {
  font-size: 1.5rem;
  margin-bottom: var(--sp-3);
}

.card > :first-child {
  margin-top: 0;
}

.card > :last-child {
  margin-bottom: 0;
}

.card p,
.card ul {
  max-width: none;
}

.card h2 {
  margin-bottom: var(--sp-5);
}

.card ul {
  /* Bez odrážek — jemná dělicí čára mezi body místo nich, stejný
     princip jako u .vycet-cislovany (na žádost uživatele 2026-08-31). */
  list-style: none;
  padding-left: 0;
  margin: 0 0 var(--sp-4);
}

.card li {
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--barva-ramecek);
}

/* Ikona v kartě — jednoduchá linková kresba v akcentní barvě.
   Dekorativní, proto v HTML nese aria-hidden. */
.card-ikona {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--sp-4);
  color: var(--barva-akcent);
}

@media (min-width: 48rem) {
  .cards-3,
  .cards-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .cards-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cards-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Hover jen zvýrazní rámeček a nadzvedne kartu jemným stínem —
   celoplošné podbarvení bylo na velké ploše křiklavé */
.card-link:hover,
.card-link:focus-visible {
  border-color: var(--barva-akcent);
  box-shadow: var(--stin-karta);
  color: inherit;
}

/* Podtržení nadpisu je signál "tohle je klikací", ne trvalá dekorace
   — karta samotná už je celá klikací plocha (rámeček + stín na
   hover/focus to signalizují taky), trvalé podtržení bylo redundantní
   (Etapa 2, bod 2.2). */
.card-link:hover h2,
.card-link:hover h3,
.card-link:focus-visible h2,
.card-link:focus-visible h3 {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* ---------- Číslovaný výčet položek služby ---------- */
/* Třetí podoba výčtu na Technické správě (zpětná vazba 2026-08-17:
   dlaždice s fajfkou ani karusel trojic se nelíbily). Žádné boxy —
   vzdušný dvousloupcový výčet oddělený jemnými linkami, každá položka
   s velkým pořadovým číslem v akcentní barvě. Drží se briefu (vzdušně,
   hodně bílého prostoru, klidná typografie) a na rozdíl od karuselu
   ukazuje všechny položky naráz.

   Číslování je dekorace (CSS counter, ne <ol>) — pořadí položek nenese
   význam, číslo jen dává výčtu rytmus a vizuální kotvu. */

.vycet-cislovany {
  list-style: none;
  counter-reset: vycet;
  margin: var(--sp-7) 0;
  padding: 0;
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* Svislý rozestup dělá padding položek (kvůli linkám), vodorovný
     mezera mezi sloupci. */
  gap: 0 var(--sp-8);
}

.vycet-cislovany li {
  counter-increment: vycet;
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--barva-ramecek);
  font-weight: 700;
  color: #000000;
}

.vycet-cislovany li::before {
  content: counter(vycet, decimal-leading-zero);
  flex-shrink: 0;
  /* Dvouciferná šířka, aby texty položek začínaly na stejné svislici. */
  min-width: 2ch;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--barva-akcent);
}

@media (min-width: 48rem) {
  .vycet-cislovany {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Jasně viditelné označení nedodaného obsahu — ať se nezapomene */

.placeholder {
  background: var(--barva-akcent-svetla);
  border: 1px dashed var(--barva-akcent);
  border-radius: var(--radius-small);
  padding: var(--sp-3) var(--sp-4);
  font-size: 1rem;
  color: var(--barva-akcent-tmava);
}

/* ---------- Osobní tvář / podpis ---------- */
/* Brief žádá konkrétní osobu jako garanta služby, ne anonymní „tým".
   Fotka a citace jedou na variantě 1 (.prekryv-foto-text, viz sekce
   „Text u fotky") — vlastní rozložení (.signature/.signature-text)
   bylo nahrazeno 2026-08-31. */

/* Portrét Tomáše — vlastní ořez, ne sdílená pravidla varianty 1 pro
   běžné fotky (na žádost uživatele 2026-08-31, "je to speciální
   fotka"):
   1. aspect-ratio přesně na polovinu výšky originálu (320×476 →
      320/238, viz atributy width/height u <img>) — ne sdílený strop
      24rem, který se řídí velikostí kontejneru, ne rozměry týhle
      konkrétní fotky. S object-fit: cover a object-position: top to
      ukáže přesně horní polovinu originálního snímku (obličej),
      místo aby se ořezávalo od středu.
   2. Bez vínového filtru — je to portrét konkrétního člověka, ne
      obecná stock fotka, barvy zůstávají přirozené. */
.foto-tomas img {
  aspect-ratio: 320 / 238;
  object-fit: cover;
  object-position: top;
  max-height: none;
}

@media (min-width: 48rem) {
  /* Poloviční šířka oproti sdílené 78 % ostatních fotek varianty 1 —
     na žádost uživatele 2026-08-31, ať fotka nezasahuje tolik doprava
     (karta pak logicky zabírá víc místa). */
  .foto-tomas {
    width: 39%;
  }

  /* Karta se sdílenou hodnotou `left: 52%` by při užší fotce (39 %
     místo 78 %) visela s mezerou, ne přes okraj fotky — posunuto blíž
     k fotce, ať pořád mírně přesahuje přes její pravý okraj, jak bylo
     zadáno. */
  .prekryv-foto-text:has(.foto-tomas) .prekryv-foto-text-karta {
    left: 34%;
    padding-bottom: var(--sp-4);
  }
}

.foto-tomas::after {
  background: none;
}

/* Redesign 2026-08-17 — tři velká, různobarevná a naskládaná loga
   (dřív 4.5rem, ve sloupci) přebíjela jméno a roli pod sebou a
   působila jako neuspořádaná „věž log", ne jako podpis. Uvnitř
   .signature-podpis teď drží jasnou hierarchii: nejnápadnější je
   jméno, loga jsou jen malý doplněk v jedné řadě nad ním. Samotná
   třída .signature-podpis nemá vlastní styl, jen skupinuje obsah
   sémanticky — oddělení od citace nad ním dělá normální odstavcový
   rytmus (margin), žádná linka mezi nimi není. */

/* Zarovnání celého podpisového bloku doprava — na žádost uživatele
   2026-08-31. */
.signature-podpis {
  text-align: right;
  padding-right: var(--sp-5);
}

/* Odstavce "za" a role (obyčejný text, ne .eyebrow) mají jinak zděděný
   margin-bottom 24 px z běžného odstavce — mezi řádky podpisu je to
   zbytečně vzdušné, na žádost uživatele 2026-08-31 nahuštěno k sobě. */
.signature-podpis > p {
  margin-bottom: var(--sp-1);
}

.signature-firmy {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-1);
  padding: 0;
  max-width: none;
}

.signature-firmy img {
  /* Zvětšeno z 1.875rem — loga v podpisu byla málo vidět (zpětná
     vazba 2026-08-31). */
  height: 3.75rem;
  width: auto;
  display: block;
}

/* Ataxer logo má i tady (stejně jako v pásu log na Úvodu) menší
   vizuální váhu než ostatní dvě loga při stejné výšce — o něco vyšší
   to opticky vyrovnává (stejný poměr jako předtím). */
.signature-firmy .logo-ataxer {
  height: 5.8rem;
}

.signature-firmy a {
  display: flex;
  text-decoration: none;
}

/* Stejný hoverový přechod jako u loga na Úvodu (viz `.trust-list a`
   v sekci „Odbarvení loga při hoveru/focusu"). */
.signature-firmy a:hover img,
.signature-firmy a:focus-visible img {
  filter: grayscale(1) opacity(0.65);
}

.signature-jmeno {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 var(--sp-1);
}

.photo-placeholder {
  width: 9rem;
  height: 9rem;
  flex-shrink: 0;
  border: 1px dashed var(--barva-ramecek-vyrazny);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--barva-text-tlumeny);
  padding: var(--sp-3);
  background: var(--barva-pozadi-alt);
}

.note {
  font-style: italic;
  color: var(--barva-text-tlumeny);
}

/* ---------- Formulář ---------- */
/* Vlastní, prostší rámeček — ne stejný vzorec jako .cta-panel (silný
   akcentový pruh vlevo + tónované pozadí). Ten vzorec patří "výzvě k
   akci" (odkaz na kontakt odjinud na webu); formulář na Kontaktu je
   naopak samotný cíl té výzvy — obyčejný rámeček bez akcentového
   pruhu ho odlišuje jako funkční blok, ne jako další CTA (Etapa 2,
   bod 2.5). */
.contact-form {
  max-width: 34rem;
  margin-top: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-6);
  border: 1px solid var(--barva-ramecek);
  border-radius: var(--radius-normal);
  background: var(--barva-pozadi);
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.form-row label {
  font-weight: 700;
}

/* `width: 100%` a `min-width: 0` jsou tu kvůli tomu, že formulářové
   prvky mají vlastní vnitřní minimální šířku (textarea má implicitně
   cols="20"). Bez toho se na úzkém displeji nezmenší a roztlačí
   layout do vodorovného posuvníku. */
.form-row input,
.form-row textarea {
  font: inherit;
  width: 100%;
  min-width: 0;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--barva-ramecek-vyrazny);
  border-radius: var(--radius-small);
  color: var(--barva-text);
  background: var(--barva-pozadi);
}

.contact-form .btn {
  align-self: flex-start;
}

/* Poznámka pod formulářem — informace o zpracování osobních údajů */
.form-poznamka {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--barva-text-tlumeny);
  margin: 0;
  max-width: none;
}

/* ---------- Kontaktní údaje ---------- */

.kontakt-udaje {
  list-style: none;
  padding: 0;
  margin: 0;
}

.kontakt-udaje li {
  margin-bottom: var(--sp-2);
}

.kontakt-udaje .eyebrow {
  margin-bottom: 0;
}

/* ---------- Patička ---------- */

.site-footer {
  border-top: 1px solid var(--barva-ramecek);
  /* Tmavá vínová + bílé prvky — na žádost uživatele 2026-08-06.
     Kontrast #711834 × bílá = 11,15:1, bezpečně nad limitem WCAG AA
     (4,5:1) i AAA (7:1) pro běžný text. Světlejší #AC8190 zavrženo
     (buď nedostatečný kontrast s bílým textem, nebo jen těsně nad
     limitem s tmavým) — komplementární barva se možná uplatní jinde. */
  background: #711834;
  color: #ffffff;
  padding: var(--sp-7) 0;
  font-size: 1rem;
}

.site-footer p,
.footer-nazev {
  color: #ffffff;
}

.site-footer a {
  color: #ffffff;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: #f4e7ea;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
}

/* Poměr sloupců je změřený, ne odhadnutý (Etapa 2, bod 2.5) — nejširší
   řádek v každém sloupci při obsahu z produkce: firma/adresa 427 px,
   "Stránky" (nejdelší položka "Ochrana osobních údajů") 172 px,
   "Služby" (nejdelší položka "Účetnictví a finanční správa") 197 px.
   Poměr cca 2,3 : 1 : 1,1 dává firemnímu sloupci prostor na zalomení
   adresy/kontaktů, aniž by "Služby" dostávaly zbytečně mnohem víc
   místa, než jejich text potřebuje (dřív 2fr : 1fr : 1.4fr). */
@media (min-width: 52rem) {
  .footer-inner {
    grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr) minmax(0, 1.1fr);
  }
}

.footer-logo img {
  display: block;
  height: 3.5rem;
  width: auto;
  margin-bottom: var(--sp-4);
}

.site-footer p {
  margin: 0 0 var(--sp-2);
  max-width: 30rem;
}

.footer-nazev {
  font-weight: 700;
}

.site-footer nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}

.site-footer nav li {
  margin-bottom: var(--sp-2);
}

.site-footer .eyebrow {
  color: var(--barva-akcent-svetla);
}

.site-footer nav a {
  text-decoration: none;
  color: #ffffff;
}

.site-footer nav a:hover,
.site-footer nav a:focus-visible {
  text-decoration: underline;
  color: #f4e7ea;
}

/* ---------- Srovnávací tabulka úrovní služeb ---------- */
/* Tabulka nikdy nepřetéká layout: obal drží šířku kontejneru a na
   užších obrazovkách posouvá tabulku vodorovně uvnitř sebe. */

.table-wrap {
  overflow-x: auto;
  margin-top: var(--sp-7);
  border: 1px solid var(--barva-ramecek);
  border-radius: var(--radius-normal);
  background: var(--barva-pozadi);
  max-width: none;
}

.levels-table {
  width: 100%;
  min-width: 46rem;
  border-collapse: collapse;
  font-size: 1rem;
}

.levels-table th,
.levels-table td {
  padding: var(--sp-4) var(--sp-5);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--barva-ramecek);
}

.levels-table thead th {
  background: var(--barva-akcent);
  color: #ffffff;
  letter-spacing: 0.05em;
  border-bottom: none;
  white-space: nowrap;
}

.levels-table tbody th {
  font-weight: 700;
}

/* Hover podbarví celý řádek (i při ovládání klávesnicí) */
.levels-table tbody tr:hover,
.levels-table tbody tr:focus-within {
  background: var(--barva-akcent-svetla);
}

.levels-table tbody tr:last-child th,
.levels-table tbody tr:last-child td {
  border-bottom: none;
}

/* Vizuální značka nevyplněné hodnoty (číslo, kontakt apod.), co
   čeká na reálná data od klienta — použito i mimo tuto tabulku
   (viz .stats-strip na Proč my?). */
.ph {
  color: var(--barva-text-tlumeny);
  font-style: italic;
}

/* ---------- Mapa (Kontakt) ---------- */

.map-embed {
  margin-top: var(--sp-6);
  border: 1px solid var(--barva-ramecek);
  border-radius: var(--radius-normal);
  overflow: hidden;
  max-width: none;
}

.map-embed iframe {
  display: block;
  width: 100%;
  height: 24rem;
  border: 0;
  /* jemné sladění mapových barev s tlumenou paletou webu */
  filter: grayscale(0.25) sepia(0.06);
}

.mapa-odkaz {
  margin-top: var(--sp-3);
  font-size: 1rem;
}

/* ---------- Layout stránky Kontakt ---------- */

.section-loose {
  padding: var(--sp-9) 0;
}

.hero + .section-loose {
  padding-top: var(--sp-8);
}

/* `minmax(0, 1fr)`, ne `1fr` — automatické minimum u `1fr` se řídí
   min-content obsahu, takže formulář uvnitř neumí zmenšit sloupec pod
   svou vnitřní šířku a stránka pak na mobilu přetéká do vodorovného
   posuvníku. */
.kontakt-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-7);
  max-width: none;
}

@media (min-width: 62rem) {
  .kontakt-grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--sp-8);
  }
}

.kontakt-grid .contact-form {
  max-width: 42rem;
  margin-top: var(--sp-5);
}

.kontakt-grid h2 {
  margin-top: 0;
}

/* Kdo nemá rád animace, ať je nemá */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ---------- Tisk ---------- */
/* Předsedové a členové výboru si podklady běžně tisknou a vozí na
   shromáždění. Navigace na papíře nemá funkci, zabírá místo a mate;
   odkazy naopak musí být čitelné, protože na papíře se neklikne. */

@media print {
  .skip-link,
  .site-header,
  .breadcrumbs,
  .site-footer nav,
  .contact-form,
  .map-embed,
  .mapa-odkaz,
  .cta-row {
    display: none;
  }

  body {
    background: #ffffff;
    color: #000000;
    font-size: 11pt;
    line-height: 1.4;
  }

  h1, h2, h3 {
    color: #000000;
    page-break-after: avoid;
  }

  .hero,
  .section,
  .section-loose,
  .trust-strip {
    padding: 0 0 var(--sp-5);
  }

  .section-alt,
  .trust-strip,
  .site-footer {
    background: transparent;
    border: 0;
  }

  /* Tiskárny obvykle nevykreslují pozadí — bez tohoto by zůstal bílý
     text .hero-foto na bílém papíře. Vyšší specificita (.hero-foto h1
     apod.) je nutná, protože jinak by vyhrálo obecné "h1, h2, h3"
     pravidlo výše na základě pořadí, ne specificity. */
  .hero-foto {
    background: none;
  }

  .hero-foto h1,
  .hero-foto p {
    color: #000000;
  }

  .hero-foto .eyebrow {
    color: var(--barva-text-tlumeny);
  }

  .wrap {
    max-width: none;
    padding: 0;
  }

  .card {
    border: 1px solid #999999;
    box-shadow: none;
    page-break-inside: avoid;
  }

  .card-ikona {
    display: none;
  }

  a {
    color: #000000;
    text-decoration: underline;
  }

  /* Za odkazem se vytiskne jeho cíl. Vnitřní odkazy jsou relativní
     (soubor.html), protože doména ještě není potvrzená — až bude,
     stačí sem doplnit její předponu. */
  a[href]:not([href^="#"])::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    word-break: break-all;
  }

  .table-wrap {
    overflow: visible;
    border: 1px solid #999999;
  }

  .levels-table {
    min-width: 0;
  }

  .levels-table thead th {
    background: transparent;
    color: #000000;
    border-bottom: 1px solid #000000;
  }

  .placeholder {
    border: 1px dashed #999999;
    background: transparent;
    color: #000000;
  }
}