/* ── FONT ── */
@font-face {
  font-family: 'Outfit';
  src: url('fonts/outfit-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('fonts/outfit-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('fonts/outfit-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  color-scheme: light;
  --font-base:                 'Outfit', system-ui, -apple-system, sans-serif;
  --color-primary:             #FCC50F;
  --color-primary-dark:        #D9A400;
  --color-primary-light:       #FFF6DC;
  --color-primary-contrast:    #221C10;
  --color-primary-text-safe:   #221C10;
  --color-secondary:           #16324A;
  --color-secondary-dark:      #0E2233;
  --color-secondary-contrast:  #ffffff;
  --color-secondary-text-safe: #866607; /* tmavá/sytá varianta primary zlaté pro odkazy v textu — navy jako text
                                            splývalo s --color-text, tohle prochází kontrastem (~4.9:1) na bílém */
  --color-bg:                  #FBF8F1;
  --color-bg-alt:              #F5EFDF;
  --color-surface:             #ffffff;
  --color-text:                #262220;
  --color-text-muted:          #6E655A;
  --color-border:              #E7E1D3;
}

/* Zvětšení celého webu — text i mezery jsou v rem, takže se škálují
   proporčně spolu (výchozí prohlížeče je 16px). */
html { font-size: 17px; }

/* Horní menu na desktopu: původní velikost (16px) místo 17px a užší mezery
   mezi položkami — při zvětšení webu bylo menu příliš dlouhé. 16/17 rem =
   16px při html 17px. Mobilní menu (header--nav-mobile, třídu přidává JS)
   zůstává beze změny. */
.header:not(.header--nav-mobile) .nav a { font-size: 0.941rem; }
/* Mezery jen nad 1200px — níže je přebírá jádro (1rem, viz style.css → Logo),
   jinak by menu při 961–1200px přetékalo. */
@media (min-width: 1201px) {
  .header:not(.header--nav-mobile) .nav > ul { gap: 1.5rem; }
}

/* Odkazy v textu ať jsou na první pohled vidět jako odkazy — samotná tmavá
   zlatá (--color-secondary-text-safe výše) na rychlé projetí splývala s
   okolním textem. Tučné písmo + podtržení v plné jasné primární zlaté
   (ne v barvě textu) přidává druhý, výraznější vizuální signál. */
main a {
  font-weight: 600;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: 2px;
}

/* Na zlatém/tmavě zlatém pozadí by zlaté podtržení splynulo s pozadím.
   currentColor = automaticky stejná barva, jakou má v tom kontextu text
   (viz jádrové .section--primary a:not(.btn) v style.css), takže se
   nemusí ručně hledat další barva pro každý typ podkladu.
   .section--dark a:not(.btn) navíc chybí i v jádru (jen .section--primary
   ho má) — needit v15 bez domluvy, viz .podkldy/STAV-projektu.md. */
.section--primary a:not(.btn) { text-decoration-color: currentColor; }
.section--dark    a:not(.btn) {
  color: var(--color-primary-contrast);
  text-decoration-color: currentColor;
}
.section--dark a:not(.btn):hover { color: color-mix(in srgb, var(--color-primary-contrast) 80%, transparent); }

/* ── Vlastní úpravy projektu ──
   Barvy zadány ručně (ne přes barvy-navrh.php) — primary #FCC50F je jasná
   žlutá s nízkým kontrastem vůči bílé, nástroj ji nekorektně ztmavil a
   text odvodil ze stejného odstínu (vyšlo bahnitě hnědě). Viz
   .podkldy/TODO-barvy-navrh-bug.md pro detail a návrh opravy nástroje. */

/* .grid--2-1: poměr sloupců 2:1 místo rovných .grid[data-cols="2"] (1:1).
   Řešeno vlastní třídou, ne inline stylem — inline by přebilo i jádrové
   zalomení na 1 sloupec pod 600px (viz style.css .grid[data-cols="2"]
   v media query), takže mobilní collapse by přestal fungovat.
   Selektor musí mít stejnou/vyšší specificitu než .grid[data-cols="2"]
   (třída+atribut = 2 "body" specificity) — samotné .grid--2-1 (1 tělo)
   by prohrálo, proto .grid[data-cols="2"].grid--2-1.
   Otestováno funkční i na mobilu (2026-09-04) — kandidát na obecnou
   utilitu v jádru v15 (.grid--2-1/--1-2 apod.), viz
   .podkldy/STAV-projektu.md → TODO. Needit v15 bez domluvy. */
.grid[data-cols="2"].grid--2-1 { grid-template-columns: 2fr 1fr; }
@media (max-width: 600px) {
  .grid[data-cols="2"].grid--2-1 { grid-template-columns: 1fr; }
}

/* .proc-zivot-grid (Proč právě Forever + Život s Forever, uvod.php) —
   jádrové .grid[data-cols="2"] se láme na 1 sloupec až pod 600px, ale
   obsah týhle konkrétní sekce (foto+text vlevo, galerie vpravo) potřebuje
   víc místa: mezi 600-800px šířky okna oba sloupce dohromady nešly zmenšit
   pod svoji minimální obsahovou šířku (min-width:auto na grid položkách je
   výchozí u CSS gridu) a mřížka přetékala mimo okno (ověřeno 2026-09-13,
   iframe test na 700px — .proc-zivot-grid clientWidth 644px, scrollWidth
   700px). Řešení: zalomit na 1 sloupec dřív, stejný vzor jako
   .grid--2-1 výše. */
@media (max-width: 960px) {
  .grid[data-cols="2"].proc-zivot-grid { grid-template-columns: 1fr; }
}

/* .o-mne__profil (Proč právě Forever, uvod.php) — fotka vlevo, text vpravo.
   Na mobilu fotka (160px) sebere většinu šířky a text vpravo zbyde jako
   úzký sloupec (~170px při 390px okně). Pod 600px proto fotka nahoru a text
   pod ni na plnou šířku. Fotka zůstává 160×200 — zdroj img/martin.jpg má
   jen 160×160 px, víc by se rozmazal. */
@media (max-width: 600px) {
  .o-mne__profil { flex-direction: column; }
}

/* Uvozovka .testimonial__text::before v "Proč právě Forever" — jádro jí dělá
   místo vlevo (padding-left:1.25rem), uvod.php ho ale inline ruší (text má
   lícovat se jménem pod ním) a uvozovka pak zasahovala do "J" v "Jmenuji".
   Místo vlevo nevracet — uvozovka jde nad první řádek. */
#o-mne .testimonial__text { padding-top: .8rem; }
#o-mne .testimonial__text::before { top: .0rem; left: -.4rem; }

/* PAGE_SPINE_PHOTO (hero-spoluprace.jpg): postava je v horní části fotky,
   výchozí center ořezával hlavu — zarovnáno k hornímu okraji. Volba
   konkrétní fotky, ne systémová věc, proto jen tady, ne v jádru. */
.page-spine-photo { background-position: center top; }

/* .btn--lg má v jádru white-space:nowrap (style.css) — u delších textů
   („Chci se dozvědět více →" + druhé tlačítko vedle) na úzkém mobilu
   přeteče přes okraj boxované CTA karty (padding navíc k .container).
   Pod 480px dovolit zalomení na 2 řádky místo přetečení — jen pro --lg,
   krátká tlačítka jinde nedotčena. Obecně platný problém (kandidát na
   v15 core), zatím jen tady — viz .podkldy/STAV-projektu.md → TODO. */
@media (max-width: 480px) {
  .btn--lg { white-space: normal; text-align: center; }
}

/* Větší kolečka kroků (jádro 52px → 70px) + větší číslo. Spojovací čára
   .steps::before je v jádru na top:26px (střed 52px kolečka), proto se
   posouvá na 35px, aby zůstala uprostřed větších koleček. */
.step__num {
  width:     70px;
  height:    70px;
  font-size: var(--text-2xl);
}
.steps::before { top: 35px; }
.step h3 { font-size: var(--text-lg); }

/* .steps má v jádru gap:0 (funguje na desktopu — kroky jsou v jedné řadě
   propojené vodorovnou čárou ::before, žádná svislá mezera potřeba).
   V mobilních media queries (768px/480px) se ale grid zalomí do 2, resp.
   1 sloupce (víc řádků) a gap:0 zůstává — kroky pod sebou pak nemají žádný
   svislý odstup, číslo kroku "naráží" na text kroku nad ním. Doplněn
   row-gap jen pro tyhle dvě mobilní varianty. Obecně platný problém
   (kandidát na v15 core), zatím jen tady — viz .podkldy/STAV-projektu.md
   → TODO. */
@media (max-width: 768px) {
  .steps[data-cols="3"],
  .steps[data-cols="4"] { row-gap: var(--space-md); }
}
@media (max-width: 480px) {
  .steps[data-cols="2"],
  .steps[data-cols="3"],
  .steps[data-cols="4"] { row-gap: var(--space-md); }
}

/* Homepage hero (uvod.php) běží na obyčejné .section, ne na jádrové .hero
   komponentě — .section má natvrdo padding-block:var(--space-lg) (64px).
   Zmenšeno na --space-md, ať je hero kompaktnější (na mobilu to bylo
   zbytečně moc prázdného místa nad "Start Your Journey"; na desktopu
   kratší textový sloupec zase líp vizuálně sedí s fotkou vpravo).
   Projektově specifické (vlastní hero markup), needit .section obecně
   v jádru. */
.hero-uvod { padding-block: var(--space-md); }


/* Kontakt – CTA karta pod formulářem (blok 'kontakt-text' z data/bloky.json).
   kontakt.php je jádrový soubor (update-export ho přepisuje), proto se blok
   stylí jen tady přes id nadpisu, které vypisuje blok(). Styl se nedává přímo
   na .container: inline padding by přepsal jeho padding-inline a karta by se
   na mobilu nalepila na okraj obrazovky. Místo toho má karta šířku obsahu
   containeru (100 % minus boční okraje), takže lícuje s mřížkou nad ní.
   Když blok v adminu vyprázdníš, blok() nic nevypíše a karta zmizí s ním. */
.container:has(> #kontakt-text) {
  width:         calc(100% - 2 * var(--container-pad));
  max-width:     calc(var(--container-md) - 2 * var(--container-pad));
  padding:       var(--space-md);
  background:    var(--color-bg-alt);
  border-radius: var(--radius-md);
  border-left:   4px solid var(--color-primary);
}
#kontakt-text { margin-top: 0; }
@media (max-width: 480px) {
  .container:has(> #kontakt-text) { padding: var(--space-sm); }
}

/* ── Karty materiálů (priloha_karty, MWS 2.80) — vzhled jako dřívější karty na úvodu ──
   Obálky dokumentů na výšku: vyšší plocha, celá obálka na bílém podkladu, tlačítko na středu. */
.priloha-karty {
  --priloha-karta-obrazek: 380px;
}
.priloha-karta__obrazek { background: var(--color-bg); }
.priloha-karta__akce    { text-align: center; }