/* ══════════════════════════════════════════════════════════════════════════
   /kontakt — styly JEN pro kontaktní stránku. Načítá se přes $extra_css, takže
   žádnou jinou stránku to nestojí ani jeden požadavek navíc.

   ⚠️ Do base.css tohle NEPATŘÍ: jsou to prvky, které nikde jinde nejsou
   (schéma oblasti působnosti, karty kanálů, kroky po odeslání). Do sdíleného
   stylopisu patří až věc, kterou použije druhá stránka.
   ⚠️ Formulářový blok schválně NEPŘESTYLOVÁVÁME — .cta-alt, .cta-actions
   i .hours--inline zůstávají přesně tak, jak je má homepage. Kdyby se to tady
   nastylovalo zvlášť, rozejde se to při první změně na jedné ze stránek.
   ⚠️ Barvy VÝHRADNĚ z proměnných base.css. Žádný nový odstín.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Pořadí sloupců na mobilu ─────────────────────────────────────────────
   Na úzké obrazovce jde formulář NAHORU, před text vedle něj. Na homepage to
   tak není a je to správně — tam si člověk čte cestu k nabídce. Sem ale chodí
   ten, kdo se už rozhodl ozvat, a nesmí kvůli tomu odscrollovat půl obrazovky.
   ⚠️ Scoped na .kcontact, ať se sdílená .cta-grid na jiných stránkách nehne. */
@media(max-width:879px){
  .kcontact .cta-form-wrap{order:-1;margin-bottom:4px}
}

/* ── Rychlá fakta vedle formuláře ──────────────────────────────────────────
   Pro člověka, který nechce vyplňovat vůbec nic a jde si jen pro adresu
   a otevírací dobu. Definition list, protože to definice doslova jsou. */
.kfacts{display:grid;gap:14px;margin:26px 0 0;padding:20px 0 0;
  border-top:1px solid var(--border)}
.kfacts>div{display:grid;gap:2px}
.kfacts dt{display:flex;align-items:center;gap:8px;font-size:.82rem;letter-spacing:.06em;
  text-transform:uppercase;font-weight:600;color:var(--muted)}
.kfacts dt .ic{width:1.05em;height:1.05em;color:var(--orange);flex:none}
.kfacts dd{margin:0;padding-left:calc(1.05em + 8px);font-weight:600;color:var(--navy)}
@media(min-width:560px){ .kfacts{grid-template-columns:1fr 1fr} }

/* ── Důvěra pod tlačítkem formuláře ───────────────────────────────────────
   Tři věty, které rozhodují vteřinu před odesláním: co se s údaji stane, kdy
   přijde odpověď a že se člověk ničemu neupisuje. Drobné písmo schválně —
   je to ujištění, ne další nabídka. */
.kform-trust{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.kform-trust li{display:flex;align-items:flex-start;gap:9px;font-size:.86rem;
  line-height:1.45;color:var(--muted)}
.kform-trust svg{width:16px;height:16px;flex:none;margin-top:.16em;fill:none;
  stroke:var(--green-600);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ── Kroky po odeslání ────────────────────────────────────────────────────
   Na mobilu svisle s čárou vlevo, od 760 px vodorovně. Poslední krok má
   oranžové kolečko: tam a nikde dřív začíná závazek. */
.ksteps{list-style:none;margin:0;padding:0;position:relative;counter-reset:kstep}
.ksteps::before{content:"";position:absolute;left:19px;top:16px;bottom:16px;width:2px;
  background:var(--border)}
.ksteps li{position:relative;padding:0 0 26px 56px}
.ksteps li:last-child{padding-bottom:0}
.ksteps-n{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;background:var(--surface);color:var(--navy);
  border:2px solid var(--navy);box-shadow:0 0 0 4px var(--bg);
  font-family:var(--font-head);font-weight:700;font-size:1rem}
.bg-surface .ksteps-n{box-shadow:0 0 0 4px var(--surface)}
.ksteps-n--pay{background:var(--orange);border-color:var(--orange);color:#fff}
.ksteps b{display:block;font-family:var(--font-head);font-weight:600;color:var(--navy);
  font-size:1.06rem;margin-bottom:.2em}
.ksteps span:not(.ksteps-n){display:block;color:var(--muted);font-size:.95rem;line-height:1.5}
.ksteps-note{text-align:center;color:var(--muted);font-size:.94rem;margin:26px 0 0}
@media(min-width:760px){
  .ksteps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  /* ⚠️ Čára musí končit ve STŘEDU krajních koleček, ne u okraje mřížky —
     jinak přesahuje před jedničku a za čtyřku a vypadá to rozbitě. Při čtyřech
     stejných sloupcích jsou středy na 12,5 % a 87,5 % šířky. Když se počet
     kroků změní, PŘEPOČÍTAT: střed prvního = 100/(2n) %, posledního = 100−100/(2n) %. */
  .ksteps::before{left:12.5%;right:12.5%;top:19px;bottom:auto;width:auto;height:2px}
  .ksteps li{padding:56px 0 0;text-align:center;display:flex;flex-direction:column}
  .ksteps-n{left:50%;transform:translateX(-50%)}
  /* Bez pevné výšky začínaly popisky v každém sloupci jinde a řada působila
     rozházeně (nadpisy se lámou na jeden nebo dva řádky). */
  .ksteps b{min-height:2.6em}
}

/* ── Karty kanálů ─────────────────────────────────────────────────────────
   Karta nese hlavně větu „kdy se to hodí" — bez ní je to jen čtyřikrát tentýž
   odkaz. WhatsApp má zelený proužek, protože je to primární kanál. */
.kchan{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:620px){ .kchan{grid-template-columns:1fr 1fr;gap:18px} }
@media(min-width:1000px){ .kchan{grid-template-columns:repeat(4,1fr)} }
.kchan-card{display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);padding:22px 20px;
  box-shadow:var(--shadow);position:relative;overflow:hidden;
  transition:transform .15s ease,box-shadow .15s ease}
.kchan-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.kchan-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--orange)}
.kchan-card--wa::before{background:var(--green)}
.kchan-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:var(--orange-tint);color:var(--orange-600);margin-bottom:14px}
.kchan-card--wa .kchan-ico{background:rgba(37,163,90,.12);color:var(--green-600)}
.kchan-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.kchan-card h3{font-size:1.14rem;margin:0 0 .5em}
/* ⚠️ Štítek „kdy se to hodí" je tmavý text na světlém podkladu, ne oranžový
   text na bílé. Oranžová i zelená v naší paletě projdou kontrastem jen jako
   VELKÝ text (§11) a tohle je drobné písmo — barvu proto nese podklad. */
.kchan-when{display:inline-block;font-family:var(--font-head);font-weight:600;
  font-size:.76rem;letter-spacing:.04em;color:var(--navy);background:var(--orange-tint);
  padding:.32em .7em;border-radius:999px;margin:0 0 .8em}
.kchan-card--wa .kchan-when{background:rgba(37,163,90,.14)}
.kchan-card p{color:var(--muted);font-size:.95rem;line-height:1.55;margin:0}
.kchan-go{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:16px;
  font-family:var(--font-head);font-weight:600;font-size:.95rem;color:var(--navy);
  text-decoration:none;word-break:break-word}
/* Telefonní číslo se nesmí zalomit uprostřed — jinak zůstane šipka sama na řádku. */
.kchan-nowrap{white-space:nowrap}
.kchan-go svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .15s ease}
.kchan-go:hover{color:var(--orange-600);text-decoration:none}
.kchan-go:hover svg{transform:translateX(3px)}

/* ── Schéma oblasti působnosti ────────────────────────────────────────────
   ⚠️ Kreslené SVG, ne mapa. Žádný vložený podklad zvenčí — celý web jede bez
   cizích požadavků a kontaktní stránka není výjimka.
   Rozměry v SVG jsou uživatelské jednotky ve viewBoxu 400×320, takže se
   popisky zvětšují spolu s obrázkem a na mobilu zůstanou čitelné. */
.kmap{display:grid;gap:24px;grid-template-columns:1fr;align-items:center}
@media(min-width:900px){ .kmap{grid-template-columns:1.05fr .95fr;gap:40px} }
.kmap-fig{margin:0;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:16px 14px 12px;box-shadow:var(--shadow)}
.kmap-svg{display:block;width:100%;height:auto}
.kmap-fig figcaption{margin-top:8px;text-align:center;color:var(--muted);
  font-size:.84rem;line-height:1.45}
.kmap-area{fill:var(--navy-tint);stroke:var(--navy);stroke-width:1.6;
  stroke-dasharray:7 6;opacity:.9}
.kmap-cap{fill:var(--muted);font-family:var(--font-head);font-weight:600;font-size:12px;
  letter-spacing:.08em;text-transform:uppercase}
.kmap-dot{fill:var(--surface);stroke:var(--navy);stroke-width:2.4}
.kmap-dot--far{fill:var(--surface);stroke:var(--muted);stroke-width:2.4}
.kmap-t{fill:var(--navy);font-family:var(--font-body);font-size:13px;font-weight:500}
.kmap-t--far{fill:var(--muted)}
.kmap-t--home{font-family:var(--font-head);font-weight:700;font-size:17px;
  letter-spacing:-.01em}
.kmap-far{stroke:var(--muted);stroke-width:1.6;stroke-dasharray:5 6;fill:none;opacity:.75}
.kmap-pin{fill:var(--orange)}
.kmap-pin-eye{fill:var(--surface)}

.kwhere h3{font-size:1.2rem;margin-bottom:.7em}
.kwhere-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.kwhere-list li{display:flex;gap:12px;align-items:flex-start}
.kwhere-list .ic{width:22px;height:22px;flex:none;margin-top:1px;color:var(--orange)}
.kwhere-list b{display:block;font-family:var(--font-head);font-weight:600;
  font-size:.86rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  margin-bottom:1px}
.kwhere-list span{color:var(--navy);font-weight:500;line-height:1.45}
.kwhere-note{margin:20px 0 0;color:var(--muted);font-size:.95rem;line-height:1.6}

/* ── Doložené číslo na konci ──────────────────────────────────────────────
   ⚠️ Jen čísla z analytiky klienta (dokumenty/PROOF-DATA.md). Nic dopočítaného,
   nic odhadnutého. */
.kproof{margin:26px auto 0;max-width:64ch;text-align:center;color:var(--muted);
  font-size:.97rem;line-height:1.6}
.kproof strong{color:var(--navy)}
.kcta{margin-top:1.8em;text-align:center}