/* ============================================================
   Teď už víte — slovník pojmů

   Stránka je slovník, tak si bere jeho typografické zvyklosti:
   - hero = titulní strana: nadpis visí vlevo jako heslo, podnadpis a úvod
     začínají pod slovem „už“ (odsazení v em nadpisu, sedí na každé šířce);
   - nadpisy bez teček (samostatný nadpis tečku nemá); oranžové je jen
     slovo „víte“ v nadpisu, stejně jako „Jičína“ na O nás;
   - aktivní pojem = tmavý a tučný (ukázka v heru, rejstřík), ostatní tlumené;
   - heslo má pevnou stavbu: název, rozvedení zkratky / jinak také,
     jedna věta odpovědi, Proč na tom záleží, Jak to funguje v praxi,
     Souvisí s.
   Stránka má dvě osy: visací (levá hrana kontejneru = logo; nadpis hera
   a rejstřík) a textovou pod slovem „už“ (podnadpis, úvod i všechna hesla).
   Kontejner = kontejner hlavičky (levá hrana textu lícuje s logem).
   Velikosti hesel přebírají škálu O nás (88 → 120 / 30 → 40 / 20 → 24 px).
   --k je DÉLKA (0 px na 1440, 1 px na 2560), píše se „32 * var(--k)“.
   ============================================================ */
.tuv{--k:calc((100vw - 1440px) / 1120);
  --t-h1:clamp(60px,calc(138px + 46 * var(--k)),184px);
  --t-sub:clamp(26px,calc(50px + 14 * var(--k)),64px);
  --t-intro:clamp(19px,calc(26px + 6 * var(--k)),32px);
  --t-abbr:clamp(44px,calc(86px + 30 * var(--k)),116px);
  --t-spec:clamp(18px,calc(22px + 4 * var(--k)),26px);
  --t-term:clamp(44px,calc(88px + 32 * var(--k)),120px);
  --t-lead:clamp(21px,calc(30px + 10 * var(--k)),40px);
  --t-text:clamp(18px,calc(20px + 4 * var(--k)),24px);
  --t-label:clamp(16px,calc(17px + 3 * var(--k)),20px);
  --t-meta:clamp(15px,calc(17px + 3 * var(--k)),20px);
  --t-index:clamp(20px,calc(22px + 6 * var(--k)),28px);
  --gap:clamp(24px,calc(32px + 16 * var(--k)),48px);
  /* levá hrana slova „už“ v em nadpisu (Plus Jakarta Sans 800, prostrkání
     −0,062 em, nadpis posunutý o −0,045 em); změřeno v prohlížeči */
  --uz:calc(var(--t-h1) * 1.87);
  --ink-2:#2F3664;
  --spec-off:#C9C2F0;
  --muted:#6E7497;
  --text:#474D78;
  color:var(--ink)}
html:has(.tuv) body{background:var(--page)}
.tuv .wrap{max-width:clamp(1280px,calc(1280px + 492 * var(--k)),1772px)}
.tuv a:focus-visible{outline:2px solid var(--orange);outline-offset:4px;border-radius:2px}
.tuv-acc{color:var(--orange)}

/* ------------------------------------------------------------ hero */
/* Hero je navy jako úvod webu (14. 10. 2026): stejný přechod jako
   krobosoft-3d/hero-holub/sablona/hero.css. Plocha začíná nahoře na stránce
   pod průhlednou hlavičkou (záporný margin = výška hlavičky i s 1px spodní
   hranou), obsah se o totéž posune dolů. Dole zůstává měkká hrana do světlé
   plochy slovníku. */
.tuv-hero{--soft-h:clamp(28px,calc(40px + 16 * var(--k)),56px);--hdr:calc(var(--hdr-h) + 1px);position:relative;
  margin-top:calc(-1 * var(--hdr));color:#fff;
  background:radial-gradient(120% 100% at 15% 10%,#3B4785 0%,#303B70 45%,#1E2659 100%);
  padding:calc(var(--hdr) + clamp(64px,calc(88px + 40 * var(--k)),128px)) 0 calc(var(--soft-h) + clamp(80px,calc(112px + 40 * var(--k)),152px))}
.tuv-hero-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end}
.tuv-hero-copy{grid-column:1 / span 9;grid-row:1;min-width:0}
.tuv-hero h1{font-size:var(--t-h1);line-height:.94;letter-spacing:-.062em;margin-left:-.045em;white-space:nowrap}
.tuv-sub{margin:calc(var(--t-h1) * .2) 0 0 var(--uz);font-size:var(--t-sub);font-weight:700;line-height:1.06;letter-spacing:-.045em;color:var(--ink-2);text-wrap:balance}
.tuv-intro{margin:clamp(28px,calc(40px + 16 * var(--k)),56px) 0 0 var(--uz);max-width:22.5em;font-size:var(--t-intro);line-height:1.45;letter-spacing:-.012em;color:var(--ink-2)}
.tuv-intro p{text-wrap:pretty}
.tuv-intro p+p{margin-top:.55em}
/* barvy textu na navy: jako úvod webu (nadpis bílý, podnadpis levandulový
   jako měnící se slovo, úvod jako podtext hera); „víte“ zůstává oranžové */
.tuv-hero h1{color:#fff}
.tuv-hero .tuv-sub{color:#C3BBF2}
.tuv-hero .tuv-intro{color:#D9DBF0}

/* Hlavička nad navy herem: světlá na tmavém, stejně jako na úvodu webu
   (style.css, blok hero). Třídu .past-hero přidá ted-uz-vis.js, jakmile hero
   odroluje; pak platí běžná světlá hlavička s modrým logem. */
html:has(.tuv-hero) header:not(.past-hero)::before{background:rgba(36,45,100,.86)}
html:has(.tuv-hero) header:not(.past-hero) .brand .brand-logo{filter:brightness(0) saturate(100%) invert(100%) sepia(14%) saturate(2418%) hue-rotate(192deg) brightness(1000%) contrast(100%)}
html:has(.tuv-hero) header:not(.past-hero) .nav ul a{color:#D9DBF0}
html:has(.tuv-hero) header:not(.past-hero) .nav ul a:hover,
html:has(.tuv-hero) header:not(.past-hero) .nav ul a.on{color:#fff}
html:has(.tuv-hero) header .brand .brand-logo{transition:filter .25s}

/* živá ukázka: zkratky z úvodu, aktivní dostane tečku a svůj význam */
.tuv-spec{grid-column:10 / -1;grid-row:1;align-self:end;min-width:0}
.tuv-spec-list{list-style:none;margin:0;padding:0}
.tuv-spec-list a{display:inline-flex;font-size:var(--t-abbr);font-weight:800;line-height:1;letter-spacing:-.05em;color:var(--spec-off);text-decoration:none;margin-left:-.04em}
.tuv-spec-list .is-active a{color:var(--ink)}
.tuv-spec-def{margin-top:clamp(20px,calc(26px + 8 * var(--k)),34px);max-width:15em;font-size:var(--t-spec);font-weight:700;line-height:1.35;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.tuv-more{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(14px,calc(18px + 6 * var(--k)),24px);padding-bottom:5px;border-bottom:2px solid currentColor;
  font-size:var(--t-label);font-weight:700;color:var(--ink);text-decoration:none}
.tuv-more svg{flex:none;width:1em;height:1em}

/* Soft Cut do světlé plochy slovníku (stejná hrana jako na O nás) */
.tuv-soft{position:absolute;left:0;bottom:-1px;width:100%;height:calc(var(--soft-h) + 1px);display:block;pointer-events:none}
.tuv-soft path{fill:var(--page)}

/* ------------------------------------------------------------ slovník */
.tuv-dict{background:var(--page);padding:clamp(40px,calc(56px + 24 * var(--k)),80px) 0 clamp(96px,calc(128px + 48 * var(--k)),176px)}
.tuv-dict-in{display:grid;grid-template-columns:var(--uz) minmax(0,1fr);align-items:start}

/* rejstřík: přilepený vlevo, aktivní pojem tmavý, tučný a s tečkou */
.tuv-index{grid-column:1;position:sticky;top:calc(var(--hdr-h) + 48px);padding-right:var(--gap);min-width:0}
.tuv-index-title{font-size:var(--t-label);font-weight:700;color:var(--muted);letter-spacing:-.005em}
.tuv-index ul{list-style:none;margin:clamp(12px,calc(14px + 6 * var(--k)),20px) 0 0;padding:0}
.tuv-index a{display:inline-block;padding:calc(var(--t-index) * .22) 0;font-size:var(--t-index);font-weight:600;line-height:1.2;letter-spacing:-.025em;color:var(--muted);text-decoration:none}
.tuv-index a:hover{color:var(--ink)}
.tuv-index .is-active a{color:var(--ink);font-weight:800}

/* hesla */
.tuv-entries{grid-column:2;min-width:0}
.tuv-entry{padding:clamp(72px,calc(104px + 48 * var(--k)),152px) 0;border-top:1px solid var(--line);scroll-margin-top:calc(var(--hdr-h) + 24px)}
.tuv-entry:first-child{padding-top:0;border-top:0}
.tuv-entry h2{font-size:var(--t-term);line-height:1;letter-spacing:-.056em;margin-left:-.04em}
.tuv-meta{margin-top:clamp(12px,calc(16px + 6 * var(--k)),22px);font-size:var(--t-meta);line-height:1.5;color:var(--muted)}
.tuv-lead{margin-top:clamp(24px,calc(32px + 12 * var(--k)),44px);max-width:24em;font-size:var(--t-lead);font-weight:700;line-height:1.28;letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.tuv-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap);row-gap:32px;margin-top:clamp(40px,calc(52px + 20 * var(--k)),72px)}
.tuv-pair > div{min-width:0}
.tuv-pair h3{font-size:var(--t-label);font-weight:800;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.tuv-pair p{margin-top:.55em;font-size:var(--t-text);line-height:1.6;color:var(--text);text-wrap:pretty}
.tuv-rel{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 24px;margin-top:clamp(36px,calc(44px + 16 * var(--k)),60px);font-size:var(--t-meta)}
.tuv-rel span{color:var(--muted)}
.tuv-rel a{font-weight:700;color:var(--ink);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--ink) 25%,transparent);text-decoration-thickness:2px;text-underline-offset:5px}
.tuv-rel a:hover{text-decoration-color:var(--orange)}

.tuv-end{padding-top:clamp(72px,calc(104px + 48 * var(--k)),152px);border-top:1px solid var(--line)}
.tuv-end-q{font-size:var(--t-lead);font-weight:800;line-height:1.2;letter-spacing:-.03em;color:var(--ink)}
.tuv-end-t{margin-top:14px;max-width:34em;font-size:var(--t-text);line-height:1.6;color:var(--text)}

.tuv-float{display:none}

/* ------------------------------------------------------------ menší desktop */
@media (max-width:1279px){
  .tuv-hero-copy{grid-column:1 / span 8}   /* úvod končí o sloupec dřív, ať nedýchá na ukázku */
  .tuv-pair{grid-template-columns:minmax(0,1fr);max-width:40em}
}
/* nadpis a ukázka se už nevejdou vedle sebe → ukázka pod úvod, zkratky v řadě
   (nadpis má 4,49 em; vedle sebe to drží do 960 px) */
@media (max-width:959px){
  .tuv-hero-copy{grid-column:1 / -1}
  .tuv-spec{grid-column:1 / -1;grid-row:2;margin:clamp(48px,7vw,72px) 0 0 var(--uz)}
  .tuv-spec-list{display:flex;flex-wrap:wrap;gap:0 .32em;font-size:var(--t-abbr)}
  .tuv-spec-list a{font-size:var(--t-abbr)}
}
/* tablet: rejstřík nad hesly, palcem dosažitelné tlačítko Pojmy */
@media (max-width:1023px){
  .tuv-dict-in{grid-template-columns:minmax(0,1fr);padding-left:calc(36px + var(--uz))}
  .tuv-index,.tuv-entries{grid-column:1}
  .tuv-index{position:static;padding-right:0;margin-bottom:clamp(56px,9vw,80px)}
  .tuv-index ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap);border-top:1px solid var(--line)}
  .tuv-index li{border-bottom:1px solid var(--line)}
  .tuv-index a{display:block;padding:16px 0}
  .tuv-float{display:inline-flex;align-items:baseline;gap:10px;position:fixed;left:50%;transform:translateX(-50%);
    bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:50;padding:14px 24px;border-radius:999px;background:var(--navy);color:#fff;
    font-size:16px;font-weight:700;text-decoration:none;box-shadow:0 14px 34px -14px rgba(16,22,65,.55)}
  .tuv-float span{color:#C9CCE6;font-weight:600}
}
/* mobil: bez odsazení pod „už“ (bylo by úzké), menší škála */
@media (max-width:767px){
  .tuv{--t-h1:clamp(54px,15.6vw,80px);--t-sub:clamp(25px,6.6vw,34px);--t-intro:19px;--t-abbr:clamp(44px,12.4vw,64px);--t-spec:20px;
    --t-term:clamp(44px,11.8vw,60px);--t-lead:22px;--t-text:18px;--t-label:17px;--t-meta:15px;--t-index:22px;--gap:16px;--uz:0px}
  .tuv-hero{padding-top:calc(var(--hdr) + 48px)}
  .tuv-spec{margin-top:44px}
  .tuv-dict-in{padding-left:36px}
  .tuv-index ul{grid-template-columns:minmax(0,1fr)}
  .tuv-entry{padding:64px 0}
  .tuv-end{padding-top:64px}
}
@media (max-width:560px){.tuv-dict-in{padding-left:20px}}

/* Teď už víte — hero s brand assetem „Holub s brýlemi čte knihu“.
   Od 14. 10. 2026 kreslený jako holub v heru úvodu (v3, bez obrysů, se zrnem),
   generuje ho krobosoft-3d/tuv-holub/holub_ctenar.py; barvy a tvary jsou
   přímo v SVG, tady jen umístění. Pohyb: assets/js/tuv-holub.js.
   Místo: sloupce 9–12. */
.tuv--holub .tuv-hero-copy{grid-column:1 / span 8}
/* Kresba stojí na úrovni posledního řádku úvodu (align-self:end; zem je
   v kresbě 8 % nad jejím spodkem) a smí přesáhnout do pravého okraje
   stránky (holub je dlouhý, kniha vedle něj). */
.tuv-art--holub{grid-column:9 / -1;grid-row:1;align-self:end;min-width:0;
  margin:0 clamp(-120px,calc((1280px - 100vw) / 2),0px) 0 0}
.tuv-holub3{display:block;width:100%;height:auto}
/* holub: život (vloz.py) — rám pro malé SVG s víčky přesně nad okem;
   jeho polohu v % rámu zapisuje generátor, posun s hlavou tuv-holub.js */
.tuv-art--holub{position:relative}
.tuv-oko{position:absolute;display:block;max-width:none;overflow:hidden;pointer-events:none;will-change:transform}
/* /holub: život */

@media (max-width:1099px){
  .tuv--holub .tuv-hero-copy{grid-column:1 / -1}
  .tuv-art--holub{grid-column:1 / -1;grid-row:2;margin:clamp(40px,6vw,64px) 0 0 var(--uz);max-width:560px}
}
@media (max-width:767px){ .tuv-art--holub{max-width:440px;margin-top:36px} }

/* ------------------------------------------------------------ navigace (assets/js/ted-uz-vis.js) */
html:has(.tuv){scroll-behavior:smooth}
.tuv-index a{transition:color .2s}
/* tlačítko Pojmy: s JS jen když rejstřík odroluje z obrazovky (bez JS je vidět pořád) */
@media (max-width:1023px){
  /* viditelnost se zapíná hned (jde na něj fokus) a vypíná až po doznění */
  .tuv-js .tuv-float{transition:opacity .25s,transform .25s,visibility 0s}
  .tuv-js .tuv-float:not(.is-on){opacity:0;visibility:hidden;transform:translate(-50%,12px);transition:opacity .25s,transform .25s,visibility 0s .25s}
}
/* panel s pojmy zdola (tablet, mobil) */
html.tuv-sheet-open{overflow:hidden}
.tuv-sheet{position:fixed;inset:0;z-index:75}
.tuv-sheet[hidden]{display:none}
.tuv-sheet-back{position:absolute;inset:0;background:rgba(16,22,65,.42);opacity:0;transition:opacity .3s}
.tuv-sheet-panel{position:absolute;left:0;right:0;bottom:0;max-height:min(86vh,760px);overflow:auto;overscroll-behavior:contain;
  padding:10px 24px calc(24px + env(safe-area-inset-bottom,0px));border-radius:24px 24px 0 0;background:var(--page);
  box-shadow:0 -18px 48px -24px rgba(16,22,65,.5);transform:translateY(100%);transition:transform .34s cubic-bezier(.2,.8,.2,1)}
.tuv-sheet.is-open .tuv-sheet-back{opacity:1}
.tuv-sheet.is-open .tuv-sheet-panel{transform:none}
.tuv-sheet-grip{width:44px;height:5px;margin:0 auto 6px;border-radius:3px;background:var(--line)}
.tuv-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:4px 0 12px}
.tuv-sheet-title{font-size:var(--t-label);font-weight:700;color:var(--muted)}
.tuv-sheet-x{flex:none;display:grid;place-items:center;width:48px;height:48px;margin-right:-8px;border:0;border-radius:50%;background:var(--lav);color:var(--ink);cursor:pointer}
.tuv-sheet-x:focus-visible,.tuv-sheet a:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.tuv-sheet ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.tuv-sheet li{border-bottom:1px solid var(--line)}
.tuv-sheet a{display:block;padding:17px 0;font-size:var(--t-index);font-weight:600;line-height:1.2;letter-spacing:-.025em;color:var(--muted);text-decoration:none}
.tuv-sheet .is-active a{color:var(--ink);font-weight:800}
.tuv-entry:focus{outline:none}                      /* fokus po výběru z panelu (tabindex −1) */
@media (prefers-reduced-motion:reduce){
  html:has(.tuv){scroll-behavior:auto}
  .tuv-index a,.tuv-js .tuv-float,.tuv-sheet-back,.tuv-sheet-panel{transition:none}
}