/* web_066eebd919d04d11a0af816eb8ee69ae homepage.css */
/* Sunny Canadian – doplňky k symbolům styleguide (převzato ze site-chrome.css lokálního webu) */
html { scroll-behavior: smooth; }
body { font-feature-settings: "lnum"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Tlačítka jako na webu: plynulá změna barev + magnetický posun za kurzorem (posun dělá skript) */
a[class*="inline-flex"][class*="justify-center"] {
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background-color .25s, color .25s, border-color .25s, opacity .25s;
  will-change: transform;
}
/* Textový odkaz se šipkou: linka zežloutne (styleguide), šipka popojede */
a[class*="border-b"] > span:last-child,
a:hover [class*="border-b"] > span:last-child { display: inline-block; transition: transform .25s ease; }
a[class*="border-b"]:hover > span:last-child,
a:hover [class*="border-b"] > span:last-child { transform: translateX(3px); }
a[class*="border-b"] { transition: border-color .2s ease, color .2s ease; }

/* Šipky sliderů: plynulé vyplnění při najetí */
button[aria-label="Předchozí"], button[aria-label="Další"] { transition: background-color .3s, color .3s, border-color .3s, opacity .3s; }

/* Otočná karta (symbol Otočná karta): klik / Enter / mezerník kartu otočí, za kurzorem jede kolečko s + (dělá skript) */
.sc-flip { perspective: 1600px; outline: none; }
.sc-flip-in { transition: transform .85s cubic-bezier(.16,.84,.3,1); transform-style: preserve-3d; }
.sc-flip-face { -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; }
.sc-flip-back { transform: rotateY(180deg); }
.sc-flip.is-flipped .sc-flip-in { transform: rotateY(180deg); }
.sc-flip:focus-visible .sc-flip-face { box-shadow: inset 0 0 0 2px #fbc736; }
.sc-flip-vice > span:last-child { display: inline-block; transition: transform .25s ease; }
.sc-flip-vice:hover > span:last-child { transform: translateX(3px); }
.sc-flip-vice { transition: border-color .2s ease; }
/* tlačítko na detail jen tam, kde je detail vyplněný */
.sc-flip:not(:has(.sc-flip-detail-obsah > *)) .sc-flip-vice { display: none; }
@media (hover: hover) and (pointer: fine) {
  .sc-flip { cursor: none; }
  .sc-flip-kurzor { position: absolute; top: 0; left: 0; z-index: 30; width: 48px; height: 48px; border-radius: 999px; pointer-events: none;
    background: rgba(255,255,255,.12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; transform: translate(-50%,-50%) scale(.4); transition: opacity .25s, transform .35s cubic-bezier(.16,.84,.3,1), background-color .3s; }
  .sc-flip-kurzor::before, .sc-flip-kurzor::after { content: ""; position: absolute; top: 50%; left: 50%; background: #fff; border-radius: 999px; transform: translate(-50%,-50%); }
  .sc-flip-kurzor::before { width: 14px; height: 1.5px; }
  .sc-flip-kurzor::after { width: 1.5px; height: 14px; }
  .sc-flip:hover .sc-flip-kurzor { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  .sc-flip.is-flipped:hover .sc-flip-kurzor { transform: translate(-50%,-50%) scale(1) rotate(45deg); background: rgba(26,26,26,.14); }
  .sc-flip.is-flipped .sc-flip-kurzor::before, .sc-flip.is-flipped .sc-flip-kurzor::after { background: #1a1a1a; }
  .sc-flip-kurzor.je-sipka::after { display: none; }
  .sc-flip-kurzor.je-sipka::before { content: "→"; width: auto; height: auto; background: none !important; border-radius: 0; font: 600 18px/1 sans-serif; color: #1a1a1a; }
  .sc-flip.is-flipped:hover .sc-flip-kurzor.je-sipka { transform: translate(-50%,-50%) scale(1); }
}
.sc-flip-kurzor { display: none; }
@media (hover: hover) and (pointer: fine) { .sc-flip-kurzor { display: block; } }

/* Okno s detailem karty (vždy uprostřed obrazovky) */
.sc-detail { position: fixed; inset: 0; margin: auto; height: fit-content; width: calc(100% - 32px); max-width: 680px; max-height: calc(100vh - 64px); overflow: auto; border: 0; padding: 44px 24px 32px; background: #fff; color: #1a1a1a; border-radius: 12px;
  opacity: 0; transform: translateY(16px) scale(.97); transition: opacity .35s ease, transform .5s cubic-bezier(.16,.84,.3,1); }
@media (min-width: 768px) { .sc-detail { padding: 52px 48px 44px; } }
.sc-detail.je-otevrene { opacity: 1; transform: none; }
.sc-detail::backdrop { background: rgba(26,26,26,.62); }
.sc-detail h3 { font-weight: 600; font-size: 23px; line-height: 1.2; letter-spacing: -0.02em; padding-right: 40px; }
@media (min-width: 768px) { .sc-detail h3 { font-size: 28px; } }
.sc-detail-telo p { margin-top: 16px; font-size: 16px; line-height: 1.65; font-weight: 300; color: rgba(26,26,26,.78); }
.sc-detail-telo p:first-child strong:only-child { font-weight: 600; color: #1a1a1a; }
.sc-detail-telo > a, .sc-detail-telo > div:last-child { margin-top: 32px; }
.sc-detail-zavrit { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(26,26,26,.18); background: none; display: grid; place-items: center; cursor: pointer; color: #1a1a1a; transition: background-color .2s, color .2s; }
.sc-detail-zavrit:hover { background: #1a1a1a; color: #fff; }

/* Vodorovně posuvný pás karet: bez posuvníku, karty se zarovnávají (mimo sekce převzaté z webu) */
.overflow-x-auto:not(.sc-legacy *) { scrollbar-width: none; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.overflow-x-auto:not(.sc-legacy *)::-webkit-scrollbar { display: none; }
.overflow-x-auto:not(.sc-legacy *) > * { scroll-snap-align: start; }

/* Objevování obsahu sekcí při scrollu (třídu přidává skript, jen pod okrajem obrazovky) */
.sc-reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.sc-reveal.is-in { opacity: 1; transform: none; }

/* Záložky: plynulá změna barev při přepnutí */
[role="tablist"] > button { transition: background-color .2s ease, border-color .2s ease, color .2s ease; }

/* Vlnitý předěl (symbol): vlna v barvě další sekce překrývá spodek předchozí sekce, ta dostane větší spodní odsazení */
.sc-vlna { display: block; width: 100%; height: clamp(48px, 8.55vw, 123px); margin-top: calc(-1 * clamp(48px, 8.55vw, 123px)); position: relative; z-index: 25; pointer-events: none;
  -webkit-mask: url("https://cdn-files.app.solidpixels.com/s/fat_af242303d996468d86ce21f6a33d19b6/vlna.svg") no-repeat 0 100% / 100% 100%;
  mask: url("https://cdn-files.app.solidpixels.com/s/fat_af242303d996468d86ce21f6a33d19b6/vlna.svg") no-repeat 0 100% / 100% 100%; }
section:has(+ .sc-vlna), :has(> section:only-child):has(+ .sc-vlna) > section { padding-bottom: calc(clamp(48px, 8.55vw, 123px) + 100px) !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sc-flip-in, .sc-reveal, .sc-detail, a[class*="inline-flex"][class*="justify-center"] { transition: none; }
  .sc-reveal { opacity: 1; transform: none; }
}
/* Hero úvodní stránky (symbol heroUvod) – mechanika, kterou nejde nastavit v editoru:
   výška podle lišty aktualit, strom a jeho odhalení, viněta, pás stupňů, tah štětcem. */
.hero-uvod{height:auto}
@media (min-width:768px){
  .hero-uvod{height:100vh}
  body.ma-aktuality .hero-uvod{height:calc(100vh - var(--aktuality-h,48px))}
}

/* viněta pod textem */
.hero-uvod .hero-vignette{background:linear-gradient(to right,rgba(34,38,46,.85) 0,rgba(34,38,46,.38) 16%,rgba(34,38,46,0) 34%)}
@media (min-width:768px){
  .hero-uvod .hero-vignette{background:linear-gradient(to right,#22262e 35%,rgba(34,38,46,0) 61.03%),linear-gradient(to right,rgba(34,38,46,0) 33.06%,rgba(34,38,46,.9) 33.06%,rgba(34,38,46,.18) 47%,rgba(34,38,46,0) 68%)}
}

/* fotky stupňů (vytváří je skript z pásu) */
.hero-uvod .hero-photo{transform:scale(1.06);transform-origin:center}
.hero-uvod .hero-photo.je-aktivni{transform:scale(1);transition:transform 11s ease-out,opacity 1.1s ease-out}

/* strom */
@keyframes scStromOdkryti{0%{-webkit-mask-position:50% 0;mask-position:50% 0}to{-webkit-mask-position:50% 100%;mask-position:50% 100%}}
.hero-uvod .tree-img{bottom:0;-webkit-mask-image:linear-gradient(to top,#000 30%,rgba(0,0,0,.55) 50%,transparent 66%);mask-image:linear-gradient(to top,#000 30%,rgba(0,0,0,.55) 50%,transparent 66%);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 300%;mask-size:100% 300%;-webkit-mask-position:50% 0;mask-position:50% 0;animation:scStromOdkryti 1900ms cubic-bezier(.34,.03,.24,1) both}
@media (min-width:768px){
  .hero-uvod .tree-img{top:auto;bottom:34px;height:calc(100% - 96px - 34px + 6px)!important;max-width:54vw!important;object-position:center center!important}
  .hero-uvod .hero-koreny-prechod{display:block;bottom:79px!important;height:max(36px,calc((100% - 124px)*.155 - 45px));z-index:2;background:linear-gradient(to top,#22262e 0,#22262e 10%,rgba(34,38,46,.8) 35%,rgba(34,38,46,.4) 68%,rgba(34,38,46,0) 100%)}
}
@media (prefers-reduced-motion:reduce){
  .hero-uvod .tree-img{-webkit-mask-image:none!important;mask-image:none!important;animation:none!important}
  .hero-uvod .hero-photo,.hero-uvod .hero-photo.je-aktivni{transform:none;transition:none}
}

/* nadpis: tah štětcem pod druhým řádkem, velké monitory */
.hero-uvod #hero-title .tah{position:relative;z-index:0;color:#fff}
.hero-uvod #hero-title .tah::after{content:"";position:absolute;z-index:-1;left:.16em;top:.76em;width:calc(100% + .1em);height:.92em;background:url(https://cdn-files.app.solidpixels.com/s/fat_54244c66972b42a6a3cbbbbd208c6a67/stetec.svg) no-repeat center/100% 100%;pointer-events:none}
@media (min-width:768px){.hero-uvod #hero-title{white-space:nowrap}}
@media (min-width:1680px){
  .hero-uvod #hero-title{font-size:clamp(4.25rem,calc(5vw - 1rem),7.25rem)!important;line-height:1.04!important;letter-spacing:-.04em!important}
  .hero-uvod #hero-subtitle{font-size:clamp(1rem,calc(.55vw + .5rem),1.25rem)!important;max-width:34rem!important;line-height:1.55!important}
  .hero-uvod .hero-text{max-width:45rem!important}
  .hero-uvod .hero-mrizka{grid-template-columns:minmax(0,45rem) 1fr!important}
}
@media (min-width:2560px){
  .hero-uvod #hero-title{font-size:8rem!important}
  .hero-uvod #hero-subtitle{font-size:1.35rem!important;max-width:38rem!important}
}

/* pás stupňů */
.hero-uvod .hs-pas{position:relative;padding-top:10px;background:linear-gradient(transparent 10px,#cea430 10px,#cea430 11px,#fbc736 11px)}
.hero-uvod #slider-tabs{margin-top:-10px;padding-top:10px}
/* pět položek po 235 px se vejde až od ~1285 px – na tabletu a malém notebooku pás přetékal a celá stránka
   šla posouvat do strany. Pod 1300 px roluje jen pás (aktivní položku do pohledu posouvá skript). (21. 10.) */
@media (max-width:1299px){.hero-uvod #slider-tabs{overflow-x:auto!important}}
.hero-uvod .slider-tab{position:relative;z-index:1;flex:none;width:235px;height:79px;padding:0 16px 0 27px;display:flex;flex-direction:column;justify-content:center;gap:2px;text-align:left;color:#1a1a1a;background:none;border:0;cursor:pointer;font-family:'URW Grotesk',sans-serif}
.hero-uvod .hs-nazev{display:block;font-weight:700;font-size:18px;line-height:16px;white-space:nowrap}
.hero-uvod .hs-popis{display:block;font-weight:300;font-size:12px;line-height:16px;white-space:nowrap}
.hero-uvod .hs-karta{position:absolute;top:0;left:0;width:235px;height:89px;background:#f3f3f3;box-shadow:0 0 0 1px rgba(26,26,26,.1),0 -8px 24px rgba(0,0,0,.25);overflow:hidden;transition:left .5s cubic-bezier(.16,.84,.3,1),width .5s cubic-bezier(.16,.84,.3,1)}
.hero-uvod .hs-prubeh{position:absolute;top:0;left:0;right:0;height:3px;background:rgba(26,26,26,.15)}
.hero-uvod .hs-prubeh>span{display:block;height:100%;width:0;background:#fbc736}
.hero-uvod .hs-dalsi{flex:none;align-self:flex-end;height:79px;width:40px;margin-right:-12px;display:flex;align-items:center;justify-content:center;color:#1a1a1a;background:none;border:0;cursor:pointer}
.hero-uvod .hs-dalsi svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.hero-uvod .hs-dalsi:hover svg{transform:translateX(3px)}
.hero-uvod .no-scrollbar{scrollbar-width:none}
.hero-uvod .no-scrollbar::-webkit-scrollbar{display:none}

/* mobil */
@media (max-width:767px){
  .hero-uvod{--vizual-top:72px;height:calc(100svh - var(--aktuality-h,48px));min-height:620px}
  .hero-uvod .hero-fotky,.hero-uvod #hero-tree-layer{position:absolute;top:var(--vizual-top);bottom:70px;left:0;right:0;height:auto;width:auto}
  .hero-uvod .hero-fotky{bottom:auto;height:round(47svh,1px);background:#22262e}
  .hero-uvod .hero-fotky .hero-photo{object-position:50% 22%!important}
  .hero-uvod .hero-fotky-prechod{bottom:-2px;background:linear-gradient(to top,#22262e 0,#22262e 3%,rgba(34,38,46,.7) 20%,rgba(34,38,46,0) 44%)!important}
  .hero-uvod #hero-tree-layer>.relative{height:100%;padding:0}
  .hero-uvod .tree-img{left:50%;top:-6px;bottom:auto;transform:translateX(-52.1%);width:min(96vw,46svh,430px);height:auto!important;max-width:none!important}
  .hero-uvod .hero-koreny-prechod{top:0;height:auto;background:linear-gradient(to top,#22262e 0,rgba(34,38,46,.94) 34%,rgba(34,38,46,.6) 56%,rgba(34,38,46,0) 78%)}
  .hero-uvod .hero-obsah{flex:1 1 auto!important;align-items:flex-end!important;padding-top:var(--vizual-top)!important;padding-bottom:20px!important}
  .hero-uvod #hero-subtitle{margin-top:14px!important}
  .hero-uvod .hero-tlacitka{margin-top:22px!important;gap:10px!important;flex-direction:row!important}
  .hero-uvod .hero-tlacitka>a{flex:1 1 0;min-width:0;padding-left:10px!important;padding-right:10px!important;font-size:14px!important;white-space:nowrap}
  .hero-uvod .slider-tab{height:60px!important;padding:0 27px 0 20px!important;width:auto}
  .hero-uvod .hs-karta{height:70px!important}
  .hero-uvod .hs-nazev{font-size:16px}
  .hero-uvod .hs-dalsi{display:none}
}

/* Hero podstránek (symbol heroPodstranka). Texty, barvy a velikosti jsou nastavené v editoru,
   tady jen to, co editor neumí: tah štětcem, doodle a velké obrazovky.
   Viněta přes fotku (přechod zleva) je nastavená v editoru přímo na vrstvě .hero-vignette (pozadí – obrázek),
   aby byla vidět i v náhledu editoru. */
@media (min-width:768px){
  .hero-podstranka h1{white-space:nowrap}
}
/* když pod úvodem pokračuje tmavý obsah (slot „pod“), fotka se dole rozpustí do podkladu */
.hero-podstranka:has(> .relative.z-10 > *) .hero-foto-fade{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 120px),transparent 100%);mask-image:linear-gradient(to bottom,#000 calc(100% - 120px),transparent 100%)}
/* vlna pod hero leží přímo na fotce (jako v návrhu), ne v tmavém pruhu pod ní */
.hero-podstranka + .predel-pas{margin-top:calc(-1 * clamp(48px,8.55vw,123px) + 1px);background:transparent;z-index:20}
/* tah štětcem pod druhým řádkem nadpisu */
.hero-podstranka h1 .tah{position:relative;z-index:0}
.hero-podstranka h1 .tah::after{content:"";position:absolute;z-index:-1;left:.16em;top:.76em;width:calc(100% + .1em);height:.92em;background:url(https://cdn-files.app.solidpixels.com/s/fat_54244c66972b42a6a3cbbbbd208c6a67/stetec.svg) no-repeat center/100% 100%;pointer-events:none}
/* na lokále je doodle uvnitř podtržené části, tah štětcem tedy vede i pod ním – šířku doodlu dosadí skript úvodu
   (vyšší specifičnost, aby přebila obecné pravidlo pro podtržení v nadpisu úvodu) */
section.hero-podstranka .nadpis-s-doodlem h1 u::after{width:calc(100% + .1em + var(--doodle-sirka, 0px)) !important}
/* doodle za nadpisem */
.hero-podstranka .doodle-nadpis{display:inline-block;height:1.25em;width:auto;max-width:2.6em;margin-left:.28em;vertical-align:baseline;transform:translateY(-.32em) rotate(8deg);pointer-events:none}
.hero-podstranka .doodle-nadpis:not([src]),.hero-podstranka .doodle-nadpis[src=""]{display:none}
@media (max-width:767px){.hero-podstranka .doodle-nadpis{height:1.05em}}
/* velké obrazovky: širší textový sloupec */
@media (min-width:1680px){.hero-podstranka .hero-pod-text{max-width:clamp(36rem,38vw,52rem)}}

/* Sekce Moment vize (symbol momentVize) a rámeček Vize. Vzhled textů je v editoru, tady jen efekty. */
.sekce-moment-vize .mv-nadpisek:empty { display: none; }
.mv-podtrzeni { position: relative; z-index: 0; white-space: nowrap; }
.mv-podtrzeni::after { content: ""; position: absolute; z-index: -1; left: .025em; top: .45em; width: 108%; height: 1.57em;
  background: url(https://cdn-files.app.solidpixels.com/s/fat_54244c66972b42a6a3cbbbbd208c6a67/stetec.svg) no-repeat center/100% 100%; transform: rotate(-2.2deg); pointer-events: none; }
/* doodle za nadpisem (stejný jako v hero podstránek) */
.doodle-nadpis { display: inline-block; height: 1.25em; width: auto; max-width: 2.6em; margin-left: .28em; vertical-align: baseline; transform: translateY(-.32em) rotate(8deg); pointer-events: none; }
.doodle-nadpis:not([src]), .doodle-nadpis[src=""] { display: none; }
@media (max-width: 767px) { .doodle-nadpis { height: 1.05em; } }
/* rozbalovací text: tlačítko jen když má text, sbalený text končí přechodem do bílé */
.mv-rozbal:has(.mv-rozbal-popis:empty) { display: none; }
.mv-text { position: relative; overflow: hidden; transition: max-height .55s cubic-bezier(.2,.8,.2,1); }
.mv-text.je-zabaleno { max-height: 7.4em; }
.mv-text.je-zabaleno::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3.2em; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff); pointer-events: none; }
.mv-rozbal .mv-rozbal-sipka { transition: transform .3s; font-size: 16px; }
.mv-rozbal[aria-expanded="true"] .mv-rozbal-sipka { transform: rotate(180deg); }
.mv-rozbal { transition: border-color .2s; }
/* rámeček vize pod momentem */
.mv-pod:has(> *) { margin-top: 80px; }
@media (min-width: 768px) { .mv-pod:has(> *) { margin-top: 128px; } }
/* kresby u nadpisu rámečku Vize (jen desktop, návrh Figma 652:81): sluníčko vlevo od nadpisu, šipka vpravo, odstup od textu jako v návrhu.
   Užší desktop: nadpis se láme jinak; kresby jsou menší a drží se uvnitř rámečku */
.vize-ramecek .vize-kresba { position: absolute; pointer-events: none; display: none; z-index: 0; }
@media (min-width: 1024px) { .vize-ramecek .vize-kresba { display: block; } }
.vize-ramecek .vize-kresba-srdce { width: 90px; left: calc(50% - 586px); top: 141px; }
.vize-ramecek .vize-kresba-sipka { width: 72px; left: calc(50% + 496px); top: 129px; }
@media (max-width: 1299px) {
  .vize-ramecek .vize-kresba-srdce { width: 70px; left: calc(50% - 466px); top: 18px; }
  .vize-ramecek .vize-kresba-sipka { width: 56px; left: calc(50% + 395px); top: 172px; }
}
@media (max-width: 1139px) {
  .vize-ramecek .vize-kresba-srdce { width: 90px; left: calc(50% - 397px); top: 84px; }
  .vize-ramecek .vize-kresba-sipka { left: calc(50% + 230px); top: 245px; }
}
/* Citace s fotkou: na širokých obrazovkách fotka 500 px (jako na lokále, 29. 10.) */
@media (min-width: 1280px) { img[class~="min-[1280px]:w-[530px]"] { width: 500px; } }
/* Kampus – scroll příběh: rozložení, které na webu skládá skript „Kampus – scroll příběh“.
   V editoru se nepoužije (kroky jsou tam pod sebou). */
.pribeh-scroll.pk-aktivni{contain:layout paint}
.pk-sticky{position:sticky;top:0;height:100vh;width:100%;overflow:hidden}
.pk-grid{display:grid;grid-template-columns:1fr 1fr;height:100%;width:100%}
.pk-imgs{position:relative;height:100%;width:100%;overflow:hidden;background:#22262e}
.pk-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(100% 0 0 0);will-change:clip-path;transition:clip-path .15s linear}
.pk-img:first-child{clip-path:inset(0)}
.pk-shade{position:absolute;inset:0;z-index:5;pointer-events:none;background:linear-gradient(to right,rgba(26,26,26,0),rgba(26,26,26,.3))}
.pk-textcol{position:relative;height:100%;width:100%;display:flex;align-items:center;padding:0 80px}
.pk-textin{position:relative;width:100%;max-width:36rem}
.pk-stage{position:relative;min-height:360px}
@media (min-width:768px){.pk-stage{min-height:460px}}
.pk-step{position:absolute!important;left:0;right:0;top:0;max-width:none!important;opacity:0;transform:translateY(24px);transition:opacity .55s,transform .6s cubic-bezier(.22,1,.36,1);pointer-events:none}
.pk-step.is-on{opacity:1;transform:none;pointer-events:auto}
.pk-step.is-past{opacity:0;transform:translateY(-24px)}
.pk-dots{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:10}
.pk-dot{display:block;width:40px;height:1px;background:rgba(255,255,255,.25);transition:all .5s}
.pk-dot.is-on{background:#fbc736;width:56px}
@media (prefers-reduced-motion:reduce){.pk-img,.pk-step{transition:none}}

/* desktop (Lukáš 22. 10.): přišpendlená fotka začíná až pod pevnou hlavičkou – dřív pod ni zajížděla horní část fotky */
@media (min-width:1024px){
  .pk-sticky{--story-top:calc(96px + var(--aktuality-h,0px));top:var(--story-top);height:calc(100vh - var(--story-top))}
}
/* tablet a mobil: fotka nahoře (2 díly), text dole (3 díly) */
@media (max-width:1023px){
  .pk-sticky{--story-top:calc(72px + var(--aktuality-h,0px));top:var(--story-top);height:calc(100vh - var(--story-top));height:calc(100svh - var(--story-top))}
  .pk-grid{grid-template-columns:1fr;grid-template-rows:2fr 3fr}
  .pk-imgs,.pk-textcol{min-height:0}
  .pk-shade{display:none}
  .pk-textcol{align-items:flex-start;padding:20px;overflow:hidden}
  .pk-stage{min-height:0;height:calc((100svh - 72px - var(--aktuality-h,0px))*.6 - 76px)}
  .pk-step>div:first-child{margin-bottom:8px!important}
  .pk-step h2{font-size:26px!important;line-height:1.08!important;margin-bottom:12px!important}
  .pk-step p{font-size:14px!important;line-height:1.5!important;margin-bottom:12px!important}
  .pk-dot{width:32px}
  .pk-dot.is-on{width:48px}
}
@media (min-width:768px) and (max-width:1023px){
  .pk-sticky{--story-top:calc(96px + var(--aktuality-h,0px))}
  /* tablet (Lukáš 26. 10.): fotka a text půl na půl, text začíná níž a má širší okraje */
  .pk-grid{grid-template-rows:1fr 1fr}
  .pk-textcol{padding:48px 40px 24px}
  .pk-stage{height:calc((100svh - 96px - var(--aktuality-h,0px))*.5 - 100px)}
}
/* mobil (Lukáš 29. 10.): fotka a text půl na půl, text svisle na střed své poloviny (kroky leží v jedné buňce
   mřížky místo absolutního umístění nahoře), dole místo pro ukazatele kroků; delší text ubere z fotky */
@media (max-width:767px){
  .pk-grid{grid-template-rows:minmax(0,1fr) minmax(50%,max-content)}
  .pk-textcol{align-items:center;padding:16px 20px 52px}
  .pk-textin{height:100%;display:flex;align-items:center}
  .pk-stage{height:auto;width:100%;display:grid;align-items:center}
  .pk-step{position:relative!important;grid-area:1/1;inset:auto!important}
  .pk-step p:last-child{margin-bottom:0!important}
}

html.v2 .sc-legacy section p[class*="[font-family:var(--sp-project-font-family-script)]"] {
  font-family: var(--sp-project-font-family-script) !important;
  font-weight: var(--sp-primitive-font-weight-regular);
  margin-bottom: var(--sp-margin-bottom-local-efba7);
}

/* Světlá otočná karta s Losíkem (symbol Otočná karta s obrázkem): kolečko za kurzorem šedé s tmavým křížkem, losík při najetí povyskočí */
@media (hover: hover) and (pointer: fine) {
  .sc-flip--svetla .sc-flip-kurzor { background: rgba(243,243,243,.55); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); }
  .sc-flip--svetla .sc-flip-kurzor::before, .sc-flip--svetla .sc-flip-kurzor::after { background: #1a1a1a; }
  .sc-flip--svetla.is-flipped:hover .sc-flip-kurzor { background: rgba(243,243,243,.55); }
  .sc-flip--svetla:has(a:hover) .sc-flip-kurzor { opacity: 0; }
  .sc-flip--svetla a { cursor: pointer; }
  .sc-flip--svetla:not(.is-flipped):hover .sc-flip-face:not(.sc-flip-back) img { transform: translateY(-5px); }
}
/* Safari na iPhonu nechává obrázek viditelný i na odvrácené straně karty a při otáčení bliká:
   karta a její přední strana mají vlastní vrstvu a obrázek plynule zmizí, než je karta bokem (90° nastane po 0,1 s) */
.sc-flip-in { will-change: transform; }
.sc-flip-face:not(.sc-flip-back) { transform: translateZ(0); }
.sc-flip-face img { -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: opacity .18s linear .09s; }
.sc-flip--svetla .sc-flip-face img { transition: transform .5s cubic-bezier(.16,.84,.3,1), opacity .18s linear .09s; }
.sc-flip.is-flipped .sc-flip-face:not(.sc-flip-back) img, .sc-flip:not(.is-flipped) .sc-flip-back img { opacity: 0; transition: opacity .09s linear; }
.sc-flip--svetla .sc-flip-back { overflow-y: auto; }
/* Řada otočných karet: pod 1280 px posuvný pás, od 1280 px mřížka (4 nebo 6 karet) */
@media (max-width: 1279.98px) {
  .sc-rada-karet { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 20px !important; }
  .sc-rada-karet::-webkit-scrollbar { display: none; }
  .sc-rada-karet > * { flex: none; width: min(322px, 78vw) !important; scroll-snap-align: start; }
  .sc-rada-karet--sest > * { width: min(240px, 66vw) !important; }
}
@media (min-width: 1280px) {
  .sc-rada-karet .sc-flip-in { min-height: 476px; }
  .sc-rada-karet--sest { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 16px !important; }
  /* šest karet: výška a odsazení zadní strany jako na lokále (306 px, 18/16/16) */
  .sc-rada-karet--sest .sc-flip-in { min-height: 306px; }
  .sc-rada-karet--sest .sc-flip-back { padding: 18px 16px 16px !important; }
}
.sc-rada-karet--sest .sc-flip-back > div:empty { display: none; }
/* V editoru je u varianty „Default" zadní strana průhledná (vidíte a upravujete přední) a u varianty
   „Zadní strana" naopak přední – každá varianta tak ukáže jinou stranu karty. Na webu jsou vidět obě
   a otáčení dělá 3D transformace (blok „Sunny – doplňkové styly"). */
.sc-flip-face { opacity: 1 !important; }
.sc-flip h3 { white-space: pre-line; }
/* Menu musí být čitelné i nad světlou fotkou v úvodu (Lukáš 22. 10.): dokud hlavička nemá tmavé pozadí,
   leží pod ní jemný tmavý přechod shora; po odrolování ho nahradí plné tmavé pozadí. */
#site-header::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 110px); z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(34,38,46,.6) 0%, rgba(34,38,46,.42) 30%, rgba(34,38,46,.18) 65%, rgba(34,38,46,0) 100%);
  transition: opacity .3s ease; }
#site-header.bg-dark::before { opacity: 0; }

/* Otevřené menu: tmavá vrstva 90 % (Lukáš 26. 10., dříve 82 %) */
.nav-overlay .nav-backdrop { background: rgba(34,38,46,.9) !important; }

/* Ručně psané nadpisky nad nadpisy: písmo Sriracha (Lukáš 26. 10., dříve Momo Signature).
   Velikost 1,3× původních 17 px (mobil 15 px); výška řádku zůstává jako u Momo, ať se nadpisy pod nimi neposouvají. */
[class*="--sp-project-font-family-script"] { font-size: 22.1px !important; line-height: 23.8px !important; }
@media (max-width: 767px) { [class*="--sp-project-font-family-script"] { font-size: 19.5px !important; line-height: 21px !important; } }

/* Předěly (vlny) jako na lokále: vlna leží celá pod sekcí, nepřekrývá její spodní odstup (dřív −12 px).
   Výjimka: úvod podstránky bez obsahu pod sebou – tam vlna leží přes spodek fotky (blok „Hero podstránek – efekty"). */
:not(.hero-podstranka) + .predel-pas { margin-top: 0 !important; }
/* s obsahem pod úvodem (karty) leží vlna až pod ním, na tmavém podkladu */
.hero-podstranka:has(> .relative.z-10 > *) + .predel-pas { margin-top: 0 !important; background: var(--sp-project-color-dark-base) !important; }

/* Citace zakladatelky – odstupy jako na lokále (pt 164/180/200, pb 264/280/300 včetně vlny) */
#zakladatelka { padding-top: 164px !important; padding-bottom: calc(264px - clamp(48px, 8.55vw, 123px)) !important; }
@media (min-width: 768px) { #zakladatelka { padding-top: 180px !important; padding-bottom: calc(280px - clamp(48px, 8.55vw, 123px)) !important; } }
@media (min-width: 1024px) { #zakladatelka { padding-top: 200px !important; padding-bottom: calc(300px - clamp(48px, 8.55vw, 123px)) !important; } }

/* Výškový tablet (Lukáš 26. 10.): úvody podstránek – fotka přes celou šířku nahoře, spodek se rozplyne do tmavé
   a text s tlačítky leží dole na něm (ne vedle fotky). Desktop, tablet na šířku a mobil beze změny. */
@media (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) {
  .hero-podstranka .hero-foto-fade { width: 100% !important; }
  .hero-podstranka .hero-foto-fade > .absolute.inset-0:not(video) { display: block !important;
    background: linear-gradient(to top, #22262e 0%, #22262e 30%, rgba(34,38,46,.75) 44%, rgba(34,38,46,0) 64%) !important; }
  .hero-podstranka .hero-vignette { background: none !important; }
  /* úvod je vysoký jako okno, ale začíná pod lištou aktualit – o její výšku je dole schovaný, proto ji přičteme.
     Platí pro všechny úvody stejně jako na Proč k nám (29. 10.: zrušen extra odstup o výšku vlny). */
  .hero-podstranka .relative.z-10.flex-1 { align-items: flex-end !important; padding-bottom: calc(64px + var(--aktuality-h, 0px)) !important; }
  .hero-podstranka .hero-pod-text { max-width: 40rem; }
  /* tlačítka úvodu velká jako na desktopu */
  .hero-podstranka .hero-pod-text > div a { font-size: 16px !important; padding: 20px 32px !important; }
}

/* Otočné karty: název může mít zalomení řádku (Enter v poli Název), jako <br> na lokále */
.sc-flip h3 { white-space: pre-line; }
/* Tmavé tlačítko v konverzní sekci (Přihláška) má za textem šipku jako na lokále; žlutá tlačítka šipku nemají */
section:has(.navsteva-radky) .mt-10 > a:first-child::after { content: "→"; margin-left: 12px; font-size: 16px; line-height: 24px; }

/* Nadpisek v úvodu podstránky končí třemi tečkami jako na lokále */
.hero-pod-text > p:first-child::after { content: "…"; }

/* Konverzní sekce: odstup nad vlnou jako na lokále – vlastní spodní odstup 180 / 212 px, nejméně však 100 px nad vlnou */
section:has(.navsteva-radky) { padding-bottom: max(100px, calc(180px - clamp(48px, 8.55vw, 123px))) !important; }
@media (min-width: 768px) { section:has(.navsteva-radky) { padding-bottom: max(100px, calc(212px - clamp(48px, 8.55vw, 123px))) !important; } }

/* Doodle za nadpisem: šířka se řídí výškou kresby, ne písmem obalu (max-width 2,6em počítalo s 16 px a kresbu zúžilo) */
.nadpis-s-doodlem > .doodle-nadpis { max-width: none !important; }

/* Sekce fotka + text (Kroky, které nás vedou…): kompaktní karty na mobilu jako na lokále –
   odsazení 12 px (od 640 px 20 px), text 8 px pod nadpisem, mezera mezi kartami 10 px; od 768 px beze změny */
@media (max-width: 767px) {
  .ft-text article { padding: 12px !important; }
  .ft-text article > h3 + div { margin-top: 8px !important; }
  .ft-text .gap-5 { gap: 10px !important; }
}
@media (min-width: 640px) and (max-width: 767px) { .ft-text article { padding: 20px !important; } }

/* Ikony v otočných kartách: slot 110 × 76 px a optické vyrovnání kreseb (stejné měřítko a posun jako na lokále) */
.sc-flip-doodle { height: 76px !important; }
.sc-flip-doodle img { transform-origin: 0 0; }
.sc-flip-doodle img[src*="autobus"] { transform: translate(-25.8%, -3.3%) scale(1.145); }
.sc-flip-doodle img[src*="banka"] { transform: translate(-28.2%, -8.7%) scale(1.197); }
.sc-flip-doodle img[src*="cepice"] { transform: translate(-16.3%, -6.4%) scale(1.031); }
.sc-flip-doodle img[src*="clear-day"] { transform: translate(-20.0%, -19.7%) scale(1.198); }
.sc-flip-doodle img[src*="diplom"] { transform: translate(-23.2%, -3.5%) scale(1.115); }
.sc-flip-doodle img[src*="favorite"] { transform: translate(-12.3%, -15.2%) scale(1.040); }
.sc-flip-doodle img[src*="idea"] { transform: translate(-9.4%, -4.5%) scale(0.944); }
.sc-flip-doodle img[src*="jh-projekty"] { transform: translate(-9.7%, -4.1%) scale(0.926); }
.sc-flip-doodle img[src*="kniha"] { transform: translate(-7.7%, -11.2%) scale(0.975); }
.sc-flip-doodle img[src*="knihovna"] { transform: translate(-8.8%, -3.8%) scale(0.921); }
.sc-flip-doodle img[src*="konzultace"] { transform: translate(-3.8%, -12.7%) scale(0.966); }
.sc-flip-doodle img[src*="language"] { transform: translate(-13.8%, -13.3%) scale(1.065); }
.sc-flip-doodle img[src*="lide"] { transform: translate(-10.2%, -4.1%) scale(0.940); }
.sc-flip-doodle img[src*="/mic"] { transform: translate(-36.0%, -3.8%) scale(1.288); }
.sc-flip-doodle img[src*="obleceni"] { transform: translate(-17.2%, -4.4%) scale(1.047); }
.sc-flip-doodle img[src*="palette"] { transform: translate(-9.9%, -4.1%) scale(0.934); }
.sc-flip-doodle img[src*="raketa"] { transform: translate(-14.2%, -5.9%) scale(1.004); }
.sc-flip-doodle img[src*="search"] { transform: translate(-18.9%, -14.2%) scale(1.137); }
.sc-flip-doodle img[src*="settings"] { transform: translate(-34.5%, -12.4%) scale(1.326); }
.sc-flip-doodle img[src*="stravovani"] { transform: translate(-36.4%, -3.8%) scale(1.295); }
.sc-flip-doodle img[src*="stupen-jh"] { transform: translate(-19.7%, -11.3%) scale(1.110); }
.sc-flip-doodle img[src*="stupen-ms"] { transform: translate(-24.7%, -24.7%) scale(1.317); }
.sc-flip-doodle img[src*="stupen-zs"] { transform: translate(-7.7%, -11.2%) scale(0.975); }
/* Když po vlně následuje scroll příběh s fotkou přes celou výšku, fotka má jít až k oblouku (Lukáš 22. 9.):
   vlna se nemaluje, příběh se posune o její výšku nahoru a jeho horní hrana se ořízne do tvaru vlny.
   Pás předělu zůstává vidět (jen bez obrázku vlny), aby nad obloukem byla barva předchozí sekce, ne bílá stránka (30. 10.). */
.predel-pas:has(+ .pribeh-scroll) img { visibility: hidden; }
.predel-pas + .pribeh-scroll {
  --vlna-v: clamp(48px, 8.55vw, 123px);
  margin-top: calc(-1 * var(--vlna-v));
  -webkit-mask-image: url("https://cdn-files.app.solidpixels.com/s/fat_af242303d996468d86ce21f6a33d19b6/vlna.svg"), linear-gradient(#000, #000);
          mask-image: url("https://cdn-files.app.solidpixels.com/s/fat_af242303d996468d86ce21f6a33d19b6/vlna.svg"), linear-gradient(#000, #000);
  -webkit-mask-size: 100% var(--vlna-v), 100% calc(100% - var(--vlna-v) + 1px);
          mask-size: 100% var(--vlna-v), 100% calc(100% - var(--vlna-v) + 1px);
  -webkit-mask-position: 0 0, 0 calc(var(--vlna-v) - 1px);
          mask-position: 0 0, 0 calc(var(--vlna-v) - 1px);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* vlna pod scroll příběhem leží přes jeho spodek (na lokále je uvnitř sekce), nad ní je vidět fotka */
.pribeh-scroll + .predel-pas { margin-top: calc(-1 * clamp(48px, 8.55vw, 123px)) !important; position: relative; z-index: 30; background: transparent !important; }
/* 29. 10. 2026 (Lukáš): text v úvodu sedí na všech podstránkách stejně jako na Proč k nám –
   svisle na středu celého okna (výškový tablet: dole). Dřívější odstup „vlna + 100 px“ pro úvody
   bez obsahu pod sebou byl zrušen, text tím vyskočil výš než na Proč k nám. Blok záměrně bez pravidel. */