/* ═══════════════════════════════════════════════════════════════════════════
   PŘÍPADOVÁ STUDIE — doplňkové styly JEN pro /pripadova-studie/*.
   Načítají se přes $extra_css, ostatní stránky si soubor nevyžádají.

   ⚠️ NIC TU NEPŘEPISUJE base.css. Všechny vlastní třídy začínají `cs-`, takže
   se nemůžou potkat se sdílenými styly ani se sousední `reseni-stehovaci.css`
   (ta má prefix `st-`). Jediné pravidlo vázané na cizí jméno je doladění
   `.site-window` UVNITŘ `.cs-win` — mimo tuhle stránku se neuplatní.

   ⚠️ Pás čísel a okno s webem jsou schválně vizuálně SHODNÉ s oborovou
   stránkou: je to tentýž doložený výsledek a lišit se má výklad, ne čísla.
   Pravidla se ale nesdílí — oborová stránka svůj soubor načítá zvlášť a nesmí
   se rozbít tím, že tady někdo něco přepíše.

   Barvy VÝHRADNĚ z proměnných base.css. Žádná nová paleta.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Poznámka pod hlavičkou — říká, odkud čísla jsou. Musí být vidět dřív,
   než člověk dojde k prvnímu údaji, jinak čte čísla jako marketing. */
.cs-note{font-size:.92rem;color:var(--muted);margin:18px 0 0}

/* ═══════════════════════════════════════════════════════════════════════════
   1. HLAVIČKA PROJEKTU — čtyři fakta v řadě (obor, místo, dodávka, rozsah).
   <dl>, ne tabulka: je to čtveřice dvojic název/hodnota, ne mřížka dat.
   ═══════════════════════════════════════════════════════════════════════════ */
.cs-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 18px;margin:0}
@media(min-width:860px){ .cs-meta{grid-template-columns:repeat(4,minmax(0,1fr));gap:0} }
.cs-meta > div{padding:0 16px}
@media(min-width:860px){ .cs-meta > div + div{border-left:1px solid var(--border)} }
.cs-meta dt{font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--orange-600);margin-bottom:7px}
.cs-meta dd{margin:0;font-family:var(--font-head);font-weight:600;color:var(--navy);
  font-size:1.02rem;line-height:1.35}

/* ═══════════════════════════════════════════════════════════════════════════
   2. VÝCHOZÍ STAV — tři karty. Levý oranžový proužek je jediná dekorace;
   karty nesou text, ne ikonu, protože „chybějící web" se nakreslit nedá.
   ═══════════════════════════════════════════════════════════════════════════ */
.cs-before{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:760px){ .cs-before{grid-template-columns:repeat(3,1fr);gap:22px} }
.cs-bitem{background:var(--surface);border:1px solid var(--border);
  border-left:3px solid var(--orange);border-radius:var(--radius);padding:22px 22px 20px}
.cs-bitem h3{font-family:var(--font-head);font-weight:700;color:var(--navy);
  font-size:1.06rem;line-height:1.3;margin:0 0 9px}
.cs-bitem p{margin:0;color:var(--muted);font-size:.97rem;line-height:1.6}

/* ═══════════════════════════════════════════════════════════════════════════
   3. ČTYŘI KROKY — číslovaný postup. Číslo je v <span aria-hidden>, protože
   pořadí už nese <ol>; čtečka by ho jinak přečetla dvakrát.
   ⚠️ `list-style:none` je nutné: bez něj by se vedle našeho kolečka
   vykreslila ještě výchozí číslice prohlížeče.
   ═══════════════════════════════════════════════════════════════════════════ */
.cs-steps{list-style:none;margin:0;padding:0;display:grid;gap:22px;max-width:820px}
@media(min-width:760px){ .cs-steps{gap:26px} }
.cs-step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start}
.cs-num{width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;background:var(--navy);color:#fff;
  font-family:var(--font-head);font-weight:700;font-size:1.05rem;line-height:1}
.cs-step h3{font-family:var(--font-head);font-weight:700;color:var(--navy);
  font-size:1.12rem;line-height:1.3;margin:8px 0 8px}
.cs-step p{margin:0;color:var(--muted);font-size:.99rem;line-height:1.65}

/* ═══════════════════════════════════════════════════════════════════════════
   4. PÁS ČÍSEL — čtyři doložené údaje. Váhu nese typografie, ne rámeček.
   ═══════════════════════════════════════════════════════════════════════════ */
.cs-client{display:flex;justify-content:center;margin:0 0 26px}
.cs-client img{height:44px;width:auto}

.cs-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 16px;text-align:center}
@media(min-width:900px){
  .cs-stats{grid-template-columns:repeat(4,1fr);gap:0}
  .cs-stat + .cs-stat{border-left:1px solid var(--border)}
}
.cs-stat{padding:0 12px}
.cs-stat b{display:block;font-family:var(--font-head);font-weight:700;color:var(--navy);
  font-size:clamp(2.3rem,9vw,3.4rem);line-height:1;letter-spacing:-.035em}
.cs-stat b sup{color:var(--orange);font-size:.42em;font-weight:700;top:-.85em;
  position:relative;margin-left:.02em}
.cs-stat span{display:block;font-weight:600;color:var(--navy);margin-top:10px;font-size:1rem}
.cs-stat small{display:block;color:var(--muted);font-size:.9rem;margin-top:5px;line-height:1.45}

.cs-sub{max-width:70ch;margin:26px auto 0;text-align:center;color:var(--muted);
  font-size:.97rem;line-height:1.6}

/* ═══════════════════════════════════════════════════════════════════════════
   5. CO V ČÍSLECH NENÍ — seznam limitů. Úmyslně BEZ fajfek a bez zelené:
   nejsou to výhody, je to přiznání. Odrážka je proto obyčejná tečka
   v barvě textu, ne ikona.
   ═══════════════════════════════════════════════════════════════════════════ */
.cs-honest{list-style:none;margin:0 auto;padding:0;max-width:78ch;display:grid;gap:14px}
.cs-honest li{position:relative;padding:16px 18px 16px 40px;background:var(--bg);
  border:1px solid var(--border);border-radius:var(--radius);
  color:var(--muted);font-size:.99rem;line-height:1.62}
.cs-honest li::before{content:"";position:absolute;left:18px;top:25px;
  width:7px;height:7px;border-radius:50%;background:var(--navy);opacity:.45}
.cs-honest strong{color:var(--navy);font-weight:600}

/* ═══════════════════════════════════════════════════════════════════════════
   6. OKNO S WEBEM KLIENTA. Rám a stín jsou tady, posouvání a lišta jsou
   ze sdíleného `.site-window` v base.css. Výřez je vyšší než výchozích
   300 px — tohle je hlavní důkaz na stránce, ne doplněk vedle textu.
   ═══════════════════════════════════════════════════════════════════════════ */
.cs-win{margin:0 auto;max-width:720px}
.cs-win .site-window{border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-lg);background:var(--surface)}
.cs-win .site-window-view{max-height:460px}
@media(max-width:679px){ .cs-win .site-window-view{max-height:300px} }
.cs-win figcaption{margin-top:14px;text-align:center;color:var(--muted);font-size:.93rem;
  max-width:62ch;margin-left:auto;margin-right:auto;line-height:1.55}

/* ═══════════════════════════════════════════════════════════════════════════
   7. PŘENOSITELNOST — tři pravidla pro jiné obory.
   ═══════════════════════════════════════════════════════════════════════════ */
.cs-transfer{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:760px){ .cs-transfer{grid-template-columns:repeat(3,1fr);gap:22px} }
.cs-titem{background:var(--bg);border:1px solid var(--border);
  border-radius:var(--radius);padding:22px 22px 20px}
.cs-titem h3{font-family:var(--font-head);font-weight:700;color:var(--navy);
  font-size:1.06rem;line-height:1.3;margin:0 0 9px}
.cs-titem p{margin:0;color:var(--muted);font-size:.97rem;line-height:1.6}