/* Tělo učí — styly podle návrhu „Telo uci - MVP" (Claude Design handoff, 2026-10-23).
   Barvy z karty klientky, písma Newsreader (text a nadpisy), Barlow (ovládací prvky),
   Caveat (ruční poznámky). Bez stínů, bez zaoblení kromě pilulek a polí formuláře. */

/* ---------- fonty (self-hosted, latin + Latin Extended-A, zúžené site/fonty.py) ---------- */
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 300 400; font-display: swap;
  src: url(/static/fonts/newsreader-italic-latin-ext-v2.woff2) format('woff2');
  unicode-range: U+0100-017F; }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 300 400; font-display: swap;
  src: url(/static/fonts/newsreader-italic-latin-v2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 300 500; font-display: swap;
  src: url(/static/fonts/newsreader-normal-latin-ext-v2.woff2) format('woff2');
  unicode-range: U+0100-017F; }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 300 500; font-display: swap;
  src: url(/static/fonts/newsreader-normal-latin-v2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 500 600; font-display: swap;
  src: url(/static/fonts/caveat-normal-latin-ext-v2.woff2) format('woff2');
  unicode-range: U+0100-017F; }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 500 600; font-display: swap;
  src: url(/static/fonts/caveat-normal-latin-v2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/static/fonts/barlow-normal-400-latin-ext-v2.woff2) format('woff2');
  unicode-range: U+0100-017F; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/static/fonts/barlow-normal-400-latin-v2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/static/fonts/barlow-normal-500-latin-ext-v2.woff2) format('woff2');
  unicode-range: U+0100-017F; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/static/fonts/barlow-normal-500-latin-v2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/static/fonts/barlow-normal-600-latin-ext-v2.woff2) format('woff2');
  unicode-range: U+0100-017F; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/static/fonts/barlow-normal-600-latin-v2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Záložní písma s metrikami webových (site/fonty.py, výpočet z šířek glyfů): dokud se
   font nenačte, text v Georgii/Arialu zabírá skoro stejné místo — po výměně se řádky
   nepřelomí jinak a obsah pod nimi (postava v úvodu, navigace) neposkočí (CLS). */
@font-face { font-family: 'Newsreader záloha'; src: local('Georgia');
  size-adjust: 92.28%; ascent-override: 79.65%; descent-override: 28.72%; line-gap-override: 0%; }
@font-face { font-family: 'Newsreader záloha'; font-style: italic; src: local('Georgia Italic'), local('Georgia-Italic');
  size-adjust: 84.47%; ascent-override: 87.01%; descent-override: 31.37%; line-gap-override: 0%; }
@font-face { font-family: 'Barlow záloha'; src: local('Arial'), local('ArialMT');
  size-adjust: 96.44%; ascent-override: 103.70%; descent-override: 20.74%; line-gap-override: 0%; }

/* ---------- tokeny ---------- */
:root {
  --papir: #fbf1eb;
  --povrch: #fffaf7;
  --ruze: #e6d1c8;
  --pisek: #eacdb9;
  --inkoust: #3b302b;
  --text-2: #4a3e38;
  --text-3: #5a4d46;
  --muted: #6f625b;
  --accent-ink: #9c6245;
  --accent-tmavy: #6f4630;
  --accent: #c68969;
  /* tlačítka: tmavě béžová místo inkoustové (Jakub 2026-10-23); s bílým textem 4,67 : 1 */
  --tlacitko: #8a6f57;
  --tlacitko-hover: #6e5845;
  --linka: #e6d1c8;
  --linka-jemna: #ecdcd3;
  --linka-silna: #c9b2a6;
  /* okraj polí a termínů: barva z karty klientky, na bílé 3,4 : 1 (WCAG 1.4.11).
     Původní #d9c2b6 měl 1,7 : 1 a pole skoro nebyla vidět (audit 2026-10-23). */
  --pole-okraj: #978880;
  --chyba: #a33a2a;
  --na-tmavem: #fbf1eb;
  --na-tmavem-2: #eacdb9;
  --na-tmavem-3: #c9b8ae;
  /* obrys fokusu: na světlých plochách hnědý (papír 4,45, bílá 4,95, růžová 3,37 : 1),
     v tmavých kontejnerech se přepíše na světlý (11,5 : 1) — WCAG 1.4.11 */
  --focus-ring: var(--accent-ink);
  --tmave-linka: #5a4d46;
  --serif: 'Newsreader', 'Newsreader záloha', Georgia, serif;
  --sans: 'Barlow', 'Barlow záloha', system-ui, sans-serif;
  --rukou: 'Caveat', cursive;
  --sirka: 1200px;
  --sirka-clanek: 760px;
}

/* ---------- základ ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--papir);
  color: var(--inkoust);
  font-family: var(--serif);
  /* návrh velikost ani řádkování těla nenastavuje — výchozí 16 px / normal;
     všude, kde na tom záleží, má návrh hodnoty výslovně */
  font-size: 16px;
  line-height: normal;
  font-optical-sizing: auto;
}
a { color: var(--accent-ink); text-decoration: none; }
a:hover { color: #7a4a33; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--serif); font-weight: 300; margin: 0; line-height: 1.06; text-wrap: balance; }
h1 { font-style: italic; font-size: clamp(48px, 6.4vw, 88px); line-height: 1.04; }
h2 { font-size: clamp(36px, 4.4vw, 58px); }
h2.kurziva { font-style: italic; line-height: 1.1; }
h3 { font-weight: 400; font-size: clamp(26px, 2.4vw, 30px); line-height: 1.15; }
p { margin: 0; }
em { font-style: italic; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
/* na tmavém pozadí by měl hnědý obrys jen 2,6 : 1 */
.pas--tmavy, .souhrn { --focus-ring: var(--na-tmavem); }
/* odkaz uprostřed věty se nesmí lišit jen barvou (WCAG 1.4.1) */
.vybrane__prazdne a, .bez-js a, .chyba-terminu a { text-decoration: underline; text-underline-offset: 3px; }
.bez-js a, .chyba-terminu a { color: inherit; }

.preskocit { position: absolute; left: -999px; top: 8px; background: var(--inkoust); color: var(--na-tmavem); padding: 8px 16px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 999px; z-index: 10; font-family: var(--sans); }
.preskocit:focus { left: 8px; }

.stranka { min-height: 100vh; display: flex; flex-direction: column; align-items: center; }
main { width: 100%; display: flex; flex-direction: column; align-items: center; }

.obal { width: 100%; max-width: var(--sirka); padding-left: 40px; padding-right: 40px; }
.obal--uzky { max-width: var(--sirka-clanek); }
.pas { width: 100%; display: flex; justify-content: center; }
.pas--ruze { background: var(--ruze); }
.pas--povrch { background: var(--povrch); border-top: 1px solid var(--linka); border-bottom: 1px solid var(--linka); }
.pas--tmavy { background: var(--inkoust); color: var(--na-tmavem); }

/* ovládací prvky v Barlow */
.ui, .navigace, .tlacitko, .stitek, .pole, .pilulka, .formular label, .formular input, .formular textarea, .formular button { font-family: var(--sans); }

/* ---------- hlavička ---------- */
.hlavicka {
  width: 100%; max-width: var(--sirka);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 26px 40px; flex-wrap: wrap; border-bottom: 1px solid var(--linka);
}
/* logo z původního webu (silueta + TĚLO·UČÍ), bez textu vedle — zadání 2026-10-23 */
.logo { display: block; line-height: 0; }
/* tvar ze světlé varianty původního loga, obarvený tmavě béžovou tlačítek — světlé bylo málo vidět (Jakub 2026-10-23) */
.logo img { height: 64px; width: auto; }
.navigace { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; font-size: 15px; font-weight: 500; }
.navigace > a { color: var(--inkoust); }
/* dotyková plocha 44 px (WCAG 2.5.8 + AAA 2.5.5) bez posunu rozložení: padding zvětší cíl,
   záporný margin vrátí řádek na původní výšku; řádky navigace jsou 28 px od sebe, cíle se nepřekrývají */
.navigace > a:not(.tlacitko) { display: inline-block; padding-block: 13px; margin-block: -13px; min-width: 44px; text-align: center; }
.navigace > a:hover { color: var(--accent-ink); }
.navigace > a.aktivni { text-decoration: underline 2px var(--accent-ink); text-underline-offset: 4px; }
.navigace > a.tlacitko { color: #fff; }
.navigace > a.tlacitko:hover { color: #fff; }

/* ---------- tlačítka, štítky, pilulky ---------- */
.tlacitko {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  background: var(--tlacitko); color: #fff;
  padding: 15px 30px; border-radius: 999px; font-size: 16px; font-weight: 500; line-height: normal;
  border: 0; cursor: pointer; text-align: center; transition: background .15s, color .15s;
}
.tlacitko:hover { background: var(--tlacitko-hover); color: #fff; }
.tlacitko--male { padding: 10px 20px; font-size: 15px; }
.tlacitko--svetle { background: var(--na-tmavem); color: var(--inkoust); }
.tlacitko--svetle:hover { background: var(--pisek); color: var(--inkoust); }
.souhrn .tlacitko { padding: 13px 24px; font-size: 15px; }
.patka__kontakt .tlacitko { padding: 14px 28px; }
.tlacitko--obrys { background: none; color: var(--inkoust); padding: 12px 24px; font-size: 15px; border: 1px solid var(--tlacitko); }
.tlacitko--obrys:hover { background: var(--tlacitko); color: #fff; }
.stitek { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.stitek--krok { font-size: 13px; color: var(--accent-tmavy); }
.rukou { font-family: var(--rukou); color: var(--accent-ink); font-weight: 500; line-height: 1.1; }

/* ---------- hero ---------- */
.hero { padding-top: 64px; padding-bottom: 88px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 56px; align-items: center; }
.hero__text { display: flex; flex-direction: column; gap: 28px; }
.hero__titul { display: flex; flex-direction: column; gap: 14px; }
.hero__titul .rukou { display: block; margin-top: 14px; font-style: normal; font-size: clamp(28px, 2.8vw, 36px); }
.hero__misto { display: block; margin-bottom: 14px; font-family: var(--sans); font-style: normal; font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1.4; color: var(--accent-ink); }
.hero__perex { font-size: 20px; line-height: 1.6; color: var(--text-2); max-width: 40ch; }
.hero__akce { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.hero__akce .rukou { font-size: 26px; }
/* bez bílého rámečku z návrhu a menší postava — výška zhruba jako textový blok vlevo,
   aby nad a pod textem nezůstávalo prázdné místo (Jakub 2026-10-23) */
.ramecek { display: flex; justify-content: center; align-items: center; }
/* v úvodu je od 2026-10-23 sedící postava */
.ramecek svg { height: 400px; width: auto; max-width: 100%; color: var(--inkoust); }

/* ---------- jaké to bude ---------- */
.denik { padding-top: 96px; padding-bottom: 96px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 64px; align-items: center; }
.denik__postava { display: flex; justify-content: center; }
/* stojící postava: stejná výška jako sedící v návrhu (320 × 505), aby sekce neposkočila */
.denik__postava svg { height: 505px; width: auto; max-width: 100%; color: var(--inkoust); }
.denik__text { display: flex; flex-direction: column; gap: 22px; max-width: 600px; }
.denik__text p { font-size: 18px; line-height: 1.7; }
.denik__text .mezera { height: 12px; }

/* ---------- miniworkshopy ---------- */
.lekce { padding-top: 96px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 36px; }
.lekce h2 { max-width: 18ch; }
.fakta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0 32px; border-top: 1px solid var(--linka-silna); border-bottom: 1px solid var(--linka-silna); }
.fakta div { display: flex; flex-direction: column; gap: 4px; padding: 18px 0; }
.fakta span:last-child { font-family: var(--sans); font-size: 17px; font-weight: 500; line-height: 1.4; }
.karty { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 24px; }
.karta { background: var(--povrch); border: 1px solid var(--linka-jemna); padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.karta__hlava { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.karta__cislo { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .14em; color: var(--accent-ink); }
.karta__cena { font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--inkoust); }
/* popisy lekcí: <details open>, na desktopu bez přepínače; na mobilu je JS sbalí (B3) */
.karta__vic > p + p { margin-top: 14px; }
.karta__vic > summary { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  font: 500 15px var(--sans); color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.karta__vic > summary::-webkit-details-marker { display: none; }
.karta__vic > summary::after { content: '+'; text-decoration: none; display: inline-block; }
.karta__vic[open] > summary::after { content: '−'; }
.karta__vic[open] > summary { margin-bottom: 8px; }
@media (min-width: 641px) { .karta__vic > summary { display: none; } }
.karta p { font-size: 18px; line-height: 1.6; }
.karta p.kurziva { font-style: italic; color: var(--text-3); }
.karta__terminy { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--linka-jemna); display: flex; flex-direction: column; gap: 12px; }
/* termíny: mřížka stejně širokých sloupců — každý termín stejně velký a zarovnaný bez ohledu
   na délku textu. 136 px se vejde nejdelší „po 26. 10. 18:30“ (129 px s okraji); mobil 2 sloupce,
   desktop 3. Kolik termínů je vidět před „Další termíny“, počítá objednavka.js (2 celé řádky). */
.pilulky { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 10px; }
.pilulky > .nacitam { grid-column: 1 / -1; }
.pilulka {
  min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--pole-okraj);
  background: #fff; color: var(--inkoust); font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums;
  cursor: pointer; display: inline-flex; align-items: center; gap: 10px; transition: background .12s, color .12s, border-color .12s;
}
.pilulka:hover { border-color: var(--tlacitko); }
.pilulka[aria-pressed="true"], .pilulka:has(input:checked) { background: var(--tlacitko); color: #fff; border-color: var(--tlacitko); }
.formular .pilulka { padding: 11px 18px; }
/* všechny termíny stejně vysoké (50 px) a text svisle na střed — jednořádkový termín i ten
   s „Poslední místo“ jsou stejně velké, řádky mřížky se nerozjedou */
.pilulka--termin { position: relative; width: 100%; min-height: 50px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; padding: 8px 12px; border-radius: 14px; line-height: 1.2; text-align: left; white-space: nowrap; }
.pilulka__fajfka { position: absolute; top: 7px; right: 10px; font-size: 14px; line-height: 1; }
.pilulka__volno { font-size: 12px; font-weight: 500; color: var(--muted); }
/* docházející místa jemně barvou akcentu (#9c6245 na bílé 4,95 : 1) */
.pilulka__volno--malo { color: var(--accent-ink); font-weight: 600; }
/* bílá jako datum: písková měla na tmavě béžové jen 3,1 : 1 */
.pilulka--termin[aria-pressed="true"] .pilulka__volno { color: #fff; }
.pilulka--termin:disabled { cursor: not-allowed; background: transparent; color: var(--muted); border-style: dashed; }
.pilulka--termin:disabled .pilulka__datum { text-decoration: line-through; }
.dalsi-terminy { grid-column: 1 / -1; justify-self: start; min-height: 44px; background: none; border: 0; padding: 10px 0; font: 500 15px var(--sans); color: var(--accent-ink); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
/* rozbalené další termíny: subgrid přes celou šířku — sloupce lícují s horními řádky */
.pilulky__dalsi { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; gap: 10px; }
.nacitam { font-family: var(--sans); font-size: 15px; color: var(--muted); }
.bez-js, .chyba-terminu { margin: 0; font-family: var(--sans); font-size: 16px; color: var(--chyba); }
.pilulka input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.jen-uzke { display: none; }
/* připnutá ke spodnímu okraji jen když je něco vybráno (JS přidá body.ma-vyber) */
body.ma-vyber .souhrn { position: sticky; bottom: 16px; z-index: 4; }
.souhrn { display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; flex-wrap: wrap; background: var(--inkoust); color: var(--na-tmavem); padding: 18px 18px 18px 28px; }
.souhrn__text { font-family: var(--sans); font-size: 16px; font-weight: 500; }
.souhrn__prava { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.souhrn__cena { font-family: var(--serif); font-size: 28px; line-height: 1; }

/* ---------- objednání ---------- */
.objednani { padding-top: 96px; padding-bottom: 96px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 40px 56px; align-items: start; }
.objednani__hlava { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 14px; }
.objednani__hlava p { font-size: 18px; line-height: 1.65; max-width: 60ch; }
.objednani__uvod { display: flex; flex-direction: column; gap: 24px; }
.vybrane { background: var(--povrch); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.vybrane__seznam { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.objednani__uvod .dulezite { max-width: none; }
.vybrane__polozka { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--linka-jemna); }
.vybrane__polozka:first-child { border-top: 0; padding-top: 0; }
.vybrane__popis { display: flex; flex-direction: column; gap: 2px; font-size: 17px; line-height: 1.3; }
.vybrane__popis strong { font-family: var(--sans); font-weight: 600; font-size: 16px; }
.vybrane__odebrat { flex: none; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--pole-okraj); background: #fff; color: var(--text-3); font-size: 20px; line-height: 1; cursor: pointer; }
.vybrane__odebrat:hover { border-color: var(--tlacitko); color: var(--inkoust); }
.vybrane__prazdne { font-size: 17px; color: var(--text-3); }
.vybrane__celkem { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px solid var(--linka-silna); padding-top: 14px; font-family: var(--sans); font-size: 15px; color: var(--text-3); }
.vybrane__cena { font-family: var(--serif); font-size: 26px; color: var(--inkoust); }
.objednani__uvod > p { font-size: 18px; line-height: 1.65; max-width: 42ch; }
.dulezite { background: var(--inkoust); color: var(--na-tmavem); padding: 22px 24px; display: flex; flex-direction: column; gap: 6px; max-width: 440px; }
.dulezite .stitek { color: var(--na-tmavem-2); }
.dulezite p { font-size: 18px; line-height: 1.55; }
.jinak { display: flex; flex-direction: column; gap: 4px; font-family: var(--sans); font-size: 16px; }
.jinak span { color: var(--text-3); }
.jinak .telefon { font-family: var(--serif); font-size: 28px; color: var(--inkoust); }
/* telefon a e-mail: výška cíle 44 px, text stejně velký */
.jinak a, .patka__kontakt a:not(.tlacitko) { min-height: 44px; display: flex; align-items: center; width: fit-content; max-width: 100%; }
.jinak .telefon:hover { color: var(--accent-ink); }
.jinak .email { color: var(--accent-tmavy); font-weight: 500; }

.formular { background: var(--povrch); padding: 36px; display: flex; flex-direction: column; gap: 28px; }
.formular fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.formular legend { padding: 0; margin-bottom: 22px; }
.formular .vyber { display: flex; flex-direction: column; gap: 10px; padding-bottom: 18px; border-bottom: 1px solid var(--linka-jemna); }
.formular .vyber__nazev { display: flex; gap: 12px; align-items: baseline; font-family: var(--serif); }
.formular .vyber__nazev i { font-style: italic; font-size: 24px; color: var(--accent-ink); }
.formular .vyber__nazev span { font-size: 21px; line-height: 1.25; }
.formular .kontakt { display: flex; flex-direction: column; gap: 16px; }
.formular .kontakt legend { margin-bottom: 16px; }
.formular .pole { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--inkoust); }
/* chyba u pole: text propojený přes aria-describedby, okraj pole v barvě chyby (6,5 : 1) */
.formular .pole__chyba { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--chyba); }
.formular [aria-invalid="true"] { border-color: var(--chyba); }
.formular input[type="text"], .formular input[type="email"], .formular input[type="tel"], .formular textarea {
  border: 1px solid var(--pole-okraj); border-radius: 10px; padding: 13px 14px; background: #fff;
  font-size: 16px; color: var(--inkoust); width: 100%; font-weight: 400;
}
.formular textarea { resize: vertical; }
.formular input:focus, .formular textarea:focus { outline: 2px solid var(--focus-ring); outline-offset: 0; border-color: var(--accent-ink); }
.formular .dvojice { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 16px; }
.formular .zaver { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--linka-silna); padding-top: 22px; }
.formular .zaver__radek { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.formular .zaver__radek span:first-child { font-family: var(--sans); font-size: 15px; color: var(--text-3); }
.formular .zaver__cena { font-family: var(--serif); font-size: 30px; }
.formular .chyba { font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--chyba); }
.formular .chyba:empty { display: none; }
/* v návrhu přes celou šířku formuláře (flex sloupec, stretch) a bez okraje */
.formular button[type="submit"] { width: 100%; padding: 16px 30px; border: 0; }
.formular button[disabled] { opacity: .6; cursor: progress; }
.formular .gdpr { font-family: var(--sans); font-size: 13px; color: var(--muted); }
.formular .past { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.podekovani { background: var(--povrch); padding: 48px 36px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.podekovani h3 { font-style: italic; font-weight: 300; font-size: 40px; line-height: 1.1; }
.podekovani p { font-size: 18px; line-height: 1.6; color: var(--text-2); }
.podekovani__seznam { margin: 0; padding: 0 0 0 20px; font-size: 18px; line-height: 1.6; }
.podekovani__akce { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.platba { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; background: #fff; border: 1px solid var(--linka-jemna); padding: 16px; width: 100%; }
.platba img { width: 160px; height: 160px; image-rendering: pixelated; }
.platba__udaje { display: flex; flex-direction: column; gap: 8px; font-family: var(--sans); font-size: 16px; line-height: 1.6; }
.platba__udaje p { color: var(--inkoust); }
.dulezite p.dulezite__storno { font-size: 16px; color: var(--na-tmavem-2); }
[hidden] { display: none !important; }

/* ---------- Helena ---------- */
.helena { padding-top: 96px; padding-bottom: 96px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 64px; align-items: center; }
.helena__text { display: flex; flex-direction: column; gap: 22px; max-width: 580px; }
.helena__text .uvod { font-size: 20px; line-height: 1.6; }
.helena__text .odstavec { font-size: 17px; line-height: 1.7; color: var(--text-2); }
.helena__text .podpis { font-size: 40px; line-height: 1; }
.helena__foto { aspect-ratio: 4 / 5; max-height: 600px; width: 100%; overflow: hidden; }
.helena__foto picture { display: block; height: 100%; }
.helena__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }   /* portrét: vlasy i brada, i ve výřezu 4 : 3 na mobilu */

/* ---------- reference ---------- */
.reference { padding-top: 96px; padding-bottom: 96px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 48px; }
.reference figure { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.reference blockquote { margin: 0; font-style: italic; font-weight: 300; font-size: 21px; line-height: 1.5; }
.reference figcaption { font-family: var(--rukou); font-size: 24px; color: var(--accent-ink); }

/* ---------- patka ---------- */
.patka { padding-top: 88px; padding-bottom: 36px; display: flex; flex-direction: column; gap: 56px; }
.patka__hlava { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 40px; align-items: start; }
.patka h2 { font-size: clamp(38px, 4.8vw, 64px); line-height: 1.05; color: var(--na-tmavem); }
.patka__kontakt { display: flex; flex-direction: column; gap: 8px; }
.patka__kontakt .telefon { font-family: var(--serif); font-size: 36px; color: var(--na-tmavem); }
.patka__kontakt .telefon:hover { color: var(--na-tmavem-2); }
.patka__kontakt .email { font-family: var(--sans); font-size: 17px; color: var(--na-tmavem-2); }
.patka__kontakt .adresa { font-family: var(--sans); font-size: 17px; font-style: normal; line-height: 1.4; color: var(--na-tmavem-2); }
/* mapa okolí: statický obrázek v barvách webu, pod ním odkazy do map a povinná atribuce OSM */
.patka__mapa { margin: 0; display: flex; flex-direction: column; gap: 10px; }
/* desktop: nadpis a mapa vlevo, kontakty vpravo přes oba řádky — vlevo nezůstane prázdno; mobil: nadpis, kontakty, mapa */
@media (min-width: 840px) {
  .patka__hlava { grid-template-columns: 1fr 1fr; }
  .patka__hlava > h2 { grid-column: 1; grid-row: 1; }
  .patka__kontakt { grid-column: 2; grid-row: 1 / span 2; }
  .patka__mapa { grid-column: 1; grid-row: 2; }
}
.patka__mapa img { width: 100%; height: auto; aspect-ratio: 12 / 5; object-fit: cover; border-radius: 14px; }
.patka__mapa figcaption { display: flex; flex-direction: column; gap: 4px; font-family: var(--sans); }
.patka__mapa-odkazy { display: flex; flex-wrap: wrap; gap: 0 24px; }
.patka__mapa-odkazy a { min-height: 44px; display: inline-flex; align-items: center; color: var(--na-tmavem-2); font-size: 15px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.patka__mapa-odkazy a:hover { color: #fff; }
.patka__mapa-atribuce { font-size: 12px; color: var(--na-tmavem-3); }
/* odkaz uvnitř věty atribuce — výjimka z velikosti cíle (WCAG 2.5.8, inline) */
.patka__mapa-atribuce a { color: inherit; text-decoration: underline; }
.patka__kontakt .pozn { font-family: var(--sans); font-size: 14px; color: var(--na-tmavem-3); padding-top: 6px; }
.patka__kontakt .tlacitko { margin-top: 10px; width: fit-content; }
.patka__pata { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-top: 1px solid var(--tmave-linka); padding-top: 22px; font-family: var(--sans); font-size: 13px; color: var(--na-tmavem-3); }
.patka__pata span { display: flex; gap: 24px; }
.patka__pata a { color: var(--ruze); display: inline-block; padding-block: 14px; margin-block: -14px; }
.patka__pata a:hover { color: #fff; }

/* ---------- blog ---------- */
.clanek-hlava { padding-top: 64px; padding-bottom: 32px; display: flex; flex-direction: column; gap: 16px; }
.clanek-hlava h1 { font-size: clamp(38px, 4.8vw, 64px); }
.clanek-hlava .rukou { font-size: 26px; }
.clanek { padding-bottom: 72px; display: flex; flex-direction: column; gap: 22px; font-size: 19px; line-height: 1.7; color: var(--text-2); }
.clanek .perex-clanku { font-size: 22px; line-height: 1.6; color: var(--inkoust); font-weight: 400; }
.clanek .pull-quote { font-style: italic; font-weight: 300; font-size: 32px; line-height: 1.35; margin: 16px 0; color: var(--inkoust); text-align: center; text-wrap: pretty; }
.cta-blok { padding-top: 56px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.cta-blok p { font-style: italic; font-weight: 300; font-size: 30px; line-height: 1.2; }
.patka--kratka { padding-top: 48px; gap: 0; }
/* textová podstránka (ochrana osobních údajů) */
.clanek h2 { font-size: 28px; font-weight: 400; margin-top: 18px; }
.clanek ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.clanek strong { font-weight: 500; color: var(--inkoust); }
.clanek a:not(.tlacitko) { color: var(--accent-tmavy); text-decoration: underline; text-underline-offset: 3px; }
.clanek .clanek__platnost { font-size: 16px; color: var(--muted); }
.formular .gdpr a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- 404 a potvrzení bez JS ---------- */
.chyba-404 { padding-top: 88px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.chyba-404 p { font-size: 19px; color: var(--text-2); max-width: 44ch; }

/* ---------- mobil ---------- */
/* Návrh MVP na mobil nic zvláštního nedefinuje (mřížky se skládají přes minmax);
   jediná výjimka je obrázkové logo, které v návrhu není (zadání Jakuba). */
@media (max-width: 640px) {
  /* souhrn na telefonu v jednom řádku, aby nezakrýval karty */
  .souhrn { flex-wrap: nowrap; gap: 10px; padding: 10px 10px 10px 16px; }
  body.ma-vyber .souhrn { bottom: 10px; }
  .souhrn__text { font-size: 14px; }
  .souhrn__prava { flex-wrap: nowrap; gap: 10px; }
  .souhrn__cena { font-size: 20px; white-space: nowrap; }
  .souhrn .tlacitko { padding: 10px 14px; font-size: 14px; white-space: nowrap; }
  .jen-siroke { display: none; }
  .jen-uzke { display: inline; }
  .logo img { height: 48px; }
  /* B3: kratší stránka na telefonu (10 233 → ~7 500 px) bez skrytí postav — užší okraje,
     menší svislé mezery, menší postavy, reference vodorovně, nižší fotka */
  .obal, .hlavicka { padding-left: 20px; padding-right: 20px; }
  .karta { padding: 24px 20px; }
  .hero { padding-top: 40px; padding-bottom: 56px; gap: 32px; }
  .denik, .lekce, .objednani, .helena, .reference { padding-top: 56px; padding-bottom: 56px; }
  .denik, .helena { gap: 32px; }
  .patka { padding-top: 56px; gap: 40px; }
  .ramecek svg { height: 240px; }
  .denik__postava svg { height: 300px; }
  .helena__foto { aspect-ratio: 4 / 3; }
  .patka__mapa img { aspect-ratio: 16 / 10; }
  .formular { padding: 24px 20px; }
  .vybrane { padding: 24px 20px; }
  .reference { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; gap: 16px; }
  .reference figure { flex: 0 0 85%; scroll-snap-align: start; }
}