/* ══════════════════════════════════════════════════════════════════════════
   /proc-my — styly JEN pro tuhle stránku. Načítá se přes $extra_css.

   ⚠️ Barvy VÝHRADNĚ z proměnných base.css. Žádný nový odstín ani velikost
   písma mimo škálu.
   ══════════════════════════════════════════════════════════════════════════ */

/* Skryté, ale ovladatelné klávesnicí — přepínače níž. Nepoužívat display:none,
   tím by prvek vypadl z pořadí tabulátoru. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── Přepínač tří modelů ───────────────────────────────────────────────────
   Tři možnosti (my / běžná agentura / poptávkový portál) a pod nimi panel,
   který se mění. Čistě CSS přes :checked — bez JS to funguje dál.
   ⚠️ Vstupy MUSÍ zůstat před panely, jinak sourozenecký selektor nefunguje. */
.mdl-tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:26px}
.mdl-tabs label{display:inline-flex;align-items:center;cursor:pointer;
  border:1px solid var(--border);background:var(--surface);border-radius:999px;
  padding:10px 18px;font-size:.95rem;font-weight:500;color:var(--navy);
  transition:background .15s,border-color .15s,color .15s}
.mdl-tabs label:hover{border-color:var(--navy)}
.mdl input{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0)}
.mdl input:focus-visible + label{outline:2px solid var(--orange);outline-offset:2px}
#m-my:checked      ~ .mdl-tabs label[for="m-my"],
#m-agentura:checked ~ .mdl-tabs label[for="m-agentura"],
#m-portal:checked  ~ .mdl-tabs label[for="m-portal"]{background:var(--navy);
  border-color:var(--navy);color:#fff}

.mdl-panel{display:none}
#m-my:checked       ~ .mdl-panels .mdl-panel--my,
#m-agentura:checked ~ .mdl-panels .mdl-panel--agentura,
#m-portal:checked   ~ .mdl-panels .mdl-panel--portal{display:block}

.mdl-card{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:26px 22px;box-shadow:var(--shadow)}
.mdl-card--us{border-color:var(--orange);box-shadow:0 10px 30px rgba(239,96,29,.13)}
.mdl-card h3{font-size:1.18rem;margin-bottom:.5em}
.mdl-list{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.mdl-list li{display:flex;gap:11px;align-items:flex-start;color:var(--muted);
  font-size:.97rem;line-height:1.5}
.mdl-list svg{width:19px;height:19px;flex:none;margin-top:2px;fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.mdl-list .ok svg{stroke:var(--green-600)}
.mdl-list .bad svg{stroke:var(--orange)}
.mdl-list b{color:var(--navy);font-weight:600}

/* ── Schéma: kam jde poptávka ─────────────────────────────────────────────
   Vlevo jedna poptávka → jedna firma (my), vpravo jedna poptávka → pět firem
   (model sdílených portálů). ⚠️ Popisuje se MODEL, nikdy konkrétní firma (§6). */
.lead{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:760px){ .lead{grid-template-columns:1fr 1fr;gap:26px} }
.lead-box{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:22px 20px}
.lead-box--us{border-color:var(--orange)}
.lead-box h3{font-size:1.06rem;margin-bottom:.2em}
.lead-box p{color:var(--muted);font-size:.94rem;margin:0 0 14px}
.lead svg{display:block;width:100%;height:auto;overflow:visible}
.lead-node{fill:var(--bg);stroke:var(--border);stroke-width:1.5}
.lead-node--us{fill:var(--orange-tint);stroke:var(--orange)}
.lead-node--rival{fill:var(--navy-tint);stroke:var(--border)}
.lead-t{fill:var(--navy);font-family:var(--font-head);font-weight:600;font-size:12px}
.lead-t--sm{fill:var(--muted);font-family:var(--font-body);font-weight:400;font-size:10.5px}
.lead-line{fill:none;stroke:var(--border);stroke-width:1.6}
.lead-line--us{stroke:var(--orange);stroke-width:2.4}
/* Čára se dokreslí, až sekce najede do obrazu. Bez JS (třída .in přidává
   main.js u .reveal) zůstane prostě nakreslená — nic se neztratí. */
.lead-line--us{stroke-dasharray:100;stroke-dashoffset:100;
  transition:stroke-dashoffset .9s ease .15s}
.reveal.in .lead-line--us{stroke-dashoffset:0}
@media(prefers-reduced-motion:reduce){
  .lead-line--us{transition:none;stroke-dashoffset:0}
}

/* ── Co vlastníte ─────────────────────────────────────────────────────────
   Čtyři věci, které po skončení spolupráce zůstávají klientovi. */
.own{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:620px){ .own{grid-template-columns:1fr 1fr} }
@media(min-width:980px){ .own{grid-template-columns:repeat(4,1fr)} }
.own li{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:18px 16px;text-align:center}
.own svg{width:34px;height:34px;margin:0 auto 10px;display:block;fill:none;
  stroke:var(--orange);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.own b{display:block;font-family:var(--font-head);font-weight:600;color:var(--navy);
  font-size:1rem;margin-bottom:.25em}
.own span{color:var(--muted);font-size:.9rem;line-height:1.45}

/* ── Tabulka tří cest (23. 9. 2026) ───────────────────────────────────────
   Styl je sdílený `.cmp` z base.css, tady jen odsazení od přepínače nad ní. */
.cmp--models{margin-top:34px}

/* ── Hero (23. 9. 2026) ───────────────────────────────────────────────────
   Stavba je sdílená (`.nhero` a spol. v base.css, homepage + LP + Kladno).
   Tady jen to, co patří JEN téhle stránce — proto všechno pod `.pm-hero`.
   První věta podnadpisu říká, co dostanete, a to je hlavní sdělení stránky:
   patří do navy, ne do šedé (stejně jako na /tvorba-webu-kladno). */
.pm-hero{padding-bottom:64px}
.pm-hero .h1-sub strong{color:var(--navy);font-weight:600}
.pm-hero .nproof{margin-top:22px}
/* Nadpis a oba řádky pod ním bez osiřelého slova („agentura", „DPH" samy na
   řádku vypadaly nedodělaně). `balance`/`pretty` jsou progresivní: kde je
   prohlížeč nezná, zalomí se text jako dřív. */
.pm-hero h1,.pm-hero .hero-price{text-wrap:balance}
.pm-hero .h1-sub{text-wrap:pretty}