@import url('pisma.css');

/* ==========================================================================
   EMDR Česká republika — základní styl
   Odvozeno z Figmy CmW6lyvMdixpKwp5CoBIuj a z „EMDR — pravidla projektu.md".
   Jen text, linky a jedna plocha. 1px linky. Prvky 36 px. Nic těžšího než Regular.
   ========================================================================== */

/* --------------------------------------------------------------- tokeny -- */

:root {
  /* Barvy — Figma `Design emdr.cz`, rám „Barvy" (190:352).
     Role jsou stejné jako u předlohy, mění se hodnoty:
       ink    #6023F5  primární violet   (byl #173a6d)
       papír  #F4F2F7                    (byl #fcfbf8)
     ⚠️ `#173A6D` („tmavé plátno" z návrhu) SE NEPOUŽÍVÁ. Je to inkoust
     webu emdrczech.cz a na fialovém webu se čte jako cizí modrá —
     jeho nález 6. 9. 2026: *„mouse overy obsahují modrou z designu
     emdrczech."* Tmavší stav proto nese `--ink-tmavy`, což je tmavá
     fialová **z loga ČIPE** (`#230079`), ne modrá.

     ⚠️ MAGENTA `#F523AE` Z NÁVRHU SE NEPOUŽÍVÁ. Jeho rozhodnutí
     6. 9. 2026: *„tlačítka nemůžou mít tento akcent, musí být fialová
     jako všechno ostatní"* a *„tu růžovou vlastně nikde nepoužijeme."*
     Web tak stojí na JEDNÉ barvě — rozdíl mezi klidem, stavem a akcí
     nese **sytost a plocha, ne odstín**. U předlohy to bylo obráceně:
     žlutá byla vyhrazená akci. Kdyby se magenta měla vrátit, je to
     jedna hodnota v `--akcent`.

     Vedlejší účinek, který se hodí: inkoust na magentě měl kontrast
     1,88 : 1 (nečitelné) a nejlepší varianta 3,66. Papír na fialové
     má **6,18 : 1**, tedy prakticky totéž co předloha (6,92). */
  --ink: #6023f5;
  --ink-tmavy: #230079;   /* tmavá fialová z loga ČIPE (190:5695) */
  --papir: #f4f2f7;
  --akcent: #6023f5;
  /* Linka je jediná v dokumentu, takže se jí srovná kontrast všude naráz:
     rámečky, separátory, řádky i obrysy prvků. Předloha ji má na 24 %
     (návrh 18 % byl na obrazovce příliš jemný) a to platí i tady. */
  --linka: rgba(96, 35, 245, 0.24);

  --text-primarni: #6023f5;
  --text-zakladni: rgba(96, 35, 245, 0.85);
  --text-tlumeny: rgba(96, 35, 245, 0.62);
  --text-slaby: rgba(96, 35, 245, 0.42);

  --plocha-pillu: rgba(244, 242, 247, 0.34);
  --plocha-akce: #6023f5;
  --plocha-vstupu: rgba(244, 242, 247, 0.6);

  /* cizí ochranná známka — nepřebarvovat, pravidlo o žluté se na ni nevztahuje */
  --eu-modra: #1d3d76;
  --eu-zluta: #fbbb15;

  /* efekty. Figma 16 / 60; převod do CSS půlí, pravidla předepisují plnou
     hodnotu. Když bude v náhledu příliš měkké, sníží se tady na 8 / 30. */
  --rozostreni-prvku: 16px;
  --rozostreni-prekryvu: 60px;

  /* mřížka — 4 sloupce, okraj 36, mezera 24 (při 1440) */
  --okraj: clamp(20px, 14.06px + 1.524vw, 36px);
  --mezera: clamp(16px, 13.03px + 0.762vw, 24px);
  /* Rytmus sloupců je relativní — obsah roste s oknem a drží čtyřsloupec,
     sloupec je (100 % − 3 mezery) / 4. Nad 1704 se ale zastaví a vycentruje:
     tenhle strop je změřený na referenci (stripe.dev drží 1704 px při 1920
     i při 2560). Při 1440 z toho vyjde obsah 1368 — přesně jak je ve Figmě. */
  --sirka-obsahu: 1704px;

  /* rytmus — 8 / 16 / 24 / 32 / 48 / 64 / 96, nic mimo */
  --r1: 8px;
  --r2: 16px;
  --r3: 24px;
  --r4: 32px;
  --r5: 48px;
  --r6: 64px;
  --r7: 96px;

  /* jedna výška ovládacích prvků, pevně */
  --prvek: 36px;
  --radius: 4px;
  --radius-ramecek: 3px;

  /* pohyb — jemný easing, pomalu */
  --easing: cubic-bezier(0.22, 0.61, 0.36, 1);
  --easing-jemny: cubic-bezier(0.33, 0, 0.15, 1);
  /* dlouhý dojezd — rychle se rozjede, dlouho doplouvá */
  --easing-dojezd: cubic-bezier(0.16, 1, 0.3, 1);
  --prechod: 220ms var(--easing);
}

/* ------------------------------------------------------------ typografie -- */
/* Stupně jsou plynulé mezi mobilem (390) a desktopem (1440), aby držela
   i mezilehlá pásma. Řádkování u display nejde pod 1.0 — háček na Č. */

:root {
  --f-display: clamp(44px, 12.8px + 8vw, 128px);
  --f-h1: clamp(34px, 16.16px + 4.571vw, 82px);
  --f-h2: clamp(26px, 21.54px + 1.143vw, 38px);
  --f-h3: clamp(22px, 19.77px + 0.571vw, 28px);
  --f-h4: clamp(21px, 18.4px + 0.667vw, 28px);
  /* řádkování H4 — přepínač harmoniky se podle něj centruje na řádek nadpisu */
  --lh-h4: 1.22;
  --f-h5: clamp(19px, 17.14px + 0.476vw, 24px);
  --f-perex: clamp(17px, 15.51px + 0.381vw, 21px);
  --f-text-l: clamp(16px, 15.63px + 0.095vw, 17px);
  --f-text: 15px;
  --f-text-s: 13.5px;

  --f-nav: 11.5px;
  --f-popisek-sekce: 11px;
  --f-meta: 10.5px;
  --f-popisek-pole: 9.5px;
  --f-mikropopisek: 9px;
  --f-cislo-linky: 17px;
  --f-udaj: 11.5px;
}

/* ------------------------------------------------------------------ reset -- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  /* Plynulé rolování NEDĚLÁ prohlížeč — neumí u něj nastavit délku ani
     křivku a je na kotvy příliš rychlé a rovnoměrné. Přebírá to
     `EMDRRolovani` ve `web.js`, které jede s dlouhým dojezdem.
     Kdyby JS nebyl, kotvy prostě skočí; to je v pořádku. */
  scroll-behavior: auto;
}

body {
  margin: 0;
  background: var(--papir);
  color: var(--text-zakladni);
  font-family: 'Geist', system-ui, -apple-system, sans-serif;
  font-size: var(--f-text);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none; /* nikdy nedopočítávat tučnost */
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
p,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection {
  background: var(--akcent);
  color: var(--papir);
}

/* ------------------------------------------------------------ typo třídy -- */

.display,
.h1,
.h2,
.h3,
.h4,
.h5 {
  color: var(--text-primarni);
  text-wrap: balance;
}

.display {
  font-size: var(--f-display);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 400;
}

.h1 {
  font-size: var(--f-h1);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 400;
}

.h2 {
  font-size: var(--f-h2);
  line-height: 1.32;
  letter-spacing: -0.016em;
  font-weight: 300;
}

.h3 {
  font-size: var(--f-h3);
  line-height: 1.4;
  letter-spacing: -0.012em;
  font-weight: 300;
}

.h4 {
  font-size: var(--f-h4);
  line-height: 1.22;
  letter-spacing: -0.014em;
  font-weight: 400;
}

.h5 {
  font-size: var(--f-h5);
  line-height: 1.26;
  letter-spacing: -0.01em;
  font-weight: 400;
}

.perex {
  font-size: var(--f-perex);
  line-height: 1.54;
  letter-spacing: -0.005em;
  color: var(--text-zakladni);
}

.text-l {
  font-size: var(--f-text-l);
  line-height: 1.66;
}

.text-s {
  font-size: var(--f-text-s);
  line-height: 1.58;
}

/* Od desktopu se stupně dotáhnou na hodnoty z Figmy.

   Mez je 769, ne 768. Rozvržení v `stranka.css` jede na `max-width: 768px`,
   takže při `min-width: 768px` platily na přesně 768 px obě sady naráz —
   desktopová typografie v mobilním rozvržení. */
@media (min-width: 769px) {
  .display {
    line-height: 1.01;
    letter-spacing: -0.044em;
  }
  .h1 {
    letter-spacing: -0.036em;
  }
  .h2 {
    line-height: 1.26;
    letter-spacing: -0.022em;
  }
  .h3 {
    line-height: 1.38;
    letter-spacing: -0.018em;
  }
  .h4 {
    line-height: 1.14;
    letter-spacing: -0.02em;
  }
  :root {
    --lh-h4: 1.14;
  }
  .h5 {
    line-height: 1.18;
    letter-spacing: -0.016em;
  }
  .perex {
    line-height: 1.52;
    letter-spacing: -0.01em;
  }
  .text-l {
    line-height: 1.65;
  }
  body {
    line-height: 1.55;
  }
}

/* monospace — navigace, popisky, meta a technické hodnoty */

.mono,
.popisek-sekce,
.meta,
.popisek-pole,
.mikropopisek,
.cislo-linky,
.udaj,
.nav-popisek {
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  line-height: 1;
  text-transform: uppercase;
}

.nav-popisek {
  font-size: var(--f-nav);
  letter-spacing: 0.04em;
  font-weight: 500;
}

.popisek-sekce {
  font-size: var(--f-popisek-sekce);
  letter-spacing: 0.08em;
  font-weight: 500;
  color: var(--text-tlumeny);
}

.meta {
  font-size: var(--f-meta);
  letter-spacing: 0.06em;
  font-weight: 500;
  color: var(--text-slaby);
}

.popisek-pole {
  font-size: var(--f-popisek-pole);
  letter-spacing: 0.08em;
  font-weight: 500;
  color: var(--text-slaby);
}

.mikropopisek {
  font-size: var(--f-mikropopisek);
  letter-spacing: 0.06em;
  font-weight: 400;
  color: var(--text-slaby);
}

.cislo-linky {
  font-size: var(--f-cislo-linky);
  letter-spacing: 0;
  font-weight: 500;
  color: var(--text-primarni);
  text-transform: none;
}

.udaj {
  font-size: var(--f-udaj);
  letter-spacing: 0.02em;
  font-weight: 400;
  color: var(--text-slaby);
  text-transform: none;
}

/* chybějící údaj — pomlčka, nikdy se needituje pryč */
.pomlcka {
  color: var(--text-slaby);
}

.sl-1 { grid-column: span 1; }
.sl-2 { grid-column: span 2; }
.sl-3 { grid-column: span 3; }
.sl-4 { grid-column: span 4; }

/* ------------------------------------------------------- ovládací prvky -- */
/* Jedna výška 36 px, pevně. Nikdy neodvozovat z odsazení.
   Každý prvek je průsvitný a rozostřuje, co je pod ním. */

.prvek {
  display: inline-flex;
  align-items: center;
  gap: var(--r1);
  height: var(--prvek);
  /* Figma má 13. Po odstranění závorkových indexů se pilulky zúžily
     natolik, že skupina vpravo přestala lícovat s navigačním boxem —
     rozšířeno na 20 na jeho pokyn. Výška 36 zůstává závazná. */
  padding-inline: 20px;
  border: 1px solid var(--linka);
  border-radius: var(--radius);
  background: var(--plocha-pillu);
  -webkit-backdrop-filter: blur(var(--rozostreni-prvku));
  backdrop-filter: blur(var(--rozostreni-prvku));
  color: var(--text-primarni);
  white-space: nowrap;
  transition: border-color var(--prechod), color var(--prechod);
}

/* Obsah prvku je svisle na střed. Účaří se v prvcích neuplatňuje: všechny
   texty v nich mají stejný stupeň, takže účaří a střed vyjdou nastejno —
   ale `align-self: baseline` v boxu s pevnou výškou posune celý řádek
   nahoru a text přestane sedět na střed. */
.prvek > * {
  align-self: center;
}

/* Zvýraznění jen tam, kde se opravdu najíždí myší.

   Na dotykovém displeji není „odjetí" — po klepnutí zůstane `:hover`
   viset a prvek si drží zvýrazněný obrys i po výběru. Vypadá to, jako by
   byl pořád aktivní. Proto se hover uzavírá do dotazu na schopnost hoveru.

   Obrys jde z linky (24 % inkoustu) na plný inkoust. U předlohy to byla
   změna odstínu na žlutou; tady je celý web jednobarevný, takže stav
   nese sytost. */
@media (hover: hover) and (pointer: fine) {
  .prvek:hover {
    border-color: var(--akcent);
    color: var(--text-primarni);
  }
}

/* aktivní je stav, ne akce — tlumený obrys, ne plná plocha */
.prvek[aria-current='page'],
.prvek.je-aktivni {
  border-color: var(--text-tlumeny);
}


/* Akční tlačítko — jediné, co je PLNÁ plocha. Na jednobarevném webu
   je to jediné, čím se akce liší od stavu: ne odstínem, ale tím, že
   je vyplněná.

   Papír na fialové má 6,18 : 1, na hoveru 14,02 : 1. */
.prvek--akce,
.prvek--akce:hover,
.prvek--akce:focus-visible,
.prvek--akce:active {
  background: var(--plocha-akce);
  border-color: transparent;
  color: #fff;
}

/* ⚠️ Bílá MUSÍ být u všech stavů, ne jen v klidu. Obecné pravidlo
   `.prvek:hover { color: var(--text-primarni) }` má vyšší specifičnost
   (0,2,0) než `.prvek--akce` (0,1,0), takže při najetí přebilo barvu
   textu na fialovou — a ta je na fialové ploše nečitelná. Projevilo se
   to jako „tlačítka pod myší nejsou vidět" (jeho nález 6. 9. 2026).
   Proto jsou tu stavy vypsané a proto je barva bílá napevno, ne token. */
@media (hover: hover) and (pointer: fine) {
  .prvek--akce:hover {
    background: var(--ink-tmavy);
    border-color: transparent;
    color: #fff;
  }
}

.prvek--siroky {
  padding-inline: 18px;
}

.prvek--vstup {
  background: var(--plocha-vstupu);
}

/* ------------------------------------------------------------- rámečky -- */
/* Blok se neodlišuje plochou, ale rámečkem. */

.ramecek {
  border: 1px solid var(--linka);
  border-radius: var(--radius-ramecek);
  overflow: hidden;
}

/* Figma 20:8 a 104:6 — hlavička rámečku má 28 px, text 8 od horní hrany
   a 12 zleva. Dřív jsem měl 36, což zvedalo celý rámeček o 8. */
.ramecek-hlava {
  display: flex;
  align-items: baseline;
  gap: var(--r2);
  padding: 8px 12px;
  border-bottom: 1px solid var(--linka);
}

.ramecek-telo {
  padding: var(--r3);
}

/* --------------------------------------------------------------- předěl -- */
/* Nikdy tečka. Vlasová linka nebo lomítko. */

.delic {
  height: 1px;
  background: var(--linka);
  border: 0;
  margin: 0;
}

.lomitko {
  color: var(--text-slaby);
  padding-inline: var(--r1);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* krizové linky stojí na místě vždy, pohyb se vypíná úplně */
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------ přístupnost -- */

.jen-pro-cteni {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.preskocit {
  position: absolute;
  left: var(--okraj);
  top: -100px;
  z-index: 100;
  transition: top var(--prechod);
}

.preskocit:focus {
  top: 30px;
}