@import url("ico.css.php");

/* Jednotná výška barevného proužku nahoře - sdílené vizuální jazyk prvků
   .col.balik, .prispevek-karta, .typs-info.balik, .obsah-kurzu-banner,
   .digi-prispevek, .rekval-prispevek, .sekce-karta, .box-row .box a
   .row.table.cenik-box (barvu proužku dodává samostatně .{barva}.balik/
   .box-sedy, viz ico_css.php - tahle proměnná řeší jen tloušťku, ať je
   všude stejná a nerozjede se to znovu). Původně se tu míchalo 3px a 4px
   podle prvku - sjednoceno na 4px. */
:root {
  --stripe-height: 4px;
}

/* === Colors === */
/* Light gray - negative button text, highlights to white */
.light, a.ico, a.icm, a.icr, .row p, .row p a {
  color: rgb(240,240,240);
}

.table td a, .table table tr td a:active, .table table tbody tr .gobutton a:active, .table table tbody tr.last.prefoot .gobutton a:active {
  border-bottom: 1px solid #ddd;
}

/* Medium grayblue - highlight for Light grayblue; highlights to Dark grayblue  */
.medium,  #home p a span, #left2 p span, #left2 p a, #left2 p a:visited, #left2 input, #kontakt legend, #kontakt p {
  color: rgb(142,161,184);
}
.leftbutton input, #kontakt fieldset {
  border: 1px solid #ddd;
}

.hovertxt .p .a {
  border-bottom: 1px solid #ddd;
}
/* Linka pod nadpisy uvnitř .hovertxt (např. "Osnova školení", "Předchozí
   znalosti a návazná školení") - tmavší varianta základní neutrální barvy
   (color-mix 65 % černá) místo neutrálního #ddd, stejný recept jako pruh/
   ikony u .format-sedy - zadání 26. 8. 2026. Sdílené pravidlo, platí
   globálně pro všechny nadpisy téhle úrovně (h3 uvnitř .hovertxt). */
.hovertxt h3 a, .hovertxt h3 .a {
  border-bottom: 1px solid color-mix(in srgb, rgb(142,161,184) 65%, black);
}

.popis_linka p, .popis_linka a, .collink a, .rowlink, .table .hovera .rowlink:active,
  .table th a, .table tr:hover td a, .table tr.last td a, .table table tr.last td a:active, .table table tbody tr.last .gobutton a:active,
  .hovertxt .p a, .txt .hovertxt.href .p a:active, .txt .hovertxt.href:active .p a {
  border-bottom: 1px solid #ddd;
}
.hovertxt .p .go a, .table tr.footer td a, .table tr.footer:hover td a,
  .table table tr.footer td a:active, .table table tbody tr.footer .gobutton a:active {
  border-bottom: none;
}

#home p a span {
  border-top: 1px solid #ddd;
}

/* Dark grayblue - highlight for Medium grayblue (left menu, text underline; text in active choice) */
.dark, #home h1 a, #home .hoverhome:hover p a span, #kontakt fieldset:hover legend, #kontakt fieldset:hover p,
    #left2 p#search:hover span, #left2 p#search:hover input, #left2 p#search input:focus,
    #left2 p a:hover
     {
  color: rgb(100,120,140);
}
#left2 p#search:hover input, #left2 p#search input:focus, #kontakt fieldset:hover,
    #home .hoverhome:hover p a span,
   .table tbody tr.last:hover a, .table tbody tr.last:hover .gobutton a,
   .hovera:hover .rowlink {
  border-color: rgb(100,120,140);
}
/* Podtržení odkazů v Osnově/Předchozích znalostech apod. při najetí myší -
   vyňato ze sdíleného pravidla výše a zesvětleno (byl příliš velký kontrast
   vůči klidovému stavu #ddd, viz border-bottom výše).
   h3 tu záměrně NENÍ (oprava 27. 8. 2026) - nadpisy (h3) mají teď klidový
   stav tmavší (color-mix, viz .hovertxt h3 a/.a výš), #999 by na hover byl
   naopak SVĚTLEJŠÍ než klidový stav, tedy opačný efekt než zvýraznění. */
.hovertxt.href:hover .p a {
  border-color: #999;
}

/* 70% gray rgb(77, 77, 77) #4D4D4D - Main text, highlights to black */
#left a, #left a:visited, #left2 a, #left2 a:visited, h1 a:active, .popis a,
  .table td, .table th, .table td a, table th a, table th a:hover,
  .hovera p.coltext a, .hovera p.collink a, .hovera:hover p.collink a, .hovera p.collink a:active,
  .hovera p.rowlink a, .hovertxt .p a, .hovertxt .p div.a, .txt .hovertxt.href .p a:active,
  .hovertxt p.lightgray a,
  .hovera h3 a, .choicei .hovera p a, .choicei .hovera:hover p a
  {
  color: rgb(77, 77, 77);
}

/* Black - main text highlight */
#left a:hover, #title, #home .hoverhome:hover h1 a, h1 a, .popis a:hover,
  .table tr:hover td a,
  .hovera:hover p.coltext a, .hovera p.collink a:hover, .hovera:hover p.rowlink a,
  .hovertxt.href:hover .p a,
  .choicei .hovera h3 a {
  color: black;
}


/* Bluegray - link titles */
.blue, a, #left .go a, #left .go a:visited, #left2 p#demand a, #left2 p#contact a,
  .hovera p.collink .headline, .table .headline, .table .gobuttoni a,
  .hovertxt h4 a, .hovertxt a.in, .txt .hovertxt h4 a:active, .href h3 a, .txt .href h3 a:active,
  .hovertxt .p .a p.sodkazy a {
  color: rgb(51,102,153);
}
.popis_linka a:hover, .collink a:hover {
  border-bottom-color: rgb(51,102,153);
}
.popis_linka a:active, .collink a:active  {
  border-bottom-color: #ddd;
  background-color: transparent;
}

/* Dark Bluegray - link titles highlight */
.darkblue, a:hover, #left .go a:hover, #left2 p#demand a:hover, #left2 p#contact a:hover,
  .hovera p.collink .headline:hover, .table .headline:hover, .table tr:hover .gobuttoni a,
  .hovertxt:hover h4 a, .hovertxt.href:hover h3 a, .hovertxt a.in:hover,
  .hovertxt .p .a p.sodkazy a:hover
{
  color: rgb(15, 69, 122);
}

/* White - light gray hightlight */
#header, #header a:hover, #header #slogan a,
  #left .act a, .hovera h2 a, .hovera h3 a,
  .table h3 a, .table h2 a,
  .table tbody tr:hover .gobutton a,
  .hovera:hover .gobutton a,
  .table .gobutton a,
  a.ico:hover, a.icm:hover, .hovera:hover p a, .row p a:hover, .row,
  .hovertxt .go a, .hovertxt .lightgray:hover a {
  color: white;
}
.row tbody tr:hover .gobutton a, .row tbody tr.last.prefoot:hover .gobutton a {
  border-bottom-color: white;
}

/* :active styles - must be repeated after :hover to take priority */
.light:active, .hovera h2 a:active, .hovera h3 a:active, .hovera p a:active,
  a.ico span:active, a.icm span:active,
  .table h3 a:active {
  color: rgb(205,210,220);
}
/* Main text :active */
.coltext a span:active, .collink a span:active, .hovera p.rowlink a:active {
  color: #4F4F4F;
}
.choicei .hovera h3 a:active, .choicei .hovera p a:active {
  color: rgb(100,120,140);
}

#left2 p a:active {
  color: rgb(142,161,184);
}
#left2 p#demand a:active, #left2 p#contact a:active, .hovera p.collink .headline:active,
    .hovera p.collink a span.headline:active, .table tr .gobuttoni a:active,
    .hovertxt a.in:active {
  color: rgb(51,102,153);
}
#header a, #header a:active, #header #slogan a:active, #header input {
  color: #BBB;
}

/* Disable link effects */
#logo:active, h1 a:active, #header a:active,
  .hovera h2 a:active, .hovera h3 a:active, .hovera p a:active {
  background-color: transparent;
}

a:focus {
  outline: none;
}

/* Generic tags */
html, body, ul, li, p, hr {
  margin: 0;
  padding: 0;
  border: none;
}
.cad #content .zalozka li {
  margin-left: 15px;
}
.cad #content .zalozka h3 {
  margin-top: 12px;
  margin-bottom: 3px;
}

h1, h2, h3, .obsah_text .col h3 {
  font-family: "source-sans-pro-n3", "source-sans-pro", sans-serif;
  font-weight: 200;
  margin: 0;
}
body, input, select, textarea, .obsah_vpravo, h3.full {
  font-family: "Calibri", "source-sans-pro-n3", "source-sans-pro", sans-serif;
}

#home h1 {
  font-size: 30px;
  line-height: 40px;
}
h1, h2 {
  font-size: 24px;
  line-height: 30px;
}
h3, h3 .a {
  font-size: 19px;
  line-height: 21px;
}
h3.full {
  font-size: 18px;
  line-height: 22px;
}
h4 {
  margin: 0;
}

p, div.p, h4, li, tr, td, span, input, select, textarea, .popis, .obsah_vpravo, .obsah_text, .res {
  font-size: 15px;
  line-height: 18px;
}
a {
  text-decoration: none;
}
span.s {
  text-decoration: none;
  display: inline;
  background: url('img/bg/strike.png') repeat-x;
  background-position: left center;
}
img { border: none; }

.res {
  margin-bottom: 18px;
}
.res.sveh {
  color: black;
}

.cleaner {
	background: none;
	border: none;
	clear: both;
	display: block;
	float: none;
	font-size: 0;
  line-height: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	visibility: visible;
	height: 0;
}

#top {
  min-height: 75px;
}
#top.home {
  min-height: 93px;
}
#titlediv {
  height: 45px;
}
#upt {
  display: none;
  float: left;
  margin-top: 7px;
}
#upta {
  display: block;
  color: white;
  height: 25px;
}
#upta span.uptbg {
  float: right;
}
#upta span.uptbg, #upta span span {
  display: block;
  width: 35px;
  height: 25px;
}
#title, #home p {
  clear: right;
  float: right;
  width: 804px;
  margin-right: 1px;
  max-width: 100%;
  overflow: hidden;
}
#title {
  padding-top: 5px;
  padding-bottom: 10px;
}
#title a {
  display: block;
}

#home {
  min-height: 297px;
}
#home #title {
  width: 949px;
}
#home p {
  width: 948px;
}
#home #title {
  padding-top: 0px;
  padding-bottom: 0px;
}
#home #title a {
  padding-top: 37px;
  padding-bottom: 7px;
}
#home p a, #home p a span {
  display: block;
}
#home p a {
  height: 173px;
}
#home p a span {
  padding-top: 9px;
  padding-right: 20px;
  padding-left: 1px;
  padding-bottom: 4px;
  max-width: 306px;
  margin-right: 5px;
  line-height: 19px;
}


.hoverhome {
  float: right;
  max-width: 100%;
  min-height: 283px;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: 20% 0%; /* výchozí šířka 945px + přidat vlevo 40px + přidat vpravo 165px = celkem 1150px šířka, výška max. 283px */
}
.custom .hoverhome {
  background-image: url('img/home/custom.png');
}

.butterfly #main {
  background-image: url('img/home/butterfly.png');
  background-position: 66% 1px;
  background-repeat: no-repeat;
}
.butterfly .hoverhome {
  font-family: "minion-pro",serif;
}
@media screen and (min-width: 448px) { /* při dostatečné šířce využít plnou výšku pro obrázek */
  .butterfly #top.home {
    min-height: 82px; /* 93px; */
  }
  .butterfly .hoverhome  {
    min-height: 308px;
  }
}
.butterfly #home #title {
  font-size: 26px;
  line-height: 40px;
}
.butterfly #home #title, .butterfly #home  p {
  width: 800px;
}
.butterfly #home #title a {
  padding-top: 0;
  min-height: 94px;
}
.butterfly #home p a {
  height: auto;
  padding-top: 30px;
  min-height: 119px;
}
.butterfly #home p a span {
  font-size: 36px;
  line-height: 48px;
  max-width: 260px;
  padding-right: 0px;
  padding-bottom: 8px;
  border-top: none;
  border-bottom: 1px solid rgb(100,120,140);
}
.butterfly #home p a span, .butterfly #home #title a {
  color: #333;
  text-shadow: 0 0 1px white, 0 0 2px white, 0 0 10px white;
}
.butterfly #home .hoverhome:hover p a span, .butterfly #home .hoverhome:hover #title a {
  color: black;
}


.vikend {
  color: rgb(237,128,128);
}
.odpoledne {
  color: rgb(220,153,62);
}

.black {
  min-width: 273px;
  min-height: 60px;
  background: black url('img/bg/body.png') repeat-x;
  color: white;
}
.white {
  min-width: 273px;
  background: white;
  color: #4D4D4D;
}
.center {
  max-width: 1001px;
  padding: 0px 0 0 5px;
  margin: 0 auto;
}
.black .center {
  padding-top: 10px;
}

#logo {
  display: block;
  width: 500px;
  max-width: 53%;
  height: 34px;
  float: left;
  padding-top: 7px;  
}
#logoimg {
  display: block;
  width: 195px;
  height: 28px;
  background: url('img/abecedapc.png') no-repeat;
  background-image: url('img/abecedapc.svg'), none;
}

#header {
  float: right;
  min-width: 162px;
  text-align: right;
  padding-right: 5px;
  padding-bottom: 2px;
}
#header p, #auxlinks {
  line-height: 20px;
}
#auxlinks form {
  display: inline;
}
#auxlinks input {
  border: none;
  width: 90px;
  padding: 0px 4px;
  border-radius: 2px;
  background-color: rgb(25,25,25);
  background: rgba(255,255,255,0.1);
}
#auxlinks {
  font-size: 15px;
}

#auxlinks input:focus, #auxlinks input:hover {
  background-color: rgb(51,51,51);
  background: rgba(255,255,255,0.2);
  color: white;
}

#content {
  clear: right;
  float: right;
  width: auto;
  min-width: 80.3%;
  max-width: 804px;
  min-height: 185px;
}
#content.typs {
  min-height: 450px;
}
#content.ofi {
  min-height: 275px;
}

#content.klient {
  float: left;
  max-width: inherit;
  margin-bottom: 10px;
}
#content.klient h2 {
  margin: 18px 0 12px 0;
}
#content.klient h3 {
  margin: 18px 0 8px 0;
}

/* Levé menu */
#leftspace {
  float: left;
  width: 1px;
  height: 180px;
}
#leftspace.x3 {
  height: 270px;
}
#leftspace.x4 {
  height: 360px;
}
#left, #left2 {
  float: left;
  width: 182px;
  margin-right: 15px;
  margin-bottom: 5px;
}
#left {
  margin-left: -1px;
}

/* Celý web dosud neměl žádný "mobilní" režim - #content má min-width: 80.3 %
   POČÍTANÝCH Z CELÉ ŠÍŘKY STRÁNKY (ne ze zbytku vedle menu), zatímco #left má
   pevných 182px + 15px mezera = 197px. Když je stránka užší než cca 1000px
   (197px + 80,3 % z ní přesáhne celkovou šířku), obsah se přestane vejít vedle
   menu a začne přetékat/uřezávat se - to byl důvod, proč nešlo stránku zúžit
   vůbec, ani na počítači. Od tohoto zlomu proto menu naskládáme nad obsah
   (float:none, plná šířka) místo vedle sebe. Zlom 1020px má malou rezervu nad
   matematickým zlomem (~1000px), ať se přechod spustí dřív, než k přetečení
   reálně dojde. */
@media (max-width: 1020px) {
  #leftspace {
    display: none;
  }
  #left, #left2 {
    float: none;
    width: auto;
    margin: 0 0 15px 0;
  }
  #content {
    float: none;
    clear: both;
    width: auto;
    min-width: 0;
    max-width: 100%;
  }
}

#nav {
  list-style-type: none;
}
#brc span {
  display: block;
}
#brc span.navsep {
  display: none;
}
#nav li.mez, #brc span.mez {
  margin-top: 15px;
}
/* Zvýraznění plnou barvou, beze "přechodu" (light.png/gray.png byly
   jemné šedé přechodové textury) - zadání 27. 8. 2026 ("všechny přechody
   z webu odstraňujeme, předěláváme na plné plochy"). */
#nav li:hover, #brc span:hover, .table tbody tr:hover td.left, .table tbody tr:hover td.gobuttoni,
    a.upb:hover, div#upt:hover, div#upt:hover .uptbg, p.lightgray {
  background: #DDD;
}
#nav li.act, #brc span.act, a.upb span.upbg, p.lightgray:hover {
  background: #666;
}

#upt a #uptxt {
  float: left;
}
#nav a, #brc a, #upt a #uptxt  {
  display: block;
  padding: 4px 2px 1px 10px;
  line-height: 20px;
}

#nav a, #brc a, #upt span span {
  background: transparent url('img/bg/upw.png') no-repeat right;
}
#nav .act a, #brc .act a {
  background: transparent url('img/bg/up.png') no-repeat right;
}
#nav .go a, #brc .go a {
  background: transparent url('img/bg/go2.png') no-repeat right -55px;
}

a.upb span span {
  background: transparent url('img/bg/upb.png') no-repeat left center;
}
a.upb:hover span span {
  background-position: right center;
}
a.upb:active span span {
  background-position: left center;
}

#left2 p a, #left2 p span {
  display: inline-block;
  width: 129px;
  padding: 0px 1px 0px 52px;
  line-height: 19px;
}
#left2 p span#search_label {
  padding-top: 5px;
  padding-bottom: 2px;
}

.leftbutton {
  background-repeat: no-repeat;
  background-position: left 20px;
  padding-top: 11px;
  height: 74px;
  margin-bottom: 5px;
}
#left2 .href {
  padding-top: 0px;
  height: 85px;
}
#left2 .href a {
  display: block;
  padding-top: 11px;
  height: 74px;
}

.leftbutton input {
  width: 120px;
  padding: 1px 2px 1px 3px;
  height: 20px;
  line-height: 20px;
}

.leftbutton:hover {
  background-position: left -65px;
}
.leftbutton:active {
  background-position: left 20px;
}
.leftbutton a:active {
  background-color: inherit;
}

/* Pásy */
/* 20.7.2026 - řádek jako samostatný blok (BFC), aby plovoucí dlaždice při zúžení
   čistě přetékaly na další řádky a řádky se navzájem neprolévaly */
.row {
  display: flow-root;
}
.col {
  float: left;
  
  height: 88px; /* 20.7.2026 puvodne 85, +5 kvuli narocnosti/delce, pote -2 na prani */
  width: 263px;
  margin-bottom: 5px;
}
.choice {
  height: 83px;
  width: 261px;
  padding: 1px;
}
.choicei {
  height: 83px;
  width: 261px;
  border: 1px solid #ddd;
}
.choicei a {
  cursor: default;
}
.tri, .tri2 {
  margin-bottom: 5px;
}
.tri {
  min-height: 265px;
}
.tri2 {
  /* 229px puvodne (odpovidalo p.colmore a min-height:25px). Zvyseno na 238px
     26. 8. 2026, kdyz se radek "Vice informaci/o..." zvysil na 34px (viz
     .col.format-sedy p.colmore a nize) - .col ma pevnou vysku (tady min-height,
     ale bez overflow:hidden), takze vyssi obsah uvnitr (.hovera) presahoval
     pod spodni okraj barevneho pozadi dlazdice a sipka/patka pismene "y" pak
     trcely mimo (zadani uzivatelky: "sipka zasahuje i mimo radek"). */
  min-height: 242px;
}

/* Responzivita dlaždic "Otevřený kurz/Individuální/Firemní školení"
   (uživatelka 26. 8. 2026: "měly by se chovat obdobně jako dlaždice v
   hlavním rozcestníku"). .row/.col/.sep je starší sdílený float mechanismus
   (web_pas()/web_pole() ve web.php), použitý na webu i jinde (záložky,
   výpisy podkategorií) - proto se neupravuje globálně, jen scoped přes
   :has() na konkrétní kombinaci .col.tri2.format-sedy, což je jen tenhle
   případ. Technika :has() už na webu je (viz .balik-carousel výš). Zlomy
   900px/600px a gap 12px přesně podle .kat-pas/.kat-dlazdice (hlavní
   rozcestník), ať je chování mřížek na webu jednotné - 3/2/1 dlaždice
   na řádek podle šířky. */
.row:has(> .col.tri2.format-sedy) {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.row:has(> .col.tri2.format-sedy) > .sep {
  display: none;
}
.row > .col.tri2.format-sedy {
  float: none;
  width: auto;
  flex: 0 0 calc((100% - 24px) / 3);
  margin-bottom: 0;
}
@media (max-width: 900px) {
  .row > .col.tri2.format-sedy {
    flex-basis: calc((100% - 12px) / 2);
  }
}
@media (max-width: 600px) {
  .row > .col.tri2.format-sedy {
    flex-basis: 100%;
  }
}
.row .empty {
  height: 1px;
  margin-bottom: 4px;
  background: none;
}
.col h2 a, .col h3 a, .col p a {
  display: block;
  padding-left: 18px;
  padding-right: 9px; /* ori 10px, ie8 5px */
}
.col h2 a {
  padding-top: 8px;  
  padding-bottom: 2px;  
  line-height: 25px;
}
.col h3 a {
  padding-top: 13px;
  padding-bottom: 1px;
  min-height: 23px;
}
.col p a {
  line-height: 19px;
  padding-top: 0px;
  min-height: 48px;
}

p.coltext, p.collink {
  background: white;
}

/* Světlé pozadí obsahové části dlaždice (termíny/cena u otevřeného kurzu,
   popisný text u individuálního/firemního školení) - stejný odstín jako
   u štítků typu nabídky (.typs-stitek-radek), jen aplikovaný na plochu dlaždice. */
.col.orange p.coltext, .col.orange p.collink {
  background: #F8E7E4;
}
.col.blue p.coltext, .col.blue p.collink {
  background: #E1E4FB;
}
.col.grass p.coltext, .col.grass p.collink {
  background: #E6EEE1;
}
p.coltext span, p.collink span {
  display: block;
  line-height: 19px;
}
p.coltext span {
  margin-bottom: 19px;
}
p.coltext span.last {
  margin-bottom: 0;
}

p.coltext a {
  padding-top: 11px;
  min-height: 144px;
}
p.collink a {
  padding-top: 11px;
  min-height: 57px;
  padding-bottom: 8px;
}
p.collink a.last {
  padding-top: 10px;
  padding-bottom: 11px;
  border: none;
}

.tri2 p.coltext a {
  padding-top: 12px;
  min-height: 107px;
}
.tri2 p.collink a {
  padding-top: 12px;
  min-height: 38px;
  padding-bottom: 8px;
}
.tri2 p.collink a.last {
  padding-top: 10px;
  padding-bottom: 12px;
}



.col p.colmore a {
  min-height: 25px;
  line-height: 25px;
}

p.rowlink {
  min-height: 50px;
  min-width: 54%;
}
p.rowlink span {
  display: block;
}

/* Right arrow - p.go a má od 26. 8. 2026 vlastní plochý vzhled (viz níž),
   proto tu už není v tomhle sdíleném pravidle se starým obrázkovým sprite. */
a.go, .gobutton a, .gobuttoni a, h3.full a {
  background-image: url('img/bg/go2.png');
  background-position: right 5px;
  background-repeat: no-repeat;
}
tr:hover .gobuttoni a {
  background-image: url('img/bg/goblue-a.png');
}
tr:active .gobuttoni a {
  background-image: url('img/bg/go2.png');
}
a.go:hover, .hovera:hover a.go, tr:hover .gobutton a, h3.full a:hover {
  background-position: right -55px;
}
a.go:active, .hovera p a.go:active, .hovera:active a.go, tr:active .gobutton a, h3.full a:active {
  background-position: right 5px;
}
/* Tlačítko Objednat v tabulce termínů/ceníku - šipka v tmavé barvě místo
   starého obrázkového sprite (go2.png, navržený na barevné/hover pozadí,
   na světle šedomodrém pozadí tlačítka téměř nečitelný) - zadání
   27. 8. 2026. Stejná technika (maskovaná SVG přebarvená přes
   background-color) jako už používá p.go a::after výš v souboru, jen
   napevno tmavou barvou (#22262b, stejná jako text tlačítka) místo
   --kat-c, protože tlačítko tabulky nemá barvu oblasti. */
.table .gobutton a, .table .gobuttoni a,
.table tr:hover .gobutton a, .table tr:hover .gobuttoni a,
.table tr:active .gobutton a, .table tr:active .gobuttoni a {
  background-image: none;
}
.table .gobutton a, .table .gobuttoni a {
  position: relative;
  padding-right: 14px;
}
.table .gobutton a::after, .table .gobuttoni a::after {
  content: '';
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background-color: #22262b;
  -webkit-mask: url('img/bg/gowhite.svg') no-repeat center / contain;
  mask: url('img/bg/gowhite.svg') no-repeat center / contain;
}

/* Oddělovače */
.hide {
  display: none;
}
.sep {  
  display: block;
  float: left;
  width: 5px;
  height: 88px; /* 20.7.2026 shodně s .col */
  margin-bottom: 5px;
}
.sep span {
  display: block;
  width: 1px;
  height: 88px; /* 20.7.2026 shodně s .col */
  margin: 0 2px;
}
.col .sep {
  width: 1px;
}
.col .r {
  float: right;
}
.row .space {background: white;}

/* Pole */
/* Zvýraznění focusu vypnuto: a.ico:focus, a.icm:focus, .act a:focus */
.hovera:hover, .choice:hover, a.ico:hover,   a.icm:hover,  #nav .act a:hover, #brc .act a:hover, a.upb:hover span span,
  .table h3 a:hover, .table .hovera:hover h3 a, .table tbody tr:hover .gobutton a,
  .row .hovera:hover .gobutton a, p.go:hover a {
  background-color: transparent;
  background-color: rgba(255,255,255,0.08);
  zoom: 1;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#14FFFFFF', endColorstr='#14FFFFFF');
}
#nav a:active, #brc a:active, .table tbody tr td.left a:active {
  background-color: rgba(255,255,255,0.3);
}
#nav .act a:active, #brc .act a:active, a.upb:active span span {
  background-color: transparent;
}

.col div.more {
  width: 189px;
}
.col div.sicp h2 a, .col div.sicp h3 a, .col div.sicp p a {
  padding-left: 0;
}
.col div.sicr h2 a, .col div.sicr h3 a, .col div.sicr p a {
  padding-right: 0;
}

/* Ikony */
a.ico, a.icp, a.icm, a.icr {
  display: inline-block;
  height: 85px;
  outline: 0;
}
a.ico, a.icp {
  float: left;
}
a.icm, a.icr {
  float: right;
}

a.ico span, a.icp span, a.icm span, a.icr span {
  display: block;
  width: 87px;
  background-repeat: no-repeat;
  background-position: center 11px;
  text-align: center;
  padding-top: 62px;
  height: 23px;
}
a.icp span {
  background-position: center 20px;
}
a.icr span {
  background-position: center 9px;
}
a.icm span, a.icr span {
  width: 72px;
}

a.ico:hover span, a.icm:hover span {background-position: center -74px;}
.hovera:hover a.icp span { background-position: center -65px; }
.hovera:hover a.icr span { background-position: center 9px; } /* png hover -76px; */
.hovertxt.href:hover div.txtico { background-position: 0px -79px; }
.choicei .hovera a.icr span { background-position: center -161px; }

.hovera a.icp span:active { /* .hovera:active a.icp span, */
  background-position: center 20px;
}
a.ico span:active, a.icm span:active {
  background-position: center 11px;
}
.hovera a.icr span:active {
  background-position: center 9px;
}
.hovertxt.href:active div.txtico  {
  background-position: 0 6px;
}
.choicei .hovera:hover a.icr span:active {
  background-position: center 9px;
}

/* 20.7.2026 - Náročnost a délka kurzu pod zmenšenou ikonou v dlaždici školení */
.icocol {
  float: left;
  width: 87px;
  padding-top: 13px; /* zarovnání horního okraje ikony s horním okrajem nadpisu (.col h3 a) */
  box-sizing: border-box;
}
.icocol a.icp {
  float: none;
  display: block;
  height: auto;
}
.icocol a.icp span {
  width: 87px;
  height: 36px;
  padding-top: 0;
  background-position: center top;
  background-size: 34px auto;
}
.hovera:hover .icocol a.icp span,
.icocol a.icp span:active {
  background-position: center top; /* ikona v .icocol je bez hover posunu spritu */
}
.icocol .icoinfo {
  margin: 0;
  padding: 0;
  text-align: center;
  line-height: 1;
}
.icocol .icoinfo .stupen-wrap {
  display: block;
  font-size: 11px;
  line-height: 1.2;
  color: rgba(255,255,255,0.8);
  cursor: help;
  white-space: nowrap;
}
.icocol .icoinfo .stupen-wrap .lbl {
  font-size: 11px;
  margin-right: 2px;
}
.icocol .icoinfo .stupen {
  display: inline-flex;
  gap: 2px;
  justify-content: center;
  vertical-align: middle;
}
.icocol .icoinfo .stupen .t {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
}
.icocol .icoinfo .stupen .t.on {
  background: #fff;
}
.icocol .icoinfo .delka {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  line-height: 1.2;
  color: rgba(255,255,255,0.8);
  cursor: help;
}


/* 20.7.2026 - Malé ikonové dlaždice (třetina šířky) pro méně důležitá školení */
.col.mini {
  width: 84.33px; /* (263 - 2*5) / 3 = 84.33, aby 3 malé + 2 mezery = šířka normální dlaždice */
  height: 88px;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
}
.col.mini .hovera {
  display: block;
  height: 100%;
  text-align: center;
  padding: 13px 2px 0; /* shodně s .icocol (13px) ve velkých dlaždicích, aby ikony lícovaly */
  box-sizing: border-box;
}
.col.mini a.icp {
  float: none;
  display: block;
  height: auto;
  margin: 0;
  width: 100%;
}
.col.mini a.icp span {
  display: block;
  width: 100%;
  height: 30px;
  padding: 0;
  background-position: center top;
  background-size: 30px auto;
}
/* 20.7.2026 - malá dlaždice: ikona se při najetí myší neposouvá (potlačit hover posun spritu).
   !important kvůli přebití generovaných pravidel .hovera:hover a.icp span.ico-NAZEV z ico_css.php */
.hovera:hover .col.mini a.icp span,
.col.mini .hovera:hover a.icp span,
.col.mini a.icp span:active {
  background-position: center top !important;
}
.col.mini h3 {
  margin: 6px 0 0;       /* text posunutý níž od ikony (o 5px víc než předtím) */
  padding: 0 3px;
  float: none;
  width: auto;
  clear: none;
}
.col.mini h3 a {
  padding-left: 0;         /* přepis asymetrického 18px z obecného .col h3 a - způsobovalo posun textu vpravo */
  padding-right: 0;        /* přepis 9px z obecného .col h3 a */
  padding-top: 0;          /* přepis 13px z .col h3 a - zarovnání řeší margin na h3 výše */
  padding-bottom: 0;       /* přepis 1px z .col h3 a */
  min-height: 0;           /* přepis 23px z .col h3 a - zbytečné, výšku určuje obsah */
  font-size: 14px;
  line-height: 16px;
  text-align: center;      /* explicitně, pro jistotu při -webkit-box zobrazení */
  display: -webkit-box;
  -webkit-line-clamp: 2; /* max 2 řádky, delší text se ořízne třemi tečkami */
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: normal;
  white-space: normal;
  text-overflow: ellipsis;
}
.col.mini p {
  display: none;
}


/* Dlaždice projektu DIGIkurzy (kat_vychozi_zobrazeni = 'balik').
   Varianta velké dlaždice odlišená přídavnou třídou .balik na .col,
   stejným principem jako .col.mini výše. Barevné hodnoty (světlé pozadí,
   rámeček, horní proužek) se generují v ico_css.php jako .col.balik.<barva>;
   zde je vzhled nezávislý na barvě: rozměry, tmavý text, rozvržení obsahu. */
.col.balik {
  position: relative;               /* kotva pro celoplošný odkaz .balik-link */
  /* Dřív pevná height: 208px - u dlouhého nadpisu (zalomení na 3+ řádky) to
     tlačilo řádek Obtížnost/Délka pod spodní okraj (ořezané přes
     overflow: hidden) nebo nutilo schovávat víc kurzů, než bylo žádoucí.
     Zadání 24. 8. 2026 - "prodluž dlaždici na výšku o jeden řádek, zobraz 3
     školení a na čtvrtý řádek a další..." - min-height místo height: běžný
     nadpis (1-2 řádky) dá stejnou výšku jako dřív, delší nadpis dlaždici
     prodlouží přesně o to, kolik potřebuje navíc, ne že by se místo toho něco
     schovávalo/ořezávalo. .balik-strip/.balik-vse jsou display:flex bez
     vlastního align-items (výchozí stretch), takže se sousední dlaždice ve
     stejné řadě/stránce карuselu stejně srovnají na stejnou (vyšší) výšku. */
  min-height: 208px;
  box-sizing: border-box;
  overflow: hidden;      /* pojistka pro krajní/neočekávané případy */
  border: 1px solid transparent;   /* barvu rámečku dodá ico_css.php */
  border-top-width: var(--stripe-height, 4px);  /* výrazný horní proužek v syté barvě */
  color: #333;                     /* tmavý text s dostatečným kontrastem */
}
/* Nepoužívané od 24. 8. 2026 - web_pole_balik() už neurčuje barvu podle typu
   (orange/box-sedy/named třída), ale zděděnou barvu oblasti přes --kat-c a
   .uroven3 (viz pravidla u ".col.balik.uroven3" níže v souboru). Ponecháno
   beze změny pro případ jiného, dosud nepřevedeného použití třídy "box-sedy"
   jinde na webu (viz .box v ico_css.php). */
.col.balik.box-sedy {
  border-color: rgb(142,161,184);
  background: rgb(238,241,244);
}
.col.balik .hovera {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px 12px 12px;
  box-sizing: border-box;
}
/* Celoplošný klikatelný odkaz - pokrývá celou dlaždici. Nad ním zůstává jen h2
   (má vlastní <a> kvůli přístupnosti/SEO - viditelný, zaměřitelný text odkazu).
   Všechny ostatní prvky (štítek, popis, seznam kurzů, doplňkové údaje) NEMAJÍ
   vlastní z-index, takže na nich klik propadá až na overlay pod nimi - proto
   funguje jako odkaz opravdu celá plocha dlaždice, ne jen nadpis. */
.col.balik .balik-link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.col.balik h2 {
  position: relative;
  z-index: 2;
}
/* Balík dlaždice nezobrazuje ikonu ani "a další" tlačítko */
.col.balik a.ico,
.col.balik a.icp,
.col.balik a.icm,
.col.balik a.icr,
.col.balik .icocol,
.col.balik div.more {
  display: none;
}

/* 1) Označení typu nabídky - "Balíček kurzů" (fallback pro typ mimo DIGI/rekvalifikaci) */
.col.balik .balik-stitek {
  margin: 0 0 6px;
  font-size: 11px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: bold;
  color: #555;
}
/* 1b) DIGIkurz/Rekvalifikace - odznak (.typs-stitek-radek, stejná velikost/tvar
   jako na detailu školení - jen tady plná barva a bílý text místo světlého tónu,
   viz přebíjení níže) + obyčejný text o příspěvku ÚP vedle něj (.balik-prispevek-text),
   viz web_pole_balik() ve web.php. Mezera před nadpisem je záměrně malá (4px). */
.col.balik .balik-typ-radek {
  margin: 0 0 -1px;
  flex: 0 0 auto;
}
.col.balik .balik-prispevek-text {
  font-size: 11px;
  font-weight: normal;
  color: #555;
}
/* Barva odznaku podle typu - přesný matematický střed mezi světlým tónem
   (.typs-stitek-digi/.typs-stitek-rekval na detailu školení) a plnou barvou
   (DIGIkurz = barva "otevřený kurz" #D1604A, rekvalifikace = --box-hlavni
   rgb(142,161,184) z .box-sedy). Vyšší specificita (5 tříd) spolehlivě přebije
   .typs-stitek-digi/.typs-stitek-rekval (2 třídy). */
.col.balik .balik-typ-radek .typs-stitek-radek.typs-stitek-digi {
  background: #E5A497; /* střed mezi #F8E7E4 (světlý) a #D1604A (plný) */
  color: #733529; /* stejná barva textu jako na detailu školení (.typs-stitek-digi) */
}
.col.balik .balik-typ-radek .typs-stitek-radek.typs-stitek-rekval {
  background: rgb(190,201,214); /* střed mezi rgb(238,241,244) a rgb(142,161,184) */
  color: rgb(78,89,101); /* stejná barva textu jako na detailu školení (.typs-stitek-rekval) */
}

/* 2) Název (hlavní prvek) - zarovnat zleva stejně jako ostatní texty
      (zrušit padding-left: 18px z .col h2 a, rezervovaný jinak pro ikonu) */
.col.balik h2 {
  margin: 0;
  float: none;
  width: auto;
  clear: none;
  flex: 0 0 auto;
}
.col.balik h2 a {
  padding-left: 0;
  padding-right: 0;
  font-size: 18px;
  line-height: 21px;
  color: #222;              /* tmavý název místo bílého na běžných dlaždicích */
  white-space: normal;
}

/* 3) Přehled zahrnutých kurzů - menší mezera nad seznamem.
   web_pole_balik() (web.php) vypisuje do <ul> VŠECHNY reálné kurzy balíčku
   (dobré pro SEO/čitelnost pro AI, viz CLAUDE.md). Viditelnost jednotlivých
   <li> nad 3 (no-JS základ, "další N kurzů" pod nimi) řeší přímo PHP inline
   stylem display:none - ne obecné CSS pravidlo typu nth-child, protože PHP
   zná výjimku "když by zbyl schovaný jen 1 kurz, ukázat rovnou i jeho jméno"
   (zadání 25. 8. 2026), což čistě pozičním CSS pravidlem nejde spočítat.
   JS (web_balik_kurzy_script() ve web.php) tenhle základ dál rozšiřuje/zužuje
   podle toho, kolik místa je nad řádkem Obtížnost/Délka skutečně k dispozici
   (typicky víc u dlaždic s kratším nadpisem, které se přes align-items:
   stretch v řadě carouselu natáhly na výšku sousedů), se stejnou výjimkou
   pro osamocený poslední kurz. */
.col.balik .balik-kurzy {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  flex: 0 0 auto;
}
.col.balik .balik-kurzy li {
  font-size: 12px;
  line-height: 16px;
  color: #444;
  padding-left: 10px;
  position: relative;
}
.col.balik .balik-kurzy li:before {
  content: "–";
  position: absolute;
  left: 0;
  color: #888;
}
.col.balik .balik-kurzy li.balik-dalsi {
  color: #666;
  font-style: italic;
}
.col.balik .balik-kurzy li.balik-dalsi:before {
  content: "+";
}

/* 4) Doplňkové údaje (obtížnost, délka) - tmavé, se stejnou bublinou (title) při najetí
      jako na dlaždici konkrétního typu školení. margin-top: auto v rámci flex
      sloupce .hovera přilepí tenhle řádek ke spodnímu okraji dlaždice, i když
      je seznam kurzů nad ním kratší - proto mají všechny dlaždice stejnou výšku
      a zároveň stejné zarovnání spodního řádku. */
.col.balik .balik-info {
  flex: 0 0 auto;
  margin-top: auto; /* pojistka, kdyby .balik-kurzy vůbec nebylo (žádné kurzy) */
  padding-top: 8px;
  padding-right: 22px; /* místo pro šipku vpravo dole, stejně jako .kat-dlazdice .bottom-row */
}
.col.balik .balik-info .icoinfo {
  margin: 0;
  padding: 0;
  text-align: left;
  line-height: 1.3;
}
.col.balik .balik-info .stupen-wrap,
.col.balik .balik-info .delka {
  display: inline-block;
  font-size: 11px;
  color: #555;
  margin-right: 10px;
  cursor: help;              /* stejné chování jako na dlaždici školení */
}
/* Tečky obtížnosti - stejná struktura (velikost, mezery, tvar) jako .icocol .icoinfo .stupen,
   jen tmavší barvy kvůli světlému pozadí balík dlaždice místo tmavého pozadí běžné dlaždice */
.col.balik .balik-info .stupen {
  display: inline-flex;
  gap: 2px;
  vertical-align: middle;
}
.col.balik .balik-info .stupen .t {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(0,0,0,0.2);
}
.col.balik .balik-info .stupen .t.on {
  background: #444;
}
/* Popisek "Obtížnost:" před tečkami - stejná velikost jako "Délka:" (explicitně,
   ne jen zděděně, aby byla shoda jistá) */
.col.balik .balik-info .stupen-wrap .lbl {
  font-size: 11px;
  margin-right: 4px;
}

/* Sjednocení s .kat-dlazdice (sjednocená dlaždice hlavního rozcestníku, viz
   sekce "Sjednocená dlaždice kategorie" níže v souboru) - zadání 24. 8. 2026
   "sjednotit způsob zobrazení" balíčků (DIGIkurzy/rekvalifikace) s hlavním
   rozcestníkem: barva podle domovské oblasti, stejná šipka, písmo nadpisu,
   barva teček Obtížnosti. web_pole_balik() (web.php) teď místo staré pevné
   barvy podle typu (.{barva}.balik z ico2.7.css.php - ta se sem už
   nepřiřazuje, pravidla dole ji nahrazují) nastavuje --kat-c z domovské
   barva_stred a třídu .uroven3 - stejný pipeline (CSS proměnná + color-mix())
   jako .kat-dlazdice.uroven3, protože balíček je svým charakterem obdoba
   konkrétního školení (leaf, ne rozcestník), ne celá kategorie. Jen uroven3 -
   web_pole_balik() jinou úroveň nikdy nenastavuje. */
.col.balik.uroven3 {
  background: color-mix(in srgb, var(--kat-c) 13%, white);
  border-color: color-mix(in srgb, var(--kat-c) 25%, white);
  border-top-color: var(--kat-c);
}
/* Nadpis - stejné písmo jako .kat-dlazdice h2/h3/h4 (Calibri má skutečný
   tučný řez, sitewide "source-sans-pro-n3" ne - viz komentář tam). Bez
   font-weight: bold tu zůstávalo zděděné font-weight:200 ze sitewide
   "h1, h2, h3 {...}" pravidla - v Calibri (na rozdíl od source-sans-pro-n3)
   je ten rozdíl mezi 200 a bold hodně vidět, proto ho tu nešlo nechat beze
   změny (zadání 24. 8. 2026 - "ještě je jiný typ písma na nadpisech"). */
.col.balik h2 a {
  font-family: "Calibri", "source-sans-pro-n3", "source-sans-pro", sans-serif;
  font-weight: bold;
}
/* Šipka vpravo dole - stejný soubor (gowhite.svg) a technika (plná bílá na
   syté barvě, jako maska přebarvená na var(--kat-c) na světlém pozadí) jako
   .kat-dlazdice .arrow. Balíček je vždy uroven3 (světlé pozadí), takže se
   šipka vždy vybarví přes --kat-c, ne bílá. */
.col.balik .arrow {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 14px;
  height: 14px;
  background-color: var(--kat-c);
  -webkit-mask-image: url('img/bg/gowhite.svg');
  mask-image: url('img/bg/gowhite.svg');
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
/* Tečky obtížnosti v barvě oblasti - stejné jako .kat-dlazdice.uroven3
   .icoinfo .stupen .t.on, místo dřívější pevné tmavé #444. Vyšší specificita
   (.uroven3 navíc) spolehlivě přebije .col.balik .balik-info .stupen .t.on výš. */
.col.balik.uroven3 .balik-info .stupen .t.on {
  background: var(--kat-c);
}

/* Zjednodušená "jen hlavička" varianta dlaždic k/i/f (viz web_typ_skoleni_dlazdice(),
   parametr $jen_hlavicka) - použitá na stránce Hodnocení jako odkaz zpět k
   objednání, bez spodní části s termíny/cenou. Barvu pozadí/rámečku/proužku a
   CSS proměnné --box-hlavni/--box-label přebírá ze stejného mechanismu jako
   .box (viz ico_css.php), přes třídu "balik". Ale .col.balik samo o sobě je
   určené pro balíčky kurzů (pevná výška 208px, schovaná ikona, sloupcový flex
   layout) - proto tahle třída ".dlazdice-svetla" tyhle konkrétní vlastnosti
   vrací zpět na běžné chování (viditelná ikona vpravo, výška podle a.icr/icp
   - 85px, stejná jako mají ikony samotné).
   min-height se musí přepsat zvlášť - .tri2 má vlastní min-height: 229px
   (kvůli spodní ceníkové části, kterou v týhle variantě vůbec nemáme) a jako
   samostatná vlastnost by jinak height: 85px přebila jen podle specificity,
   ne podle toho, která je "větší" - prohlížeč by použil vyšší z height/
   min-height bez ohledu na to. */
.col.balik.dlazdice-svetla {
  height: 85px;
  min-height: 85px;
  overflow: hidden;
  color: var(--box-label, #333);
}
/* Žádné vlastní odsazení - .hovera nemá v původních (plných) dlaždicích žádný
   padding, veškerý svislý/vodorovný odstup dává h3 a/p a samo (padding-top,
   padding-left) - přidávat sem další padding navíc jen posouvalo text dolů
   a doprava oproti stejnému prvku na detailu školení. */
.col.balik.dlazdice-svetla .hovera {
  display: block;
  height: auto;
  padding: 0;
}
.col.balik.dlazdice-svetla a.icr,
.col.balik.dlazdice-svetla a.icp {
  display: inline-block;
}
.col.balik.dlazdice-svetla h3 a {
  color: var(--box-label, #222);
  padding-top: 10px;
}
.col.balik.dlazdice-svetla p a {
  color: var(--box-label, #333);
}

/* Přebarvení kresby ikony přes CSS masku (soubory img/ico/firemni.svg,
   individualni.svg, kurz.svg existují - ověřeno). Vypnout původní barevný
   obrázek (background-image), obrys ikony dodá mask-image + background-color
   v barvě kategorie - stejný princip jako u .box-icon. mask-size/position
   jsou první odhad - klidně doladit podle skutečného vzhledu. */
.col.balik.dlazdice-svetla .ico-firemni,
.col.balik.dlazdice-svetla .ico-individualni,
.col.balik.dlazdice-svetla .ico-kurz {
  background-color: var(--box-hlavni, #888);
  background-image: none;
  mask-mode: alpha;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center 12px;
  mask-position: center 12px;
  -webkit-mask-size: 40px;
  mask-size: 40px;
}
.col.balik.dlazdice-svetla .ico-firemni {
  -webkit-mask-image: url('img/ico/firemni.svg');
  mask-image: url('img/ico/firemni.svg');
}
.col.balik.dlazdice-svetla .ico-individualni {
  -webkit-mask-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4wLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL1RSLzIwMDEvUkVDLVNWRy0yMDAxMDkwNC9EVEQvc3ZnMTAuZHRkIj4NCjwhLS0gQ3JlYXRvcjogQ29yZWxEUkFXIFg3IC0tPg0KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI0OHB4IiBoZWlnaHQ9IjY3cHgiIHZlcnNpb249IjEuMCIgc3R5bGU9InNoYXBlLXJlbmRlcmluZzpnZW9tZXRyaWNQcmVjaXNpb247IHRleHQtcmVuZGVyaW5nOmdlb21ldHJpY1ByZWNpc2lvbjsgaW1hZ2UtcmVuZGVyaW5nOm9wdGltaXplUXVhbGl0eTsgZmlsbC1ydWxlOmV2ZW5vZGQ7IGNsaXAtcnVsZTpldmVub2RkIg0Kdmlld0JveD0iMCAwIDE4NTc1NyAyNTkyODciDQogeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KIDxkZWZzPg0KICA8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KICAgPCFbQ0RBVEFbDQogICAgLmZpbDEge2ZpbGw6bm9uZX0NCiAgICAuZmlsMCB7ZmlsbDojRjBGMEYwfQ0KICAgXV0+DQogIDwvc3R5bGU+DQogPC9kZWZzPg0KIDxnIGlkPSJWcnN0dmFfeDAwMjBfMSI+DQogIDxtZXRhZGF0YSBpZD0iQ29yZWxDb3JwSURfMENvcmVsLUxheWVyIi8+DQogIDxwYXRoIGNsYXNzPSJmaWwwIiBkPSJNOTI3MzIgMTQ3MDcwYzM3MDcsMCA3MDY3LDE1MTMgOTQ5OCwzOTQwbDAgMCA1IDBjMjQzMiwyNDM2IDM5MzUsNTgwMCAzOTM1LDk0OTggMCwzNzA3IC0xNTAzLDcwNjIgLTM5MzUsOTQ5OCAtMjQzMiwyNDIzIC01Nzk2LDM5MzYgLTk1MDMsMzkzNiAtMzcwMiwwIC03MDUyLC0xNTEzIC05NDkzLC0zOTM2bC01IC00Yy0yNDIyLC0yNDMyIC0zOTM1LC01NzkyIC0zOTM1LC05NDk0IDAsLTM3MDcgMTUxMywtNzA3MSAzOTM1LC05NDk4IDI0MzYsLTI0MzYgNTc5NiwtMzk0MCA5NDk4LC0zOTQwem0xNDIgLTEwNTY4MWMzNzAyLDAgNzA2MiwxNTAzIDk0OTMsMzkzNWwwIDUgNSAwYzI0MzIsMjQzMSAzOTM2LDU3OTEgMzkzNiw5NDkzIDAsMzcwNyAtMTUwMCw3MDY3IC0zOTM2LDk1MDMgLTI0MjIsMjQyMiAtNTc5MSwzOTM1IC05NDk4LDM5MzUgLTM2OTgsMCAtNzA1NywtMTUxMyAtOTQ5NCwtMzkzNWwwIC05Yy0yNDMxLC0yNDM3IC0zOTQ0LC01Nzg3IC0zOTQ0LC05NDk0IDAsLTM3MDIgMTUxMywtNzA3MSAzOTQ0LC05NDk4IDI0MjcsLTI0MzYgNTc4NywtMzkzNSA5NDk0LC0zOTM1em0yMTY3MCA1MTk1NmMwLC0zMzk2IC0yOTM0LC04Mzc0IC03NTY1LC0xMjI0NSAtMzgwNywtMzE4NiAtODc0NCwtNTUzNiAtMTQxMDUsLTU1MzYgLTUzNTcsMCAtMTAyOTMsMjM1MCAtMTQxMDEsNTUzNiAtNDYzMCwzODcxIC03NTY5LDg4NDkgLTc1NjksMTIyNDVsMCAxNTEyMCA0MzM0MCAwIDAgLTE1MTIwem0tNTA0NiAtMTUyNjdjNTUwMyw0NjAzIDg5OTUsMTA4MTkgODk5NSwxNTI2N2wwIDE3MDkwIDAgMTk3OSAtMTk3NCAwIC00NzI5MCAwIC0xOTcwIDAgMCAtMTk3OSAwIC0xNzA5MGMwLC00NDQ4IDM0OTIsLTEwNjY0IDg5ODYsLTE1MjY3IDQ0NTIsLTM3MjAgMTAyNTcsLTY0NjMgMTY2MjksLTY0NjMgNjM2NywwIDEyMTc3LDI3NDMgMTY2MjQsNjQ2M3ptLTk5MTAgLTI5OTcwYy0xNzAwLC0xNzEwIC00MDg2LC0yNzcwIC02NzE0LC0yNzcwIC0yNjI0LDAgLTUwMDEsMTA2MCAtNjcxMCwyNzcwIC0xNzA5LDE3MDkgLTI3NzksNDA5MCAtMjc3OSw2NzE0IDAsMjYyNCAxMDcwLDUwMDEgMjc3MCw2NzE5bDkgMGMxNzA5LDE3MDAgNDA5MSwyNzcwIDY3MTAsMjc3MCAyNjI4LDAgNTAwNSwtMTA3MCA2NzE0LC0yNzcwIDE3MTAsLTE3MTggMjc3OSwtNDA5NSAyNzc5LC02NzE5IDAsLTI2MjQgLTEwNjksLTUwMDUgLTI3NjksLTY3MTRsLTEwIDB6bTk2NDkgMTM1ODAyYzU0NDksNDU2MiA4OTEzLDEwNzI0IDg5MTMsMTUxMjVsMCAxNzA5MCAwIDE3NjkgLTE3NzMgMCAtNDcyODUgMCAtMTc3MyAwIDAgLTE3NjkgMCAtMTcwOTBjMCwtNDQwMSAzNDY0LC0xMDU2MyA4OTEzLC0xNTEyNSA0NDIwLC0zNjg4IDEwMTc5LC02NDEyIDE2NTAwLC02NDEyIDYzMjYsMCAxMjA4NSwyNzI0IDE2NTA1LDY0MTJ6Ii8+DQogIDxyZWN0IGNsYXNzPSJmaWwxIiB4PSItMiIgd2lkdGg9IjE4NTc1NyIgaGVpZ2h0PSIyNTkyODciLz4NCiA8L2c+DQo8L3N2Zz4NCg==');
  mask-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4wLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL1RSLzIwMDEvUkVDLVNWRy0yMDAxMDkwNC9EVEQvc3ZnMTAuZHRkIj4NCjwhLS0gQ3JlYXRvcjogQ29yZWxEUkFXIFg3IC0tPg0KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI0OHB4IiBoZWlnaHQ9IjY3cHgiIHZlcnNpb249IjEuMCIgc3R5bGU9InNoYXBlLXJlbmRlcmluZzpnZW9tZXRyaWNQcmVjaXNpb247IHRleHQtcmVuZGVyaW5nOmdlb21ldHJpY1ByZWNpc2lvbjsgaW1hZ2UtcmVuZGVyaW5nOm9wdGltaXplUXVhbGl0eTsgZmlsbC1ydWxlOmV2ZW5vZGQ7IGNsaXAtcnVsZTpldmVub2RkIg0Kdmlld0JveD0iMCAwIDE4NTc1NyAyNTkyODciDQogeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KIDxkZWZzPg0KICA8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KICAgPCFbQ0RBVEFbDQogICAgLmZpbDEge2ZpbGw6bm9uZX0NCiAgICAuZmlsMCB7ZmlsbDojRjBGMEYwfQ0KICAgXV0+DQogIDwvc3R5bGU+DQogPC9kZWZzPg0KIDxnIGlkPSJWcnN0dmFfeDAwMjBfMSI+DQogIDxtZXRhZGF0YSBpZD0iQ29yZWxDb3JwSURfMENvcmVsLUxheWVyIi8+DQogIDxwYXRoIGNsYXNzPSJmaWwwIiBkPSJNOTI3MzIgMTQ3MDcwYzM3MDcsMCA3MDY3LDE1MTMgOTQ5OCwzOTQwbDAgMCA1IDBjMjQzMiwyNDM2IDM5MzUsNTgwMCAzOTM1LDk0OTggMCwzNzA3IC0xNTAzLDcwNjIgLTM5MzUsOTQ5OCAtMjQzMiwyNDIzIC01Nzk2LDM5MzYgLTk1MDMsMzkzNiAtMzcwMiwwIC03MDUyLC0xNTEzIC05NDkzLC0zOTM2bC01IC00Yy0yNDIyLC0yNDMyIC0zOTM1LC01NzkyIC0zOTM1LC05NDk0IDAsLTM3MDcgMTUxMywtNzA3MSAzOTM1LC05NDk4IDI0MzYsLTI0MzYgNTc5NiwtMzk0MCA5NDk4LC0zOTQwem0xNDIgLTEwNTY4MWMzNzAyLDAgNzA2MiwxNTAzIDk0OTMsMzkzNWwwIDUgNSAwYzI0MzIsMjQzMSAzOTM2LDU3OTEgMzkzNiw5NDkzIDAsMzcwNyAtMTUwMCw3MDY3IC0zOTM2LDk1MDMgLTI0MjIsMjQyMiAtNTc5MSwzOTM1IC05NDk4LDM5MzUgLTM2OTgsMCAtNzA1NywtMTUxMyAtOTQ5NCwtMzkzNWwwIC05Yy0yNDMxLC0yNDM3IC0zOTQ0LC01Nzg3IC0zOTQ0LC05NDk0IDAsLTM3MDIgMTUxMywtNzA3MSAzOTQ0LC05NDk4IDI0MjcsLTI0MzYgNTc4NywtMzkzNSA5NDk0LC0zOTM1em0yMTY3MCA1MTk1NmMwLC0zMzk2IC0yOTM0LC04Mzc0IC03NTY1LC0xMjI0NSAtMzgwNywtMzE4NiAtODc0NCwtNTUzNiAtMTQxMDUsLTU1MzYgLTUzNTcsMCAtMTAyOTMsMjM1MCAtMTQxMDEsNTUzNiAtNDYzMCwzODcxIC03NTY5LDg4NDkgLTc1NjksMTIyNDVsMCAxNTEyMCA0MzM0MCAwIDAgLTE1MTIwem0tNTA0NiAtMTUyNjdjNTUwMyw0NjAzIDg5OTUsMTA4MTkgODk5NSwxNTI2N2wwIDE3MDkwIDAgMTk3OSAtMTk3NCAwIC00NzI5MCAwIC0xOTcwIDAgMCAtMTk3OSAwIC0xNzA5MGMwLC00NDQ4IDM0OTIsLTEwNjY0IDg5ODYsLTE1MjY3IDQ0NTIsLTM3MjAgMTAyNTcsLTY0NjMgMTY2MjksLTY0NjMgNjM2NywwIDEyMTc3LDI3NDMgMTY2MjQsNjQ2M3ptLTk5MTAgLTI5OTcwYy0xNzAwLC0xNzEwIC00MDg2LC0yNzcwIC02NzE0LC0yNzcwIC0yNjI0LDAgLTUwMDEsMTA2MCAtNjcxMCwyNzcwIC0xNzA5LDE3MDkgLTI3NzksNDA5MCAtMjc3OSw2NzE0IDAsMjYyNCAxMDcwLDUwMDEgMjc3MCw2NzE5bDkgMGMxNzA5LDE3MDAgNDA5MSwyNzcwIDY3MTAsMjc3MCAyNjI4LDAgNTAwNSwtMTA3MCA2NzE0LC0yNzcwIDE3MTAsLTE3MTggMjc3OSwtNDA5NSAyNzc5LC02NzE5IDAsLTI2MjQgLTEwNjksLTUwMDUgLTI3NjksLTY3MTRsLTEwIDB6bTk2NDkgMTM1ODAyYzU0NDksNDU2MiA4OTEzLDEwNzI0IDg5MTMsMTUxMjVsMCAxNzA5MCAwIDE3NjkgLTE3NzMgMCAtNDcyODUgMCAtMTc3MyAwIDAgLTE3NjkgMCAtMTcwOTBjMCwtNDQwMSAzNDY0LC0xMDU2MyA4OTEzLC0xNTEyNSA0NDIwLC0zNjg4IDEwMTc5LC02NDEyIDE2NTAwLC02NDEyIDYzMjYsMCAxMjA4NSwyNzI0IDE2NTA1LDY0MTJ6Ii8+DQogIDxyZWN0IGNsYXNzPSJmaWwxIiB4PSItMiIgd2lkdGg9IjE4NTc1NyIgaGVpZ2h0PSIyNTkyODciLz4NCiA8L2c+DQo8L3N2Zz4NCg==');
}
.col.balik.dlazdice-svetla .ico-kurz {
  -webkit-mask-image: url('img/ico/kurz.svg');
  mask-image: url('img/ico/kurz.svg');
}
}

/* Posuvný pás balíčků (4 a více) - viz web_balik_sekce() ve web.php.
   Čistě CSS/HTML, bez JavaScriptu: scroll-snap řeší posouvání a zarovnání,
   :target + :has() řeší přepínání panelu se šipkami/počítadlem pro každou
   stranu, schovaný checkbox + <label> řeší "Zobrazit všechny balíčky". */
.balik-carousel {
  position: relative;
}
.balik-checkbox {
  display: none;
}
/* flex-wrap: wrap - BEZ toho by řádek (počet balíčků + tlačítko "Zobrazit
   všechny" + šipky) na úzké obrazovce nešel zalomit, protože žádná z položek
   se nemůže zmenšit pod svou přirozenou šířku. Flex řádek by si pak vynutil
   minimální šířku celé stránky - a stránku by pak nešlo zúžit vůbec, ani na
   počítači (jen zvětšil vodorovný scrollbar). row-gap navíc pro čitelnou
   mezeru mezi řádky, když se to zalomí. */
.balik-nav {
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  row-gap: 6px;
  margin-bottom: 8px;
  font-size: 13px;
  color: #666;
}
#balik-nav-1 {
  display: flex;
}
.balik-nav-dole {
  display: none;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  row-gap: 6px;
  margin-top: 0;
  margin-bottom: -10px;
}
#balik-nav-dole-1 {
  display: flex;
}
.balik-pocitadlo {
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.balik-odkaz-zobrazit, .balik-odkaz-skryt {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid rgb(100,120,140);
  color: rgb(100,120,140);
  font-size: 13px;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
}
.balik-odkaz-zobrazit:hover, .balik-odkaz-skryt:hover {
  background: rgb(100,120,140);
  color: #fff;
}
.balik-odkaz-skryt {
  display: none;
}
.balik-sipka {
  display: inline-block;
  width: 28px;
  height: 28px;
  line-height: 26px;
  text-align: center;
  background: rgb(100,120,140);
  border: 1px solid rgb(100,120,140);
  color: #fff;
  text-decoration: none;
  font-size: 17px;
  font-weight: bold;
}
.balik-sipka:hover {
  background: rgb(80,98,116);
  border-color: rgb(80,98,116);
}
.balik-sipka-neaktivni {
  background: #eee;
  border-color: #ddd;
  color: #ccc;
}
.balik-strip-wrap {
  overflow: hidden;
}
.balik-strip {
  display: flex;
  position: relative;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 10px;
  padding-bottom: 2px;
}
.balik-strip .col.balik {
  scroll-snap-align: start;
  float: none;
  flex: 0 0 263px;
}
.balik-marker {
  position: absolute;
  top: 0;
  width: 1px;
  height: 1px;
  scroll-snap-align: start;
}
.balik-vse {
  display: none;
}
.balik-prepinac {
  margin-top: 4px;
  margin-bottom: 0;
}
.balik-carousel:has(.balik-checkbox:checked) .balik-strip-wrap,
.balik-carousel:has(.balik-checkbox:checked) .balik-nav,
.balik-carousel:has(.balik-checkbox:checked) .balik-nav-dole {
  /* !important je potřeba, protože skript ukazStranu() (viz web_balik_sekce()
     ve web.php) nastavuje viditelnost panelu .balik-nav/.balik-nav-dole přímo
     přes inline style (nav.style.display), když se předtím klikne na šipku.
     Inline styl by jinak přebil tohle pravidlo i přes :has() a šipky by po
     zaškrtnutí "Zobrazit všechny balíčky" zůstaly viditelné. */
  display: none !important;
}
.balik-carousel:has(.balik-checkbox:checked) .balik-vse {
  display: flex;
  flex-wrap: wrap;
  column-gap: 5px; /* stejná mezera jako mezi běžnými dlaždicemi (.sep, 5px) - s touto
                       hodnotou se 3 dlaždice po 263px vejdou vedle sebe do stejné šířky
                       jako běžný řádek (263*3 + 5*2 = 799px). .balik-strip má 10px, ale
                       ten je vodorovně scrollovatelný, takže se nemusí vejít do šířky
                       kontejneru - zde ano. Vertikální mezeru mezi řádky dodává
                       margin-bottom na .col. */
}
.balik-carousel:has(.balik-checkbox:checked) .balik-odkaz-zobrazit {
  display: none;
}
.balik-carousel:has(.balik-checkbox:checked) .balik-odkaz-skryt {
  display: inline;
}
@media (max-width: 900px) {
  .balik-strip .col.balik {
    flex-basis: calc(50% - 5px);
  }
}
@media (max-width: 600px) {
  .balik-strip .col.balik {
    flex-basis: 85%;
  }
}

/* Sekce "Získejte příspěvek na vzdělávání" - tři karty (Rekvalifikace /
   DIGIkurzy / Vzdělávání pro firmy), viz web_prispevky_sekce() ve web.php.
   Barva každé karty se řídí kategorií, na kterou karta odkazuje (kat_barva) -
   stejný mechanismus jako u .box-row .box: karta dostane třídu "balik" +
   {barva}/.box-sedy (viz web_prispevek_karta_class() ve web.php) a barvu jí
   dodá existující .{barva}.balik (ico_css.php, jen dvě třídy - {barva} +
   balik, ověřeno přímo v souboru) nebo fallback .box-sedy níž - tady se
   proto border-top-color/background záměrně nenastavuje napevno.
   Ostré rohy - stejná konvence jako .col.balik, žádné zaoblení. */
.prispevky-karty {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.prispevek-karta {
  position: relative;
  flex: 1 1 200px;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-top-width: var(--stripe-height, 4px);  /* sjednoceno z původních 3px */
  border-top-style: solid;
  /* border-top-color a background dodá .{barva}.balik / .box-sedy, viz výše -
     na úvodní stránce (bez třídy .prispevek-bily, viz web.php) tak zůstává
     zachované světlé tónované pozadí jako výjimka. */
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
}
/* Bílé pozadí karty - výchozí chování na všech stránkách kromě úvodní (tam
   $bile ve web_prispevky_sekce() zůstává false, třída se nepřidá). Stejný
   princip jako .box-bily u boxů - 3 třídy ve selektoru mají vyšší specificitu
   než .{barva}.balik/.box-sedy (2 třídy), takže spolehlivě přebijí jen
   "background", border-top-color zůstává podle barvy kategorie beze změny. */
.prispevky-karty .prispevek-karta.prispevek-bily {
  background: #fff;
}
/* Totéž i mimo .prispevky-karty - samostatná karta (viz "Vzdělávání pro
   firmy" na podstránce firemní i "Získejte příspěvek na kurz",
   web_typs_prispevek_balicky ve web.php), ne trojice karet vedle sebe. */
.prispevek-karta.prispevek-bily {
  background: #fff;
}
/* Celoplošný klikatelný odkaz - stejný princip jako .col.balik .balik-link.
   Nad ním zůstává jen nadpis se svým vlastním <a> (viditelný, zaměřitelný
   odkaz kvůli přístupnosti/klávesnici) a odkaz "Více o..." dole. */
.prispevek-karta-link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.prispevek-karta h3,
.prispevek-odkaz {
  position: relative;
  z-index: 2;
}
.prispevek-karta h3 a {
  color: #222;
  text-decoration: none;
}
.prispevek-znacka {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--box-label, #777);
  margin-bottom: 6px;
}
.prispevek-karta h3 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: bold;
  color: #222;
}
.prispevek-karta p {
  font-size: 13px;
  line-height: 17px;
  color: rgb(77,77,77);
  margin: 0 0 8px;
}
.prispevek-karta .prispevek-poznamka {
  font-size: 12px;
  color: #888;
  font-style: italic;
  margin-bottom: 10px;
}
.prispevek-odkaz {
  margin-top: auto;
  font-size: 13px;
  color: rgb(51,102,153);
  font-weight: bold;
  text-decoration: none;
}
@media (max-width: 700px) {
  .prispevek-karta {
    flex-basis: 100%;
  }
}

/* Kontaktní banner ("Nejste si jistí, který kurz vybrat?" / "Potřebujete
   poradit? Ozvěte se nám") - viz web_kontaktni_banner() ve web.php. Barva a
   velikosti sladěné se stávajícím webem: pozadí stejná modrošedá jako
   .digi-up-button, nadpis 15px/tučně jako .prispevek-karta h3, podtext 13px
   jako .prispevek-karta p, tlačítka 13px/tučně/padding 8px 16px přesně podle
   .digi-up-button (jen barevně obráceně). Ostré rohy - stejná konvence jako
   zbytek webu. */
.kontakt-banner {
  width: 100%;
  box-sizing: border-box;
  background: rgb(100,120,140);
  padding: 20px 24px;
  margin: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.kontakt-banner-nadpis {
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 3px;
}
.kontakt-banner-podtext {
  color: rgb(225,230,236);
  font-size: 13px;
}
.kontakt-banner-tlacitka {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.kontakt-banner-btn {
  display: inline-block;
  background: #fff;
  color: rgb(100,120,140);
  font-size: 13px;
  font-weight: bold;
  padding: 8px 16px;
  text-decoration: none;
  white-space: nowrap;
}
.kontakt-banner-btn:hover {
  background: rgb(238,241,244);
}

/* Banner na projekt ABC Video, viz web_video_sekce() ve web.php. Ostré rohy -
   stejná konvence jako u .col.balik a .prispevek-karta, žádné zaoblení.
   Celoplošný odkaz stejným principem jako .col.balik .balik-link /
   .prispevek-karta-link. */
.video-banner {
  position: relative;
  border: 1px solid #ddd;
  background: #f7f8f9;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  box-sizing: border-box;
  margin-top: 40px;
}
.video-banner::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  border-top: 1px solid #e2e2e2;
}
.video-banner-link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.video-banner-ikona {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgb(100,120,140);
  color: #fff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-banner-text {
  flex: 1;
  min-width: 0;
}
.video-banner-znacka {
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 4px;
}
.video-banner-text h3 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: bold;
  color: #222;
}
.video-banner-text h3 a {
  position: relative;
  z-index: 2;
  color: #222;
  text-decoration: none;
}
.video-banner-text p {
  margin: 0;
  font-size: 13px;
  line-height: 17px;
  color: rgb(77,77,77);
}
.video-banner-odkaz {
  flex-shrink: 0;
}
.video-banner-odkaz a {
  position: relative;
  z-index: 2;
  font-size: 13px;
  color: rgb(51,102,153);
  font-weight: bold;
  text-decoration: none;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .video-banner {
    flex-direction: column;
    align-items: flex-start;
  }
  .video-banner-odkaz {
    padding-left: 0;
  }
}

/* Barevný akcent u dvou konkrétních nadpisů ("Termíny otevřených kurzů",
   "Tipy a novinky") - záměrně cílené třídy, ne .hovertxt h3 obecně, aby se
   nedotkly ostatních míst se stejným mechanismem (Materiály, Osnova, Návazná
   školení...). Barvy odpovídají zavedené paletě - "otevřený kurz" u termínů
   (je to doslova o otevřených kurzech), neutrální šedomodrá u tipů. */
.hovertxt h3.sekce-terminy {
}
.hovertxt h3.sekce-tipy {
}


/* Levé menu */
#benefit{background-image:url('img/left/benefit.png');}
#contact{background-image:url('img/left/contact-a.png');}
#gift{background-image:url('img/left/gift.png');}
#search{background-image:url('img/left/search.png');}
#test{background-image:url('img/left/test.png');}
#demand{background-image:url('img/left/demand-a.png');}

/* === Obsah === */

/* Informační řádek na detailu školení */
.typs-info {
  margin: 0 5px 12px 0;
  padding: 5px 0 6px 0;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  color: rgb(77,77,77);
  font-size: 15px;
  line-height: 18px;
}

/* Varianta pro podstránky otevřený/individuální/firemní (web_typs_info_radek_
   kurz/_individualni/_firemni ve web.php) - stejný .{barva}.balik mechanismus
   (ico_css.php) jako u ostatních sjednocených prvků na téhle stránce (.box,
   .prispevek-karta, .obsah-kurzu-banner, cenik-box). Hlavní stránka detailu
   (bez konkrétní role) zůstává na základním .typs-info beze změny. */
.typs-info.balik {
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  border-top-width: var(--stripe-height, 4px);  /* sjednoceno z původních 3px */
  padding: 10px 14px;
  /* border-color a background dodá .typs-info.typs-info-main.balik níže -
     vyšší specificitou (3 třídy) spolehlivě přebije .{barva}.balik bez ohledu
     na pořadí v souboru. */
}
/* Bílé pozadí + rámeček v PLNÉ barvě kategorie na všech stranách (ne jen
   nahoře, a ne zesvětlená verze jako u .{barva}.balik) - var(--box-hlavni)
   je stejná plná barva, jakou --box-hlavni používá i jinde (např.
   border-top-color u cenik-box). */
.typs-info.typs-info-main.balik {
  background: #fff;
  border-color: var(--box-hlavni, #ddd);
}
.typs-info.balik strong {
  color: var(--box-hlavni, rgb(100,120,140));
  font-weight: bold;
}

.typs-info strong {
  color: rgb(100,120,140);
  font-weight: normal;
}

.typs-info-main {
  color: rgb(77,77,77);
}

.typs-info-main p {
  margin: 0;
  padding: 0;
}

.typs-info-main p + p {
  margin-top: 2px;
}

.typs-info-main strong {
  color: inherit;
  font-weight: bold;
}

#content .typs-info-main a.typs-info-link,
#content .typs-info-main a.typs-info-link:visited,
#content .typs-info-main a.typs-info-link:active {
  color: rgb(51,102,153);
  font-weight: bold;
  border: none !important;
  border-bottom: none !important;
  text-decoration: none !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

#content .typs-info-main a.typs-info-link:hover {
  color: rgb(15,69,122);
  border: none !important;
  border-bottom: none !important;
  text-decoration: none !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

#content .typs-info-main a.typs-info-link span {
  border: none !important;
  border-bottom: none !important;
  text-decoration: none !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

.typs-info-sep {
  color: rgb(142,161,184);
  padding: 0 6px;
}

/* Štítek typu nabídky na začátku informačního proužku - sdílená základní třída
   + barevný modifikátor podle typu (DIGIkurz / otevřený kurz / individuální /
   firemní školení). Barvy odpovídají zavedené konvenci barvy_pod (viz web.php,
   $web['setup']['barvy_pod']) - DIGIkurz sdílí barvu otevřeného kurzu, protože
   je to jeho typ. */
/* Označení "jste tady" na vlastní podstránce (k/i/f) - obyčejný text, ne
   barevný klikací štítek, ať je vizuálně jasné, že tohle není odkaz, na
   rozdíl od "Další formy" na konci řádku (ty jsou .typs-stitek-radek). */
/* Výrazný odkaz na obsah kurzu (Co se naučíte/Osnova) na podstránkách k/i/f -
   viz web_show_kat.php za výpisem popisu. Sjednoceno s vizuálním jazykem
   .box/.prispevek-karta (barevný pruh NAHOŘE, ne vlevo jako dřív; bílé
   pozadí). Barva pruhu dodává .{barva}.balik/.box-sedy (stejný mechanismus
   jako jinde) podle role té konkrétní podstránky (grass/blue/orange, viz
   $web['setup']['barvy_pod'] ve web.php) - žádná ručně psaná inline barva. */
.obsah-kurzu-banner {
  margin: 15px 0;
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-top-width: var(--stripe-height, 4px);  /* sjednoceno z původních 3px */
  border-top-style: solid;
  /* border-top-color dodá .{barva}.balik / .box-sedy, viz výše */
}
/* Varianta bez horní mezery (viz web_hodnoceni_banner() ve funkce_web.php,
   parametr $zarovnat_nahoru) - na stránce Hodnocení má levý horní roh sedět
   na stejném místě jako .typs-info (informační řádek na detailu školení),
   ten má taky margin-top: 0. */
.obsah-kurzu-banner.hodnoceni-banner-nahoru {
  margin-top: 0;
}
/* #content .x (ID + třída) má vyšší specificitu než .{barva}.balik (2 třídy),
   spolehlivě přebije jen pozadí na bílou bez ohledu na pořadí v souboru -
   stejný princip jako .box-bily/.prispevek-bily. */
#content .obsah-kurzu-banner {
  background: #fff;
}
.obsah-kurzu-banner a {
  display: block;
  font-size: 15px;
  font-weight: bold;
  color: rgb(51,102,153);
  text-decoration: none;
}
.obsah-kurzu-banner a:hover {
  color: rgb(15,69,122);
}

/* Rekvalifikace - "i pro firmy" banner (web_rekval_firmy_banner ve web.php),
   pod tabulkou termínů. Stejná stavba jako .obsah-kurzu-banner (barevný pruh
   nahoře, celý text jeden klikací odkaz). Dřív v barvě firemního školení
   (#56913A/#E6EEE1, stejná paleta jako štítek .typs-stitek-f) - od
   26. 8. 2026 formát nemá vlastní barvu (viz .format-sedy), takže i tenhle
   banner jede na neutrální .box-sedy paletě, s jemným podbarvením místo
   bílého pozadí (#content .obsah-kurzu-banner ho jinak přebíjí na bílou,
   tady to o dvě třídy přebijeme zpět). */
.obsah-kurzu-banner.rekval-firmy-banner {
  border-top-color: rgb(142,161,184);
}
#content .obsah-kurzu-banner.rekval-firmy-banner {
  background: rgb(238,241,244);
}
.rekval-firmy-banner a {
  color: rgb(78,89,101);
}
.rekval-firmy-banner a:hover {
  color: rgb(51,63,75);
}

.typs-oznaceni {
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #777;
}
.typs-stitek-radek {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 3px;
  vertical-align: 1px;
}
a.typs-stitek-radek:hover {
  opacity: 0.8;
}
/* Štítky Otevřený kurz/Individuální/Firemní (i DIGIkurz/rekvalifikace) -
   dřív každý ve "své" barvě formátu (oranžová/modrá/zelená, stejná paleta
   jako barvy_pod v web.php). Přehlédnuto při sjednocování o/i/f 26. 8. 2026,
   protože tu jde o napevno zapsané hex hodnoty, ne o barvy_pod/web_barvy -
   uživatelka na kolizi upozornila zvlášť 26. 8. 2026 ("upravit barevnost
   štítků... odbarvit do základní barvy"). Sjednoceno na stejnou neutrální
   .box-sedy paletu jako zbytek formátových prvků; štítky se dál rozlišují
   textem (Otevřený kurz/Individuální školení/Firemní školení), ne barvou. */
.typs-stitek-radek.typs-stitek-digi,
.typs-stitek-radek.typs-stitek-k,
.typs-stitek-radek.typs-stitek-rekval,
.typs-stitek-radek.typs-stitek-i,
.typs-stitek-radek.typs-stitek-f {
  background: rgb(238,241,244);
  color: rgb(78,89,101);
}

.digi-podnadpis {
  margin: 0 0 10px;
  font-size: 14px;
  color: rgb(100,120,140);
}

/* Doplňkový text v proužku (např. "(kurz 12 900 Kč)" vedle spoluúčasti) */
.typs-info-doplnek {
  color: rgb(142,161,184);
}

/* DIGIkurz - dvousloupcový blok "Příspěvek Úřadu práce" + CTA na přihlášení přes ÚP.
   Rozměry sloupců (max-width 390px) odpovídají existující dvousloupcové sazbě
   .txtcol, aby blok navazoval na zbytek stránky. Ostré rohy - na webu se jinde
   nepoužívají zaoblené rohy pro tento typ boxu (viz .col.balik). */
.digi-dvojblok {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 16px;
  margin-bottom: 25px;
}
.digi-prispevek,
.digi-up-cta {
  flex: 1 1 300px;
  min-width: 0;
  max-width: 390px;
  box-sizing: border-box;
  padding: 14px 16px;
}
.digi-prispevek {
  background: #F8E7E4;
  border: 1px solid #D1604A;
  border-top-width: var(--stripe-height, 4px);
}
.digi-prispevek-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 8px;
}
.digi-prispevek-stats .lbl {
  font-size: 10px;
  color: #733529;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.digi-prispevek-stats .val {
  font-size: 15px;
  color: #733529;
}
.digi-prispevek-stats .val.hlavni {
  font-size: 22px;
  font-weight: bold;
  color: #D1604A;
}
.digi-prispevek-pozn {
  font-size: 12px;
  color: #733529;
  margin: 0 0 8px;
}
.digi-prispevek a {
  font-size: 13px;
  color: rgb(51,102,153);
  font-weight: bold;
}
.digi-up-cta {
  border: 1px dashed rgb(190,190,190);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.digi-up-cta p {
  margin: 0;
  font-size: 14px;
  color: rgb(77,77,77);
}
.digi-up-cta p.digi-up-detail {
  margin-top: 6px;
  font-size: 13px;
  color: rgb(100,120,140);
}
.digi-up-cta a.digi-up-button {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  background: rgb(100,120,140);
  padding: 8px 16px;
  text-decoration: none;
  text-align: center;
}

/* Karty kategorií se zobrazením "sekce" (kat_vychozi_zobrazeni = 'sekce') -
   viz web_sekce_karty()/web_sekce_karta() ve web.php. Obecný mechanismus
   (nezávislý na konkrétní kategorii), dnes využitý u Rekvalifikace - barvu
   dodává společně přiřazená třída .balik + barva podle web_sekce_karta
   (sdílená web_rekval_barva u Rekvalifikace, jinak vlastní kat_barva/box-sedy),
   stejný princip jako jinde na webu.

   Velikosti písma, odsazení a vnitřní logika (pomlčkový seznam,
   "další N kurzů", ostré rohy) jsou záměrně přesnou kopií skutečné balíčkové
   dlaždice .col.balik (viz web_pole_balik ve web.php) - tahle karta je jen
   širší varianta téhož vzoru (přehled kategorie místo jednoho balíčku), proto
   má vypadat stejně, ne jen podobně.

   Spodní zarovnání odkazu "Zobrazit všechny" napříč kartami různé výšky (různý
   počet ukázek/délka názvu kategorie) řeší stejná technika jako u .balik-info -
   .sekce-karta je flex sloupec přes celou výšku řádku (grid v .sekce-karty
   automaticky srovná výšky sourozenců), odkaz má margin-top: auto, takže se
   sám přilepí ke spodnímu okraji karty. */
.sekce-karty {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin: 15px 0 20px;
}
.sekce-karta {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-top-width: var(--stripe-height, 4px);
  border-top-style: solid;
  background: #fff;
  padding: 10px 12px 12px;
  /* border-top-color dodá .balik + barva */
}
.sekce-karta h3 {
  margin: 0;
  font-size: 18px;
  line-height: 21px;
}
.sekce-karta h3 a {
  color: #222;
  text-decoration: none;
}
/* Přehled ukázkových kurzů - stejné hodnoty jako .balik-kurzy (seznam kurzů
   uvnitř DIGI/rekvalifikační dlaždice): malé písmo, pomlčková odrážka, žádný
   box ani padding na položku. */
.sekce-ukazky {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}
.sekce-ukazky li {
  font-size: 12px;
  line-height: 16px;
  color: #444;
  padding-left: 10px;
  position: relative;
}
.sekce-ukazky li:before {
  content: "–";
  position: absolute;
  left: 0;
  color: #888;
}
.sekce-ukazky a {
  color: rgb(51,102,153);
  text-decoration: none;
}
.sekce-ukazky a:hover {
  color: rgb(15,69,122);
}
/* "další N kurzů" - stejný princip jako .balik-dalsi (znak "+" dodává CSS,
   v textu není, jinak by byl dvakrát). */
.sekce-ukazky li.sekce-dalsi {
  color: #666;
  font-style: italic;
}
.sekce-ukazky li.sekce-dalsi:before {
  content: "+";
}
.sekce-odkaz {
  display: block;
  margin-top: auto;
  padding-top: 8px;
  font-size: 13px;
  font-weight: bold;
  color: rgb(51,102,153);
  text-decoration: none;
}

/* "Mohlo by vás také zajímat" - ruční propojení kategorií napříč stromem
   (tabulka web_kat_souvisi, viz web_kat_souvisejici_sekce() ve web.php),
   zadání 25.-26. 8. 2026. Záměrně NEJDE o dlaždice jako zbytek stránky - jen
   drobné barevné "chipy" se jménem, ať sekce zůstane vizuálně upozaděná a
   neodvádí pozornost od hlavní cesty webem (běžné dlaždice/mřížky výš).
   Vyzkoušeno naživo víc variant (prostý text, chipy, malé dlaždice) -
   uživatelka vybrala tuhle. --kat-c stejný princip jako u .kat-dlazdice/
   .col.balik - barva podle domovské oblasti PROPOJENÉ kategorie, ne aktuální
   stránky. */
.souvisejici-skoleni {
  margin-top: 24px;
}
.souvisejici-nadpis {
  margin: 0 0 8px;
  font-size: 13px;
  color: #666;
}
.souvisejici-seznam {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.souvisejici-odkaz {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--kat-c) 12%, white);
  border: 1px solid color-mix(in srgb, var(--kat-c) 30%, white);
  color: #333;
  font-size: 13px;
  text-decoration: none;
}
.souvisejici-odkaz:hover {
  background: color-mix(in srgb, var(--kat-c) 20%, white);
}
/* Chip vedoucí na KATEGORII (rozcestník s dalšími podkategoriemi/školeními,
   kat_typs_kod prázdné - viz web_kat_souvisejici_sekce() ve web.php) -
   střední barevný tón, stejný princip jako .kat-dlazdice.uroven2 (32%
   color-mix) o pár tisíc řádků níž, aby šel vizuálně odlišit od chipu
   vedoucího přímo na konkrétní školení (ten zůstává u světlého tónu výš,
   jako .kat-dlazdice.uroven3) - zadání 28. 8. 2026 ("políčka, která vedou do
   kategorie, udělejme střední barvou, políčka vedoucí na školení ponechme
   světlou barvou"). */
.souvisejici-odkaz.souvisejici-kategorie {
  background: color-mix(in srgb, var(--kat-c) 32%, white);
  /* Rámeček záměrně NE plnou barvou (--kat-c samotné) - na střední (32%)
     výplni to působilo příliš kontrastně/tvrdě. Mezi plnou barvou a světlým
     tónem výplně (32%) - zadání 28. 8. 2026 ("rámeček nedělej tolik plnou
     barvou, něco mezi plnou a středně světlou"). */
  border-color: color-mix(in srgb, var(--kat-c) 60%, white);
  color: #22262b;
}
.souvisejici-odkaz.souvisejici-kategorie:hover {
  background: color-mix(in srgb, var(--kat-c) 42%, white);
}
.sekce-odkaz:hover {
  color: rgb(15,69,122);
}

/* Sjednocený plochý vzhled odkazů z web_odkaz_prouzek() (26. 8. 2026) -
   "Předchozí znalosti"/"Návazná školení", "Zvolte si nejvhodnější formu
   školení", "a další..." apod. Nahrazuje starý gradientový obrázkový vzhled
   (p.go.lightgray / img/bg/light.png, sdílený dřív s #nav a .gobuttoni -
   proto se tu neupravuje ten sdílený základ, jen samostatná dvojice
   tříd .go/.go.lightgray přes vlastní pravidlo níž).
   Stejný princip jako .souvisejici-odkaz/.col.balik: světlý odstín pozadí +
   tenký rámeček + plná barva jen jako proužek vlevo. Pokud odkaz nese barvu
   domovské oblasti cílové kategorie (--kat-c, viz web_odkaz_prouzek()),
   použije se; jinak padá na neutrální box-sedy tón (rgb(142,161,184)) -
   to je i případ "Otevřený kurz/Individuální/Firemní školení" (formát nemá
   od 26. 8. 2026 vlastní barvu, viz rozhodnutí o kolizi s barvou oblastí). */
/* Oprava 26. 8. 2026 (uživatelka: "neodpovídá zbytku webu") - přesně
   převzatý vzorec .kat-dlazdice.uroven3 (13 %/25 % color-mix, pruh NAHOŘE,
   ne vlevo, ostré rohy - web nikde jinde zaoblení nepoužívá) a stejná šipka
   (img/bg/gowhite.svg, 14x14, přebarvená přes mask+background-color na
   var(--kat-c) - identická technika jako .kat-dlazdice .arrow). */
p.go {
  margin: 6px 0 0;
}
p.go a {
  display: flex;
  align-items: center;
  position: relative;
  box-sizing: border-box;
  min-height: 30px;
  padding: 4px 34px 4px 14px;
  border-radius: 0;
  background: color-mix(in srgb, var(--kat-c, rgb(142,161,184)) 13%, white);
  border: 1px solid color-mix(in srgb, var(--kat-c, rgb(142,161,184)) 25%, white);
  border-top: 4px solid var(--kat-c, rgb(142,161,184));
  background-image: none;
  color: rgb(78,89,101);
  font-weight: bold;
}
p.go a:hover, p.go a:active {
  background: color-mix(in srgb, var(--kat-c, rgb(142,161,184)) 22%, white);
  background-image: none;
}
p.go a::after {
  content: '';
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background-color: var(--kat-c, rgb(142,161,184));
  -webkit-mask: url('img/bg/gowhite.svg') no-repeat center / contain;
  mask: url('img/bg/gowhite.svg') no-repeat center / contain;
}
/* Přebíjí starší sdílené pravidlo ".hovertxt .go a { color: white; }" (viz
   výš v souboru) - na světlém plochém pozadí by byl bílý text nečitelný.
   Musí mít aspoň stejnou specificitu (2 třídy + 1 element), proto .hovertxt
   p.go a, ne jen p.go a. */
.hovertxt p.go a, .hovertxt p.go a:hover {
  color: rgb(78,89,101);
}

/* Oprava 26. 8. 2026 (uživatelka: "text v těchto řádcích není uprostřed" /
   výška neodpovídá) - p.go umístěné uvnitř staršího "hovertxt/nopad"
   boxovaného seznamu (pravý sloupec "Předchozí znalosti"/"Návazná školení",
   DOM: .hovertxt.nopad > .txtcol.right > ... > .p > .a > p.go > a) dědí
   padding/line-height ze sdílených pravidel ".hovertxt .p .a p a" a
   padding-right ze ".nopad .p .a"/".hovertxt .p a" (vyšší specificita než
   holé "p.go a"), což rozbíjelo vertikální centrování textu (asymetrický
   padding-top/bottom) a ubíralo místo šipce (padding-right 0-20px místo
   34px). Přidáním třídy .go do selektoru specificitu překonáme - stejný
   princip jako ".hovertxt p.go a" výš (barva textu). */
.hovertxt .p .a p.go a {
  padding: 4px 34px 4px 14px;
  line-height: normal;
  margin-top: 0;
  margin-bottom: 0;
}
.nopad .p .a p.go a {
  padding-right: 34px;
}

/* Formát školení (otevřený/individuální/firemní kurz) - napevno neutrální
   šedomodrá (rgb(142,161,184), stejná jako --box-hlavni/.box-sedy) místo
   dřívější orange/blue/grass (barvy_pod v web.php). Formát nemá od
   26. 8. 2026 vlastní barvu - ta stejná paleta (web_barvy) se používá i pro
   barvu oblasti, takže barevné f/i/o kolidovalo s oblastí (např. "Individuální
   školení" = modrá stejně jako oblast "Počítačová školení"). Stejná sada
   selektorů jako generované pojmenované barvy v ico2.7.css.php (viz komentář
   tam), jen vlastní třída - "orange/blue/grass" napřímo se NEUPRAVUJÍ, ať se
   nedotkne ostatních míst webu, která je případně používají pro barvu oblasti
   (web_kat_odkazy() apod.). Zesvětlenou variantu (dřív .{barva}.balik) záměrně
   nahrazuje rovnou existující .box-sedy - přidává se vedle "format-sedy" jako
   druhá třída (viz web_typ_skoleni_dlazdice(), web_show_kat.php:$barva_class),
   ne nová "format-sedy.balik" varianta navíc. */
.format-sedy .col, .format-sedy .full, .format-sedy .gobutton, .format-sedy tr:hover .gobuttoni,
.row .format-sedy.col, .row .format-sedy.sep, p.format-sedy, .format-sedy .sep {
  background: rgb(142,161,184);
}
.format-sedy .light, .row .format-sedy .light {
  background: rgb(197,207,219);
}
.col.format-sedy p.coltext, .col.format-sedy p.collink {
  background: rgb(238,241,244);
}
/* Doplňky 26. 8. 2026 (uživatelka): tmavší pruh nahoře (stejný vzorec jako
   .kat-dlazdice.uroven1: color-mix 65 % černá), tmavý text místo bílého
   (rgb(142,161,184) na bílý text dává jen ~2,6:1, pod hranicí WCAG AA
   4,5:1 - #22262b proti němu dává ~5,8:1, stejná barva textu jako
   .kat-dlazdice.uroven2/3) a stejné písmo/velikost/řez nadpisu jako na
   dlaždicích hlavního rozcestníku (.kat-dlazdice h2/h3/h4). box-sizing:
   border-box, ať pruh navíc nezvětší celkovou výšku dlaždice (stejný princip
   jako u .kat-dlazdice). */
.row .format-sedy.col {
  box-sizing: border-box;
  border-top: 4px solid color-mix(in srgb, rgb(142,161,184) 65%, black);
}
.col.format-sedy h2 a, .col.format-sedy h3 a, .col.format-sedy h4 a,
.col.format-sedy p, .col.format-sedy p a {
  color: #22262b;
}
.col.format-sedy h2, .col.format-sedy h2 a,
.col.format-sedy h3, .col.format-sedy h3 a,
.col.format-sedy h4, .col.format-sedy h4 a {
  font-size: 20px;
  line-height: 23px;
  font-weight: bold;
  font-family: "Calibri", "source-sans-pro-n3", "source-sans-pro", sans-serif;
}
/* Ikona (postavičky) přebarvená na tmavou plnou barvu pruhu nahoře (zadání
   26. 8. 2026) - stejná maskovací technika jako .kat-dlazdice.uroven2/3
   .ico-$kat_sef v ico2.7.css.php (mask-image = stejný soubor, vybarvení přes
   background-color), jen napevno tahle 3 jména ikon (jiná paleta jmen než
   kat_sef - "kurz"/"individualni"/"firemni" - proto se to nemůže spolehnout
   na tu generovanou pravidlo, dopisuje se to ručně tady). */
.col.format-sedy .ico-kurz,
.col.format-sedy .ico-individualni,
.col.format-sedy .ico-firemni {
  background-color: color-mix(in srgb, rgb(142,161,184) 65%, black);
  background-image: none;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: 56px 56px; mask-size: 56px 56px;
}
.col.format-sedy .ico-kurz {
  -webkit-mask-image: url('img/ico/kurz.svg');
  mask-image: url('img/ico/kurz.svg');
}
.col.format-sedy .ico-individualni {
  -webkit-mask-image: url('img/ico/individualni.svg');
  mask-image: url('img/ico/individualni.svg');
}
.col.format-sedy .ico-firemni {
  -webkit-mask-image: url('img/ico/firemni.svg');
  mask-image: url('img/ico/firemni.svg');
}

/* Šipka u "Více informací.../Více o..." (p.colmore a) - dřív starý světlý
   sprite (img/bg/go2.png, viz sdílené a.go pravidlo výš), navržený pro
   světlý text na tmavém pozadí. Tahle šipka teď sedí na světlém pozadí
   (.col.format-sedy p.coltext/collink), proto stejná tmavá plná barva a
   stejná technika (mask) jako u p.go a - zadání 26. 8. 2026. */
.col.format-sedy p.colmore a {
  background-image: none;
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-right: 34px;
  padding-top: 3px;
  min-height: 30px;
  font-size: 14px;
}
.col.format-sedy p.colmore a::after {
  content: '';
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background-color: color-mix(in srgb, rgb(142,161,184) 65%, black);
  -webkit-mask: url('img/bg/gowhite.svg') no-repeat center / contain;
  mask: url('img/bg/gowhite.svg') no-repeat center / contain;
}

/* Souhrnný řádek "Příspěvek od Úřadu práce: ..." nad úvodním textem
   rekvalifikačních kategorií (viz web_rekval_souhrn_banner() ve web.php)
   nepotřebuje žádné nové CSS - recykluje existující kombinaci .typs-info.balik
   + sdílenou barvu celé rodiny Rekvalifikace (viz web_rekval_barva ve web.php -
   dokud kategorie 123 nemá v administraci vlastní barvu, jde o fallback
   .box-sedy), stejný mechanismus jako .typs-info na podstránkách otevřený/
   individuální/firemní školení. */

/* Rekvalifikace (typy_skol.certifikat = 'r') - blok "Příspěvek na rekvalifikaci".
   Obalový .digi-dvojblok (rozvržení dvou sloupců) a pravý sloupec .digi-up-cta
   (přerušovaný rámeček) se recyklují beze změny - viz web_rekval_prispevek_blok()
   ve web.php, kde má výstupní <div> obě třídy najednou. Tady je jen barevné
   odlišení levého sloupce - stejná šedá jako výchozí .box-sedy (rgb(238,241,244)
   pozadí / rgb(142,161,184) rámeček), kterou má karta "Rekvalifikační kurzy" ve
   web_prispevek_karta_class() (kategorie nemá vlastní kat_barva, spadá tedy do
   fallbacku .box-sedy) - ne modrá z brand palety, jak jsme měli původně. */
.rekval-prispevek {
  background: rgb(238,241,244);
  border: 1px solid rgb(142,161,184);
  border-top-width: var(--stripe-height, 4px);
}
/* .digi-prispevek-stats/.digi-prispevek-pozn mají natvrdo červenohnědou barvu
   DIGIkurzu (#733529/#D1604A) - tady je přepisujeme na stejnou šedou paletu
   jako výše, ať statistická karta (recyklovaná ze stejné PHP šablony, viz
   web_rekval_prispevek_blok) barevně sedí k šedému rámečku. */
.rekval-prispevek .digi-prispevek-stats .lbl {
  color: rgb(78,89,101);
}
.rekval-prispevek .digi-prispevek-stats .val {
  color: rgb(78,89,101);
}
.rekval-prispevek .digi-prispevek-stats .val.hlavni {
  color: rgb(142,161,184);
}
.rekval-prispevek .digi-prispevek-pozn {
  color: rgb(78,89,101);
}
.rekval-prispevek p {
  font-size: 13px;
  color: rgb(78,89,101);
  margin: 0 0 8px;
}
.rekval-prispevek a {
  font-size: 13px;
  color: rgb(51,102,153);
  font-weight: bold;
}
/* Selektor musí mít vyšší specificitu než ".digi-up-cta p" (třída + element),
   jinak margin přebíjí zpátky na 0 - to byl důvod, proč předchozí úpravy
   margin-bottom neměly vůbec žádný viditelný efekt. Navíc pevná výška řádku
   (line-height), protože zbylá "mezera" pod nadpisem nebyla margin (ten byl
   fakticky celou dobu 0), ale prázdný prostor daný výškou řádku textu. */
.rekval-up-cta .rekval-up-nadpis {
  font-size: 13px;
  line-height: 15px;
  font-weight: bold;
  color: rgb(77,77,77);
  margin: 0 0 4px;
}
/* Pravý sloupec u rekvalifikace nemá "roztahovat" obsah přes celou výšku
   boxu jako u DIGI (tam justify-content: space-between schválně tlačí jediné
   tlačítko dolů) - u víc tlačítek v mřížce chceme, aby zůstala hned pod
   nadpisem "Přihlášení přes systém Úřadu práce", ne odsazená dolů, když je
   řádek jen jeden (méně obsahu = víc volného místa, které by space-between
   rozestrkalo doprostřed). */
.rekval-up-cta {
  justify-content: flex-start;
}
/* Odkazy na přihlášení přes systém ÚP jako tlačítka (stejný styl jako
   .digi-up-button), viz web_rekval_prispevek_blok ve web.php. Mřížka 2 sloupců
   místo jednoho pod sebou - u 4 odkazů (prezenčně/online x pracovní dny/
   víkendy, běžný počet) to zabere jen 2 řádky místo 4 a zároveň se logicky
   spárují (forma vs. termín) vedle sebe. Menší mezera mezi řádky (row-gap)
   než mezi sloupci (column-gap), ať tlačítka působí jako jeden kompaktní blok. */
.rekval-up-tlacitka {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 8px;
  row-gap: 4px;
}
/* Selektor musí mít stejnou/vyšší specificitu jako ".digi-up-cta a.digi-up-button"
   (2 třídy + tag), jinak se přes něj tyhle vlastnosti (padding, font-size,
   display...) neprosadí - to byla příčina, proč tlačítka předtím nebyla
   vycentrovaná ani menší, i když jsme to nastavovali. Výška/písmo/padding
   záměrně STEJNÉ jako DIGI "Napište nám" (žádost byla sjednotit, ne zmenšit).
   display: block (ne flex) - ::first-letter (viz níže) podle specifikace CSS
   funguje jen na block/inline-block, ne na flex kontejnerech; centrování řeší
   text-align, ne flex align-items/justify-content. */
.rekval-up-cta a.rekval-up-button {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  margin-top: 0;
}
/* Vždy velké první písmeno bez ohledu na to, jak je popisek zadaný v
   administraci (web_odkaz_up.popisek) - ::first-letter místo text-transform:
   capitalize, protože capitalize by zvětšilo první písmeno KAŽDÉHO slova
   ("Prezenční Kurz V Pracovní Dny"), ne jen první písmeno celého textu. */
.rekval-up-button::first-letter {
  text-transform: uppercase;
}

/* DIGIkurz - dvousloupcový popis (Co se naučíte / Ukázka výuky + Z čeho se skládá).
   Rozměry sloupců (max-width 390px) odpovídají existující dvousloupcové sazbě .txtcol. */
.digi-popis-dvojblok {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.digi-popis-col {
  flex: 1 1 300px;
  min-width: 0;
  max-width: 390px;
  box-sizing: border-box;
}
.digi-popis-col h3 {
  margin-bottom: 10px;
}
/* Větší odsazení nad nadpisy - jen na stránce DIGIkurzu (dřív bylo zavedené
   globálně přes .popis h3, což zvětšilo mezery i na běžných stránkách školení;
   teď je to vázané jen na tenhle dvousloupcový blok). */
.digi-popis-dvojblok h3 {
  margin-top: 24px;
}
/* Zarovnání začátku obou sloupců na stejnou úroveň - "Co se naučíte" (první prvek
   levého sloupce) dostává menší odsazení než obecná DIGI hodnota výše,
   protože pravý sloupec začíná rámečkem videa, ne odsazeným nadpisem. */
.digi-popis-col > h3:first-child {
  margin-top: 14px;
}
.digi-video-box {
  margin-top: 14px;
  border: 1px dashed rgb(190,190,190);
  padding: 14px 16px;
  box-sizing: border-box;
  margin-bottom: 24px;
}
.digi-video-box h3 {
  margin-top: 0 !important;
}
.digi-video-teaser {
  position: relative;
  margin: 0;
  min-height: 28px;
  font-size: 13px;
  color: rgb(100,120,140);
}
.digi-video-text {
  display: block;
  padding-left: 38px;
  line-height: 28px;
}
.digi-video-ikona {
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  background: #eef0f2;
  text-decoration: none;
}
/* Trojúhelník je čistě CSS tvar (border trik), ne textový znak "►" - na řadě
   systémů má totiž takový symbol vlastní pevnou barvu z barevného fontu
   (emoji-styl), kterou CSS "color" nepřebije, takže by šel obtížně přebarvit
   na bílou. Border trik dává nad barvou i tvarem 100% kontrolu. */
.digi-video-ikona::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid rgb(142,161,184);
  transform: translate(-40%, -50%); /* -40 % místo -50 % = optická korekce,
    aby trojúhelník (užší u hrotu) působil vystředěně, ne jen jeho obalový box */
}
/* Aktivní varianta - video už má odkaz, ikona je klikací, proto výrazněji
   obarvená hlavní barvou webu (stejná jako tlačítko "Napište nám" u příspěvku
   ÚP, .digi-up-button) a s bílým trojúhelníčkem pro dobrý kontrast. */
.digi-video-ikona-aktivni {
  cursor: pointer;
  background: rgb(100,120,140);
}
.digi-video-ikona-aktivni::after {
  border-left-color: #fff;
}
.digi-video-ikona-aktivni:hover {
  background: rgb(80,98,116);
}
/* Text odkazu na video - v .popis mají odkazy standardně tlumenou "textovou"
   barvu (viz ".popis a" na začátku souboru, myšlené pro odkazy plynoucí v běžném
   textu popisu). Tady má ale jít o samostatný, na první pohled rozpoznatelný
   odkaz, proto výslovně stejná modrošedá barva jako mají odkazy jinde na webu
   (viz obecné selektory "a" / "a:hover" výše) - dvě třídy v selektoru
   (.digi-video-teaser .digi-video-link) mají vyšší specificitu než ".popis a",
   aby se přebilo bez ohledu na pořadí v souboru. */
.digi-video-teaser .digi-video-link {
  color: rgb(51,102,153);
}
.digi-video-teaser .digi-video-link:hover {
  color: rgb(15,69,122);
}

/* === Podstránka "Ukázka výuky" DIGIkurzu (velký přehrávač s náhledem) ===
   Viz web_digi_video_stranka() ve web.php - samostatná minimální podstránka:
   nadpis (H1, mimo tenhle blok), rovnou pod ním přehrávač, pak výrazný odkaz
   zpět. Barevně navazuje na existující DIGI prvky, ne nová paleta:
   - ikona přehrávače = zvětšená verze .digi-video-ikona-aktivni (stejná
     modrošedá rgb(100,120,140), stejný trojúhelník přes border, jen větší) -
     žádné nové kulaté tlačítko, sitewide standard jsou ostré rohy (viz
     tier-mockup_2.md, "žádné zaoblené rohy na dlaždicích", výjimka jen
     u odznaků).
   - odkaz zpět = zvětšená verze .digi-up-button (stejné barvy, jen výraznější
     rozměr, protože je to jediný prvek pod videem). */
.digi-video-stranka {
  max-width: 900px;
  margin: 20px auto 0;
}
.digi-video-prehravac {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
.digi-video-prehravac iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.digi-video-prehravac-tlacitko {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.digi-video-prehravac-tlacitko img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.digi-video-prehravac-ikona {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 84px;
  height: 84px;
  transform: translate(-50%, -50%);
  background: rgba(100,120,140,0.9);
}
.digi-video-prehravac-tlacitko:hover .digi-video-prehravac-ikona {
  background: rgb(100,120,140);
}
.digi-video-prehravac-ikona::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-left: 28px solid #fff;
  transform: translate(-38%, -50%); /* optická korekce vystředění trojúhelníku,
    stejný princip jako u .digi-video-ikona::after výš */
}
.digi-video-zpet {
  margin: 22px 0 30px;
  text-align: center;
}
.digi-video-zpet-odkaz {
  display: inline-block;
  background: rgb(100,120,140);
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  padding: 14px 30px;
  text-decoration: none;
}
.digi-video-zpet-odkaz:hover {
  background: rgb(80,98,116);
}
@media (max-width: 600px) {
  .digi-video-prehravac-ikona {
    width: 60px;
    height: 60px;
  }
  .digi-video-prehravac-ikona::after {
    border-top-width: 13px;
    border-bottom-width: 13px;
    border-left-width: 20px;
  }
  .digi-video-zpet-odkaz {
    display: block;
    box-sizing: border-box;
  }
}

.digi-balik-chipy {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
a.digi-chip {
  display: inline-block;
  background: #DDD;
  color: rgb(51,102,153);
  font-size: 15px;
  line-height: 18px;
  padding: 4px 12px;
  white-space: nowrap;
  text-decoration: none;
}
a.digi-chip:hover {
  background: #666;
  color: #fff;
}
a.digi-chip:hover .digi-chip-delka {
  color: #ddd;
}
.digi-chip-delka {
  font-size: inherit;
  color: #777;
}

/* === Výčet (obsah_druh='vycet') ===
   Prostý výpis položek jako "chipy", stejný vizuální princip jako .digi-chip
   (viz výše), ale bez odkazu - položky nikam nevedou, jen vyjmenovávají
   možnosti (např. "Pro koho je příspěvek určený"). Proto <span>, ne <a>, a
   tmavý neutrální text místo modré barvy odkazů. Ostré rohy - stejná
   konvence jako jinde na webu (žádné zaoblení u tohoto typu prvku). */
.vycet-chipy {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}
.vycet-chip {
  display: inline-block;
  background: #eee;
  color: #333;
  font-size: 15px;
  line-height: 18px;
  padding: 6px 14px;
  white-space: nowrap;
}
/* Nadpis nad chipy (h3 z obsah_nazev, viz web.php) záměrně beze změny -
   vypadá stejně jako standardní <h3> jinde na webu (žádná vlastní barva/
   velikost/verzálky), viz zpětná vazba: "má vypadat jako <h3> na této
   stránce". Dřívější malý 'štítkový' styl (podle .balik-stitek/.box-label)
   byl odstraněn. */

/* === Číslovaný seznam kroků (ol.kroky) ===
   Čistě CSS řešení, žádný nový obsah_druh - autor napíše přímo do textového
   pole (obsah_druh='text') <ol class="kroky"><li>...</li>...</ol>. Číslo v
   kroužku se generuje přes CSS counter (content: counter(kroky)), ne ručně
   psaný text - při přidání/odebrání kroku se nic nepřečíslovává. Kulatý
   odznak je záměrná výjimka ze "sharp corners" konvence webu - je to bullet/
   odznak, ne karta. Svislá spojovací čára mezi kroužky záměrně vynechána. */
.obsah_text ol.kroky {
  list-style: none;
  margin: 15px 0;
  padding: 0;
  counter-reset: kroky;
}
.obsah_text ol.kroky li {
  counter-increment: kroky;
  position: relative;
  min-height: 32px;
  padding: 5px 0 5px 46px;
  margin-bottom: 0;
}
.obsah_text ol.kroky li::before {
  content: counter(kroky);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgb(100,120,140);
  color: #fff;
  font-weight: bold;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* === Box (obsah_druh='box', obsah_vychozi_zobrazeni='box') ===
   Dvě varianty - "stat" (štítek/hodnota/jednotka, např. Výše příspěvku) a "feature"
   (ikona/nadpis/popis, např. "S čím vám pomůžeme") - viz web_obsah_show.

   Barva nepřichází z nového pole, ale z kategorie stránky (kat_barva) přes existující
   .{barva}.balik z ico_css.php - ta teď navíc nastavuje CSS proměnné --box-hlavni
   (plná barva, na hlavní hodnotu) a --box-label (ztmavená na 55 %, na štítek).

   Šířka sloupců se řeší CSS gridem (auto-fit/minmax), ne v PHP a ne flexboxem -
   flexbox (flex:1 1 0) by se zalomil, jen kdyby se fyzicky nevešel, takže by se
   4 širší feature-karty pokusily vměstnat vedle sebe do úzkých sloupečků místo
   pěkných 2×2. Grid s minmax se zalomí podle toho, kolik sloupců dané minimální
   šířky se do řádku vejde - stat karty (užší) jich pojmou víc, feature karty
   (širší, .box-row-feature) se tak přirozeně zalomí po dvou. */
.box-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
/* H3 bezprostředně následovaný box-row (box/box_bily) - mezera nastavená na
   12px (8px + 4px podle zpětné vazby). Skutečnou dominantní mezeru netvoří
   margin-bottom u samotného h3 (6px), ale margin-bottom celého obalu
   ".obsah_text" (25px) - ty dvě hodnoty se přes sebe "sléváním okrajů"
   (margin collapsing) spojí na tu VĚTŠÍ z nich, tedy 25px, ne 6px. -13px na
   box-row proto vynuluje těch 25px na požadovaných 12px (25 + (-13) = 12).
   .box-row je sourozenec celého ".obsah_text" obalu (ne přímo h3 uvnitř něj),
   proto :has() - "obsah_text, jehož poslední prvek je h3" + box-row hned za ním. */
.obsah_text:has(> h3:last-child) + .box-row {
  margin-top: -13px;
}
.box-row.box-row-feature {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.box-row .box {
  position: relative;
  box-sizing: border-box;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  border-top-width: var(--stripe-height, 4px);
  border-top-style: solid;
  /* border-top-color se tu záměrně nenastavuje - vždy ji dodá .{barva}.balik
     (ico_css.php) nebo fallback .box-sedy, ať s nimi nesoutěží o prioritu. */
  padding: 11px 15px;
}
/* Box s odkazem (obsah_odkaz_id/obsah_odkaz vyplněné, viz web_show_kat.php,
   třída "box-s-odkazem" se přidává jen v tomhle případě) - dole se rezervuje
   pevné místo pro .box-odkaz, ten je pak position:absolute ukotvený ke
   spodnímu okraji (viz níže). Díky tomu je nezávislý na tom, kolik textu je
   nad ním, i na chování gridu/flexboxu - v rámci jednoho řádku (.box-row má
   všechny boxy stejně vysoké, viz výchozí grid align-items:stretch) tak
   odkazy vždy vyjdou na stejnou linii. Boxy BEZ odkazu tohle místo
   nerezervují, ať tam nezůstává zbytečná prázdná plocha. */
.box-row .box.box-s-odkazem {
  padding-bottom: 44px;
}
/* box_bily (obsah_druh='box_bily') - vizuální varianta obsah_druh='box',
   liší se jen barvou pozadí (bílá místo tónovaného pozadí podle kategorie).
   Selektor ".box-row .box.box-bily" (3 třídy) má vyšší specificitu než
   ".{barva}.balik" (2 třídy, viz ico_css.php), takže spolehlivě přebije jen
   "background" bez ohledu na pořadí v souboru - border-top-color a CSS
   proměnné --box-hlavni/--box-label (barva ikony/hodnoty/nadpisu) zůstávají
   podle barvy kategorie beze změny. */
.box-row .box.box-bily {
  background: #fff;
}
/* Celoplošný klikatelný odkaz (jen když má box obsah_odkaz_id, viz web.php a
   web_show_kat.php) - stejný princip jako .col.balik .balik-link /
   .prispevek-karta-link. Ostatní prvky boxu nemají vlastní z-index, klik na
   ně tak propadá až na tenhle overlay - jen .box-odkaz níž zůstává vlastním
   focusovatelným odkazem nad ním, kvůli přístupnosti. */
.box-link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.box-row .box .box-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
  color: var(--box-label, #777);
}
.box-row .box .box-value {
  font-size: 20px;
  font-weight: bold;
  color: var(--box-hlavni, #333);
}
.box-row .box .box-unit {
  font-size: 11px;
  margin-top: 2px;
  color: var(--box-label, #777);
}

/* Varianta "feature" (obsah_obrazek vyplněný) - ikona + tučný nadpis + popis,
   např. "S čím vám pomůžeme". Ikona je CSS maska, ne <img> - viditelnou barvu
   dodává background-color (--box-hlavni), tvar určuje jen alfa kanál nahraného
   souboru (viz konzultace k přípravě ikony: jednobarevný tvar, průhledné pozadí). */
.box-row .box .box-icon {
  width: 26px;
  height: 26px;
  margin-bottom: 8px;
  background-color: var(--box-hlavni, #333);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: left top;
  mask-position: left top;
}
.box-row .box .box-title {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 5px;
  color: var(--box-label, #333);
}
.box-row .box .box-desc {
  font-size: 13px;
  line-height: 17px;
  color: rgb(77,77,77);
}
/* Odkaz na konci boxu (obsah_odkaz_id + obsah_odkaz_popis, viz web.php) -
   stejné grafické ztvárnění jako "Více o..." odkazy v sekci "Získejte
   příspěvek na vzdělávání" (viz .prispevek-odkaz). position:absolute +
   ukotvení na left/right/bottom (vůči .box-row .box, který má position:
   relative) - odkaz tak vždy sedí ve stejné vzdálenosti od spodního okraje
   boxu, napříč celým řádkem na stejné lince (viz .box-s-odkazem výše).
   Vlastní z-index, ať zůstává samostatně focusovatelný nad celoplošným
   .box-link overlayem. */
.box-row .box .box-odkaz {
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 11px;
  z-index: 2;
  display: inline-block;
  font-size: 13px;
  font-weight: bold;
  color: rgb(51,102,153);
  text-decoration: none;
}
/* Popis (obsah_popis) - jednotný styl bez ohledu na variantu boxu (feature
   s ikonou, nebo stat bez ikony) - viz web.php. Stejné písmo jako .box-desc,
   ale samostatná třída, ať jde nezávisle stylovat i nadál. */
.box-row .box .box-popis {
  margin-top: 6px;
  font-size: 13px;
  line-height: 17px;
  color: rgb(77,77,77);
}

/* Výchozí šedá pro kategorie bez přiřazené kat_barva - úmyslně mimo paletu
   web_barvy, ať se nikdy nesrazí s barvou žádné budoucí kategorie. Selektor
   záměrně jen ".box-sedy" (ne ".box.box-sedy") - stejná obecná konvence jako
   u .{barva}.balik v ico_css.php (jen dvě třídy, žádná vazba na ".box"), ať
   funguje i na prvcích, které nejsou "box" (např. .prispevek-karta). */
.box-sedy {
  background: rgb(238,241,244);
  border-color: rgb(142,161,184);
  border-top-color: rgb(142,161,184);
  --box-hlavni: rgb(142,161,184);
  --box-label: rgb(78,89,101);
}
/* .box-sedy sama o sobě řeší jen zesvětlené pozadí + rámeček celé sekce (viz
   výše) - sytou barvu záhlaví tabulky (h3.full) a tlačítka Objednat (td.gobutton/
   td.gobuttoni) jinde na webu dodává .{barva}.balik z ico_css.php, což je
   soubor mimo tenhle CSS a nemáme na něj náhled. Bez téhle výjimky by tak
   tabulka rekvalifikace (jediná, která .box-sedy pro cenik-box používá, viz
   web_rekval_terminy ve web.php) měla průhledné/nekontrastní záhlaví a tlačítko
   (přesně bug, který jsme řešili) - proto to tady dopisujeme přímo, natvrdo
   stejnou barvou jako --box-hlavni výše. */
.box-sedy h3.full {
  background: rgb(142,161,184);
}
/* Text tmavý, ne bílý (oprava 26. 8. 2026 - kontrola kontrastu, uživatelka:
   "text by měl být tmavý") - rgb(142,161,184) je moc světlá na bílý text
   (~2,6:1, pod hranicí WCAG AA 4,5:1). #22262b je stejná tmavá barva textu,
   jakou má .kat-dlazdice.uroven2/3 na svých (jinak tónovaných) pozadích -
   proti rgb(142,161,184) dává ~5,8:1, v pohodě prochází. */
.box-sedy h3.full a {
  color: #22262b;
}
.box-sedy .gobutton,
.box-sedy .gobuttoni {
  background: rgb(142,161,184);
}
.box-sedy .gobutton a,
.box-sedy .gobuttoni a {
  color: #22262b;
}
/* Stejná oprava kontrastu musí platit i při najetí myší na řádek - jinak
   vyhraje starší obecné pravidlo ".table tbody tr:hover .gobutton a"
   (barevný blok "White" na začátku souboru, stejná specificita, ale dřív v
   pořadí), tlačítko zůstane tmavé (beze změny), ale text se přepne zpátky
   na bílou, nečitelnou na jeho pozadí - zadání 27. 8. 2026 ("text na
   tlačítku se změní na bílou, to by být nemělo"). */
.box-sedy tbody tr:hover .gobutton a,
.box-sedy tbody tr:hover .gobuttoni a {
  color: #22262b;
}

/* 20.7.2026 - Nápovědní bublina k náročnosti kurzu na detailu školení */
.typs-napoveda {
  position: relative;
  display: inline-block;
  margin-left: 5px;
  top: -3px;
  vertical-align: middle;
}
.typs-napoveda-ikona {
  display: inline-block;
  width: 15px;
  height: 15px;
  line-height: 15px;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  color: #22262b; /* oprava kontrastu 26. 8. 2026, viz .box-sedy h3.full a výš */
  background: rgb(142,161,184);
  border-radius: 50%;
  cursor: help;
}
.typs-napoveda:hover .typs-napoveda-ikona,
.typs-napoveda:focus-within .typs-napoveda-ikona {
  background: rgb(100,120,140);
}
.typs-napoveda-bublina {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  margin-bottom: 9px;
  width: 260px;
  max-width: 78vw;
  padding: 9px 12px;
  background: rgb(60,70,85);
  color: #fff;
  font-size: 13px;
  font-weight: normal;
  line-height: 1.4;
  text-align: left;
  border-radius: 5px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.28);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
  z-index: 40;
  pointer-events: none;
}
.typs-napoveda-bublina:after { /* šipka směřující dolů k ikoně */
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgb(60,70,85);
}
.typs-napoveda:hover .typs-napoveda-bublina,
.typs-napoveda:focus-within .typs-napoveda-bublina {
  opacity: 1;
  visibility: visible;
}

/* Textový obsah */
.obsah_text { margin-bottom: 25px; margin-right: 5px; }
.obsah_text h2 { margin-top: 26px; margin-bottom: 8px; }
.obsah_text h3 { margin-bottom: 6px; }
.obsah_text x_h3 { margin-top: 11px; margin-bottom: 4px; }
.obsah_text h4, .obsah_text p { margin-top: 18px; }
/* Odstavec hned po nadpisu má mít tišší odsazení než odstavec za odstavcem -
   obecné pravidlo výše (18px) proto tady zůstává, tohle ho jen cíleně přepisuje
   pro tenhle jeden konkrétní případ (h2+p / h3+p), 14.7.2026. */
.obsah_text h2 + p, .obsah_text h3 + p { margin-top: 8px; }
.obsah_text .col p { margin-top: 0;}
.obsah_text p.prvni, .obsah_text .txtcol h4 { margin-top: 0px; }

.obsah_text img { margin: 8px 0 10px 0; }

.obsah_vpravo { float: right; }
h3 .obsah_vpravo { line-height: 21px; }

/* Popis */
.popis {
  margin-right: 5px;

  min-height: 44px;
  margin-bottom: 11px;
}
/* Kratší varianta pro stránku Hodnocení (viz web_show_kat.php, $pod == 'hod') -
   text je jen jedna krátká věta, min-height 44px z běžného .popis by pod ní
   nechal zbytečně velkou mezeru. Netýká se ostatních podstránek (otevřený
   kurz/individuální/firemní/ceník), ty mají delší úvodní odstavce a běžný
   .popis jim vyhovuje beze změny. */
.popis.popis-kratky {
  min-height: 0;
  margin-bottom: 4px;
}
.popis.popis-kratky p {
  padding-bottom: 2px;
}

/* Stránkování na stránce Hodnocení (viz web_hodnoceni_stranky() ve
   vypis_hodnoceni.php) - popisek + očíslovaná "tlačítka" + šipky vpřed/vzad,
   ať je zřejmé, že jde o stránkování, ne jen o volně plovoucí čísla. */
.hodnoceni-strankovani {
  margin: 20px 0;
  font-size: 14px;
}
.hodnoceni-strankovani-popisek {
  color: rgb(119,119,119);
  margin-right: 4px;
}
.hodnoceni-strankovani a,
.hodnoceni-strankovani strong,
.hodnoceni-strankovani-sipka-neaktivni {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 4px;
  margin: 0 1px;
  border: 1px solid #ddd;
  font-size: 13px;
  font-weight: normal;
  text-decoration: none;
  color: rgb(51,102,153);
  vertical-align: middle;
}
.hodnoceni-strankovani a:hover {
  border-color: rgb(51,102,153);
  color: rgb(15,69,122);
}
.hodnoceni-strankovani strong.hodnoceni-strankovani-aktualni {
  background: rgb(51,102,153);
  border-color: rgb(51,102,153);
  color: #fff;
  font-weight: bold;
}
.hodnoceni-strankovani-sipka-neaktivni {
  color: #ccc;
  border-color: #eee;
}
.hodnoceni-strankovani-mezera {
  display: inline-block;
  padding: 0 3px;
  color: #999;
}
.popis_linka {
  min-height: 79px;
}
.popis, .collink, .href p, .href h3, #home p {
  background: url('img/bg/goblue-a.png') no-repeat -30px 0px;
}
.popis p, .popis a {
  display: block;
  padding-bottom: 7px;
}
/* Menší mezera mezi úvodní větou a seznamem dílčích školení balíčku */
.popis p.balik-intro {
  padding-bottom: 3px;
}
/* Stejná mezera i po seznamu (např. "Co se naučíte"), jako je za odstavcem výše -
   aby odsazení před dalším nadpisem (např. "Z čeho se kurz skládá") bylo shodné.
   margin-top +2px (mezera pod nadpisem "Co se naučíte") a margin-bottom +4px
   (mezera pod celým seznamem, bylo 7px) podle zpětné vazby. */
/* Mezera PŘED nadpisem "Co se naučíte" - cíleně jen na tenhle konkrétní
   nadpis (přes :has(), ne obecné pravidlo pro h3 - to už jednou dřív
   nechtěně ovlivnilo i jiné, nesouvisející stránky, viz komentář níže).
   ":has(+ ul.list)" pozná právě "Co se naučíte" podle toho, že za ním
   bezprostředně následuje <ul class="list">, na rozdíl od jiných nadpisů v
   .popis (např. "Osnova kurzu"), které tenhle vzorec nemají. */
.popis h3:has(+ ul.list) {
  margin-top: 12px;
}
.popis ul.list {
  margin-top: 2px;
  margin-bottom: 16px;
}
/* Odkazy na dílčí školení balíčku ("Z čeho se kurz skládá") - .popis a výše by jim
   dávalo display:block + padding-bottom:7px (zvětšovalo by mezeru mezi odrážkami),
   proto zde vracíme normální inline chování a stejné řádkování jako u "Co se naučíte". */
.popis .balik-obsah a {
  display: inline;
  padding-bottom: 0;
  color: rgb(51, 102, 153);   /* stejná modrá jako odkazy v levém menu (#left .go a) */
}
.popis .balik-obsah a:hover {
  color: rgb(15, 69, 122);    /* tmavší modrá při najetí - stejná konvence jako jinde na webu */
}
/* "Získejte příspěvek na kurz" - viz web_typs_prispevek_balicky() ve web.php.
   Celý box recykluje existující kartu .prispevek-karta (stejná jako
   "DIGIkurzy"/"Vzdělávání pro firmy" jinde na webu, viz web_prispevek_karta_
   class) - nadpis/text/barevný pruh nahoře odtud beze změny, tady jen vlastní
   styl seznamu balíčků (mimo běžný kontext .popis, proto vlastní pravidla) a
   patička s přepínačem + odkazy na jednom řádku. */
/* Zúžení dvou konkrétních míst, na které sdílená .prispevek-karta/.prispevek-
   karta p (12px/14px padding, 8px mezera pod odstavcem) nestačí - specifické
   jen pro tenhle box (.kurz-prispevek-karta), ostatní karty (DIGIkurzy,
   Vzdělávání pro firmy...) zůstávají beze změny. */
.prispevek-karta.kurz-prispevek-karta {
  padding-bottom: 6px;
}
.prispevek-karta p.kurz-v-balicich-uvod {
  margin-bottom: 4px;
}
.kurz-v-balicich {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
}
.kurz-v-balicich li {
  font-size: 12px;
  line-height: 16px;
  padding: 2px 0 2px 10px;
  position: relative;
}
.kurz-v-balicich li:before {
  content: "\2013";
  position: absolute;
  left: 0;
  color: #888;
}
.kurz-v-balicich a {
  color: rgb(51, 102, 153);
  text-decoration: none;
}
.kurz-v-balicich a:hover {
  color: rgb(15, 69, 122);
}
.kurz-v-balicich-checkbox {
  display: none;
}
.kurz-v-balicich-vse {
  display: none;
}
.kurz-v-balicich-checkbox:checked ~ .kurz-v-balicich-zkraceny {
  display: none;
}
.kurz-v-balicich-checkbox:checked ~ .kurz-v-balicich-vse {
  display: block;
}
/* Patička - "Zobrazit další N kurzů"/"Zobrazit méně" vlevo, "Zjistit více: ..."
   vpravo, na jednom řádku (flex + space-between); nevejdou-li se vedle sebe
   (úzká obrazovka), zalomí se samy pod sebe (flex-wrap), bez media query. */
.kurz-v-balicich-paticka {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
  border-top: 1px solid #eee;
  padding-top: 4px;
  margin-top: 0;
}
.kurz-v-balicich-paticka label {
  cursor: pointer;
  color: rgb(51, 102, 153);
  font-weight: bold;
  font-size: 13px;
}
.kurz-v-balicich-paticka label:hover {
  color: rgb(15, 69, 122);
}
.kurz-v-balicich-skryt {
  display: none;
}
.kurz-v-balicich-checkbox:checked ~ .kurz-v-balicich-paticka .kurz-v-balicich-zobrazit {
  display: none;
}
.kurz-v-balicich-checkbox:checked ~ .kurz-v-balicich-paticka .kurz-v-balicich-skryt {
  display: inline;
}
.kurz-v-balicich-odkazy {
  font-size: 13px;
  color: rgb(77, 77, 77);
  margin: 0;
}
.kurz-v-balicich-odkazy a {
  color: rgb(51, 102, 153);
  text-decoration: none;
}
.kurz-v-balicich-odkazy a:hover {
  color: rgb(15, 69, 122);
}
.popis_linka p, .popis_linka a { 
  min-height: 60px;
  padding-right: 20px;
  padding-bottom: 6px;
}
.popis a.href, p.collink a, .href .p a, .href p a, .href h3 a {
  background-image: url('img/bg/goblue.svg');  /* SVG náhrada za goblue.png/goblue-a.png - jedna barva, beze změny na hover/active (rozdíl byl zanedbatelný) */
  background-position: right bottom;
  background-repeat: no-repeat;
}
.nogo .p .a, .nogo .p a, .nogo:hover .p a, p.nogo a, p.nogo a:hover {
  background-image: none;
}

/* Tabulka */
.table {
  margin-right: 5px;
  margin-bottom: 24px;
}
/* Rámeček + pozadí celé ceníkové sekce na podstránkách firemní/individuální/
   otevřený (viz web_show_kat.php - třídy "balik cenik-box" se přidávají jen
   u téhle konkrétní ceníkové tabulky, ne u ostatních 2 použití web_table_start
   jinde). Barva RÁMEČKU (na všech stranách, ne jen nahoře) i zesvětlené
   pozadí dodá .{barva}.balik z ico_css.php - tady se nastavuje jen tloušťka/
   styl, žádná vlastní barva (na rozdíl od .box/.prispevek-karta, tady má být
   celý rámeček barevný podle role firemní/individuální/otevřený, ne šedý). */
.row.table.cenik-box {
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-top-width: var(--stripe-height, 4px);  /* sjednoceno z původních 3px */
  /* border-color (všechny strany) a background dodá .balik + barva, viz výše */
}
.table h3 a {
  padding-top: 1px;
  padding-bottom: 4px;
  min-width: 93%;
}
/* Písmo záhlaví tabulky sjednoceno s nadpisy dlaždic v rozcestníku
   (.kat-dlazdice h3 - 20px/bold/Calibri, viz web2.7.css výš) - zadání
   27. 8. 2026 ("stejným typem písma jako jsou nadpisy v dlaždicích").
   Rodina Calibri už h3.full dostává sitewide (řádek ~193), tady jen
   doplňujeme velikost/tučný řez, jen v kontextu tabulky. */
.table h3.full {
  font-size: 20px;
  line-height: 23px;
  font-weight: bold;
}
.table table {
  width: 100%;
  border-collapse: collapse;
  /* Bez vlastního margin-bottom - uvnitř .table divu už za tabulkou nic
     nenásleduje, jen 25px "prázdného" místa se stejným pozadím jako zbytek
     boxu (vypadalo to jako navazující prázdný řádek navíc). Mezera mezi
     jednotlivými tabulkami (Online/Praha/Kolín) řeší margin-bottom na
     samotném .table divu, viz výš - zadání 27. 8. 2026. */
}
.gobutton {
  cursor: pointer;
}

/* ============================================================================
   TABULKA TERMÍNŮ/CENÍKU (web_table_row()/web_table() ve web.php) - PŘEPSÁNO
   OD ZÁKLADU (27. 8. 2026) po opakovaně nefunkčních CSS záplatách nad starší
   strukturou (float sloupce .left1/.right1, pak grid-template-areas s
   display:contents a :has() nad jednou sdílenou <td class="left">).
   Uživatelka: "napiš zobrazení všech tabulek úplně znovu, ze stávajícího
   kódu využij jen generování obsahu a grafiku, styly úplně pročisti a napiš
   znovu čistě."

   Nový princip: každé pole (název, poznámka, cena 1, cena 2, tlačítko) je
   od teď SKUTEČNÁ <td>/<th> buňka - PHP je generuje pro <thead> i <tbody>
   stejnou funkcí a se stejnou "rolí" (třídou), takže sloupce sedí samy díky
   běžnému chování <table> - žádné CSS triky (grid-template-areas,
   display:contents, :has()) už nejsou potřeba. To je i důvod části starších
   chyb: :has() nemají všechny prohlížeče, takže na něm dřív stála i základní
   funkčnost řádku.

   Role (třídy, viz web_table_row()):
     .tbl-name          hlavní název (datum/místo/kurz) - vždy je
     .tbl-note          čas/adresa/poznámka - nepovinná, druhý řádek
     .tbl-price1        první cenový sloupec - nepovinný
     .tbl-price2        druhý cenový sloupec - nepovinný
     .tbl-price-merged  cenové sloupce sloučené do jednoho (colspan 2) -
                         u řádků bez konkrétní ceny ("připravíme kalkulaci")
     .gobutton/.gobuttoni  tlačítko - beze změny

   Mobil (pod 640px, stejný zlom jako jinde na webu): řádek přepnut na
   display:flex; flex-wrap:wrap, každá buňka na 100 % šířky (obě ceny vedle
   sebe na 50 %) - pole jsou v HTML už ve správném pořadí, takže stačí je
   zalomit pod sebe, žádné přeskupování pořadí není potřeba. Popisek ceny na
   mobilu (jinak daný záhlavím, na mobilu schovaným) doplní atribut
   data-label (PHP), ne pevný text v CSS - different varianty tabulky mají
   jiné popisky ("Cena bez DPH"/"Cena s DPH", "Cena za osobu"/"Celkem bez
   DPH", "Cena s DPH"/"Spoluúčast"...). */

.table thead th {
  text-align: left;
  font-weight: normal;
  color: #767676;
  padding: 4px 12px 0 0;
  border-bottom: 1px solid #ccc;
  vertical-align: middle;
}
.table tbody td {
  padding: 0 12px 0 0;
  border-bottom: 1px solid #ccc; /* stejná barva jako linka pod záhlavím (thead th výš) - zadání 27. 8. 2026 */
  vertical-align: middle;
}
/* Levý okraj prvního sloupce (název/termín) sjednocen s odsazením záhlaví
   tabulky (h3.full a má padding-left 18px, viz .table a výš/níž v souboru) -
   zadání 27. 8. 2026 ("odsazení má být stejné jako v záhlaví tabulky").
   Obecně na thead i tbody, takže platí pro všechny ceníkové tabulky. */
.table thead th:first-child,
.table tbody td:first-child {
  padding-left: 18px;
}
.table tbody tr.last td {
  /* NE ":last-child" - skutečně posledním "dítětem" tbody bývá skrytý
     .ter-det-row (rozbalovací detail) posledního termínu, ne viditelný
     řádek samotný, takže ":last-child" na něj nikdy nemířil a linka pod
     posledním řádkem zůstávala vykreslená navíc (zadání 27. 8. 2026). Třídu
     "last" dostává skutečný poslední řádek přímo z PHP (web_table()). */
  border-bottom: none;
}
.table tbody tr:hover td {
  background: #DDD;
}
.table tbody .tbl-name {
  font-weight: bold;
}
.table tbody .tbl-name a, .table tbody .tbl-note a {
  color: rgb(78,89,101);
}
/* Poznámka (čas/adresa) vedle názvu na jednom řádku, pokud je dost místa -
   inline-block se sám zalomí pod název, jen když se nevejde (úzký sloupec/
   mobil) - zadání 27. 8. 2026 ("i na plnou šířku se termín a čas nezobrazí
   v jednom řádku" - dřív display:block vynucoval zlom vždy, i na širokém
   displeji). Funguje stejně v <tbody> i <thead> (viz níž), takže platí
   napříč všemi ceníkovými tabulkami. */
.table tbody .tbl-note {
  display: inline-block;
  color: #767676;
  font-weight: normal;
  margin-left: 8px;
}
.table thead .tbl-note {
  display: inline-block;
  margin-left: 8px;
}
.table thead .tbl-price1, .table thead .tbl-price2,
.table tbody .tbl-price1, .table tbody .tbl-price2 {
  text-align: right;
  white-space: nowrap;
  width: 1%;
}
.table tbody .tbl-price-merged {
  text-align: right;
  color: #767676;
  font-style: italic;
}
.table table .gobutton, .table table .gobuttoni {
  width: 1%;
  white-space: nowrap;
  text-align: right;
  padding: 0;
}

/* Rekvalifikace - cenový sloupec (web_rekval_terminy ve web.php) je širší,
   protože záhlaví má dva řádky - "Cena" a pod tím menším písmem
   "(osvobozeno od DPH)". */
.table thead .rekval-cena {
  min-width: 150px;
}
.rekval-cena-mala {
  font-size: 11px;
  font-weight: normal;
  display: block;
}

.table .akce .tbl-price1, .table .akce .tbl-price2 {
  font-weight: bold;
}
.table .akce2 .tbl-price1, .table .akce2 .tbl-price2, .akce2 strong, strong.akce2 {
  font-weight: bold;
  color: #D1604A; /* dřív rgb(133,140,33) - sjednoceno na barvu "otevřený kurz" */
}
.table .obsazeno .tbl-name, .table .obsazeno .tbl-price1, .table .obsazeno .tbl-price2 {
  color: #999;
}

@media (max-width: 640px) {
  .table > table > thead {
    display: none;
  }
  /* <table>/<tbody>/<tr>/<td> zpátky na "obyčejné" bloky, každý pod sebe.
     ZÁMĚRNĚ bez display:flex na <tr>: v Chromu (ověřeno přímo) <td> jako
     flex item ignoruje procentuální flex-basis (zůstane na 100 % šířky
     řádku bez ohledu na "flex: 1 1 50%" - zjevná nekonzistence pro prvky
     tabulkového původu), i po přepnutí <table>/<tbody>/<tr> na
     display:block - s <div> místo <td> to (na stejném místě, se stejným
     CSS) funguje bezvadně. Cena 1/cena 2 vedle sebe proto řeší float
     (dvě položky přesně na 50 % - to floatům nevadí, ani ":has()", ani
     grid - nejnudnější možná technika, ale spolehlivě funguje všude).
     ZÁMĚRNĚ jen ".table > table" (přímé dítě), NE ".table table" - uvnitř
     může být (rozbalovací detail termínu) vnořená .ter-det-tab, což je
     SAMOSTATNÁ malá tabulka (Den/Datum/Od/Do/Poznámka), která má zůstat
     normální <table> i na mobilu (jen s vodorovným scrollem přes
     .ter-det-wrap, viz níž) - oprava 27. 8. 2026 ("detail termínů se
     nezobrazí přes celou šířku, jen v úzkém sloupci"). */
  .table > table,
  .table > table > tbody,
  .table > table > tbody > tr,
  .table > table > tbody > tr > td {
    display: block;
  }
  .table > table > tbody > tr {
    padding: 10px 0;
    overflow: hidden; /* "clearfix" - ať řádek obsáhne floatované ceny */
  }
  .table > table > tbody > tr:last-child {
    padding-bottom: 0;
  }
  .table > table > tbody > tr > td {
    border-bottom: none;
    padding: 2px 0;
  }
  /* Levé odsazení prvního sloupce (viz .table tbody td:first-child výš)
     zůstává i na úzkém zobrazení - zadání 27. 8. 2026 ("odsazení zleva má
     zůstat, i když je zobrazení zúžené"). Nepřepisuje se tu tedy zpátky na
     0 - .table tbody td:first-child { padding-left: 18px } platí beze
     změny i uvnitř mediadotazu. */
  .table tbody .tbl-price1, .table tbody .tbl-price2 {
    float: left;
    box-sizing: border-box;
    width: 50%;
    text-align: left;
    /* Stejné odsazení zleva jako .tbl-name (viz :first-child výš) - PADDING,
       ne text-indent, aby odsazení zůstalo i na zalomeném druhém řádku
       (zadání 27. 8. 2026: "cena bez DPH má být odsazena zleva na stejnou
       úroveň jako nad tímto textem datum", i po zalomení textu). */
    padding-left: 18px;
  }
  .table tbody .tbl-price1 {
    clear: left;
  }
  .table tbody .tbl-price-merged {
    /* right12 nese i .tbl-price1 (viz web_table_row() - stejná "role" jako
       první cenový sloupec, jen širší), takže by jinak zdědilo
       float/50% šířku od .tbl-price1 výše - tady se to vrací zpět na
       normální blok přes celou šířku. */
    float: none;
    clear: both;
    width: auto;
    text-align: left;
    padding-left: 18px;
  }
  .table tbody .tbl-price1::before,
  .table tbody .tbl-price2::before,
  .table tbody .tbl-price-merged::before {
    content: attr(data-label) ": ";
    font-weight: normal;
    color: #888;
  }
  .table tbody .gobutton, .table tbody .gobuttoni {
    clear: both;
    width: auto;
    text-align: center;
    margin-top: 6px;
  }
}
/* === konec tabulky termínů/ceníku === */
span.gobutton {
  display: block;
  margin-top: 26px;
  float: right;
}
/* Odkaz "Ceník"/"Poptat" u firemního školení (span.gobutton + p.rowlink,
   viz web_show_kat.php) - NE uvnitř <table>, proto beze změny. */
.table a {
  display: block;
  padding-left: 18px;
}
.table .gobutton a, .table .gobuttoni a {
  padding-left: 12px;
}
.table table a, .table .hovera .rowlink span, .table .hovera .go {
  padding-top: 4px;
  min-height: 21px;
}
.table .hovera .rowlink span.first {
  padding-bottom: 1px;
}
/* Odkazy uvnitř řádků tabulky termínů/ceníku (viz výše) mají vlastní
   zarovnání/velikost - potlačit obecný odsazený "rowlink" vzhled. */
.table tbody .tbl-name a, .table tbody .tbl-note a,
.table tbody .tbl-price1 a, .table tbody .tbl-price2 a, .table tbody .tbl-price-merged a {
  display: inline;
  padding-left: 0;
  min-height: 0;
  padding-top: 0;
  /* Bez vlastního podtržení (viz ".table td a { border-bottom }" na
     začátku souboru) - jinak vzniká pod každým textem (datum, čas, cena)
     samostatná krátká "podtržená" linka místo JEDNÉ průběžné oddělovací
     linky mezi řádky (tu už kreslí border-bottom na .table tbody td, viz
     níž) - zadání 27. 8. 2026 ("linka má procházet přes celou tabulku"). */
  border-bottom: none;
}
/* Stejná výjimka (bez podtržení) musí platit i pro poslední řádek (tr.last)
   - jinak ho přebije starší obecné pravidlo ".table tr.last td a" (na
   začátku souboru, vyšší specificita kvůli počtu elementů v selektoru) a
   pod textem posledního řádku zůstane samostatná krátká linka navíc,
   zatímco border-bottom na .table tbody tr.last td je (správně) none -
   zadání 27. 8. 2026. */
.table tbody tr.last .tbl-name a, .table tbody tr.last .tbl-note a,
.table tbody tr.last .tbl-price1 a, .table tbody tr.last .tbl-price2 a,
.table tbody tr.last .tbl-price-merged a {
  border-bottom: none;
}
/* Stejný souboj o specificitu nastává i při najetí myší - ".table tr:hover
   td a" (na začátku souboru) je specifičtější než základní pravidlo výš, a
   podtržení se tak na hover vrací u KAŽDÉHO řádku (ne jen posledního).
   Zadání 27. 8. 2026 - stejná oprava, tentokrát pro :hover stav. */
.table tbody tr:hover .tbl-name a, .table tbody tr:hover .tbl-note a,
.table tbody tr:hover .tbl-price1 a, .table tbody tr:hover .tbl-price2 a,
.table tbody tr:hover .tbl-price-merged a {
  border-bottom: none;
}
.table tr.zvy { background: yellow; }
form input.zvy { background: yellow; }

/* Texty ke školení */
.txt {
  margin-bottom: 25px;
}
.txt.topmargin {
  margin-top: 25px;
}
.txt.nomargin {
  margin-bottom: 0;
}
.bottommargin {
  margin-bottom: 25px;
}

.txtcol {
  float: left;
  min-width: 50%;
  width: 100%;
  max-width: 390px;
}
.txtcol img.obsah {
  width: 243px; /* min-width 273px -5px vlevo, 5px vpravo, 20px padding pro odkaz */
  min-width: 100%;
  max-width: 100%;

  margin-top: 5px;
}
.lektori .txtcol img {
  margin: 5px 10px 5px 0;
}
.obsah_text span.maxwidth, #content span.maxwidth {
  display: block;
}
img.obsah.full, .obsah_text img.obsah, span.maxwidth img.obsah {
  width: 273px;
  min-width: 100%;
  max-width: 100%;
}
.txtcol img.obsah:hover {
 opacity: 0.85;
}
.txt .left {
  clear: both;
}
.left .hovertxt {
  float: left;
}
.right .hovertxt {
  float: right;
}
.txtcol .hovertxt {
  min-width: 97%;
  max-width: 390px;
}
@media screen and (max-width: 784px) { /* při jednosloupcovém zobrazení vždy využít max. šířku */
  .hovertxt {
    min-width: 100%;
  }
}
.hovertxt h3, .hovertxt h4, .hovertxt .p {
  margin-right: 5px;
}
.hovertxt h4, .hovertxt .p {
  line-height: 18px;
}
.hovertxt h4, .hovertxt h4 a {
  padding-top: 8px; /* pro pevné řádkování 9-0 */
  padding-bottom: 1px;
}
.href h4 {
  padding: 0px;
}
.obsah_text h3 {
  margin-top: 22px;
}
.hovertxt h3, .typs .hovertxt h3.mezera {
  margin-top: 18px;
}
.typs .hovertxt h3 {
  margin-top: 0px;
}
.hovertxt h3 a, .hovertxt h3 .a {
  padding-top: 6px;
}
.hovertxt a, .hovertxt .a {
  display: block;
}
.hovertxt a.in {
  display: inline;
}
.hovertxt h3 a, .hovertxt h3 .a, .hovertxt .p a, .hovertxt .p .a {
  padding-bottom: 8px;
  padding-right: 20px;
}
.hovertxt .p a.in {
  padding-bottom: 0;
  border-bottom: none;
}
.nopad .p .a, .nopad .p a {
  padding-right: 0;
}
.hovertxt div.txtico a, .hovertxt div.txtico .a {
  min-height: 54px;
}
div.txtico {
  background-repeat: no-repeat;
  background-position: 0px 6px; 
}
.hovertxt div.txtico a, .hovertxt div.txtico .a {
  padding-left: 57px;
}

.hovertxt .p .a p a {
  padding-left: 10px;
  padding-bottom: 0;
  line-height: 25px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.hovertxt .p .a p.sodkazy a {
  display: inline;
  border: none;
  padding: 0;
  margin: 0;
  line-height: inherit;
}

/* Osnova */
.osnova {
 list-style-type: none;
}
.osnova li {
 margin-top: 18px;
}
.osnova ul {
 list-style-type: none;
}
.osnova li li {
 margin-top: 0px;
 margin-left: 18px;
 text-indent: -8px;
}
.osnova li li:before {
  content: "- ";
}

ul.list li, table.pre ul li {
 margin-left: 18px;
}
table.pre {
  margin-left: 0;
}
table.pre td {
  vertical-align: top;
  padding: 3px 5px;
}
table.pre tr.hi th {
  width: 261px;
}
table.pre tr.hi th h3 {
  line-height: 30px;;
}

/* Šipka nahoru v pravém dolním rohu */
.upbd {
  clear: both;
  height: 25px;
  margin: 9px 5px 5px 0;
}
a.upb {
  display: block;
  float: right;
  width: 799px;
  max-width: 100%;
  height: 25px;
}
a.upb span {
  display: block;
  float: right;
  width: 85px;
  height: 25px;
}

/* Zápatí */
#footer {
  clear: both;
  min-height: 100px;
  padding: 0px 20px;
  background: url('img/bg/footer.png');
  color: rgb(100,120,140);
}
#footer p {
  font-size: 13px;
  line-height: 15px;

  float: left;
  width: 237px;
  padding-right: 2px;
  margin: 5px 0;
}

pre.debug {
  font-family: inherit;
  font-size: 9pt;
}

.titledebug {
	float: right;
	text-align: right;
	width: 60px;

	margin-left: -64px;

	color: #CCC;
	padding-top: 9px;
	padding-right: 4px
}

#home .titledebug {
	margin-top: -27px;
}

table.ref td {
  width: 50%;
}

p.mezera {
  margin-top: 18px;
}

#kontakt fieldset {
  border-radius: 6px;
}
#kontakt legend {
  padding: 0 4px;
  margin-left: -1px;
}

table.oranzova, table.oranzova td, table.oranzova tbody {
  border-color: #F4C008;
}

table.zelena, table.zelena td, table.zelena tbody {
  border-color: #888D31;
}
table.zelena th {
  background: #888D31; color: white; font-weight: normal;
}
table.oranzova, table.oranzova td, table.oranzova tbody {
  border-color: #F07B2D;
}
table.oranzova th {
  background: #F07B2D; color: white; font-weight: normal;
}
#o2252 table.oranzova td, #o2252 table.oranzova th {
    padding: 2px;
}
#o2252 table.oranzova a {
    display: inline-block;
    padding: 4px 10px;
}

/* === Prvky z původního webu === */
.pre {margin:10px 10px 20px 10px; border-collapse:collapse}
.pre th, .pre td { border: 1px solid #ddd; padding: 1px 2px; }
table.bile th, table.bile td, table.bile span, table.bile input, table.bile select {font-size: 13px; }
.pre .hi, .err.his { background: #DDD; }
.err { padding: 4px; margin: 10px 0; font-weight: bold; color: black; }
.fl_combo {margin: 0; padding: 1px 0; display: block}
.fl_text {border: none; margin: 3px 0 0 1px; padding: 0px 5px 0px 2px}

/* Titulek */
#ti {background:#FFFFE1 url('obr/x.gif') right top no-repeat;display:none;position:absolute;left:100px;top:100px;width:200px;border:1px solid black;z-index:99}
#ti.frm {background-image: none; text-align: left}
#ti.frm * {font-size: 11px}
#tit {margin:2px 16px 1px 2px;color:black;font-size:13px}

/* Hodnocení */
#hodnoceni table { margin-top:10px; width: 100%; max-width: 600px; }
#hodnoceni td { padding:5px 10px 5px 10px; }
#hodnoceni tr.odpr td { padding-top: 0; }
#hodnoceni tr.odpr td span { white-space: nowrap; }
#hodnoceni h3 { margin:0px; }
.tisk { display:none; }

/* Tisk */
@media screen {
 a.oko { text-decoration:none; border-bottom:1px dotted; }
 a.oko:hover { border-bottom:none; }
}
@media print {
  .noprint, .hla, .debug,
    #leftspace, #left, #left2, .upbd { display: none; }
  .tisk { display:inline; }
  .black { background: none; color: black; border-bottom: 2px solid black; }
  #header { color: black; }
  #logoimg {
    background-image: url('img/abecedapcc.png');
    background-image: url('img/abecedapcc.svg'), none;
  }
  #footer {
    background: none; color: rgb(77,77,77); border-top: 1px solid black;
  }

  #hodnoceni table {border-collapse:collapse;background:white}
  #hodnoceni table td {padding:0px;background:white}
  #hodnoceni input {height:14px}
  #hodnoceni input.text {border:none;border-bottom: 1px dotted;width:8cm}
  #hodnoceni textarea {height:2cm;border:none}
}

/* --- Lektoři, certifikace --- */
.lektori th { text-align: left; }

.lektori tr td img {
  width: 150px;
  margin-left: 9px;
  margin-right: 21px;
  border: 1px solid gray;
}

.lektori td ul {
    margin-left: 17px;
}
.lektori td .cert_ul_0 {
    margin-left : 9px;
    padding: 0px;
}

.lektori td .cert_ul_2 {
    margin-left: 17px;
    padding: 0px;
}

.lektori .lpopis {
    min-height: 150px;
    vertical-align: top;
}

.lektori .nadpis {
  padding-top: 16px;
  padding-bottom: 12px;
}

.lektori tr td hr {
  text-align: right;
  color: white;
  border-width: 1px

}

.foto_lektor {
  vertical-align: top;
  padding-top: 20px;
  padding-right: 0px;
}

.certifikace_prehled {
    clear: both;
}
.certifikace_prehled a {
    padding-left: 10px;
}
.certifikace_prehled h3 {
    margin: 0px;
}
.certifikace_prehled_img {
    float: left;
    width: 150px;
    margin-bottom: 15px;
    text-align: center;
}
.certifikace_prehled_nazev {
    float: left;
    width: 600px;
    margin-bottom: 15px;
}

/* Záložky */
.obalka, .obalkax { clear:both; }
.obalka hr { margin-left: 10px; margin-right: 10px}

ul.zalozky
{
 margin: 0;
 padding: 4px 0px 4px;
 border-bottom: 1px solid #778;
 font-weight: bold;
 font-size: 12px;
}

ul.zalozky li
{
 list-style: none;
 margin: 0;
 display: inline;
}
.obalkax ul.zalozky li.vse {display: none}

ul.zalozky li a
{
 color: white;
 padding: 4px 10px;
 margin-left: 4px;
 border: 1px solid #778;
 border-bottom: none;
 background: #E8E8E8 url('img/old/tab-b.gif') repeat-x;
 text-decoration: none;
 outline: none;
}

ul.zalozky li a:link { color: white; }
ul.zalozky li a:visited { color: white; }
ul.zalozky li a:hover
{
 background: url('img/old/tab-a.gif') repeat-x;
}

ul.zalozky li.aktivni a, ul.zalozky li.aktivni a:visited, ul.zalozky li.aktivni a:hover
{
 color: #333;
 background: white;
 border-bottom: none;
}

.obalka .zalozka {display:none}
.zalozka {
 padding-top:10px;
}
.obalka div.aktivni { display: block; }

/* --- Sekce CAD --- */
img.box { float:left; margin:0 10px 10px 0; }
ul.akce {margin: 10px 10px 10px 110px; border: 1px solid #778; padding: 0px 4px}
ul.akce li {list-style-type: none; font-size: 12px; margin: 2px 0px}
ul.akce li a, a.link { padding-left: 12px; background: url('img/old/link-cad.gif') no-repeat left center; }
ul.akce li a:hover, a.link:hover {background-image: url('img/old/link-cad-a.gif'); }

/* CAD Ceník */
.cenik {  border: none; width: 100%; }
.cenik td {border: none; border-bottom: 1px solid rgb(70,115,115); border-right: 1px solid #F0F0F0;
  min-width: 14%;
  text-align: right;
  padding-right: 5px;
}
.cenik td:first-child {
  padding-left: 0px;
  width: 72%;
  text-align: left;
}
.cenik td:last-child {
  border-right: none;
  padding-left: 5px;
  padding-right: 0px;
  min-width: 75px;
  text-align: left;
}
.cenik .gobuttoni a {
  display: block;
  background-position: 68px 2px;
}

/*
.cenakce {
  background: rgb(245,245,115);
  background: linear-gradient(to bottom, rgb(255,255,195), rgb(245,245,115));
}
.cenik .cenakce td:first-child {
  padding-left: 5px;
}
.cenik .cenakce td:last-child {
  padding-right: 2px;
}
*/
.cenik .cenakce td:nth-child(2) {
  font-weight: bold;
  color: black;
}

.ceneplati {
  color: #999;
}
.cenakce.ceneplati {
  background: none;
}

.reseni, .spravne { color: #41A317; }
.chyba { color: red; }
.chybne { color: red; text-decoration: line-through; }
.oprava { color: blue; }

.hidden { color: gray; font-style: italic; }
/* =========================================================================
   14.7.2026 - Rozbalovací detail termínu (rozpis jednotlivých dnů)
   Ikona "?" ve výpisu termínů; po kliknutí se pod řádkem rozbalí tabulka
   Den / Datum / Od / Do / Poznámka. Styl ikony navazuje na .typs-napoveda.
   ========================================================================= */

/* Ikona "?" u termínu (v buňce s termínem/časem) */
.ter-det-ic {
  display: inline-block;
  width: 15px;
  height: 15px;
  line-height: 15px;
  margin-left: 6px;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  color: #22262b !important; /* oprava kontrastu 26. 8. 2026, viz .box-sedy h3.full a výš */
  background: rgb(142,161,184);
  border-radius: 50%;
  cursor: pointer;
  text-decoration: none !important;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.ter-det-ic:hover,
.ter-det-ic:focus {
  background: rgb(100,120,140) !important;
  outline: none;
}
.ter-det-ic.open {
  background: rgb(15,69,122) !important;
}

/* Rozbalený řádek s detailem - buňka přes celou šířku tabulky */
.table .ter-det-row td.ter-det-cell {
  padding: 0 18px 12px 18px;
  vertical-align: top;
  border-bottom: 1px solid rgb(220,227,236);
}
.ter-det-wrap {
  overflow-x: auto;
  margin-top: 2px;
}

/* Vnitřní tabulka rozpisu dnů */
.ter-det-tab {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  line-height: 1.4;
  background: #fff;
  border: 1px solid rgb(220,227,236);
  border-radius: 4px;
}
.ter-det-tab th,
.ter-det-tab td {
  padding: 4px 10px;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}
.ter-det-tab thead th {
  color: rgb(15,69,122);
  font-weight: bold;
  background: rgb(238,242,247);
  border-bottom: 1px solid rgb(210,220,232);
}
.ter-det-tab tbody tr + tr td {
  border-top: 1px solid rgb(238,242,247);
}
.ter-det-tab .ter-det-c-cas {
  text-align: right;
  width: 1%;
}
.ter-det-tab .ter-det-c-datum {
  width: 1%;
}
.ter-det-tab .ter-det-c-den {
  width: 1%;
  color: #555;
}
.ter-det-tab .ter-det-c-pozn {
  white-space: normal;
  width: auto;
}

/* ============================================================================
   Sjednocená dlaždice kategorie - redesign rozcestníků 8/2026 (viz
   tier-mockup_2.md, sekce 3.5/3.8). Nahrazuje dřívější odlišné vykreslení pro
   kat_vychozi_zobrazeni = pole/pás/pás2/pás3/pás6 (samostatné ikony programů
   u pás6/pás2, samostatná pole u pás/pás3) jedinou vizuální podobou napříč
   celým webem - liší se jen šířkou (.w33/.w66/.w100) a úrovní syté barvy
   (.uroven1/.uroven2/.uroven3). Barvu dodává inline CSS proměnná --kat-c
   (nastavená z barva_stred ve web_kat_dlazdice(), web.php) - odsouhlasený
   pipeline je počítat odstíny přes CSS color-mix(), ne PHP jako u .col.balik.

   Odsazení, velikost písma, mezera mezi dlaždicemi a horní barevný proužek
   (var(--stripe-height), viz :root výše) jsou záměrně převzaté z .col.balik/
   .sekce-karta/.prispevek-karta - stejný sitewide vzor karty, jen jiný obsah.
   Ostré rohy - stejná konvence jako všude jinde (viz .col.balik). */
.kat-pas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 12px;
}
.kat-dlazdice {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 10px 12px 12px;
  border: 1px solid transparent;
  border-top-width: var(--stripe-height, 4px);
  border-top-style: solid;
}
/* Pevný podíl šířky řádku (ne flex-grow) - dlaždice tak zůstane 1/3 nebo 2/3
   šířky bez ohledu na to, kolik dalších dlaždic je zrovna v tom samém .kat-pas
   (flex-grow by šířku počítal jen relativně vůči sousedům ve stejném řádku,
   ne pevně - proto se předtím osamocené "pole"/"pás2" chybně roztáhly přes
   větší část nebo celý řádek). Počítáno pro řádek o 3 slotech s mezerou 12px
   mezi nimi (gap na .kat-pas): w33 = 1 slot, w50 = polovina řádku (1 vnitřní
   mezera rozpočtená napůl), w66 = 2 sloty + 1 vnitřní mezera, w100 = celý
   řádek. w50 přidáno 24. 8. 2026 (pás2 nově 1/2 šířky, pás3 zůstává w66). */
.kat-dlazdice.w16 { flex: 0 0 calc((100% - 60px) / 6); }
.kat-dlazdice.w33 { flex: 0 0 calc((100% - 24px) / 3); }
.kat-dlazdice.w50 { flex: 0 0 calc((100% - 12px) / 2); }
.kat-dlazdice.w66 { flex: 0 0 calc((200% - 12px) / 3); }
.kat-dlazdice.w100 { flex: 0 0 100%; }
/* Responzivita (zadání 23. 8. 2026) - stejné zlomy 900px/600px jako
   .balik-strip .col.balik výš v souboru, ať je chování mřížek na webu
   jednotné. Pod 1020px se navíc schová levé menu (#content výše) a .kat-pas
   tak stejně dostane většinu šířky stránky. Přepočet stejným způsobem jako
   u výchozích šířek výš - N dlaždic na řádek s mezerami 12px mezi nimi.
   w50 se pod 900px chová jako w33 (2 na řádek), protože v tu chvíli sedí do
   stejné mřížky jako zúžené w33 dlaždice. */
@media (max-width: 900px) {
  .kat-dlazdice.w16 { flex-basis: calc((100% - 24px) / 3); } /* 3 na řádek */
  .kat-dlazdice.w33, .kat-dlazdice.w50 { flex-basis: calc((100% - 12px) / 2); } /* 2 na řádek */
  .kat-dlazdice.w66, .kat-dlazdice.w100 { flex-basis: 100%; }
}
@media (max-width: 600px) {
  .kat-dlazdice.w16 { flex-basis: calc((100% - 12px) / 2); } /* 2 na řádek */
  .kat-dlazdice.w33, .kat-dlazdice.w50, .kat-dlazdice.w66, .kat-dlazdice.w100 { flex-basis: 100%; }
}
@media (max-width: 420px) {
  .kat-dlazdice.w16 { flex-basis: 100%; }
}
/* Klasická past flexboxu: flex-shrink:0 s výchozím min-width:auto by nechal
   dlaždici narůst na šířku obsahu (dlouhý seznam odkazů dětí), kdyby byla
   širší než flex-basis, a přeplácl by tak sousední dlaždice - proto min-width
   0 a overflow hidden i tady, ne jen na .children-list uvnitř (ověřeno
   23. 8. 2026, seznam odkazů jinak vytáhl celou dlaždici do šířky). */
.kat-dlazdice {
  min-width: 0;
  overflow: hidden;
}

/* Celoplošný klikatelný odkaz - stejný princip jako .col.balik .balik-link/
   .prispevek-karta-link. .head-row/.bottom-row záměrně NEMAJÍ vlastní
   z-index - ikona, nadpis (vede na stejné href jako celá dlaždice), odznak
   a šipka nejsou svébytné odkazy, klik na ně má propadat na tento overlay
   (oprava 23. 8. 2026 - šipka a plocha kolem ikony/nadpisu neklikaly, protože
   byly bez vlastního odkazu položené NAD overlayem). Vlastní z-index nad
   overlayem má výhradně .children-list - to jsou odkazy na JINÉ (podřazené)
   kategorie, které musí zůstat klikatelné samostatně. */
.kat-dlazdice-link {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1;
}
.kat-dlazdice .head-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.kat-dlazdice .head-row .ico {
  flex: 0 0 auto;
  /* Výška napevno 30px (27. 8. 2026 - 45px, pak 40px bylo pořád příliš
     velké), šířka NEomezená - roztahuje se podle skutečného poměru stran
     ikony (aspect-ratio, dopočítaný per-ikona v ico2.7.css.php ze
     skutečných rozměrů souboru). Dřív pevných 26x26px s
     background-size:contain - širší ikony se tak zmenšovaly i na výšku, aby
     se vlezly do čtverce - zadání 27. 8. 2026 ("šířkou nemá být omezená,
     řešit se má jen výška"). */
  height: 30px;
  width: auto;
  display: inline-block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
/* Velikost původně 18/21px podle .col.balik h2 a / .sekce-karta h3, o kousek
   zvětšeno (23. 8. 2026) na přání uživatelky - zde už tedy vědomě větší než
   balik/sekce. Tučně zkusmo 24. 8. 2026 - ale sitewide písmo pro h1/h2/h3
   ("source-sans-pro-n3", výš v souboru) nemá skutečný tučný řez (jen 200/300)
   a prohlížeč tu na malé velikosti "falešné" tučnění vykresluje jen sotva
   znatelně - proto tu i font-family přepisuji na stejný řetězec jako má
   běžný text webu (body - Calibri atd.), kde tučné písmo skutečně existuje
   a je vidět (stejně jako u .children-list a, viz níže). */
.kat-dlazdice h2,
.kat-dlazdice h3,
.kat-dlazdice h4 {
  margin: 0;
  font-size: 20px;
  line-height: 23px;
  font-weight: bold;
  font-family: "Calibri", "source-sans-pro-n3", "source-sans-pro", sans-serif;
}
.kat-dlazdice h2 a,
.kat-dlazdice h3 a,
.kat-dlazdice h4 a {
  color: inherit;
  text-decoration: none;
}
/* Úvodní stránka (kořen webu, <body class="uvo"> - stejný háček, který už
   dřív používal web_show_kat.php/web.php pro rozlišení úvodní stránky) -
   nadpisy dlaždic hlavního rozcestníku o ~4px větší než jinde na webu
   (20px/23px -> 24px/27px), JEN tady, nikde jinde - zadání 28. 8. 2026. */
body.uvo .kat-dlazdice h2,
body.uvo .kat-dlazdice h3,
body.uvo .kat-dlazdice h4 {
  font-size: 24px;
  line-height: 27px;
}
/* Dlaždice "pás6" JEN (ne "pás" - ten má zůstat stejně velký jako ostatní
   dlaždice typu "pole" apod., viz vlastní třída "pas6" přidaná jen u pás6 ve
   web_show_kat.php, "pás" i nadál dostává pouze w100 beze změny velikosti
   písma) - nadpis větší než na ostatních dlaždicích (20px/23px -> 22/25 ->
   24/27 -> 26/29 -> 28px/31px), popis zůstal na 19px/23px (viz
   .kat-dlazdice.pas6 .desc níž) - zadání 28. 8. 2026, postupně dovětšováno a
   nakonec omezeno jen na pás6 v témže zadání. */
.kat-dlazdice.pas6 h2,
.kat-dlazdice.pas6 h3,
.kat-dlazdice.pas6 h4 {
  font-size: 28px;
  line-height: 31px;
}
/* Stejná velikost i na úvodní stránce - bez tohohle pravidla ji tam přebíjelo
   "body.uvo .kat-dlazdice h2/h3/h4" (24px, viz výš) - obě pravidla mají
   2 třídy, ale to úvodní má navíc element "body" navíc ve výrazu, takže má
   VYŠŠÍ specificitu (0,2,2 > 0,2,1) a vyhrávalo by bez ohledu na pořadí v
   souboru. Tady proto totéž se stejnou dvojicí tříd navíc "body.uvo", aby
   specificita byla srovnaná/vyšší (0,3,2) - ověřeno živě 28. 8. 2026, dlaždice
   "pás6" na úvodní stránce ukazovala jen 24px místo zamýšlených 28px. */
body.uvo .kat-dlazdice.pas6 h2,
body.uvo .kat-dlazdice.pas6 h3,
body.uvo .kat-dlazdice.pas6 h4 {
  font-size: 28px;
  line-height: 31px;
}
/* Velikost/řádkování shodné s .prispevek-karta p (jediné místo v "balík"
   rodině komponent, které má samostatný popisový odstavec - .col.balik a
   .sekce-karta popis nemají, jen název + seznam, viz zadání 23. 8. 2026). */
.kat-dlazdice .desc {
  font-size: 13px;
  line-height: 17px;
  margin: 0 0 4px;
}
/* Popis na dlaždici "pás6" JEN (ne "pás") - stejný princip jako u nadpisu
   výš (.kat-dlazdice.pas6 h2/h3/h4), postupně dovětšováno a nakonec omezeno
   jen na pás6 - zadání 28. 8. 2026. */
.kat-dlazdice.pas6 .desc {
  font-size: 19px;
  line-height: 23px;
}
/* Šipka je teď absolutně umístěná v pravém dolním rohu dlaždice (viz .arrow
   níže), ne jako flex položka vedle textu - proto tu vpravo zbývá 22px místo
   (14px šipka + 8px mezera), ať do ní seznam odkazů/obtížnost nezajíždí, a
   šipka má vždy stejnou pozici bez ohledu na to, jak se zalomí text nad ní
   (zadání 23. 8. 2026). */
.kat-dlazdice .bottom-row {
  margin-top: auto;
  padding-top: 4px;
  padding-right: 22px;
  display: flex;
  align-items: center;
}
/* Skutečné odkazy na podkategorie (ne jen text) - oddělené větší mezerou
   (gap), ne čárkou. Kolik se jich reálně zobrazí (a jestli na 1, nebo 2
   řádky) řeší JS (web_kat_dlazdice_script() ve web.php) změřením v
   prohlížeči - zadání 23. 8. 2026: žádný název se nesmí zobrazit jen
   zčásti/ustřižený. Základní stav (i bez JS) proto smí volně zalomit na
   libovolný počet řádků - nikdy nic neustřihne, jen dlaždice vyjde vyšší;
   JS to pak zpřesní na požadovaný počet řádků (max1/max2) podle délky
   nadpisu a popisu, případně řádek úplně schová (přes 6 řádků nadpis+popis).
   Odkazy potřebují vlastní z-index nad .kat-dlazdice-link, jinak by na ně
   klik propadl na celoplošný odkaz dlaždice místo na konkrétní podkategorii. */
.kat-dlazdice .children-list {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 3px 14px;
  font-size: 13px;
  line-height: 17px;
  min-width: 0;
}
.kat-dlazdice .children-list.max1 {
  flex-wrap: nowrap;
  overflow: hidden;
}
.kat-dlazdice .children-list.max2 {
  overflow: hidden;
}
/* Web nikde nepoužívá podtržené odkazy (viz "a { text-decoration: none; }"
   výše) - že jde o odkaz signalizuje tučnější řez (na sytém pozadí úrovně 1)
   a navíc barva rodiny na světlém pozadí úrovní 2/3 (viz .uroven2/.uroven3
   níže), místo podtržení. Opraveno 23. 8. 2026. */
.kat-dlazdice .children-list a {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
  flex: 0 0 auto;
}
.kat-dlazdice .children-list a:hover {
  opacity: .7;
}
.kat-dlazdice .children-list .more {
  font-weight: 600;
  font-style: italic;
}
/* Šipka - absolutně umístěná v pravém dolním rohu dlaždice (12px = stejný
   odsazení jako padding dlaždice), NE jako součást flex řádku .bottom-row -
   ať má vždy stejnou pozici bez ohledu na to, jestli se seznam odkazů/
   obtížnost zalomí na 1, nebo 2 řádky (zadání 23. 8. 2026). Bez vlastního
   z-indexu zůstává pod .kat-dlazdice-link, takže klik na ni propadá na
   celoplošný odkaz (stejný princip jako u .head-row).
   Barva podle úrovně (zadání 24. 8. 2026) - stejný soubor gowhite.svg
   (bílá šipka, uživatelka jej předělala speciálně kvůli snadnému
   přebarvování) se na úrovni 1 použije rovnou (je bílá), na úrovni 2/3 se
   použije jako maska a vybarví se přes background-color na var(--kat-c) -
   stejná technika jako u ikon (viz ico2.7.css.php). */
.kat-dlazdice .arrow {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 14px;
  height: 14px;
  background: url('img/bg/gowhite.svg') no-repeat center / contain;
}
.kat-dlazdice.uroven2 .arrow,
.kat-dlazdice.uroven3 .arrow {
  background-color: var(--kat-c);
  background-image: none;
  -webkit-mask-image: url('img/bg/gowhite.svg');
  mask-image: url('img/bg/gowhite.svg');
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
/* Odznak "ŠKOLENÍ" - shodné rozměry/tvar jako .typs-stitek-radek (uppercase,
   letter-spacing .5px, padding 2px 8px, radius 3px - jediné zaoblení na webu). */
.kat-dlazdice .badge {
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
  vertical-align: 1px;
}
/* Obtížnost/délka (web_typs_info_dlazdice_html()) - stejné hodnoty jako
   .col.balik .balik-info (11px, tečky 4px), jen jinak zapojené do bottom-row. */
.kat-dlazdice .icoinfo {
  margin: 0;
  padding: 0;
  line-height: 1.3;
}
/* Popisek "Obtížnost:" před tečkami - chyběl, doplněno 23. 8. 2026 (viz
   web_kat_dlazdice(), teď volá web_typs_info_dlazdice_html() s popiskem
   stejně jako .col.balik .balik-info .stupen-wrap .lbl). */
.kat-dlazdice .icoinfo .stupen-wrap .lbl {
  font-size: 11px;
  margin-right: 4px;
}
.kat-dlazdice .icoinfo .stupen-wrap,
.kat-dlazdice .icoinfo .delka {
  display: inline-block;
  font-size: 11px;
  margin-right: 10px;
  cursor: help;
}
.kat-dlazdice .icoinfo .stupen {
  display: inline-flex;
  gap: 2px;
  vertical-align: middle;
}
.kat-dlazdice .icoinfo .stupen .t {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(0,0,0,0.2);
}

/* --- Úroveň 1: hlavní tematická oblast - plná barva (viz 3.5/3.8) --- */
.kat-dlazdice.uroven1 {
  background: var(--kat-c);
  border-top-color: color-mix(in srgb, var(--kat-c) 65%, black);
  color: #fff;
}
.kat-dlazdice.uroven1 .desc { opacity: .92; }
.kat-dlazdice.uroven1 .icoinfo .stupen .t.on { background: #fff; }
/* Šipka na úrovni 1 (tmavé/plné pozadí) je beze změny bílá - přímo díky
   gowhite.svg výš, žádný filter navíc není potřeba (dřív musela být přes
   filter přebarvená z modré goblue.svg, to už neplatí - zadání 24. 8. 2026). */

/* --- Úroveň 2: kategorie/složka - color-mix 32 % --- */
.kat-dlazdice.uroven2 {
  background: color-mix(in srgb, var(--kat-c) 32%, white);
  border-top-color: var(--kat-c);
  color: #22262b;
}
.kat-dlazdice.uroven2 .desc { color: #454545; }
.kat-dlazdice.uroven2 .children-list a { color: var(--kat-c); }

/* --- Úroveň 3: konkrétní školení - color-mix 8 %, nemá děti --- */
.kat-dlazdice.uroven3 {
  background: color-mix(in srgb, var(--kat-c) 13%, white);
  border-color: color-mix(in srgb, var(--kat-c) 25%, white);
  border-top-color: var(--kat-c);
  color: #22262b;
}
.kat-dlazdice.uroven3 .desc { color: #555; }
.kat-dlazdice.uroven3 .badge {
  background: color-mix(in srgb, var(--kat-c) 45%, white);
  color: color-mix(in srgb, var(--kat-c) 55%, black);
}
.kat-dlazdice.uroven3 .icoinfo,
.kat-dlazdice.uroven3 .icoinfo .stupen-wrap,
.kat-dlazdice.uroven3 .icoinfo .delka {
  color: #555;
}
.kat-dlazdice.uroven3 .icoinfo .stupen .t.on { background: var(--kat-c); }
/* Zadání 23. 8. 2026 - dlaždice konkrétního školení:
   1) ikona tmavá, přebarvená přes CSS - obrázek může mít libovolné vlastní
      barvy (SVG/PNG z img/ico/), filter: brightness(0) ji spolehlivě
      převede na černou bez ohledu na zdrojové barvy (na rozdíl od
      mask-image u .col.balik.dlazdice-svetla, které vyžaduje předem známou
      konkrétní URL ikony napevno v CSS - tady jde o libovolný kat_ikona).
   Název NENÍ v barvě rodiny (oprava 23. 8. 2026) - platilo do 24. 8. 2026,
   kdy uživatelka požádala zkusmo o opak (viz níže), možná se ale ještě
   vrátí zpět na tuto (bílá/tmavá) variantu. */
/* Přebarvení ikony na plnou barvu oblasti (--kat-c) na úrovni 2/3 - přes
   mask-image v ico2.7.css.php (generováno pro každou ikonu zvlášť, viz tam),
   ne přes filter. Dřív tu bylo jen filter: brightness(0) (ikona černá) -
   nahrazeno 23. 8. 2026, ikona má být v barvě oblasti, ne černá. */
/* Název - vždy na vlastním řádku POD řádkem s ikonou (+ odznakem u školení),
   ne vedle nich. Dřív to platilo jen pro konkrétní školení (.skoleni-nazev,
   jen na úrovni 3) - sjednoceno 24. 8. 2026 i pro kategorii/složku s dětmi,
   proto teď .dlazdice-nazev bez vazby na .uroven3 a beze změny jména třídy
   v markupu (web_kat_dlazdice() ve web.php). */
.kat-dlazdice .dlazdice-nazev {
  margin: 2px 0 4px;
}
/* Zkoušeno 24. 8. 2026: nadpis v plné barvě oblasti na úrovni 2/3 - vráceno
   zpět (uživatelka chtěla barvu z nadpisů zase odebrat), tučný řez (viz výš)
   ale zůstává. Nadpis je tak zase jen tmavý (úroveň 2/3, zděděno z .uroven2/
   .uroven3 color:#22262b) nebo bílý (úroveň 1, .uroven1 color:#fff). */