/* Weby sítě Erazim
   Vzhled podle návrhu ELLER Studia (prototyp v2, Figma „Návrhy webu“).
   Základ je jejich stylopis; úpravy proti prototypu jsou označené
   komentářem „Erazim:“ a doplňky pro stránky, které prototyp nemá,
   jsou na konci souboru. Žádný framework, žádný build. */

/* Písma jsou na vlastním serveru (rychlost, GDPR). Roboto je proměnné,
   jeden soubor pokrývá řezy 400–700. */
@font-face { font-family: "Capriola"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../font/capriola-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Capriola"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../font/capriola-latin.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: "Roboto"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../font/roboto-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../font/roboto-latin.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; }

:root {
  --bez: #F8F5F0;
  --bezT: #ECE6DC;
  --bila: #FFFFFF;
  --plocha: #102D4C;
  --plochaT: #0C243E;
  --navy: #183657;
  --tlum: #576B82;
  --naTmT: rgba(255, 255, 255, .8);
  --modra: #226FF3;
  --modra-h: #1A5FD6;
  /* Erazim: modrá jako barva textu na světlém pozadí. #226FF3 má na béžové
     kontrast 4,2 : 1, AA chce 4,5 – na plochy tlačítek (bílý text 4,5 : 1)
     zůstává původní, na text se bere tmavší z hoveru (5,3 : 1). */
  --modra-text: #1A5FD6;
  --r: #E63627;
  --o: #EE711D;
  --y: #FABB10;
  --g: #79B936;
  --b: #3170B7;
  --p: #803D8F;
  /* Erazim: červená pod bílým textem pruhu školy (4,7 : 1 místo 4,3 : 1). */
  --r-plocha: #DB3222;

  --f-nadpis: "Capriola", "Trebuchet MS", system-ui, sans-serif;
  --f-text: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1200px;
  --gutter: 120px;
  --radius: 24px;
  --ease: cubic-bezier(.22, .8, .24, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --pop: cubic-bezier(.34, 1.56, .64, 1);
  --hdr: 96px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 110px; }
body {
  margin: 0;
  background: var(--bez);
  color: var(--navy);
  font: 400 17px/1.6 var(--f-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-nadpis); font-weight: 700; }
::selection { background: var(--y); color: var(--navy); }

.wrap { width: min(var(--wrap), calc(100% - 40px)); margin-inline: auto; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Typografie ---------- */
.display { font-size: 59px; line-height: 1.14; letter-spacing: -.03em; }
.h1 { font-size: 60px; line-height: 1.14; letter-spacing: -.03em; }
.h1-xl { font-size: 68px; line-height: 1.14; letter-spacing: -.03em; }
.h2 { font-size: 46px; line-height: 1.16; letter-spacing: -.03em; }
.h3 { font-size: 30px; line-height: 1.2; letter-spacing: -.02em; }
.h4 { font-size: 22px; line-height: 1.28; letter-spacing: -.01em; }
.citat { font: 400 30px/1.34 var(--f-nadpis); letter-spacing: -.01em; }
.perex { font-size: 20px; line-height: 1.5; }
.maly { font-size: 14px; line-height: 1.5; }
.maly-b { font-size: 14px; line-height: 1.5; font-weight: 500; }
.kicker { font-size: 14px; line-height: 1.5; font-weight: 500; color: var(--tlum); }
.tlum { color: var(--tlum); }
.na-tm { color: #fff; }
.na-tm .tlum, .na-tm-t { color: var(--naTmT); }
.center { text-align: center; }

/* ---------- Ručně kreslené podtržení ---------- */
.u { position: relative; display: inline-block; white-space: nowrap; }
.u > svg.u-svg {
  position: absolute; left: -2%; width: 104%;
  bottom: -.3em; height: .36em; overflow: visible; pointer-events: none;
}
.u-svg path { fill: none; stroke: var(--uc, var(--g)); stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s var(--ease) .35s; }
.slova .u-svg path { transition-delay: calc(var(--i, 0) * 45ms + .55s); }
.slova .u-svg path + path { transition-delay: calc(var(--i, 0) * 45ms + .85s); }
.u-svg path + path { transition-delay: .7s; }
.is-in .u-svg path, .u.is-in .u-svg path { stroke-dashoffset: 0; }

/* ---------- Sekce a pozadí ---------- */
.sec { position: relative; padding: 130px 0; }
.sec-sm { padding: 96px 0; }
.bg-bez { background: var(--bez); }
.bg-bezT { background: var(--bezT); }
.bg-bila { background: var(--bila); }
.bg-navy { background: var(--plocha); color: #fff; }
.bg-navyT { background: var(--plochaT); color: #fff; }
.bg-modra { background: var(--modra); color: #fff; }
/* Erazim: na zelené tmavý text – bílý má kontrast jen 2,4 : 1. */
.bg-g { background: var(--g); color: var(--plochaT); }
.duha { height: 12px; background: linear-gradient(90deg, var(--r) 0 16.66%, var(--o) 16.66% 33.33%, var(--y) 33.33% 50%, var(--g) 50% 66.66%, var(--b) 66.66% 83.33%, var(--p) 83.33% 100%); }
.sec > .duha:first-child { position: absolute; left: 0; right: 0; top: 0; }
.duha-anim { transform-origin: left; transform: scaleX(0); transition: transform 1.2s var(--ease-out); }
.duha-anim.is-in { transform: scaleX(1); }

.zahlavi { max-width: 820px; margin: 0 auto 72px; text-align: center; }
.zahlavi .h2 + p, .zahlavi .h1 + p { margin-top: 28px; }
.zahlavi p { max-width: 720px; margin-inline: auto; }
.zahlavi-l { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 64px; }
.zahlavi-l > p { max-width: 440px; }

/* ---------- Tlačítka ---------- */
.btn {
  --bg: var(--modra); --fg: #fff; --bd: var(--modra);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 56px; padding: 0 28px; border-radius: 999px;
  background: var(--bg); color: var(--fg); border: 1.5px solid var(--bd);
  font: 500 16px/1.2 var(--f-text); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .35s var(--pop), background-color .25s, box-shadow .3s, color .25s, border-color .25s;
  position: relative; isolation: isolate; overflow: hidden;
}
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.28), transparent 60%); opacity: 0; transition: opacity .3s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(34,111,243,.55); }
.btn:hover::after { opacity: 1; }
.btn:active { transform: translateY(0) scale(.98); }
.btn-primary:hover { --bg: var(--modra-h); --bd: var(--modra-h); }
.btn-obrys { --bg: transparent; --fg: var(--modra-text); --bd: var(--modra-text); }
.btn-obrys:hover { --bg: rgba(34,111,243,.07); box-shadow: none; }
.btn-light { --bg: #fff; --fg: var(--navy); --bd: #fff; }
.btn-light:hover { box-shadow: 0 10px 24px -10px rgba(0,0,0,.35); }
.btn-obrys-light { --bg: transparent; --fg: #fff; --bd: rgba(255,255,255,.7); }
.btn-obrys-light:hover { --bg: rgba(255,255,255,.1); --bd: #fff; box-shadow: none; }
.btn-sm { height: 44px; padding: 0 20px; font-size: 15px; }
.btn-full { width: 100%; }
.btn .sipka { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.btn:hover .sipka { transform: translateX(4px); }
.tlacitka { display: flex; flex-wrap: wrap; gap: 14px; }

.odkaz { color: var(--modra-text); font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.odkaz svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.odkaz:hover svg { transform: translateX(4px); }
.odkaz-u { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; font-weight: 500; }
.odkaz-u:hover { text-decoration-thickness: 2.5px; }

/* ---------- Ikony ---------- */
.ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.hi { display: inline-block; width: 56px; height: 56px; flex: none; color: var(--g); }
.hi svg { width: 100%; height: 100%; overflow: visible; }
.hi .sk { fill: currentColor; opacity: .16; transform-origin: 50% 50%; transform-box: fill-box; }
.hi .tah { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hi .tah.dot { stroke-dasharray: .1 5.6; }
.hi .tec { fill: currentColor; }
.hi.bila { color: #fff; }
.hi.bila .sk { opacity: .2; }
/* animace kreslení ikon */
.hi[data-kresli] .tah:not(.dot) { stroke-dasharray: var(--len, 200); stroke-dashoffset: var(--len, 200); }
.hi[data-kresli] .sk { transform: scale(0); }
.hi[data-kresli] .tec, .hi[data-kresli] .tah.dot { opacity: 0; }
.hi[data-kresli].is-in .tah:not(.dot) { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--ease) calc(var(--d, 0ms) + 180ms); }
.hi[data-kresli].is-in .sk { transform: scale(1); transition: transform .7s var(--pop) var(--d, 0ms); }
.hi[data-kresli].is-in .tec, .hi[data-kresli].is-in .tah.dot { opacity: 1; transition: opacity .5s calc(var(--d, 0ms) + .7s); }

/* ---------- Hlavička ---------- */
.hlavicka { position: sticky; top: 0; z-index: 50; background: var(--bez); transition: box-shadow .3s, transform .45s var(--ease), background-color .3s; }
.hlavicka.stin { box-shadow: 0 6px 30px -18px rgba(16,45,76,.45); background: rgba(248,245,240,.94); backdrop-filter: saturate(1.4) blur(10px); }
.hlavicka.schovat { transform: translateY(-100%); }
.hlavicka .wrap { height: var(--hdr); display: flex; align-items: center; gap: 36px; }
.logo { display: block; flex: none; }
.logo img { height: 40px; width: auto; }
.nav { display: flex; gap: 30px; align-items: center; }
.nav > a, .nav > .nav-dd > a {
  font: 500 13px/1.3 var(--f-text); letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  background: none; border: 0; padding: 8px 0; cursor: pointer; position: relative; display: inline-flex; align-items: center; gap: 4px;
}
.nav > a::after, .nav > .nav-dd > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--modra); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); border-radius: 2px; }
.nav > a:hover::after, .nav > a.aktivni::after, .nav-dd:hover > a::after, .nav-dd > a.aktivni::after { transform: scaleX(1); }
.nav-dd { position: relative; }
.nav-dd svg { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.nav-dd:hover svg, .nav-dd.otevreno svg { transform: rotate(180deg); }
.hl-vpravo { margin-left: auto; display: flex; align-items: center; gap: 24px; }
.hl-tel { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 15px; text-decoration: none; }
.hl-tel .ic { width: 18px; height: 18px; }
.hl-tel:hover { color: var(--modra-text); }
.hl-btn { height: 46px; padding: 0 22px; font-size: 15px; }
.hl-mob { display: none; margin-left: auto; gap: 10px; }
.kolecko { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--navy); background: transparent; cursor: pointer; transition: transform .3s var(--pop), background .2s; }
.kolecko.plne { background: var(--navy); color: #fff; }
.kolecko:active { transform: scale(.92); }
.kolecko .ic { width: 20px; height: 20px; }

/* mobilní menu */
.mmenu { position: fixed; inset: 0; z-index: 80; background: var(--plocha); color: #fff; display: flex; flex-direction: column; padding: 18px 20px 40px; transform: translateX(100%); transition: transform .55s var(--ease); overflow-y: auto; }
.mmenu.otevreno { transform: none; }
.mmenu-top { display: flex; justify-content: space-between; align-items: center; height: 44px; margin-bottom: 36px; }
.mmenu-top .kolecko { border-color: rgba(255,255,255,.6); color: #fff; }
.mmenu nav a { display: block; font: 700 30px/1.2 var(--f-nadpis); text-decoration: none; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.1); opacity: 0; transform: translateX(30px); transition: opacity .4s, transform .5s var(--ease); }
.mmenu.otevreno nav a { opacity: 1; transform: none; transition-delay: calc(var(--i) * 50ms + 150ms); }
.mmenu .mmenu-sk { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 28px; }
.mmenu .mmenu-sk a { font-size: 14px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); text-decoration: none; }
.mmenu .btn { margin-top: auto; }
body.zamceno { overflow: hidden; }

/* ---------- Patička ---------- */
.paticka { background: var(--plochaT); color: #fff; }
.paticka-obsah { display: grid; grid-template-columns: 380px 1fr; gap: 80px; padding: 96px 0 72px; }
.paticka-o img { height: 52px; width: auto; margin-bottom: 26px; }
.paticka-o p { color: var(--naTmT); font-size: 14px; line-height: 1.6; }
.paticka-o .tel { font: 700 26px/1.2 var(--f-nadpis); margin-top: 26px; display: inline-block; text-decoration: none; }
.paticka-o .mail { display: block; margin-top: 4px; text-decoration: none; }
.paticka-o .tel:hover, .paticka-o .mail:hover { color: var(--y); }
.paticka-odkazy { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.paticka-odkazy h4 { font-size: 18px; margin-bottom: 20px; }
.paticka-odkazy a { display: block; color: var(--naTmT); font-size: 14px; text-decoration: none; padding: 5px 0; transition: color .2s, transform .25s var(--ease); }
.paticka-odkazy a:hover { color: #fff; transform: translateX(3px); }
.paticka-spodek { border-top: 1px solid #182F48; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; font-size: 13px; color: var(--naTmT); }
.paticka-spodek a { text-decoration: none; }
.paticka-spodek .vpravo { display: flex; align-items: center; gap: 32px; }
.eller { display: inline-flex; color: var(--naTmT); opacity: .9; transition: opacity .2s; }
.eller:hover { opacity: 1; }
.eller svg { height: 20px; width: auto; }
.eller svg path { fill: currentColor; }

/* ---------- Fotky a tvary ---------- */
.foto { position: relative; overflow: hidden; border-radius: 20px; background: var(--bezT); }
.foto > img { width: 100%; height: 100%; object-fit: cover; }
[data-a="img"] { clip-path: inset(18% 18% 18% 18% round 28px); opacity: 0; transition: clip-path 1.2s var(--ease-out), opacity .6s; }
[data-a="img"] > img { transform: scale(1.18); transition: transform 1.6s var(--ease-out); }
[data-a="img"].is-in { clip-path: inset(0 0 0 0 round 20px); opacity: 1; }
[data-a="img"].is-in > img { transform: scale(1); }
.tvar { position: relative; }
.tvar img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Animace při scrollu ---------- */
[data-a] { --d: 0ms; }
[data-a="up"] { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease) var(--d), transform 1s var(--ease-out) var(--d); }
[data-a="fade"] { opacity: 0; transition: opacity 1.1s var(--ease) var(--d); }
[data-a="left"] { opacity: 0; transform: translateX(-48px); transition: opacity .9s var(--ease) var(--d), transform 1.1s var(--ease-out) var(--d); }
[data-a="right"] { opacity: 0; transform: translateX(48px); transition: opacity .9s var(--ease) var(--d), transform 1.1s var(--ease-out) var(--d); }
[data-a="zoom"] { opacity: 0; transform: scale(.92); transition: opacity .9s var(--ease) var(--d), transform 1.1s var(--ease-out) var(--d); }
[data-a="pop"] { opacity: 0; transform: scale(.3) rotate(-12deg); transition: opacity .4s var(--d), transform .8s var(--pop) var(--d); }
[data-a].is-in { opacity: 1; transform: none; }
[data-a="img"].is-in { transform: none; }

/* text po slovech */
.slova .sl { display: inline-block; opacity: 0; transform: translateY(.5em) rotate(2deg); transition: opacity .6s var(--ease), transform .8s var(--ease-out); transition-delay: calc(var(--i) * 45ms + var(--d, 0ms)); }
.slova.is-in .sl { opacity: 1; transform: none; }

/* parallax dekor */
[data-par] { will-change: transform; }

/* ---------- Dekor ---------- */
.dekor { position: absolute; pointer-events: none; z-index: 1; }
.dekor img { width: 100%; height: auto; }
.dekor-pop { opacity: 0; transform: scale(.4) rotate(-25deg); transition: opacity .5s, transform 1.1s var(--pop); }
.dekor-pop.is-in { opacity: 1; transform: none; }
.nalepka {
  position: absolute; z-index: 4; background: var(--y); color: var(--navy); padding: 12px 22px; border-radius: 999px;
  font: 700 19px/1.2 var(--f-nadpis); white-space: nowrap; box-shadow: 0 8px 20px -10px rgba(0,0,0,.35);
}

/* ---------- Úvod (hero) ---------- */
.uvod { position: relative; overflow: hidden; }
.uvod-home { height: 860px; }
.uvod-home .kolaz { position: absolute; left: 0; top: 0; width: 760px; height: 860px; }
.kolaz-kus { position: absolute; }
.kolaz-kus img { width: 100%; height: auto; }
.uvod-home .text { position: absolute; left: calc(50% + 40px); top: 105px; width: 560px; }
.uvod-home .text .display { margin-top: 20px; }
.uvod-home .perex { margin-top: 40px; }
.uvod-home .tlacitka { margin-top: 36px; }
.fakta { display: flex; gap: 44px; margin-top: 56px; padding-top: 26px; border-top: 1px solid rgba(24,54,87,.15); }
.fakta b { display: block; font: 700 22px/1.28 var(--f-nadpis); letter-spacing: -.01em; }
.fakta > div > span { display: block; font-size: 14px; color: var(--tlum); line-height: 1.5; }

/* úvod s dítětem */
.uvod-dite { display: grid; grid-template-columns: minmax(0, 1fr) 640px; align-items: center; gap: 20px; padding: 48px 60px 48px max(120px, calc((100% - 1200px) / 2)); position: relative; }
.uvod-dite .text .h1-xl { margin-top: 18px; }
.uvod-dite .text p.perex, .uvod-dite .text > p:not(.kicker) { margin-top: 32px; max-width: 600px; }
.uvod-dite .tlacitka { margin-top: 40px; }
.dite { position: relative; height: 540px; }
.dite .trajektorie { position: absolute; inset: -6% -10% auto -14%; width: 120%; height: auto; overflow: visible; z-index: 0; }
.dite .trajektorie path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: .5 15; opacity: .6; }
.dite .trajektorie path.mt { opacity: 1; stroke-dasharray: 1; stroke-dashoffset: 1; stroke-width: 16; transition: stroke-dashoffset 2.2s var(--ease) .5s; }
.dite.is-in .trajektorie path.mt { stroke-dashoffset: 0; }
.bg-navy .trajektorie path:not(.mt) { opacity: .9; stroke-width: 3.5; }
.dite-img { position: absolute; z-index: 3; left: 50%; bottom: -110px; width: auto; height: 660px; transform-origin: 50% 80%; }
.dite-img img { height: 100%; width: auto; max-width: none; }
.dite-img { animation: none; }
[data-a="dite"] { opacity: 0; transform: translate(-50%, 90px) scale(.9) rotate(-6deg); transition: opacity .6s, transform 1.3s var(--pop); }
[data-a="dite"].is-in { opacity: 1; transform: translate(-50%, 0) scale(1) rotate(0); }
[data-a="dite"].is-in.levituje img { animation: levitace 5.5s ease-in-out infinite; }
@keyframes levitace { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(-1.2deg); } }

/* ---------- Karty ---------- */
.karta { background: #fff; color: var(--navy); border-radius: var(--radius); padding: 30px 28px; position: relative; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.karta:hover { transform: translateY(-6px); box-shadow: 0 28px 50px -30px rgba(16,45,76,.4); }
.karta .hi { margin-bottom: 18px; }
.karta h3 { font-size: 22px; line-height: 1.28; letter-spacing: -.01em; margin-bottom: 12px; }
.karta p { font-size: 15px; line-height: 1.6; color: var(--tlum); }
.mriz { display: grid; gap: 20px; }
.mriz-2 { grid-template-columns: repeat(2, 1fr); gap: 24px; }
.mriz-3 { grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mriz-4 { grid-template-columns: repeat(4, 1fr); }
.karta-bez { background: var(--bez); }
.karta-bezT { background: var(--bezT); }
.karta-navy { background: var(--plocha); color: #fff; }
.karta-navy p { color: var(--naTmT); }

/* panely na tmavé */
.panel { background: rgba(255,255,255,.06); border-radius: var(--radius); padding: 32px 36px; color: #fff; }

/* ---------- Školní den ---------- */
.den-mriz { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.den .foto { aspect-ratio: 276 / 300; border-radius: 20px; }
.den .znacka { display: flex; align-items: center; gap: 12px; margin: 26px 0 18px; }
.den .znacka .hi { width: 48px; height: 48px; }
.den .znacka .linka { flex: 1; height: 0; border-top: 2px dotted rgba(24,54,87,.3); transform-origin: left; transform: scaleX(0); transition: transform 1s var(--ease-out) calc(var(--d) + .5s); }
.den.is-in .znacka .linka { transform: scaleX(1); }
.den h3 { font-size: 22px; line-height: 1.28; margin-bottom: 12px; }
.den p { font-size: 15px; line-height: 1.6; color: var(--tlum); }
.den .hi[data-kresli] .sk { transition-delay: calc(var(--d) + .35s); }

/* ---------- Kroky (přijímací řízení) ---------- */
.kroky { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 60px; margin-top: 8px; }
.kroky-3 { grid-template-columns: repeat(3, 1fr); max-width: 1040px; margin-inline: auto; }
.kroky .trasa { position: absolute; left: 34px; right: 34px; top: 34px; height: 4px; z-index: 0; overflow: visible; }
.kroky .trasa line { stroke: rgba(255,255,255,.55); stroke-width: 3; stroke-linecap: round; stroke-dasharray: .1 12; }
.kroky .trasa-maska { position: absolute; inset: -10px 0; clip-path: inset(0 100% 0 0); transition: clip-path 1.6s var(--ease) 1.3s; }
.kroky.is-in .trasa-maska { clip-path: inset(0 0 0 0); }
.krok { position: relative; z-index: 1; text-align: center; }
.krok .kulicka { width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 22px; display: grid; place-items: center; background: var(--kc, var(--modra)); color: #fff; font: 700 26px/1 var(--f-nadpis); transform: scale(0); transition: transform .7s var(--pop) calc(var(--i) * 160ms); box-shadow: 0 0 0 8px var(--plocha); }
.kroky.is-in .krok .kulicka { transform: scale(1); }
.krok .kulicka span { opacity: 0; transform: translateY(8px) scale(.6); transition: opacity .4s, transform .5s var(--pop); transition-delay: calc(var(--i) * 140ms + .9s); }
.kroky.is-in .krok .kulicka span { opacity: 1; transform: none; }
.krok h3 { font-size: 20px; line-height: 1.28; margin-bottom: 8px; opacity: 0; transform: translateY(12px); transition: opacity .6s, transform .7s var(--ease-out); transition-delay: calc(var(--i) * 120ms + 1.6s); }
.krok p { font-size: 15px; line-height: 1.55; color: var(--naTmT); opacity: 0; transform: translateY(12px); transition: opacity .6s, transform .7s var(--ease-out); transition-delay: calc(var(--i) * 120ms + 1.75s); }
.kroky.is-in .krok h3, .kroky.is-in .krok p { opacity: 1; transform: none; }
.krok.klic .kulicka::after { content: ""; position: absolute; }
.kroky-svetle .krok p { color: var(--tlum); }
.kroky-svetle .krok .kulicka { box-shadow: 0 0 0 8px var(--bez); }
.kroky-svetle .trasa line { stroke: rgba(24,54,87,.35); }

.info-pruh { display: flex; align-items: center; gap: 28px; max-width: 923px; margin: 72px auto 0; padding: 28px 40px; border-radius: var(--radius); background: var(--plochaT); }
.info-pruh .dekor-in { width: 55px; flex: none; }
.info-pruh p { font-size: 17px; line-height: 1.6; }

/* ---------- Mapa ---------- */
.mapa { position: relative; width: 1000px; max-width: 100%; margin: 0 auto; aspect-ratio: 1000 / 583; }
.mapa > img, .mapa > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mapa .obrys { opacity: 0; transform: scale(.96); transition: opacity 1s var(--ease), transform 1.4s var(--ease-out); }
.mapa.is-in .obrys { opacity: 1; transform: none; }
.mapa .cesty path { stroke-dashoffset: 0; }
.mapa .cesty { opacity: 0; transition: opacity 1.5s ease 1.6s; }
.mapa.is-in .cesty { opacity: 1; }
.pin { position: absolute; width: 3.2%; transform: translate(-50%, -100%); z-index: 2; }
.pin-ico { display: block; width: 100%; aspect-ratio: 32 / 43; opacity: 0; transform: translateY(-60px) scale(.6); transition: opacity .3s, transform .75s var(--pop); transition-delay: calc(var(--i) * 170ms + .6s); }
.mapa.is-in .pin-ico { opacity: 1; transform: none; }
.pin-ico svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 6px rgba(0,0,0,.25)); }
.pin-stin { position: absolute; left: 50%; bottom: -4px; width: 60%; height: 6px; margin-left: -30%; border-radius: 50%; background: rgba(0,0,0,.35); filter: blur(2px); transform: scale(0); transition: transform .5s var(--ease) calc(var(--i) * 170ms + .95s); }
.mapa.is-in .pin-stin { transform: scale(1); }
.pin-popis { position: absolute; left: 115%; top: 2%; white-space: nowrap; color: #fff; opacity: 0; transform: translateX(-10px); transition: opacity .5s, transform .6s var(--ease-out); transition-delay: calc(var(--i) * 170ms + 1.15s); text-decoration: none; }
.mapa.is-in .pin-popis { opacity: 1; transform: none; }
.pin-popis b { display: block; font: 700 22px/1.2 var(--f-nadpis); }
.pin-popis span { display: block; font-size: 14px; color: var(--naTmT); }
.pin-popis span.plno { color: var(--y); }
.pin:hover .pin-ico { transform: translateY(-6px) scale(1.08); transition-delay: 0s; }
.pin:hover .pin-popis b { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Výběr školy (rozbalovací) ---------- */
.vyber { background: var(--plochaT); border-radius: var(--radius); margin-top: 64px; overflow: hidden; }
.vyber-hlava { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 30px 40px; background: none; border: 0; color: #fff; cursor: pointer; text-align: left; }
.vyber-hlava b { font: 700 26px/1.2 var(--f-nadpis); }
.vyber-hlava small { display: block; color: var(--naTmT); font-size: 15px; margin-top: 4px; }
.vyber-hlava .kolecko { border-color: rgba(255,255,255,.5); color: #fff; transition: transform .5s var(--ease), background .3s; }
.vyber.otevreno .vyber-hlava .kolecko { transform: rotate(180deg); background: var(--modra); border-color: var(--modra); }
.vyber-telo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease); }
.vyber.otevreno .vyber-telo { grid-template-rows: 1fr; }
.vyber-telo > div { overflow: hidden; }
.vyber-vnitrek { padding: 0 40px 36px; }
.filtry { display: flex; flex-wrap: wrap; gap: 32px; padding: 26px 0 10px; border-top: 1px solid rgba(255,255,255,.08); }
.filtry-sk > span { display: block; font-size: 14px; font-weight: 500; color: var(--naTmT); margin-bottom: 10px; }
.chipy { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { height: 40px; padding: 0 18px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.35); background: transparent; color: #fff; font-size: 15px; font-weight: 500; cursor: pointer; transition: background .2s, border-color .2s, transform .3s var(--pop); }
.chip:hover { border-color: #fff; }
.chip:active { transform: scale(.94); }
.chip.aktivni { background: var(--modra); border-color: var(--modra); }
.pocet { font-size: 14px; color: var(--naTmT); margin: 14px 0 6px; }
.pocet b { color: #fff; }
.radky { }
.radek { display: grid; grid-template-columns: 1.55fr 1fr 1.25fr auto; gap: 24px; align-items: center; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.08); transition: opacity .35s, transform .45s var(--ease); }
.radek.skryt { display: none; }
.radek.mizi { opacity: 0; transform: translateX(-12px); }
.radek .nazev { display: flex; gap: 14px; align-items: baseline; }
.radek .nazev i { width: 11px; height: 11px; border-radius: 50%; flex: none; transform: translateY(-2px); }
.radek .nazev b { font: 700 22px/1.2 var(--f-nadpis); display: block; }
.radek .nazev small, .radek .forma small, .radek .volno small { display: block; font-size: 13px; color: var(--naTmT); }
.radek .forma, .radek .volno { font-size: 15px; }
.radek .volno .plno { color: var(--y); }
.radek .akce { display: flex; align-items: center; gap: 18px; }
.radek .akce a:first-child { font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.radek:hover .nazev b { color: #fff; }
.radek:hover { background: linear-gradient(90deg, rgba(255,255,255,.03), transparent); }

.jinde { display: flex; gap: 40px; align-items: center; justify-content: space-between; padding: 40px; border-radius: var(--radius); background: rgba(255,255,255,.05); margin-top: 56px; }
.jinde .h4 { color: #fff; }
.jinde p { color: var(--naTmT); font-size: 15px; margin-top: 6px; max-width: 330px; }
.programy { display: grid; grid-template-columns: repeat(4, 168px); gap: 24px; }
.program { display: flex; gap: 10px; text-decoration: none; }
.program i { width: 11px; height: 11px; border-radius: 50%; margin-top: 6px; flex: none; }
.program b { display: block; font-weight: 600; font-size: 16px; color: #fff; }
.program span { display: block; font-size: 13px; color: var(--naTmT); }
.program:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Video ---------- */
.video-sek { position: relative; height: 810px; overflow: hidden; background: var(--plochaT); color: #fff; display: grid; place-items: center; }
.video-sek video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 2.4s var(--ease-out); }
.video-sek.is-in video { transform: scale(1); }
/* Erazim: náhled videa je obrázek pod ním (loading="lazy", element video). */
.video-sek .video-nahled { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 2.4s var(--ease-out); }
.video-sek.is-in .video-nahled { transform: scale(1); }
.video-sek::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 55% 45% at 50% 50%, rgba(12,36,62,.55), transparent 75%), rgba(12,36,62,.38); }
.video-sek .slogan { position: relative; z-index: 2; text-align: center; padding: 0 20px; }
.video-sek .duha { position: absolute; left: 0; right: 0; top: 0; z-index: 2; }

/* ---------- Recenze ---------- */
.recenze-sek { overflow: hidden; }
.pas { position: relative; margin-top: 64px; touch-action: pan-y; cursor: grab; user-select: none; }
.pas:active { cursor: grabbing; }
.pas-stopa { display: flex; gap: 28px; width: max-content; will-change: transform; padding: 68px 0 10px; }
.recenze { width: 380px; height: 437px; flex: none; background: #fff; color: var(--navy); border-radius: var(--radius); padding: 34px 32px 30px; position: relative; display: flex; flex-direction: column; transition: transform .45s var(--ease), box-shadow .45s; }
.recenze:hover { transform: translateY(-8px) rotate(-.5deg); box-shadow: 0 30px 50px -28px rgba(0,0,0,.45); }
.recenze .r-foto { position: absolute; right: 26px; top: -62px; width: 200px; height: 168px; }
.recenze .r-foto img { width: 100%; height: 100%; object-fit: cover; }
.recenze .uvozovky { display: flex; gap: 8px; margin-top: 22px; }
.recenze .uvozovky svg { width: 26px; height: auto; }
.recenze h3 { font-size: 22px; line-height: 1.28; margin-top: auto; }
.recenze .r-citat { font-size: 14.5px; line-height: 1.6; color: var(--tlum); margin-top: 14px; flex: 1; }
.recenze .r-kdo { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.recenze .avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 15px; flex: none; }
.recenze .avatar .ic { width: 18px; height: 18px; }
.recenze .r-kdo b { display: block; font-size: 14px; font-weight: 600; }
.recenze .r-kdo small { display: block; font-size: 13px; color: var(--tlum); }
.recenze .r-hlava { height: 116px; }
.ovladani { display: flex; align-items: center; gap: 28px; }
.sipky { display: flex; gap: 10px; }
.sipka-btn { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid rgba(255,255,255,.6); background: transparent; color: #fff; cursor: pointer; transition: transform .3s var(--pop), background .2s, border-color .2s; }
.sipka-btn.plna { background: #fff; color: var(--navy); border-color: #fff; }
.sipka-btn:hover { transform: scale(1.08); }
.sipka-btn:active { transform: scale(.92); }
.sipka-btn .ic { width: 22px; height: 22px; }
.sipka-btn.zpet .ic { transform: rotate(180deg); }
.sipky-tm .sipka-btn { border-color: rgba(24,54,87,.25); color: var(--navy); }
.sipky-tm .sipka-btn.plna { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ---------- Galerie ---------- */
.galerie { overflow: hidden; }
.rada { display: flex; gap: 20px; width: max-content; will-change: transform; }
.rada + .rada { margin-top: 20px; }
.g-foto { margin: 0; position: relative; flex: none; height: 320px; border-radius: 20px; overflow: hidden; cursor: zoom-in; background: rgba(255,255,255,.06); }
.rada-2 .g-foto { height: 270px; }
.g-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out), filter .5s; }
.g-foto:hover img { transform: scale(1.06); }
.g-foto .stitek { position: absolute; left: 14px; bottom: 14px; background: #fff; color: var(--navy); font-size: 13px; font-weight: 500; padding: 4px 12px; border-radius: 999px; transform: translateY(6px); opacity: .95; transition: transform .35s var(--ease); }
.g-foto:hover .stitek { transform: none; }
.galerie-wrap { margin-top: 64px; }
.galerie-wrap:hover .g-foto img { filter: saturate(.85); }
.galerie-wrap .g-foto:hover img { filter: none; }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(12,36,62,.92); display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .35s; }
.lightbox.otevreno { opacity: 1; pointer-events: auto; }
.lightbox figure { margin: 0; max-width: min(1100px, 92vw); max-height: 86vh; transform: scale(.94); transition: transform .5s var(--ease-out); }
.lightbox.otevreno figure { transform: none; }
.lightbox img { max-height: 80vh; width: auto; border-radius: 18px; margin: 0 auto; }
.lightbox figcaption { color: #fff; text-align: center; margin-top: 14px; font-size: 15px; }
.lightbox .kolecko { position: absolute; border-color: rgba(255,255,255,.5); color: #fff; width: 52px; height: 52px; }
.lb-zavrit { top: 24px; right: 24px; }
.lb-zpet { left: 24px; top: 50%; }
.lb-dal { right: 24px; top: 50%; }
.lb-zpet .ic { transform: rotate(180deg); }

/* ---------- Otázky (FAQ) ---------- */
.otazka { border-bottom: 1px solid rgba(24,54,87,.15); }
.otazka:first-child { border-top: 1px solid rgba(24,54,87,.15); }
.otazka button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; background: none; border: 0; cursor: pointer; text-align: left; }
.otazka button span { font: 700 22px/1.28 var(--f-nadpis); letter-spacing: -.01em; transition: color .2s; }
.otazka button:hover span { color: var(--modra-text); }
.plus { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--navy); display: grid; place-items: center; flex: none; position: relative; transition: background .3s, transform .5s var(--ease); }
.plus::before, .plus::after { content: ""; position: absolute; width: 14px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .45s var(--ease); }
.plus::after { transform: rotate(90deg); }
.otazka.otevreno .plus { background: var(--navy); color: #fff; transform: rotate(180deg); }
.otazka.otevreno .plus::after { transform: rotate(0deg); }
.odpoved { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.otazka.otevreno .odpoved { grid-template-rows: 1fr; }
.odpoved > div { overflow: hidden; }
.odpoved p { padding: 0 64px 28px 0; color: var(--tlum); opacity: 0; transform: translateY(-6px); transition: opacity .4s, transform .5s var(--ease); }
.otazka.otevreno .odpoved p { opacity: 1; transform: none; transition-delay: .12s; }

/* ---------- Formulář ---------- */
.formular { background: var(--bez); color: var(--navy); border-radius: var(--radius); padding: 44px; position: relative; overflow: hidden; }
.formular.bila { background: #fff; }
.formular h3 { font-size: 30px; line-height: 1.2; }
.formular > p.tlum { margin-top: 10px; font-size: 15px; }
.pole { margin-top: 22px; display: block; }
.pole > span { display: block; font-size: 14px; font-weight: 500; margin-bottom: 8px; }
.pole input, .pole select, .pole textarea {
  width: 100%; height: 56px; border-radius: 14px; border: 1.5px solid rgba(24,54,87,.18); background: #fff; padding: 0 18px;
  font: 400 16px/1.4 var(--f-text); color: var(--navy); transition: border-color .2s, box-shadow .25s; appearance: none;
}
.pole textarea { height: 116px; padding: 14px 18px; resize: vertical; }
.pole select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23183657' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 46px; cursor: pointer; }
.pole input:focus, .pole select:focus, .pole textarea:focus { outline: none; border-color: var(--modra); box-shadow: 0 0 0 4px rgba(34,111,243,.15); }
.pole.chyba input { border-color: var(--r); box-shadow: 0 0 0 4px rgba(230,54,39,.12); animation: zatrest .4s; }
@keyframes zatrest { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.pole-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.zaskrt { display: flex; align-items: center; gap: 12px; margin-top: 22px; font-size: 15px; cursor: pointer; }
.zaskrt input { position: absolute; opacity: 0; }
.zaskrt i { width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid rgba(24,54,87,.3); display: grid; place-items: center; background: #fff; transition: background .2s, border-color .2s; flex: none; }
.zaskrt i svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 2.5; fill: none; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .35s var(--ease) .05s; }
.zaskrt input:checked + i { background: var(--modra); border-color: var(--modra); }
.zaskrt input:checked + i svg { stroke-dashoffset: 0; }
.odeslani { display: flex; align-items: center; gap: 22px; margin-top: 28px; }
.odeslani p { font-size: 13px; color: var(--tlum); line-height: 1.5; }
.btn.nacita { pointer-events: none; color: transparent; }
.btn.nacita::before { content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; animation: tocit .7s linear infinite; }
@keyframes tocit { to { transform: rotate(360deg); } }
.diky { position: absolute; inset: 0; background: inherit; display: grid; place-content: center; text-align: center; padding: 40px; opacity: 0; pointer-events: none; transition: opacity .5s; }
.formular.odeslano .diky { opacity: 1; pointer-events: auto; }
.diky .fajfka { width: 88px; height: 88px; margin: 0 auto 26px; border-radius: 50%; background: var(--g); display: grid; place-items: center; transform: scale(0); transition: transform .7s var(--pop) .2s; }
.formular.odeslano .diky .fajfka { transform: scale(1); }
.diky .fajfka svg { width: 44px; height: 44px; stroke: #fff; stroke-width: 3; fill: none; stroke-dasharray: 40; stroke-dashoffset: 40; transition: stroke-dashoffset .6s var(--ease) .6s; }
.formular.odeslano .diky .fajfka svg { stroke-dashoffset: 0; }
.diky h3 { margin-bottom: 12px; }
.diky p { color: var(--tlum); max-width: 380px; margin: 0 auto 26px; }

/* ---------- Tabulky ---------- */
.tabulka { background: #fff; border-radius: var(--radius); overflow: hidden; }
.tab-radek { display: grid; align-items: center; gap: 20px; padding: 22px 32px; border-top: 1px solid rgba(24,54,87,.08); transition: background .25s; }
.tab-radek:first-child { border-top: 0; }
.tab-hlava { background: var(--plocha); color: #fff; font-weight: 500; font-size: 15px; padding-top: 22px; padding-bottom: 22px; }
.tab-radek:not(.tab-hlava):hover { background: var(--bez); }
.tab-skola { display: flex; gap: 14px; align-items: baseline; text-decoration: none; }
.tab-skola i { width: 11px; height: 11px; border-radius: 50%; flex: none; transform: translateY(-1px); }
.tab-skola b { font: 700 19px/1.25 var(--f-nadpis); display: block; }
.tab-skola small { display: block; font-size: 13px; color: var(--tlum); }
.tab-radek .cena { font-weight: 600; }
.tab-radek .nic { color: var(--tlum); }

/* ---------- Lidé ---------- */
.lide { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 24px; }
.clovek { width: 220px; text-align: center; }
.clovek .portret { width: 200px; height: 200px; margin: 0 auto 18px; border-radius: 50%; overflow: hidden; position: relative; }
.clovek .portret img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.clovek:hover .portret img { transform: scale(1.07); }
.clovek .portret::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 0 var(--y); transition: box-shadow .4s var(--ease); }
.clovek:hover .portret::after { box-shadow: inset 0 0 0 6px var(--kc, var(--y)); }
.clovek b { display: block; font-weight: 600; }
.clovek small { color: var(--tlum); font-size: 14px; }
.lide-site .clovek { width: 250px; }
.lide-site .portret { width: 180px; height: 180px; }

/* ---------- Karty škol (Naše školy) ---------- */
.ks-pas { margin-top: 64px; cursor: grab; touch-action: pan-y; user-select: none; }
.ks-stopa { display: flex; gap: 24px; width: max-content; will-change: transform; padding: 10px 0 20px; }
.ks { width: 320px; flex: none; background: #fff; border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; text-decoration: none; transition: transform .45s var(--ease), box-shadow .45s; }
.ks:hover { transform: translateY(-8px); box-shadow: 0 28px 50px -30px rgba(16,45,76,.45); }
.ks-hlava { display: flex; align-items: center; gap: 10px; padding: 6px 6px 14px; }
.ks-hlava svg { width: 24px; height: 32px; flex: none; transition: transform .45s var(--pop); }
.ks:hover .ks-hlava svg { transform: translateY(-4px) rotate(-6deg); }
.ks-hlava b { font: 700 22px/1.28 var(--f-nadpis); letter-spacing: -.01em; }
.ks .foto { display: block; height: 210px; border-radius: 16px; }
.ks .foto img { transition: transform 1s var(--ease-out); }
.ks:hover .foto img { transform: scale(1.06); }
.ks-obsah { padding: 18px 6px 6px; flex: 1; display: flex; flex-direction: column; }
.ks-obsah small { font-size: 14px; color: var(--tlum); }
.ks-obsah p { font-size: 16px; line-height: 1.55; margin-top: 8px; }
.ks-obsah .odkaz { margin-top: auto; padding-top: 16px; font-size: 14px; }
.prubeh-wrap { display: flex; align-items: center; gap: 40px; margin-top: 40px; }
.prubeh { flex: 1; height: 4px; border-radius: 2px; background: rgba(24,54,87,.12); position: relative; overflow: hidden; }
.prubeh i { position: absolute; left: 0; top: 0; bottom: 0; width: 32%; background: var(--navy); border-radius: 2px; }

/* ---------- Podnavigace školy ---------- */
.podnav { background: var(--pn, var(--g)); color: #fff; position: sticky; top: var(--hdr); z-index: 40; transition: top .45s var(--ease); }
.hlavicka.schovat ~ main .podnav, body.hl-skryta .podnav { top: 0; }
.podnav .wrap { height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.podnav b { font: 700 18px/1.3 var(--f-nadpis); display: inline-flex; align-items: center; gap: 10px; }
.podnav nav { display: flex; gap: 28px; }
.podnav nav a { font-size: 15px; font-weight: 500; text-decoration: none; color: rgba(255,255,255,.88); position: relative; padding: 4px 0; }
.podnav nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: #fff; transform: scaleX(0); transition: transform .3s var(--ease); transform-origin: left; }
.podnav nav a:hover, .podnav nav a.aktivni { color: #fff; }
.podnav nav a:hover::after, .podnav nav a.aktivni::after { transform: scaleX(1); }

/* ---------- Ostatní ---------- */
.adresa-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--bez); border-radius: 999px; padding: 10px 18px; font-size: 14px; font-weight: 500; text-decoration: none; transition: transform .3s var(--pop); }
.adresa-pill:hover { transform: scale(1.04); }
.adresa-pill .ic { width: 18px; height: 18px; }
.pill-tm { display: inline-flex; gap: 10px; align-items: center; background: rgba(255,255,255,.1); padding: 10px 18px; border-radius: 999px; font-size: 14px; }
.cislo { font-variant-numeric: tabular-nums; }
.oddel { height: 1px; background: rgba(24,54,87,.12); }

/* časová osa */
.osa { display: grid; grid-template-columns: repeat(4, 1fr); gap: 56px 24px; position: relative; }
.milnik .rok-l { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.milnik .rok-l i { width: 14px; height: 14px; border-radius: 50%; background: var(--kc); flex: none; transform: scale(0); transition: transform .6s var(--pop) var(--d); }
.milnik .rok-l span { flex: 1; border-top: 2px dotted rgba(255,255,255,.3); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease-out) calc(var(--d) + .2s); }
.milnik.is-in .rok-l i { transform: scale(1); }
.milnik.is-in .rok-l span { transform: scaleX(1); }
.milnik b { display: block; font: 700 30px/1.2 var(--f-nadpis); margin-bottom: 8px; }
.milnik p { color: var(--naTmT); font-size: 15px; }

/* ---------- Doplňky ---------- */
.svg-in { width: 100%; height: auto; overflow: visible; }
.dekor .svg-in path, .dekor-in .svg-in path { stroke-dasharray: none; }
.dekor-in { display: block; }
.tvar-svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* Erazim: tvar jako obrázek s clip-path (GrafikaHelper::tvarFotoLina). */
.tvar-lina { display: block; width: 100%; height: 100%; }
.tvar-lina > svg { position: absolute; width: 0; height: 0; }
.tvar-lina > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cesty-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mcesta { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--ease); }
.mapa.is-in .mcesta { stroke-dashoffset: 0; }
.mapa .obrys { position: absolute; inset: 0; width: 100%; height: 100%; }
.kolaz-obal { position: absolute; inset: 0; pointer-events: none; }
.kolaz-obal .kolaz { left: calc(50% - 720px); pointer-events: auto; }
.uvod-home .kolaz-kus img { pointer-events: none; }
.zajem-mriz { display: grid; grid-template-columns: 460px 640px; justify-content: space-between; align-items: start; position: relative; }
.zajem-text { position: relative; min-height: 100%; }
.tel-velky { display: inline-flex; align-items: center; gap: 14px; margin-top: 30px; font: 700 30px/1.2 var(--f-nadpis); text-decoration: none; color: #fff; }
.tel-velky .ic { width: 28px; height: 28px; }
.tel-velky:hover { color: var(--y); }
.dite-home { position: relative; height: 560px; margin-top: 10px; }
.dite-home .dite-img { left: 48%; bottom: auto; top: 0; }
.dite-home [data-a="dite"].is-in { transform: translate(-50%, 0) rotate(12deg); }
.dite-home [data-a="dite"] { transform: translate(-50%, 90px) scale(.9) rotate(4deg); }

.zaver .telefon-h2 { display: inline-flex; align-items: center; gap: 16px; margin-top: 18px; color: #fff; text-decoration: none; }
.zaver .telefon-h2 .ic { width: 34px; height: 34px; }
.zaver .telefon-h2:hover { color: var(--y); }
.skoly-deti { width: 854px; max-width: 100%; margin: 0 auto 26px; }
.skoly-deti img { width: 100%; height: auto; }
.skoly-deti.is-in img { animation: levitace 6s ease-in-out 1.2s infinite; }

.karta-tmava { background: var(--plochaT); color: #fff; padding: 40px; }
.karta-tmava h3.h3 { font-size: 30px; line-height: 1.2; margin: 22px 0 14px; }
.karta-tmava p { color: var(--naTmT); font-size: 16px; }
.ikona-kruh { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; transform: scale(0) rotate(-90deg); transition: transform .8s var(--pop) calc(var(--d, 0ms) + .3s); }
.is-in .ikona-kruh, .is-in > .ikona-kruh { transform: none; }
.ikona-kruh .ic { width: 24px; height: 24px; stroke-width: 2.4; }

.tab-cenik .tab-radek { grid-template-columns: 340px repeat(4, 1fr); color: var(--navy); text-decoration: none; padding: 22px 32px; }
.tab-hlava-svetla { background: var(--bez); color: var(--navy); }
a.tab-radek:hover .tab-skola b { color: var(--modra-text); }
.indiv-mriz { display: grid; grid-template-columns: 480px minmax(0, 660px); justify-content: space-between; gap: 60px; align-items: center; }
.indiv-dite { height: 470px; }
.indiv-dite .dite-img { left: 50%; }
.cena-karta small { display: block; font-size: 14px; color: var(--tlum); }
.cena-karta b { display: block; font: 700 40px/1.15 var(--f-nadpis); letter-spacing: -.02em; margin: 12px 0; white-space: nowrap; }
.cena-karta p { font-size: 15px; }

.pribeh-mriz { display: grid; grid-template-columns: 540px minmax(0, 596px); justify-content: space-between; gap: 60px; align-items: center; }
.pribeh-foto { position: relative; height: 500px; }
.pf-a { position: absolute; left: 20px; top: 0; width: 510px; height: 494px; }
.pf-puzzle { position: absolute; left: 416px; top: 279px; width: 169px; z-index: 2; }
.pf-puzzle .svg-in { transform: rotate(23deg); }
.pribeh-text p + p { margin-top: 20px; }
.karta.mise { color: #fff; padding: 40px; }
.karta.mise h3 { font-size: 30px; line-height: 1.2; margin: 20px 0 12px; }
.karta.mise p { color: rgba(255,255,255,.88); font-size: 16px; }
.hi-60 { width: 60px; height: 60px; }
.projekt { background: var(--bezT); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; }
.projekt .foto { height: 260px; }
.projekt-text { padding: 24px; }
.projekt-text .h3 { margin: 8px 0 12px; }

.chipy-svetle { justify-content: center; align-items: center; }
.chipy-svetle .chip { border-color: transparent; background: #fff; color: var(--navy); height: 46px; }
.chipy-svetle .chip:hover { border-color: rgba(24,54,87,.25); }
.chipy-svetle .chip.aktivni { background: var(--modra); color: #fff; }
.oddelovac { width: 1.5px; height: 24px; background: var(--navy); opacity: .2; margin: 0 6px; }
.clanky { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
.clanek { background: #fff; border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .45s var(--ease), box-shadow .45s; }
.clanek[hidden] { display: none; }
.clanek:hover { transform: translateY(-6px); box-shadow: 0 28px 50px -30px rgba(16,45,76,.4); }
.clanek .foto { border-radius: 0; height: 230px; }
.clanek .foto img { transition: transform 1s var(--ease-out); }
.clanek:hover .foto img { transform: scale(1.06); }
.clanek-text { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.clanek-text .h4 { margin: 12px 0 10px; }
.clanek-text p { color: var(--tlum); font-size: 15px; flex: 1; }
.clanek-text .odkaz { margin-top: 18px; }
.stitek-sk { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--tlum); }
.stitek-sk i { width: 9px; height: 9px; border-radius: 50%; }
.prazdno { text-align: center; margin-top: 40px; color: var(--tlum); }
.akce { max-width: 960px; margin: 0 auto; display: grid; gap: 14px; }
.akce-radek { display: flex; align-items: center; gap: 28px; padding: 16px 32px 16px 16px; border-radius: var(--radius); background: var(--plochaT); transition: transform .35s var(--ease), background .3s; }
.akce-radek:hover { transform: translateX(6px); background: #0a1f36; }
.datum { width: 88px; height: 88px; border-radius: 20px; display: grid; place-content: center; text-align: center; color: #fff; flex: none; }
.datum.tmavy { color: var(--navy); }
.datum b { font: 700 24px/1.1 var(--f-nadpis); }
.datum small { font-size: 12.5px; }
.akce-text { flex: 1; }
.akce-text b { display: block; font: 700 22px/1.28 var(--f-nadpis); }
.akce-text small { color: var(--naTmT); font-size: 15px; }
.akce-radek .odkaz-u { color: #fff; }

.nejsme-mriz { display: grid; grid-template-columns: 660px 1fr; gap: 120px; align-items: center; }
.obavy-mriz { display: grid; grid-template-columns: 400px 1fr; gap: 100px; align-items: start; }

/* ---------- Kontakt ---------- */
.kontakt-boxy { display: grid; gap: 14px; margin-top: 36px; max-width: 460px; }
.k-box { display: flex; align-items: center; gap: 18px; padding: 26px 40px 26px 32px; border-radius: var(--radius); background: #fff; text-decoration: none; transition: transform .4s var(--pop), box-shadow .4s; }
.k-box:hover { transform: translateY(-4px) scale(1.01); box-shadow: 0 24px 40px -24px rgba(16,45,76,.4); }
.k-box b { display: block; font: 700 30px/1.25 var(--f-nadpis); letter-spacing: -.02em; }
.k-box small { font-size: 15px; color: var(--tlum); }
.k-ikona { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--bezT); flex: none; }
.k-ikona .ic { width: 26px; height: 26px; }
.k-box-modry { background: var(--modra); color: #fff; }
.k-box-modry small { color: var(--naTmT); }
.k-box-modry .k-ikona { background: rgba(255,255,255,.16); }
.k-box-modry:hover .k-ikona { animation: zvoni .6s ease-in-out 2; }
@keyframes zvoni { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
.tab-kontakt .tab-radek { grid-template-columns: 330px 1.6fr .8fr .8fr; color: var(--navy); text-decoration: none; padding: 20px 32px; }
.tab-kontakt .tab-hlava { padding: 20px 32px; }
.tab-kontakt .tab-skola b { font-size: 18px; }
.dite-zajem { height: 520px; margin-top: 30px; }
.dite-zajem .dite-img { left: 42%; bottom: auto; top: 0; }

/* ---------- Detail školy ---------- */
.detail-uvod-mriz { width: min(1320px, calc(100% - 40px)); margin: 0 auto; display: grid; grid-template-columns: 580px minmax(0, 620px); justify-content: space-between; gap: 60px; align-items: center; padding: 60px 0 110px; }
.detail-kolaz { position: relative; height: 560px; }
.dk { position: absolute; }
.dk-puzzle-o { left: 10px; top: 10px; width: 155px; z-index: 2; }
.dk-a { left: 40px; top: 50px; width: 470px; height: 455px; z-index: 1; }
.dk-d { left: 370px; top: 330px; width: 230px; height: 223px; z-index: 3; }
.dk-puzzle-m { left: 30px; top: 400px; width: 73px; z-index: 3; }
.dk-puzzle-m .svg-in { transform: rotate(14deg); }
.detail-text .h1 { margin-top: 18px; }
.detail-text .perex { margin-top: 32px; }
.detail-text .tlacitka { margin-top: 36px; }
.mapa-pruh { position: relative; aspect-ratio: 1440 / 320; background: var(--bezT); overflow: hidden; }
.mapa-pruh-svg, .mapa-pruh-svg img, .mapa-pruh picture { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mapa-pruh-svg img { object-fit: cover; transform: scale(1.06); transition: transform 2s var(--ease-out); }
.mapa-pruh.is-in .mapa-pruh-svg img { transform: none; }
.mapa-pruh-pin { position: absolute; left: 31.65%; top: 43.06%; display: flex; align-items: flex-end; text-decoration: none; transform: translate(-24px, -100%); }
.mapa-pruh-pin .pin-ico { width: 48px; height: 64px; opacity: 0; transform: translateY(-80px) scale(.5); transition: opacity .3s .5s, transform .9s var(--pop) .5s; }
.mapa-pruh.is-in .mapa-pruh-pin .pin-ico { opacity: 1; transform: none; }
.mapa-pruh-pin .pin-ico svg { width: 100%; height: 100%; filter: drop-shadow(0 8px 8px rgba(16,45,76,.3)); }
.mapa-stitek { background: #fff; border-radius: 16px; padding: 10px 18px; margin: 0 0 24px 8px; box-shadow: 0 6px 18px rgba(24,54,87,.12); opacity: 0; transform: translateX(-12px); transition: opacity .5s 1.2s, transform .6s var(--ease-out) 1.2s; }
.mapa-pruh.is-in .mapa-stitek { opacity: 1; transform: none; }
.mapa-stitek b { display: block; font-size: 14px; font-weight: 500; }
.mapa-stitek span { font-size: 14px; color: var(--tlum); }
.mapa-pruh-pin:hover .mapa-stitek { box-shadow: 0 12px 28px rgba(24,54,87,.22); }
.mapa-osm { position: absolute; right: 20px; bottom: 12px; font-size: 11px; color: var(--tlum); opacity: .8; }
.budova-foto { display: grid; grid-template-columns: 300fr 560fr 300fr; gap: 20px; height: 400px; }
.budova-foto .foto { height: 100%; }
.prijimani-mriz { display: grid; grid-template-columns: minmax(0, 668px) minmax(0, 500px); justify-content: space-between; gap: 32px; align-items: start; }
.snem { display: flex; align-items: center; gap: 22px; padding: 22px 28px; border-radius: var(--radius); background: var(--bezT); margin-top: 28px; }
.snem p { font-weight: 500; }
.skolne-karta { background: var(--plocha); color: #fff; border-radius: var(--radius); padding: 36px 40px; display: flex; flex-direction: column; gap: 12px; }
.skolne-karta b { font: 700 40px/1.15 var(--f-nadpis); letter-spacing: -.02em; }
.skolne-karta .odkaz-u { color: #fff; margin-top: 8px; }
.kontakt-mriz { display: grid; grid-template-columns: 400px minmax(0, 720px); justify-content: space-between; gap: 40px; align-items: start; }
.kontakt-info li { display: flex; gap: 16px; padding: 12px 0; font-size: 17px; line-height: 1.6; }
.kontakt-info .ic { color: var(--modra); width: 22px; height: 22px; margin-top: 3px; }
.kontakt-info a { text-decoration: none; }
.kontakt-info a:hover { color: var(--y); }

/* ---------- Responzivita ---------- */
@media (max-width: 1240px) {
  .nav { gap: 22px; }
  .uvod-home .text { left: auto; right: 40px; width: 520px; }
  .uvod-home .kolaz { transform: scale(.88); transform-origin: left top; }
}

@media (max-width: 1100px) {
  :root { --hdr: 68px; }
  .nejsme-mriz, .obavy-mriz { grid-template-columns: 1fr; gap: 40px; }
  .uvod-home { height: auto; padding: 0 0 72px; }
  .uvod-home .kolaz-obal { position: relative; height: 650px; overflow: hidden; }
  .uvod-home .kolaz-obal .kolaz { transform: scale(.75); transform-origin: top center; left: calc(50% - 380px); }
  .uvod-home .text { position: relative; left: auto; right: auto; top: auto; width: min(620px, calc(100% - 40px)); margin: 0 auto; text-align: center; }
  .uvod-home .tlacitka, .uvod-home .fakta { justify-content: center; }
  .nav, .hl-vpravo { display: none; }
  .hl-mob { display: flex; }
  .logo img { height: 32px; }
  .den-mriz { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
  .mriz-4 { grid-template-columns: repeat(2, 1fr); }
  .kroky { grid-template-columns: 1fr; gap: 26px; max-width: 520px; margin-inline: auto; }
  .kroky .trasa { display: none; }
  .krok { display: grid; grid-template-columns: 68px 1fr; gap: 0 20px; text-align: left; align-items: start; }
  .krok .kulicka { margin: 0; grid-row: span 2; }
  .krok h3 { margin-top: 6px; }
  .paticka-obsah { grid-template-columns: 1fr; gap: 48px; }
  .programy { grid-template-columns: repeat(2, 1fr); }
  .jinde { flex-direction: column; align-items: flex-start; }
  .radek { grid-template-columns: 1fr 1fr; }
  .radek .akce { grid-column: 1 / -1; }
  .osa { grid-template-columns: repeat(2, 1fr); }
  .uvod-dite { grid-template-columns: 1fr; padding: 40px 20px 0; }
  .uvod-dite .dite { order: -1; height: 360px; }
  .dite-img { height: 380px; bottom: -20px; }
}

@media (max-width: 1100px) {
  .detail-uvod-mriz { grid-template-columns: 1fr; padding-top: 30px; }
  .detail-kolaz { width: 580px; max-width: 100%; margin: 0 auto; }
  .prijimani-mriz, .kontakt-mriz, .zajem-mriz { grid-template-columns: 1fr; }
  .budova-foto { height: 320px; }
}
@media (max-width: 1100px) {
  .indiv-mriz { grid-template-columns: 1fr; }
  .indiv-dite { height: 380px; }
  .tab-cenik .tab-radek { grid-template-columns: 1.4fr repeat(4, 1fr); padding: 18px 20px; font-size: 14px; }
}
@media (max-width: 1100px) {
  .pribeh-mriz { grid-template-columns: 1fr; }
  .pribeh-foto { width: 540px; max-width: 100%; margin: 0 auto; }
}
@media (max-width: 1100px) { .clanky { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1100px) {
  .tab-kontakt .tab-radek { grid-template-columns: 1fr 1.5fr .8fr .8fr; padding: 16px 20px; font-size: 14px; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .nejsme-mriz, .obavy-mriz > div:first-child, .zajem-text { text-align: center; }
  .uvod-dite .text { text-align: center; }
  .uvod-dite .tlacitka, .kontakt-boxy { justify-content: center; margin-inline: auto; }
  .dite-home { display: none; }
  br.jen-d { display: none; }
  .pin-popis span { display: none; }
  .uvod-home .kolaz-obal { height: 430px; }
  .uvod-home .kolaz-obal .kolaz { transform: scale(.5); left: calc(50% - 380px); }
  .uvod-home .fakta { flex-wrap: wrap; gap: 18px 28px; text-align: center; }
  .uvod-home .perex { margin-top: 26px; }
  .nalepka { font-size: 22px; }
  .k-box { padding: 20px; }
  .k-box b { font-size: 22px; }
  .tab-kontakt .tab-hlava { display: none; }
  .tab-kontakt .tab-radek { grid-template-columns: 1fr; gap: 4px; }
  .tab-kontakt .tab-radek .nic { display: none; }
  .dite-zajem { height: 380px; }
  .clanky { grid-template-columns: 1fr; }
  .akce-radek { flex-wrap: wrap; padding: 16px; gap: 16px; }
  .akce-text b { font-size: 19px; }
  .chipy-svetle .oddelovac { display: none; }
  .pribeh-foto { height: 340px; }
  .pf-a { width: 330px; height: 320px; left: 0; }
  .pf-puzzle { left: 250px; top: 200px; width: 110px; }
  .karta.mise { padding: 28px 24px; }
  .tab-cenik .tab-radek.tab-hlava { display: none; }
  .tab-cenik .tab-radek { grid-template-columns: 1fr 1fr; gap: 6px 16px; }
  .tab-cenik .tab-radek .tab-skola { grid-column: 1 / -1; margin-bottom: 6px; }
  .tab-cenik .tab-radek .nic { display: none; }
  .cena-karta b { font-size: 32px; }
  .detail-kolaz { zoom: .6; margin: 0 auto; }
  .detail-text { text-align: center; }
  .detail-text .tlacitka, .detail-text .fakta { justify-content: center; }
  .uvod-dite .dite-img, .indiv-dite .dite-img, .dite-zajem .dite-img { height: 340px !important; bottom: -6px !important; top: auto !important; }
  .uvod-dite .dite, .indiv-dite, .dite-zajem { height: 350px !important; }
  .dite .trajektorie { inset: 0 -6% auto -6%; width: 112%; }
  .mapa-pruh { aspect-ratio: 390 / 260; }
  .mapa-pruh-pin { left: 38.97%; top: 53.2%; }
  .mapa-stitek { padding: 8px 14px; }
  .budova-foto { grid-template-columns: 1fr 1fr; height: auto; }
  .budova-foto .foto { aspect-ratio: 3 / 4; }
  .budova-foto .foto:nth-child(2) { grid-column: 1 / -1; aspect-ratio: 4 / 3; order: -1; }
  .skolne-karta { padding: 28px 24px; }
  .skolne-karta b { font-size: 32px; }
  .display { font-size: 37px; }
  .h1, .h1-xl { font-size: 37px; }
  .h2 { font-size: 32px; }
  .h3 { font-size: 24px; }
  .h4 { font-size: 20px; }
  .citat { font-size: 22px; }
  .perex { font-size: 18px; }
  .sec { padding: 76px 0 80px; }
  .sec-sm { padding: 64px 0; }
  .zahlavi { margin-bottom: 76px; }
  .zahlavi .h2 + p, .zahlavi .h1 + p { margin-top: 24px; }
  .zahlavi-l { flex-direction: column; align-items: center; text-align: center; gap: 24px; margin-bottom: 76px; }
  .mriz-2, .mriz-3, .mriz-4, .den-mriz { grid-template-columns: 1fr; }
  .formular { padding: 28px 22px; }
  .pole-2 { grid-template-columns: 1fr; gap: 0; }
  .odeslani { flex-direction: column; align-items: stretch; }
  .odeslani .btn { width: 100%; }
  .paticka-obsah { padding: 64px 0 40px; }
  .paticka-odkazy { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .paticka-spodek { flex-direction: column; align-items: flex-start; }
  .video-sek { height: 488px; }
  .recenze { width: 290px; height: 420px; padding: 28px 24px; }
  .recenze .r-foto { width: 150px; height: 126px; top: -48px; }
  .ks { width: 282px; }
  .ks .foto { height: 190px; }
  .g-foto { height: 220px; }
  .rada-2 .g-foto { height: 190px; }
  .vyber-hlava, .vyber-vnitrek { padding-left: 22px; padding-right: 22px; }
  .vyber-hlava b { font-size: 22px; }
  .radek { grid-template-columns: 1fr; gap: 10px; background: rgba(255,255,255,.04); border-radius: 18px; padding: 20px; margin-top: 12px; border: 0; }
  .tab-radek { padding: 18px 20px; }
  .info-pruh { flex-direction: column; text-align: center; padding: 26px 22px; }
  .otazka button span { font-size: 19px; }
  .odpoved p { padding-right: 0; }
  .pin-popis b { font-size: 13px; }
  .pin-popis span { font-size: 10px; }
  .pin { width: 5%; }
  .osa { grid-template-columns: 1fr; gap: 32px; }
  .lide-site .clovek, .clovek { width: calc(50% - 12px); }
  .clovek .portret, .lide-site .portret { width: 140px; height: 140px; }
  .podnav .wrap { flex-direction: column; align-items: flex-start; height: auto; padding: 12px 0; gap: 10px; }
  .podnav nav { gap: 8px; overflow-x: auto; width: 100%; padding-bottom: 2px; scrollbar-width: none; }
  .podnav nav a { flex: none; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; padding: 6px 12px; font-size: 14px; }
  .podnav nav a::after { display: none; }
  .center-m { text-align: center; }
  .center-m .tlacitka { justify-content: center; }
}

html.staticky *, html.staticky *::before, html.staticky *::after { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  [data-a], .slova .sl, .dekor-pop, [data-a="img"] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* =====================================================================
   Kolo 2: úpravy podle Pavlových připomínek a mobilní verze z Figmy
   ===================================================================== */
h1, h2, .h1, .h2, .display, .h1-xl { text-wrap: balance; }
.jen-m { display: none; }
br.jen-d { display: inline; }

/* vrstva v souřadnicích Figmy (desktop 1440, mobil 390) */
.fig { position: absolute; top: 0; bottom: 0; left: 50%; pointer-events: none; z-index: 3; }
.fig-d { width: 1440px; margin-left: -720px; }
.fig-m { display: none; width: 390px; margin-left: -195px; }
.s-fig { position: relative; z-index: 2; }
.dite-pos { position: absolute; }
.dite-rot { width: 100%; height: 100%; }
.dite-rot img { width: 100%; height: 100%; max-width: none; display: block; }
.dite-pos[data-a="dite"] { opacity: 0; transform: translateY(80px) scale(.9); transition: opacity .6s, transform 1.3s var(--pop); }
.dite-pos[data-a="dite"].is-in { opacity: 1; transform: none; }
.dite-pos.levituje img { animation: levitace 5.5s ease-in-out infinite; }
.traj { position: absolute; }
.traj svg { width: 100%; height: 100%; overflow: visible; display: block; }
.traj .mt { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--ease) .5s; }
.traj.is-in .mt { stroke-dashoffset: 0; }

/* výběr školy, zavřená lišta jako ve Figmě */
.vyber-hlava { padding: 30px 32px 30px 40px; }
.vyber-pravo { display: flex; align-items: center; gap: 16px; }
.vyber-pocet { font-size: 15px; color: var(--naTmT); }
.vyber-hlava .kolecko { background: var(--modra); border-color: var(--modra); }

/* galerie: mezera mezi řadami */
.pas-g + .pas-g { margin-top: 20px; }

/* stránkování posuvníků (aktuální = pilulka) */
.strankovani { display: none; gap: 7px; align-items: center; }
.strankovani i { width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.4); cursor: pointer; transition: width .35s var(--ease), background .3s; }
.strankovani i.akt { width: 24px; background: #fff; }
.strankovani-tm i { background: rgba(24,54,87,.25); }
.strankovani-tm i.akt { background: var(--navy); }

/* hlavička a mobilní menu */
.hl-mob { gap: 8px; }
.mmenu-cta { margin: 0 0 18px; flex: none; }
.mmenu nav a { font-size: 22px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.mmenu nav a:last-child { border-bottom: 0; }
.mmenu .mmenu-sk { margin: 18px 0 22px; }
.mmenu-tel { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 10px; font-weight: 500; text-decoration: none; color: #fff; }
.mmenu-tel .ic { color: var(--y); width: 20px; height: 20px; }
.mmenu .btn.mmenu-cta { margin-top: 0; }

/* patička */
.paticka-o .tel, .paticka-o .mail { display: flex; align-items: center; gap: 12px; }
.paticka-o .tel .ic, .paticka-o .mail .ic { color: var(--modra); width: 24px; height: 24px; flex: none; }
.paticka-o .mail .ic { width: 20px; height: 20px; margin: 0 2px; }

@media (max-width: 1100px) {
  .fig-d { display: none; }
  .fig-m { display: block; }
}
@media (max-width: 760px) {
  .jen-m { display: inline; }
  br.jen-m { display: inline; }
  br.jen-d { display: none; }
  .strankovani { display: flex; }
  .pas-snap { cursor: default; }
  .den-pas { position: relative; overflow: hidden; margin: 0 -20px; padding: 0 0 0; }
  .den-pas .den-mriz { display: flex; gap: 16px; width: max-content; }
  .den-pas .den { width: 286px; flex: none; }
  .den-pas .den .foto { aspect-ratio: auto; height: 230px; }
  .den-pas .strankovani { padding: 26px 20px 0; }
  .den .znacka { margin: 22px 0 14px; }
  .den .znacka .hi { width: 44px; height: 44px; }
  .den h3 { font-size: 20px; }
  .pat-skoly { display: none; }
  .paticka-odkazy { grid-template-columns: 1fr 1fr; }
  .vyber-hlava { padding: 20px 18px 20px 22px; }
  .vyber-hlava b { font-size: 20px; }
  .vyber-pocet { display: none; }
}

/* ---------- Úvodní stránka podle Figmy ---------- */
.uvod-home { height: 998px; }
.uvod-home .text { top: 167px; }
.kolaz-m { display: none; }
.km { position: absolute; }
.km .svg-in, .km img { width: 100%; height: auto; }
.km-rot14 { display: block; transform: rotate(14deg); }
.km-rot14.is-in, .dekor-pop.km-rot14.is-in { transform: rotate(14deg); }
.logo-sekce { width: 150px; margin: 0 auto 50px; }
.logo-sekce .svg-in { width: 100%; height: auto; }
.vyzva { margin-top: 72px; }
.vyzva-tm { margin-top: 72px; }
.kroky-vlna { display: flex; justify-content: space-between; gap: 0; min-height: 330px; }
.kroky-vlna .krok { width: 192px; text-align: left; }
.kroky-vlna .krok:nth-child(odd) { margin-top: 80px; }
.kroky .krok .kulicka { width: 60px; height: 60px; margin: 0 0 14px; font-size: 26px; }
.kroky-vlna .krok h3 { font-size: 21px; margin-bottom: 14px; }
.kroky-vlna .krok p { font-size: 15px; width: 200px; }
.kroky-3 .krok .kulicka { margin: 0 auto 18px; }
.info-pruh { margin-top: 0; padding: 28px 36px; gap: 26px; }
.info-pruh p { font-size: 17px; }
.recenze-pata { display: none; }
.jen-m-blok { display: none; }
.jen-d-blok { display: inline-block; }
.sek-nejsme { padding: 150px 0; overflow: hidden; }
.nejsme-mriz { grid-template-columns: 660px 360px; justify-content: space-between; gap: 80px; align-items: start; }
.nejsme-kicker { margin-bottom: 22px; }
.nejsme-text .btn { margin-top: 32px; }
.nejsme-puzzle { left: calc(50% - 720px + 814px); top: 469px; width: 207px; transform-origin: center; }
.nejsme-puzzle > span { display: block; transform: rotate(-56deg); }
.puzzle-zel .svg-in path { stroke: var(--g); }
.sek-zajem { padding: 130px 0; }
.sek-zajem .zajem-text .h2 + p { margin-top: 24px; }
.tel-velky { font-size: 40px; gap: 14px; margin-top: 30px; }
.tel-velky .ic { color: var(--y); width: 28px; height: 28px; }
.sek-mapa .zahlavi { margin-bottom: 40px; }

@media (max-width: 760px) {
  .uvod-home { height: auto; padding: 0 0 56px; }
  .uvod-home .kolaz-obal { display: none; }
  .kolaz-m { display: block; position: relative; width: 350px; height: 490px; margin: 0 auto; }
  .nalepka-m { font-size: 17px; padding: 9px 16px; }
  .uvod-home .text { margin-top: 28px; padding: 0; width: 350px; max-width: calc(100% - 40px); }
  .uvod-home .kicker { font-size: 15px; }
  .uvod-home .display { margin-top: 14px; font-size: 37px; }
  .uvod-home .perex { margin-top: 24px; font-size: 18px; }
  .uvod-home .tlacitka { flex-direction: column; gap: 10px; margin-top: 32px; }
  .uvod-home .tlacitka .btn { width: 100%; }
  .uvod-home .fakta { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; padding-top: 22px; }
  .uvod-home .fakta > div:last-child { grid-column: 1 / -1; }
  .uvod-home .fakta b { font-size: 18px; }
  .logo-sekce { width: 136px; margin-bottom: 43px; }
  .jinde { padding: 22px; gap: 22px; }
  .jinde .h4 { font-size: 19px; }
  .programy { grid-template-columns: 1fr; gap: 10px; }
  .program b { font-size: 15px; }
  .vyzva { margin-top: 28px; }
  .vyzva .btn, .vyzva-tm .btn { width: 100%; }
  .vyzva-tm { margin-top: 36px; }
  .kroky-vlna { display: grid; grid-template-columns: 1fr; gap: 28px; min-height: 0; max-width: none; }
  .kroky-vlna .krok { width: auto; margin-top: 0 !important; display: grid; grid-template-columns: 48px 1fr; column-gap: 18px; }
  .kroky .krok .kulicka { width: 48px; height: 48px; font-size: 21px; margin: 0; }
  .kroky-vlna .krok h3 { font-size: 20px; margin: 10px 0 6px; }
  .kroky-vlna .krok p { width: auto; }
  .info-pruh { flex-direction: column; align-items: flex-start; text-align: left; padding: 22px; gap: 14px; margin-top: 36px; }
  .info-pruh .dekor-in { width: 38px; }
  .info-pruh p { font-size: 16px; }
  .recenze-hlava { text-align: center; }
  .recenze-hlava .ovladani { display: none; }
  .recenze-pata { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; }
  .recenze-sek .pas-stopa { padding-top: 100px; }
  .jen-d-blok { display: none; }
  .jen-m-blok { display: inline-block; }
  .sek-nejsme { padding: 80px 0; overflow: visible; }
  .nejsme-mriz { grid-template-columns: 1fr; gap: 24px; text-align: left; }
  .nejsme-kicker { font-size: 18px; margin-bottom: 24px; }
  .sek-nejsme .h1 { font-size: 36px; }
  .nejsme-text { text-align: center; }
  .nejsme-text p { font-size: 16px; }
  .nejsme-text .btn { width: 100%; margin-top: 24px; }
  .nejsme-puzzle { left: calc(50% - 195px + 271px); top: -90px; width: 118px; }
  .nejsme-puzzle > span { transform: rotate(14deg); }
  .obavy-mriz { text-align: left; }
  .obavy-mriz > div:first-child { text-align: center; }
  #obavy .zahlavi, #obavy h2 { margin-bottom: 40px; }
  .sek-zajem { padding: 314px 0 80px; }
  .sek-zajem .zajem-text { text-align: center; }
  .sek-zajem .tel-velky { font-size: 30px; margin-top: 24px; justify-content: center; }
  .sek-zajem .tel-velky .ic { color: var(--modra); width: 24px; height: 24px; }
  .sek-zajem .zajem-mriz { gap: 72px; }
  .sek-zajem .formular { padding: 28px 22px; }
  .g-foto { height: 198px; }
  .rada-2 .g-foto { height: 167px; }
  .pas-g + .pas-g { margin-top: 10px; }
  .rada { gap: 10px; }
}
@media (max-width: 1100px) { .uvod-home .text { top: auto; } }
.kroky .trasa { display: block !important; }
@media (max-width: 760px) {
  .display, .uvod-home .display { font-size: min(37px, 9.5vw); }
  .h1, .h1-xl { font-size: min(37px, 9.5vw); }
  .sek-nejsme .h1 { font-size: min(36px, 9.25vw); }
  .h2 { font-size: min(32px, 8.2vw); }
}
@media (max-width: 760px) { .formular h3 { font-size: 24px; } .formular > p.tlum { font-size: 15px; } }

/* ---------- Naše školy podle Figmy ---------- */
.sek-skoly { padding: 0 0 120px; overflow: hidden; }
.skoly-deti { width: 854px; margin: 0 auto; }
.skoly-zahlavi { max-width: 900px; margin: 48px auto 0; }
.skoly-zahlavi .h1 + p { margin-top: 28px; max-width: 720px; font-size: 19px; }
.sek-skoly .ks-pas { margin-top: 80px; }
.ks-hlava svg { width: 16px; height: 22px; }
.ks:hover .ks-hlava svg { transform: none; }
.ks-obsah p { font-size: 17px; }
.ks-body { display: none; justify-content: center; margin-top: 28px; }
.video-mapa .video-obsah { position: absolute; z-index: 2; left: 0; right: 0; bottom: 80px; text-align: center; padding: 0 20px; }
.video-mapa .video-obsah .logo-sekce { width: 148px; margin: 0 auto 60px; }
.video-mapa .video-obsah p { max-width: 680px; margin: 24px auto 0; }
.video-mapa.video-sek { display: block; }
.video-mapa::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; z-index: 1; background: linear-gradient(to bottom, rgba(16,45,76,0), var(--plocha)); }
.sek-mapa-02 { padding: 0 0 130px; }
.sek-mapa-02 .vyber { margin-top: 64px; }
.radek .nazev { text-decoration: none; }
.radek .nazev:hover b { text-decoration: underline; text-underline-offset: 4px; }
.zaver { padding: 110px 0; }
.zaver .telefon-h2 { display: inline-flex; align-items: center; gap: 12px; margin-top: 24px; font: 700 46px/1.15 var(--f-nadpis); letter-spacing: -.03em; color: #fff; text-decoration: none; }
.zaver .telefon-h2 .ic { width: 30px; height: 30px; }
.zaver-btn { margin-top: 36px; }

@media (max-width: 760px) {
  .sek-skoly { padding-bottom: 80px; }
  .skoly-deti { width: 498px; margin-left: calc(50% - 249px); max-width: none; }
  .skoly-zahlavi { margin-top: 28px; }
  .skoly-zahlavi .h1 + p { font-size: 16px; margin-top: 24px; }
  .sek-skoly .ks-pas { margin: 76px -20px 0; }
  .sek-skoly .prubeh-wrap { display: none; }
  .ks-body { display: flex; }
  .ks { width: 282px; }
  .video-mapa .video-obsah { bottom: 10px; }
  .video-mapa .video-obsah .logo-sekce { width: 100px; margin-bottom: 40px; }
  .video-mapa .video-obsah p { margin-top: 24px; font-size: 16px; }
  .sek-mapa-02 { padding: 25px 0 80px; }
  .sek-mapa-02 .vyber { margin-top: 56px; }
  .zaver { padding: 72px 0; }
  .zaver .telefon-h2 { font-size: min(32px, 8.2vw); gap: 12px; margin-top: 20px; }
  .zaver .telefon-h2 .ic { width: 24px; height: 24px; }
  .zaver-btn { margin-top: 28px; }
  .zaver-btn .btn { width: 100%; }
}
.vyber.bez-listy .vyber-hlava { display: none; }
.vyber.bez-listy .filtry { border-top: 0; padding-top: 32px; }
.pin-popis b { font-size: 24px; }
.pin-popis span { font-size: 15px; }
@media (max-width: 760px) {
  .pin-popis b { font-size: 12px; }
  .pin-popis span { display: none; }
  .pin { width: 4.6%; }
}

/* =====================================================================
   Úvody s dítětem podle Figmy (Ceník, Pro rodiče, Kontakt, Mám zájem)
   ===================================================================== */
.hero-fig { position: relative; overflow-x: clip; }
.hero-fig-in { position: relative; z-index: 4; display: flex; align-items: center; min-height: var(--hh, 626px); padding: 48px 0; }
.hero-fig-text { width: 600px; max-width: 100%; }
.hero-kicker { font-size: 16px; font-weight: 500; line-height: 1.5; }
.na-tmave .hero-kicker, .bg-navy .hero-kicker { color: var(--naTmT); }
.hero-fig-text .h1-xl, .hero-fig-text .h1 { margin-top: 18px; }
.hero-fig-text .perex { margin-top: 32px; font-size: 20px; line-height: 1.5; }
.bg-navy .hero-fig-text .perex { color: var(--naTmT); }
.hero-fig-text .tlacitka { margin-top: 40px; }

/* Ceník */
.cen-pill { margin-top: 32px; padding: 10px 18px 10px 16px; font-size: 14px; line-height: 1.5; }
.cen-pill b { font-weight: 500; }
.cen-pill span { color: var(--naTmT); }
.cen-tab { padding: 0 0 97px; }
.tab-cenik .tab-radek { grid-template-columns: 340px repeat(4, 1fr); gap: 0; padding: 22px 36px; }
.tab-cenik .tab-hlava { font-size: 15px; }
.tab-cenik .tab-skola { align-items: center; }
.tab-cenik .tab-skola i { width: 12px; height: 12px; transform: none; }
.tab-cenik .tab-skola b { font-size: 20px; }
.tab-cenik .tab-skola small { font-size: 14px; }
.tab-cenik .cena, .tab-cenik .nic { font-size: 17px; line-height: 1.6; }
.tab-cenik .cena em { display: none; }
.cen-indiv { position: relative; overflow-x: clip; }
.cen-indiv-in { position: relative; z-index: 4; display: flex; align-items: center; padding: 67px 0 120px 540px; min-height: 657px; }
.cen-indiv .h2 { font-size: 46px; line-height: 1.16; }
.cen-indiv-perex { margin-top: 24px; font-size: 19px; line-height: 1.5; }
.cen-karty { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
.cena-karta { padding: 32px 30px 34px; border-radius: 26px; }
.cena-karta small { font-size: 15px; font-weight: 500; line-height: 1.5; }
.cena-karta b { font-size: 38px; line-height: 1.16; margin: 14px 0; }
.cena-karta p { font-size: 16px; line-height: 1.6; }
.cen-podminky { padding: 180px 0 130px; }
.podminka { padding: 30px 30px 32px; }
.podminka .hi { margin-bottom: 14px; }
.podminka h3 { font-size: 21px; margin-bottom: 14px; }
.podminka p { font-size: 16px; }
.cen-cta { text-align: center; margin-top: 56px; }

@media (max-width: 1100px) {
  .hero-fig-in { min-height: 0; padding: 252px 0 18px; justify-content: center; text-align: center; }
  .hero-fig-text { margin-inline: auto; }
  .cen-tab { padding-bottom: 40px; }
  .tab-cenik { background: none; border-radius: 0; overflow: visible; display: flex; flex-direction: column; gap: 12px; max-width: 560px; margin-inline: auto; }
  .tab-cenik .tab-radek.tab-hlava { display: none; }
  .tab-cenik .tab-radek { display: flex; flex-direction: column; align-items: stretch; gap: 12px; background: #fff; border-radius: 22px; padding: 20px 22px; border: 0; }
  .tab-cenik .tab-radek .tab-skola { margin: 0; gap: 12px; }
  .tab-cenik .tab-skola b { font-size: 19px; line-height: 1.28; }
  .tab-cenik .nic { display: none; }
  .tab-cenik .cena { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px solid rgba(24,54,87,.1); padding-top: 10px; font-size: 16px; }
  .tab-cenik .cena em { display: inline; font-style: normal; font-weight: 400; font-size: 15px; line-height: 1.5; color: var(--tlum); }
  .cen-indiv-in { display: block; padding: 258px 0 80px; min-height: 0; text-align: center; }
  .cen-indiv-text { max-width: 560px; margin-inline: auto; }
  .cen-karty { grid-template-columns: 1fr; gap: 14px; margin-top: 32px; text-align: left; }
  .cen-podminky { padding: 72px 0 80px; }
  .cen-podminky .mriz-3 { grid-template-columns: 1fr; gap: 14px; max-width: 560px; margin-inline: auto; }
}
@media (max-width: 760px) {
  .hero-kicker { font-size: 15px; }
  .na-tmave .hero-kicker, .bg-navy .hero-kicker { color: #fff; }
  .hero-fig-text .h1-xl, .hero-fig-text .h1 { margin-top: 12px; }
  .hero-fig-text .perex { margin-top: 24px; font-size: 16px; line-height: 1.6; }
  .bg-navy .hero-fig-text .perex { color: #fff; }
  .cen-pill { margin-top: 48px; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 10px; border-radius: 18px; }
  .cen-pill span { color: #fff; }
  .cen-indiv .h2 { font-size: 32px; }
  .cen-indiv-perex { font-size: 16px; line-height: 1.6; }
  .cena-karta { padding: 24px 24px 26px; }
  .cena-karta b { font-size: 30px; }
  .podminka { padding: 22px 22px 24px; }
  .podminka .hi { width: 48px; height: 48px; }
  .podminka h3 { font-size: 19px; }
  .cen-cta { margin-top: 40px; }
  .cen-cta .btn { width: 100%; }
}

/* Pro rodiče */
.bg-bez .hero-kicker { color: var(--tlum); }
.rod-text { width: 665px; }
.sec.rod-obavy { padding-top: 51px; }
@media (max-width: 1100px) {
  .rod-uvod .hero-fig-in { padding: 363px 0 0; }
  .sec.rod-obavy { padding-top: 66px; }
}
@media (max-width: 760px) {
  .skryt-m { display: none !important; }
  .rod-uvod .hero-fig-text .h1-xl { margin-top: 0; }
}
.rod-vas .zahlavi p { font-size: 19px; max-width: 680px; margin-inline: auto; }
.rod-vas .mriz-2 { gap: 24px; margin-top: 64px; }
.rod-vas .karta-tmava { padding: 40px; border-radius: 28px; }
.rod-vas .karta-tmava h3.h3 { font-size: 26px; margin: 16px 0; }
.rod-vas .karta-tmava p { font-size: 17px; line-height: 1.6; }
.rod-pozn { margin: 48px auto 0; max-width: 640px; font-size: 18px; font-weight: 600; line-height: 1.6; }
.sec.rod-sami { padding: 110px 0; }
.rod-sami-t { margin-top: 24px; font-size: 19px; }
.rod-sami-b { margin-top: 36px; }
@media (max-width: 760px) {
  .rod-vas .zahlavi p { font-size: 16px; }
  .rod-vas .mriz-2 { gap: 16px; margin-top: 48px; }
  .rod-vas .karta-tmava { padding: 26px 24px 28px; }
  .rod-vas .karta-tmava h3.h3 { font-size: 22px; }
  .rod-vas .karta-tmava p { font-size: 16px; }
  .rod-pozn { margin-top: 32px; font-size: 16px; }
  .sec.rod-sami { padding: 72px 0; }
  .rod-sami-t { font-size: 16px; }
  .rod-sami-b { margin-top: 28px; }
  .rod-sami-b .btn { width: 100%; }
}
.rod-vas .zahlavi { margin-bottom: 0; }
.rod-vas .zahlavi .h2 + p { margin-top: 24px; }
/* recenze: rozestupy jako ve Figmě (záhlaví, 40, pás s 64 px na fotky) */
.recenze-sek .zahlavi-l { margin-bottom: 0; }
.recenze-sek .pas { margin-top: 40px; }
.recenze-sek .pas-stopa { padding-top: 64px; }
@media (max-width: 760px) {
  .recenze-sek .pas { margin-top: 24px; }
  .recenze-sek .pas-stopa { padding-top: 100px; }
}

/* Kontakt */
.kon-uvod .hero-fig-in { align-items: flex-start; padding: 60px 0 110px; }
.kon-uvod .kontakt-boxy { margin-top: 36px; }
.kon-pozn { margin-top: 18px; font-size: 16px; line-height: 1.6; color: var(--tlum); }
@media (max-width: 1100px) {
  .kon-uvod .hero-fig-in { padding: 246px 0 80px; }
  .kon-uvod .kontakt-boxy { margin: 32px auto 0; gap: 12px; text-align: left; }
  .kon-pozn { margin-top: 20px; }
}
@media (max-width: 760px) {
  .kon-uvod .hero-fig-text .h1-xl { margin-top: 12px; }
  .kon-uvod .k-box { padding: 20px 22px; }
  .kon-uvod .k-ikona { width: 48px; height: 48px; }
  .kon-uvod .k-ikona .ic { width: 22px; height: 22px; }
  .kon-uvod .k-box b { font-size: 24px; line-height: 1.22; }
}
.tab-kontakt .tab-radek.tab-hlava { color: #fff; }
.tab-kontakt .tab-radek { padding-top: 18px; padding-bottom: 18px; }
.tab-kontakt .tk-m { display: none; }
@media (max-width: 760px) {
  .kon-skoly.sec { padding: 72px 0 80px; }
  .kon-skoly .zahlavi { margin-bottom: 32px !important; }
  .tab-kontakt { background: none; border-radius: 0; overflow: visible; display: flex; flex-direction: column; gap: 12px; }
  .tab-kontakt .tab-radek { display: flex; flex-direction: column; gap: 8px; background: #fff; border-radius: 24px; padding: 24px 22px 26px; border: 0; font-size: 15px; line-height: 1.6; }
  .tab-kontakt .tab-skola { gap: 10px; align-items: center; }
  .tab-kontakt .tab-skola i { width: 11px; height: 11px; transform: none; }
  .tab-kontakt .tab-skola b { font-size: 18px; line-height: 1.28; }
  .tab-kontakt .tk-d { display: none; }
  .tab-kontakt .tk-m { display: block; font-size: 14px; line-height: 1.5; color: var(--tlum); }
  .kon-zriz { margin-top: 24px !important; font-size: 15px; }
}
@media (max-width: 760px) {
  .tab-kontakt .tab-radek.tab-hlava { display: none; }
  .tab-kontakt .tab-radek { text-align: left; align-items: flex-start; }
}

/* Mám zájem o školu */
.mz-mriz { position: relative; z-index: 4; display: grid; grid-template-columns: 520px 600px; justify-content: space-between; align-items: start; padding: 70px 0 120px; }
.mz-text { padding-top: 30px; }
.mz-text .h1-xl { margin-top: 18px; }
.mz-text .perex { margin-top: 28px; font-size: 20px; line-height: 1.5; }
.mz-tel { margin-top: 24px; font-size: 17px; line-height: 1.6; }
.mz-tel a { font-weight: 600; color: inherit; text-decoration: none; }
.mz-tel a:hover { color: var(--modra-text); }
.mz-uvod .formular { border-radius: 32px; }
.mz-tel-m { display: none; }
@media (max-width: 1100px) {
  .mz-mriz { grid-template-columns: minmax(0, 600px); justify-content: center; padding: 368px 0 80px; text-align: center; }
  .mz-text { padding-top: 0; }
  .mz-uvod .formular { margin-top: 32px; text-align: left; border-radius: 26px; }
  .mz-tel-m { display: block; }
}
@media (max-width: 760px) {
  .mz-text .h1-xl { margin-top: 12px; }
  .mz-text .perex { margin-top: 24px; font-size: 16px; line-height: 1.6; }
}
.odeslani .btn { flex: none; }

/* Aktuality: obsah blíž k menu */
.sec.akt-sek { padding-top: 72px; }
.akt-zahlavi { max-width: 900px; margin-bottom: 40px; }
@media (max-width: 760px) {
  .sec.akt-sek { padding-top: 40px; }
  .akt-zahlavi { margin-bottom: 32px; }
  .akt-zahlavi .h1 { margin-top: 12px !important; }
}
@media (max-width: 760px) { .akt-sek .clanky { margin-top: 32px; gap: 16px; } }

/* O Erazimu podle Figmy */
.sec.oe-pribeh { padding: 110px 0 130px; }
.oe-zahlavi { max-width: 900px; margin-bottom: 64px; }
.oe-zahlavi .h1 { margin-top: 16px; }
.sec.oe-mise { padding: 68px 0; }
.oe-mise .zahlavi { margin-bottom: 48px; }
.oe-mise .karta.mise { padding: 40px; }
.oe-mise .karta.mise .hi { margin-bottom: 0; }
.oe-mise .karta.mise h3 { font-size: 30px; margin: 12px 0; }
.oe-mise .karta.mise p { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.8); }
.oe-pilire { margin-top: 24px; gap: 20px !important; }
[data-pilire] .karta { padding: 30px 30px 32px; }
[data-pilire] .karta .hi { margin-bottom: 12px; }
[data-pilire] .karta h3 { font-size: 20px; margin-bottom: 12px; }
[data-pilire] .karta p { font-size: 15px; line-height: 1.5; }
.oe-lide .zahlavi { margin-bottom: 64px; }
.oe-pozice .karta-tmava { padding: 30px 30px 32px; }
.oe-pozice .karta-tmava .hi { margin-bottom: 12px; }
.oe-pozice .karta-tmava h3.h4 { font-size: 21px; line-height: 1.28; margin: 0 0 12px; }
.oe-pozice .karta-tmava p { font-size: 16px; line-height: 1.6; }
@media (max-width: 760px) {
  .sec.oe-pribeh { padding: 56px 0 80px; }
  .oe-zahlavi { margin-bottom: 40px; }
  .oe-zahlavi .h1 { margin-top: 12px; }
  .pribeh-text { text-align: center; }
  .sec.oe-mise { padding: 37px 0; }
  .oe-mise .zahlavi { margin-bottom: 32px; }
  .oe-mise .mriz-2 { gap: 14px; }
  .oe-mise .karta.mise { padding: 26px 24px 28px; }
  .oe-mise .karta.mise .hi { width: 48px; height: 48px; }
  .oe-mise .karta.mise h3 { font-size: 24px; }
  .oe-mise .karta.mise p { font-size: 16px; }
  .oe-pilire { margin-top: 14px; gap: 14px !important; }
  [data-pilire] .karta { padding: 24px 22px 26px; }
  [data-pilire] .karta .hi { width: 48px; height: 48px; }
  [data-pilire] .karta h3 { font-size: 19px; }
  .sec.oe-lide { padding: 72px 0 80px; }
  .oe-lide .zahlavi { margin-bottom: 40px; }
  .oe-pozice { gap: 14px !important; }
  .oe-pozice .karta-tmava { padding: 24px 22px 26px; }
  .oe-pozice .karta-tmava .hi { width: 48px; height: 48px; }
  .oe-pozice .karta-tmava h3.h4 { font-size: 19px; }
}
@media (max-width: 1100px) {
  .pribeh-mriz { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 760px) {
  .pribeh-foto { width: 350px; height: 330px; }
}
.oe-pribeh { overflow-x: clip; }
@media (max-width: 760px) {
  .pf-a { width: 340px; height: 320px; left: 0; }
  .pf-puzzle { left: 205px; top: 200px; width: 125px; }
}
.oe-kariera .zahlavi { margin-bottom: 56px; }
@media (max-width: 760px) {
  .oe-kariera .zahlavi { margin-bottom: 40px; }
  .oe-kariera .center { margin-top: 40px !important; }
  .oe-kariera .center .btn { width: 100%; }
}
main { overflow-x: clip; }
/* puzzle dílky: animace na grafické kartě, bez přepočítávání při každém snímku */
.dekor-pop { display: block; will-change: transform, opacity; backface-visibility: hidden; transform: scale(.4) rotate(-25deg) translateZ(0); transition: opacity .5s ease-out, transform 1.1s var(--pop); }
.dekor-pop.is-in { transform: translateZ(0); }
[data-par] { will-change: transform; backface-visibility: hidden; }

/* Detail školy: návštěva ve třech krocích (zarovnáno vlevo, bez linky) a kontakt */
#navsteva .zahlavi { margin-bottom: 64px; }
#navsteva .zahlavi p { font-size: 19px; max-width: 760px; }
.kroky-3 { display: grid; grid-template-columns: repeat(3, 320px); gap: 40px; justify-content: center; max-width: none; }
.kroky-3 .trasa-maska { display: none; }
.kroky-3 .krok { text-align: left; }
.kroky-3 .krok .kulicka { margin: 0 0 14px; box-shadow: none; }
.kroky-3 .krok h3 { font-size: 22px; margin-bottom: 14px; }
.kroky-3 .krok p { font-size: 16px; line-height: 1.5; }
.navsteva-cta { margin-top: 56px; }
.kontakt-info .ki-tel { font: 700 26px/1.2 var(--f-nadpis); letter-spacing: -.01em; }
.kontakt-info .ki-tel .ic { margin-top: 6px; }
@media (max-width: 1100px) {
  .kroky-3 { grid-template-columns: minmax(0, 560px); gap: 28px; }
  .kroky-3 .krok { display: block; }
}
@media (max-width: 760px) {
  #navsteva .zahlavi { margin-bottom: 72px; }
  #navsteva .zahlavi p { font-size: 16px; }
  .kroky-3 .krok h3 { font-size: 20px; }
  .navsteva-cta { margin-top: 40px; }
  .navsteva-cta .btn { width: 100%; }
  .kontakt-info .ki-tel { font-size: 22px; }
}
[data-pilire].mriz { gap: 20px; } @media (max-width: 760px) { [data-pilire].mriz { gap: 14px; } }

/* Úvodní stránka po Pavlových úpravách ve Figmě (2026-10-10) */
.uvod-home .text { top: 153px; }
.sek-zajem { padding: 142px 0 140px; }
.sek-zajem .zajem-mriz { align-items: start; }
.sek-zajem .tel-velky { margin-top: 56px; }
.sek-zajem .tel-velky .ic { color: var(--modra); }
@media (max-width: 1100px) {
  .uvod-home .text { top: auto; }
}
@media (max-width: 760px) {
  .sek-zajem { padding: 330px 0 80px; }
  .sek-zajem .tel-velky { margin-top: 20px; }
}
@media (min-width: 761px) { .uvod-home .kolaz .nalepka { font-size: 21px; padding: 11px 20px 12px; } }
@media (min-width: 1101px) { .uvod-home .perex { margin-top: 28px; } }
@media (max-width: 760px) { .uvod-home .display { line-height: 1.14; } }

/* Naše školy: plynulejší přechod videa do mapy (Pavel, Figma 2026-10-10) */
.video-mapa::before { background: radial-gradient(50% 50% at 50% 50%, rgba(12,36,62,.5), rgba(12,36,62,0)); }
.video-mapa::after { top: 0; height: auto; background: linear-gradient(to bottom, rgba(24,54,87,0) 0%, rgba(20,50,82,.66) 40.9%, #102D4C 88.2%); }
@media (max-width: 760px) {
  .video-mapa::after { background: linear-gradient(to bottom, rgba(24,54,87,0) 0%, #102D4C 88.2%); }
}
/* úvod homepage: výška okna bez hlavičky a duhového pruhu (12 px), nejvýš 998 px jako ve Figmě */
@media (min-width: 1101px) {
  .uvod-home { height: clamp(680px, calc(100vh - var(--hdr) - 12px), 998px); }
}

/* =====================================================================
   Megamenu Naše školy (místo rozbalovacího seznamu)
   ===================================================================== */
.nav-dd.otevreno > a::after { transform: scaleX(1); }
.hlavicka.mega-otevrene { background: #fff; box-shadow: none; backdrop-filter: none; }
.mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid rgba(24,54,87,.08); border-radius: 0 0 28px 28px; box-shadow: 0 40px 60px -40px rgba(16,45,76,.45); opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity .22s, transform .4s var(--ease), visibility 0s .4s; z-index: 2; }
.mega.otevreno { opacity: 1; visibility: visible; transform: none; transition: opacity .22s, transform .4s var(--ease); }
.mega-in { display: grid; grid-template-columns: 270px minmax(0, 1fr) 330px; gap: 48px; padding: 36px 0 40px; }
.mega-nadpis { font: 700 28px/1.15 var(--f-nadpis); letter-spacing: -.02em; }
.mega-uvod > p:not(.mega-nadpis) { margin-top: 12px; font-size: 15px; line-height: 1.55; color: var(--tlum); }
.mega-odkaz { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-weight: 500; font-size: 15px; text-decoration: none; color: var(--navy); }
.mega-uvod > p + .mega-odkaz { margin-top: 22px; }
.mega-odkaz .ic { width: 20px; height: 20px; color: var(--modra); flex: none; }
.mega-odkaz:hover { color: var(--modra-text); }
.mega-btn { margin-top: 26px; }
.mega-stitek { display: flex; align-items: center; gap: 8px; font: 600 12px/1 var(--f-text); letter-spacing: .08em; text-transform: uppercase; color: var(--tlum); margin: 6px 0 14px 12px; }
.mega-stitek i { width: 8px; height: 8px; border-radius: 50%; }
.mega-denni { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.mega-jinde { display: grid; gap: 4px; }
.mega-sl + .mega-sl { border-left: 1px solid rgba(24,54,87,.08); padding-left: 36px; margin-left: -12px; }
.mega-skola { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 18px; text-decoration: none; color: var(--navy); transition: background .2s; opacity: 0; transform: translateY(8px); }
.mega.otevreno .mega-skola { opacity: 1; transform: none; transition: background .2s, opacity .35s calc(var(--i) * 30ms + 60ms), transform .45s var(--ease) calc(var(--i) * 30ms + 60ms); }
.mega-skola:hover { background: var(--bez); }
.mega-foto { width: 58px; height: 58px; border-radius: 18px; overflow: hidden; flex: none; background: var(--bezT); }
.mega-jinde .mega-foto { width: 48px; height: 48px; border-radius: 15px; }
.mega-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.mega-skola:hover .mega-foto img { transform: scale(1.08); }
.mega-skola b { display: flex; align-items: center; gap: 8px; font: 700 17px/1.25 var(--f-nadpis); }
.mega-skola b i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.mega-skola small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--tlum); }
.mega-zaves { position: fixed; inset: 0; z-index: 40; background: rgba(12,36,62,.28); opacity: 0; pointer-events: none; transition: opacity .3s; }
.mega-zaves.vid { opacity: 1; pointer-events: auto; }
@media (max-width: 1240px) {
  .mega-in { grid-template-columns: 220px minmax(0, 1fr) 290px; gap: 32px; }
  .mega-sl + .mega-sl { padding-left: 24px; }
}
@media (max-width: 1100px) { .mega, .mega-zaves { display: none; } }
.hlavicka .mega-in { height: auto; display: grid; align-items: start; }
/* megamenu bez úvodu: obě skupiny ve dvou sloupcích, odkazy v řádku dole */
.hlavicka .mega-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 48px; padding: 30px 0 0; }
.mega-jinde { grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.mega-sl + .mega-sl { padding-left: 36px; margin-left: -12px; }
.mega-pata { grid-column: 1 / -1; display: flex; align-items: center; gap: 28px; margin-top: 22px; padding: 16px 0 20px; border-top: 1px solid rgba(24,54,87,.08); }
.mega-pata .mega-odkaz { margin: 0; }
.mega-pata .mega-btn { margin: 0 0 0 auto; height: 46px; padding: 0 22px; }
.mega-foto, .mega-jinde .mega-foto { width: 52px; height: 52px; border-radius: 16px; }
@media (max-width: 1240px) {
  .hlavicka .mega-in { gap: 0 32px; }
  .mega-sl + .mega-sl { padding-left: 24px; }
  .mega-skola { gap: 12px; padding: 9px 10px; }
  .mega-foto { width: 48px; height: 48px; border-radius: 15px; }
  .mega-skola b { font-size: 16px; }
}
/* názvy škol v megamenu vždy na jednom řádku */
.mega-skola > span:last-child { min-width: 0; }
.mega-skola b, .hlavicka .mega-skola b { font-size: 15px; white-space: nowrap; }
@media (max-width: 1240px) { .hlavicka .mega-skola b { font-size: 14px; } }

/* mobilní úvod homepage podle Figmy (2026-10-12): nízká koláž, nadpis vždy na třech řádcích */
/* natočení puzzle je na vnitřním SVG, aby se nebilo s animací naskočení */
.km-rot { display: block; }
.km-rot > svg { display: block; transform: rotate(var(--r)); }
@media (max-width: 760px) {
  .kolaz-m { height: 308px; }
  .uvod-home .text { margin-top: 25px; }
  .uvod-home .display { margin-top: 18px; font-size: min(37px, calc((100vw - 40px) * .1057)); white-space: nowrap; }
  .uvod-home .perex { margin-top: 18px; }
  .uvod-home .tlacitka { margin-top: 28px; }
  .uvod-home .nalepka-m { font-size: 15.4px; padding: 8px 14.5px 9px; }
}
.mega-pata { padding-bottom: 22px; }

/* prototyp v2: budova s jednou nebo dvěma fotkami */
.budova-foto.jedna { grid-template-columns: 1fr; }
.budova-foto.dve { grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) {
  .budova-foto.jedna .foto, .budova-foto.dve .foto { aspect-ratio: 4 / 3; grid-column: auto; order: 0; }
  .budova-foto.dve { grid-template-columns: 1fr; }
}
.den-mriz.den-5 { grid-template-columns: repeat(5, 1fr); gap: 24px; }
.den-mriz.den-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .den-mriz.den-5, .den-mriz.den-3 { grid-template-columns: repeat(2, 1fr); } }
.panel h3 { font: 700 22px/1.3 var(--f-nadpis); margin-bottom: 12px; color: #fff; }
/* vysoká škola */
.vs-spoluprace { margin-top: 36px; background: var(--bez); border-radius: var(--radius); padding: 30px 34px; }
.vs-spoluprace h3, .vs-text h3 { font: 700 22px/1.3 var(--f-nadpis); margin-bottom: 10px; }
.vs-spoluprace p { margin-bottom: 22px; }
.vs-text h3 + p { margin-bottom: 32px; }
.vs-text p:last-child { margin-bottom: 0; }
@media (max-width: 760px) { .vs-spoluprace { padding: 24px 22px; } }
@media (max-width: 760px) { .detail-text .fakta { gap: 18px 24px; flex-wrap: wrap; } }
a.projekt { color: inherit; text-decoration: none; }
.projekt-siroky { padding-bottom: 72px; }
.projekt-siroky .projekt-text p:last-child { max-width: 1120px; }
@media (max-width: 760px) { .projekt-siroky { padding-bottom: 16px; } .projekt-siroky .foto { height: 200px; } }

/* dlaždice dopravy na úvodní stránce (Figma v2) */
.dop-dlazdice-sek { padding: 90px 0; }
.dop-dlazdice { display: grid; grid-template-columns: 460px 1fr; background: #fff; border-radius: var(--radius); overflow: hidden; color: var(--navy); text-decoration: none; min-height: 291px; }
.dop-dlazdice .foto { display: block; position: relative; }
.dop-dlazdice .foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.dop-dlazdice:hover .foto img { transform: scale(1.04); }
.dop-text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 40px 48px; }
.dop-text .kicker { display: block; }
.dop-text .h3 { display: block; font: 700 32px/1.25 var(--f-nadpis); margin: 14px 0 12px; }
.dop-popis { display: block; font-size: 17px; line-height: 1.6; max-width: 640px; margin-bottom: 22px; }
@media (max-width: 1100px) { .dop-dlazdice { grid-template-columns: 340px 1fr; } }
@media (max-width: 760px) {
  .dop-dlazdice-sek { padding: 72px 0; }
  .dop-dlazdice { grid-template-columns: 1fr; }
  .dop-dlazdice .foto { aspect-ratio: 16 / 10; }
  .dop-text { padding: 26px 22px 28px; }
  .dop-text .h3 { font-size: 24px; }
  .dop-popis { font-size: 16px; }
  .dop-text .btn { width: 100%; justify-content: center; }
}

/* povinně zveřejňované informace (Figma v2, stránka 12) */
.pzi-uvod { padding: 68px 0 44px; }
.pzi-uvod h1 { font: 700 54px/1.15 var(--f-nadpis); letter-spacing: -.02em; margin: 8px 0 14px; }
.pzi-uvod .podtitul { font-size: 20px; color: var(--tlum); }
.pzi-uvod .upraveno { font-size: 14px; color: var(--tlum); margin-top: 18px; }
.pzi { padding: 64px 0 120px; }
.pzi-radek { display: grid; grid-template-columns: 338px 1fr; gap: 0 0; padding: 26px 0; border-bottom: 1px solid rgba(24,54,87,.12); }
.pzi-radek:first-child { padding-top: 0; }
.pzi-radek:last-child { border-bottom: 0; }
.pzi-radek h2 { font: 700 22px/1.3 var(--f-nadpis); color: var(--navy); padding-right: 32px; }
.pzi-radek .obsah { font-size: 16px; line-height: 1.75; color: var(--navy); padding-top: 2px; }
.pzi-radek .obsah a { color: var(--navy); text-decoration: underline; text-decoration-color: rgba(24,54,87,.35); text-underline-offset: 3px; }
.pzi-radek .chybi { color: var(--tlum); font-style: italic; }
@media (max-width: 760px) {
  .pzi-uvod { padding: 48px 0 40px; }
  .pzi-uvod h1 { font-size: 36px; }
  .pzi-uvod .podtitul { font-size: 18px; }
  .pzi { padding: 40px 0 72px; }
  .pzi-radek { grid-template-columns: 1fr; padding: 24px 0; }
  .pzi-radek h2 { font-size: 22px; padding: 0; margin-bottom: 10px; }
}

/* stránka Doprava (Figma v2, stránka 13) */
.dop-uvod { padding: 37px 0 110px; }
.dop-ilu { position: relative; width: 788px; height: 247px; margin: 0 auto 76px; }
.dop-cesta { position: absolute; left: -3px; top: 156px; width: 793.5px; height: 93.5px; }
.dop-bus { position: absolute; left: 288px; top: 0; width: 288px; height: 204px; transform-origin: 0 0; transform: rotate(17.48deg); }
.dop-uvod .h1 { margin: 16px 0 22px; }
.dop-uvod .perex { max-width: 760px; margin: 0 auto; color: var(--tlum); }
.dop-uvod .tlacitka { justify-content: center; margin-top: 36px; }
.dop-vuz { background: #fff; border-radius: var(--radius); padding: 20px 20px 26px; }
.dop-vuz .foto { height: 260px; border-radius: 16px; overflow: hidden; margin-bottom: 18px; }
.dop-vuz .foto img { width: 100%; height: 100%; object-fit: cover; }
.dop-vuz h3 { font: 700 22px/1.3 var(--f-nadpis); margin-bottom: 10px; }
.dop-vuz p { color: var(--tlum); font-size: 15px; line-height: 1.6; }
.dop-cenik { max-width: 1000px; margin: 0 auto; background: #fff; border-radius: var(--radius); padding: 8px 40px; }
.dop-cenik > div { display: grid; grid-template-columns: 412px 1fr; padding: 22px 0; border-bottom: 1px solid rgba(24,54,87,.1); font-size: 16px; }
.dop-cenik > div:last-child { border-bottom: 0; }
.dop-cenik dt { font-weight: 600; }
.dop-kraj { background: #fff; border-radius: var(--radius); padding: 30px 30px 34px; }
.dop-kraj h3 { display: flex; align-items: center; gap: 10px; font: 700 22px/1.3 var(--f-nadpis); margin-bottom: 12px; }
.dop-kraj h3 [data-ic], .dop-kraj h3 svg { width: 24px; height: 24px; color: var(--modra); flex: none; }
.dop-kraj p { color: var(--tlum); font-size: 15px; line-height: 1.6; }
.dop-zaver-t { max-width: 640px; margin: 18px auto 0; }
@media (max-width: 1100px) { .dop-cenik > div { grid-template-columns: 300px 1fr; } }
@media (max-width: 760px) {
  .dop-uvod { padding: 24px 0 72px; }
  .dop-ilu { width: 390px; height: 180px; margin: 0 auto 40px; left: 50%; transform: translateX(-50%); position: relative; }
  .dop-cesta { left: -40px; top: 104px; width: 470px; height: 56px; }
  .dop-bus { left: 92px; top: 6px; width: 230px; height: 163px; }
  .dop-uvod .tlacitka { flex-direction: column; align-items: stretch; }
  .dop-vuz .foto { height: 180px; }
  .dop-cenik { padding: 4px 22px; }
  .dop-cenik > div { grid-template-columns: 1fr; gap: 6px; padding: 20px 0; }
  .dop-cenik dd { color: var(--tlum); }
  .dop-kraj { padding: 24px 22px 28px; }
}
.dop-uvod { overflow: hidden; }
.pzi-kicker a { color: inherit; text-decoration: none; }
.pzi-kicker a:hover { text-decoration: underline; }
.deska-pol { display: block; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px dashed rgba(24,54,87,.15); }
.deska-pol:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.deska-pol small { display: block; font-size: 13px; color: var(--tlum); }
.deska-pol b { display: block; font-weight: 600; margin: 2px 0 4px; }
.deska-pol span { display: block; }
/* úřední deska jako tlačítko v sekci Na čem stavíme */
.uredni-btn { display: flex; justify-content: center; margin-top: 56px; }
.uredni-btn .ic { width: 20px; height: 20px; }
@media (max-width: 760px) { .uredni-btn { margin-top: 40px; } .uredni-btn .btn { width: 100%; } }
/* povinné potvrzení formy docházky ve formuláři */
.zaskrt-potvrzeni { align-items: flex-start; line-height: 1.5; }
.zaskrt-potvrzeni[hidden] { display: none; }
.zaskrt-potvrzeni i { margin-top: 1px; }
.zaskrt-potvrzeni.chyba i { border-color: var(--r); box-shadow: 0 0 0 3px rgba(230,54,39,.15); }
.zaskrt-potvrzeni.chyba > span { color: var(--r); }
.odkaz-domsk { all: unset; color: var(--modra-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.zaskrt-potvrzeni.chyba .odkaz-domsk { color: var(--r); }
.projekt-tlacitka { margin-top: 26px; }
.projekt-siroky { padding-bottom: 24px; }
@media (max-width: 760px) { .projekt-tlacitka { flex-direction: column; align-items: stretch; } .projekt-tlacitka .btn { width: 100%; } }
/* štítek školy v galerii jako odkaz na detail školy */
a.stitek { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; cursor: pointer; }
a.stitek .ic { width: 14px; height: 14px; opacity: .55; transition: opacity .2s, transform .25s var(--ease); }
a.stitek:hover { background: var(--modra); color: #fff; }
a.stitek:hover .ic { opacity: 1; transform: translateX(2px); }
.lightbox figcaption a { color: #fff; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; gap: 4px; }
.lightbox figcaption a .ic { width: 16px; height: 16px; }

/* =====================================================================
   Erazim: doplňky k návrhu ELLER Studia
   Přístupnost, chod bez JavaScriptu a stránky, které prototyp nemá
   (detail aktuality, úřední deska, medailonek, formuláře na serveru,
   newsletter, stránkování…). Vše z tokenů nahoře.
   ===================================================================== */

/* ---------- Přístupnost ---------- */
.preskocit { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--navy); color: #fff; padding: 10px 18px; border-radius: 12px; text-decoration: none; font-weight: 500; transition: top .2s; }
.preskocit:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--modra-text); outline-offset: 3px; border-radius: 6px; }
.bg-navy :focus-visible, .bg-navyT :focus-visible, .bg-modra :focus-visible, .paticka :focus-visible, .mmenu :focus-visible, .podnav :focus-visible { outline-color: var(--y); }
.btn:focus-visible { outline-offset: 4px; border-radius: 999px; }

/* Bez JavaScriptu (nebo když selže) musí být obsah vidět celý – animace
   naskakování jsou jen nadstavba. Třídu „js" nastavuje hned skript v hlavičce. */
html:not(.js) [data-a], html:not(.js) .slova .sl, html:not(.js) .dekor-pop, html:not(.js) [data-a="img"],
html:not(.js) .krok .kulicka, html:not(.js) .krok .kulicka span, html:not(.js) .krok h3, html:not(.js) .krok p,
html:not(.js) .mapa .obrys, html:not(.js) .mapa .cesty, html:not(.js) .pin-ico, html:not(.js) .pin-popis,
html:not(.js) .mapa-pruh-pin .pin-ico, html:not(.js) .mapa-stitek, html:not(.js) .ikona-kruh,
html:not(.js) .milnik .rok-l i, html:not(.js) .milnik .rok-l span, html:not(.js) .den .znacka .linka, html:not(.js) .duha-anim {
  opacity: 1 !important; transform: none !important; clip-path: none !important;
}
html:not(.js) .u-svg path, html:not(.js) .mcesta { stroke-dashoffset: 0 !important; }
html:not(.js) .kroky .trasa-maska { display: none; }
html:not(.js) .odpoved { grid-template-rows: 1fr; }
html:not(.js) .odpoved p { opacity: 1; transform: none; }
html:not(.js) .otazka .plus { display: none; }
html:not(.js) .vyber-telo { grid-template-rows: 1fr; }
html:not(.js) .vyber-hlava .kolecko, html:not(.js) .filtry { display: none; }
html:not(.js) .pas, html:not(.js) .ks-pas, html:not(.js) .pas-g { overflow-x: auto; cursor: auto; }
html:not(.js) .sipky, html:not(.js) .prubeh-wrap { display: none; }
@media (prefers-reduced-motion: reduce) { .u-svg path, .mcesta { stroke-dashoffset: 0 !important; } }

/* První sekce stránky naskočí z CSS hned při prvním vykreslení, nečeká na
   erazim.js. V ní je prvek, podle kterého se měří LCP (perex na mobilu,
   koláž na desktopu); dokud byl průhledný a čekal na skript, vycházelo LCP
   přes 3 s (PageSpeed 10. 11. 2026). Pohyby jsou stejné jako přechody výš,
   is-in od skriptu už nic nemění. Karty s data-stagger dostávají zpoždění
   ze skriptu a postava dítěte (data-a="dite") má vlastní polohu – ty
   zůstávají skriptu.
   Prolnutí začíná na 1 % neprůhlednosti, ne na nule: prvek s opacity 0
   Chrome do LCP započte až na konci animace (lokálně koláž na desktopu
   1,5 s místo 0,4 s), 1 % je pro oko totéž co nic. */
html.js main > section:first-of-type :is([data-a="up"], [data-a="fade"], [data-a="left"], [data-a="right"], [data-a="zoom"], [data-a="pop"]):not([data-stagger] > *) {
  opacity: 1; transform: none; transition: none;
  animation: odhal-o .9s var(--ease) var(--d) backwards, odhal-up 1s var(--ease-out) var(--d) backwards;
}
html.js main > section:first-of-type [data-a="fade"]:not([data-stagger] > *) { animation: odhal-o 1.1s var(--ease) var(--d) backwards; }
html.js main > section:first-of-type [data-a="left"]:not([data-stagger] > *) { animation-name: odhal-o, odhal-left; animation-duration: .9s, 1.1s; }
html.js main > section:first-of-type [data-a="right"]:not([data-stagger] > *) { animation-name: odhal-o, odhal-right; animation-duration: .9s, 1.1s; }
html.js main > section:first-of-type [data-a="zoom"]:not([data-stagger] > *) { animation-name: odhal-o, odhal-zoom; animation-duration: .9s, 1.1s; }
html.js main > section:first-of-type [data-a="pop"]:not([data-stagger] > *) {
  animation: odhal-o .4s ease var(--d) backwards, odhal-pop .8s var(--pop) var(--d) backwards;
}
html.js main > section:first-of-type [data-a="img"]:not([data-stagger] > *) {
  opacity: 1; clip-path: inset(0 0 0 0 round 20px); transition: none;
  animation: odhal-o .6s ease var(--d) backwards, odhal-klip 1.2s var(--ease-out) var(--d) backwards;
}
html.js main > section:first-of-type [data-a="img"]:not([data-stagger] > *) > img {
  transform: none; transition: none; animation: odhal-foto 1.6s var(--ease-out) var(--d) backwards;
}
@keyframes odhal-o { from { opacity: .01; } }
@keyframes odhal-up { from { transform: translateY(34px); } }
@keyframes odhal-left { from { transform: translateX(-48px); } }
@keyframes odhal-right { from { transform: translateX(48px); } }
@keyframes odhal-zoom { from { transform: scale(.92); } }
@keyframes odhal-pop { from { transform: scale(.3) rotate(-12deg); } }
@keyframes odhal-klip { from { clip-path: inset(18% 18% 18% 18% round 28px); } }
@keyframes odhal-foto { from { transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) {
  html.js main > section:first-of-type [data-a], html.js main > section:first-of-type [data-a] > img { animation: none !important; }
}

/* ---------- Pruh školy na světlé barvě ---------- */
.podnav--svetla { color: var(--plochaT); }
.podnav--svetla nav a { color: rgba(12, 36, 62, .82); }
.podnav--svetla nav a:hover, .podnav--svetla nav a.aktivni { color: var(--plochaT); }
.podnav--svetla nav a::after { background: var(--plochaT); }
@media (max-width: 760px) { .podnav--svetla nav a { border-color: rgba(12, 36, 62, .35); } }
.podnav b a { color: inherit; text-decoration: none; }

/* ---------- Hlavička: kolečko s telefonem a odkazy ---------- */
a.kolecko { color: inherit; text-decoration: none; }
.hl-tel, .hl-prihl { white-space: nowrap; }
/* Logo je inline SVG – výška z návrhu (40 px, na mobilu 32 px) je tady,
   pravidla .logo img výš se na něj nevztahují. */
.logo svg { height: 40px; width: auto; }
@media (max-width: 1100px) { .logo svg { height: 32px; } }

/* Konverzní tlačítko i v mobilní hlavičce, vedle telefonu a menu. Plný
   text se vejde od 390 px (mobil z Figmy), na užším telefonu je krátký
   z configu (ctaKratce). */
.hl-mob { align-items: center; min-width: 0; }
.hl-mob .hl-mob-cta { height: 44px; min-height: 0; padding: 0 18px; font-size: 15px; white-space: nowrap; min-width: 0; flex: 0 1 auto; }
.hl-mob-cta span { overflow: hidden; text-overflow: ellipsis; }
.hl-cta-kratky { display: none; }
@media (max-width: 760px) {
  .hlavicka .wrap { gap: 12px; }
  .hl-mob .hl-mob-cta { padding: 0 14px; font-size: 14px; }
}
@media (max-width: 389px) {
  .hl-cta-plny { display: none; }
  .hl-cta-kratky { display: inline; }
}
/* Nejužší telefony (320 px): o kousek menší logo, kolečka i tlačítko. */
@media (max-width: 374px) {
  .logo svg { height: 28px; }
  .hl-mob { gap: 6px; }
  .hl-mob .kolecko { width: 40px; height: 40px; }
  .hl-mob .hl-mob-cta { height: 40px; padding: 0 12px; font-size: 13px; }
}

/* ---------- Úvod podstránek (text, deska, aktuality, lidé) ---------- */
.stranka-uvod { padding: 72px 0 48px; }
.stranka-uvod .h1 { margin-top: 14px; }
.stranka-uvod .perex { margin-top: 24px; max-width: 760px; color: var(--navy); }
.stranka-uvod.center .perex { margin-inline: auto; }
.stranka-uvod .drobecky { font-size: 14px; font-weight: 500; color: var(--tlum); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.stranka-uvod .drobecky:hover { color: var(--modra-text); }
.stranka-uvod .drobecky .ic { width: 16px; height: 16px; transform: rotate(180deg); }
@media (max-width: 760px) { .stranka-uvod { padding: 44px 0 32px; } }

/* ---------- Text z WYSIWYG (aktuality, editovatelné stránky, medailonky) ---------- */
.wysiwyg { max-width: 760px; font-size: 17px; line-height: 1.7; }
.wysiwyg > * + * { margin-top: 1em; }
.wysiwyg h2 { font-size: 30px; line-height: 1.2; margin-top: 1.6em; }
.wysiwyg h3 { font-size: 22px; line-height: 1.28; margin-top: 1.4em; }
.wysiwyg h4 { font-size: 18px; margin-top: 1.2em; }
.wysiwyg ul, .wysiwyg ol { padding-left: 1.4em; }
.wysiwyg ul { list-style: disc; }
.wysiwyg li + li { margin-top: .35em; }
.wysiwyg a { color: var(--modra-text); text-decoration: underline; text-underline-offset: 3px; }
.wysiwyg img { border-radius: 20px; height: auto; margin-block: 8px; }
.wysiwyg figure { margin: 1.4em 0; }
.wysiwyg figcaption { font-size: 14px; color: var(--tlum); margin-top: 8px; }
.wysiwyg blockquote { margin: 1.4em 0; padding: 4px 0 4px 24px; border-left: 4px solid var(--y); font: 400 22px/1.45 var(--f-nadpis); }
.wysiwyg table { border-collapse: collapse; width: 100%; font-size: 15px; background: #fff; border-radius: 16px; overflow: hidden; }
.wysiwyg th, .wysiwyg td { text-align: left; padding: 10px 14px; border-bottom: 1px solid rgba(24, 54, 87, .1); vertical-align: top; }
.wysiwyg th { background: var(--bezT); font-weight: 600; }
.wysiwyg iframe { max-width: 100%; border: 0; border-radius: 16px; }
.text-sekce { padding: 0 0 120px; }
@media (max-width: 760px) { .wysiwyg { font-size: 16px; } .wysiwyg h2 { font-size: 24px; } .text-sekce { padding-bottom: 72px; } }

/* ---------- Detail aktuality ---------- */
.clanek-detail { padding: 64px 0 110px; }
.clanek-detail .wrap { max-width: 860px; }
.clanek-detail .h1 { margin: 16px 0 0; }
.clanek-detail .perex { margin-top: 24px; color: var(--navy); }
.clanek-detail .hlavni-foto { margin: 40px 0 0; border-radius: 24px; overflow: hidden; background: var(--bezT); }
.clanek-detail .hlavni-foto img { width: 100%; height: auto; }
.clanek-detail .wysiwyg { margin-top: 40px; max-width: none; }
.clanek-detail .zpet { margin-top: 56px; }
@media (max-width: 760px) { .clanek-detail { padding: 40px 0 72px; } }

/* filtr aktualit – odkazy místo tlačítek, ať funguje i bez JavaScriptu */
a.chip { display: inline-flex; align-items: center; text-decoration: none; }
.chipy-svetle a.chip { color: var(--navy); }
.chipy-svetle a.chip.aktivni { color: #fff; }
.clanek .foto--bez { display: grid; place-items: center; background: var(--bezT); }
.clanek .foto--bez .svg-in { width: 120px; opacity: .55; }
.clanek h3 a { text-decoration: none; }
.clanek h3 a::after { content: ""; position: absolute; inset: 0; }
.clanek { position: relative; }
.clanek .odkaz { position: relative; z-index: 1; }

/* stránkování výpisů */
.strankovani-odkazy { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 56px; }
.strankovani-odkazy .stav { font-size: 15px; color: var(--tlum); }

/* kalendář akcí */
.kalendar-akce { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 44px; }
.akce-radek .misto { display: block; }
.akce-prazdno { text-align: center; color: var(--naTmT); max-width: 640px; margin: 0 auto; }

/* ---------- Hlášky po odeslání formuláře ---------- */
.hlaseni-obal { position: relative; z-index: 5; padding-top: 24px; }
.message { display: flex; align-items: center; gap: 12px; max-width: 760px; margin: 0 auto; padding: 16px 22px; border-radius: 18px; background: var(--navy); color: #fff; font-weight: 500; cursor: pointer; }
.message::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--g); flex: none; }
.message.error::before { background: var(--r); }
.message.hidden { display: none; }

/* ---------- Formuláře na serveru (kontakt, newsletter, poptávka) ---------- */
.medovnicek { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.pole .chyba-text, .formular .error-message { display: block; margin-top: 6px; font-size: 14px; color: var(--r); }
.pole.error input, .pole.error textarea, .pole.error select { border-color: var(--r); }
.zaskrt a { color: var(--modra-text); }
.formular .cf-turnstile { margin-top: 22px; }
/* Turnstile se načítá až u vyplňování (erazim.js); místo pro widget
   (65 px) je připravené, ať formulář pod rukama neposkočí. */
html.js .cf-turnstile { min-height: 65px; }
.zaskrt-pomoc { margin: 10px 0 0 36px; font-size: 14px; color: var(--tlum); }
.zaskrt-pomoc[hidden] { display: none; }
.formular .pozn-jen-jako { margin-top: 16px; font-size: 13px; color: var(--tlum); }
/* Kde se zapisuje rovnou v ISu, ukáže „Mám zájem" místo polí odkazy. */
.formular [data-pole-zajmu][hidden], .formular [data-uvod-zajmu][hidden], .zapis[hidden] { display: none; }
.zapis { margin-top: 22px; }
.zapis p { color: var(--navy); }
.zapis .tlum { margin-top: 18px; font-size: 14px; color: var(--tlum); }
.zapis .tlum a { color: var(--modra-text); text-decoration: underline; text-underline-offset: 3px; }
.zapis-tlacitka { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
/* Dvoje dveře u denních škol (10. 11. 2026): „Máte jasno" – Domluvit
   pohovor – a „Máte otázky" – Nejdřív se zeptat, stejně velké vedle sebe.
   Kde se dvě karty nevejdou (telefon), jdou pod sebe, pohovor první. */
.dvere { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 22px; }
.dvere[hidden] { display: none; }
.dvere-karta { display: flex; flex-direction: column; padding: 20px; border-radius: 16px; background: #fff; border: 1.5px solid transparent; transition: border-color .25s; }
.formular.bila .dvere-karta { background: var(--bez); }
.dvere-karta h4 { font: 700 19px/1.3 var(--f-nadpis); color: var(--navy); }
.dvere-karta p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--navy); }
/* Nástup za několik let: vlastní řádka, ať ji rodina s malým dítětem
   nepřehlédne – pohovor je i pro ni. */
.dvere-karta .dvere-pozn { font-size: 14px; color: var(--tlum); }
.dvere-akce { margin-top: auto; padding-top: 18px; }
.dvere-akce .btn { width: 100%; padding: 0 20px; }
.dvere-karta.zvolena { border-color: var(--modra); }
.dvere-karta.zvolena .btn-obrys { --bg: rgba(34,111,243,.07); }
/* Krátký formulář čeká, až rodina zvolí „Nejdřív se zeptat". Bez skriptu
   je vidět rovnou a tlačítko, které by nic neudělalo, se neukáže. */
html.js .formular .ceka-na-volbu { display: none; }
html:not(.js) [data-zeptat] { display: none; }

/* ---------- Newsletter v patičce ---------- */
.pat-newsletter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 32px 60px; align-items: center; padding: 40px 0; border-top: 1px solid #182F48; }
.pat-newsletter h4 { font-size: 22px; }
.pat-newsletter p { color: var(--naTmT); font-size: 14px; margin-top: 6px; }
.pat-newsletter form { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.pat-newsletter input[type="email"] { height: 52px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .06); color: #fff; padding: 0 22px; font: 400 16px var(--f-text); }
.pat-newsletter input[type="email"]::placeholder { color: rgba(255, 255, 255, .55); }
.pat-newsletter .btn { height: 52px; }
.pat-newsletter .poucka-udaje { grid-column: 1 / -1; margin-top: 0; font-size: 13px; color: var(--naTmT); }
.pat-newsletter .poucka-udaje a { color: #fff; }
.pat-newsletter .cf-turnstile { grid-column: 1 / -1; }
.paticka-spodek .uredni { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.paticka-spodek .uredni a:hover, .paticka-spodek .vpravo a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 1100px) { .pat-newsletter { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .pat-newsletter form { grid-template-columns: 1fr; } .pat-skoly { display: block; } }

/* ---------- Domškoláci: pro který stupeň stránka platí ---------- */
.stranka-uvod .ds-stupen { display: block; width: fit-content; margin-top: 22px; padding: 4px 14px; border-radius: 999px; background: rgba(238, 113, 29, .18); color: var(--navy); font-weight: 700; }
.stranka-uvod .ds-jinde { margin-top: 16px; max-width: 760px; font-size: 15px; }
.stranka-uvod .ds-jinde a { color: var(--modra-text); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Odkaz pod položkou školního dne (Domškoláci → střední) ---------- */
.den .den-odkaz { margin-top: 10px; }
.den .den-odkaz a { font-weight: 700; color: var(--modra-text); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Školní autobus pod budovou (web školy, skola.autobus) ---------- */
.budova-autobus { margin-top: 56px; }
.bg-bila .dop-dlazdice { background: var(--bez); }

/* ---------- Stav míst u špendlíku na mapě ----------
   Zelená volná místa, žlutá skoro plno. Na mobilu kraj mizí, stav zůstává. */
.pin-popis span.pin-mista { color: var(--g); font-weight: 700; }
.pin-popis span.pin-mista.plno { color: var(--y); }
@media (max-width: 760px) { .pin-popis span.pin-mista { display: block; font-size: 10px; } }
.pin.vlevo .pin-popis { left: auto; right: 115%; text-align: right; transform: translateX(10px); }
.mapa.is-in .pin.vlevo .pin-popis { transform: none; }

/* ---------- Loga ASDŠ a Zeměkvětu v patičce ----------
   Na webech škol malá a ztlumená, barvu dostanou až pod myší. Hlavní web
   (.vyrazne) je ukazuje velká a barevná, s popiskem nad logem. */
.pat-partneri { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; padding: 24px 0; border-top: 1px solid #182F48; }
.pat-partneri a { display: inline-flex; align-items: center; gap: 12px; color: var(--naTmT); font-size: 12px; text-decoration: none; opacity: .6; filter: grayscale(1); transition: opacity .2s, filter .2s; }
.pat-partneri a:hover, .pat-partneri a:focus-visible { opacity: 1; filter: none; }
.pat-partneri img { height: 36px; width: auto; }
.pat-partneri.vyrazne { gap: 28px 72px; padding: 40px 0; }
.pat-partneri.vyrazne a { flex-direction: column; align-items: flex-start; font-size: 13px; opacity: 1; filter: none; }
.pat-partneri.vyrazne img { height: 60px; transition: transform .25s var(--ease); }
.pat-partneri.vyrazne a:hover img { transform: translateY(-2px); }
@media (max-width: 760px) { .pat-partneri.vyrazne { gap: 28px 48px; } .pat-partneri.vyrazne img { height: 52px; } }

/* ---------- Pět hodnot místo pilířů ---------- */
.hodnoty-karty { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.hodnoty-karty .karta { padding: 28px 24px 30px; }
.hodnoty-karty .karta .hi { margin-bottom: 12px; }
.hodnoty-karty .karta h3 { font-size: 20px; margin-bottom: 10px; }
.hodnoty-karty .karta p { font-size: 15px; line-height: 1.55; }
.hodnoty-plne { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.hodnoty-plne .karta { padding: 34px 34px 36px; }
.hodnoty-plne .karta h3 { font-size: 26px; margin: 4px 0 12px; }
.hodnoty-plne .karta .veta { font-weight: 500; color: var(--navy); font-size: 16px; }
.hodnoty-plne .karta .praxe { margin-top: 14px; padding-top: 14px; border-top: 1px dotted rgba(24, 54, 87, .25); }
.hodnoty-plne .karta .praxe b { display: block; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--tlum); margin-bottom: 4px; }
.hodnoty-plne .karta:last-child:nth-child(odd) { grid-column: 1 / -1; }
.citat-pas { max-width: 920px; margin: 0 auto 72px; text-align: center; }
.citat-pas .citat { color: var(--navy); }
@media (max-width: 1240px) { .hodnoty-karty { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .hodnoty-karty { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hodnoty-plne { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .hodnoty-karty { grid-template-columns: 1fr; gap: 14px; } .hodnoty-plne .karta { padding: 26px 22px 28px; } }

/* ---------- Lidé z databáze ---------- */
a.clovek { text-decoration: none; color: inherit; }
.clovek .portret--prazdny { display: grid; place-items: center; background: var(--bezT); font: 700 54px/1 var(--f-nadpis); color: var(--tlum); }
.medailonek { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 64px; align-items: start; }
.medailonek .portret { width: 300px; height: 300px; border-radius: 50%; overflow: hidden; background: var(--bezT); }
.medailonek .portret img { width: 100%; height: 100%; object-fit: cover; }
/* Portrét oříznutý podle očí (App\Web\Portret): rozměr a polohu obrázku
   dává jeho atribut style, kolečko jen ořezává. */
.portret--orez { position: relative; }
.portret--orez img { position: absolute; max-width: none; }
.medailonek .pozice { margin-top: 12px; color: var(--tlum); font-size: 18px; }
@media (max-width: 1100px) { .medailonek { grid-template-columns: 1fr; gap: 32px; } .medailonek .portret { width: 220px; height: 220px; } }

/* ---------- Přílohy ---------- */
.prilohy { margin-top: 40px; display: grid; gap: 10px; }
.prilohy h2 { font-size: 22px; margin-bottom: 6px; }
.priloha { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 16px; background: #fff; text-decoration: none; transition: transform .3s var(--ease); }
.priloha:hover { transform: translateX(4px); }
.priloha .ic { color: var(--modra-text); }
.priloha b { font-weight: 600; }
.priloha small { display: block; color: var(--tlum); font-size: 13px; }

/* ---------- Úřední deska, povinné informace ---------- */
.pzi .wysiwyg { max-width: none; }
.pzi-radek .obsah > * + * { margin-top: .6em; }
.pzi-radek .obsah ul { list-style: disc; padding-left: 1.3em; }
.prepinac-skol { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }

/* ---------- Výzva na konci stránky (Zavolejte, rádi poradíme) ---------- */
.zaver .co-pak { max-width: 560px; margin: 18px auto 0; font-size: 15px; color: var(--naTmT); }
.zaver .co-pak a { color: #fff; }

/* ---------- Kontakt: tabulka škol bez IČO a datovek ---------- */
.tab-kontakt.tab-kontakt-2 .tab-radek { grid-template-columns: 330px 1fr; }
@media (max-width: 1100px) { .tab-kontakt.tab-kontakt-2 .tab-radek { grid-template-columns: 1fr 1.5fr; } }

/* ---------- Chybové stránky a drobnosti ---------- */
.chyba-odkazy { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.skryty-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.prazdno-karta { background: #fff; border-radius: var(--radius); padding: 40px; text-align: center; color: var(--tlum); }

/* Erazim: kroky jsou číslovaný seznam (<ol>), čísla nese kulička */
ol.kroky { list-style: none; margin: 0; padding: 0; }
ol.kroky > li { list-style: none; }
.otazka h3 { margin: 0; font: inherit; }
.otazky-skupina { max-width: 900px; margin: 0 auto; }
.otazky-skupina + .otazky-skupina { margin-top: 56px; }
.otazky-skupina > .h4 { margin-bottom: 14px; color: var(--tlum); font-size: 18px; letter-spacing: .02em; }
.odpoved a { color: var(--modra-text); }
.zpet-ic { transform: rotate(180deg); }
.clanek-detail .drobecky { font-size: 15px; }
.clanek-detail .stitek-sk time { color: inherit; }
/* Úřední deska a povinné informace v řádcích */
.pzi-chipy { margin-top: 28px; justify-content: flex-start; }
.deska-pol h3 { font: 700 19px/1.35 var(--f-nadpis); color: var(--navy); margin: 4px 0 8px; }
.deska-pol .wysiwyg { font-size: 16px; }
.pzi-radek .obsah .prilohy { margin-top: 12px; }
.pzi .priloha { background: var(--bez); }
.pzi-uvod .upraveno a { color: inherit; }
/* Spolupráce */
.spol-sek { padding-top: 16px; }
.spol-mriz { align-items: stretch; }
.spol-karta { display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: var(--navy); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.spol-karta:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(24,54,87,.1); }
.spol-karta p { color: var(--tlum); flex: 1; }
.spol-karta .odkaz { display: inline-flex; align-items: center; gap: 6px; color: var(--modra-text); font-weight: 600; }
.spol-karta .odkaz .ic { width: 16px; height: 16px; }
.spol-pozn { margin-top: 48px; color: var(--navy); }
.spol-obsah { padding-top: 24px; }
.spol-text { max-width: 760px; }
.spol-text + .spol-karty, .spol-karty + .spol-text { margin-top: 56px; }
.spol-karty { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.spol-karty li { background: #fff; border-radius: 24px; padding: 28px; border-top: 6px solid var(--kc, var(--modra)); }
.spol-karty h2 { font: 700 21px/1.3 var(--f-nadpis); color: var(--navy); margin-bottom: 10px; }
.spol-karty p { color: var(--tlum); }
.zajemci { margin-top: 72px; }
.zajemci h3 { font: 700 34px/1.2 var(--f-nadpis); color: var(--navy); margin-bottom: 14px; }
.zajemci > p { max-width: 760px; color: var(--navy); }
.zajemci__tabulka { margin-top: 28px; overflow-x: auto; background: #fff; border-radius: 24px; }
.zajemci table { width: 100%; border-collapse: collapse; font-size: 15px; }
.zajemci th, .zajemci td { padding: 12px 18px; text-align: left; border-bottom: 1px solid rgba(24,54,87,.08); white-space: nowrap; }
.zajemci thead th { background: var(--bezT); font-weight: 600; }
.zajemci__vic { margin-top: 20px; }
.zajemci__cas { margin-top: 16px; font-size: 14px; color: var(--tlum); }
.zajemci__pozvanka { margin-top: 16px; }
@media (max-width: 1000px) { .spol-karty { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .spol-karty { grid-template-columns: 1fr; } .zajemci h3 { font-size: 26px; } }
/* Založení, převzetí a zápis školy do rejstříku (/zalozeni-nebo-prevzeti-skoly) */
.stitky.ns-kotvy { margin-top: 32px; }
.stitky.ns-kotvy li { padding: 0; background: none; }
.ns-kotvy a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: #fff; color: var(--navy); font-size: 15px; font-weight: 500; text-decoration: none; transition: color .2s, box-shadow .2s; }
.ns-kotvy a:hover { color: var(--modra-text); box-shadow: inset 0 0 0 1.5px var(--modra-text); }
.ns-zahlavi { margin-bottom: 0; }
.ns-zahlavi .tlacitka { justify-content: center; margin-top: 32px; }
.ns-zahlavi .pod-tlacitkem { margin-inline: auto; }
.ns-panel h3 { font: 700 22px/1.3 var(--f-nadpis); color: #fff; margin: 18px 0 10px; }
.ns-panel p { color: var(--naTmT); line-height: 1.6; }
.ns-tlacitka { justify-content: center; margin-top: 56px; }
.ns-tlacitka .ic { width: 20px; height: 20px; }
.ns-karta p + p { margin-top: 12px; }
.ns-karta .seznam-karta li { font-size: 15px; }
/* Pod mapou škol: pozvánka, ať nám ji pomůžou rozšířit */
.mapa-rozsirit { margin-top: 28px; text-align: center; font-size: 15px; color: var(--naTmT); }
.mapa-rozsirit a { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.mapa-rozsirit a:hover { color: var(--y); }
.mapa-rozsirit .ic { width: 16px; height: 16px; }
@media (max-width: 760px) {
  .ns-kotvy a { padding: 0 14px; font-size: 14px; }
  .ns-tlacitka { flex-direction: column; align-items: stretch; margin-top: 40px; }
  .ns-tlacitka .btn { justify-content: center; }
}
.pzi-radek .obsah h3 { font-size: 17px; line-height: 1.4; margin-top: 1em; }
/* Lidé: výpis a medailonek */
.lide-sek { padding-top: 8px; }
.medailonek { margin-top: 36px; }
.medailonek .portret--prazdny { display: grid; place-items: center; font: 700 72px/1 var(--f-nadpis); color: rgba(24,54,87,.45); }
.medailonek-text .wysiwyg { margin-top: 28px; }
.medailonek-text .zpet { margin-top: 40px; }
/* Přijímání */
.vetev { margin: 72px 0 40px; max-width: 760px; }
.vetev:first-of-type { margin-top: 24px; }
.vetev .h3 { color: #fff; margin-bottom: 10px; }
.prij-pozn { margin-top: 48px; max-width: 760px; margin-inline: auto; color: var(--navy); }
/* Chybové stránky */
.chyba-sek { padding: 120px 0 140px; }
.chyba-sek .perex { margin-inline: auto; }
.chyba-tlacitka { justify-content: center; margin-top: 36px; }
.chyba-tel { margin-top: 28px; }
.chyba-tel a { display: inline-flex; align-items: center; gap: 10px; font: 700 26px/1 var(--f-nadpis); color: var(--navy); text-decoration: none; }
.chyba-tel .ic { width: 22px; height: 22px; color: var(--modra-text); }
.chyba-detail { margin-top: 32px; font-size: 14px; color: var(--tlum); }
@media (max-width: 760px) { .chyba-sek { padding: 64px 0 80px; } }
.bg-bila .spol-karta { background: var(--bez); }
/* Erazim: čtyři karty dva a dva – jen od tabletu výš, na mobilu zůstává jeden sloupec. */
@media (min-width: 761px) { .spol-karty:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); } }
/* Doprava: landing pages (kalkulačka i poptávka jsou v ISu) */
.dop-landing .perex { max-width: 820px; }
.dop-sek .wrap > * + * { margin-top: 40px; }
.dop-blok { max-width: 820px; }
.dop-blok h2, .doprava__text h2 { font: 700 34px/1.2 var(--f-nadpis); color: var(--navy); margin: 8px 0 16px; letter-spacing: -.01em; }
.dop-blok p, .doprava__text p { font-size: 17px; line-height: 1.7; color: var(--navy); }
.dop-blok p + p, .doprava__text p + p { margin-top: 1em; }
.dop-blok ul { list-style: disc; padding-left: 1.3em; margin-top: 12px; }
.doprava__text { max-width: 820px; }
.doprava__text a, .dop-blok a { color: var(--modra-text); text-decoration: underline; text-underline-offset: 3px; }
.doprava__tabulka { overflow-x: auto; background: #fff; border-radius: var(--radius); padding: 8px 32px; max-width: 1000px; }
.bg-bila .doprava__tabulka { background: var(--bez); }
.doprava__tabulka table { width: 100%; border-collapse: collapse; font-size: 16px; }
.doprava__tabulka caption { text-align: left; font: 700 22px/1.3 var(--f-nadpis); color: var(--navy); padding: 20px 0 8px; }
.doprava__tabulka th, .doprava__tabulka td { text-align: left; padding: 16px 16px 16px 0; border-bottom: 1px solid rgba(24,54,87,.1); vertical-align: top; }
.doprava__tabulka tr:last-child th, .doprava__tabulka tr:last-child td { border-bottom: 0; }
.doprava__tabulka thead th { font-size: 14px; color: var(--tlum); font-weight: 500; }
.doprava__tabulka tbody th { font-weight: 600; width: 38%; }
.doprava__akce { display: flex; flex-wrap: wrap; gap: 12px; }
.doprava__seznam { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.doprava__seznam li { background: #fff; border-radius: 20px; padding: 20px 24px; color: var(--navy); }
.bg-bila .doprava__seznam li { background: var(--bez); }
.doprava__mesta { max-width: 900px; color: var(--tlum); line-height: 1.8; }
a.dop-vuz, a.dop-kraj { display: block; color: var(--navy); text-decoration: none; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
a.dop-vuz:hover, a.dop-kraj:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(24,54,87,.1); }
/* Hlavní fotka autobusu a fotogalerie (mřížka, zvětšení jako u .galerie) */
.dop-foto { max-width: 1000px; }
.dop-foto img { width: 100%; height: auto; }
.dop-galerie .g-foto img { width: 100%; height: 100%; object-fit: cover; }
.dop-galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.dop-galerie .g-foto { display: block; height: auto; aspect-ratio: 3 / 2; }
@media (max-width: 760px) {
  .dop-blok h2, .doprava__text h2 { font-size: 26px; }
  .doprava__tabulka { padding: 4px 18px; }
  .doprava__tabulka tbody th { width: auto; }
  .dop-galerie { grid-template-columns: 1fr 1fr; gap: 10px; }
  .dop-galerie .g-foto { border-radius: 14px; }
  .dop-galerie .g-foto:nth-child(odd):last-child { grid-column: 1 / -1; }
}
/* Ceník: poznámky, sourozenecká sleva */
.cen-zmeny { margin-top: 28px; padding: 20px 24px; border-radius: 16px; background: rgba(255,255,255,.08); color: #fff; max-width: 900px; }
.cen-zmeny h3 { margin: 0 0 8px; font-size: 18px; }
.cen-zmeny ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.cen-pozn { margin-top: 28px; display: grid; gap: 8px; color: rgba(255,255,255,.82); font-size: 15px; list-style: disc; padding-left: 1.2em; max-width: 900px; }
.cen-zapisne { margin-top: 28px; display: flex; align-items: center; gap: 18px; padding: 20px 26px; border-radius: 18px; background: rgba(255,255,255,.08); color: #fff; max-width: 900px; font-size: 17px; line-height: 1.5; }
.cen-zapisne .hi { flex: none; width: 48px; height: 48px; }
.cen-zapisne b { color: var(--y); }
.cen-otazky { max-width: 900px; margin: 0 auto; }
.cen-otazky .odpoved a { color: var(--modra-text); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .cen-zapisne { align-items: flex-start; padding: 18px 20px; font-size: 16px; } }
/* Střední škola: seznamy v kartách, citáty, srovnání programů, výstupy */
.seznam-panel, .seznam-karta { margin-top: 14px; display: grid; gap: 10px; list-style: none; padding: 0; }
.seznam-panel li, .seznam-karta li { position: relative; padding-left: 22px; line-height: 1.6; }
.seznam-panel li::before, .seznam-karta li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--kc, var(--y)); }
.seznam-karta li { color: var(--tlum); }
.seznam-karta li::before { background: var(--modra); }
.citaty { margin-top: 0; }
.citat { margin: 0; padding: 28px 30px; border-radius: var(--radius); background: rgba(255,255,255,.06); font: 400 22px/1.4 var(--f-nadpis); color: #fff; position: relative; }
.citat p::before { content: "„"; color: var(--y); }
.citat p::after { content: "“"; color: var(--y); }
.rovinu { margin-top: 24px; }
.nejsme-seznam { max-width: 900px; margin: 48px auto 0; }
.programy-karty { margin-bottom: 32px; }
.tab-text-obal { overflow-x: auto; background: var(--bez); border-radius: var(--radius); padding: 8px 32px; }
.bg-bez .tab-text-obal { background: #fff; }
.tab-text { width: 100%; border-collapse: collapse; font-size: 16px; color: var(--navy); }
.tab-text th, .tab-text td { text-align: left; vertical-align: top; padding: 18px 20px 18px 0; border-bottom: 1px solid rgba(24,54,87,.1); line-height: 1.55; }
.tab-text tr:last-child th, .tab-text tr:last-child td { border-bottom: 0; }
.tab-text thead th { font: 700 20px/1.3 var(--f-nadpis); padding-top: 22px; }
.tab-text tbody th { font-weight: 600; width: 24%; }
.tab-text a { color: var(--modra-text); text-decoration: underline; text-underline-offset: 3px; }
.tab-text .cislo { text-align: right; white-space: nowrap; }
.vystupy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.vystup { border: 1.5px solid rgba(255,255,255,.18); border-radius: var(--radius); padding: 26px 28px; color: #fff; }
.vystup b { font: 700 24px/1.2 var(--f-nadpis); display: block; }
.vystup p { margin: 10px 0 14px; color: var(--naTmT); }
.vystup span { display: inline-block; font-size: 13px; font-weight: 600; padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.12); }
.vystup:first-child span { background: var(--y); color: var(--navy); }
.vystupy-pozn { max-width: 900px; margin: 40px auto 0; }
.prij-ss { margin-top: 64px; }
.prij-ss .panel a { color: #fff; }
@media (max-width: 1000px) { .vystupy { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .tab-text-obal { padding: 4px 16px; }
  .tab-text thead { display: none; }
  .tab-text tr { display: block; padding: 14px 0; border-bottom: 1px solid rgba(24,54,87,.1); }
  .tab-text tr:last-child { border-bottom: 0; }
  .tab-text th, .tab-text td { display: block; padding: 4px 0; border: 0; width: auto !important; }
  .tab-text td[data-nazev]::before { content: attr(data-nazev) ": "; font-weight: 600; }
  .citat { font-size: 19px; }
}
.vystupy-cisla { margin-top: 32px; }
.cislo-velke { display: block; font: 700 40px/1.1 var(--f-nadpis); color: var(--navy); margin-bottom: 10px; }
.vystupy-mapa { margin-top: 32px; max-width: 900px; color: var(--navy); }
.pzi-radek-tm { border-bottom-color: rgba(255,255,255,.14); }
.pzi-radek.pzi-radek-tm h3 { font: 700 20px/1.3 var(--f-nadpis); color: #fff; padding-right: 32px; }
.pzi-radek-tm .obsah { color: var(--naTmT); }
.ukazka { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.ukazka blockquote { margin: 0; font: 400 19px/1.45 var(--f-nadpis); color: var(--navy); flex: 1; }
.ukazka figcaption { font-size: 14px; color: var(--tlum); }
.karta-bez p + p { margin-top: 12px; }
.stitky { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; list-style: none; padding: 0; }
.stitky li { padding: 6px 14px; border-radius: 999px; background: #fff; font-size: 14px; color: var(--navy); }
.podminka-text { font: 400 19px/1.45 var(--f-nadpis); color: var(--navy); margin-top: 14px; }
.karta-bez a { color: var(--modra-text); text-decoration: underline; text-underline-offset: 3px; }
/* Postup krok za krokem (Domškoláci: cesta k přijetí) */
.postup { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; max-width: 1000px; }
.postup-krok { display: grid; grid-template-columns: 64px 1fr; gap: 24px; background: var(--bez); border-radius: var(--radius); padding: 28px 32px; }
.postup-cislo { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--kc); color: #fff; font: 700 24px/1 var(--f-nadpis); }
.postup-obsah h2 { font: 700 22px/1.3 var(--f-nadpis); color: var(--navy); }
.postup-obsah :is(h2, h3) small { display: inline-block; margin-left: 10px; font: 500 14px/1 var(--f-text); color: var(--tlum); padding: 5px 12px; border-radius: 999px; background: #fff; vertical-align: middle; }
.postup-obsah p { margin-top: 10px; color: var(--navy); line-height: 1.65; }
.postup-obsah a { color: var(--modra-text); text-decoration: underline; text-underline-offset: 3px; }
.postup-kdy { color: var(--tlum) !important; font-size: 15px; }
.postup-pozn { margin-top: 28px; max-width: 900px; color: var(--navy); }
.postup-pozn a { color: var(--modra-text); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .postup-krok { grid-template-columns: 1fr; gap: 14px; padding: 22px; }
  .postup-cislo { width: 44px; height: 44px; font-size: 20px; }
  .postup-obsah h2 small { display: table; margin: 8px 0 0; }
}
.stitek-povinne, .stitek-doporucene { display: inline-block; font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 999px; margin-bottom: 14px; }
.stitek-povinne { background: var(--r-plocha); color: #fff; }
.stitek-doporucene { background: #fff; color: var(--navy); }
.karta.povinne { box-shadow: inset 0 0 0 2px var(--r-plocha); }
.mista .misto h3 { display: flex; align-items: center; gap: 10px; color: #fff; }
.mista .misto h3 .ic { width: 22px; height: 22px; color: var(--y); }
.mista .misto p { margin: 12px 0 0; }
.mista .misto .btn { margin-top: 20px; }
.misto:target { box-shadow: 0 0 0 3px var(--y); }
.pzi-radek h3 { font: 700 20px/1.3 var(--f-nadpis); color: var(--navy); padding-right: 32px; }
.pat-pravni p { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.6); max-width: 900px; padding: 0 0 20px; }
/* Vysoká škola */
.pod-tlacitkem { margin-top: 14px; font-size: 14px; color: var(--tlum); max-width: 520px; }
.jedna-cesta { max-width: 900px; margin: 0 auto; border: 2px solid var(--y); border-radius: var(--radius); padding: 32px 36px; color: #fff; }
.jedna-cesta h3 { font: 700 26px/1.25 var(--f-nadpis); margin-bottom: 12px; }
.jedna-cesta p { color: var(--naTmT); line-height: 1.7; }
.jedna-cesta p + p { margin-top: 12px; }
.postup-bila .postup-krok { background: #fff; }
.postup-obsah h3 { font: 700 22px/1.3 var(--f-nadpis); color: var(--navy); }
.cesta { border-top: 6px solid var(--kc); }
.cesta p { margin-top: 12px; color: var(--tlum); }
.fakta-tm { margin-top: 56px; justify-content: center; gap: 56px; flex-wrap: wrap; color: #fff; border-color: rgba(255,255,255,.18); text-align: center; }
.fakta-tm b { color: #fff; font-size: 34px; }
.fakta-tm > div > span { color: var(--naTmT); font-size: 15px; }
.postup-bila { margin-inline: auto; }
.praxe-pozn { margin-top: 16px; font-size: 14px; }
.predmety-vs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.predmet-vs { background: #fff; border-radius: 20px; padding: 22px 24px; }
.predmet-vs h3 { font: 700 18px/1.35 var(--f-nadpis); color: var(--navy); }
.predmet-vs p { margin-top: 8px; font-size: 15px; color: var(--tlum); }
.lide-vs .role { margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--modra-text); }
.lide-vs p + p { margin-top: 10px; }
@media (max-width: 1000px) { .predmety-vs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .predmety-vs { grid-template-columns: 1fr; } .jedna-cesta { padding: 24px 22px; } }

/* Tlačítko úřední desky v záhlaví povinně zveřejňovaných informací. */
.pzi-tlacitka { margin-top: 28px; }

/* Střední: odkaz na Touzapo pod srovnáním programů. */
.programy-dalsi { margin: 36px auto 0; max-width: 720px; text-align: center; color: var(--tlum); }

/* Tlačítko videa: zastavit / pustit (přístupnost a zablokované autoplay). */
.video-ovladani { position: absolute; right: 24px; bottom: 24px; z-index: 3; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid rgba(255,255,255,.7); background: rgba(12,36,62,.45); color: #fff; cursor: pointer; transition: background .2s, transform .3s var(--pop); }
.video-ovladani[hidden] { display: none; }
.video-ovladani:hover { background: rgba(12,36,62,.7); }
.video-ovladani:active { transform: scale(.92); }
.video-ovladani:focus-visible { outline: 3px solid var(--y); outline-offset: 3px; }
.video-ovladani .ic { width: 20px; height: 20px; }
.video-ovladani .video-ic-pauza, .video-ovladani.hraje .video-ic-prehrat { display: none; }
.video-ovladani.hraje .video-ic-pauza, .video-ovladani .video-ic-prehrat { display: grid; }
@media (max-width: 760px) { .video-ovladani { right: 16px; bottom: 16px; width: 44px; height: 44px; } }

/* Úvod: nadtitulek nad nadpisem ve dvousloupcovém záhlaví (školní den). */
.zahlavi-l .kicker { margin-bottom: 10px; }

/* Úvod: pod přijetím na denní docházku odkazy na přijetí do ostatních programů. */
.prijeti-jinde { max-width: 640px; margin: 32px auto 0; text-align: center; font-size: 15px; }
.prijeti-jinde a { color: #fff; }

/* Recenze z Firmy.cz: widget Seznamu v iframu. Výška odpovídá třem
   recenzím, ať widget nemá vlastní posuvník. */
.firmy-ramec { display: block; width: 100%; max-width: 800px; height: 820px; margin: 0 auto; border: 1px solid rgba(24,54,87,.12); border-radius: 20px; background: var(--bila); }
@media (max-width: 760px) { .firmy-ramec { height: 1020px; } }

/* Vysoká: rozcestník na formuláře Google (pořadník, spolupráce). */
.formular-volba { margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(24,54,87,.15); }
.formular-volba h4 { font: 700 20px/1.3 var(--f-nadpis); }
.formular-volba p { margin: 8px 0 18px; font-size: 15px; color: var(--tlum); }

/* =====================================================================
   Erazim: responzivita mimo rozměry z Figmy
   Návrh počítá s mobilem 390 px a desktopem. Tady je, co přetékalo
   na užších telefonech (320–389 px) a na tabletech (761–1100 px).
   ===================================================================== */

/* Jednosloupcová mřížka se nesmí roztáhnout podle nejširšího obsahu
   (koláž, dlouhé tlačítko) – text by jinak utekl za okraj displeje. */
@media (max-width: 1100px) {
  .detail-uvod-mriz, .prijimani-mriz, .kontakt-mriz, .zajem-mriz, .indiv-mriz, .obavy-mriz,
  .paticka-obsah, .uvod-dite, .medailonek, .pat-newsletter { grid-template-columns: minmax(0, 1fr); }
  /* Nejsme pro každého: dva sloupce z desktopu se do tabletu nevejdou. */
  .nejsme-mriz { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
/* Dílek puzzle u Nejsme pro každého by na tabletu ležel přes text –
   patří do volného místa vpravo dole. */
@media (min-width: 761px) and (max-width: 1100px) {
  .nejsme-puzzle { left: auto; right: 40px; top: auto; bottom: 0; width: 150px; }
}
@media (max-width: 760px) {
  .mriz-2, .mriz-3, .mriz-4, .den-mriz, .hodnoty-karty, .pzi-radek, .dop-dlazdice, .spol-karty,
  .predmety-vs, .postup-krok, .pat-newsletter form { grid-template-columns: minmax(0, 1fr); }
}

/* Tlačítko s dlouhým textem se na telefonu zalomí na dva řádky,
   místo aby vyčnívalo z karty nebo z displeje. */
@media (max-width: 760px) {
  .btn { white-space: normal; height: auto; min-height: 56px; padding-block: 10px; line-height: 1.25; text-align: center; max-width: 100%; }
  .btn-sm { min-height: 44px; }
}

/* Koláže s pevnými rozměry z Figmy (mobil 390 px) se na užším telefonu
   úměrně zmenší – úvod školy, příběh, úvod erazim.cz. */
@media (max-width: 387px) { .detail-kolaz { zoom: .55; } }
@media (max-width: 359px) { .detail-kolaz { zoom: .48; } }
@media (max-width: 389px) { .pribeh-foto { zoom: .9; } }
@media (max-width: 359px) { .pribeh-foto { zoom: .8; } }
@media (max-width: 359px) { .kolaz-m { zoom: .9; } }

/* Kroky přijímání ve vlně: pět kroků vedle sebe se vejde až do desktopu,
   na tabletu jdou pod sebe jako na mobilu. */
@media (min-width: 761px) and (max-width: 1100px) {
  .kroky.kroky-vlna { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; min-height: 0; max-width: 560px; margin-inline: auto; }
  .kroky-vlna .krok { width: auto; margin-top: 0 !important; grid-template-columns: 60px minmax(0, 1fr); }
  .kroky-vlna .krok h3 { margin: 12px 0 6px; }
  .kroky-vlna .krok p { width: auto; }
}

/* Mapa škol na tabletu: u špendlíku název a stav míst, kraj by
   u krajních škol vyčníval z obrazovky (v seznamu pod mapou je). */
@media (min-width: 761px) and (max-width: 1100px) {
  .pin-popis b { font-size: 20px; }
  .pin-popis span:not(.pin-mista) { display: none; }
  .pin-popis span.pin-mista { font-size: 13px; }
}

/* Pruh školy na tabletu: menu v jednom řádku, co se nevejde, posune se
   prstem (jako na mobilu) – dlouhé menu se nezalamuje pod sebe. */
@media (min-width: 761px) and (max-width: 1100px) {
  .podnav b { flex: none; white-space: nowrap; }
  .podnav nav { min-width: 0; gap: 22px; overflow-x: auto; scrollbar-width: none; padding-block: 6px; }
  .podnav nav::-webkit-scrollbar { display: none; }
  .podnav nav a { flex: none; white-space: nowrap; }
}

/* Doprava: ilustrace autobusu je na tabletu širší než stránka – na střed. */
@media (min-width: 761px) and (max-width: 1100px) {
  .dop-uvod .dop-ilu { left: 50%; margin-inline: 0; transform: translateX(-50%); }
}

/* Ceny ve třech kartách vedle sebe (Domškoláci: školné) na tabletu. */
@media (max-width: 1100px) {
  .mriz-3 .cena-karta b { font-size: 30px; white-space: normal; }
}

/* Text z editoru: dlouhá adresa nebo slovo nepřeteče, široká tabulka
   se na telefonu posouvá prstem. Tabulka s popisky buněk (data-nazev)
   se místo posouvání složí do řádků. */
.wysiwyg, .pzi-radek .obsah, .deska-pol { overflow-wrap: break-word; }
/* Přílohy: dlouhý název souboru bez mezer (Prihlaska_ke_studiu_2023-2024.pdf)
   se zalomí kdekoli, jinak by roztáhl celý seznam do strany. */
.prilohy { grid-template-columns: minmax(0, 1fr); }
.priloha > span { min-width: 0; }
.priloha b { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .wysiwyg table { display: block; width: max-content; max-width: 100%; overflow-x: auto; font-size: 14px; }
  .wysiwyg th, .wysiwyg td { padding: 8px 10px; }
  .wysiwyg table:has(td[data-nazev]) { display: table; width: 100%; }
  .wysiwyg table:has(td[data-nazev]) thead { display: none; }
  .wysiwyg table:has(td[data-nazev]) tr { display: block; padding: 12px 16px; border-bottom: 1px solid rgba(24, 54, 87, .1); }
  .wysiwyg table:has(td[data-nazev]) tr:last-child { border-bottom: 0; }
  .wysiwyg table:has(td[data-nazev]) :is(th, td) { display: block; padding: 2px 0; border: 0; }
  .wysiwyg td[data-nazev]::before { content: attr(data-nazev) ": "; font-weight: 600; }
}

/* Sociální sítě: v patičce pod e-mailem, na Kontaktu přehled po školách. */
.site { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.site a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; color: inherit; }
.site a:hover { color: var(--modra-text); }
.site .ic { width: 22px; height: 22px; }
.paticka-site { margin-top: 14px; }
.paticka-site a:hover { color: var(--y); }
.paticka-site .ic { color: var(--modra); }
.kon-site { margin-top: 56px; color: var(--navy); }
.kon-site > p { margin: 8px 0 18px; }
.kon-site-radek { display: grid; grid-template-columns: 220px 1fr; align-items: center; gap: 4px 24px; padding: 6px 0; border-top: 1px solid rgba(24, 54, 87, .1); }
@media (max-width: 760px) {
  .kon-site-radek { grid-template-columns: 1fr; padding: 10px 0; }
}

/* Věta s odkazem na zásady pod formulářem (souhlas se nezaklikává). */
.poucka-udaje { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--tlum); }
.poucka-udaje a { color: inherit; text-decoration: underline; }

/* Přístupnost – kontrast AA (4,5 : 1) u menšího textu na barevné ploše:
   místo průsvitné bílé plná (modrá, červená), na oranžové tmavá; šedý
   text na béžové o odstín tmavší. Stojí na konci, ať přebije pravidla
   výš. Ověřeno axe-core (prohlášení o přístupnosti). */
.zaver .co-pak, .k-box-modry small, .dop-zaver-t, .karta.mise p, .oe-mise .karta.mise p,
.podnav nav a { color: #fff; }
.podnav--svetla nav a { color: var(--plochaT); }
.karta-bezT p, .karta-bezT .kicker, .projekt-text .kicker { color: #4D6076; }

/* „Nemá to být jan@email.cz?" pod e-mailovým polem (preklepy-emailu.js). */
.preklep-emailu { margin: 6px 0 0; font-size: 14px; color: var(--navy); }
.preklep-emailu button { margin-left: 4px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--modra-text); text-decoration: underline; cursor: pointer; }
.pat-newsletter .preklep-emailu { grid-column: 1 / -1; margin: 0; color: #fff; }
.pat-newsletter .preklep-emailu button { color: #fff; }
.pole-2 > .preklep-emailu { grid-column: 1 / -1; }

/* Správa odběru novinek (/odber-novinek): jedno tlačítko z podepsaného
   odkazu, bez něj přihlášení a odhlášení vedle sebe. */
.odber-box { max-width: 720px; }
.odber-box h2 { overflow-wrap: anywhere; }
.odber-box .tlum { margin-top: 10px; font-size: 15px; }
.odber-mriz { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.odber-mriz .odber-box { max-width: none; }
@media (max-width: 860px) { .odber-mriz { grid-template-columns: minmax(0, 1fr); } }

/* Cesta k přijetí domškoláků po stupních: kroky pod nadpisem uprostřed,
   štítek „kdo" na bílé kartě béžový. */
.cesta-stupen .postup { margin-inline: auto; }
.postup-bila .postup-obsah small { background: var(--bez); }
/* Víc odstavců pod nadpisem sekce (budova Domškoláků). */
.zahlavi p + p { margin-top: 14px; }
/* Ilustrace mapy domškoláků (element mapa-domskolaku): mapa škol z úvodu
   na tmavomodré ploše, rodiny v barvě Domškoláků. */
.mapa-ds { max-width: 900px; margin: 0 auto; padding: 40px 40px 28px; border-radius: var(--radius); background: var(--navy); }
.mapa-ds .pin { width: 2.6%; }
.mapa-ds .shluk circle { fill: var(--o); }
.mapa-ds .shluk .shluk-svatozar { fill-opacity: .3; }
.mapa-ds .shluk text { fill: #fff; font: 700 17px var(--f-text); text-anchor: middle; }
.mapa-ds .shluk { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; transition: opacity .3s, transform .75s var(--pop); transition-delay: calc(var(--i) * 170ms + .6s); }
.mapa-ds .mapa.is-in .shluk { opacity: 1; transform: none; }
.mapa-ds figcaption { margin-top: 18px; text-align: center; font-size: 14px; color: var(--naTmT); }
@media (max-width: 760px) { .mapa-ds { padding: 20px 14px 18px; } .mapa-ds .pin { width: 3.4%; } }
/* Kde se potkáváme: zelená místa s učiteli, oranžově rodiny; co se kde
   děje, je v seznamu pod mapou, pod ním legenda barev. */
.mapa-ds .shluk.rodina circle { stroke: #fff; stroke-width: 2.5; }
.mapa-ds .pin-popis b { font-size: 18px; text-shadow: 0 0 6px var(--navy), 0 0 2px var(--navy); }
.mista-seznam { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px 28px;
  margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(255, 255, 255, .15); list-style: none; text-align: left; }
.mista-seznam li { display: grid; grid-template-columns: 16px 1fr; align-content: start; column-gap: 10px; }
.mista-seznam svg { width: 14px; height: 19px; margin-top: 3px; grid-row: span 2; }
.mista-seznam b { color: #fff; font-size: 16px; }
.mapa-legenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin: 22px 0 0; font-size: 13px; }
.mapa-legenda span { display: inline-flex; align-items: center; gap: 8px; }
.mapa-legenda svg { width: 12px; height: 16px; }
.mapa-legenda .tecka { width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; background: var(--o); }
.budova-karty { margin-top: 56px; }
.budova-karty-zahlavi { margin: 80px auto 0; }
.budova-karty-zahlavi + .budova-karty { margin-top: 40px; }
.budova-karty-zahlavi .h3 + p { margin-top: 16px; }
@media (max-width: 760px) {
  .mapa-ds .pin-popis b { font-size: 11px; }
  .mista-seznam { grid-template-columns: 1fr; gap: 10px; font-size: 14px; }
  .mista-seznam b { font-size: 15px; }
}
html:not(.js) .mapa-ds .shluk { opacity: 1; transform: none; }

/* Odkaz pod textem karty v tmavém bloku školy (element skola/blok) –
   Domškoláci odkazují na Touzapo a střední školu. */
.karta-tmava .karta-odkaz { margin-top: 16px; }
.karta-tmava .karta-odkaz .odkaz-u { color: #fff; }
/* Seznam v textu příběhu (Touzapo – základka): odstup od dalšího odstavce. */
.pribeh-text .seznam-karta + p { margin-top: 20px; }

/* Mapa dojezdů v oddílu Budova a okolí (skola.dojezd, tools/generuj-mapy-dojezdu.py)
   a mapa „odkud jsou naši žáci“ na Touzapu: text vlevo, mapa vpravo, na telefonu
   pod sebou. */
.dojezd { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 48px; align-items: center; margin-top: 104px; }
.dojezd-text .h3 + p { margin-top: 18px; }
.dojezd-text p + p { margin-top: 14px; }
.dojezd-text p { color: var(--tlum); }
.dojezd-mapa { margin: 0; border-radius: var(--radius); overflow: hidden; background: #F4F0E9; }
.dojezd-mapa img { display: block; width: 100%; height: auto; }
.dojezd.dojezd-bez-odstupu { margin-top: 0; }
@media (max-width: 960px) {
  .dojezd { grid-template-columns: 1fr; gap: 28px; margin-top: 72px; }
  .dojezd.dojezd-bez-odstupu { margin-top: 0; }
}