/* ==========================================================================
   Firma v Cajku – stavby.firmavcajku.cz
   Vzhled podle brand manuálu Firmy v Cajku, verze 1.0 (říjen 2026).
   Barvy, písma a rozměry jsou jen v bloku :root níže.
   ========================================================================== */

/* --- Písma (SIL OFL 1.1, licence ve fonts/OFL-*.txt), hostovaná lokálně,
       ořezaná na latin + latin-ext s plnou češtinou --- */
@font-face {
  font-family: "Sofia Sans Extra Condensed";
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url("fonts/sofia-sans-extra-condensed-700-900.woff2") format("woff2");
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/schibsted-grotesk-400-700.woff2") format("woff2");
}
@font-face {
  font-family: "Sofia Sans Semi Condensed";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("fonts/sofia-sans-semi-condensed-500-700.woff2") format("woff2");
}

/* ==========================================================================
   BRAND – jediný blok k výměně
   ========================================================================== */
:root {
  /* Paleta (manuál 2.1) – sedm barev, žádné přechody */
  --grafit: #1D1F20;        /* text a logo */
  --bridlice: #1D2D3D;      /* tmavé plochy */
  --ocel: #5980A6;          /* fajfka, akcent */
  --ocel-text: #416180;     /* drobný text v modré (5,8 : 1 na Papíru) */
  --obloha: #94BCE3;        /* akcent na tmavém */
  --signal: #F2C641;        /* jen tlačítko hlavní akce */
  --papir: #F2F2F3;         /* světlé plochy */
  --bila: #FFFFFF;          /* text na tmavém */

  /* Odstíny stavů převzaté z manuálu (6.1 tlačítka, 6.3 štítky) */
  --signal-najeti: #E5B52C;
  --signal-stisk: #D3A31F;
  --signal-neaktivni: #F9E5A9;
  --text-neaktivni: #99999A;
  --bridlice-najeti: #2C455D;
  --bridlice-stisk: #14202C;
  --bridlice-neaktivni: #99A0A7;
  --obrys-najeti: #F1F1F1;
  --obrys-stisk: #E3E3E3;
  --odkaz-neaktivni: #A9B7C5;
  --stitek-hotovo: #DCE7F2;
  --stitek-hotovo-text: #2C455D;
  --stitek-rozpracovano: #FBEFC4;   /* světlý odstín Signálu */
  --stitek-rozpracovano-text: #5C4708;
  --stitek-ceka: #E6E6E8;
  --stitek-ceka-text: #3A3C3E;

  /* Linky (manuál 4.2) – 1 px Grafit na 16 % */
  --linka: rgba(29, 31, 32, 0.16);
  --linka-pole: rgba(29, 31, 32, 0.5);      /* rámeček pole: 3,3 : 1 pro rukavice a slunce */
  --linka-tmava: rgba(255, 255, 255, 0.16);
  --linka-tmava-ovladac: rgba(255, 255, 255, 0.72);
  --text-tlumeny: rgba(29, 31, 32, 0.74);   /* 7,0 : 1 na bílé, 6,6 : 1 na Papíru */
  --text-tlumeny-tmave: rgba(255, 255, 255, 0.8);
  --fajfka-uvod: rgba(89, 128, 166, 0.16);  /* Ocel přes Břidlici, jako v manuálu 6.2 */
  --titan: var(--bridlice-neaktivni);        /* kovový rám telefonu v ukázce */

  /* Písma */
  --pismo-titulky: "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;
  --pismo-text: "Schibsted Grotesk", Arial, sans-serif;
  --pismo-cisla: "Sofia Sans Semi Condensed", "Arial Narrow", Arial, sans-serif;

  /* Hierarchie (manuál 3.3) – text drží 18 px kvůli čitelnosti na stavbě */
  --h1: clamp(3.25rem, 2rem + 5.2vw, 6rem);       /* 96 px při 1440 */
  --h2: clamp(2.5rem, 2rem + 1.6vw, 3rem);        /* 48 px */
  --h3: clamp(1.625rem, 1.4rem + 0.6vw, 2rem);
  --perex: clamp(1.25rem, 1.15rem + 0.4vw, 1.375rem); /* 22 px */
  --text: 1.125rem;                                /* 18 px */
  --text-maly: 1.0625rem;                         /* 17 px – drobný text podle manuálu */
  --stitek: 0.875rem;                              /* 14 px */

  /* Rozměry */
  --sirka: 1280px;
  --okraj: 80px;
  --mezera: 24px;
  --hlavicka: 80px;
  --logo-vyska: 28px;
  --tlacitko: 52px;
  --pole: 56px;

  /* Pohyb – stav se mění tónem barvy, plynule */
  --krivka: cubic-bezier(0.2, 0.7, 0.2, 1);
  --doba: 260ms;
}

/* ==========================================================================
   Základ
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; border-radius: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hlavicka) + 16px);
  background: var(--grafit);
}

body {
  margin: 0;
  font-family: var(--pismo-text);
  font-size: var(--text);
  font-weight: 400;
  line-height: 1.6;
  color: var(--grafit);
  background: var(--bila);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

::selection { background: var(--obloha); color: var(--grafit); }

img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--doba) var(--krivka), text-decoration-color var(--doba) var(--krivka), border-color var(--doba) var(--krivka), outline-color var(--doba) var(--krivka);
}

/* Fokus z klávesnice (manuál 6.1): obrys 2 px Ocel, odstup 3 px */
:where(a, button, input, textarea, [tabindex]) {
  outline: 2px solid transparent;
  outline-offset: 3px;
}
:where(a, button, input, textarea, [tabindex]):focus-visible { outline-color: var(--ocel); }
.uvod :where(a, button):focus-visible,
.paticka :where(a, button):focus-visible { outline-color: var(--obloha); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.vizualne-skryte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.cislo { font-family: var(--pismo-cisla); font-weight: 500; font-variant-numeric: tabular-nums lining-nums; }

/* Mřížka (manuál 4.2): 12 sloupců, mezera 24 px, max. 1280 px, okraj 80 px */
.obal {
  width: 100%;
  max-width: calc(var(--sirka) + 2 * var(--okraj));
  margin-inline: auto;
  padding-inline: var(--okraj);
}
.mrizka {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--mezera);
}

.preskocit {
  position: absolute;
  left: 16px;
  top: 12px;
  z-index: 100;
  padding: 14px 20px;
  background: var(--bila);
  color: var(--grafit);
  font-weight: 600;
  transform: translateY(-200%);
  transition: transform var(--doba) var(--krivka), outline-color var(--doba) var(--krivka);
}
.preskocit:focus-visible { transform: translateY(0); }

.doplnit {
  display: inline-block;
  padding: 0 0.35em;
  border: 1px dashed currentColor;
  font-weight: 600;
}

/* ==========================================================================
   Typografie
   ========================================================================== */
.h1, .h2, .karta__titulek, .krok__titulek, .potvrzeni__titulek, .app__titulek {
  font-family: var(--pismo-titulky);
  text-transform: uppercase;
  text-wrap: balance;
  letter-spacing: 0;
}
.h1 { font-weight: 900; font-size: var(--h1); line-height: 0.9; }
.h2 { font-weight: 800; font-size: var(--h2); line-height: 0.95; }
.perex { font-weight: 500; font-size: var(--perex); line-height: 1.4; }
.stitek {
  font-family: var(--pismo-cisla);
  font-weight: 600;
  font-size: var(--stitek);
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ocel-text);
}
.stitek--obloha { color: var(--obloha); }

/* Seznam s fajfkou z loga */
.fajfky { display: grid; gap: 12px; }
.fajfky li { display: flex; align-items: baseline; gap: 12px; }
.fajfky svg { width: 1em; height: 1em; flex: none; color: var(--ocel); transform: translateY(0.12em); }
.fajfky--tmave svg { color: var(--obloha); }

/* ==========================================================================
   Tlačítka (manuál 6.1) – ostré rohy, bez stínu, stav tónem barvy
   ========================================================================== */
.tlacitko {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--tlacitko);
  padding: 10px 24px;
  border: 1px solid transparent;
  font-family: var(--pismo-text);
  font-size: 1.1875rem; /* 19 px */
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--doba) var(--krivka), border-color var(--doba) var(--krivka), color var(--doba) var(--krivka), outline-color var(--doba) var(--krivka);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.tlacitko--hlavni { background-color: var(--signal); border-color: var(--signal); color: var(--grafit); }
.tlacitko--sekundarni { background-color: var(--bridlice); border-color: var(--bridlice); color: var(--bila); }
.tlacitko--obrys { background-color: var(--bila); border-color: var(--grafit); color: var(--grafit); }
.tlacitko--obrys-tmave { background-color: var(--bridlice); border-color: var(--bila); color: var(--bila); }

@media (hover: hover) {
  .tlacitko--hlavni:hover { background-color: var(--signal-najeti); border-color: var(--signal-najeti); }
  .tlacitko--sekundarni:hover { background-color: var(--bridlice-najeti); border-color: var(--bridlice-najeti); }
  .tlacitko--obrys:hover { background-color: var(--obrys-najeti); }
  .tlacitko--obrys-tmave:hover { background-color: var(--bridlice-najeti); }
}
.tlacitko--hlavni:active { background-color: var(--signal-stisk); border-color: var(--signal-stisk); }
.tlacitko--sekundarni:active { background-color: var(--bridlice-stisk); border-color: var(--bridlice-stisk); }
.tlacitko--obrys:active { background-color: var(--obrys-stisk); }
.tlacitko--obrys-tmave:active { background-color: var(--bridlice-stisk); }
.tlacitko--hlavni[disabled] { background-color: var(--signal-neaktivni); border-color: var(--signal-neaktivni); color: var(--text-neaktivni); cursor: default; }
.tlacitko--sekundarni[disabled] { background-color: var(--bridlice-neaktivni); border-color: var(--bridlice-neaktivni); cursor: default; }

.odkaz {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tlacitko);
  color: var(--ocel-text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: currentColor;
}
.odkaz--tmave { color: var(--bila); text-decoration-color: var(--obloha); }
@media (hover: hover) {
  .odkaz:hover { color: var(--bridlice-najeti); }
  .odkaz--tmave:hover { color: var(--obloha); }
}

/* ==========================================================================
   Hlavička (manuál 6.2) – 80 px, jednořádkové logo výšky 28 px
   ========================================================================== */
.hlavicka {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bila);
  border-bottom: 1px solid var(--linka);
}
.hlavicka__obal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--hlavicka);
}
.hlavicka__logo {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
}
.hlavicka__logo img { height: var(--logo-vyska); width: auto; }

/* ==========================================================================
   Úvod na Břidlici s ořezanou fajfkou
   ========================================================================== */
.uvod {
  position: relative;
  overflow: hidden;
  background: var(--bridlice);
  color: var(--bila);
  padding-block: 88px 104px;
}
.uvod__fajfka {
  position: absolute;
  right: -12%;
  top: 2%;
  width: min(68vw, 980px);
  height: auto;
  aspect-ratio: 334 / 340;
  color: var(--fajfka-uvod);
  pointer-events: none;
}
.uvod__mrizka { position: relative; align-items: center; row-gap: 56px; }
.uvod__text { grid-column: 1 / span 7; }
.uvod .h1 { margin-top: 0; }
.uvod__akcent { color: var(--obloha); }
.uvod__perex { margin-top: 28px; max-width: 29em; color: var(--bila); }
.uvod__akce { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }
.uvod__ujisteni { margin-top: 28px; color: var(--text-tlumeny-tmave); font-weight: 500; grid-auto-flow: column; justify-content: start; column-gap: 32px; }
.uvod__ukazka { grid-column: 9 / span 4; justify-self: end; display: grid; gap: 14px; justify-items: center; width: min(100%, 340px); }
.uvod .ukazka-popisek { color: var(--text-tlumeny-tmave); }

/* ==========================================================================
   Ukázka aplikace v rámu iPhonu.
   Rám je fyzický předmět, proto jako jediný smí mít zaoblené rohy
   (výjimka z pravidla ostrých rohů). Vnitřek aplikace drží brand:
   lišta Břidlice, plocha Papír, karty bílé, ostré rohy, čísla vpravo.
   ========================================================================== */
.iphone {
  position: relative;
  width: 100%;
  aspect-ratio: 340 / 712;
  color: var(--grafit);
  text-align: left;
}
/* boční tlačítka rámu */
.iphone::before, .iphone::after {
  content: "";
  position: absolute;
  width: 3px;
  background: var(--titan);
  border-radius: 2px;
}
.iphone::before { left: -2px; top: 19%; height: 13%; }
.iphone::after { right: -2px; top: 26%; height: 15%; }
.iphone__ram {
  position: absolute;
  inset: 0;
  padding: 10px;
  background: var(--grafit);
  border: 2px solid var(--titan);
  border-radius: 56px;
}
.iphone__displej {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--papir);
  border-radius: 45px;
}

/* stavový řádek iOS s Dynamic Islandem */
.ios-lista {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  height: 52px;
  padding: 6px 26px 0 34px;
  background: var(--bridlice);
  color: var(--bila);
  font-family: var(--pismo-text);
  font-size: 15px;
  font-weight: 600;
}
.ios-lista .cislo { font-family: var(--pismo-text); font-weight: 600; font-variant-numeric: normal; letter-spacing: -0.01em; }
.ios-ostruvek {
  position: absolute;
  left: 50%;
  top: 10px;
  width: 98px;
  height: 29px;
  margin-left: -49px;
  background: var(--grafit);
  border-radius: 15px;
}
.ios-ikony { display: inline-flex; align-items: center; gap: 5px; fill: currentColor; color: var(--bila); }
.ios-signal { width: 17px; height: 11px; }
.ios-wifi { width: 15px; height: 11px; }
.ios-baterie { width: 25px; height: 12px; }
.ios-domu {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 128px;
  height: 5px;
  margin-left: -64px;
  background: var(--grafit);
  border-radius: 3px;
}

/* aplikace uvnitř */
.app { display: flex; flex-direction: column; flex: 1; min-height: 0; font-family: var(--pismo-text); font-size: 15px; line-height: 1.35; }
.app svg { fill: none; }
.app__hlava { flex: none; padding: 6px 20px 16px; background: var(--bridlice); color: var(--bila); }
.app__nadtitul {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--pismo-cisla);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--obloha);
}
.app__nadtitul svg { width: 12px; height: 12px; color: var(--obloha); }
.app__navigace { display: flex; justify-content: space-between; align-items: center; font-size: 16px; color: var(--obloha); }
.app__navigace span { display: inline-flex; align-items: center; gap: 2px; }
.app__navigace svg { width: 18px; height: 18px; margin-left: -5px; }
.app__titulek {
  margin-top: 6px;
  font-family: var(--pismo-titulky);
  font-weight: 800;
  font-size: 28px;
  line-height: 0.95;
  text-transform: uppercase;
}
.app__datum { margin-top: 4px; font-size: 13px; color: var(--text-tlumeny-tmave); }
.app__obsah { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 10px; }
.app__dlazdice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.app__dlazdice p { display: grid; gap: 1px; padding: 9px 10px 8px; background: var(--bila); border: 1px solid var(--linka); }
.app__dlazdice strong { font-family: var(--pismo-titulky); font-weight: 800; font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; }
.app__dlazdice span { font-size: 12px; color: var(--text-tlumeny); }
.app__sekce {
  margin-top: 2px;
  font-family: var(--pismo-cisla);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tlumeny);
}
.app__karty { display: grid; gap: 6px; }
.app__karty li { display: grid; gap: 2px; padding: 10px 12px; background: var(--bila); border: 1px solid var(--linka); }
.app__radek { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.app__misto { font-family: var(--pismo-cisla); font-weight: 600; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ocel-text); }
.app__co { font-weight: 600; font-size: 15px; }
.app__meta { font-size: 13px; color: var(--text-tlumeny); }
.app__udaje { background: var(--bila); border: 1px solid var(--linka); font-size: 14px; }
.app__udaje div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--linka); }
.app__udaje div:first-child { border-top: 0; }
.app__udaje dt { color: var(--text-tlumeny); }
.app__udaje dd { font-weight: 600; text-align: right; }
.app .cislo { font-weight: inherit; }
.app__spodek { flex: none; padding: 10px 14px 0; background: var(--bila); border-top: 1px solid var(--linka); }
.app__spodek--detail { padding-bottom: 30px; }
.app__tlacitko {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  background: var(--bridlice);
  color: var(--bila);
  font-weight: 600;
  font-size: 16px;
}
.app__tlacitko svg { width: 18px; height: 18px; }
.app__taby { display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 0 26px; }
.app__taby span { display: grid; justify-items: center; gap: 3px; font-size: 11px; font-weight: 500; color: var(--text-tlumeny); }
.app__taby svg { width: 23px; height: 23px; }
.app__taby .je-aktivni { color: var(--ocel-text); font-weight: 600; }

/* Štítky stavu (manuál 6.3) */
.stav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  font-family: var(--pismo-text);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
}
.stav svg { width: 10px; height: 10px; }
.stav--hotovo { background: var(--stitek-hotovo); color: var(--stitek-hotovo-text); }
.stav--rozpracovano { background: var(--stitek-rozpracovano); color: var(--stitek-rozpracovano-text); }
.stav--ceka { background: var(--stitek-ceka); color: var(--stitek-ceka-text); }
.stav--nove { background: var(--bridlice); color: var(--bila); }
.zapis .stav { align-self: flex-start; }

.ukazka-popisek { font-size: var(--text-maly); color: var(--text-tlumeny); }

/* Zápis v telefonu */
.zapis__fotky { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.zapis__fotky img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.zapis__diktat { padding: 10px 12px; background: var(--bila); border: 1px solid var(--linka); font-size: 14px; }
.zapis__diktat-hlava { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 3px; font-family: var(--pismo-cisla); font-weight: 600; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ocel-text); }
.zapis__diktat-hlava svg { width: 14px; height: 14px; }

/* Jediný autorský pohyb: zápis se v telefonu klidně poskládá, když na něj dojdete.
   Obsah je vidět bez JS; skrývá se jen s třídou .s-pohybem (přidá app.js). */
.s-pohybem .zapis-krok { opacity: 0; transform: translateY(8px); }
.s-pohybem .zapis.je-videt .zapis-krok {
  opacity: 1;
  transform: none;
  transition: opacity 480ms var(--krivka), transform 480ms var(--krivka);
}
.s-pohybem .zapis.je-videt .zapis__fotky { transition-delay: 60ms; }
.s-pohybem .zapis.je-videt .app__udaje { transition-delay: 300ms; }
.s-pohybem .zapis.je-videt .zapis__diktat { transition-delay: 520ms; }
.s-pohybem .zapis.je-videt .stav { transition-delay: 760ms; }
.s-pohybem .zapis.je-videt .app__tlacitko { transition-delay: 920ms; }

/* ==========================================================================
   Fotografie – ostré rohy, tenká linka, bez filtrů a překryvů
   ========================================================================== */
.foto img { display: block; width: 100%; height: auto; }
.foto { border: 1px solid var(--linka); }
.bolesti__hlava { align-items: end; row-gap: 40px; }
.bolesti__hlava .hlava-sekce { grid-column: 1 / span 5; align-self: center; }
.bolesti__foto { grid-column: 7 / span 6; }
.bolesti__foto img { aspect-ratio: 1800 / 1195; object-fit: cover; }

/* ==========================================================================
   Sekce – střídání Papíru a bílé
   ========================================================================== */
.sekce { padding-block: 104px; }
.sekce--bila { background: var(--bila); }
.sekce--papir { background: var(--papir); }
.hlava-sekce { grid-column: 1 / span 8; display: grid; gap: 20px; }
.hlava-sekce .perex { max-width: 34em; }

/* Karty (manuál 6.3) – bez stínu a výplně, jen tenký rámeček */
.karty { margin-top: 56px; row-gap: var(--mezera); }
.karta {
  grid-column: span 4;
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 32px 28px 36px;
  border: 1px solid var(--linka);
}
.karta__titulek { font-weight: 800; font-size: var(--h3); line-height: 1; }

/* Kroky (manuál 6.2) – linka Grafit, číslo Ocel, titulek verzálkami */
.postup__text { grid-column: 1 / span 7; }
.kroky { margin-top: 48px; display: grid; gap: 40px; }
.krok { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--grafit); }
.krok__cislo { color: var(--ocel-text); font-size: 1.0625rem; }
.krok__titulek { font-weight: 800; font-size: var(--h3); line-height: 1; }
.krok p { max-width: 36em; }
.postup__ukazka { grid-column: 9 / span 4; justify-self: end; display: grid; gap: 14px; justify-items: center; align-self: center; width: min(100%, 340px); }

/* ==========================================================================
   Formulář (manuál 6.3) – z linek, popisky nad poli
   ========================================================================== */
.zkouska__hlava { grid-column: 1 / span 5; display: grid; align-content: start; gap: 20px; position: sticky; top: calc(var(--hlavicka) + 40px); align-self: start; }
.zkouska__formular { grid-column: 7 / span 6; }

.formular { display: grid; gap: 24px; }
.formular[hidden] { display: none; }
.pole { display: grid; gap: 8px; }
.pole label, .volby legend { font-weight: 600; font-size: var(--text); line-height: 1.3; }
.pole__povinne, .volby__pozn { font-weight: 400; color: var(--text-tlumeny); }
.pole input, .pole textarea {
  width: 100%;
  min-height: var(--pole);
  padding: 12px 16px;
  font: inherit;
  font-size: 1.1875rem;
  color: var(--grafit);
  background: var(--bila);
  border: 1px solid var(--linka-pole);
  transition: border-color var(--doba) var(--krivka), background-color var(--doba) var(--krivka), outline-color var(--doba) var(--krivka);
  -webkit-appearance: none;
  appearance: none;
}
.pole textarea { min-height: 128px; resize: vertical; line-height: 1.5; }
.pole input::placeholder { color: var(--text-tlumeny); opacity: 1; }
@media (hover: hover) { .pole input:hover, .pole textarea:hover { border-color: var(--grafit); } }
.pole input:focus-visible, .pole textarea:focus-visible { border-color: var(--ocel); outline-color: var(--ocel); }
.pole input[aria-invalid="true"], .pole textarea[aria-invalid="true"] { border-color: var(--grafit); background-color: var(--stitek-rozpracovano); }
.pole__napoveda { font-size: var(--text-maly); color: var(--text-tlumeny); }
.pole__chyba { font-weight: 600; color: var(--stitek-rozpracovano-text); }

.volby { margin: 0; padding: 0; border: 0; min-width: 0; }
.volby legend { padding: 0; margin-bottom: 10px; }
.volby__mrizka { display: grid; gap: 8px; }
.volby__mrizka--ctyri { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.volby__mrizka--tri { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.volby__mrizka--dva { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pole--vlastni { margin-top: 12px; }
.pole--vlastni[hidden] { display: none; }

/* Volba počtu lidí – obrysové tlačítko, vybraná Břidlice */
.volba { position: relative; display: block; cursor: pointer; }
.volba input, .zaskrt input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
}
.volba > span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--pole);
  padding: 8px 10px;
  border: 1px solid var(--linka-pole);
  background: var(--bila);
  color: var(--grafit);
  font-size: 1.0625rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.15;
  outline: 2px solid transparent;
  outline-offset: 3px;
  transition: background-color var(--doba) var(--krivka), border-color var(--doba) var(--krivka), color var(--doba) var(--krivka), outline-color var(--doba) var(--krivka);
}
@media (hover: hover) { .volba:hover > span { background-color: var(--obrys-najeti); border-color: var(--grafit); } }
.volba input:focus-visible + span { outline-color: var(--ocel); }
.volba input:checked + span { background-color: var(--bridlice); border-color: var(--bridlice); color: var(--bila); }

/* Zaškrtávací pole s fajfkou z loga */
.zaskrt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--pole);
  padding: 8px 14px;
  border: 1px solid var(--linka-pole);
  background: var(--bila);
  font-weight: 600;
  cursor: pointer;
  outline: 2px solid transparent;
  outline-offset: 3px;
  transition: background-color var(--doba) var(--krivka), border-color var(--doba) var(--krivka), outline-color var(--doba) var(--krivka);
}
.zaskrt__ctverec {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border: 1px solid var(--grafit);
  background: var(--bila);
  color: transparent;
  transition: background-color var(--doba) var(--krivka), border-color var(--doba) var(--krivka), color var(--doba) var(--krivka);
}
.zaskrt__ctverec svg { width: 15px; height: 15px; }
@media (hover: hover) { .zaskrt:hover { background-color: var(--obrys-najeti); border-color: var(--grafit); } }
.zaskrt:has(input:focus-visible) { outline-color: var(--ocel); }
.zaskrt:has(input:checked) { border-color: var(--bridlice); }
.zaskrt input:checked ~ .zaskrt__ctverec { background-color: var(--bridlice); border-color: var(--bridlice); color: var(--bila); }

/* Past na roboty – mimo obrazovku i mimo čtečky */
.past { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.formular__souhlas { margin-top: -8px; font-size: var(--text-maly); line-height: 1.5; color: var(--text-tlumeny); }
.formular__souhlas a { color: var(--ocel-text); font-weight: 600; }
@media (hover: hover) { .formular__souhlas a:hover { color: var(--bridlice-najeti); } }
.formular__zprava {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--grafit);
  background: var(--stitek-rozpracovano);
  color: var(--grafit);
  font-weight: 600;
}
.formular__zprava[hidden] { display: none; }
.formular__zprava svg { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.formular__zprava:not([hidden]) { animation: prichod 300ms var(--krivka) both; }
.formular__odeslat { width: 100%; min-height: 56px; }
.formular__noscript { font-weight: 600; }

.potvrzeni { display: grid; justify-items: start; gap: 16px; padding: 32px 28px; border: 1px solid var(--linka); outline: none; }
.potvrzeni[hidden] { display: none; }
.potvrzeni__fajfka { width: 44px; height: 44px; color: var(--ocel); }
.potvrzeni__titulek { font-weight: 800; font-size: var(--h2); line-height: 0.95; }
.potvrzeni:not([hidden]) { animation: prichod 420ms var(--krivka) both; }
@keyframes prichod { from { opacity: 0; transform: translateY(6px); } }

.sliby { margin-top: 12px; padding-top: 24px; border-top: 1px solid var(--linka); font-weight: 600; font-size: 1.1875rem; }

/* ==========================================================================
   Patička – Grafit
   ========================================================================== */
.paticka {
  background: var(--grafit);
  color: var(--bila);
  padding-block: 72px 64px;
  font-size: var(--text-maly);
}
.paticka .mrizka { row-gap: 40px; }
.paticka__znacka { grid-column: 1 / span 3; }
.paticka__znacka img { width: 140px; height: auto; }
.paticka__veta { margin-top: 20px; color: var(--text-tlumeny-tmave); }
.paticka__udaje-obal { grid-column: 5 / span 5; display: grid; gap: 14px; align-content: start; }
.paticka__odkazy { grid-column: 10 / span 3; display: grid; gap: 8px; align-content: start; color: var(--text-tlumeny-tmave); }
.paticka__odkazy .odkaz { justify-self: start; margin-top: -14px; }

.udaje { border-top: 1px solid var(--linka); }
.udaje div {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 16px;
  padding-block: 10px;
  border-bottom: 1px solid var(--linka);
}
.udaje dt { color: var(--text-tlumeny); }
.udaje dd { overflow-wrap: anywhere; }
.udaje--tmave { border-top-color: var(--linka-tmava); }
.udaje--tmave div { border-bottom-color: var(--linka-tmava); }
.udaje--tmave dt { color: var(--text-tlumeny-tmave); }
.udaje--tmave .doplnit { color: var(--obloha); }
.udaje--tmave a { color: var(--bila); text-decoration-color: var(--obloha); }

/* ==========================================================================
   Stránka zásad (Papír)
   ========================================================================== */
.dokument { background: var(--papir); padding-block: 64px 104px; }
.dokument__obsah { grid-column: 1 / span 8; }
.dokument .h1 { font-size: clamp(3rem, 2rem + 3.6vw, 4.5rem); }
.dokument .perex { margin-top: 20px; }
.dokument h2 {
  margin-top: 56px;
  margin-bottom: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--grafit);
  font-family: var(--pismo-titulky);
  font-weight: 800;
  font-size: var(--h3);
  line-height: 1;
  text-transform: uppercase;
}
.dokument p + p, .dokument p + ul, .dokument ul + p, .dokument p + dl { margin-top: 12px; }
.dokument .seznam { margin-top: 12px; display: grid; gap: 8px; }
.dokument .seznam li { position: relative; padding-left: 1.4em; }
.dokument .seznam li::before { content: "–"; position: absolute; left: 0; color: var(--ocel-text); }
.dokument a { color: var(--ocel-text); font-weight: 600; }
.dokument .udaje { background: var(--bila); padding-inline: 16px; border: 1px solid var(--linka); }
.dokument .udaje div:last-child { border-bottom: 0; }
.dokument .doplnit { color: var(--ocel-text); }
.dokument__zpet { margin-bottom: 24px; }
.dokument__zpet svg { width: 18px; height: 18px; }

/* ==========================================================================
   Responzivita
   ========================================================================== */
@media (max-width: 1199px) {
  :root { --okraj: 48px; }
  .uvod__ukazka, .postup__ukazka { grid-column: 8 / span 5; }
  .karta { grid-column: span 12; }
  .zkouska__hlava, .zkouska__formular { grid-column: 1 / span 12; }
  .zkouska__hlava { position: static; }
  .bolesti__hlava .hlava-sekce, .bolesti__foto { grid-column: 1 / span 12; }
  .bolesti__foto { max-width: 760px; }
  .zkouska__formular { margin-top: 40px; max-width: 640px; }
  .hlava-sekce { grid-column: 1 / span 12; }
  .paticka__znacka { grid-column: 1 / span 12; }
  .paticka__udaje-obal { grid-column: 1 / span 7; }
  .paticka__odkazy { grid-column: 8 / span 5; }
  .dokument__obsah { grid-column: 1 / span 12; max-width: 760px; }
}

@media (max-width: 899px) {
  .uvod__text { grid-column: 1 / span 12; }
  .uvod__ukazka { grid-column: 1 / span 12; justify-self: center; }
  .uvod__fajfka { width: 90vw; right: -30vw; top: auto; bottom: -6%; }
  .postup__text { grid-column: 1 / span 12; }
  .postup__ukazka { grid-column: 1 / span 12; justify-self: center; margin-top: 56px; }
}

@media (min-width: 700px) and (max-width: 1199px) {
  .karta { grid-column: span 4; }
  .karta { padding: 24px 20px 28px; }
}

@media (max-width: 699px) {
  :root { --okraj: 20px; --mezera: 16px; --hlavicka: 64px; --logo-vyska: 24px; }
  .tlacitko { padding-inline: 18px; }
  .hlavicka .tlacitko { font-size: 1.0625rem; padding-inline: 14px; white-space: nowrap; }
  .uvod { padding-block: 48px 64px; }
  .uvod .h1 { margin-top: 14px; }
  .uvod__perex { margin-top: 20px; }
  .uvod__akce { margin-top: 28px; }
  .uvod__akce .tlacitko { width: 100%; }
  .uvod__akce .tlacitko--hlavni { padding-inline: 10px; font-size: 1.125rem; white-space: nowrap; }
  .uvod__ujisteni { grid-auto-flow: row; }
  .uvod__ukazka, .postup__ukazka { justify-self: center; justify-items: center; }
  .uvod__fajfka { width: 104vw; right: -46vw; top: 4px; bottom: auto; }
  .sekce { padding-block: 64px; }
  .karty { margin-top: 36px; }
  .karta { padding: 24px 20px 28px; }
  .kroky { margin-top: 32px; gap: 32px; }
  .volby__mrizka--ctyri { grid-template-columns: 1fr 1fr; }
  .volby__mrizka--tri, .volby__mrizka--dva { grid-template-columns: 1fr; }
  .paticka__udaje-obal, .paticka__odkazy { grid-column: 1 / span 12; }
  .paticka__odkazy .odkaz { margin-top: 0; }
  .dokument { padding-block: 40px 72px; }
}

@media (max-width: 379px) {
  :root { --logo-vyska: 23px; --okraj: 16px; } /* jednořádkové logo min. 160 px šířky (manuál 1.6) */
  .hlavicka .tlacitko { padding-inline: 12px; }
  .uvod__akce .tlacitko--hlavni { font-size: 1.0625rem; }
}
@media (max-width: 339px) {
  :root { --okraj: 14px; }
  .hlavicka__obal { gap: 12px; }
  .hlavicka .tlacitko { padding-inline: 8px; font-size: 0.9375rem; }
  .uvod__akce .tlacitko--hlavni { white-space: normal; }
}

/* ==========================================================================
   Omezení pohybu
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
  .s-pohybem .zapis-krok { opacity: 1; transform: none; }
}

@media (forced-colors: active) {
  .tlacitko, .volba > span, .zaskrt, .pole input { border: 1px solid ButtonText; }
}