/* ==========================================================================
   Ukázka „ELMONT“ — elektrikář pro domácnosti, Hradec Králové
   --------------------------------------------------------------------------
   Z ukazka.css si bere jen reset a lištu „ukázkový web“; všechno ostatní
   má prefix .m-.

   NÁVRHOVÉ VÝCHODISKO — „cedule na dodávce“
   Čtvrtá ukázka musí sedět na čtvrtého zákazníka. Předchozí tři mluví
   ke třem různým lidem:
     • Vodařina 24 … havárie, chci záchranu hned      → tmavý přístroj
     • Elektro Novák … revize, chci doklad            → světlý dokument
     • VoltPro … novostavba, chci partii na půl roku  → tmavé bento se světlem
   Tenhle čtvrtý je majitel bytu nebo domu, kterému nesvítí světlo
   v koupelně, chystá kuchyň nebo chce dobíječku k autu. Nespěchá, papír
   ho nezajímá a žádnou stavbu neplánuje. Řeší jedinou věc: koho si pustí
   do bytu. Rozhoduje se podle člověka, ne podle firmy.

   Odtud celý návrh: stránka je plakát s jedním jménem a jednou tváří.
   Vypadá jako cedule na dodávce, která zastavila před domem — velká
   kondenzovaná verzálka, tlusté linky, teplý papír a jedna oranžová.

   Pět pravidel, která drží celý návrh pohromadě:

   1. MLUVÍ ČLOVĚK, NE FIRMA.
      Celá stránka je v první osobě, podepsaná jménem a tváří. Na všech
      fotkách je pořád ten samý člověk — to je u téhle zakázky jediný
      doklad, který zákazník ocení, protože revizní zprávu za výměnu
      svítidla nedostane.

   2. PAPÍR, NE OBRAZOVKA.
      Podklad je teplý písek, ne bílá jako u Nováka a ne černá jako
      u VoltPra. Řemeslník u vás doma není dispečink ani technologie;
      je to návštěva, která má po sobě uklidit.

   3. TLUSTÉ LINKY A VELKÁ KONDENZOVANÁ VERZÁLKA.
      Nadpisy, čísla i tlačítka jdou v Roboto Condensed 700 verzálkami.
      Je to písmo z polepu dodávky a zároveň jediné písmo v projektu,
      které si zatím žádná ukázka nevzala — všechny tři předchozí stojí
      na Archivu. Linky jsou 2px grafitové, ne vlasové jako u Nováka:
      dvě světlé ukázky se stejnou linkou by prozradily šablonu.

   4. ŽÁDNÉ KARTY, ŽÁDNÉ STÍNY, ŽÁDNÉ SKLO.
      Sekce se dělí barvou podkladu, tlustou linkou a fotkou přes celou
      šířku okna. Na celé stránce není jediný stín ani zaoblený roh nad
      3 px. Plovoucí karta je jazyk aplikace, tohle má být tištěný leták.

   5. ČÍSLA JSOU VELKÁ A BEZ MONOSPACE.
      Ceny nesou tutéž kondenzovanou verzálku jako nadpisy, ne strojopis.
      Vodařina i Novák mají čísla v JetBrains Mono, protože jim jde
      o údaj z přístroje a o protokol. Tady jde o ceník na ceduli.

   Dům z loga je jediná ozdoba na stránce: je z něj odrážka v seznamech
   a rám kolem portrétu. Nic jiného ozdobného tu není.
   ========================================================================== */

/* --- Písma (lokální, font-src 'self') -------------------------------------
   Roboto Condensed na nadpisy a čísla, Archivo na text. Oboje už v projektu
   leží, takže čtvrtá ukázka nepřidává ani jeden nový soubor. 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: 'Roboto Condensed';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/roboto-condensed-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: 'Roboto Condensed';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/roboto-condensed-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: '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;
}

/* ==========================================================================
   Základ
   ========================================================================== */
.m-stranka {
  --m-papir:  #f4efe6;   /* podklad stránky — teplý papír */
  --m-plocha: #fbf8f3;   /* světlejší pruh, střídá se s papírem */
  --m-grafit: #27343b;   /* inkoust z loga — nadpisy, linky a tmavé pruhy */
  --m-text:   #3c4045;
  --m-tlum:   #6f6a62;
  --m-linka:  #ded4c4;   /* dělení uvnitř sekce */

  /* Obě barvy jsou odkapané z dodaného loga: inkoust #27343b a oranžová
     #f56f14. Plná oranžová patří plochám — tlačítku, pruhu, odrážce.
     Na písmo se použít nedá (na papíře má kontrast pod 3 : 1), proto
     tmavší --m-oranz-text: 5,6 : 1, tedy i na drobné písmo s rezervou. */
  --m-oranz:       #f56f14;
  --m-oranz-tmava: #d85c05;
  --m-oranz-text:  #96490b;

  --m-cedule: 'Roboto Condensed', 'Arial Narrow', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --m-sans:   'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

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

  background: var(--m-papir);
  color: var(--m-text);
  font-family: var(--m-sans);
  font-size: 17px;
  line-height: 1.62;
  scroll-behavior: smooth;

  /* Hero fotka a fotopásy vystupují z obsahové šířky k okraji okna
     zápornou marží. Bez tohohle řádku by z toho na širokém displeji byl
     vodorovný posuv o šířku svislého posuvníku. „clip“ místo „hidden“
     schválně — hidden by udělal ze stránky odrolovatelnou plochu
     a lepivá hlavička by přestala držet. */
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) { .m-stranka { scroll-behavior: auto; } }

:where(.m-stranka) h1,
:where(.m-stranka) h2,
:where(.m-stranka) h3 {
  font-family: var(--m-cedule);
  color: var(--m-grafit);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .012em;
  line-height: 1.02;
  text-wrap: balance;
}
:where(.m-stranka) a { color: inherit; }
/* Prohlížeč dává <figure> odsazení 40 px po stranách. Fotky tu jdou
   od kraje ke kraji sloupce, takže by se jim o tu hodnotu zmenšila
   šířka — a hero fotka by se nedotkla okraje okna. */
:where(.m-stranka) figure { margin: 0; }
:where(.m-stranka) img { display: block; max-width: 100%; height: auto; }

.m-stranka :target { scroll-margin-top: calc(var(--m-demo) + var(--m-hlava) + 2rem); }
.m-stranka :focus-visible {
  outline: 3px solid var(--m-grafit);
  outline-offset: 2px;
  border-radius: 2px;
}

.m-wrap { width: min(92%, 1140px); margin-inline: auto; }
.m-sekce { padding-block: var(--m-sekce); }
.m-sekce--plocha { background: var(--m-plocha); }
.m-mera { max-width: 56ch; }

/* Čísla nesou tutéž verzálku jako nadpisy. Tabulkové číslice srovnají
   ceny v ceníku pod sebe. */
.m-cislo {
  font-family: var(--m-cedule);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: .01em;
}

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

/* ==========================================================================
   Dům z loga
   Jediná ozdoba na stránce. Pětiúhelník se sedlovou střechou — obrys
   z loga, ne obrázek, takže nic nestahuje a dá se obarvit.
   ========================================================================== */
.m-dum {
  display: inline-block; flex: none;
  width: .72em; height: .72em;
  background: var(--m-oranz);
  clip-path: polygon(50% 0, 100% 40%, 100% 100%, 0 100%, 0 40%);
}

/* ==========================================================================
   Hlavička
   Nesvítí, nerozostřuje, nepluje. Drží se nahoře a odděluje se linkou,
   která po odrolování ztloustne — jediná změna, kterou hlavička má.
   ========================================================================== */
.m-head {
  position: sticky; top: var(--m-demo); z-index: 40;
  background: var(--m-papir);
  border-bottom: 1px solid var(--m-linka);
  transition: border-color .2s ease;
}
.m-head.je-posunuta { border-bottom: 2px solid var(--m-grafit); }
.m-head-in { display: flex; align-items: center; gap: 1.25rem; min-height: var(--m-hlava); }

.m-logo { display: inline-flex; align-items: center; flex: none; }
.m-logo img { height: 52px; width: auto; }
@media (max-width: 30rem) { .m-logo img { height: 42px; } }

.m-menu {
  display: none; margin: 0 auto 0 1.4rem; padding: 0; list-style: none;
  gap: 1.5rem;
  font-family: var(--m-cedule); font-size: 1rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
}
.m-menu a {
  display: block; padding-block: .3rem;
  color: var(--m-grafit); text-decoration: none;
  border-bottom: 2px solid transparent;
}
.m-menu a:hover { border-bottom-color: var(--m-oranz); }
@media (min-width: 62rem) { .m-menu { display: flex; } }

.m-head-vpravo { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.m-head-tel {
  display: none; text-decoration: none; color: var(--m-grafit);
  font-family: var(--m-cedule); font-size: 1.3rem; font-weight: 700; white-space: nowrap;
}
@media (min-width: 40rem) { .m-head-tel { display: block; } }

/* ==========================================================================
   Tlačítka
   Ostrý obdélník s verzálkou. Zaoblení 2 px je jen proto, aby roh
   nevypadal ostře jako sklo — víc by z cedule udělalo aplikaci.
   ========================================================================== */
.m-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .85rem 1.5rem; border-radius: 2px;
  font-family: var(--m-cedule); font-size: 1.0625rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 2px solid transparent;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.m-btn--akce { background: var(--m-oranz); border-color: var(--m-oranz); color: #1d1204; }
.m-btn--akce:hover { background: var(--m-oranz-tmava); border-color: var(--m-oranz-tmava); }
.m-btn--obrys { border-color: var(--m-grafit); color: var(--m-grafit); }
.m-btn--obrys:hover { background: var(--m-grafit); color: var(--m-papir); }
.m-btn--velke { padding: 1.05rem 1.9rem; font-size: 1.1875rem; }
.m-btn svg { width: 20px; height: 20px; flex: none; }
/* Tlačítko v hlavičce je nižší než ta v obsahu. V liště nemá na co lákat,
   jen má být po ruce — a vyšší tlačítko tam zbytečně tlačí logo dolů. */
.m-head-vpravo .m-btn { padding-block: .58rem; }
/* Na úzkém displeji jdou tlačítka přes celou šířku. Dvě různě široká
   tlačítka pod sebou vypadají jako chyba sazby, ne jako volba. */
@media (max-width: 28rem) {
  .m-hero-akce .m-btn, .m-kontakt-akce .m-btn { flex: 1 0 100%; }
}

/* Telefon je na ukázce kotva, ne odkaz tel: — čísla jsou smyšlená
   a mohla by patřit skutečnému člověku. Vypadat ale musí jako telefon. */
.m-tel strong { font-family: var(--m-cedule); font-size: 1.1875rem; font-weight: 700; letter-spacing: .01em; }

/* ==========================================================================
   Hlavička sekce
   Číslo kapitoly, název a tlustá linka přes celou šířku. Je to nejlevnější
   způsob, jak stránku bez karet rozdělit na kapitoly.
   ========================================================================== */
.m-cast { display: flex; align-items: baseline; gap: .9rem; margin-bottom: 1.5rem; }
/* Linka má jít přes celou šířku sekce, proto štítek stojí nad blokem
   .m-hlavicka, ne v něm — ten drží čtecí míru 46rem. */
.m-cast::after { content: ""; flex: 1; height: 2px; background: var(--m-grafit); }
.m-cast i {
  font-family: var(--m-cedule); font-style: normal; font-weight: 700;
  font-size: 1.0625rem; color: var(--m-oranz-text); letter-spacing: .02em;
}
.m-cast span {
  font-family: var(--m-cedule); font-size: 1.0625rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--m-grafit);
}
.m-nadpis { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.9rem); }
.m-perex { margin-top: 1rem; color: var(--m-tlum); font-size: 1.0625rem; }
.m-hlavicka { max-width: 46rem; margin-bottom: 2.4rem; }

/* ==========================================================================
   Hero
   Text vlevo, portrét vpravo až k okraji okna. Asymetrie je záměr:
   vycentrovaný hero by z plakátu udělal prezentaci.
   ========================================================================== */
.m-hero { padding-top: clamp(2rem, 1.2rem + 3vw, 3.25rem); padding-bottom: 0; }
.m-hero-in { display: grid; gap: 2.2rem; align-items: end; }
@media (min-width: 62rem) {
  .m-hero-in { grid-template-columns: 1fr .82fr; gap: 3rem; }
}

.m-kde {
  display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1.1rem;
  font-family: var(--m-cedule); font-size: 1rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; color: var(--m-oranz-text);
}
.m-hero h1 {
  font-size: clamp(2.5rem, 1.5rem + 4.4vw, 4.4rem);
  line-height: .96;
  letter-spacing: -.005em;
}
.m-hero h1 em { font-style: normal; color: var(--m-oranz-text); }
.m-hero-lead { margin-top: 1.4rem; font-size: 1.125rem; max-width: 32rem; }
.m-hero-podpis {
  margin-top: 1.2rem; padding-left: 1rem; border-left: 3px solid var(--m-oranz);
  font-size: 1rem; color: var(--m-tlum);
}
.m-hero-podpis b { display: block; color: var(--m-grafit); font-weight: 700; }
.m-hero-akce { margin-top: 1.9rem; display: flex; flex-wrap: wrap; gap: .8rem; }

/* Portrét. Dlaždice je na širokém displeji naležato, na mobilu nastojato,
   a každému tvaru se podává jiný výřez (viz <picture> ve stránce) — jeden
   snímek by se do jednoho z nich musel nacpat. Na mobilu je fotka prostě
   tak vysoká, jak vyšla z ořezu; tvar si vynucuje až široké rozvržení. */
.m-hero-foto { position: relative; }
.m-hero-foto picture { display: block; }
.m-hero-foto img { width: 100%; height: auto; }
@media (min-width: 62rem) {
  .m-hero-foto {
    /* Z obsahové šířky ven k pravému okraji okna. Záporná marže musí být
       velká přesně jako okraj stránky, tedy polovina rozdílu mezi oknem
       a obsahovým pruhem — ne polovina rozdílu mezi oknem a tímhle
       sloupcem. S procenty počítanými ze sloupce vyjde marže skoro
       trojnásobná, dlaždice přeteče okno a třetina fotky se odřízne
       za jeho hranou.

       Ten 1rem navíc je kvůli svislému posuvníku: 100vw ho počítá, šířka
       stránky ne, takže bez přesahu zůstane u pravé hrany proužek papíru.
       Přebytek ukrojí overflow-x: clip na .m-stranka. */
    margin-right: calc((min(92vw, 1140px) - 100vw) / 2 - 1rem);
    /* Fotka si drží vlastní poměr a srovnává se dolů k tlačítkům. Dřív se
       roztahovala na výšku textového sloupce a object-fit z ní ukrajoval
       shora i zdola — z celé scény zbyl detail obličeje. Co je na fotce
       vidět, patří do ořezu souboru, ne do CSS. */
    align-self: end;
  }
  /* Rám dostane poměr širokého výřezu (905 / 1135 = 79,7 %) přes odsazení
     v procentech, protože to se počítá ze šířky. Atributy width/height
     na <img> popisují svislou variantu a prohlížeč podle nich drží tvar
     dlaždice i tehdy, když <picture> podá ležatý soubor — bez vlastního
     poměru by se široká fotka nacpala do svislého rámu a object-fit by
     z ní ukrojil obě strany. */
  .m-hero-foto picture { position: relative; padding-top: 79.7%; }
  .m-hero-foto img { position: absolute; inset: 0; height: 100%; object-fit: cover; }
}
.m-hero-znak {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  background: var(--m-oranz); color: #1d1204;
  padding: .7rem 1.1rem;
  font-family: var(--m-cedule); font-size: 1rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
}

/* ==========================================================================
   Pruh s fakty
   Tři údaje mezi hero a obsahem. Grafitový pás je na světlé stránce
   nejsilnější dělič, jaký je k dispozici — a stojí přesně tam, kde
   návštěvník odrolováním opouští hero.
   ========================================================================== */
.m-fakta {
  background: var(--m-grafit); color: #c9c2b6;
  margin-top: var(--m-sekce);
}
.m-fakta-in { display: grid; gap: 1.6rem; padding-block: 2rem; }
@media (min-width: 46rem) { .m-fakta-in { grid-template-columns: repeat(3, 1fr); gap: 2.4rem; } }
.m-fakt b {
  display: block; font-family: var(--m-cedule); font-weight: 700;
  font-size: clamp(2rem, 1.5rem + 1.8vw, 2.75rem); line-height: 1;
  color: var(--m-papir); text-transform: uppercase;
}
.m-fakt b i { font-style: normal; color: var(--m-oranz); }
.m-fakt span { display: block; margin-top: .45rem; font-size: .9375rem; line-height: 1.45; }

/* ==========================================================================
   Fotopás
   Fotka přes celou šířku okna s popiskem v rohu. Nahrazuje obrázkovou
   kartu: karta by potřebovala rám a stín, tohle nepotřebuje nic.
   ========================================================================== */
.m-pas { position: relative; background: var(--m-grafit); }
.m-pas img { width: 100%; height: clamp(14rem, 8rem + 24vw, 26rem); object-fit: cover; }
.m-pas-popis {
  position: absolute; left: 0; bottom: 0; max-width: min(90%, 34rem);
  padding: 1rem 1.4rem;
  background: var(--m-papir);
  font-size: .9375rem; color: var(--m-text);
}
.m-pas-popis b {
  display: block; font-family: var(--m-cedule); font-size: 1.25rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em; color: var(--m-grafit);
}

/* ==========================================================================
   Co dělám
   Seznam s tlustou linkou nad každou položkou, ne dlaždice. Zakázka
   za osm set korun si nezaslouží kartu se stínem — zaslouží si řádek,
   ve kterém je vidět cena.
   ========================================================================== */
.m-prace { display: grid; gap: 0; }
@media (min-width: 52rem) { .m-prace { grid-template-columns: 1fr 1fr; column-gap: 2.6rem; } }
.m-prace-radek {
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline;
  gap: .3rem .9rem;
  padding-block: 1.25rem;
  border-top: 2px solid var(--m-grafit);
}
.m-prace-radek .m-dum { align-self: center; }
.m-prace-radek h3 { font-size: 1.25rem; letter-spacing: .03em; }
.m-prace-popis {
  grid-column: 2 / -1; margin-top: .35rem;
  font-size: .9375rem; color: var(--m-tlum);
}
.m-prace-cena {
  font-family: var(--m-cedule); font-size: 1.25rem; font-weight: 700;
  white-space: nowrap; color: var(--m-grafit);
}
.m-prace-cena small {
  display: block; text-align: right;
  font-size: .6875rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--m-tlum);
}

/* ==========================================================================
   Ceník
   Dvě věci, které zákazník chce vědět dřív, než zavolá: hodinovka
   a doprava. Stojí samostatně a velké, protože kvůli nim se telefonuje.
   ========================================================================== */
.m-sazby {
  display: grid; gap: 2px;
  background: var(--m-grafit);   /* prosvítá spárami jako dělicí linka */
  border-top: 2px solid var(--m-grafit);
}
@media (min-width: 46rem) { .m-sazby { grid-template-columns: repeat(3, 1fr); } }
.m-sazba { background: var(--m-plocha); padding: 1.6rem 1.5rem; }
.m-sazba b {
  display: block; font-family: var(--m-cedule); font-weight: 700;
  font-size: clamp(2.1rem, 1.6rem + 1.9vw, 2.9rem); line-height: 1;
  color: var(--m-grafit);
}
.m-sazba b small { font-size: .42em; letter-spacing: .04em; color: var(--m-tlum); }
.m-sazba h3 { margin-top: .7rem; font-size: 1.0625rem; letter-spacing: .06em; }
.m-sazba p { margin-top: .35rem; font-size: .9375rem; color: var(--m-tlum); }
.m-sazba--zvyraznena { background: var(--m-oranz); }
.m-sazba--zvyraznena b, .m-sazba--zvyraznena h3 { color: #1d1204; }
.m-sazba--zvyraznena b small, .m-sazba--zvyraznena p { color: #3d2705; }
.m-pozn { margin-top: 1.3rem; max-width: 62ch; font-size: .875rem; color: var(--m-tlum); }

/* ==========================================================================
   Jak to chodí
   Tři kroky s velkým číslem. Bez spojnice a bez šipek — u zakázky
   na dvě hodiny by osa s milníky vypadala jako projekt.
   ========================================================================== */
.m-kroky { display: grid; gap: 1.8rem; }
@media (min-width: 52rem) { .m-kroky { grid-template-columns: repeat(3, 1fr); gap: 2.4rem; } }
.m-krok { border-top: 2px solid var(--m-grafit); padding-top: 1.1rem; }
.m-krok b {
  display: block; font-family: var(--m-cedule); font-weight: 700;
  font-size: 2.6rem; line-height: 1; color: var(--m-oranz);
}
.m-krok h3 { margin-top: .5rem; font-size: 1.1875rem; letter-spacing: .04em; }
.m-krok p { margin-top: .5rem; font-size: .9688rem; color: var(--m-tlum); }

/* ==========================================================================
   Kdo k vám přijede
   Fotka a vedle ní sliby. Tahle sekce je na téhle stránce to, čím je
   u Nováka ceník: důvod, proč člověk zavolá.
   ========================================================================== */
.m-clovek { display: grid; gap: 2.2rem; align-items: start; }
@media (min-width: 56rem) {
  .m-clovek { grid-template-columns: .82fr 1.18fr; gap: 3rem; }
  /* Obrácený poměr tam, kde vlevo stojí text a vpravo fotka. */
  .m-clovek--obraceny { grid-template-columns: 1.18fr .82fr; }
}
.m-clovek-foto { position: relative; }
.m-clovek-foto img { width: 100%; }
.m-clovek-jmeno {
  position: absolute; left: 0; bottom: 0;
  padding: .75rem 1.2rem; background: var(--m-grafit); color: var(--m-papir);
  font-family: var(--m-cedule); font-weight: 700; text-transform: uppercase;
  font-size: 1.1875rem; letter-spacing: .04em;
}
.m-clovek-jmeno small {
  display: block; font-size: .6875rem; letter-spacing: .12em;
  font-weight: 700; color: var(--m-oranz);
}
.m-rec { font-size: 1.0625rem; }
.m-rec + .m-rec { margin-top: .9rem; }

.m-sliby { margin: 2rem 0 0; padding: 0; list-style: none; display: grid; gap: 0; }
.m-sliby li {
  display: grid; grid-template-columns: auto 1fr; gap: .85rem; align-items: start;
  padding-block: .8rem; border-top: 1px solid var(--m-linka);
  font-size: .9688rem;
}
.m-sliby .m-dum { margin-top: .35em; }

/* ==========================================================================
   Kam jezdím
   Obce jako verzálkový výčet, ne mapa. Vodařina i Novák mají na tomhle
   místě mapu; třetí mapa v řadě by prozradila, že je to jedna ruka.
   ========================================================================== */
.m-obce { display: flex; flex-wrap: wrap; gap: .5rem .75rem; margin-top: 1.6rem; }
.m-obce li { list-style: none; }
.m-obce span {
  display: block; padding: .4rem .85rem;
  border: 2px solid var(--m-linka);
  font-family: var(--m-cedule); font-size: 1.0625rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--m-grafit);
}
.m-obce li:first-child span { border-color: var(--m-grafit); background: var(--m-grafit); color: var(--m-papir); }

/* ==========================================================================
   Dotazy
   ========================================================================== */
/* Dva sloupce od 52rem. Každý sloupec je samostatná kupka otázek, takže
   rozkliknutá odpověď posouvá jen svůj sloupec. */
.m-faq-mrizka { display: grid; }
@media (min-width: 52rem) { .m-faq-mrizka { grid-template-columns: 1fr 1fr; column-gap: 3.5rem; } }
.m-faq { border-bottom: 2px solid var(--m-grafit); }
/* Pod sebou by se spodní linka prvního sloupce potkala s horní linkou
   první otázky druhého — 4px místo 2px. Zavírá se proto až ten poslední. */
@media (max-width: 51.99rem) { .m-faq:not(:last-child) { border-bottom: 0; } }
.m-otazka { border-top: 2px solid var(--m-grafit); }
.m-otazka summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.15rem 0; cursor: pointer; list-style: none;
  font-family: var(--m-cedule); font-size: 1.25rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; color: var(--m-grafit);
}
.m-otazka summary::-webkit-details-marker { display: none; }
.m-otazka summary:hover { color: var(--m-oranz-text); }
.m-znak { position: relative; flex: none; width: 1.25rem; height: 1.25rem; }
.m-znak::before, .m-znak::after {
  content: ""; position: absolute; top: 50%; left: 0;
  width: 100%; height: 2px; margin-top: -1px;
  background: var(--m-oranz); transition: transform .32s cubic-bezier(.32,.72,0,1);
}
.m-znak::after { transform: rotate(90deg); }
.m-otazka[open] .m-znak::after { transform: rotate(0); }
/* Zavírání drží atribut open až do konce animace (viz ukazka-elmont.js),
   znaménko se proto řídí třídou — jinak by se překlopilo se zpožděním
   a klik by vypadal jako by nezabral. Stejná specificita jako pravidlo
   nad ním, takže rozhoduje pořadí. */
.m-otazka.se-zavira .m-znak::after { transform: rotate(90deg); }
.m-otazka-telo { padding: 0 0 1.3rem; max-width: 62ch; font-size: .9688rem; color: var(--m-tlum); }

/* ==========================================================================
   Kontakt
   Jediný tmavý pruh na stránce kromě pásu s fakty. Tím, že je jediný,
   se z něj stane konec — a konec je místo, kde se volá.
   ========================================================================== */
.m-kontakt { background: var(--m-grafit); color: #c9c2b6; }
.m-kontakt h2 { color: var(--m-papir); }
.m-kontakt-in { display: grid; gap: 2.4rem; }
@media (min-width: 56rem) { .m-kontakt-in { grid-template-columns: 1.1fr .9fr; gap: 3.5rem; } }
.m-kontakt .m-cast::after { background: var(--m-oranz); }
.m-kontakt .m-cast span { color: var(--m-papir); }
.m-kontakt .m-cast i { color: var(--m-oranz); }
.m-kontakt-lead { margin-top: 1rem; font-size: 1.0625rem; }
.m-kontakt-akce { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: .8rem; }
.m-kontakt .m-btn--obrys { border-color: #6d7880; color: var(--m-papir); }
.m-kontakt .m-btn--obrys:hover { background: var(--m-papir); color: var(--m-grafit); border-color: var(--m-papir); }

.m-udaje { margin: 0; display: grid; gap: 0; }
.m-udaje > div { padding-block: .9rem; border-top: 1px solid #47535b; }
.m-udaje > div:first-child { border-top: 0; }
.m-udaje dt {
  font-family: var(--m-cedule); font-size: .8125rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #a9a094;
}
.m-udaje dd {
  margin: .2rem 0 0; font-family: var(--m-cedule); font-size: 1.375rem;
  font-weight: 700; color: var(--m-papir);
}
.m-kontakt-pozn { margin-top: 1.8rem; font-size: .8125rem; color: #a9a094; }
.m-kontakt-logo { margin-bottom: 1.6rem; }
.m-kontakt-logo img { height: 58px; width: auto; }