/* ==========================================================================
   sections.css: vzhled jednotlivých sekcí webu Ing. Petr Škola
   Výchozí rozvržení „editorial“. Varianty rozvržení (data-layout) přebíjí
   soubor variants.css, který se načítá až za tímto, proto tady nikde
   nepoužívám !important a držím nízkou specificitu.

   Pravidla, která tenhle soubor dodržuje:
   • žádná barva natvrdo, jen tokeny z base.css a color-mix()
     (jediná výjimka: tmavý gradient pod textem ležícím na fotce v hero)
   • rámečky vždy přes var(--border-w), stíny vždy přes var(--shadow-*)
   • všechno funguje i při --radius: 0 a --shadow-alpha: 0
   • animuje se výhradně transform a opacity (jedinou výjimkou je rozbalování
     FAQ přes grid-template-rows, které přímo předepisuje kontrakt §7)

   OBSAH
     00  Společné prvky sekcí (.sec-head, poznámky, doplňkový odkaz)
     01  Hero
     02  Statistiky
     03  Proč já
     04  Služby
     05  Jak to probíhá (kroky v kartách + lepivé počítadlo)
     06  Nabídky
     07  O mně
     08  Recenze
     09  Časté otázky
     10  Kontakt a formulář
   ========================================================================== */


/* ==========================================================================
   00  SPOLEČNÉ PRVKY SEKCÍ
   ========================================================================== */

/* Hlavička sekce: výchozí zarovnání vlevo, úzký sloupec kvůli čitelnosti. */
.sec-head {
  max-width: 52ch;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.sec-head .kicker {
  margin-bottom: 18px;
}

.sec-head .display,
.sec-head h2 {
  margin: 0;
  text-wrap: balance;
}

.sec-head__sub {
  max-width: 52ch;
  margin-top: 18px;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-mute);
}

/* Sevřená hlavička: nadpis stojí těsněji nad obsahem sekce. */
.sec-head--tight {
  margin-bottom: clamp(24px, 3vw, 36px);
}

.sec-head--tight .sec-head__sub { margin-top: 12px; }

/* Pořadové číslo sekce. V editorialu je to tichý údaj nad kickerem,
   rozvržení „swiss“ a „magazin“ si ho ve variants.css zvětší. */
.sec-head__num {
  display: block;
  margin-bottom: 10px;
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .12em;
  color: var(--text-mute);
}

/* Centrovaná varianta: používá se maximálně u recenzí a FAQ. */
.sec-head--center {
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
}

.sec-head--center .kicker {
  justify-content: center;
}

.sec-head--center .sec-head__sub {
  margin-inline: auto;
}

/* --- 00.1 Nadpis sekce, na kterou se právě skočilo ------------------------
   Na mobilu kotva dosedá na horní hranu sekce (layout.css, oddíl 1) a nad
   stránkou zůstává viset jen plovoucí burger v pravém horním rohu. Nadpis
   sekce, na kterou se skočilo, tak může skončit pod tlačítkem.

   Rezerva je jen jeden pixel vysoká, takže se dotkne výhradně PRVNÍHO
   řádku nadpisu, dál do textu nesahá. Další řádky už leží pod dolní hranou
   burgeru, ty ohrožené nejsou. Dlouhý první řádek se o rezervu zalomí dřív
   a zbytek se přesune na další řádek; krátký nadpis do ní vůbec nedosáhne,
   takže na něm není nic poznat.

   Platí jen pro :target, tedy pro tu jedinou sekci, na kterou se právě
   skočilo. Ostatní nadpisy se lámou jako dřív. */

@media (max-width: 1080px) {
  .js .section:target .sec-head > :is(h2, .display)::before {
    content: "";
    float: right;
    /* Šířka tlačítka (46px) a mezera, ať se text o burger neotře. */
    width: 58px;
    height: 1px;
  }

  /* Centrovaný nadpis by se s rezervou vpravo přestal krýt s osou sekce.
     Místo plovoucí rezervy si proto zúží řádek z obou stran stejně: text
     zůstane na ose a k tlačítku se stejně nedostane. */
  .js .section:target .sec-head--center > :is(h2, .display)::before {
    display: none;
  }

  .js .section:target .sec-head--center > :is(h2, .display) {
    padding-inline: 58px;
  }
}

/* Hlavička sekce na tmavém pásu */
:where(.section--band, .section--band2) .sec-head__sub,
:where(.section--band, .section--band2) .sec-head__num {
  color: var(--on-band-mute);
}

/* Drobná poznámka pod obsahem sekce (upozornění na ukázková data). */
:where(.section--band, .section--band2) .note {
  color: var(--on-band-mute);
}

/* Terciární akce: textový odkaz se šipkou (např. „Zobrazit vše“). */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  transition: gap var(--t-fast) var(--e-soft), opacity var(--t-fast) var(--e-soft);
}

.link-more svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.link-more:hover,
.link-more:focus-visible {
  gap: 14px;
}

:where(.section--band, .section--band2) .link-more {
  color: var(--on-band);
}

/* Viditelný focus na tmavém pásu: outline v akcentu pro tmavé plochy. */
:where(.section--band, .section--band2) a:focus-visible,
:where(.section--band, .section--band2) button:focus-visible,
:where(.section--band, .section--band2) input:focus-visible,
:where(.section--band, .section--band2) select:focus-visible,
:where(.section--band, .section--band2) textarea:focus-visible {
  outline: 2px solid var(--accent-band);
  outline-offset: 2px;
}


/* ==========================================================================
   01  HERO
   Světlá „papírová“ karta přes celou šířku obsahu. Text stojí vlevo,
   portrét ji vpravo přerůstá nahoře i dole. Hloubku nedělá tmavá plocha,
   ale dvě vrstvy nad sebou: modrý přeliv uvnitř karty a barevný panel
   posunutý za portrétem.
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  padding-block: 0;

  /* Vnější odsazení karty se musí počítat DOVNITŘ hera. Bez toho prosákne
     ven (kolabující margin: .hero ani .wrap nemají nahoře padding, který by
     ho zadržel) a .hero pak začíná až pod ním. Kotva #hero z loga
     v hlavičce tím dosedala o ten margin níž a stránka po kliku i po
     refreshi zůstala odscrollovaná: na desktopu o 91 px, na mobilu o 17.
     Navíc byl ten pruh vidět: přeliv hera pod hlavičkou nezačínal, protože
     tam ještě nebylo hero, ale holé --bg. */
  display: flow-root;

  /* A protože je hero první obrazovka, ne sekce uprostřed stránky, nemá na
     ni kotva dosedat pod lepivou hlavičku jako všude jinde, ale úplně
     nahoru. scroll-margin přebije scroll-padding-top z <html> do záporu
     a prohlížeč cíl ořízne na začátek dokumentu. */
  scroll-margin-top: var(--header-h);

  /* Zaoblení rámu portrétu a přesah panelu za ním. Rám má menší poloměr
     než karta, jinak by vnitřní roh působil větší než vnější. */
  --hero-frame-r: var(--r-sm);
  --hero-peek: clamp(12px, 1.8vw, 22px);

  /* Světlý přeliv hned pod černou hlavičkou, na ploché --bg by hlavička
     dosedla natvrdo. Dole přechod končí v --bg, takže na sekci „S čím vám
     mohu pomoci“ navazuje pozadí beze švu. */
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--accent-soft) 42%, var(--bg)),
    var(--bg) 66%
  );

  /* fotka vpravo přetéká za mřížku až k okraji okna, clip místo hidden,
     aby nevznikl vodorovný scroll ani nový scroll kontejner */
  overflow-x: clip;
}

/* Fotka na pozadí: používá ji až rozvržení „cinema“. */
.hero__bg {
  display: none;
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}

/* Záře za portrétem. Ve výchozím rozvržení není vidět (typický znak
   generované šablony). Zapíná ji jen variants.css u rozvržení „cinema“. */
.hero__glow {
  position: absolute;
  z-index: -1;
  inset-block-start: -10%;
  inset-inline-end: -10%;
  width: min(620px, 60vw);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle,
    color-mix(in oklab, var(--accent) 26%, transparent),
    transparent 70%
  );
}

/* Hero je JEDNA světlá karta přes celou šířku obsahu. Uvnitř leží text,
   portrét se do ní vkládá dvěma způsoby a jinak nic:

     desktop … fotka je mimo tok, drží se pravého okraje karty a je vyšší
               než ona, takže ji nahoře i dole přerůstá,
     mobil   … fotka spadne zpátky do toku jako pruh přes celou šířku
               karty, hned pod tlačítka.

   Proto tu není dvousloupcová mřížka: jeden sloupec zvládne obojí a mezi
   rozvrženími se nepřehazuje pořadí prvků. */
.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-block: clamp(16px, 3vw, 28px) clamp(40px, 6vw, 72px);
  padding: clamp(25px, 4vw, 50px);
  border: var(--border-w) solid color-mix(in oklab, var(--accent) 14%, transparent);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-md);
}

/* Přeliv uvnitř karty. Nejsytější je vpravo nahoře, kde stojí portrét,
   text vlevo tak zůstává na skoro bílé ploše a drží kontrast. Kreslí ho
   pseudoprvek, ne pozadí karty: karta sama nesmí ořezávat podle zaoblení,
   protože z ní portrét schválně leze ven. */
.hero__grid::before {
  content: "";
  position: absolute;
  z-index: 0;
  /* přes rámeček ven, aby přeliv sahal až k jeho vnější hraně */
  inset: calc(-1 * var(--border-w));
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(115% 95% at 100% 0%,
      color-mix(in oklab, var(--accent-soft) 78%, transparent), transparent 62%),
    radial-gradient(85% 78% at 3% 106%,
      color-mix(in oklab, var(--accent) 9%, transparent), transparent 62%);
}

.hero__text {
  position: relative;
  z-index: 1;
  max-width: none;
  color: var(--text);
}

/* Řádek nad nadpisem: kdo mluví. Drobné verzálky v akcentové modré a nic
   víc. Linka, která tu řádek zprvu uvozovala, je pryč a nemá se vracet:
   byla to ozdoba ze šablony, přesně to, čemu se web celou dobu vyhýbá.
   Sám text tu zůstává, ten je z klientova zadání. */
.hero__eyebrow {
  margin: 0 0 clamp(14px, 2vw, 20px);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Nadpis: první věc, kterou má návštěvník vidět, proto je o stupeň větší
   a sevřenější než ostatní nadpisy webu. Řádkuje se po řádcích, každý má
   vlastní masku pro reveal z app.js. Odsazení shora nemá, mezeru pod sebou
   si drží řádek nad ním. */
.hero__title {
  margin: 0;
  max-width: 15ch;
  color: var(--text);
  /* Spodní mez drží telefon: při 2.7rem se nadpis lámal na čtyři řádky
     a odsunul portrét pod ohyb. Od 573 px výš už rozhoduje 6vw, takže
     tablet ani desktop se nezmenšily. */
  font-size: clamp(2.15rem, 6vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -.048em;
  text-wrap: balance;
}

.hero__title .line {
  display: block;
  overflow: hidden;
}

.hero__title .line > span {
  display: block;
}

/* Druhý řádek nadpisu nese slib, proto ho odliší barva. Akcent na něj
   zbyl potom, co ze sekcí zmizely kickery. Kurzíva tu být nesmí: Poppins
   se načítá bez kurzivního řezu, takže by ji prohlížeč jen zkosil
   a nadpis by vypadal lacině. */
.hero__title .accent {
  color: var(--accent);
  font-style: normal;
}

/* Odstavec pod nadpisem. Na telefonu jde o stupeň dolů ze stejného důvodu
   jako nadpis: v 1.16rem zabral sedm řádků a odsunul portrét pod ohyb. */
.hero__lead {
  max-width: 46ch;
  margin-top: clamp(16px, 3vw, 26px);
  font-size: clamp(1rem, 3vw, 1.16rem);
  line-height: 1.7;
  color: var(--text-mute);
}

/* Akce: jedno plné tlačítko a vedle něj textový odkaz. Dvě stejně těžká
   tlačítka vedle sebe si konkurují a oko pak neví, kam dřív. */
.hero__act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-top: clamp(24px, 4vw, 32px);
}

/* Tlačítka si na světlé kartě vystačí se základním provedením z base.css:
   plné modré CTA a vedle něj světlá bublina. Přebarvovat je tu netřeba;
   dřív to bylo kvůli černé kartě, na které by tmavě modré CTA zmizelo. */

.hero__more {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-block: 4px;
  font-size: .98rem;
  font-weight: 500;
  color: var(--text);
  border-block-end: var(--border-w) solid var(--line-strong);
  transition: gap var(--t-fast) var(--e-soft),
              color var(--t-hover) var(--e-soft),
              border-color var(--t-hover) var(--e-soft);
}

.hero__more svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.hero__more:hover,
.hero__more:focus-visible {
  gap: 14px;
  color: var(--accent);
  border-block-end-color: var(--accent);
}

/* Telefon jako druhá úroveň pod tlačítky. */
.hero__tel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-top: 22px;
}

.hero__tel-lbl {
  font-size: .85rem;
  color: var(--text-mute);
}

.hero__tel-num {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 1.42rem;
  letter-spacing: -.01em;
  color: var(--text);
  text-decoration: none;
  transition: opacity var(--t-fast) var(--e-soft);
}

.hero__tel-num:hover {
  opacity: .7;
}

.hero__micro {
  margin-top: 10px;
  font-size: .84rem;
  color: var(--text-mute);
}

/* Odznaky: až pod vlasovou linkou, ne jako pilulky vedle tlačítek. */
.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  margin: 38px 0 0;
  padding-top: 30px;
  padding-inline-start: 0;
  list-style: none;
  border-top: var(--border-w) solid var(--line);
}

.hero__badges .badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  color: var(--text-mute);
}

.hero__badges .badge svg {
  color: var(--accent);
  width: 16px;
  height: 16px;
  flex: none;
  stroke-width: 1.5;
  color: var(--text);
}

/* Portrét. Ve výchozím (užším) stavu leží uvnitř karty pod tlačítky jako
   široký pruh, ne portrét na výšku vedle textu. Na malém displeji je to
   jediné rozvržení, které dává smysl: fotka na výšku by na sebe vzala
   celou obrazovku a nadpis by se dostal pod ohyb. */
.hero__media {
  position: relative;
  margin: clamp(22px, 5vw, 46px) 0 0;
}

/* Barevný panel za portrétem: tentýž tvar posunutý o --hero-peek doprava
   a dolů. Vykoukne zpod fotky jako pruh, dá jí podklad na skoro bílé kartě
   a nahradí stín, který by tu působil jako z šablony. Panel je ::before,
   tedy dřív v pořadí než .hero__photo, takže leží pod ním sám od sebe
   a nepotřebuje z-index. */
.hero__media::before {
  content: "";
  position: absolute;
  inset: var(--hero-peek) calc(-1 * var(--hero-peek))
         calc(-1 * var(--hero-peek)) var(--hero-peek);
  border-radius: var(--hero-frame-r);
  background: color-mix(in oklab, var(--accent-soft) 74%, var(--surface));
}

.hero__photo {
  position: relative;
  overflow: hidden;
  height: clamp(300px, 52vw, 470px);
  border-radius: var(--hero-frame-r);
  background: var(--bg-2);
}

.hero__photo img {
  width: 100%;
  /* O kus vyšší, než je rám. Ta rezerva je zásoba pro parallax: ten fotku
     zvedá až o 40 px a bez ní by se pod ní odkryl podklad rámu.
     Zarovnání k horní hraně (níž) drží ořez v klidu na stejném místě. */
  height: calc(100% + 44px);
  object-fit: cover;
  /* Zarovnat k HORNÍ hraně. Petr má na fotce hlavu hned pod okrajem,
     takže jakýkoli ořez shora mu ji usekne. Přebytek se ořízne zdola,
     kde je jen sako. */
  object-position: 50% 0;
  display: block;
}

/* Popiska přes spodek fotky tu byla, ale její tmavý pruh ležel v .hero__media,
   ne uvnitř zaobleného .hero__photo, spodní rohy portrétu tím zůstávaly
   hranaté. Popiska je pryč (jméno i role stojí hned vedle v textu hera)
   a s ní i ten pravoúhlý pruh. */

/* Telefon: fotka a text přes sebe, ne pod sebou.

   Ve výchozím toku stál portrét až POD textem: řádek nad nadpisem, nadpis,
   odstavec a dvě tlačítka zabraly na 390 px celou první obrazovku a Petr
   se ukázal až po odscrollování. Klient chtěl obojí najednou, „hezky přes
   sebe nebo prolnout“.

   Řešení: portrét jde v kartě první (order: -1) a leží přes celou její
   šířku bez rámu, text se vysune o --hero-blend nahoru přes jeho spodek
   a nese vlastní přechod z průhledné do barvy karty. Hlava je nahoře
   fotky, přes sako už jde text; tam, kde začíná nadpis, je podklad
   plný, takže kontrast nezávisí na tom, jak tmavé je sako.

   Karta proto na telefonu nemá vlastní odsazení (nese si ho text) a musí
   ořezávat podle zaoblení, jinak by hranatá fotka trčela z oblých rohů.
   Přeliv karty (::before) i barevný panel za portrétem se schovají:
   první by pod fotkou nebyl vidět a text má podklad vlastní, druhý nemá
   odkud vykouknout, když fotka sahá k okraji karty. */
@media (max-width: 619.98px) {
  .hero__grid {
    --hero-blend: 150px;
    --hero-pad: 24px;

    padding: 0;
    overflow: hidden;
    /* Mezera pod kartou: menší než jinde, sekce za ní si odsazení nese
       sama (viz .help-sec níž). Dřív 40 px + 42 px sekce = víc než dost
       prázdna mezi fotkou a „S čím vám mohu pomoci“. */
    margin-block: 12px 24px;
  }

  .hero__grid::before,
  .hero__media::before {
    display: none;
  }

  .hero__media {
    order: -1;
    margin: 0;
  }

  .hero__photo {
    /* Výška podle šířky, ať ořez na různých telefonech sedí stejně:
       zhruba tři čtvrtiny portrétu, hlava i ramena čisté, sako pod
       přechodem. Strop kvůli tabletům na výšku, které sem taky spadnou. */
    height: min(108vw, 480px);
    border-radius: 0;
    background: var(--surface);
  }

  .hero__text {
    margin-top: calc(-1 * var(--hero-blend));
    padding: var(--hero-blend) var(--hero-pad) 28px;
    background: linear-gradient(
      180deg,
      transparent 0,
      color-mix(in oklab, var(--surface) 55%, transparent) 45px,
      var(--surface) calc(var(--hero-blend) - 20px)
    );
  }

}

/* Na tabletu je karta o dost širší, takže musí růst i výška pruhu. Ořez
   „cover“ totiž zvětšuje s poměrem stran: nízký pruh přes celou šířku karty
   by z portrétu udělal obří detail obličeje. */
@media (min-width: 620px) and (max-width: 1139.98px) {
  .hero__photo {
    height: clamp(420px, 62vw, 620px);
  }
}

@media (min-width: 1140px) {
  /* Vedle karty stojí portrét jako samostatný blok, ne jako vsazený pruh:
     unese proto stejné zaoblení jako ona. */
  .hero { --hero-frame-r: var(--radius); }

  .hero__grid {
    /* O kolik portrét kartu přerůstá nahoře a o kolik dole. Vnější odsazení
       karty musí zůstat větší, jinak fotka zajede pod hlavičku, respektive
       do sekce za hero. Karta si zároveň drží spodní hranu výšky, aby bylo
       co přerůstat i u krátkého textu. */
    --hero-overhang: 50px;

    align-content: center;
    min-height: 550px;
    padding: clamp(44px, 4.4vw, 60px);
    margin-block: clamp(72px, 7vw, 96px) clamp(88px, 8vw, 120px);
  }

  /* Vpravo zůstává prázdné pole. Fotka na kartě leží, takže text musí
     skončit dřív, jinak by se sazba schovala pod portrét. */
  .hero__text {
    max-width: min(52%, 560px);
  }

  /* V kartě má nadpis užší sloupec než přes celou stránku, takže o stupeň
     menší stupeň písma. Tři řádky drží kartu nižší než portrét. */
  .hero__title {
    font-size: clamp(2.5rem, 4.2vw, 3.9rem);
    max-width: 13ch;
  }

  /* Portrét mimo tok, u pravého okraje karty. Rám je záměrně vyšší než karta
     (přesně o --hero-overhang nahoře i dole) a fotka ho vyplní. Přesah se
     tak nepočítá z okna ani z centrování, ale přímo z karty: zůstává stejný,
     ať je karta jakkoli vysoká. (Centrovat fotku přes transform nejde: ten
     si na .hero__media bere reveal z app.js a přepsal by ho.) */
  .hero__media {
    position: absolute;
    z-index: 2;
    inset-block: calc(-1 * var(--hero-overhang));
    inset-inline-end: clamp(44px, 4.4vw, 60px);
    width: clamp(380px, 34vw, 560px);
    margin: 0;
  }

  .hero__photo {
    height: 100%;
  }
}


/* ==========================================================================
   03  PROČ JÁ
   Čtyři karty. Místo ikony v zaobleném čtverci je nahoře řádek
   s pořadovým číslem a ikonou, oddělený vlasovou linkou.
   ========================================================================== */

.why {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: why;
}

.why__item {
  counter-increment: why;
  display: flex;
  flex-direction: column;
  padding: 32px 28px 34px;
  background: var(--surface);
  border: var(--border-w) solid var(--line);
  border-radius: var(--r-sm);
  transition: transform var(--t-fast) var(--e-soft),
              box-shadow var(--t-fast) var(--e-soft);
}

/* Nahoře pořadové číslo, pod ním holá ikona a teprve pak vlasová linka
   oddělující nadpis, místo ikony v zaobleném čtverci. */
.why__item::before {
  content: counter(why, decimal-leading-zero);
  order: -2;
  margin-bottom: 18px;
  font-size: .75rem;
  letter-spacing: .12em;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}

.why__item .card__ico {
  order: -1;
  width: 28px;
  height: 28px;
  margin-bottom: 22px;
  color: var(--text);
  stroke-width: 1.5;
}

.why__item .card__ico svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.5;
}

.why__item h3 {
  margin: 0 0 12px;
  padding-top: 22px;
  border-top: var(--border-w) solid var(--line);
  font-size: 1.2rem;
  line-height: 1.35;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.why__item p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--text-mute);
}

.why__item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 560px) {
  .why { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) {
  .why { grid-template-columns: repeat(4, 1fr); }
}


/* ==========================================================================
   03b  S ČÍM VÁM MOHU POMOCI
   Tři karty hned pod hero. Jsou stavěné ze stejných dílů jako karta hera:
   skoro bílá plocha, modrý přeliv od pravého horního rohu, jemný rámeček
   v akcentu, stejné zaoblení a stín. Text drží dvojici černá + modrá:
   nadpis v barvě textu, ikona i tlačítko v akcentu. Každá karta je celá
   klikací, plné tlačítko dole je jen viditelná část toho překryvu.
   ========================================================================== */

/* Na telefonu se sekce tiskne blíž k heru: karta hera má pod sebou jen
   24 px a tady zbývá polovina běžného odsazení sekce. Dohromady zhruba
   45 px místo 82, které tu byly a které klient vnímal jako „dost dlouhá
   mezera mezi fotkou a Prodej nemovitosti“. */
@media (max-width: 619.98px) {
  .help-sec {
    padding-top: calc(var(--section-y) * .5);
  }
}

.help {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.help__item {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3vw, 40px) clamp(24px, 2.6vw, 34px);
  background: var(--surface);
  border: var(--border-w) solid color-mix(in oklab, var(--accent) 14%, transparent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  transition: transform var(--t-fast) var(--e-soft),
              border-color var(--t-hover) var(--e-soft),
              box-shadow var(--t-fast) var(--e-soft);
}

/* Přeliv jako uvnitř karty hera: nejsytější v pravém horním rohu, dole
   vlevo jen náznak. Kreslí ho pseudoprvek přes rámeček ven, obsah karty
   pak leží nad ním (z-index 1 u potomků). */
.help__item::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: calc(-1 * var(--border-w));
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(115% 95% at 100% 0%,
      color-mix(in oklab, var(--accent-soft) 78%, transparent), transparent 62%),
    radial-gradient(85% 78% at 3% 106%,
      color-mix(in oklab, var(--accent) 9%, transparent), transparent 62%);
}

/* Obsah nad přeliv. Bez position: relative schválně, jde o položky flexu
   a těm z-index funguje i tak. Kdyby tlačítko bylo relative, jeho překryv
   ::after by se počítal k němu, ne ke kartě, a klikací by zůstalo jen ono. */
.help__item > * {
  z-index: 1;
}

.help__item:hover,
.help__item:focus-within {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--accent) 30%, transparent);
  box-shadow: var(--shadow-lg);
}

/* Ikona v plné modré, ne ve světlé bublině. Na přelivu by světlý čtverec
   splynul s pozadím karty a ikona by se ztratila. */
.help__item .card__ico {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 24px;
  color: var(--on-accent);
  background: linear-gradient(148deg, var(--accent), var(--accent-hover));
  border-radius: var(--r-sm);
  box-shadow: 0 8px 18px color-mix(in oklab, var(--accent) 24%, transparent);
}

.help__item .card__ico svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.5;
}

.help__h {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 1.28rem;
  line-height: 1.3;
  letter-spacing: -.018em;
  color: var(--text);
  text-wrap: balance;
}

.help__p {
  margin: 0 0 clamp(22px, 2.6vw, 30px);
  font-size: .95rem;
  line-height: 1.7;
  color: var(--text-mute);
}

/* Tlačítko drží patu karty a je stavěné jako .btn z base.css, jen o něco
   nižší. Překryv ::after z něj dělá klikací celou kartu. */
.help__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  align-self: flex-start;
  margin-top: auto;

  min-height: 50px;
  padding: 14px 26px;

  font-size: .95rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: var(--r-sm);

  transition: gap var(--t-hover) var(--e-soft),
              background-color var(--t-hover) var(--e-soft);
}

.help__cta svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.help__cta::after {
  content: "";
  position: absolute;
  inset: 0;
}

.help__item:hover .help__cta,
.help__item:focus-within .help__cta {
  gap: 15px;
  background: var(--accent-hover);
}

@media (min-width: 640px) {
  .help { grid-template-columns: repeat(3, 1fr); }
}


/* ==========================================================================
   04  SLUŽBY
   Šest karet ze stejného papíru jako karta hera, karty „S čím vám mohu
   pomoci“ a kroky procesu: světlá plocha, modrý přeliv od pravého horního
   rohu, jemný rámeček v akcentu, stejné zaoblení a stín.

   Od karty pomoci se liší velikostí a dlaždicí ikony: tady je ve světlé
   modré jako číslo neaktivního kroku, tam v plné. Tři díly téhož jazyka
   ve třech vahách: pomoc 58 px v plné modré, krok 56 px ve světlé,
   služba 46 px ve světlé.

   Dřív to byla jediná karta na stránce stavěná jinak (vlasový rámeček,
   ikona v barvě textu a spodní linka, která vyjela při hoveru). Ta linka
   je pryč: je to trik z šablon a s brandem webu nemá nic společného.
   ========================================================================== */

.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.service {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 2.8vw, 34px) clamp(22px, 2.4vw, 30px);
  background: var(--surface);
  border: var(--border-w) solid color-mix(in oklab, var(--accent) 14%, transparent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  transition: transform var(--t-fast) var(--e-soft),
              border-color var(--t-hover) var(--e-soft),
              box-shadow var(--t-fast) var(--e-soft);
}

/* Přeliv jako v .help__item a .step: nejsytější v pravém horním rohu, dole
   vlevo jen náznak. Kreslí ho pseudoprvek přes rámeček ven, obsah karty
   pak leží nad ním (z-index 1 u potomků). Rozvržení, která kartu rozpustí
   na holý řádek, ho musí zhasnout, viz variants.css. */
.service::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: calc(-1 * var(--border-w));
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(115% 95% at 100% 0%,
      color-mix(in oklab, var(--accent-soft) 78%, transparent), transparent 62%),
    radial-gradient(85% 78% at 3% 106%,
      color-mix(in oklab, var(--accent) 9%, transparent), transparent 62%);
}

/* Obsah nad přeliv. Bez position: relative schválně, stejně jako
   u .help__item: kdyby byl odkaz relative, jeho překryv ::after by se
   počítal k němu, ne ke kartě. */
.service > * {
  z-index: 1;
}

.service:hover,
.service:focus-within {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--accent) 30%, transparent);
  box-shadow: var(--shadow-lg);
}

.service .card__ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 20px;
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  border-radius: var(--r-sm);
}

.service .card__ico svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.5;
}

.service h3 {
  margin: 0 0 10px;
  font-size: 1.14rem;
  line-height: 1.35;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.service p {
  margin: 0;
  font-size: .93rem;
  line-height: 1.7;
  color: var(--text-mute);
}

/* Věta pod výčtem (zázemí kanceláře). Není to karta ani nadpis, jen doběh
   sekce, proto stojí na .note z base.css (a s ním i na tom, že prázdná
   hodnota řádek schová). Písmo si ale zvětšuje: .note je jinde drobné
   upozornění na ukázková data, tohle je věta, kterou má někdo přečíst. */
.services__note {
  max-width: 62ch;
  margin: clamp(26px, 3vw, 38px) 0 0;
  font-size: .95rem;
  line-height: 1.7;
}

/* Dlaždice s odkazem (prodej, pronájem). Odkaz se drží dole, ať mají
   karty v řádku zarovnané paty i při různě dlouhém textu. Překryv přes
   ::after dělá klikací celou kartu, odkaz sám zůstává cílem pro čtečky. */
.service__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-size: .92rem;
  font-weight: 500;
  color: var(--accent);
  transition: gap var(--t-hover) var(--e-soft);
}

.service__cta svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.service--link { justify-content: space-between; }
.service--link .service__cta { margin-top: auto; padding-top: 20px; }

.service--link .service__cta::after {
  content: "";
  position: absolute;
  inset: 0;
}

.service--link:hover .service__cta { gap: 14px; }

/* Tři sloupce, ne čtyři: šířka sloupce sedne k mřížce „S čím vám mohu
   pomoci“ i k recenzím. Ve čtyřech by poslední řada zůstala nedopsaná. */
@media (min-width: 520px) and (max-width: 999.98px) {
  .services { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .services { grid-template-columns: repeat(3, 1fr); }
}

/* -- sedmá dlaždice přes celou šířku -------------------------------------
   Dlaždic je podle zadání sedm a ve dvou ani ve třech sloupcích nevyjdou
   do celých řad. Poslední z nich („Jistota silné značky RE/MAX“) přitom
   není služba, ale zázemí, takže se z nedopsané řady dá udělat doběh
   sekce: roztáhne se přes celou mřížku a přeskládá na ikonu vlevo
   a text vedle ní.

   Pravidlo visí na :nth-child(7):last-child, ne na vlastní třídě, protože
   dlaždice vykresluje hydratace z content.js a žádný modifikátor jim
   nedává. Když se počet položek změní na šest nebo osm, mřížka se srovná
   sama a tenhle blok se přestane uplatňovat. */
@media (min-width: 520px) {
  .services > .service:nth-child(7):last-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: clamp(18px, 2.4vw, 26px);
    row-gap: 6px;
  }

  .services > .service:nth-child(7):last-child .card__ico {
    grid-row: 1 / span 2;
    margin-bottom: 0;
  }

  .services > .service:nth-child(7):last-child h3 { margin-bottom: 0; }
  .services > .service:nth-child(7):last-child p  { max-width: 76ch; }
}

/* -- karty služeb na tmavém pásu ----------------------------------------
   Sekce „Služby“ je dnes světlá, tohle je pojistka pro případ, že se
   přesune na tmavý pás: karta tam nemůže mít světlý --surface, místo
   výplně zůstane jen prosvětlené sklo a linka. Přeliv i dlaždice ikony
   se přepočítají z --accent-band, přesně jako u kroků procesu. */

:where(.section--band, .section--band2) .service {
  background: color-mix(in oklab, var(--on-band) 5%, transparent);
  border-color: var(--line-band-2);
  box-shadow: none;
}

:where(.section--band, .section--band2) .service::before {
  background:
    radial-gradient(115% 95% at 100% 0%,
      color-mix(in oklab, var(--accent-band) 14%, transparent), transparent 62%),
    radial-gradient(85% 78% at 3% 106%,
      color-mix(in oklab, var(--accent-band) 7%, transparent), transparent 62%);
}

:where(.section--band, .section--band2) .service:hover,
:where(.section--band, .section--band2) .service:focus-within {
  border-color: var(--line-band-2);
  box-shadow: none;
}

:where(.section--band, .section--band2) .service .card__ico {
  color: var(--accent-band);
  background: color-mix(in oklab, var(--accent-band) 15%, transparent);
}

:where(.section--band, .section--band2) .service h3 { color: var(--on-band); }

:where(.section--band, .section--band2) .service p { color: var(--on-band-mute); }


/* ==========================================================================
   05  JAK TO PROBÍHÁ: časová osa
   Vlevo lepivé počítadlo s ukazatelem průběhu, vpravo kroky.

   Kroky jsou stavěné ze stejných dílů jako karty „S čím vám mohu pomoci“
   a karta hera: světlá plocha, modrý přeliv od pravého horního rohu, jemný
   rámeček v akcentu, stejné zaoblení a stín. Číslo kroku je dlaždice v plné
   modré, přesně jako ikona v kartě pomoci. Obě sekce tak drží jeden jazyk.

   Aktivní krok označuje JS třídou .step--on: dlaždice se rozsvítí do plné
   modré, rámeček zesílí a stín povyroste. Karta se přitom nehýbe, aby
   nastavení „intenzita animací → žádný“ nemuselo nic vypínat.
   ========================================================================== */

.process {
  display: grid;
  gap: clamp(36px, 5vw, 72px);

  /* Díly karty kroku. Tahle sada platí pro tmavý pás, světlá sekce si je
     hned níž přemapuje spolu s rolemi --on-band a spol. Na tmavém nemá
     stín co dělat, plocha se odliší průsvitem textové barvy. */
  --step-plane:     color-mix(in oklab, var(--on-band) 6%, transparent);
  --step-edge:      var(--line-band);
  --step-edge-on:   var(--line-band-2);
  --step-wash:      color-mix(in oklab, var(--accent-band) 14%, transparent);
  --step-wash-2:    color-mix(in oklab, var(--accent-band) 7%, transparent);
  --step-shadow:    none;
  --step-shadow-on: none;
  --step-tile:      color-mix(in oklab, var(--accent-band) 15%, transparent);
  --step-tile-fg:   var(--accent-band);
  --step-tile-on:   var(--accent-band);
  --step-tile-on-fg: var(--band);
  --step-tile-glow: 0 8px 18px color-mix(in oklab, var(--accent-band) 22%, transparent);
}

/* Časová osa se psala pro tmavý pás, proto se celá opírá o role --on-band,
   --line-band a --accent-band. Na světlé sekci se nepřepisují jednotlivá
   pravidla, přemapují se rovnou ty role. Pravidla níž pak zůstávají
   beze změny a fungují na obou podkladech. */
.section:not(.section--band):not(.section--band2) .process {
  --on-band:      var(--text);
  --on-band-mute: var(--text-mute);
  --line-band:    var(--line);
  --line-band-2:  var(--line-strong);
  --accent-band:  var(--accent);
  --band:         var(--surface);

  /* Na světlém je to doslova recept karty „S čím vám mohu pomoci“. */
  --step-plane:     var(--surface);
  --step-edge:      color-mix(in oklab, var(--accent) 14%, transparent);
  --step-edge-on:   color-mix(in oklab, var(--accent) 30%, transparent);
  --step-wash:      color-mix(in oklab, var(--accent-soft) 78%, transparent);
  --step-wash-2:    color-mix(in oklab, var(--accent) 9%, transparent);
  --step-shadow:    var(--shadow-md);
  --step-shadow-on: var(--shadow-lg);
  --step-tile:      color-mix(in oklab, var(--accent) 12%, transparent);
  --step-tile-fg:   var(--accent);
  --step-tile-on:   linear-gradient(148deg, var(--accent), var(--accent-hover));
  --step-tile-on-fg: var(--on-accent);
  --step-tile-glow: 0 8px 18px color-mix(in oklab, var(--accent) 24%, transparent);
}

/* Průběh je druhá polovina sekce „Služby“, od karet ho dělí prostor
   a vlasová linka, ne další nadpis sekce. Sourozenec, ne soused: mezi
   výčtem a průběhem stojí ještě věta o zázemí kanceláře. */
.services ~ .process {
  margin-top: clamp(56px, 7vw, 104px);
  padding-top: clamp(48px, 6vw, 88px);
  border-block-start: var(--border-w) solid var(--line-band);
}

/* -- levý sloupec ------------------------------------------------------- */

.process__aside {
  position: relative;
}

.process__aside .sec-head {
  margin-bottom: 32px;
}

/* Jméno právě čteného kroku. Nese tu váhu ono, ne číslo: čtenáře zajímá,
   u čeho je, ne kolikátý je to v pořadí. Místo pro dva řádky je rezervované
   napevno, nadpisy kroků jsou různě dlouhé a bez rezervy by lepivý sloupec
   při přepnutí poskakoval. */
.process__now {
  margin: 0;
  min-height: 2.7em;
  max-width: 22ch;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  line-height: 1.25;
  letter-spacing: var(--display-track);
  color: var(--on-band);
  text-wrap: balance;
}

/* Pořadí kroku je jen tichý údaj pod jménem. Dřív to bylo obří číslo
   s prostrkanou verzálkou „KROK“ nad sebou; obojí byla ozdoba, kterou
   nikde jinde na webu nemáme (.kicker z base.css stránka nepoužívá ani
   jednou), a sekce s ní vypadala jako ze šablony. */
.process__counter {
  margin: 8px 0 0;
  font-size: .92rem;
  color: var(--on-band-mute);
  font-variant-numeric: tabular-nums;
}

/* Ukazatel průběhu. Výplň se ovládá proměnnou --pb (0–1), kterou nastavuje
   app.js, animuje se tak jen transform, nikoli šířka. */
.process__rail {
  margin-top: 26px;
  height: 3px;
  overflow: hidden;
  border-radius: var(--r-xs);
  background: var(--step-edge);
}

.process__rail i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--accent-band);
  transform: scaleX(var(--pb, 0));
  transform-origin: left;
  transition: transform var(--t) var(--e-out);
}

/* -- kroky -------------------------------------------------------------- */

.process__list {
  display: grid;
  gap: clamp(14px, 1.8vw, 22px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: clamp(16px, 2.2vw, 26px);
  align-items: start;
  padding: clamp(24px, 2.8vw, 34px) clamp(22px, 2.4vw, 32px);
  background: var(--step-plane);
  border: var(--border-w) solid var(--step-edge);
  border-radius: var(--radius);
  box-shadow: var(--step-shadow);
  transition: border-color var(--t) var(--e-soft),
              box-shadow var(--t) var(--e-soft);
}

/* Přeliv jako uvnitř karty hera a karet „S čím vám mohu pomoci“: nejsytější
   v pravém horním rohu, dole vlevo jen náznak. Kreslí ho pseudoprvek přes
   rámeček ven; absolutní pozice ho zároveň vyřadí z mřížky, takže nezabere
   žádné pole. Obsah kroku pak leží nad ním (z-index 1 u potomků). */
.step::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: calc(-1 * var(--border-w));
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(115% 95% at 100% 0%, var(--step-wash), transparent 62%),
    radial-gradient(85% 78% at 3% 106%, var(--step-wash-2), transparent 62%);
}

.step > * {
  z-index: 1;
}

/* Aktivní krok: silnější rámeček a vyšší stín. Karta se nikam neposouvá,
   pohyb obstará jen dlaždice s číslem. */
.step--on,
.step.is-active {
  border-color: var(--step-edge-on);
  box-shadow: var(--step-shadow-on);
}

/* Ztlumení neaktivních kroků jen tehdy, když běží JS, bez JS musí být
   všechny kroky plně čitelné. Ztlumí se schválně jen text uvnitř, ne celá
   karta: rámeček, stín i dlaždice s číslem musí zůstat v plné síle, jinak
   se rozpadne právě to, kvůli čemu tu karta je. */
.step__body {
  transition: opacity var(--t-slow) var(--e-soft);
}

.js .step__body { opacity: .72; }
.js .step--on .step__body,
.js .step.is-active .step__body { opacity: 1; }

/* Dlaždice s číslem je tentýž díl jako ikona v kartě pomoci: čtverec
   se zaoblením --r-sm, v klidu ve světlé modré, po rozsvícení v plné. */
.step__num {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--r-sm);
  background: var(--step-tile);
  color: var(--step-tile-fg);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 1.05rem;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  transition: transform var(--t) var(--e-out),
              color var(--t) var(--e-soft),
              box-shadow var(--t) var(--e-soft);
}

.step--on .step__num,
.step.is-active .step__num {
  color: var(--step-tile-on-fg);
  background: var(--step-tile-on);
  box-shadow: var(--step-tile-glow);
  transform: scale(1.06);
}

.step__body h3 {
  margin: 0 0 12px;
  font-size: 1.2rem;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--on-band);
  text-wrap: balance;
}

.step__body p {
  margin: 0;
  max-width: 62ch;
  color: var(--on-band-mute);
}

/* Doplňková věta pod krokem. Dřív to byl obyčejný text, který splýval
   s odstavcem; teď je to štítek ve světlé modré s fajfkou, aby se dalo
   přeletět očima, co má návštěvník z kroku slíbeno. Fajfka je maska,
   barvu si bere z `color`, takže sedí i na tmavém pásu. */
.step__note {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  padding: 9px 16px;
  font-size: .85rem;
  line-height: 1.4;
  color: var(--step-tile-fg);
  background: var(--step-tile);
  border-radius: var(--r-sm);
}

.step__note::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: var(--ico-check) center / contain no-repeat;
          mask: var(--ico-check) center / contain no-repeat;
}

/* Na úzkém displeji nemá smysl ukrajovat 56 px z řádku, číslo si stoupne
   nad nadpis. */
@media (max-width: 479px) {
  .step {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

@media (min-width: 960px) {
  .process { grid-template-columns: minmax(240px, 340px) 1fr; align-items: start; }
  .process__aside { position: sticky; top: calc(var(--header-h) + 56px); }
}


/* ==========================================================================
   06  NABÍDKY
   Karta: fotka 3/2, štítek stavu, parametry mezi vlasovými linkami,
   cena a pod ní tlačítko na detail.

   Rám karty je stejný jako u „S čím vám mohu pomoci“ (.help__item):
   skoro bílá plocha, modrý přeliv od pravého horního rohu, jemný rámeček
   v akcentu, stejné zaoblení, stín a zdvih při najetí. Obě sekce stojí
   pod sebou, takže musí být z jednoho těsta. Rozdíl je jen v tom, že tady
   je klikací sám odkaz kolem celé karty, ne překryv pod tlačítkem.
   ========================================================================== */

.props {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Odkaz na výpis všech nabídek stojí POD mřížkou, ne nad ní: dává smysl
   až ve chvíli, kdy je co dolistovat. Uprostřed a v obrysu, aby na sebe
   nestrhával pozornost od modrých tlačítek na kartách. */
.props__more {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 3.4vw, 44px);
}

.prop {
  position: relative;
  display: flex;
  background: var(--surface);
  border: var(--border-w) solid color-mix(in oklab, var(--accent) 14%, transparent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: transform var(--t-fast) var(--e-soft),
              border-color var(--t-hover) var(--e-soft),
              box-shadow var(--t-fast) var(--e-soft);
}

/* Přeliv jako v kartě hera a v kartách „S čím vám mohu pomoci“. Fotka je
   neprůhledná, takže je vidět jen v těle karty pod ní, přesně tam, kde
   u sousední sekce začíná text. */
.prop::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(115% 95% at 100% 0%,
      color-mix(in oklab, var(--accent-soft) 78%, transparent), transparent 62%),
    radial-gradient(85% 78% at 3% 106%,
      color-mix(in oklab, var(--accent) 9%, transparent), transparent 62%);
}

.prop:hover,
.prop:focus-within {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--accent) 30%, transparent);
  box-shadow: var(--shadow-lg);
}

.prop__link {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1;
  color: inherit;
  text-decoration: none;
}

.prop__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--radius);
}

/* -- fotka -------------------------------------------------------------- */

.prop__media {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--bg-2);
}

.prop__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-slow) var(--e-out);
}

.prop__link:hover .prop__media img,
.prop__link:focus-visible .prop__media img {
  transform: scale(1.03);
}

/* Štítek stavu: jediné místo na webu, kde je povolený pilulkový tvar.
   Sedí vpravo nahoře: fotky z RE/MAXu mají v levém horním rohu vypálené
   logo a štítek přes něj vypadal jako překlep. */
.prop__tag {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 12px;
  padding: 5px 12px;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text);
}

/* Stavy. Primárně přes data-stav, jako pojistka i podle textu z content.js. */
.prop__tag[data-stav="nova"],
.prop__tag[data-tag="Nová nabídka"] {
  background: var(--accent);
  color: var(--on-accent);
}

.prop__tag[data-stav="rezervovano"],
.prop__tag[data-tag="Rezervováno"] {
  background: var(--band);
  color: var(--on-band);
}

.prop__tag[data-stav="prodano"],
.prop__tag[data-tag="Prodáno"] {
  background: color-mix(in oklab, var(--band) 72%, transparent);
  color: var(--on-band);
}

/* Zástupná karta: štítek má být vidět, ale nemá přebíjet živé nabídky. */
.prop__tag[data-stav="pripravujeme"],
.prop__tag[data-tag="Připravujeme"] {
  background: var(--surface);
  color: var(--text-mute);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* -- tělo karty --------------------------------------------------------- */

.prop__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px;
}

/* Lokalita se v HTML uvádí až za názvem, vizuálně patří nad něj. */
.prop__loc {
  order: -1;
  margin: 0 0 8px;
  font-size: .75rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.prop__title {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 1.15rem;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--text);
}

/* Parametry: řádek mezi dvěma vlasovými linkami, žádné pilulky. */
.prop__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: auto 0 0;
  padding: 14px 0;
  list-style: none;
  border-block: var(--border-w) solid var(--line);
  font-size: .8rem;
  color: var(--text-mute);
}

.prop__specs li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.prop__specs svg {
  width: 15px;
  height: 15px;
  flex: none;
  stroke-width: 1.5;
  color: var(--text);
}

/* Cena: jediný tučný prvek v celé kartě. */
.prop__price {
  margin-top: 16px;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--accent);
}

/* Karta bez parametrů (zástupná nabídka „Připravujeme“) nemá řádek se
   specifikacemi, který jinak drží patu karty dole. Odsazení tedy přebírá
   cena, jinak by taková karta visela obsahem nahoře vedle plné nabídky. */
.prop__loc + .prop__price {
  margin-top: auto;
  padding-top: 16px;
}

.prop__price small {
  display: block;
  margin-top: 4px;
  font-size: .62em;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-mute);
}

/* Tlačítko v patě karty. Vypadá jako .help__cta o sekci výš, ale je to
   jen <span>: klikací je celý odkaz kolem karty, další <a> uvnitř by
   nebyl platný a čtečka by ohlásila dva odkazy na tutéž nabídku. */
.prop__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  align-self: flex-start;
  margin-top: clamp(18px, 2vw, 24px);

  min-height: 46px;
  padding: 12px 24px;

  font-size: .92rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: var(--r-sm);

  transition: gap var(--t-hover) var(--e-soft),
              background-color var(--t-hover) var(--e-soft);
}

.prop__cta svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.prop:hover .prop__cta,
.prop:focus-within .prop__cta {
  gap: 15px;
  background: var(--accent-hover);
}

/* Mezery mezi kartami řídí clamp() nahoře, stejný jako u .help.
   Dva zlomy navíc by ho jen přebíjely. */


/* ==========================================================================
   07  O MNĚ
   Portrét (5/12) + text (7/12) uvnitř jedné papírové karty. Karta je
   schválně stavěná ze stejných dílů jako hero a jako karty „S čím vám mohu
   pomoci“: skoro bílá plocha, vlasový rámeček v akcentu, přeliv od pravého
   horního rohu a za portrétem posunutý panel v accent-soft. Bez toho byl
   tenhle blok jediné místo na stránce, kde fotka i text leželi na holém
   pozadí, a působil jako vypadlý z jiné šablony.
   Kartu má jen výchozí „editorial“, ostatní rozvržení si ji rozpouští
   zpátky do plochy ve variants.css (oddíl 00.3).
   Není to samostatná sekce, leží uvnitř „Proč já“.
   ========================================================================== */

.about {
  /* Přesah panelu za portrétem, protějšek --hero-peek. Je o kus menší:
     fotka je tady menší než v hero a stejný přesah by ji přerostl. */
  --about-peek: clamp(10px, 1.4vw, 18px);

  /* Mezera pod blokem: rezerva pro panel za fotkou a odznak, které na
     desktopu blok přerůstají. Na telefonu je panel 10 px a odznak sedí
     v mřížce, tam stačí kousek, viz media dotaz níž. */
  --about-bottom: clamp(48px, 6vw, 80px);

  position: relative;
  /* Vlastní kontext skládání. Díky němu smí přeliv níž jít na z-index -1
     a lehnout si nad plochu karty, ale pod obsah, aniž by se z-index musel
     rozdávat každému potomkovi zvlášť (v hero to jinak nešlo, tam z karty
     schválně leze portrét ven). */
  isolation: isolate;

  display: grid;
  gap: clamp(28px, 3.4vw, 56px);
  align-items: start;
  margin-bottom: var(--about-bottom);
  padding: clamp(24px, 3.4vw, 52px);

  border: var(--border-w) solid color-mix(in oklab, var(--accent) 14%, transparent);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

/* Přeliv uvnitř karty, tytéž dva kruhy jako v .hero__grid::before
   a .help__item::before. Sahá přes rámeček ven až k jeho vnější hraně. */
@media (max-width: 619.98px) {
  .about { --about-bottom: 12px; }
}

.about::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(-1 * var(--border-w));
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(115% 95% at 100% 0%,
      color-mix(in oklab, var(--accent-soft) 78%, transparent), transparent 62%),
    radial-gradient(85% 78% at 3% 106%,
      color-mix(in oklab, var(--accent) 9%, transparent), transparent 62%);
}

/* Dokud fotka stojí NAD textem (pod 900 px), je z bloku řádek: malý
   portrét vlevo, odznak a popiska vedle něj. Portrét přes celou šířku
   karty zabral na telefonu skoro půl obrazovky, než se čtenář dostal
   k první větě. Nad 900 px stojí fotka ve vlastním sloupci vedle textu
   a řádek se rozpadne zpátky (viz zlom na konci oddílu). */
.about__media {
  position: relative;
  display: grid;
  grid-template-columns: clamp(140px, 42vw, 360px) minmax(0, 1fr);
  /* Odznak dosedá na spodní hranu fotky, ne na horní. Vedle vysokého
     portrétu je to jediná poloha, ve které s ním čte jako jeden celek;
     nahoře i uprostřed visel v prázdném sloupci sám za sebe. Zároveň je to
     táž hrana, na které leží od 900 px výš, jen zvenčí. */
  align-items: end;
  column-gap: clamp(16px, 3.4vw, 30px);
  margin: 0;
}

/* Rám portrétu: drží polohu panelu za fotkou. Sám neořezává, jinak by
   panel spolkl. Ořez je až o patro níž, přesně jako .hero__media
   a .hero__photo. */
.about__frame {
  position: relative;
  grid-area: 1 / 1;
}

/* Panel za portrétem: tentýž tvar posunutý o --about-peek doprava a dolů.
   Vykoukne zpod fotky jako pruh a dá jí na skoro bílé kartě podklad.
   Je to ::before, tedy dřív v pořadí než .about__photo, takže leží pod ním
   sám od sebe. */
.about__frame::before {
  content: "";
  position: absolute;
  inset: var(--about-peek) calc(-1 * var(--about-peek))
         calc(-1 * var(--about-peek)) var(--about-peek);
  border-radius: var(--r-sm);
  background: color-mix(in oklab, var(--accent-soft) 74%, var(--surface));
}

.about__photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-sm);
  background: var(--bg-2);
}

.about__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  /* O kus vyšší než rám, stejná rezerva jako u portrétu v hero: parallax
     fotku zvedá až o 40 px a bez ní by se pod ní odkryl podklad rámu. */
  height: calc(100% + 44px);
  object-fit: cover;
  object-position: 50% 18%;
  display: block;
}

/* Odznak s odslouženými lety. Doteď na něj nebylo v CSS ani řádka, takže
   se pod fotkou vykresloval jako holý text. Teď je stavěný ze stejných
   dílů jako ikony v kartách „S čím vám mohu pomoci“: plná modrá s přelivem,
   zaoblení --r-sm a záře místo stínu.
   Ve výchozím (úzkém) stavu stojí vedle fotky, ne na ní: na malém portrétu
   by ležel Petrovi přes obličej. `position: relative` je tu kvůli zlomu
   níž, kde se s fotkou překrývá a musí zůstat nad ní. */
.about__badge {
  position: relative;
  z-index: 1;
  grid-area: 1 / 2;
  justify-self: start;
  padding: clamp(10px, 1.3vw, 14px) clamp(14px, 1.7vw, 20px);
  color: var(--on-accent);
  background: linear-gradient(148deg, var(--accent), var(--accent-hover));
  border-radius: var(--r-sm);
  box-shadow: 0 10px 24px color-mix(in oklab, var(--accent) 32%, transparent);
}

.about__badge strong {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(1.22rem, 2.2vw, 1.5rem);
  line-height: 1.05;
  letter-spacing: -.03em;
}

.about__badge span {
  display: block;
  margin-top: 3px;
  font-size: clamp(.72rem, 1vw, .78rem);
  line-height: 1.35;
  color: color-mix(in oklab, var(--on-accent) 80%, var(--accent));
}

/* Nadpis je h3, hlavní nadpis sekce patří „Proč já“ nad ním.
   Bez ozdoby nahoře: krátká barevná linka nad nadpisem je nejopotřebovanější
   šablonový prvek webu vůbec a na kartě, kterou už drží přeliv i rámeček,
   nic nepřidávala. */
.about__title {
  margin: 0 0 24px;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
}

.about__text p {
  max-width: 62ch;
  color: var(--text-mute);
}

.about__text p + p {
  margin-top: 18px;
}

/* Citace není rámeček, panel ani svislá linka. Odliší ji sazba: písmo
   nadpisů, plná barva textu proti tlumeným odstavcům nad ní a prostor
   kolem. Boxů je na kartě dost a svislou linku v akcentu si drží recenze,
   citace v ní stejně stavěná by se s nimi pletla. */
.about__quote {
  margin: clamp(30px, 3.4vw, 42px) 0 clamp(4px, 1vw, 12px);
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(1.14rem, 1.55vw, 1.4rem);
  line-height: 1.45;
  letter-spacing: -.018em;
  color: var(--text);
  text-wrap: pretty;
}

/* České uvozovky se sázejí do textu, ne jako obří ozdoba v rohu. Musí
   viset na odstavci uvnitř, ne na <blockquote>: hydratace z content.js
   přepisuje text právě jemu. Barva v akcentu je jediná ozdoba, kterou
   citace má. */
.about__quote p::before { content: "„"; }
.about__quote p::after  { content: "“"; }

.about__quote p::before,
.about__quote p::after {
  color: var(--accent);
}

/* Podpis pod citací. Bez pomlčky před jménem: pod citací je zřejmé, kdo
   mluví, a v češtině by to stejně musela být „–“, ne „—“. */
.about__quote cite {
  display: block;
  margin-top: 14px;
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  color: var(--text-mute);
}

/* Seznam faktů: řádky oddělené vlasovou linkou, od 760 px ve dvou
   sloupcích. Čtyři body pod sebou vypadaly jako odrážkový seznam, dva
   krát dva čtou spíš jako tabulka údajů. */
.about__facts {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  border-block-start: var(--border-w) solid var(--line);
}

.about__facts li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 0;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--text);
  border-block-end: var(--border-w) solid var(--line);
}

/* Odrážku nahradila fajfka v akcentu. Kresbu dodá maska z tokenu
   --ico-check, barvu pozadí prvku, takže tu nikde není barva natvrdo. */
.about__facts li::before {
  content: "";
  flex: none;
  width: 17px;
  height: 17px;
  margin-block-start: .16em;
  background: var(--accent);
  -webkit-mask: var(--ico-check) center / contain no-repeat;
          mask: var(--ico-check) center / contain no-repeat;
}

.about__facts svg {
  width: 16px;
  height: 16px;
  flex: none;
  stroke-width: 1.5;
  color: var(--text-mute);
}

@media (min-width: 760px) {
  .about__facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(20px, 2.4vw, 36px);
  }
}

/* Od 900 px stojí fotka vedle textu ve vlastním sloupci. Tam už na velký
   portrét místo je, takže se řádek rozpadne: fotka zabere celý sloupec
   a odznak si na ni lehne přes spodní roh vlevo, tedy tam, kde pod ní
   panel nevykukuje. Překryv dělá mřížka, ne absolutní pozice: odznak sdílí
   buňku s rámem a z-index z něj ho drží nahoře.

   Oba sloupce jsou stejně vysoké. Neřídí to pevný poměr stran, ale text:
   fotka doroste do jeho výšky, ať klient odstavce zkrátí nebo prodlouží.
   Obráceně (text natažený do výšky fotky) to nejde, textu se výška
   předepsat nedá, a s pevným poměrem stran se sloupce rozešly pokaždé,
   když se sáhlo na obsah. Proto tu portrét žádný poměr stran nemá:
   .about__frame je mřížka o jedné buňce a .about__photo se do ní roztáhne,
   takže se nikde nepočítá výška v procentech.
   Dolní mez drží fotku při rozumné výšce i u hodně krátkého textu. */
@media (min-width: 900px) {
  .about {
    grid-template-columns: 5fr 7fr;
    align-items: stretch;
  }

  .about__media {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    min-height: 420px;
  }

  .about__frame { display: grid; }

  .about__photo { aspect-ratio: auto; }

  .about__badge {
    grid-area: 1 / 1;
    /* sdílí buňku s rámem, proto se odsune k jeho spodní hraně */
    align-self: end;
    justify-self: start;
    max-width: 74%;
    /* Přesah ven z fotky se řídí stejným tokenem jako panel za ní. */
    margin-block-end: calc(var(--about-peek) + 16px);
    margin-inline-start: calc(-1 * var(--about-peek));
  }
}


/* --- 07.1 Široká, ale nízká obrazovka -------------------------------------
   Notebook 1366×768, 1080p se zvětšeným písmem, ultrawide: karta je přes
   840 px vysoká, takže po kliknutí na „O mně“ v menu zbyde na obrazovce
   jen její horní proužek a z portrétu je vidět sotva vlasy. Vpravo vedle
   nadpisu sekce přitom zůstává prázdné místo.

   Rozvržení se nemění, jen se převáží: fotka přestane růst do výšky textu
   a výšku si vezme od okna, šířku sloupce dopočítá poměr 4:5 (proto se
   nikde nemění ořez obličeje), ušetřenou šířku dostane text a hlavička
   sekce si podtitul postaví vedle nadpisu místo pod něj.

   Zlom je na výšce okna, ne na jeho šířce: totéž okno, jen vyšší, si
   výchozí stav (fotka vysoká jako text) zaslouží dál.
   ------------------------------------------------------------------------ */

/* Hlavička sekce do dvou sloupců: nadpis vlevo, podtitul vpravo do místa,
   které vedle něj dosud zůstávalo prázdné. Ušetří přes sto pixelů výšky,
   o které se karta pod ním posouvala z obrazovky.

   Vlastní zlom, o dvě stě pixelů širší než u karty: pod 1100 px by na dva
   sloupce zbylo po 400 px a nadpis by se lámal do čtyř řádků, tedy do
   větší výšky, než jaká se přesunem podtitulu ušetří.

   Přestavbu si dovolí jen „editorial“. Ostatní rozvržení mají hlavičku
   sekce postavenou po svém ve variants.css a tenhle oddíl by jim ji
   přebil. */
@media (min-width: 1100px) and (max-height: 1000px) {

  :where([data-layout="editorial"]) #proc .sec-head {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: start;
    column-gap: clamp(32px, 4vw, 64px);
    max-width: none;
    margin-bottom: clamp(24px, 2.6vw, 40px);
  }

  /* Číslo sekce zůstává nad oběma sloupci, ne vedle nadpisu. */
  :where([data-layout="editorial"]) #proc .sec-head__num {
    grid-column: 1 / -1;
  }

  /* Odsazení srovnává první řádek podtitulu s horní hranou verzálek
     nadpisu vedle něj; ten je o dost větší, takže od stejné horní hrany
     obě sazby opticky nezačínají. */
  :where([data-layout="editorial"]) #proc .sec-head__sub {
    max-width: 44ch;
    margin-top: .45em;
  }
}


@media (min-width: 900px) and (max-height: 1000px) {

  /* Rozvržení „klid“ má „O mně“ v jednom sloupci a fotku na šířku (3:2),
     výška odvozená od okna by mu ji rozbila. */
  :where(:not([data-layout="klid"])) .about {
    /* Statická hodnota je záloha pro prohlížeč bez svh: kdyby proměnná
       byla neplatná, spadla by s ní i šířka sloupce pod ní. */
    --about-h: 480px;
    --about-h: clamp(340px, calc(100svh - 300px), 540px);

    grid-template-columns: calc(var(--about-h) * .8) minmax(0, 1fr);
    /* Fotka je teď nižší než text vedle ní. Na střed sloupce stojí proti
       odstavcům; nahoře by pod ní zbyl prázdný roh přes čtvrtinu karty. */
    align-items: center;
    padding: clamp(24px, 2.6vw, 40px);
  }

  :where(:not([data-layout="klid"])) .about__media {
    min-height: 0;
    height: var(--about-h);
  }
}


/* ==========================================================================
   08  REFERENCE
   Karta recenze je pořád ze stejné stavebnice jako karta kroku z „Jak to
   probíhá“: táž plocha, týž přeliv od pravého horního rohu, týž rámeček,
   zaoblení i stín. Proto tu stojí stejná sada rolí --rev-*, jakou má
   --step-* o dvě sekce výš, včetně převodu na tmavý pás.

   Uvnitř je ale karta poskládaná tak, jak recenzi zná každý z Googlu:
   nahoře zlaté hvězdičky, pod nimi holý text bez uvozovek a na patě
   podpis s barevným G. Je to pořadí, které se dá přečíst bez čtení:
   hvězdičky nahoře řeknou hodnocení dřív, než dojde na první slovo,
   a G dole říká, že se to dá ověřit jinde než na tomhle webu.

   Hvězdičky se proto nepřebarvují na akcent webu. Zlatá je u hodnocení
   dohoda, kterou nikdo nemusí luštit; v modré by splynuly s odkazy
   a přestaly znamenat hodnocení.

   Typografie se drží stejného rozvržení sil jako krok: text v běžném
   písmu a ztlumené barvě, tučný nadpisový řez jen na jménu, tedy tam,
   kde má krok titulek. Citace v Poppins 600 byla proti zbytku stránky
   o třídu černější a právě tím sekce vypadala jako z jiného webu.

   Karty v řádku jsou stejně vysoké (mřížka je nechává natáhnout) a podpis
   drží patu karty přes margin-top: auto. Jména proto sedí napříč sloupci
   v jedné lince, ať je text jakkoli dlouhý.
   ========================================================================== */

/* minmax(0, 1fr) místo 1fr: podpis je řádek s nezmenšitelným monogramem
   a značkou zdroje, s prostým 1fr by jeho nejmenší šířka roztlačila sloupec
   a v úzkých rozvrženích (magazín má vedle sebe ještě hlavičku sekce) by
   karty vylezly z mřížky ven. */
.revs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 2vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;

  /* Díly karty pro tmavý pás, světlá sekce si je hned níž přemapuje.
     Na tmavém nemá stín co dělat, plocha se odliší průsvitem textové
     barvy, přesně jako u kroku. */
  --rev-plane:     color-mix(in oklab, var(--on-band) 6%, transparent);
  --rev-edge:      var(--line-band);
  --rev-edge-on:   var(--line-band-2);
  --rev-wash:      color-mix(in oklab, var(--accent-band) 14%, transparent);
  --rev-wash-2:    color-mix(in oklab, var(--accent-band) 7%, transparent);
  --rev-shadow:    none;
  --rev-shadow-on: none;
  --rev-tile:      var(--accent-band);
  --rev-tile-fg:   var(--band);

  /* Zlatá hvězdiček je jediná barva v sekci, která nepatří webu, ale
     hodnocení. Nepřemapovává se proto ani na tmavém pásu: na obou
     plochách je čitelná a na obou znamená totéž. */
  --rev-star:      #f2a900;

  /* Na kolik řádků se text zkracuje, než se nabídne „Další“. Šest řádků
     je délka, na které se ještě pozná, o čem recenze je; app.js podle
     téhož čísla měří, jestli má tlačítko vůbec přidat. */
  --rev-lines:     6;
}

/* Recenze se psaly pro tmavý pás, stejně jako u časové osy se na světlé
   sekci nepřepisují jednotlivá pravidla, jen se přemapují role. */
.section:not(.section--band):not(.section--band2) .revs {
  --on-band:      var(--text);
  --on-band-mute: var(--text-mute);
  --line-band:    var(--line);
  --line-band-2:  var(--line-strong);
  --accent-band:  var(--accent);
  --band:         var(--surface);

  /* Tytéž hodnoty jako --step-* v „Jak to probíhá“. Kdyby se tam recept
     karty měnil, musí se změnit i tady, jinak se sekce rozejdou. */
  --rev-plane:     var(--surface);
  --rev-edge:      color-mix(in oklab, var(--accent) 14%, transparent);
  --rev-edge-on:   color-mix(in oklab, var(--accent) 30%, transparent);
  --rev-wash:      color-mix(in oklab, var(--accent-soft) 78%, transparent);
  --rev-wash-2:    color-mix(in oklab, var(--accent) 9%, transparent);
  --rev-shadow:    var(--shadow-md);
  --rev-shadow-on: var(--shadow-lg);
  --rev-tile:      linear-gradient(148deg, var(--accent), var(--accent-hover));
  --rev-tile-fg:   var(--on-accent);
}

/* Karta je dotazovatelný kontejner, ne kvůli sobě, ale kvůli podpisu dole:
   ten se láme podle šířky KARTY, ne okna. Táž karta je podle šířky okna
   jednou přes celý řádek, jindy poloviční nebo třetinová a v magazínu
   ještě užší, takže podle @media by se lámala pokaždé špatně. */
.rev {
  position: relative;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(24px, 2.8vw, 34px) clamp(22px, 2.4vw, 32px);
  background: var(--rev-plane);
  border: var(--border-w) solid var(--rev-edge);
  border-radius: var(--radius);
  box-shadow: var(--rev-shadow);
  transition: border-color var(--t) var(--e-soft),
              box-shadow var(--t) var(--e-soft);
}

/* Přeliv jako uvnitř karty kroku, karty hera i karet „S čím vám mohu
   pomoci“: nejsytější v pravém horním rohu, dole vlevo jen náznak.
   Kreslí ho pseudoprvek přes rámeček ven, obsah karty leží nad ním. */
.rev::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: calc(-1 * var(--border-w));
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(115% 95% at 100% 0%, var(--rev-wash), transparent 62%),
    radial-gradient(85% 78% at 3% 106%, var(--rev-wash-2), transparent 62%);
}

.rev > * {
  position: relative;
  z-index: 1;
}

/* Recenze nejsou klikací, hover je proto jen tichá odezva na najetí:
   silnější rámeček a vyšší stín, tedy totéž, co dělá aktivní krok.
   Karta se nikam neposouvá. */
.rev:hover {
  border-color: var(--rev-edge-on);
  box-shadow: var(--rev-shadow-on);
}

/* Hvězdičky. V kartě jsou první řádek, v souhrnu stojí pod číslem; společné
   mají zlatou a to, že se kreslí jen ty svítící. Čtyřhvězdičkové hodnocení
   má řádek kratší a to je v pořádku: pravdivější než pět stejných hvězd,
   z nichž je jedna prázdná a v téhle velikosti to není poznat. */
.rev__stars {
  display: flex;
  flex: none;
  gap: 2px;
  color: var(--rev-star);
}

.rev__stars svg {
  width: 17px;
  height: 17px;
  flex: none;
}

/* Text recenze je text karty, ne nadpis: běžné písmo a ztlumená barva.
   Velikost si bere z .help__p, ne z .step__body p: krok je karta přes celou
   šířku sekce, kdežto tohle jsou tři úzké sloupce vedle sebe, stejně jako
   karty „S čím vám mohu pomoci“, a plná velikost textu v nich působí
   obrovsky. Řez, velikost i proklad se musí vypsat, protože base.css sází
   každý blockquote jako vyzdviženou citaci v Poppins 600 a tady o ni
   nestojíme. Uvozovky se nesázejí: na Googlu je recenze prostý text
   a s hvězdičkami nad sebou si ji nikdo s ničím jiným nesplete. */
.rev blockquote {
  margin: 0;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--on-band-mute);
  text-wrap: pretty;
}

/* Zkrácení dlouhé recenze. Třídu dává app.js, a jen té kartě, které se text
   opravdu nevejde: bez skriptu a u krátkých recenzí se nekrátí nic, takže
   se nikdy nestane, že by věta skončila v půlce a nešla dočíst. Rozbalená
   karta se v mřížce natáhne a sousední karty s ní, což je správně: řádek
   zůstane srovnaný. */
.rev--clip blockquote {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--rev-lines);
  overflow: hidden;
}

.rev--clip.is-open blockquote {
  -webkit-line-clamp: none;
  overflow: visible;
}

/* „Další“ je odkazové tlačítko v ose textu, ne barevná akce: rozbalit text
   je drobnost, ne cíl karty. Podtržení nese, že je klikací. */
.rev__more {
  align-self: flex-start;
  margin: -6px 0 0;
  padding: 4px 0;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 500;
  color: var(--on-band);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.rev__more:hover {
  color: var(--accent-band);
}

/* Podpis. Stojí u paty karty (margin-top: auto), vlevo kdo recenzi napsal,
   vpravo odkud je. Linka nad ním nemusí být: od textu ho dělí mezera
   a monogram, widget na Googlu vypadá stejně. */
.rev__by {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 10px;
  color: var(--on-band-mute);
}

/* Iniciály místo fotky: fotku od klienta nikdy nemáme, prázdný kroužek
   nebo obecná silueta je horší než dvě písmena. Kolečko, ne dlaždice:
   v podpisu zastupuje člověka, a tak ho kreslí i Google. */
.rev__ava {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: .92rem;
  letter-spacing: -.01em;
  color: var(--rev-tile-fg);
  background: var(--rev-tile);
  border-radius: 50%;
}

.rev__id {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-inline-end: auto;
}

/* Jméno je v kartě to, co je u kroku titulek: jediné místo v nadpisovém
   řezu a v plné barvě textu. Drží tím podpis pohromadě proti ztlumenému
   textu nad ním. */
.rev__who {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: .98rem;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--on-band);
}

.rev__where {
  margin-top: 2px;
  font-size: .8rem;
  line-height: 1.4;
}

/* Značka zdroje na patě podpisu, naproti jménu. Říká, že recenze není
   opsaná odnikud, ale stojí veřejně na Googlu, a stojí tam, kde ji lidé
   z hodnoticích widgetů čekají. Čtyři barvy Googlu se nepřebarvují,
   to logo nedovoluje. */
.rev__src {
  display: flex;
  flex: none;
  margin-inline-start: 10px;
}

.rev__src svg {
  width: 22px;
  height: 22px;
}

/* V úzké kartě (magazín, mobil na šířku sloupce) se monogram, jméno
   s datem a značka do jednoho řádku vejdou jen o fous. Monogram proto
   zdrobní; sázet podpis na dva řádky je horší, pata karet by se rozešla. */
@container (max-width: 300px) {
  .rev__ava {
    width: 36px;
    height: 36px;
    font-size: .85rem;
  }

  .rev__by {
    gap: 10px;
  }
}


/* ==========================================================================
   08b  SOUHRN HODNOCENÍ
   Poslední karta v řádku recenzí. Je ze stejné stavebnice jako recenze
   (týž rám, zaoblení, přeliv i hover), liší se jen sazbou na střed
   a sytější plochou. V řádku citací tím čte jako výsledková tabulka,
   ne jako další recenze, a zároveň zaplní třetí sloupec, dokud jsou
   recenze dvě. Zápis „5,0“ řídí content.js, CSS z čísla nic nepočítá.
   ========================================================================== */

.rev--sum {
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-block: clamp(30px, 3.4vw, 42px);
  text-align: center;
  background: color-mix(in oklab, var(--accent-band) 8%, var(--rev-plane));
  border-color: var(--rev-edge-on);
}

.revsum__lead {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: .82rem;
  font-weight: 500;
  color: var(--on-band-mute);
}

.revsum__lead svg {
  flex: none;
  width: 20px;
  height: 20px;
}

/* Číslo je v kartě to, co je u recenze jméno: jediné místo v nadpisovém
   řezu a v plné barvě textu. „z 5“ vedle něj je jen měřítko, drží se
   proto drobné a ztlumené a sedí na účaří číslice. */
.revsum__score {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}

.revsum__num {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(2.6rem, 4.6vw, 3.3rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--on-band);
}

.revsum__max {
  font-size: .88rem;
  color: var(--on-band-mute);
}

/* Hvězdičky souhrnu jsou o dva pixely větší než u recenze: nesou celou
   sekci, kdežto v podpisu jsou jen doplněk. */
.revsum__stars {
  gap: 4px;
}

.revsum__stars svg {
  width: 16px;
  height: 16px;
}

.revsum__count {
  margin: 0;
  font-size: .85rem;
  color: var(--on-band-mute);
}

.revsum__link {
  margin-block-start: 4px;
  color: var(--accent-band);
}

/* Pozvánka k napsání recenze. Vykreslí se, jen když je v content.js
   vyplněná adresa; proto je tu tlačítko popsané, i když ho zatím není
   na webu vidět. */
.revsum__write {
  min-height: 44px;
  padding: 12px 22px;
  font-size: .88rem;
  color: var(--on-band);
  border-color: var(--rev-edge-on);
}

.revsum__write:hover {
  border-color: var(--on-band);
}

/* Dva sloupce jsou tu jen mezistupeň pro tablet. Tři sloupce se pouští až
   od 1080 px, dřív by na citaci zbylo pod 270 px a lámala by se po pár
   slovech na řádek. */
@media (min-width: 720px) {
  .revs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1080px) {
  .revs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Ve dvou sloupcích vychází souhrn na druhý řádek sám a vedle něj by
   zůstala díra po celé kartě. Roztáhne se proto přes oba sloupce a přesází
   se na ležato, do pásu pod recenzemi. Ve třech sloupcích to potřeba není,
   tam souhrn řádek se dvěma recenzemi právě dovírá; kdyby recenzí přibylo
   tak, že by zase zbyl sám, patří sem stejné pravidlo i pro 1080 px. */
@media (min-width: 720px) and (max-width: 1079px) {
  .rev--sum {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: clamp(20px, 3vw, 38px);
    row-gap: 12px;
    padding-block: clamp(22px, 2.6vw, 30px);
  }

  .revsum__num { font-size: 2.3rem; }

  .revsum__link { margin-block-start: 0; }
}


/* ==========================================================================
   09  ČASTÉ OTÁZKY
   Řádky oddělené vlasovou linkou, rozbalení přes grid-template-rows.
   Plus a minus jsou kreslené z CSS, žádný obrázek.
   ========================================================================== */

.faq {
  max-width: 78ch;
  margin-inline: auto;
  border-block-start: var(--border-w) solid var(--line);
}

.faq__item {
  border-block-end: var(--border-w) solid var(--line);
}

.faq__item h3 {
  margin: 0;
  font: inherit;
}

.faq__q {
  position: relative;
  display: block;
  width: 100%;
  padding: 20px 40px 20px 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 1.05rem;
  line-height: 1.4;
  letter-spacing: -.01em;
  text-align: start;
  color: var(--text);
  background: none;
  border: 0;
  cursor: pointer;
  transition: opacity var(--t-fast) var(--e-soft);
}

.faq__q:hover {
  opacity: .7;
}

.faq__q:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Znaménko plus / minus: dvě čárky kreslené z pseudoprvků tlačítka.
   Vodorovná leží ve středu prvního řádku otázky, svislá se přes ni kříží. */
.faq__q::before,
.faq__q::after {
  content: "";
  position: absolute;
  background: var(--text);
}

.faq__q::before {
  inset-inline-end: 0;
  inset-block-start: calc(20px + .7em);
  width: 16px;
  height: var(--border-w);
}

.faq__q::after {
  inset-inline-end: calc(8px - var(--border-w) / 2);
  inset-block-start: calc(20px + .7em - 8px);
  width: var(--border-w);
  height: 16px;
  transform: scaleY(1);
  transition: transform var(--t) var(--e-out);
}

/* Otevřená otázka: svislá čárka se schová, zůstane minus. */
.faq__q[aria-expanded="true"]::after {
  transform: scaleY(0);
}

/* Odpověď: bez JS je vidět, s JS se rozbaluje. */
.faq__a {
  display: grid;
  grid-template-rows: 1fr;
}

.faq__a[hidden] {
  display: none;
}

.faq__a > div {
  overflow: hidden;
}

.faq__a p {
  margin: 0 0 22px;
  max-width: 68ch;
  color: var(--text-mute);
}

.js .faq__a {
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t) var(--e-soft);
}

.js .faq__item.is-open > .faq__a,
.js .faq__item--on > .faq__a,
.js .faq__item > h3:has(> .faq__q[aria-expanded="true"]) + .faq__a {
  grid-template-rows: 1fr;
}

/* FAQ na tmavém pásu */
:where(.section--band, .section--band2) .faq { border-color: var(--line-band); }
:where(.section--band, .section--band2) .faq__item { border-color: var(--line-band); }
:where(.section--band, .section--band2) .faq__q { color: var(--on-band); }
:where(.section--band, .section--band2) .faq__q::before,
:where(.section--band, .section--band2) .faq__q::after { background: var(--on-band); }
:where(.section--band, .section--band2) .faq__a p { color: var(--on-band-mute); }


/* ==========================================================================
   09b  BLOG
   Tři články vedle sebe, každý jako karta z téhož papíru jako hero, karty
   „S čím vám mohu pomoci“, služby a kroky: světlá plocha, modrý přeliv od
   pravého horního rohu, jemný rámeček v akcentu. Celá karta je odkaz.

   Dřív to byla jediná karta na stránce bez výplně a bez rámečku, drženou
   ji měla jen dvoupixelová linka nahoře, která při hoveru zmodrala. Vedle
   ostatních sekcí to vypadalo jako blog přilepený z jiné šablony.

   Fotka leží uvnitř karty, ne nad ní: papír kolem ní ji drží pohromadě
   s textem. Rubrika je štítek ve světlé modré, tentýž díl jako poznámka
   pod krokem procesu.
   ========================================================================== */

.posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.post {
  position: relative;
  background: var(--surface);
  border: var(--border-w) solid color-mix(in oklab, var(--accent) 14%, transparent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  transition: transform var(--t-fast) var(--e-soft),
              border-color var(--t-hover) var(--e-soft),
              box-shadow var(--t-fast) var(--e-soft);
}

/* Přeliv jako v .help__item, .service a .step. */
.post::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: calc(-1 * var(--border-w));
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(115% 95% at 100% 0%,
      color-mix(in oklab, var(--accent-soft) 78%, transparent), transparent 62%),
    radial-gradient(85% 78% at 3% 106%,
      color-mix(in oklab, var(--accent) 9%, transparent), transparent 62%);
}

.post:hover,
.post:focus-within {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--accent) 30%, transparent);
  box-shadow: var(--shadow-lg);
}

.post__link {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(18px, 1.9vw, 24px);
}

/* Fotka článku. Pevný poměr stran drží karty v řádku srovnané i při
   různě vysokých obrázcích; ořez řeší object-fit, ne ořezaný soubor.
   Zaoblení --r-sm, ne --r-xs: fotka teď leží uvnitř karty se zaoblením
   --radius a téměř ostré rohy uvnitř oblého rámu se perou. */
.post__media {
  display: block;
  overflow: hidden;
  margin-bottom: clamp(16px, 1.8vw, 22px);
  aspect-ratio: 3 / 2;
  background: var(--bg-2);
  border-radius: var(--r-sm);
}

.post__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-image) var(--e-soft);
}

.post__link:hover .post__media img {
  transform: scale(calc(1 + .03 * var(--motion)));
}

/* Datum vlevo, rubrika jako štítek vpravo od něj. */
.post__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  max-width: none;
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--text-mute);
}

.post__tag {
  flex: none;
  padding: 5px 11px;
  font-size: .74rem;
  letter-spacing: .02em;
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  border-radius: var(--r-sm);
}

.post__title {
  margin: 0 0 12px;
  font-size: 1.16rem;
  line-height: 1.35;
  letter-spacing: -.015em;
  text-wrap: balance;
  transition: color var(--t-hover) var(--e-soft);
}

.post__link:hover .post__title { color: var(--accent); }

.post__perex {
  margin: 0 0 20px;
  font-size: .93rem;
  line-height: 1.7;
  color: var(--text-mute);
}

/* „Číst dál“ se drží u spodní hrany, ať jsou karty zarovnané i při
   různě dlouhých perexech. */
.post__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-size: .85rem;
  font-weight: 500;
  color: var(--accent);
  transition: gap var(--t-fast) var(--e-soft);
}

.post__more svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.post__link:hover .post__more { gap: 14px; }

/* Blog na tmavém pásu (kdyby se sekce někdy přesunula). Karta tam nemůže
   mít světlý --surface, místo výplně zůstane prosvětlené sklo a linka;
   přeliv i štítek rubriky se přepočítají z --accent-band, stejně jako
   u služeb a kroků. */
:where(.section--band, .section--band2) .post {
  background: color-mix(in oklab, var(--on-band) 5%, transparent);
  border-color: var(--line-band-2);
  box-shadow: none;
}

:where(.section--band, .section--band2) .post::before {
  background:
    radial-gradient(115% 95% at 100% 0%,
      color-mix(in oklab, var(--accent-band) 14%, transparent), transparent 62%),
    radial-gradient(85% 78% at 3% 106%,
      color-mix(in oklab, var(--accent-band) 7%, transparent), transparent 62%);
}

:where(.section--band, .section--band2) .post:hover,
:where(.section--band, .section--band2) .post:focus-within {
  border-color: var(--line-band-2);
  box-shadow: none;
}

:where(.section--band, .section--band2) .post__tag {
  color: var(--accent-band);
  background: color-mix(in oklab, var(--accent-band) 15%, transparent);
}

:where(.section--band, .section--band2) .post__title { color: var(--on-band); }
:where(.section--band, .section--band2) .post__meta,
:where(.section--band, .section--band2) .post__perex { color: var(--on-band-mute); }
:where(.section--band, .section--band2) .post__more { color: var(--accent-band); }
:where(.section--band, .section--band2) .post__link:hover .post__title { color: var(--accent-band); }


/* ==========================================================================
   10  KONTAKT A FORMULÁŘ
   Formulář vlevo, kontaktní údaje vpravo, obojí uvnitř jedné papírové
   karty. Karta je stavěná ze stejných dílů jako hero, „O mně“ a karty
   „S čím vám mohu pomoci“: skoro bílá plocha, vlasový rámeček v akcentu,
   přeliv od pravého horního rohu, stejné zaoblení a stín.

   Předtím tu karta nebyla a byla to jediná sekce na stránce, kde obsah
   ležel přímo na holém pásu: nadpis, holá pole a vedle nich sloupec
   údajů. Přesně ten tvar má kontaktní sekce v každé druhé šabloně.

   Sekce stojí na světlém pásu; pravidla pro tmavý podklad na konci
   oddílu zůstávají pro případ, že by se sekce přesunula.
   Kartu má jen výchozí „editorial“, ostatní rozvržení si ji rozpouští
   zpátky do plochy ve variants.css (oddíl 00.4).
   ========================================================================== */

.contact {
  position: relative;
  /* Vlastní kontext skládání, aby přeliv níž mohl jít na z-index -1
     a lehnout si nad plochu karty, ale pod obsah. Totéž dělá .about. */
  isolation: isolate;

  display: grid;
  gap: clamp(24px, 2.4vw, 40px);
  align-items: start;
  padding: clamp(24px, 3.4vw, 52px);

  border: var(--border-w) solid color-mix(in oklab, var(--accent) 14%, transparent);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

/* Přeliv uvnitř karty, tytéž dva kruhy jako v .hero__grid::before,
   .about::before a .help__item::before. Sahá přes rámeček ven až k jeho
   vnější hraně. */
.contact::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(-1 * var(--border-w));
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(115% 95% at 100% 0%,
      color-mix(in oklab, var(--accent-soft) 78%, transparent), transparent 62%),
    radial-gradient(85% 78% at 3% 106%,
      color-mix(in oklab, var(--accent) 9%, transparent), transparent 62%);
}

/* Levý sloupec: nadpis sekce a pod ním formulář. Nadpis tu nesmí držet
   šířku 52ch přes celou mřížku, jinak by zbytečně tlačil pravý sloupec. */
.contact__main {
  display: grid;
  align-content: start;
  min-width: 0;
}

.contact__main .sec-head {
  max-width: none;
}

/* -- formulář ----------------------------------------------------------- */

.form {
  display: grid;
  gap: 12px;
}

/* Kostra formuláře. <fieldset> je tu kvůli přístupnosti, ne kvůli vzhledu,
   nativní rámeček „2px groove“ i výřez pro legendu proto shazujeme.
   `min-width: 0` je nutné, jinak fieldset ignoruje šířku mřížky. */
.form__set {
  display: grid;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Legenda nese název formuláře pro odečítač obrazovky. Vizuálně ji
   nepotřebujeme, nadpis sekce říká totéž. */
.form__legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Dvojice polí vedle sebe; pod 640 px se poskládají pod sebe. */
.form__row {
  display: grid;
  gap: 12px;
}

@media (min-width: 641px) {
  .form__row:has(> .field + .field) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.field {
  display: grid;
  gap: 6px;
}

/* Do formuláře se píše, popisek ani rámeček tu nesmí být „tichý“ text.
   Proto plná --text a silnější linka, ne --text-mute a vlasové --line.
   Stejné pravidlo platí i v tmavé variantě dole.

   Verzálky s prostrkáním jsou pryč. Base.css je u tlačítek zakazuje jako
   korporátní zlozvyk a nad formulářem jich stálo osm pod sebou; byla to
   ta nejnápadnější věc na celé sekci a přesně ten detail, podle kterého
   se pozná formulář z generátoru. Malá písmena čtou navíc rychleji. */
.field label {
  font-size: .85rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}

/* Pozor na zkratku `background`, u <select> by smazala šipku, kterou
   base.css nastavuje přes background-image, i její pozici a opakování.
   Proto tu i dál všude jen background-color.

   Výplň pole je bledě modrá, ne --surface. Od chvíle, kdy formulář leží
   na papírové kartě, by bílé pole na bílé kartě drželo jenom rámečkem
   a pole by nebylo vidět, dokud ho člověk nehledá. Modrá je táž barva,
   ze které je přeliv karty i dlaždice ikon, takže nepřibývá barva navíc.
   Rámeček zůstává silný: do pole se píše. */
.field input:not([type="checkbox"]),
.field select,
.field textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 13px;
  font: inherit;
  font-size: .95rem;
  color: var(--text);
  background-color: color-mix(in oklab, var(--accent-soft) 26%, var(--surface));
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast) var(--e-soft),
              background-color var(--t-fast) var(--e-soft);
}

/* Pod kurzorem a při psaní pole zbělá: rozepsaná odpověď má být to
   nejsvětlejší místo v sekci. */
.field input:not([type="checkbox"]):hover,
.field select:hover,
.field textarea:hover { border-color: var(--text-mute); }

.field input:not([type="checkbox"]):focus,
.field select:focus,
.field textarea:focus { background-color: var(--surface); }

/* Výběr si nechává místo vpravo na šipku (base.css, oddíl 7). */
.field select {
  padding-right: 44px;
}

.field textarea {
  min-height: 88px;
  resize: vertical;
}

/* Rozbalený seznam vykresluje operační systém, barvy mu dáme explicitně,
   aby na tmavém pásu nezůstal tmavý text na tmavém podkladu. */
.field select option {
  color: var(--text);
  background: var(--surface);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-mute);
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 0;
}

/* Chyba pod polem */
.field__err {
  font-size: .8rem;
  color: var(--err);
}

.field__err:empty {
  display: none;
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--err);
}

/* Zaškrtávátko vedle textu, ne pod popiskem: zaškrtávátko a popisek jsou
   sourozenci, takže sloupce rozdává rovnou .field. */
.field--check {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 12px;
}

.field--check label {
  font-size: .88rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  line-height: 1.6;
}

/* Tvar čtverečku drží base.css, oddíl 7.3; tady jde jen o to, kde stojí.

   Svisle na střed PRVNÍHO řádku textu, ne na střed celého odstavce:
   (výška řádku - výška zaškrtávátka) / 2. Když text zalomí do dvou řádků,
   zaškrtávátko zůstane u toho horního. */
.field--check input[type="checkbox"],
.field input[type="checkbox"] {
  margin-top: calc((1.6em - 20px) / 2);
}

.field--check .field__err {
  grid-column: 1 / -1;
}

/* -- věta o osobních údajích pod formulářem -------------------------------
   Na tomhle místě stálo povinné zaškrtávátko souhlasu. Teď tu je jen
   informace podle čl. 13 GDPR, takže se vysází jako .note: drobně
   a tlumeně, ať netahá pozornost od polí a od tlačítka. Proč zaškrtávátko
   zmizelo, stojí u form.privacyNote v content.js. */
.form__privacy {
  margin: 0;
  font-size: .8rem;
  line-height: 1.6;
  color: var(--text-mute);
}

.form__privacy a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form__privacy a:hover { color: var(--accent); }

/* Odesílací řádek: tlačítko a vedle něj věta o tom, co se stane pak.
   Tlačítko není přes celou šířku (btn--block je pryč). Modrý pruh pod
   formulářem je tvar, který má každá druhá šablona, a hero vedle sebe
   taky staví tlačítko v jeho vlastní šířce, ne roztažené.
   Pod 480 px roztáhne .btn--lg na celou šířku layout.css; věta pak
   spadne pod tlačítko sama, flex-wrap ji tam pustí. */
.form__send {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 6px;
}

.form__after {
  flex: 1 1 22ch;
  max-width: 40ch;
  margin: 0;
}

/* Honeypot: pro člověka neviditelný, pro čtečku skrytý přes aria. */
.form .hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Stavová hláška formuláře */
.form__status {
  font-size: .9rem;
  color: var(--text-mute);
}

:where(.section--band, .section--band2) .form__status { color: var(--on-band-mute); }

.form__status:empty {
  display: none;
}

.form__status.is-ok,
.form__status[data-state="ok"] {
  color: var(--ok);
}

.form__status.is-err,
.form__status[data-state="err"] {
  color: var(--err);
}

/* -- poděkování po odeslání ----------------------------------------------
   Vyrábí ho app.js: schová <fieldset> a na jeho místo položí tenhle blok.
   Doteď na něj v CSS nebyla ani řádka, takže z formuláře zbyl uprostřed
   prázdné karty holý tučný řádek. Přitom je to jediný okamžik, kvůli
   kterému celá sekce na stránce je.
   Plocha je ze stejných dílů jako zbytek webu: bledě modrá výplň, jaká
   je ve dlaždicích ikon, zaoblení --r-sm a rámeček v akcentu. Minimální
   výška drží kartu v původní výšce, aby stránka po odeslání neposkočila. */

.form__done {
  display: grid;
  gap: 12px;
  align-content: center;
  min-height: 260px;
  padding: clamp(24px, 3vw, 40px);
  border: var(--border-w) solid color-mix(in oklab, var(--accent) 22%, transparent);
  border-radius: var(--r-sm);
  background: color-mix(in oklab, var(--accent-soft) 34%, var(--surface));
}

.form__done h3 {
  margin: 0;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--text);
  text-wrap: balance;
}

.form__done p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-mute);
}

.form__done a {
  font-weight: 500;
  color: var(--accent);
}

:where(.section--band, .section--band2) .form__done {
  border-color: var(--line-band-2);
  background: color-mix(in oklab, var(--on-band) 8%, transparent);
}

:where(.section--band, .section--band2) .form__done h3 { color: var(--on-band); }
:where(.section--band, .section--band2) .form__done p  { color: var(--on-band-mute); }
:where(.section--band, .section--band2) .form__done a  { color: var(--accent-band); }

/* -- mapa ----------------------------------------------------------------
   Vložená Google mapa pod dvojsloupcem kontaktu. Poměr stran drží
   aspect-ratio, takže se nemusí hlídat výška iframu na žádné šířce. */

.contact__map {
  display: flex;
  flex-direction: column;
  margin: 18px 0 0;
}

/* Rám drží poměr stran a ořez. Mapa je cizí obsah bez vlastního zaoblení,
   takže ji musí ořezat tenhle obal, iframe sám by přes rohy přetekl. */
/* Rámeček je v akcentu jako u karet, ne vlasová --line: mapa je uvnitř
   papírové karty a vlasová linka na ní zmizí. Zaoblení --r-sm je totéž,
   které mají portréty v hero a v „O mně“, tedy obrázek vsazený do karty. */
/* `min-height` tu vědomě není. Prvku s `aspect-ratio` se nejmenší výška
   přepočítá poměrem i na nejmenší šířku: 180 px na výšku dělá při 16/9
   rovných 320 px na šířku, a to je na úzkém telefonu víc, než kolik na
   kartu v okně zbývá. Karta se pak nesmrskne, vyčnívá z okna a stránka jde
   odsunout do strany — uřízne se pravý okraj nadpisů i polí. Výšku tu proto
   drží jenom poměr stran. Nejmenší výška se hodí jedině tam, kde poměr
   neplatí, tedy v dvousloupcovém rozvržení níž. */
.contact__map-frame {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: var(--border-w) solid color-mix(in oklab, var(--accent) 14%, transparent);
  border-radius: var(--r-sm);
  background: var(--bg-2);
}

.contact__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  /* Dokud běží skeleton, mapa se nepřekresluje pod ním napůl načtená. */
  opacity: 0;
  transition: opacity var(--t) var(--e-soft);
}

.contact__map:not(.is-loading) iframe { opacity: 1; }

/* --- skeleton ------------------------------------------------------------
   Šedá plocha s přejíždějícím světlem. Světlo se posouvá transformem,
   ne background-position, animuje se tak jen to, co kontrakt dovoluje. */

.skeleton {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--bg-2);
  opacity: 1;
  pointer-events: none;
  transition: opacity var(--t) var(--e-soft);
}

.skeleton::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -60%;
  width: 60%;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in oklab, var(--surface) 90%, transparent),
    transparent
  );
  /* Stejný zápis jako u ostatních délek na webu: při --motion: 0 vyjde
     nulová délka a světlo se prostě nehne. */
  animation: skeleton-sweep calc(1.4s * var(--motion)) var(--e-soft) infinite;
}

@keyframes skeleton-sweep {
  from { transform: translateX(0); }
  to   { transform: translateX(266%); }   /* 160 / 60: přes celou šířku a ven */
}

/* Po načtení skeleton zmizí a přestane brát doteky. */
.contact__map:not(.is-loading) .skeleton {
  opacity: 0;
  visibility: hidden;
}

/* Bez pohybu zůstane jen klidná šedá plocha. */
@media (prefers-reduced-motion: reduce) {
  .skeleton::after { animation: none; }
}

/* --- zeď přes vypnutou mapu ----------------------------------------------
   Leží tam, kde by byla mapa, dokud ji návštěvník nepovolí (js/cookies.js).
   Je i v HTML, ne jen v JavaScriptu: bez skriptů se mapa nenačte nikdy
   a bez zdi by na kontaktu zůstal prázdný šedivý obdélník.

   Plocha je táž šeď jako u skeletonu, jen se v ní nic nehýbe — není to
   načítání, je to stav. */
.mapa-zed {
  position: absolute;
  inset: 0;
  z-index: 2;                 /* nad skeletonem i nad iframem */

  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;

  padding: clamp(16px, 5%, 28px);
  text-align: center;
  background: var(--bg-2);
}

/* Grid by jinak přebil atribut hidden a zeď by zůstala i po povolení. */
.mapa-zed[hidden] { display: none; }

.mapa-zed__title {
  margin: 0;
  font-size: .95rem;
  font-weight: 600;
  color: var(--text);
}

.mapa-zed__text {
  margin: 0;
  max-width: 44ch;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--text-mute);
}

.mapa-zed__btn { margin-top: 6px; }

/* Odchod na Google je třetí volba, ne druhé tlačítko: kdyby tu stály dvě
   plné plochy vedle sebe, zeď by měla dvě těžiště a ani jedno by nebylo
   to hlavní. */
.mapa-zed__odkaz { font-size: .82rem; }

:where(.section--band, .section--band2) .mapa-zed {
  background: color-mix(in oklab, var(--on-band) 8%, transparent);
}
:where(.section--band, .section--band2) .mapa-zed__title { color: var(--on-band); }
:where(.section--band, .section--band2) .mapa-zed__text  { color: var(--on-band-mute); }

.contact__map figcaption {
  margin-top: 10px;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--text-mute);
}

/* V jednosloupcovém rozvržení je mapa přes celou šířku, tam by vysoký
   obdélník zabral půl obrazovky. Proto plochý pruh a žádné dorovnávání. */
@media (max-width: 899.98px) {
  .contact__map-frame { aspect-ratio: 16 / 9; }
}

/* Dvousloupcové rozvržení: oba sloupce stejně vysoké a mapa dorovná zbytek.
   `aspect-ratio` tu ustupuje výšce, kterou jí dá flex. */
@media (min-width: 900px) {
  .contact { align-items: stretch; }
  .contact__map { flex: 1 1 auto; }
  /* Poměr stran tu neplatí, výšku dává flex — nejmenší výška se tedy nemá
     kam přepočítat do šířky a hlídá jen to, aby z mapy nezbyl proužek. */
  .contact__map-frame { flex: 1 1 auto; aspect-ratio: auto; min-height: 180px; }
}

:where(.section--band, .section--band2) .contact__map-frame {
  border-color: var(--line-band-2);
  background: color-mix(in oklab, var(--on-band) 8%, transparent);
}

:where(.section--band, .section--band2) .skeleton {
  background: color-mix(in oklab, var(--on-band) 8%, transparent);
}
:where(.section--band, .section--band2) .contact__map figcaption { color: var(--on-band-mute); }


/* -- postranní kontakty ------------------------------------------------- */

/* Sloupec s kontakty. Mapa v něm roste do zbylé výšky, aby spodní hrana
   mapy skončila přesně na spodní hraně odesílacího tlačítka vlevo. */
.contact__side {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* Všechny řádky odsazují od linky stejně, nahoře i dole. Dva ze čtyř jsou
   <p> (nedá se na ně klepnout, nejsou to odkazy) a od base.css by dostaly
   `p + p { margin-top: 1em }`, tedy sazbové pravidlo pro odstavce textu:
   „Kancelář“ pak stála o 15 px níž než ostatní. Proto tu margin nulujeme. */
.contact__row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  padding: 11px 0;
  border-block-end: var(--border-w) solid var(--line);
  font-size: .95rem;
  color: var(--text);
}

.contact__row:first-child {
  border-block-start: var(--border-w) solid var(--line);
}

/* Telefon je v téhle sekci ta hlavní věc, ne první položka seznamu.
   Číslo proto sází nadpisový řez v té velikosti, ve které stálo v hero,
   než ho odtamtud klient nechal odstranit. Zbylé tři řádky zůstávají
   drobné: adresa ani kraj se nevytáčejí. */
.contact__row--lead b {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(1.28rem, 2.4vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: -.02em;
}

.contact__row--lead > svg {
  width: 20px;
  height: 20px;
  color: var(--accent);
}

.contact__row > svg {
  width: 18px;
  height: 18px;
  flex: none;
  stroke-width: 1.5;
  align-self: center;
  color: var(--text-mute);
}

/* Uvnitř řádku je popisek (<small>) nad hodnotou (<b>). Bez toho by
   obojí splynulo do jednoho slova „TELEFON+420 604 626 307“. */
.contact__row > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

/* Popisek řádku, malými písmeny ze stejného důvodu jako popisky polí
   ve formuláři: čtyři verzálkové řádky pod sebou dělaly ze sloupce
   tabulku údajů. */
.contact__row small {
  font-size: .78rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-mute);
}

.contact__row b {
  font-size: .98rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text);
}

.contact__row a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--t-fast) var(--e-soft);
}

.contact__row a:hover {
  opacity: .7;
}

/* Čtyři čtverečky se sociálními sítěmi tu bývaly (.contact__social).
   Jsou pryč i s pravidly: totéž čtyři profily stojí popsané v pásu
   „Sledujte mě na sociálních sítích“ hned pod touhle sekcí, takže to
   byla tatáž věc dvakrát na jedné obrazovce. */

@media (min-width: 900px) {
  .contact { grid-template-columns: 1.15fr .85fr; gap: clamp(30px, 3vw, 48px); }
}

/* -- kontakt na tmavém pásu (výchozí umístění podle kontraktu §4) ------- */

/* Popisky, rámečky ani placeholder tu nejsou „tichý“ text; do formuláře
   se píše, musí být čitelný na první pohled. Proto plná --on-band a rámeček
   výrazně nad úrovní obyčejné linky pásu. Stejné hodnoty drží layout.css
   v oddílu 3.1; obě místa musí zůstat v souladu. */
:where(.section--band, .section--band2) .field label { color: var(--on-band); }

:where(.section--band, .section--band2) .field input:not([type="checkbox"]),
:where(.section--band, .section--band2) .field select,
:where(.section--band, .section--band2) .field textarea {
  color: var(--on-band);
  background-color: color-mix(in oklab, var(--on-band) 10%, transparent);
  border-color: color-mix(in oklab, var(--on-band) 46%, transparent);
}

:where(.section--band, .section--band2) .field input::placeholder,
:where(.section--band, .section--band2) .field textarea::placeholder {
  color: color-mix(in oklab, var(--on-band) 62%, transparent);
}

:where(.section--band, .section--band2) .field input:focus-visible,
:where(.section--band, .section--band2) .field select:focus-visible,
:where(.section--band, .section--band2) .field textarea:focus-visible {
  border-color: var(--accent-band);
}

:where(.section--band, .section--band2) .field--check label {
  color: color-mix(in oklab, var(--on-band) 82%, transparent);
}

:where(.section--band, .section--band2) .field--check label a {
  color: var(--on-band);
}

:where(.section--band, .section--band2) .form__privacy {
  color: var(--on-band-mute);
}

:where(.section--band, .section--band2) .form__privacy a:hover {
  color: var(--accent-band);
}

:where(.section--band, .section--band2) .field__err,
:where(.section--band, .section--band2) .form__status.is-err,
:where(.section--band, .section--band2) .form__status[data-state="err"] {
  color: var(--err-band);
}

:where(.section--band, .section--band2) .field input[aria-invalid="true"],
:where(.section--band, .section--band2) .field select[aria-invalid="true"],
:where(.section--band, .section--band2) .field textarea[aria-invalid="true"] {
  border-color: var(--err-band);
}

:where(.section--band, .section--band2) .contact__row {
  color: var(--on-band);
  border-color: var(--line-band);
}

:where(.section--band, .section--band2) .contact__row > svg,
:where(.section--band, .section--band2) .contact__row small {
  color: var(--on-band-mute);
}

:where(.section--band, .section--band2) .contact__row b {
  color: var(--on-band);
}

:where(.section--band, .section--band2) .form__status.is-ok,
:where(.section--band, .section--band2) .form__status[data-state="ok"] {
  color: color-mix(in oklab, var(--ok) 60%, var(--on-band));
}


/* -- kopírování kontaktu ------------------------------------------------- */

/* Řádek s telefonem a e-mailem je od téhle chvíle <p>, ne <a>: odkazem
   zůstává jen samotná hodnota, tedy přesně ten text, který se dá vzít.
   Předtím byl odkazem celý řádek, takže se dalo klepnout kamkoli do
   prázdna vpravo a otevřel se poštovní klient. Tlačítko na kopírování
   stojí hned za hodnotou, uvnitř odkazu stát nesmí — to HTML nedovoluje.

   Tím se zároveň spravil výběr textu: tažení myší přes odkaz prohlížeč
   chápe jako přetahování odkazu, ne jako označování. Vypíná se to jen
   vlastností -webkit-user-drag; Firefox ji nezná, tomu totéž hlídá
   app.js tím, že odkazu sebere dragstart. */
.contact__row .contact__val {
  display: block;
  min-width: 0;
}

.contact__link {
  -webkit-user-drag: none;
}

.contact__row b,
.contact__row small {
  -webkit-user-select: text;
  user-select: text;
}

/* Drobné tlačítko těsně za hodnotou. Bez rámečku: v řádku se dvěma
   údaji pod sebou by dva orámované čtverečky přetáhly pozornost na sebe,
   ačkoli hlavní věc je pořád ten telefon. */
.contact__copy {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-inline-start: 4px;
  padding: 0;
  vertical-align: -.36em;
  color: var(--text-mute);
  background: none;
  border: 0;
  border-radius: var(--r-xs);
  cursor: pointer;
  transition: color var(--t-fast) var(--e-soft),
              background-color var(--t-fast) var(--e-soft);
}

.contact__copy:hover {
  color: var(--accent);
  background: color-mix(in oklab, currentColor 12%, transparent);
}

/* Obě ikony leží v jednom poli přes sebe a prohazují se průhledností,
   aby tlačítko při potvrzení neposkočilo. */
.contact__copy svg {
  grid-area: 1 / 1;
  width: 15px;
  height: 15px;
  transition: opacity var(--t-fast) var(--e-soft);
}

.contact__copy-ok { opacity: 0; }
.contact__copy.is-done { color: var(--ok); }
.contact__copy.is-done .contact__copy-i { opacity: 0; }
.contact__copy.is-done .contact__copy-ok { opacity: 1; }

/* Potvrzení se píše do popisku řádku („E-mail“ → „Zkopírováno“), text
   mění app.js. Bublina vedle tlačítka to být nemůže: na úzkém displeji
   se vejde od kraje jen půlka. Popisek je krátký a volného místa za ním
   je dost, takže se nic neposune ani neuřízne. */
.contact__row.is-copied > span > small {
  color: var(--accent);
}

:where(.section--band, .section--band2) .contact__row.is-copied > span > small {
  color: var(--accent-band);
}

:where(.section--band, .section--band2) .contact__copy { color: var(--on-band-mute); }
:where(.section--band, .section--band2) .contact__copy:hover { color: var(--accent-band); }
:where(.section--band, .section--band2) .contact__copy.is-done { color: var(--accent-band); }

/* ==========================================================================
   12  SOCIÁLNÍ SÍTĚ
   Pás nad patičkou. Čtyři dlaždice, každá jeden profil. Dlaždice bez
   vyplněné adresy se do stránky vůbec nedostane (řeší app.js).
   ========================================================================== */

.socky {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.socky__link {
  display: grid;
  place-items: center;
  gap: 4px;
  height: 100%;
  padding: clamp(24px, 2.6vw, 34px) 18px;
  text-align: center;
  color: var(--text);
  background: var(--surface);
  border: var(--border-w) solid var(--line);
  border-radius: var(--r-sm);
  transition: transform var(--t-fast) var(--e-soft),
              border-color var(--t-hover) var(--e-soft),
              color var(--t-hover) var(--e-soft);
}

.socky__link:hover,
.socky__link:focus-visible {
  transform: translateY(-3px);
  color: var(--accent);
  border-color: var(--accent);
}

.socky__link svg {
  width: 24px;
  height: 24px;
  margin-bottom: 10px;
}

.socky__lbl {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 1.02rem;
  letter-spacing: -.01em;
}

.socky__handle {
  font-size: .85rem;
  color: var(--text-mute);
}

@media (min-width: 560px) {
  .socky { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .socky { grid-template-columns: repeat(4, 1fr); }
}


/* ==========================================================================
   POHYB: vypnutí animací
   Platí pro celý soubor: nastavení studia i systémová volba uživatele.
   ========================================================================== */

:root[data-motion="zadny"] .skeleton::after {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .why__item,
  .service,
  .service::after,
  .prop,
  .prop__media img,
  .step,
  .step__num,
  .process__rail i,
  .faq__q::after,
  .js .faq__a {
    transition: none;
  }
}