/* ============================================================
   CFG – brand tokeny: směr 2 (navy & zlatá)
   Načítá se po cfg-base.css. Přepisuje --brand-* tokeny a navíc
   deklaruje lokální paletu (--navy, --gold, --paper, …), na kterou
   se odkazuje inline styl v index.html — bez tohoto souboru by
   sekce přišly o pozadí.
   ============================================================ */
:root {
  /* ---- přepis brand tokenů z cfg-base.css ---- */
  --brand-bg: #08192f;
  --brand-bg-rgb: 8, 25, 47;
  --brand-darker: #05101f;
  --brand-surface: #f4f3ef;
  --brand-accent: #d8a13a;
  --brand-text-on-dark: #eef2f8;
  --brand-text-on-dark-rgb: 238, 242, 248;

  /* ---- paleta směru 2 ---- */
  --navy: #08192f;
  /* tmavé sekce: hero, důvěra, kontakt */
  --navy-2: #0d2b4d;
  /* světlejší navy pro gradienty */
  --gold: #d8a13a;
  /* akcent: linky, čísla, CTA */
  --gold-soft: #e3b968;
  /* jemnější zlatá na tmavém */
  --gold-dark: #c99a3e;
  /* hover odkazů */
  --paper: #f4f3ef;
  /* světlé sekce */
  --paper-2: #eeece7;
  /* střídavé světlé sekce */
  --ink: #1a1f29;
  /* text na světlém */
  --ink-soft: #5c6270;
  /* sekundární text, popisky */

  /* ---- shared tokeny sladěné s paletou ---- */
  --text-dark: #1a1f29;
  --text-body: #5c6270;
  --text-muted: #5c6270;
  --divider-dark: rgba(26, 31, 41, .14);

  /* ---- kontrastní role (WCAG AA) ----
     Zlatá (#d8a13a) na papíru má ~2,1:1 — nesmí být výplní textu.
     Na papíru je text navy/ink; zlatá zůstává linka, ikona, CTA plocha.
     Na navy je zlatá OK (~7,6:1). */
  --accent-on-paper: var(--navy);
  /* Zlatá pro text na papíru — jen tam, kde má být barva vidět jako
     akcent (hover textových CTA). Tmavší odstín téže zlaté: 4,9:1 na
     --paper a 4,6:1 na --paper-2, tedy AA i pro drobnou sazbu, kterou
     --gold s 2,1:1 neprojde. */
  --gold-on-paper: #8a6414;
  --text-on-gold: var(--navy);
  --text-on-dark: var(--brand-text-on-dark);
  --text-on-dark-muted: rgba(var(--brand-text-on-dark-rgb), .72);
  --text-on-dark-soft: rgba(var(--brand-text-on-dark-rgb), .55);

  /* ---- layout ---- */
  --cfg-max: 1920px;
  /* šířka obsahového sloupce; pozadí sekcí jde vždy přes celé okno */

  /* ---- typografie ---- */
  --f-head: 'General Sans', 'Manrope', system-ui, sans-serif;
  --f-body: 'Manrope', system-ui, sans-serif;
  --f-ui: 'General Sans', 'Manrope', system-ui, sans-serif;

  /* ---- animace dat ----
     Doba dopočítání čísel a rozjezdu grafů. Jedna hodnota pro celý web:
     čte ji countUp v js/main.js i sloupcové grafy na /cfg-v-cislech/
     a /o-skupine/, aby čísla i grafy nabíhaly stejným tempem. Popisky
     hodnot z ní počítají svůj odstup, takže se s ní posunou taky. */
  --count-dur: 2000ms;
}

/* cfg-base.css nastavuje body na tmavý brand background; tady vyhrává papír */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  /* Barvu nepřepisovat — na navy by navy text zmizel (menu, patička).
     Sekce si hover barvu řeší samy; tady jen zlatá linka, pokud je. */
  text-decoration-color: var(--gold);
}

/* Cookie CTA: sdílený cfg-base dává bílou na brand-accent — na CFG
   zlaté CTA musí mít navy text (AA). */
.cfg-cc__btn--primary {
  color: var(--text-on-gold);
}

/* Pozadí sekcí jde přes celé okno (žádný cap na .cfg-page), obsah drží
   sloupec široký --cfg-max. Místo max-width se použije rostoucí
   padding-inline: sekce i fixní lišta si tak nechají pozadí od okraje
   k okraji a zúží se jen obsah. Vertikální odsazení má každý kontejner
   vlastní (fluidní clamp) v css/styles.css. */
.cfg-page {
  width: 100%;
}

.cfg-wrap {
  padding-inline: max(clamp(20px, 4vw, 56px), calc((100% - var(--cfg-max)) / 2));
}

/* ============================================================
   Animace (přeneseno z design canvasu)
   ============================================================ */
@keyframes cfgRise {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes cfgLine {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes cfgFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-16px);
  }
}

/* Reveal při scrollu. Bez JS (nebo když IntersectionObserver chybí)
   zůstává obsah viditelný — maskuje se teprve po .js-anim na <html>. */
[data-anim] {
  opacity: 1;
}

.js-anim [data-anim] {
  opacity: 0;
}

.js-anim [data-anim][data-shown] {
  animation: cfgRise .85s cubic-bezier(.2, .7, .2, 1) both;
}

@media (prefers-reduced-motion: reduce) {

  .js-anim [data-anim],
  .js-anim [data-anim][data-shown] {
    opacity: 1;
    animation: none;
  }
}
/* ============================================================
   Responsivita
   Odsazení a šířka sloupce se řeší fluidně (clamp / max) v .cfg-wrap
   a ve styles.css, takže media queries zbývají jen na kolaps gridů —
   ten se plynule vyjádřit nedá. Cílí na marker třídy, ne na inline
   styly, takže není potřeba !important.

   POZOR: marker sám o sobě nestačí. Má specificitu (0,1,0), stejnou
   jako pojmenovaná třída prvku (.oblasti-2, .hero-18, .kn-cards…),
   a tenhle soubor se načítá PŘED styles.css i před CSS podstránek —
   při shodě tedy vyhraje ten druhý a kolaps se vůbec neprojeví
   (media query specificitu nepřidává). Každý prvek s markerem proto
   musí mít kolaps i ve svém vlastním souboru; markery tu zůstávají
   jako výchozí hodnota pro prvky bez vlastního gridu. Zvyšovat jim
   specificitu nelze — přebily by podstránkám jejich vlastní hodnoty
   (např. .hero-18 na homepage chce v telefonu dva sloupce).
   ============================================================ */
@media (max-width: 1100px) {
  .cfg-g4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cfg-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {

  .cfg-g3,
  .cfg-g4,
  .cfg-foot {
    grid-template-columns: minmax(0, 1fr);
  }

  /* hero pozadí ztlumit, ať nepřebíjí text */
  [data-herobg] {
    background-position: 70% center;
    opacity: .5;
  }
}