/* ==========================================================================
   Ukázka „Elektro Novák“ — revize a elektroinstalace, Kladno
   --------------------------------------------------------------------------
   Z ukazka.css si bere jen reset a lištu „ukázkový web“; všechno ostatní
   má prefix .e-.

   NÁVRHOVÉ VÝCHODISKO — „protokol“
   Elektrikářova práce končí papírem. Revizní zpráva s číslem, datem
   a závěrem je to, co si zákazník odnese, založí a za pět let hledá.
   A tím se jeho zákazník liší od zákazníka havarijního instalatéra: ten je
   v maléru a chce záchranu hned, tenhle chce jistotu a doklad. Vodařina 24
   proto vypadá jako přístroj — tmavý, čitelný po tmě, se vším na dosah
   palce. Tahle stránka vypadá jako dobře vedený dokument: světlá, přesná,
   linkovaná jako formulář, s čísly, která vypadají jako údaje z protokolu.

   Čtyři pravidla, která drží celý návrh pohromadě:

   1. BARVA MÁ VÝZNAM, NE VÝZDOBU.
      Zlatá (#e9a81b, vzatá z blesku ve firemním logu na fotkách) je jen
      a pouze to, co má člověk udělat — zavolat a objednat. Zelená je jen
      a pouze stav protokolu („bez závad“). Nic jiného na stránce barvu nemá,
      takže zlaté tlačítko nejde přehlédnout ani na světlé ploše.

   2. LINKY MÍSTO STÍNŮ.
      Dokument má linky, ne plovoucí karty. Sekce, ceník i kroky odděluje
      vlasová linka; stín je na celé stránce jen na jednom prvku — kartě
      protokolu v hero, která má schválně vypadat jako papír položený
      na stůl. Kdyby stínů bylo víc, přestane ten jeden cokoli znamenat.

   3. ČÍSLA JSOU ÚDAJE, NE TEXT.
      Ceny, lhůty, dojezdy, telefon i číslo zprávy jdou v JetBrains Mono
      s tabulkovými číslicemi. V ceníku se díky tomu řády srovnají pod sebe
      a celá stránka dostane ten rejstřík technické zprávy, o který jde.
      Archivo zůstává na text — a schválně v základní šířce, ne roztažené
      jako u Vodařiny, aby si obě ukázky nebyly podobné.

   4. NIC SE NEHÝBE SAMO.
      Žádná smyčka, žádné pulzování. Pohyb je jen odezva na akci: odkrytí
      při doscrollování a zvýraznění při najetí. Web, který slibuje pořádek,
      nemůže poblikávat. Při prefers-reduced-motion se nehýbe vůbec nic.

   Písma jsou tatáž jako u Vodařiny (Archivo + JetBrains Mono), protože už
   v projektu leží a druhá dvojice by stránku zbytečně zatížila. Odlišnost
   nese rozvržení, barva a hustota, ne jiný font.
   ========================================================================== */

/* --- Písma (lokální, font-src 'self') -------------------------------------
   Soubory sdílí s Vodařinou, proto cesta ven z adresáře ukázky. Rozdělení
   latin / latin-ext kvůli české diakritice; bez druhého souboru zůstane
   „ě š č ř ž ů“ v náhradním fontu a nadpis se rozsype. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url('fonts/archivo-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: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url('fonts/archivo-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   Základ
   ========================================================================== */
.e-stranka {
  --e-papir:  #fbfaf7;   /* pozadí stránky — teplá bílá, ne čistě bílá */
  --e-plocha: #ffffff;   /* karty a pruhy, které mají vystoupit */
  --e-podklad:#f3f1ea;   /* střídavé sekce */
  --e-inkoust:#202c32;   /* nadpisy — tmavá z loga */
  --e-text:   #39434a;
  --e-tlum:   #6c757c;
  --e-linka:  #e2ded3;
  --e-linka-silna: #cfc9ba;

  /* Zlatá je vzatá přímo z dodaného loga (#fbb808), ne z blesku na montérkách
     na fotkách (#e9a81b) — logo je závaznější, je to značka. Na fotkách to
     vedle sebe nevadí, oko to čte jako tutéž barvu v jiném světle.

     Tři odstíny, protože jeden nestačí: plná zlatá je krásná jako plocha,
     ale jako text na bílé má kontrast kolem 1,8 : 1, tedy nečitelná.
     Proto --e-zlata-text pro všechno, co je písmo nebo tenká ikona. */
  --e-zlata:  #fbb808;      /* PLOCHY: tlačítka, blesk, podtržení */
  --e-zlata-tmava: #d99e00; /* stav po najetí na plochu */
  --e-zlata-text: #8a6000;  /* PÍSMO a tenké ikony na světlém (AA) */
  --e-zlata-svit: rgba(251, 184, 8, .14);

  --e-stav:   #2c7a57;   /* STAV protokolu — nic jiného */
  --e-stav-svit: rgba(44, 122, 87, .1);

  --e-sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --e-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --e-demo: 0px;         /* výšku lišty „ukázkový web“ dopočítá JS */
  --e-hlava: 64px;
  --e-sekce: clamp(3rem, 1.8rem + 4.8vw, 5.5rem);

  background: var(--e-papir);
  color: var(--e-text);
  font-family: var(--e-sans);
  font-size: 17px;
  line-height: 1.62;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { .e-stranka { scroll-behavior: auto; } }

:where(.e-stranka) h1,
:where(.e-stranka) h2,
:where(.e-stranka) h3 {
  font-family: var(--e-sans);
  color: var(--e-inkoust);
  font-stretch: 100%;
  letter-spacing: -.021em;
  line-height: 1.12;
  text-wrap: balance;
}
:where(.e-stranka) a { color: inherit; }
:where(.e-stranka) img { display: block; max-width: 100%; height: auto; }

/* Kotva nesmí skončit pod lepivou hlavičkou. */
.e-stranka :target { scroll-margin-top: calc(var(--e-demo) + var(--e-hlava) + 2rem); }

/* Viditelné zaostření — na světlé ploše stačí obrys ve značkové zlaté,
   ale musí být tlustý; tenký zlatý prstenec na bílé je pro slabozrakého
   k ničemu. */
.e-stranka :focus-visible {
  outline: 3px solid var(--e-zlata-text);
  outline-offset: 3px;
  border-radius: 3px;
}

.e-wrap { width: min(92%, 1140px); margin-inline: auto; }
.e-sekce { padding-block: var(--e-sekce); }
.e-sekce--podklad { background: var(--e-podklad); }
.e-sekce + .e-sekce:not(.e-sekce--podklad) { border-top: 1px solid var(--e-linka); }
.e-mera { max-width: 64ch; }

/* Čísla. Tabulkové číslice srovnají řády pod sebe v ceníku i v dojezdech. */
.e-cislice {
  font-family: var(--e-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

/* ==========================================================================
   Odkrývání při doscrollování
   Třída .e-js se nasazuje skriptem, takže při chybě JS zůstane obsah vidět.
   ========================================================================== */
.e-js .e-odkryv { opacity: 0; transform: translateY(14px); }
.e-js .e-odkryv.je-videt {
  opacity: 1; transform: none;
  transition: opacity .5s ease, transform .5s ease;
  transition-delay: calc(var(--e-zpozdeni, 0) * 70ms);
}
@media (prefers-reduced-motion: reduce) {
  .e-js .e-odkryv, .e-js .e-odkryv.je-videt { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Hlavička
   ========================================================================== */
.e-head {
  position: sticky; top: var(--e-demo); z-index: 40;
  background: rgba(251, 250, 247, .88);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}
.e-head.je-posunuta { background: rgba(251, 250, 247, .97); border-bottom-color: var(--e-linka); }

.e-head-in {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: var(--e-hlava);
}

/* Logo je dodaný soubor, ne překreslené písmo: značka má vlastní tvar
   (přerušený kruh s vidlicí) i vlastní proporce a přesazovat ji do Archiva
   by z ní udělala něco jiného. Podtitulek „spolehlivé elektroinstalace“
   je z hlavičkové varianty odříznutý — při 40 px výšky by z něj byla kaše.
   Na úzkém displeji zůstane jen značka, jméno firmy nese titulek stránky. */
.e-logo { display: inline-flex; align-items: center; flex: none; }
.e-logo img { height: 40px; width: auto; }
.e-logo .e-logo-plne { display: none; }
/* 22rem ≈ 352 px: plné logo (125 px) se vejde vedle tlačítka i na nejužší
   dnes běžný displej, protože telefon v hlavičce naskakuje až od 30rem.
   Samotná značka je záchrana pro ještě užší, ne výchozí stav — hlavička
   bez jména firmy je anonymní. */
@media (min-width: 22rem) {
  .e-logo .e-logo-plne { display: block; }
  .e-logo .e-logo-znak { display: none; }
}

.e-menu {
  display: none; margin: 0 auto 0 1rem; padding: 0; list-style: none;
  gap: 1.6rem; font-size: .9375rem; font-weight: 600;
}
.e-menu a { text-decoration: none; color: var(--e-text); padding-block: .3rem; border-bottom: 2px solid transparent; }
.e-menu a:hover { color: var(--e-inkoust); border-bottom-color: var(--e-zlata); }
@media (min-width: 62rem) { .e-menu { display: flex; } }

.e-head-vpravo { margin-left: auto; display: flex; align-items: center; gap: .9rem; }
.e-head-tel { display: none; text-decoration: none; text-align: right; line-height: 1.15; }
.e-head-tel small { display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--e-tlum); }
.e-head-tel strong { font-size: 1.0625rem; font-weight: 700; color: var(--e-inkoust); }
@media (min-width: 30rem) { .e-head-tel { display: block; } }

/* ==========================================================================
   Tlačítka
   ========================================================================== */
.e-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .82rem 1.5rem; border-radius: 4px;
  font-family: var(--e-sans); font-size: .9375rem; font-weight: 700;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 1px solid transparent;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.e-btn--akce { background: var(--e-zlata); color: #22190b; }
.e-btn--akce:hover { background: var(--e-zlata-tmava); color: #fff; }
.e-btn--obrys { border-color: var(--e-linka-silna); color: var(--e-inkoust); }
.e-btn--obrys:hover { border-color: var(--e-inkoust); background: var(--e-plocha); }
.e-btn--velke { padding: 1rem 1.8rem; font-size: 1rem; }

/* Telefon jako tlačítko. Na ukázce nevede na tel:, ale na kotvu — čísla
   jsou smyšlená a mohla by patřit skutečnému člověku.

   Dřív to byl bílý dvouřádkový blok vedle obrysového tlačítka, takže dvě
   výzvy vedle sebe měly jinou výšku i jinou váhu a hlavní z nich vypadala
   slaběji. Teď mají obě stejnou geometrii (.e-btn) a liší se jen barvou:
   zlatá je ta, kterou má člověk stisknout. Otevírací doba se z bloku
   přesunula pod tlačítka jako poznámka — do tlačítka nepatří. */
.e-tel {
  gap: .7rem;
  background: var(--e-zlata); color: #2a1f02; border-color: var(--e-zlata);
}
.e-tel:hover { background: var(--e-zlata-tmava); border-color: var(--e-zlata-tmava); color: #2a1f02; }
.e-tel svg { width: 20px; height: 20px; flex: none; }
.e-tel strong { font-family: var(--e-mono); font-size: 1.0625rem; font-weight: 700; letter-spacing: -.03em; }

/* ==========================================================================
   Štítek sekce — číslo kapitoly a název, jako v obsahu zprávy
   ========================================================================== */
.e-stitek {
  display: flex; align-items: center; gap: .7rem;
  margin: 0 0 .9rem; font-size: .75rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--e-tlum);
}
.e-stitek i {
  font-family: var(--e-mono); font-style: normal; font-weight: 700;
  color: var(--e-zlata-text); letter-spacing: 0;
}
.e-stitek::after { content: ""; flex: 1; height: 1px; background: var(--e-linka); }

.e-hlavicka { max-width: 44rem; margin-bottom: 2.6rem; }
.e-nadpis { font-size: clamp(1.5rem, 1.12rem + 1.7vw, 2.3rem); }
.e-perex { margin-top: .9rem; color: var(--e-tlum); font-size: 1.0625rem; }

/* ==========================================================================
   Hero
   ========================================================================== */
.e-hero { padding-block: clamp(2.2rem, 1.2rem + 3.8vw, 4rem) var(--e-sekce); }
.e-hero-in { display: grid; gap: 2.6rem; align-items: center; }
@media (min-width: 62rem) {
  .e-hero-in { grid-template-columns: 1.02fr .98fr; gap: 3.4rem; }
}

.e-mesto {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8125rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--e-tlum);
}
.e-mesto svg { width: 16px; height: 16px; color: var(--e-zlata-text); }

.e-hero h1 { margin-top: 1rem; font-size: clamp(2rem, 1.25rem + 3.2vw, 3.3rem); }
.e-hero h1 .e-du {
  /* Podtržení tahem, ne rámečkem — má to vypadat jako zvýrazněno rukou
     v papírové zprávě, ne jako zvýrazněný odkaz.

     nowrap: zlomené přes dva řádky se ze zvýraznění stanou dva utržené
     pruhy a čte se to jako chyba sazby. Fráze je krátká, takže ani na úzkém
     displeji nepřeteče — a zlom se místo toho udělá před ní.
     box-decoration-break je pojistka pro případ, že by se to přece jen
     zlomilo: každý řádek pak dostane vlastní tah. */
  white-space: nowrap;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-image: linear-gradient(var(--e-zlata), var(--e-zlata));
  background-repeat: no-repeat;
  background-size: 100% .18em;
  background-position: 0 88%;
}
.e-hero-lead { margin-top: 1.2rem; max-width: 40rem; color: var(--e-tlum); font-size: 1.0625rem; }
.e-hero-akce { margin-top: 1.9rem; display: flex; flex-wrap: wrap; align-items: stretch; gap: .8rem; }
.e-hero-akce > * { flex: 1 1 14rem; }
@media (min-width: 30rem) { .e-hero-akce > * { flex: 0 1 auto; min-width: 15rem; } }
/* Poznámka pod výzvami — patří k nim, ne do nich. */
.e-akce-pozn { margin-top: .85rem; font-size: .8125rem; color: var(--e-tlum); }
.e-akce-pozn b { font-weight: 700; color: var(--e-text); }

/* Čtyři fakta pod výzvou. Mřížka, ne řádek — na mobilu musí zůstat čitelná. */
.e-fakta {
  margin: 2.2rem 0 0; padding: 1.4rem 0 0; list-style: none;
  border-top: 1px solid var(--e-linka);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.3rem 1.6rem;
}
@media (min-width: 46rem) { .e-fakta { grid-template-columns: repeat(4, 1fr); } }
.e-fakta b {
  display: block; font-family: var(--e-mono); font-size: 1.45rem; font-weight: 700;
  color: var(--e-inkoust); letter-spacing: -.04em; line-height: 1;
}
.e-fakta b small { font-size: .62em; font-weight: 500; color: var(--e-tlum); letter-spacing: 0; }
.e-fakta span { display: block; margin-top: .4rem; font-size: .8125rem; line-height: 1.35; color: var(--e-tlum); }

/* --- Vizuál: fotka a na ní karta protokolu ------------------------------- */
.e-hero-vizual { position: relative; }
.e-foto { overflow: hidden; border-radius: 6px; background: var(--e-podklad); }
.e-foto img { width: 100%; height: 100%; object-fit: cover; }
.e-foto--16x9 { aspect-ratio: 16 / 9; }
.e-foto--4x3  { aspect-ratio: 4 / 3; }
.e-foto--4x5  { aspect-ratio: 4 / 5; }
.e-foto--1x1  { aspect-ratio: 1 / 1; }

/* Jediný stín na stránce. Karta má vypadat jako papír položený na fotku —
   proto posun, nikoli zarovnání, a proto vlastní bílá plocha. */
.e-protokol {
  position: relative; z-index: 2;
  margin: -3.2rem 0 0 auto; width: min(100%, 23rem);
  padding: 1.15rem 1.3rem 1.05rem;
  background: var(--e-plocha);
  border: 1px solid var(--e-linka);
  border-radius: 5px;
  box-shadow: 0 18px 40px -26px rgba(20, 23, 28, .45);
}
@media (min-width: 62rem) { .e-protokol { margin-right: -1.2rem; } }
.e-protokol-hlava {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-bottom: .7rem; border-bottom: 1px solid var(--e-linka);
}
.e-protokol-hlava span { font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--e-tlum); }
.e-protokol-hlava b { font-family: var(--e-mono); font-size: .8125rem; font-weight: 700; color: var(--e-inkoust); }
.e-protokol dl { margin: 0; padding-top: .75rem; display: grid; gap: .45rem; }
.e-protokol dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.e-protokol dt { font-size: .8125rem; color: var(--e-tlum); }
.e-protokol dd { margin: 0; font-size: .8125rem; font-weight: 600; color: var(--e-inkoust); text-align: right; }
.e-protokol dd.e-cislice { font-size: .8125rem; }
.e-stav {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .18rem .55rem; border-radius: 3px;
  background: var(--e-stav-svit); color: var(--e-stav);
  font-size: .75rem; font-weight: 700;
}
.e-stav::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ==========================================================================
   01 — S čím lidé volají
   Seznam s cenou u každé položky, ne rozklikávací dlaždice: u Vodařiny má
   triáž smysl (člověk hledá svoji havárii a chce první pomoc), tady jde
   o přehled služeb, kde je podstatná cena a lhůta vedle sebe.
   ========================================================================== */
/* Čtyři dlaždice vedle sebe. Dřív to byl seznam řádků přes celou šířku —
   čtyři důvody pod sebou se ale čtou jako sled kroků, a to ony nejsou:
   jsou to čtyři rovnocenné vstupy, ze kterých si člověk vybere jeden.
   Vedle sebe je to vidět na první pohled.

   Cena a lhůta sedí v patičce dlaždice na společné lince, aby se daly
   porovnat napříč sloupci bez bloudění očima. */
.e-duvody { display: grid; gap: 1.1rem; }
@media (min-width: 40rem) { .e-duvody { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .e-duvody { grid-template-columns: repeat(4, 1fr); gap: 1.2rem; } }

.e-duvod {
  display: flex; flex-direction: column;
  padding: 1.5rem 1.35rem 1.2rem;
  background: var(--e-plocha); border: 1px solid var(--e-linka); border-radius: 5px;
  transition: border-color .18s ease, transform .18s ease;
}
.e-duvod:hover { border-color: var(--e-linka-silna); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .e-duvod:hover { transform: none; } }

.e-duvod-znak {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; margin-bottom: 1rem;
  border-radius: 5px; background: var(--e-zlata-svit); color: var(--e-zlata-text);
}
.e-duvod-znak svg { width: 24px; height: 24px; }
.e-duvod h3 { font-size: 1.0625rem; }
.e-duvod p { margin-top: .5rem; font-size: .9375rem; color: var(--e-tlum); }
/* Cena a lhůta pod sebou, ne vedle sebe. Ve čtyřech sloupcích je na dvojici
   vedle sebe málo místa a obě se lámou — čtyři dlaždice pak mají patičku
   každá jinak vysokou a nedá se nic porovnat. Pod sebou drží řádky rovinu
   napříč dlaždicemi. */
.e-duvod-pata {
  margin-top: auto; padding-top: .95rem;
  display: grid; gap: .15rem;
  border-top: 1px dashed var(--e-linka);
}
.e-duvod-cena { font-family: var(--e-mono); font-weight: 700; color: var(--e-inkoust); font-size: .9375rem; letter-spacing: -.03em; }
.e-duvod-cas { font-size: .8125rem; color: var(--e-tlum); }

/* ==========================================================================
   02 — Ceník
   Nosná sekce. Dvanáct z patnácti skutečných webů elektrikářů cenu neuvádí
   nikde — tady je to první, co je vidět, a je to v tabulce, ne v odstavci.
   ========================================================================== */
/* Dvě skupiny vedle sebe, každá vlastní deska. Jako jedna dlouhá tabulka
   se revize a opravy četly jako jeden ceník o osmi řádcích, přitom je to
   dvojí zboží pro dva různé důvody návštěvy — kdo shání revizi, o hodinovou
   sazbu nezavadí a naopak. Vedle sebe je ta hranice vidět bez čtení.

   Obě skupiny mají čtyři položky, takže si desky srovnají výšku samy;
   kdyby to tak nebylo, natáhne je mřížka (align-items: stretch je výchozí)
   a spodní hrany zůstanou v jedné lince. */
.e-cenik { display: grid; gap: 1.2rem; }
@media (min-width: 58rem) { .e-cenik { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; } }

.e-cenik-skupina {
  display: flex; flex-direction: column;
  background: var(--e-plocha);
  border: 1px solid var(--e-linka); border-radius: 6px;
  overflow: hidden;
}
.e-cenik-nazev {
  padding: .8rem 1.4rem; background: var(--e-podklad);
  font-size: .75rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--e-tlum);
}
.e-radek {
  display: grid; gap: .25rem .9rem; padding: .95rem 1.4rem;
  grid-template-columns: 1fr auto; align-items: baseline;
}
.e-radek + .e-radek { border-top: 1px solid var(--e-linka); }
.e-radek strong { font-weight: 700; color: var(--e-inkoust); font-size: .9688rem; }
.e-radek span { grid-column: 1 / -1; font-size: .875rem; color: var(--e-tlum); }
@media (min-width: 40rem) { .e-radek span { grid-column: 1; } }
.e-radek b {
  grid-row: 1; grid-column: 2;
  font-family: var(--e-mono); font-variant-numeric: tabular-nums;
  font-size: 1rem; font-weight: 700; color: var(--e-inkoust);
  letter-spacing: -.03em; white-space: nowrap;
}
.e-radek b small { font-family: var(--e-sans); font-size: .75rem; font-weight: 600; color: var(--e-tlum); letter-spacing: 0; }

.e-cenik-pozn {
  margin-top: 1.3rem; display: grid; gap: .55rem;
  padding: 0; list-style: none; font-size: .875rem; color: var(--e-tlum);
}
.e-cenik-pozn li { display: flex; gap: .6rem; }
.e-cenik-pozn li::before { content: "—"; color: var(--e-zlata-text); font-weight: 700; }

/* ==========================================================================
   03 — Kdy potřebujete revizi
   Situace zákazníka, ne lhůty z normy. Lhůtu stejně určuje druh objektu
   a prostředí — a člověk, který prodává byt, hledá „prodávám byt“,
   ne „ČSN“.
   ========================================================================== */
.e-situace { display: grid; gap: 1.1rem; }
@media (min-width: 42rem) { .e-situace { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .e-situace { grid-template-columns: repeat(3, 1fr); } }
.e-situace-karta {
  padding: 1.4rem 1.4rem 1.25rem;
  background: var(--e-plocha); border: 1px solid var(--e-linka); border-radius: 5px;
  transition: border-color .18s ease;
}
.e-situace-karta:hover { border-color: var(--e-linka-silna); }
.e-situace-karta h3 { font-size: 1rem; }
.e-situace-karta p { margin-top: .5rem; font-size: .9375rem; color: var(--e-tlum); }
.e-situace-pata {
  margin-top: .95rem; padding-top: .8rem; border-top: 1px dashed var(--e-linka);
  display: flex; align-items: baseline; justify-content: space-between; gap: .8rem;
  font-size: .875rem;
}
.e-situace-pata b { font-family: var(--e-mono); font-weight: 700; color: var(--e-inkoust); letter-spacing: -.03em; }
.e-situace-pata span { color: var(--e-tlum); }

/* ==========================================================================
   04 — Jak to probíhá
   ========================================================================== */
.e-kroky-mrizka { display: grid; gap: 2.4rem; align-items: center; }
@media (min-width: 60rem) { .e-kroky-mrizka { grid-template-columns: 1fr .82fr; gap: 3.2rem; } }
.e-kroky { margin: 0; padding: 0; list-style: none; counter-reset: e-krok; }
.e-krok {
  position: relative; counter-increment: e-krok;
  padding: 0 0 1.5rem 3.1rem;
}
.e-krok::before {
  content: counter(e-krok, decimal-leading-zero);
  position: absolute; left: 0; top: -.1rem;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--e-plocha); border: 1px solid var(--e-linka-silna);
  font-family: var(--e-mono); font-size: .75rem; font-weight: 700; color: var(--e-inkoust);
}
/* Svislá linka mezi kroky — průběh je jedna cesta, ne čtyři oddělené body.
   Při doscrollování se dokresluje shora dolů (transform místo height, ať to
   běží na GPU a nepřepočítává se rozvržení). Kolečko naskočí až když k němu
   linka dojede, takže to čte jako postup po cestě, ne jako čtyři věci,
   co se objevily naráz. */
.e-krok::after {
  content: ""; position: absolute; left: 1.05rem; top: 2.35rem; bottom: .35rem;
  width: 1px; background: var(--e-linka);
  transform-origin: top;
}
.e-js .e-kroky--zive .e-krok::after { transform: scaleY(0); }
.e-js .e-kroky--zive.je-videt .e-krok::after {
  transform: scaleY(1);
  transition: transform .55s ease-out;
  transition-delay: calc(var(--e-krok-poradi) * .42s + .18s);
}
.e-js .e-kroky--zive .e-krok::before,
.e-js .e-kroky--zive .e-krok > * { opacity: 0; }
.e-js .e-kroky--zive.je-videt .e-krok::before,
.e-js .e-kroky--zive.je-videt .e-krok > * {
  opacity: 1;
  transition: opacity .4s ease, transform .4s ease;
  transition-delay: calc(var(--e-krok-poradi) * .42s);
}
.e-js .e-kroky--zive .e-krok > * { transform: translateX(10px); }
.e-js .e-kroky--zive.je-videt .e-krok > * { transform: none; }
/* Poslední kolečko je zlaté a na konci ještě jednou luskne — je to jediná
   věc, kterou si zákazník odnese, a celý návrh se jmenuje „protokol“. */
.e-js .e-kroky--zive.je-videt .e-krok:last-child::before {
  animation: e-luskne .5s ease-out both;
  animation-delay: calc(var(--e-krok-poradi) * .42s + .2s);
}
@keyframes e-luskne {
  0%   { transform: scale(.6); }
  60%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .e-js .e-kroky--zive .e-krok::after,
  .e-js .e-kroky--zive.je-videt .e-krok::after { transform: none; transition: none; }
  .e-js .e-kroky--zive .e-krok::before,
  .e-js .e-kroky--zive .e-krok > * { opacity: 1; transform: none; transition: none; animation: none; }
  .e-js .e-kroky--zive.je-videt .e-krok:last-child::before { animation: none; }
}
.e-krok:last-child { padding-bottom: 0; }
.e-krok:last-child::after { display: none; }
.e-krok:last-child::before { background: var(--e-zlata); border-color: var(--e-zlata); color: #22190b; }
.e-krok h3 { font-size: 1.0625rem; }
.e-krok p { margin-top: .35rem; font-size: .9375rem; color: var(--e-tlum); }

/* ==========================================================================
   05 — Kam jezdíme
   ========================================================================== */
.e-oblast-mrizka { display: grid; gap: 2.2rem; }
@media (min-width: 58rem) { .e-oblast-mrizka { grid-template-columns: 20rem 1fr; gap: 3rem; align-items: start; } }
.e-obce { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--e-linka); }
.e-obce li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .72rem .2rem; border-bottom: 1px solid var(--e-linka);
  font-size: .9688rem;
}
.e-obce li:hover, .e-obce li.je-zvyraznena { background: var(--e-zlata-svit); }
.e-obce b { font-weight: 600; color: var(--e-inkoust); }
.e-obce span { font-family: var(--e-mono); font-variant-numeric: tabular-nums; font-size: .875rem; color: var(--e-tlum); letter-spacing: -.02em; }
/* --- Mapa dojezdu --------------------------------------------------------
   Schematická, ne zeměpisně přesná: obce sedí na skutečném azimutu
   a vzdálenosti od Kladna (8 px na kilometr), ale silnice ani hranice tu
   nejsou — smyslem je odpovědět na „jezdí ke mně a za jak dlouho“, ne
   nahradit mapu.

   Vodařina má na témže místě taky mapu, ale tmavou a s radarem. Tahle je
   světlá, tenká a bez pohybu: tři čárkované prstence, tečky a jména.
   Dvě stejné mapy ve dvou ukázkách by prozradily jednu šablonu.

   Mapa a seznam jsou spárované přes data-obec: najetí na jedno rozsvítí
   druhé. Mapa sama je aria-hidden — pro čtečku je nositelem informace
   seznam, kde jsou tytéž obce i časy v textu. */
.e-mapa { width: 100%; height: auto; overflow: visible; }
.e-mapa-prsten { fill: none; stroke: var(--e-linka-silna); stroke-width: 1; stroke-dasharray: 4 5; }
.e-mapa-popis { font-family: var(--e-mono); font-size: 13px; fill: var(--e-tlum); }
.e-mapa-obec { transition: opacity .18s ease; }
.e-mapa-tecka { fill: var(--e-inkoust); }
.e-mapa-jmeno { font-family: var(--e-sans); font-size: 15px; font-weight: 600; fill: var(--e-text); }
.e-mapa-stred .e-mapa-tecka { fill: var(--e-zlata); stroke: var(--e-inkoust); stroke-width: 2; }
.e-mapa-stred .e-mapa-jmeno { font-weight: 800; fill: var(--e-inkoust); font-size: 17px; }
/* Zvýraznění funguje oběma směry: z mapy i ze seznamu. */
.e-mapa:hover .e-mapa-obec { opacity: .38; }
.e-mapa .e-mapa-obec:hover,
.e-mapa .e-mapa-obec.je-zvyraznena { opacity: 1; }
.e-mapa-obec.je-zvyraznena .e-mapa-tecka { fill: var(--e-zlata); stroke: var(--e-inkoust); stroke-width: 2; }
.e-mapa-obec.je-zvyraznena .e-mapa-jmeno { fill: var(--e-inkoust); font-weight: 800; }

.e-oblast-pozn {
  align-self: start;
  margin-top: 1.4rem; padding: 1.1rem 1.2rem; background: var(--e-plocha);
  border: 1px solid var(--e-linka); border-left: 3px solid var(--e-zlata); border-radius: 4px;
  font-size: .9063rem; color: var(--e-tlum);
}
.e-oblast-pozn b { display: block; margin-bottom: .3rem; color: var(--e-inkoust); }

/* ==========================================================================
   06 — Co ještě děláme
   ========================================================================== */
.e-dalsi-mrizka { display: grid; gap: 2.4rem; align-items: center; }
/* Užší sloupec pro fotku: při .8fr byl snímek na výšku o hlavu vyšší než
   seznam vedle ním a pod seznamem zůstávala prázdná plocha. */
@media (min-width: 60rem) { .e-dalsi-mrizka { grid-template-columns: .66fr 1fr; gap: 3.4rem; } }
.e-sluzby { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; border-top: 1px solid var(--e-linka); }
.e-sluzby li { padding: 1.05rem .2rem; border-bottom: 1px solid var(--e-linka); }
.e-sluzby h3 { font-size: 1rem; }
.e-sluzby p { margin-top: .3rem; font-size: .9375rem; color: var(--e-tlum); }

/* ==========================================================================
   07 — Reference
   ========================================================================== */
/* --- Carousel referencí ---------------------------------------------------
   Stojí na scroll-snap, ne na JS: posun dělá prohlížeč nativně, takže to
   jde prstem na mobilu i kolečkem na trackpadu a bez skriptu to zůstane
   obyčejný vodorovný seznam. JS jen dokresluje tlačítka a tečky.

   Posouvá se samo po šesti sekundách — jinak by nikoho nenapadlo, že jsou
   tam další reference. Je to jediný pohyb na stránce, který si člověk
   nevyžádal, a proto má tři pojistky: stojí při najetí myší i při zaostření
   klávesnicí, po prvním vlastním posunu se vypne natrvalo a při
   prefers-reduced-motion se nespustí vůbec. */
.e-ref-obal { position: relative; }
.e-ref {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(85%, 21rem);
  gap: 1.1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none;
  padding-bottom: .4rem;
}
.e-ref::-webkit-scrollbar { display: none; }
.e-ref > * { scroll-snap-align: start; }
@media (prefers-reduced-motion: reduce) { .e-ref { scroll-behavior: auto; } }
@media (min-width: 52rem) {
  .e-ref { grid-auto-columns: calc((100% - 2.2rem) / 3); }
}

.e-ref-ovladani { display: flex; align-items: center; gap: .9rem; margin-top: 1.4rem; }
.e-ref-sip {
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem;
  border: 1px solid var(--e-linka-silna); border-radius: 50%;
  background: var(--e-plocha); color: var(--e-inkoust); cursor: pointer;
  transition: border-color .18s ease, background .18s ease, opacity .18s ease;
}
.e-ref-sip:hover:not(:disabled) { border-color: var(--e-zlata); background: var(--e-zlata-svit); }
.e-ref-sip:disabled { opacity: .35; cursor: default; }
.e-ref-sip svg { width: 17px; height: 17px; }
.e-ref-tecky { display: flex; gap: .4rem; margin-left: auto; }
.e-ref-tecka {
  width: .5rem; height: .5rem; padding: 0; border: 0; border-radius: 50%;
  background: var(--e-linka-silna); cursor: pointer; transition: background .18s ease, width .18s ease;
}
.e-ref-tecka.je-aktivni { background: var(--e-zlata); width: 1.4rem; border-radius: .25rem; }
.e-ref-karta {
  display: flex; flex-direction: column; gap: .9rem;
  padding: 1.5rem 1.4rem;
  background: var(--e-plocha); border: 1px solid var(--e-linka); border-radius: 5px;
}
.e-ref-karta blockquote { margin: 0; font-size: .9688rem; color: var(--e-text); }
.e-ref-karta blockquote::before { content: "„"; color: var(--e-zlata); font-weight: 700; }
.e-ref-pata { margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--e-linka); font-size: .8125rem; color: var(--e-tlum); }
.e-ref-pata b { display: block; color: var(--e-inkoust); font-size: .9375rem; }
.e-hvezdy { display: flex; gap: .12rem; color: var(--e-zlata); }
.e-hvezdy svg { width: 15px; height: 15px; }

/* ==========================================================================
   08 — Dotazy
   ========================================================================== */
/* Otázky samotné by na širokém displeji nechaly pravou polovinu sekce
   prázdnou. Fotka ji zaplní a drží se při scrollování, takže je vidět
   i u poslední otázky. */
.e-faq-mrizka { display: grid; gap: 2.4rem; align-items: start; }
@media (min-width: 62rem) { .e-faq-mrizka { grid-template-columns: 1fr 20rem; gap: 3.4rem; } }
.e-faq-foto { display: none; }
@media (min-width: 62rem) {
  .e-faq-foto { display: block; position: sticky; top: calc(var(--e-demo) + var(--e-hlava) + 2rem); }
}

.e-faq { border-top: 1px solid var(--e-linka); }
.e-otazka { border-bottom: 1px solid var(--e-linka); }
.e-otazka summary {
  display: flex; align-items: center; gap: 1rem; justify-content: space-between;
  padding: 1.15rem .2rem; cursor: pointer; list-style: none;
  font-weight: 700; color: var(--e-inkoust);
}
.e-otazka summary::-webkit-details-marker { display: none; }
.e-otazka summary:hover { color: var(--e-zlata-text); }
.e-znak { position: relative; flex: none; width: 16px; height: 16px; }
.e-znak::before, .e-znak::after {
  content: ""; position: absolute; inset: 50% 0 auto; height: 2px; margin-top: -1px;
  background: var(--e-zlata-text); transition: transform .2s ease;
}
.e-znak::after { transform: rotate(90deg); }
.e-otazka[open] .e-znak::after { transform: rotate(0); }
.e-otazka-telo { padding: 0 2.2rem 1.25rem .2rem; font-size: .9688rem; color: var(--e-tlum); }

/* ==========================================================================
   Výzva uvnitř stránky
   Stránka měla telefon v hero a pak až v patičce, tedy devět sekcí bez
   jediné cesty k akci. Kdo se rozhodl u ceníku, musel doscrollovat na konec
   nebo odejít. Pruh je proto vždy hned za sekcí, která dává důvod zavolat:
   za ceníkem a za výčtem toho, co firma umí.

   Není to celá tmavá sekce — tu má stránka jen jednu, kontakt na konci,
   a druhá tmavá plocha uprostřed by ten závěr oslabila.
   ========================================================================== */
.e-vyzva {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2rem;
  margin-top: 2.6rem; padding: 1.5rem 1.7rem;
  background: var(--e-plocha);
  border: 1px solid var(--e-linka); border-left: 3px solid var(--e-zlata);
  border-radius: 5px;
}
.e-vyzva-text { flex: 1 1 18rem; }
.e-vyzva-text b { display: block; font-weight: 800; color: var(--e-inkoust); font-size: 1.0625rem; }
.e-vyzva-text span { display: block; margin-top: .25rem; font-size: .9375rem; color: var(--e-tlum); }
.e-vyzva-akce { display: flex; flex-wrap: wrap; align-items: stretch; gap: .7rem; }

/* ==========================================================================
   Oblast působení
   Dřív stála jen v drobném nadpisku nad H1 a pak až v sekci 05, tedy
   po pěti obrazovkách. U lokální služby je to přitom první otázka, kterou
   si člověk klade — proto je teď vidět hned v hero a nese konkrétní jména
   měst, ne jen „a okolí“.
   ========================================================================== */
.e-oblast-pruh {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
  margin-top: 1.1rem; padding: .6rem .9rem;
  background: var(--e-zlata-svit); border-radius: 4px;
  font-size: .875rem; color: var(--e-text);
}
.e-oblast-pruh svg { width: 17px; height: 17px; flex: none; color: var(--e-zlata-text); }
.e-oblast-pruh b { font-weight: 700; color: var(--e-inkoust); }
.e-oblast-pruh a { color: var(--e-zlata-text); font-weight: 700; text-underline-offset: 3px; }

/* ==========================================================================
   Kontakt
   ========================================================================== */
.e-kontakt { background: var(--e-inkoust); color: rgba(255, 255, 255, .78); }
.e-kontakt h2 { color: #fff; }
.e-kontakt .e-stitek { color: rgba(255, 255, 255, .55); }
.e-kontakt .e-stitek i { color: var(--e-zlata); }
.e-kontakt .e-stitek::after { background: rgba(255, 255, 255, .16); }
.e-kontakt-mrizka { display: grid; gap: 2.4rem; }
@media (min-width: 56rem) { .e-kontakt-mrizka { grid-template-columns: 1fr 1fr; gap: 3.4rem; } }
/* Telefon zůstává zlatý i na tmavém: je to hlavní výzva stránky a ztlumit
   ji do průsvitného rámečku by z ní udělalo odkaz mezi odkazy. */
.e-udaje { margin: 0; display: grid; gap: 1.1rem; }
.e-udaje > div { padding-bottom: 1.1rem; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.e-udaje dt { font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.e-udaje dd { margin: .3rem 0 0; font-size: 1.0625rem; font-weight: 600; color: #fff; }
.e-pozn { margin-top: 1.4rem; font-size: .8125rem; color: rgba(255, 255, 255, .5); }