/* ============================================================
   O nás
   Hero = jméno a místo (watermark Nového Jičína + holub).
   Obsah nese tmavá sekce „Kreativita je náš middle name.“: nadpis,
   krátký podtext a dva klidné bloky v pevné mřížce (viz „obsah
   tmavé sekce“).
   Přechod do závěru je Layered Cut. Závěr je jediná sekce na ose.

   Velký monitor: --k je 0 na 1440 a 1 na 2560 px (stejně jako
   hero úvodu, hlavička a služby). Tmavá sekce začíná v ose nadpisu
   hera (obsah 1280 px) a doprava roste až k hraně tlačítka
   v hlavičce, takže text na 2560 nestojí v úzkém sloupci uprostřed.

   Typografie (1440 → 2560, mobil):
     nadpis sekce       88 → 120 px (= závěr, --t-head), mobil ~37 px
     podtext            30 →  40 px (= závěr, --t-lead), mobil 21 px
     textové bloky      20 →  24 px, mobil 18 px
     závěr              stejný nadpis a text jako tmavá sekce; odkaz 20 → 24 px
   Nic pod 15 px.

   Pozadí je napevno (7. 10. 2026): scrollem řízená nálada
   (broskvový závěr) zrušená. Plocha stránky i pás kolem patičky
   jsou levandulové jako hero.

   Hero nese watermark Nového Jičína (1.5.1): tónový reliéf,
   inline SVG z assets/img/nj-watermark.svg (generuje ho
   nj-watermark/relief.py). Viz blok „hero · watermark“.
   ============================================================ */
.about-page{--k:calc((100vw - 1440px) / 1120);color:var(--ink);
  /* Společná škála pro nadpis + podtext tmavé sekce a závěru (rozhodnutí
     klienta 7. 10. 2026: obě sekce stejně velké, podle závěru). */
  --t-head:clamp(44px,calc(88px + 32 * var(--k)),120px);
  --t-lead:clamp(21px,calc(30px + 10 * var(--k)),40px);
  /* Široký editorial kontejner podle BlueGhostu (7. 10. 2026) pro tmavou
     sekci a S čím tvoříme: okraj 60 px od kraje okna, obsah nejvýš
     1800 px (na širokém monitoru se vycentruje, okraj pak roste). */
  --gutter:max(60px,calc((100% - 1800px) / 2))}
@media(max-width:1023px){.about-page{--gutter:32px}}
@media(max-width:599px){.about-page{--gutter:20px}}

/* Plocha i hlavička levandulové napevno (dřív je přebarvovalo about.js). */
html:has(.about-page) body{background:var(--lav)}
html:has(.about-page) header{background:color-mix(in srgb,var(--lav) 88%,transparent)}

.about-page h1,.about-page h2{text-wrap:balance}
.about-page p{text-wrap:pretty}
.about-page a:focus-visible{outline:3px solid var(--purple);outline-offset:6px;border-radius:4px}
/* Slova se spojovníkem (e-mail, e-shop) se nesmí lámat na „e-“ a zbytek. */
.ab-nw{white-space:nowrap}

/* ---------- hero ---------- */
.ab-hero{padding:clamp(64px,7.5vw,120px) 0 clamp(84px,9vw,140px)}
.ab-hero{--ab-h1:clamp(60px,9.6vw,152px)}
.ab-hero h1{font-size:var(--ab-h1);line-height:.94;letter-spacing:-.062em}
.ab-hero h1 span{color:var(--orange)}

/* ---------- hero · watermark ----------
   Otevřená kompozice, ne obrázek vedle nadpisu: zem kresby leží na
   spodní hraně sekce (město stojí na tmavé sekci pod herem), výška se řídí
   výškou hera. Kresba je pod textem (z-index -1 v izolovaném kontextu).

   Kotví se VĚŽ, ne okraj obrazovky: osa věže stojí 8,25 × velikost H1
   od levého okraje obsahu (konec „Jičína.“ je ~6,75 × H1), takže mezera
   mezi nadpisem a kresbou je na každé šířce stejná. Posun -44,44 % =
   osa věže v SVG (x 640 z 1440). Kresba je doprava delší, na širokém
   monitoru se odkryje víc náměstí a vpravo se rozpustí jako vlevo.

   Tóny jsou CSS proměnné --nj-lit, --nj-t1…t4, --nj-hi/sh/fr, --nj-line
   a dají se doladit tady, bez zásahu do SVG. */
/* Hero má levandulovou napevno. */
.ab-hero{position:relative;overflow:hidden;isolation:isolate;background:var(--lav)}
/* Šířku dává poměr stran viewBoxu (1440 × 581), ne zbývající místo —
   jinak by se kresba na širokém monitoru smrskla do pravého pruhu. */
.ab-mark{position:absolute;z-index:-1;bottom:0;height:100%;aspect-ratio:1440/581;max-width:none;pointer-events:none;
  left:calc(max(0px,(100% - 1280px) / 2) + 36px + var(--ab-h1) * 8.25);transform:translateX(-44.44%)}
.ab-mark-svg{display:block;width:100%;height:100%;overflow:visible}
/* Mariánský sloup stojí vlevo vedle nadpisu; na užších obrazovkách
   (nadpis začíná u okraje) by ho okraj uřízl, tak se nekreslí. */
@media (max-width:1359px){.ab-mark .nj-sloup{display:none}}
/* Holub: samostatná vrstva přes celé hero, pod textem (z-index -1 jako
   watermark, ale v DOM až za ním → nad městem). Posouvá ji holub.js jen
   přes transform (translate3d), takže ji skládá grafická karta a velké
   SVG města se při letu nepřekresluje. Bez JS zůstává skrytá. */
.njh{position:absolute;left:0;top:0;z-index:-1;pointer-events:none;visibility:hidden;will-change:transform}
.njh.is-live{visibility:visible}
/* Po startu je vrstva v <body> nad hlavičkou (z-index 60), aby holub
   mohl vletět i do pásu menu a byl vidět přes něj. Mobilní menu má 70. */
.njh.is-top{z-index:61}
.njh-svg{display:block;width:100%;height:100%;overflow:visible}

/* ---------- tmavá sekce ----------
   Barvy jako hero Teď už víte a úvodu (15. 10. 2026): navy přechod se
   světlem vlevo nahoře, nadpis bílý s oranžovou, podtext levandulový,
   bloky #D9DBF0 (dřív plná --navy a #C9CCE6). */
.ab-what{--cut-h:clamp(84px,calc(96px + 44 * var(--k)),140px);--top-h:clamp(24px,3.2vw,64px);
  position:relative;color:#D9DBF0;
  background:radial-gradient(120% 100% at 15% 10%,#3B4785 0%,#303B70 45%,#1E2659 100%);
  padding:clamp(88px,calc(112px + 40 * var(--k)),152px) 0 calc(var(--cut-h) + clamp(64px,calc(84px + 28 * var(--k)),112px))}
/* Spodní hrana hera: navy pod měkkou křivkou leží přes spodek hera
   (bottom:100 % = nad začátkem sekce), nic nepřidává na výšku.
   Uprostřed hrana na dolním okraji hera, navy stoupá jen u krajů;
   hloubka (--top-h) subtilní: 1440 → 46 px, 1920 → 61, max 64. */
.ab-top{position:absolute;left:0;bottom:calc(100% - 1px);width:100%;height:calc(var(--top-h) + 1px);display:block;pointer-events:none}
/* Hrana navazuje na horní řádek přechodu sekce: velký kus má vodorovný
   přechod (#ab-top-g v page-o-nas.php, 0 → 100 % šířky okna), levý kus
   leží celý v nejsvětlejším místě (u 0–22 % šířky), stačí mu jedna barva. */
.ab-top path{fill:url(#ab-top-g)}
.ab-top--l path{fill:#38447F}
/* Levé zvednutí: šířka = levá hrana nadpisu hera − 100 px (Mariánský
   sloup stojí ~76 px před ní). Pod 1360 px sloup chybí a obsah začíná
   u okraje, kus má pak nulovou šířku. */
.ab-top--l{width:max(0px,calc((100% - 1280px) / 2 + 36px - 100px));
  /* Výška roste se šířkou kusu (~1 : 5), jinak by úzký kus u kraje
     trčel jako zub. vw ≈ šířka sekce (height % se počítá z výšky). */
  height:calc(min(var(--top-h),max(0px,((100vw - 1280px) / 2 - 64px) * .2)) + 1px)}
/* Široký kontejner: obsah sahá k okrajům okna (--gutter), ne do úzkého
   středového sloupce. 12sloupcová mřížka. */
.ab-what-in{--col-gap:clamp(32px,calc(56px + 32 * var(--k)),88px);
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);
  padding-left:var(--gutter);padding-right:var(--gutter)}

/* ---------- obsah tmavé sekce ----------
   Tři stupně, všechno v 12sloupcové mřížce:
     nadpis   přes celou šířku, druhý řádek („middle name.“) oranžový,
     podtext  sloupce 1–8, o stupeň menší než nadpis, bílý,
     bloky    sloupce 1–5 a 7–11, klidné, jeden tón, stejná výška.
   Nadpis je dominantní, ale ne obří (96 → 136 px); bloky záměrně
   malé (20 → 24 px), aby nekonkurovaly nadpisu ani podtextu. */
.ab-what h2{grid-column:1 / -1;text-align:center;color:#fff;font-size:var(--t-head);
  letter-spacing:-.056em;line-height:1}
.ab-what h2 span{color:var(--orange)}
/* Podtext na ose, užší než nadpis — každá věta na vlastním řádku (<br>). */
.ab-sub{grid-row:2;grid-column:1 / -1;justify-self:center;text-align:center;margin-top:clamp(20px,calc(28px + 12 * var(--k)),40px);
  font-size:var(--t-lead);line-height:1.4;letter-spacing:-.015em;color:#C3BBF2}
/* Dvojice bloků: společná šířka 900 px (1440) → 1100 px (2560), na ose
   pod nadpisem; text v blocích zarovnaný vlevo, oba začínají na stejné
   výšce. */
.ab-pair{grid-row:3;grid-column:1 / -1;justify-self:center;width:min(100%,clamp(900px,calc(900px + 200 * var(--k)),1100px));
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(56px,calc(72px + 24 * var(--k)),96px);
  margin-top:clamp(44px,calc(56px + 20 * var(--k)),76px)}
.ab-b{font-size:clamp(18px,calc(20px + 4 * var(--k)),24px);line-height:1.6;color:#D9DBF0}


/* Layered Cut: dvě plochy přes spodní okraj navy. Mezivrstva je
   levandulová, pod ní světlý povrch sekce S čím tvoříme. */
.ab-cut{position:absolute;left:0;bottom:-1px;width:100%;height:calc(var(--cut-h) + 1px);display:block;pointer-events:none}
.ab-cut-mid{fill:#D3CCF7}
.ab-cut-low{fill:var(--page)}  /* plocha sekce S čím tvoříme */

/* ---------- s čím tvoříme ----------
   Kompaktní mezivěta mezi hlavní sekcí a závěrem, ne další hero.
   Vlastní světlý povrch (--page #FCFBFE), aby nesplývala s levandulovým
   závěrem. Desktop: vlevo nadpis a text (sloupce 1–4), vpravo loga
   (6–12) v jedné řadě, na jedné ose. Nahoře navazuje Layered Cut z navy, dole Soft
   Cut — jedna mělká hrana do levandule, bez mezivrstvy.
   Loga jsou oficiální jednobarevné verze; výšky laděné opticky (plné
   tvary menší, štíhlé wordmarky větší). Žádný hover efekt — GitHub
   i Blender zakazují efekty na logu. */
.ab-tools{--soft-h:clamp(28px,calc(40px + 16 * var(--k)),56px);
  position:relative;background:var(--page);
  padding:clamp(48px,calc(64px + 24 * var(--k)),88px) 0 calc(var(--soft-h) + clamp(48px,calc(64px + 24 * var(--k)),88px))}
.ab-tools-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(32px,calc(56px + 32 * var(--k)),88px);align-items:center;
  padding-left:var(--gutter);padding-right:var(--gutter)}
.ab-tools-copy{grid-row:1;grid-column:1 / span 4}
.ab-tools h2{font-size:clamp(34px,calc(44px + 12 * var(--k)),56px);letter-spacing:-.045em;line-height:1.05}
.ab-tools-text{margin-top:clamp(12px,calc(16px + 6 * var(--k)),22px);
  font-size:clamp(17px,calc(18px + 3 * var(--k)),21px);line-height:1.6;color:var(--body)}
/* Loga vpravo, poslední lícuje s pravou hranou kontejneru; pevná mezera
   (v širokém kontejneru by roztažení přes sloupce 6–12 dalo mezery
   ~180 px). Mezi textem a logy zůstává záměrné volné místo. */
.ab-tools-list{grid-row:1;grid-column:6 / -1;list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:0 clamp(56px,calc(72px + 24 * var(--k)),96px);
  --u:clamp(1px,calc(1px + .25 * var(--k)),1.25px)}  /* --k je délka 0–1 px, ne číslo */
.ab-tool{display:flex;align-items:center;justify-content:center;height:calc(56 * var(--u))}
.ab-tool img{display:block;width:auto;height:var(--h)}
.ab-tool--blender{--h:calc(26 * var(--u))}
.ab-tool--wordpress{--h:calc(38 * var(--u))}
.ab-tool--html5{--h:calc(48 * var(--u))}
.ab-tool--css3{--h:calc(44 * var(--u))}
.ab-tool--javascript{--h:calc(33 * var(--u))}
.ab-tool--github{--h:calc(25 * var(--u))}

/* Soft Cut do závěru: levandulová plocha pod mělkou hranou. */
.ab-soft{position:absolute;left:0;bottom:-1px;width:100%;height:calc(var(--soft-h) + 1px);display:block;pointer-events:none}
.ab-soft path{fill:var(--lav)}

/* ---------- závěr: jediná sekce na ose ---------- */
.ab-end{background:var(--lav);text-align:center;
  padding:clamp(72px,calc(110px + 50 * var(--k)),160px) 0 clamp(110px,calc(150px + 60 * var(--k)),210px)}
.ab-end .wrap{max-width:clamp(1280px,calc(1280px + 492 * var(--k)),1772px)}
.ab-end h2{font-size:var(--t-head);letter-spacing:-.056em;line-height:1}
.ab-end h2 span{color:var(--orange)}
.ab-end p{font-size:var(--t-lead);line-height:1.4;letter-spacing:-.015em;color:var(--ink);
  max-width:28ch;margin:clamp(28px,calc(40px + 16 * var(--k)),56px) auto clamp(36px,calc(48px + 16 * var(--k)),64px)}
.ab-link{display:inline-flex;align-items:center;gap:14px;color:var(--ink);font-size:clamp(17px,calc(20px + 4 * var(--k)),24px);font-weight:700;
  padding:12px 0;border-bottom:2px solid currentColor;transition:color .2s,gap .2s}
.ab-link svg{width:1em;height:1em}
.ab-link:hover{color:var(--orange);gap:18px}

/* Loga jsou na KAŽDÉ šířce v jedné řadě, nic nepadá o řádek níž.
   Pod 1280 px: nadpis a text nahoře, loga pod nimi od levé osy
   s mezerou, která roste se šířkou (nikdy víc, než se vejde).
   Pod 600 px: řada přes celou šířku a loga se zmenší přesně tak,
   aby se vešla (vektor — kvalita se nemění, ~20 px na 390 px). */
@media(max-width:1279px){
  .ab-tools-copy{grid-column:1 / -1}
  .ab-tools-text{max-width:40ch}
  .ab-tools-list{grid-row:2;grid-column:1 / -1;justify-content:flex-start;margin-top:clamp(36px,5vw,48px);
    gap:min(clamp(32px,calc(56px + 16 * var(--k)),72px),calc((100vw - 440px) / 5))}
}
@media(max-width:599px){
  .ab-tools{--soft-h:20px}
  /* Loga zabírají šířku bez okrajů (40 px) a pěti mezer po 20 px;
     6 log ≈ 300 jednotek. Krajní lícují s okraji textu. */
  .ab-tools-list{justify-content:space-between;gap:0;--u:min(1px,calc((100vw - 140px) / 300))}
  .ab-tool{height:calc(44 * var(--u))}
  .ab-tool--blender{--h:calc(22 * var(--u))}
  .ab-tool--github{--h:calc(21 * var(--u))}
  .ab-tool--wordpress{--h:calc(32 * var(--u))}
  .ab-tool--html5{--h:calc(40 * var(--u))}
  .ab-tool--css3{--h:calc(37 * var(--u))}
  .ab-tool--javascript{--h:calc(28 * var(--u))}
}

/* Pod 861 px jsou bloky pod sebou, v pořadí čtení. */
@media(max-width:860px){
  /* 12 sloupců × mezera ≥ 32 px by mřížku nepustilo pod ~392 px
     a na užším telefonu by se obsah ořízl. Bloky jsou tu pod sebou,
     mezera mezi sloupci nic nenese. */
  .ab-what-in{--col-gap:12px}
  .ab-tools-in{column-gap:12px}
  .ab-pair{grid-template-columns:1fr;row-gap:clamp(20px,3.5vw,28px);width:min(100%,40em)}
  .ab-b{text-align:center}
}

/* ---------- mobil ---------- */
@media(max-width:767px){
  /* Na mobilu nadpis zabírá celou šířku: kresba je menší, sedí dole
     vpravo pod textem a je o stupeň jemnější. */
  .ab-mark{height:56%;left:76%;opacity:.7}
  .ab-what{--cut-h:40px;--top-h:24px;padding-top:88px;padding-bottom:calc(var(--cut-h) + 72px)}
  /* Každá věta na jeden řádek: „Jen nezůstat pozadu.“ ≈ 9,2 × velikost písma. */
  .about-page{--t-head:clamp(32px,9.4vw,52px);--t-lead:21px}
  .ab-sub{max-width:none}
  .ab-b{font-size:18px}
  .ab-sub{margin-top:24px}
  .ab-pair{margin-top:36px}
  .ab-end{padding:56px 0 96px}
  .ab-link{font-size:17px}
}

@media(prefers-reduced-motion:reduce){
  .ab-link{transition:none}
}