/* ═══════════════════════════════════════════════════════════════════════════
   TVORBA WEBU — doplňkové styly JEN pro /sluzby/tvorba-webu.
   Načítá se přes $extra_css, ostatní stránky si ho nevyžádají.

   ⚠️ NIC TU NEPŘEPISUJE base.css. Všechny vlastní třídy začínají `tw-`, takže
   se nemůžou potkat se sdílenými styly ani s tím, co si zvlášť dělají sourozenecké
   stránky ve /sluzby/. Jediné pravidlo vázané na cizí jméno je doladění
   `.scrollhint` úplně dole — je komentované a vysvětlené na místě.

   Barvy jen z proměnných base.css (navy / oranžová / muted / border / surface).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Drobnosti používané na víc místech stránky ───────────────────────────── */
/* Poznámka pod sekcí („Další práce najdete v referencích"). Je to jediná
   dvojice utilit, kterou tahle stránka potřebuje — víc jich sem nepřidávat,
   od toho jsou pojmenované bloky níž. */
.tw-center{text-align:center}
.tw-muted{color:var(--muted);font-size:.96rem;margin:26px 0 0}

/* ── Hlavička stránky: tlačítka pod úvodním odstavcem ─────────────────────── */
.tw-hero .hero-cta{margin:26px 0 10px}
.tw-hero-note{font-size:.95rem;color:var(--muted);margin:0}
.tw-hero-note b{color:var(--navy);font-weight:600}

/* ═══════════════════════════════════════════════════════════════════════════
   UKÁZKY PRÁCE — přepínač tří reálných webů v jednom rámu okna prohlížeče.
   Stejná mechanika jako schéma níž a ze stejného důvodu: tři skryté
   radiobuttony stojí PŘED mřížkou, takže se na aktivní panel i na aktivní
   záložku dá dosáhnout sourozeneckým selektorem (~). Klikání obstarají
   <label>, klávesnice šipky mezi radiobuttony, bez CSS zůstanou vidět všechny
   tři náhledy pod sebou.
   ⚠️ Neaktivní panely jsou display:none, takže se jejich náhledy (vysoké
   tisíce pixelů) vůbec nestahují — proto tři ukázky nezdrží načtení stránky.
   ═══════════════════════════════════════════════════════════════════════════ */
.tw-show{position:relative}
.tw-show-r{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}

.tw-show-tabs{display:grid;gap:9px;margin:0 auto 24px;max-width:860px}
.tw-show-tabs label{display:block;cursor:pointer;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:13px 16px;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.tw-show-tabs label:hover{border-color:#d8d2c5}
.tw-show-tabs b{display:block;font-family:var(--font-head);font-weight:600;color:var(--navy);
  font-size:1.04rem;line-height:1.25}
.tw-show-tabs span{display:block;font-size:.88rem;color:var(--muted);margin-top:3px}
@media(min-width:720px){
  .tw-show-tabs{grid-template-columns:repeat(3,1fr);gap:12px}
  .tw-show-tabs label{text-align:center}
}

/* Aktivní záložka: oranžový obrys a stín. Barvu textu neměníme — nadpis karty
   má být čitelný ve všech třech stavech stejně. */
#tw-s1:checked ~ .tw-show-grid label[for="tw-s1"],
#tw-s2:checked ~ .tw-show-grid label[for="tw-s2"],
#tw-s3:checked ~ .tw-show-grid label[for="tw-s3"]{border-color:var(--orange);box-shadow:var(--shadow)}

/* Klávesnice: radiobutton je neviditelný, tak obtáhneme celou řadu záložek. */
.tw-show-r:focus-visible ~ .tw-show-grid .tw-show-tabs{outline:2px solid var(--orange);
  outline-offset:7px;border-radius:var(--radius)}

.tw-show-p{display:none;margin:0 auto;max-width:660px}
#tw-s1:checked ~ .tw-show-grid .tw-show-p1,
#tw-s2:checked ~ .tw-show-grid .tw-show-p2,
#tw-s3:checked ~ .tw-show-grid .tw-show-p3{display:block}
.tw-show-p .site-window{border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-lg);background:var(--surface)}
.tw-show-p figcaption{margin-top:16px;text-align:center;color:var(--muted);font-size:.95rem;
  max-width:58ch;margin-left:auto;margin-right:auto;line-height:1.55}
.tw-show-p figcaption b{color:var(--navy);font-family:var(--font-head);font-weight:600}
/* Štítky (role + balíček) na vlastním řádku nad popiskem. Musí být na svém
   řádku: „Náš web na klíč" je právní tvrzení o tom, čí je to práce (§6), a
   nesmí splynout s větou pod ním. */
.tw-show-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 11px}
.tw-show-chips .pf-role,.tw-show-chips .portfolio-tag{margin:0}

@media(prefers-reduced-motion:reduce){ .tw-show-tabs label{transition:none} }

/* ═══════════════════════════════════════════════════════════════════════════
   ANATOMIE STRÁNKY — schéma vlevo, popisky vpravo, přepíná se kliknutím.
   Bez jediného řádku JavaScriptu: pět skrytých radiobuttonů stojí PŘED mřížkou,
   takže se na zvýrazněný díl schématu i na aktivní popisek dá dosáhnout
   sourozeneckým selektorem (~). Bez myši to obslouží klávesnice (šipky mezi
   radiobuttony), bez CSS zůstane čitelný seznam.
   Schéma je kreslené inline SVG — nic se nestahuje a nic neposkočí.
   ═══════════════════════════════════════════════════════════════════════════ */
.tw-anat{position:relative}
/* Radiobutton je vidět jen pro klávesnici a čtečku; klikání obstarají <label>. */
/* Přepínač leží uvnitř své položky (viz komentář v tvorba-webu.php).
   Schová se, ale zůstává na svém místě v dokumentu — proto NE position:absolute
   s posunem na začátek komponenty, to způsobovalo skok stránky při kliknutí. */
.tw-anat-r{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.tw-anat-grid{display:grid;grid-template-columns:1fr;gap:24px;align-items:start}
@media(min-width:900px){
  .tw-anat-grid{grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:44px;align-items:center}
}

/* Rám schématu — stejná logika jako okno prohlížeče u ukázek webů. */
.tw-wire{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:12px}
.tw-wire svg{display:block;width:100%;height:auto}
.tw-wire .frame{fill:var(--surface);stroke:var(--border);stroke-width:1.4}
.tw-wire .chrome{fill:#eef1f7}
.tw-wire .edge{stroke:var(--border);stroke-width:1.2}
.tw-wire .dot{fill:#cfd5e2}
.tw-wire .urlbar{fill:var(--surface);stroke:var(--border);stroke-width:1.2}
/* Nezvýrazněné díly stránky jsou bledé, aktivní ztmavne do navy a jeho
   „tlačítková" místa zoranžoví. Podklad aktivního dílu se rozsvítí. */
.tw-wire .hl{fill:var(--orange-tint);opacity:0;transition:opacity .25s ease}
.tw-wire .sh{fill:#ccd3e4;transition:fill .25s ease}
.tw-wire .sh-a{fill:#e8d0c2;transition:fill .25s ease}

/* ── Konkrétní obsah ve schématu ──────────────────────────────────────────
   Schéma od 12. 8. 2026 ukazuje, co v které sekci doopravdy je — nadpis,
   recenze, stránky, formulář, strojová data. Texty proto MUSÍ zůstat čitelné
   pořád: kdyby ztmavovaly a světlaly jako tvary `.sh`, byla by z nich ve
   výchozím stavu šedá kaše a celý smysl by se ztratil. Výběr bodu proto
   pozná člověk podle podkladu `.hl`, ne podle textu.
   ⚠️ Velikosti písma jsou v jednotkách viewBoxu (360 na šířku), takže se
   škálují spolu s obrázkem. Pod 8 už to na mobilu není čitelné — níž nejít. */
.tw-wire text{font-family:var(--font-body);dominant-baseline:auto}
.tx-h{fill:var(--navy);font-family:var(--font-head);font-weight:700;font-size:15px;
  letter-spacing:-.3px}
.tx-m{fill:var(--muted);font-size:9px}
.tx-s{fill:var(--muted);font-size:8px}
/* Popisek sekce — verzálky s rozpalem, stejně jako `.kicker` na stránce. */
.tx-l{fill:var(--muted);font-size:7px;font-weight:700;letter-spacing:1.1px}
.tx-u{fill:var(--muted);font-size:8.5px}
.tx-p{fill:var(--navy);font-size:8.5px;font-weight:600;text-anchor:middle}
.tx-ph{fill:var(--muted);font-size:8.5px}
.tx-b{fill:#fff;font-size:9px;font-weight:700;text-anchor:middle}
.tx-o{fill:var(--navy);font-size:8.5px;font-weight:600;text-anchor:middle}
.tx-star{fill:var(--star);font-size:9px;letter-spacing:.5px}
/* Strojová data. Neproporcionální písmo dává najevo, že to není text pro lidi. */
.tx-k{fill:var(--orange-600);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:8px}
.tx-v{fill:var(--navy);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:8px}

.tw-wire .card{fill:var(--bg);stroke:var(--border);stroke-width:1}
.tw-wire .foto{fill:#dfe4ef}
.tw-wire .foto-s{fill:#fff}
.tw-wire .foto-h{fill:#c3cadb}
.tw-wire .page{fill:var(--bg);stroke:var(--border);stroke-width:1}
.tw-wire .page-a{fill:var(--navy)}
.tw-wire .pole{fill:var(--bg);stroke:var(--border);stroke-width:1}
.tw-wire .btn-a{fill:var(--orange)}
.tw-wire .btn-o{fill:none;stroke:var(--navy);stroke-width:1.3}
.tw-wire .kod{fill:var(--navy-tint)}
.tw-wire .lock{fill:none;stroke:var(--muted);stroke-width:1.3;stroke-linecap:round;
  stroke-linejoin:round}
.tw-wire .bolt{fill:var(--orange)}

.tw-anat:has(#tw-a1:checked) .tw-anat-grid .p1 .hl,
.tw-anat:has(#tw-a2:checked) .tw-anat-grid .p2 .hl,
.tw-anat:has(#tw-a3:checked) .tw-anat-grid .p3 .hl,
.tw-anat:has(#tw-a4:checked) .tw-anat-grid .p4 .hl,
/* Body 6–8 přibyly 12. 8. 2026 — rychlost, strojová data a titulek s adresou.
   Ve schématu leží MIMO stránku (lišta prohlížeče a pruh pod oknem), protože
   je návštěvník nevidí. Kdyby se přidával devátý bod, patří sem taky. */
.tw-anat:has(#tw-a5:checked) .tw-anat-grid .p5 .hl,
.tw-anat:has(#tw-a6:checked) .tw-anat-grid .p6 .hl,
.tw-anat:has(#tw-a7:checked) .tw-anat-grid .p7 .hl{opacity:1}

.tw-anat:has(#tw-a1:checked) .tw-anat-grid .p1 .sh,
.tw-anat:has(#tw-a2:checked) .tw-anat-grid .p2 .sh,
.tw-anat:has(#tw-a3:checked) .tw-anat-grid .p3 .sh,
.tw-anat:has(#tw-a4:checked) .tw-anat-grid .p4 .sh,
.tw-anat:has(#tw-a5:checked) .tw-anat-grid .p5 .sh,
.tw-anat:has(#tw-a6:checked) .tw-anat-grid .p6 .sh,
.tw-anat:has(#tw-a7:checked) .tw-anat-grid .p7 .sh{fill:var(--navy)}

.tw-anat:has(#tw-a1:checked) .tw-anat-grid .p1 .sh-a,
.tw-anat:has(#tw-a2:checked) .tw-anat-grid .p2 .sh-a,
.tw-anat:has(#tw-a3:checked) .tw-anat-grid .p3 .sh-a,
.tw-anat:has(#tw-a4:checked) .tw-anat-grid .p4 .sh-a,
.tw-anat:has(#tw-a5:checked) .tw-anat-grid .p5 .sh-a,
.tw-anat:has(#tw-a6:checked) .tw-anat-grid .p6 .sh-a,
.tw-anat:has(#tw-a7:checked) .tw-anat-grid .p7 .sh-a{fill:var(--orange)}

/* Popisky vedle schématu */
.tw-anat-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.tw-anat-list label{display:grid;grid-template-columns:auto 1fr;gap:3px 14px;cursor:pointer;
  padding:13px 15px;border-radius:var(--radius-sm);border:1px solid transparent;
  transition:background .2s ease,border-color .2s ease,box-shadow .2s ease}
.tw-anat-list label:hover{background:var(--surface)}
.tw-anat-n{grid-row:span 2;width:30px;height:30px;border-radius:50%;background:var(--navy-tint);
  color:var(--navy);font-family:var(--font-head);font-weight:700;font-size:.9rem;
  display:grid;place-items:center;transition:background .2s ease,color .2s ease}
.tw-anat-t{font-family:var(--font-head);font-weight:600;color:var(--navy);font-size:1.05rem;line-height:1.28}
.tw-anat-d{color:var(--muted);font-size:.95rem;line-height:1.5}

.tw-anat:has(#tw-a1:checked) .tw-anat-grid label[for="tw-a1"],
.tw-anat:has(#tw-a2:checked) .tw-anat-grid label[for="tw-a2"],
.tw-anat:has(#tw-a3:checked) .tw-anat-grid label[for="tw-a3"],
.tw-anat:has(#tw-a4:checked) .tw-anat-grid label[for="tw-a4"],
.tw-anat:has(#tw-a5:checked) .tw-anat-grid label[for="tw-a5"],
.tw-anat:has(#tw-a6:checked) .tw-anat-grid label[for="tw-a6"],
.tw-anat:has(#tw-a7:checked) .tw-anat-grid label[for="tw-a7"]{background:var(--surface);
  border-color:var(--border);box-shadow:var(--shadow)}

.tw-anat:has(#tw-a1:checked) .tw-anat-grid label[for="tw-a1"] .tw-anat-n,
.tw-anat:has(#tw-a2:checked) .tw-anat-grid label[for="tw-a2"] .tw-anat-n,
.tw-anat:has(#tw-a3:checked) .tw-anat-grid label[for="tw-a3"] .tw-anat-n,
.tw-anat:has(#tw-a4:checked) .tw-anat-grid label[for="tw-a4"] .tw-anat-n,
.tw-anat:has(#tw-a5:checked) .tw-anat-grid label[for="tw-a5"] .tw-anat-n,
.tw-anat:has(#tw-a6:checked) .tw-anat-grid label[for="tw-a6"] .tw-anat-n,
.tw-anat:has(#tw-a7:checked) .tw-anat-grid label[for="tw-a7"] .tw-anat-n{background:var(--orange);color:#fff}

/* Klávesnice: radiobutton je neviditelný, takže obtáhneme celý seznam —
   uživatel pak vidí, že se šipkami hýbe právě tady. */
.tw-anat:has(.tw-anat-r:focus-visible) .tw-anat-list{outline:2px solid var(--orange);
  outline-offset:8px;border-radius:var(--radius)}

.tw-anat-hint{text-align:center;color:var(--muted);font-size:.92rem;margin:18px 0 0}

@media(prefers-reduced-motion:reduce){
  .tw-wire .hl,.tw-wire .sh,.tw-wire .sh-a,.tw-anat-list label,.tw-anat-n{transition:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   SROVNÁNÍ — ruční statický web vs. šablona v redakčním systému.
   Není to <table>: na 390px displeji se třísloupcová tabulka nedá číst. Na
   mobilu je z každého řádku malý blok s vlastními popiskami, od 860 px se to
   srovná do tří sloupců a popisky nahradí jedna hlavička.
   ⚠️ Nikdy sem nepsat jméno konkrétní konkurence (§6) — porovnává se ZPŮSOB
   stavby webu, ne firma.
   ═══════════════════════════════════════════════════════════════════════════ */
.tw-cmp{margin-top:4px}
.tw-cmp-head{display:none}
.tw-cmp-row{padding:18px 4px;border-bottom:1px solid var(--border)}
.tw-cmp-row:last-child{border-bottom:0}
.tw-cmp-row h3{font-size:1.06rem;margin:0 0 .55em}
.tw-cmp-cell{display:flex;gap:10px;align-items:flex-start;font-size:.97rem;line-height:1.5;margin:0 0 9px}
.tw-cmp-cell:last-child{margin-bottom:0}
.tw-cmp-cell svg{width:19px;height:19px;flex:none;margin-top:2px;fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.tw-cmp-us{color:var(--ink)}
.tw-cmp-us svg{stroke:var(--orange)}
.tw-cmp-them{color:var(--muted)}
.tw-cmp-them svg{stroke:#b6b0a4}
.tw-cmp-lab{color:var(--navy);font-weight:600}
@media(min-width:860px){
  .tw-cmp-head,.tw-cmp-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) minmax(0,1.1fr);
    gap:0 28px;align-items:start}
  .tw-cmp-head{padding:0 4px 12px;border-bottom:2px solid var(--border)}
  .tw-cmp-head span{font-family:var(--font-head);font-weight:600;font-size:.95rem;color:var(--muted)}
  .tw-cmp-head .tw-cmp-hus{color:var(--orange-600)}
  .tw-cmp-row{padding:20px 4px}
  .tw-cmp-row h3{margin:0}
  .tw-cmp-cell{margin:0}
  .tw-cmp-lab{display:none}
}

/* ── Tlačítka v tmavém pruhu na konci stránky ─────────────────────────────── */
/* Třída .cta-actions je tam schválně: main.js podle ní pozná, že je na
   obrazovce hlavní výzva, a schová spodní mobilní lištu, aby se tlačítka
   nezdvojovala. Tohle jen srovná řadu na střed. */
.tw-bandcta{justify-content:center}

/* ── Okno s ukázkou webu ──────────────────────────────────────────────────── */
/* Nápovědu „Posuňte se webem" jinde sundává po prvním posunutí nova.js. Ten se
   načítá jen na homepage, takže by tu visela pořád; schováme ji ve chvíli, kdy
   s oknem někdo pracuje (myš nebo klávesnice). Na dotyku zůstane — tam je
   potřeba, protože posun uvnitř rámu není na první pohled znát. */
.site-window:hover .scrollhint,
.site-window:focus-within .scrollhint{opacity:0}

/* ── Widget rychlosti ─────────────────────────────────────────────────────
   Ciferník se skóre vlevo, čtyři naměřená čísla vpravo.
   ⚠️ Hodnoty i vyplnění ciferníku počítá PHP z pole $rychlost v tvorba-webu.php.
   Do stylopisu se žádné číslo z měření nepíše — rozešlo by se s ním. */
.speed{display:grid;gap:26px;grid-template-columns:1fr;align-items:center;
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);
  padding:28px 24px;max-width:1000px;margin:0 auto}
@media(min-width:820px){
  .speed{grid-template-columns:auto 1fr;gap:44px;padding:34px 38px}
}

/* Ciferník. Číslo leží uprostřed kružnice přes position:absolute, takže
   nezvětšuje výšku a nic nepodskakuje. */
.speed-dial{position:relative;width:120px;height:120px;margin:0 auto;flex:none}
.speed-dial svg{display:block;transform:rotate(-90deg)}
.speed-track{fill:none;stroke:var(--navy-tint);stroke-width:10}
.speed-fill{fill:none;stroke:var(--green-600);stroke-width:10;stroke-linecap:round;
  stroke-dasharray:var(--speed-dash) var(--speed-gap);
  stroke-dashoffset:var(--speed-dash);
  transition:stroke-dashoffset 1.1s cubic-bezier(.65,.02,.3,1) .15s}
/* Před odhalením je oblouk schovaný, při odhalení se dokreslí. */
.reveal.in .speed-fill{stroke-dashoffset:0}
.speed-num{position:absolute;left:0;right:0;top:50%;transform:translateY(-64%);
  text-align:center;font-family:var(--font-head);font-weight:700;color:var(--navy);
  font-size:2.5rem;line-height:1;letter-spacing:-.03em}
.speed-max{position:absolute;left:0;right:0;bottom:26px;text-align:center;
  color:var(--muted);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
@media(prefers-reduced-motion:reduce){
  .speed-fill,.reveal.in .speed-fill{stroke-dashoffset:0;transition:none}
}

.speed-lead{color:var(--muted);font-size:1.02rem;line-height:1.6;margin:0 0 20px}
.speed-lead b{color:var(--navy);font-weight:700}

/* Čtyři čísla. Na mobilu pod sebou, od 620 px do dvou sloupců — čtyři vedle
   sebe by měly nečitelně úzký popisek. */
.speed-facts{list-style:none;margin:0;padding:0;display:grid;gap:16px;
  grid-template-columns:1fr}
@media(min-width:620px){ .speed-facts{grid-template-columns:1fr 1fr;gap:18px 30px} }
.speed-facts li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline}
.speed-facts b{font-family:var(--font-head);font-weight:700;color:var(--orange-600);
  font-size:1.3rem;letter-spacing:-.02em;white-space:nowrap}
.speed-facts span{color:var(--muted);font-size:.93rem;line-height:1.5}
.speed-src{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--border);
  color:var(--muted);font-size:.9rem;line-height:1.55}

/* ── Kde weby stavíme ─────────────────────────────────────────────────────
   Odstavec s obcemi a pod ním čtyři krátké boxy. Obce jsou tučně schválně:
   člověk z Kladna má svoje město najít pohledem, ne čtením. */
.tw-kde-lead{color:var(--muted);font-size:1.02rem;line-height:1.7;margin:0 0 26px;
  max-width:74ch}
.tw-kde-lead b{color:var(--navy);font-weight:600}
.tw-kde{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:760px){ .tw-kde{grid-template-columns:1fr 1fr;gap:18px} }
.tw-kde-box{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:20px 18px}
.tw-kde-box b{display:block;font-family:var(--font-head);font-weight:600;color:var(--navy);
  font-size:1.02rem;margin-bottom:.3em;line-height:1.3}
.tw-kde-box span{color:var(--muted);font-size:.95rem;line-height:1.55}
.tw-kde-box i{font-style:italic}

/* ── „Kde pracujeme": text vlevo, schematická mapka vpravo ────────────────
   Sekce byla do 12. 8. 2026 jen dva odstavce a čtyři boxy pod nimi — Alexandr
   ji označil za část, které chybí obrázek. Mapka je ta samá komponenta jako
   na /sluzby/seo (styly v base.css). */
.tw-kde-top{display:grid;gap:26px;grid-template-columns:1fr;align-items:center;
  margin-bottom:28px}
@media(min-width:820px){ .tw-kde-top{grid-template-columns:1fr 1fr;gap:40px} }
.tw-kde-text .tw-kde-lead{margin-bottom:1em}
.tw-kde-text .tw-kde-lead:last-child{margin-bottom:0}
/* Uvnitř mřížky nemá mapka roztahovat sloupec — drží se šířky, kterou dostane. */
.tw-kde-top .mapcard{margin:0}

/* ── Podnadpis POD H1, ne v něm (23. 9. 2026, SEO audit) ───────────────────
   Do té doby byl `.h1-sub` <span> uvnitř <h1> a nadpis pro vyhledávač zněl
   jako dvě věty. Teď je to samostatný <p>. Mezery se tu dorovnávají tak, aby
   vzhled zůstal stejný jako dřív:
   • H1 ztratí spodní okraj (dřív ležel POD podnadpisem, který byl uvnitř),
   • horní mezeru dál dává `.nhero--page .h1-sub{margin-top:.78em}` z base.css,
   • spodní okraj podnadpisu převezme původní `.nhero h1{margin-bottom:.55em}`,
     tedy 0,55 × velikost písma nadpisu (stejný clamp jako v base.css).
   ⚠️ Když se v base.css změní velikost `.nhero h1`, musí se změnit i tady. */
.nhero--page h1.tw-h1{margin-bottom:0}
.nhero--page .tw-h1-sub{margin-bottom:calc(.55 * clamp(1.85rem,7.4vw,3.9rem))}