/* GENEROVÁNO vyklad5.py --css z navrh/navrh.css + navrh/extra.css + navrh/ram.css, needitovat ručně */
/* navit.cz, pátá verze, třetí kolo: „AI firma" po vzoru Seyforu.
   Bílá hlavička, fotka přes hero s tmavým blokem přes její okraj, mřížka dlaždic
   všeho, co nabízíme, barevné linie (kyber zelená, AI modrá, IT oranžová, nástroje
   fialová), ostré rohy, fotky na pozadí sekcí zarovnané ke straně se šikmým
   ořezem, velké číslice. Písmo Manrope včetně čísel. */
:root {
  --ink: #0B1420;
  --ink-2: #13202E;
  --paper: #FFFFFF;
  --grey: #F3F5F7;
  --grey-2: #E2E7EC;
  --hair: #D9DFE5;
  --slate: #5B6774;
  --green: #10B981;
  --green-dark: #077A54;
  --mint: #35E6A3;
  --blue: #2F63F5;
  --blue-dark: #1E46B8;
  --orange: #FF6B2C;
  --orange-dark: #C94E17;
  --violet: #7A4DFF;
  --violet-dark: #5A33CC;
  --sans: "Manrope", "Segoe UI", Arial, sans-serif;
  --w: 76rem;
  --gutter: 1.25rem;
  --sekce: 6rem;
  --hero-presah: 3rem;
  --divize: var(--green);
  --c: var(--green);
  --c-dark: var(--green-dark);
  --c-hover: var(--mint);
  --c-text: var(--ink);
  color-scheme: light;
}
/* Barva stránky se dědí do všech komponent, lokální linie ji mohou přebít. */
.divize--kyber, body.divize--kyber { --divize: var(--green); --c: var(--green); --c-dark: var(--green-dark); --c-hover: var(--mint); --c-text: var(--ink); }
.divize--ai, body.divize--ai { --divize: var(--blue); --c: var(--blue); --c-dark: var(--blue-dark); --c-hover: var(--blue-dark); --c-text: var(--paper); }
.divize--it, body.divize--it { --divize: var(--orange); --c: var(--orange); --c-dark: var(--orange-dark); --c-hover: var(--orange-dark); --c-text: var(--paper); }
.divize--nastroje, body.divize--nastroje { --divize: var(--violet); --c: var(--violet); --c-dark: var(--violet-dark); --c-hover: var(--violet-dark); --c-text: var(--paper); }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6; font-weight: 400; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; line-height: 1.1; text-wrap: balance; letter-spacing: -.02em; }
h1 { font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.1rem); }
h2 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.6rem); }
h3 { font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 1em; max-width: 62ch; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding-left: 1.2em; }
li { margin: .3em 0; }
.kontejner { width: min(100% - 2 * var(--gutter), var(--w)); margin-inline: auto; position: relative; z-index: 1; }
.cislo { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.lead { font-size: 1.2rem; color: var(--slate); max-width: 56ch; line-height: 1.55; }
.popis { color: var(--slate); font-size: .95rem; }
.na-stred { text-align: center; margin-inline: auto; }
.na-stred p { margin-inline: auto; }

/* tlačítka: ostré, s šipkou */
.tl { display: inline-flex; align-items: center; justify-content: center; gap: .7em; padding: .9em 1.4em; min-height: 3.1rem; max-width: 100%; font-weight: 700; font-size: .975rem; line-height: 1.2; text-align: center; border: 2px solid transparent; cursor: pointer; font-family: inherit; }
.tl svg { width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tl--zelene { background: var(--divize); color: var(--c-text); }
.tl--zelene:hover { background: var(--c-hover); }
.tl--cerne { background: var(--ink); color: #fff; }
.tl--cerne:hover { background: var(--ink-2); }
.tl--bile { background: #fff; color: var(--ink); }
.tl--bile:hover { background: var(--grey-2); }
.tl--obrys { background: transparent; color: var(--ink); border-color: var(--ink); }
.tl--obrys:hover { background: var(--ink); color: #fff; }
.tmave .tl--obrys { color: #fff; border-color: rgba(255,255,255,.75); }
.tmave .tl--obrys:hover { background: #fff; color: var(--ink); }
.tl--modre { background: var(--blue); color: #fff; }
.tl--modre:hover { background: var(--blue-dark); }
.tl--mensi { padding: .65em 1.05em; font-size: .9rem; }
.tl--ikona { padding: .6em; }

/* hlavička */
.hlavicka { background: #fff; border-bottom: 1px solid var(--hair); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; }
.hlavicka .kontejner { display: flex; align-items: center; gap: 2rem; min-height: 4.75rem; }
.logo { font-weight: 800; font-size: 1.6rem; letter-spacing: -.04em; display: inline-flex; align-items: center; gap: .3em; color: var(--ink); line-height: 1; }
.logo .kostky { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: .95em; height: .95em; }
.logo .kostky i { display: block; }
.logo .kostky i:nth-child(1) { background: var(--green); }
.logo .kostky i:nth-child(2) { background: var(--blue); }
.logo .kostky i:nth-child(3) { background: var(--orange); }
.logo .kostky i:nth-child(4) { background: var(--violet); }
.menu { display: flex; gap: 1.75rem; margin: 0 0 0 auto; list-style: none; padding: 0; align-items: center; }
.menu li { margin: 0; }
.menu a { font-size: .95rem; font-weight: 600; color: var(--ink); padding: .35rem 0; white-space: nowrap; border-bottom: 2px solid transparent; display: block; line-height: 1.2; }
.menu a:hover, .menu a[aria-current] { border-color: var(--ink); }
.menu-prepinac { display: none; }
.hlavicka .akce { gap: .5rem; margin-left: .5rem; }
.tl--znacka { background: var(--ink); color: #fff; position: relative; border: 0; padding-left: 1.6em; }
.tl--znacka::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, var(--green) 0 25%, var(--blue) 25% 50%, var(--orange) 50% 75%, var(--violet) 75% 100%); }
.tl--znacka::after { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--green) 0 25%, var(--blue) 25% 50%, var(--orange) 50% 75%, var(--violet) 75% 100%); }
.tl--znacka:hover { background: var(--ink-2); }

/* sekce */
.sekce { padding-block: var(--sekce); position: relative; }
.sekce--seda { background: var(--grey); }
.sekce--tmava { background: var(--ink); color: #fff; }
.sekce--tmava .lead { color: rgba(255,255,255,.72); }
.sekce--tmava .popis { color: rgba(255,255,255,.6); }
.sekce-hlava { display: grid; gap: .9rem; margin-bottom: 3rem; max-width: 48rem; }
.sekce-hlava .lead { margin: 0; }
.sekce-hlava--radek { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; max-width: none; flex-wrap: wrap; }
.sekce-hlava--radek > div { display: grid; gap: .9rem; flex: 1 1 30rem; min-width: 0; max-width: 48rem; }
.sekce-hlava--radek > .tl { flex: 0 1 auto; align-self: flex-end; }
.moduly { display: inline-flex; gap: 4px; margin-bottom: 1.25rem; align-items: center; justify-self: start; }
.moduly i { display: block; width: 20px; height: 10px; flex: none; }
.moduly i:nth-child(1) { background: var(--green); }
.moduly i:nth-child(2) { background: var(--blue); }
.moduly i:nth-child(3) { background: var(--orange); }
.moduly i:nth-child(4) { background: var(--violet); }
.symbol { display: block; width: 28px; height: 28px; --symbol-tlumeny: var(--hair); --symbol-jadro: var(--ink); }
.symbol svg { display: block; width: 100%; height: 100%; }
.hero .symbol, .cta .symbol { width: 36px; height: 36px; }
:is(.tmave, .sekce--tmava, .kariera, .cta, .paticka, .udaj) .symbol { --symbol-tlumeny: var(--slate); --symbol-jadro: var(--paper); }
/* Podpora symbolů vložených také z PHP bez úpravy atributů SVG. */
.symbol svg [fill="#D9DFE5"] { fill: var(--symbol-tlumeny); }
.symbol svg [fill="#0B1420"] { fill: var(--symbol-jadro); }
.sekce-hlava .moduly, .hero-blok .moduly, .cta .moduly { margin-bottom: 0; }
.na-stred > .moduly, .na-stred > .symbol { justify-self: center; }
.modul { display: block; width: 24px; height: 12px; margin-bottom: 1rem; background: var(--divize); }

/* Ořezaná tónová grafika, cesta je relativní k themes/x-child/navit5.css. */
.se-supergrafikou, .paticka { position: relative; overflow: hidden; isolation: isolate; }
.se-supergrafikou::after, .paticka::after, .sekce--symbol::after {
  content: ""; position: absolute; right: -10rem; bottom: -12rem; width: 40rem; aspect-ratio: 1;
  background: url("assets/brand/supergrafika-jadro.svg") no-repeat center / contain;
  pointer-events: none; z-index: 0;
}
.hero-blok.se-supergrafikou::after { width: 30rem; right: -12rem; bottom: -10rem; }
.hero-blok.se-supergrafikou > * { position: relative; z-index: 1; }
.sekce--symbol { overflow: hidden; isolation: isolate; }
.sekce--symbol::after { right: -22rem; top: 4rem; bottom: auto; width: 48rem; opacity: .035; }

/* fotka na pozadí sekce, zarovnaná ke straně, šikmo oříznutá */
.foto-strana { position: absolute; top: 0; bottom: 0; width: 46%; overflow: hidden; z-index: 0; }
.foto-strana img { width: 100%; height: 100%; object-fit: cover; }
.foto-strana--vpravo { right: 0; clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); }
.foto-strana--vlevo { left: 0; clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%); }
.foto-strana::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,20,32,.05), rgba(11,20,32,.35)); }

/* hero: velká fotka, tmavý blok přesahuje do další sekce */
.hero { position: relative; z-index: 2; background: var(--ink); color: #fff; min-height: 38rem; display: grid; align-items: end; isolation: isolate; }
.hero-fotka { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-fotka img { width: 100%; height: 100%; object-fit: cover; }
.hero-fotka::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,20,32,.5) 0, rgba(11,20,32,.1) 60%, rgba(11,20,32,0) 100%); }
.hero .kontejner { padding-top: 6rem; }
.hero-blok { background: var(--ink); color: #fff; padding: 2.5rem; max-width: 40rem; min-height: 32rem; margin-bottom: calc(-1 * var(--hero-presah)); display: grid; grid-template-rows: 36px auto 1fr auto; gap: 1.25rem; }
.hero-blok h1 { max-width: 14ch; }
.hero-blok h1 em { font-style: normal; color: var(--c); }
.hero-blok .lead { color: rgba(255,255,255,.82); font-size: 1.15rem; }
.akce { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.hero-blok .lead { margin: 0; }
.hero-blok .akce { margin-top: .5rem; align-self: end; }
.hero-blok:has(.clanek-meta) { grid-template-rows: 36px auto 1fr auto auto; }
.hero-blok .akce .tl { min-height: 3.25rem; }
.hero--mensi { min-height: 0; }
.hero--mensi .kontejner { padding-top: 4.5rem; }
.hero--mensi .hero-blok { margin-bottom: calc(-1 * var(--hero-presah)); }
.hero--mensi h1 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); }
.po-hero, .sekce--seda.po-hero { padding-top: calc(var(--sekce) + var(--hero-presah)); }

/* nabídka po liniích: vlevo linie, vpravo dlaždice */
.linie-radek { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 2.5rem; padding: 2.5rem 0; border-top: 1px solid var(--hair); --c: var(--green); --c-dark: var(--green-dark); }
.linie-radek:last-child { border-bottom: 1px solid var(--hair); }
.linie-radek--ai { --c: var(--blue); --c-dark: var(--blue-dark); }
.linie-radek--it { --c: var(--orange); --c-dark: var(--orange-dark); }
.linie-radek--nastroje { --c: var(--violet); --c-dark: var(--violet-dark); }
.linie-hlava { display: grid; gap: .6rem; align-content: start; }
.linie-hlava .modul { margin-bottom: .4rem; }
.linie-hlava h3 { font-size: 1.5rem; }
.linie-hlava p { font-size: .95rem; color: var(--slate); }
.linie-hlava .tl { justify-self: start; margin-top: .4rem; }
.dlazdice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.dlazdice > a, .dlazdice > article { background: var(--grey); padding: 1.4rem 1.4rem 1.25rem; display: grid; grid-template-rows: auto auto 1fr 2.4rem; gap: .7rem; aspect-ratio: 1 / 1; position: relative; min-width: 0; border-top: 3px solid var(--c); border-left: 3px solid var(--c); }
.dlazdice .ikona { width: 2.5rem; height: 2.5rem; background: var(--c); display: grid; place-items: center; }
.dlazdice .ikona svg { width: 1.4rem; height: 1.4rem; stroke: var(--ink); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.linie-radek--ai .dlazdice .ikona svg, .linie-radek--nastroje .dlazdice .ikona svg { stroke: #fff; }
.dlazdice h4 { font-size: 1.05rem; font-weight: 700; line-height: 1.25; }
.dlazdice p { font-size: .875rem; color: var(--slate); line-height: 1.5; }
.sipka { justify-self: end; align-self: end; width: 2.4rem; height: 2.4rem; border: 2px solid var(--c); color: var(--c-dark); display: grid; place-items: center; background: transparent; }
.sipka svg { width: 1rem; height: 1rem; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dlazdice a:hover .sipka, .sipka:hover { background: var(--c); color: var(--c-text); }
.linie-radek--ai .dlazdice a:hover .sipka, .linie-radek--nastroje .dlazdice a:hover .sipka { color: #fff; }

/* cesta ZoKB: čtyři čtvercové dlaždice, číslo ve čtverci, tlačítko vpravo dole */
.cesta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; counter-reset: krok; padding: 0; margin: 0; }
.cesta li { list-style: none; counter-increment: krok; background: #fff; padding: 1.5rem 1.5rem 1.25rem; display: grid; grid-template-rows: auto auto 1fr 2.4rem; gap: .6rem; aspect-ratio: 1 / 1; margin: 0; min-width: 0; border-top: 3px solid var(--c); border-left: 3px solid var(--c); }
.cesta .cis { width: 2.5rem; height: 2.5rem; background: var(--c); color: var(--c-text); display: grid; place-items: center; font-weight: 800; font-size: 1rem; }
.cesta .cis::before { content: counter(krok, decimal-leading-zero); }
.cesta li:last-child { border-color: var(--ink); }
.cesta li:last-child .cis { background: var(--ink); color: var(--c); }
.cesta h3 { font-size: 1.15rem; }
.cesta h3 small { display: block; font-size: .85rem; color: var(--slate); font-weight: 500; margin-top: .25rem; letter-spacing: 0; }
.cesta p { font-size: .875rem; color: var(--slate); line-height: 1.5; }
.cesta .sipka { grid-row: 4; }
.cesta li:last-child .sipka { --c: var(--ink); }
.cesta li:last-child:hover .sipka, .cesta li:hover .sipka { background: var(--c); }
.cesta li:last-child:hover .sipka { color: #fff; }

/* Jsme NAVIT: fotka vlevo se šikmým řezem, text vpravo, čísla v tmavém pruhu */
.jsme .kontejner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; }
.jsme .text { grid-column: 2; display: grid; gap: 1rem; align-content: center; padding-block: 3rem; }
.jsme .text .lead { margin: 0; }
.jsme .text .akce { margin-top: .5rem; }
/* kariéra: tmavá sekce, fotka vpravo */
.kariera { background: var(--ink); color: #fff; }
.kariera .foto-strana::after { background: linear-gradient(90deg, var(--ink), rgba(11,20,32,.15) 50%, rgba(11,20,32,.1)); }
.kariera .kontejner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; }
.kariera .text { grid-column: 1; display: grid; gap: 1rem; align-content: center; padding-block: 1rem; }
.kariera .text .lead { margin: 0; color: rgba(255,255,255,.75); }
.kariera .pozice { list-style: none; padding: 0; display: grid; gap: .5rem; margin-top: .5rem; }
.kariera .pozice li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.25rem; background: var(--ink-2); border-top: 3px solid var(--c); border-left: 3px solid var(--c); font-weight: 700; margin: 0; }
.kariera .pozice small { font-weight: 500; color: rgba(255,255,255,.6); display: block; }
.kariera .pozice .tl { color: #fff; border-color: rgba(255,255,255,.5); }
.kariera .pozice .tl:hover { background: #fff; color: var(--ink); }

/* články s fotkou a štítkem */
.clanky { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.clanky article { background: #fff; display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.clanky .text { padding-left: 0 !important; padding-right: 0 !important; }
.clanky .obr { position: relative; }
.clanky img { aspect-ratio: 3 / 2; width: 100%; object-fit: cover; }
.clanky .meta { display: flex; gap: 1rem; font-size: .8rem; font-weight: 700; }
.clanky .meta .kat { color: var(--green-dark); }
.clanky .meta .kat--ai { color: var(--blue-dark); }
.clanky .text { padding: 1.5rem 1.5rem 1.6rem; display: grid; grid-template-rows: auto auto 1fr auto; gap: .6rem; grid-row: 2; }
.clanky h3 { font-size: 1.05rem; line-height: 1.3; }
.clanky p { font-size: .95rem; color: var(--slate); }
.clanky .tl { margin-top: 0; justify-self: start; align-self: end; grid-row: 4; }

/* pás cesty (stránky kroků) */
.pas { background: var(--grey); border-bottom: 1px solid var(--hair); }
.pas ol { display: flex; gap: 0; list-style: none; padding: 0; margin: 0; counter-reset: krok; flex-wrap: wrap; }
.pas li { counter-increment: krok; display: flex; align-items: center; gap: .7rem; padding: 1rem 1.5rem 1rem 1rem; font-size: .925rem; color: var(--slate); border-right: 1px solid var(--hair); }
.pas li:first-child { padding-left: 0; }
.pas li::before { content: counter(krok, decimal-leading-zero); font-size: .8rem; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; background: var(--grey-2); color: var(--slate); }
.pas li[aria-current] { color: var(--ink); font-weight: 700; }
.pas li[aria-current]::before { background: var(--c); color: var(--c-text); }
.pas li.hotovo::before { background: var(--ink); color: #fff; }

/* porovnání režimů */
.panel { background: #fff; border: 1px solid var(--hair); padding: 1.5rem 2rem 2rem; }
.porovnani { width: 100%; border-collapse: collapse; font-size: 1rem; }
.porovnani th, .porovnani td { padding: .85rem 1rem; border-bottom: 1px solid var(--hair); text-align: left; vertical-align: top; }
.porovnani thead th { font-size: .9rem; color: var(--slate); font-weight: 700; border-bottom: 2px solid var(--ink); }
.porovnani thead th.rezim { text-align: center; width: 13rem; }
.porovnani thead th.rezim b { display: block; color: var(--ink); font-size: 1.05rem; }
.porovnani tbody th { font-weight: 400; }
.porovnani tbody th small { display: block; color: var(--slate); font-size: .875rem; }
.porovnani td.z { text-align: center; }
.porovnani td.z svg { width: 1.3rem; height: 1.3rem; vertical-align: middle; }
.porovnani td.z .ano { stroke: var(--green-dark); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.porovnani td.z .ne { color: var(--slate); }
.porovnani tr.skupina th { padding-top: 1.75rem; font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); border-bottom: 0; }
.porovnani tfoot td { border-bottom: 0; padding-top: 1.25rem; font-size: .925rem; color: var(--slate); }
.obal-tabulky { overflow-x: auto; }
.sloupce-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; align-items: start; }

/* osa lhůt */
.osa { display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.hodiny { display: grid; grid-template-columns: 14rem 1fr; gap: 1.5rem; align-items: start; padding: 1.5rem 1.75rem; background: #fff; }
.hodiny .start { font-weight: 700; line-height: 1.3; font-size: 1.05rem; }
.hodiny .start small { display: block; font-weight: 500; color: var(--slate); font-size: .875rem; margin-top: .3rem; }
.hodiny .linka { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: relative; padding-top: 1.5rem; }
.hodiny .linka::before { content: ""; position: absolute; left: 0; right: 0; top: .5rem; height: 2px; background: var(--ink); }
.hodiny .linka::after { content: ""; position: absolute; right: -2px; top: .25rem; border: 6px solid transparent; border-left: 8px solid var(--ink); }
.hodiny .udalost { position: relative; padding-right: 1rem; font-size: .95rem; line-height: 1.4; }
.hodiny .udalost::before { content: ""; position: absolute; left: 0; top: -1.3rem; width: 12px; height: 12px; background: var(--green); outline: 2px solid var(--ink); }
.hodiny .udalost b { display: block; font-weight: 500; font-size: 1.2rem; }
.hodiny .udalost span { color: var(--slate); display: block; }

/* panel s tvrdým údajem */
.udaj { background: var(--ink); color: #fff; padding: 1.75rem 2rem; display: grid; gap: .5rem; align-content: start; border-top: 4px solid var(--c); border-left: 4px solid var(--c); }
.udaj h3 { font-size: 1.15rem; }
.udaj p { color: rgba(255,255,255,.78); font-size: .975rem; }
.udaj .cislo { color: var(--mint); }
.udaj--zeleny { border-top-color: var(--c); border-left-color: var(--c); }

.seznam { list-style: none; padding: 0; }
.seznam li { position: relative; padding-left: 1.3rem; max-width: 62ch; }
.seznam li::before { content: ""; position: absolute; left: 0; top: .6em; width: .5rem; height: .5rem; background: var(--green); }

/* otázky */
.faq { display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); max-width: 52rem; }
.faq details { background: #fff; }
.faq summary { cursor: pointer; padding: 1.1rem 3rem 1.1rem 1.5rem; font-weight: 700; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 1.25rem; top: .95rem; font-size: 1.3rem; color: var(--green-dark); }
.faq details[open] summary::after { content: "–"; }
.faq .odpoved { padding: 0 1.5rem 1.25rem; }

/* další krok */
.dalsi .kontejner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; background: var(--ink); color: #fff; padding: 2rem 2.5rem; border-top: 4px solid var(--green); border-left: 4px solid var(--green); }
.dalsi strong { display: block; font-size: 1.3rem; letter-spacing: -.01em; }
.dalsi .popis { margin: 0 0 .25rem; color: rgba(255,255,255,.6); }

.zdroje { font-size: .875rem; color: var(--slate); max-width: 62ch; }
.zdroje strong { color: var(--ink); }

/* CTA: tmavé s fotkou vpravo */
.cta { background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.cta .foto-strana::after { background: linear-gradient(90deg, var(--ink) 0, rgba(11,20,32,.2) 40%, rgba(11,20,32,.1) 100%); }
.cta .kontejner { padding-block: 6rem; display: grid; gap: 1.25rem; max-width: var(--w); }
.cta h2 { max-width: 16ch; }
.cta .lead { color: rgba(255,255,255,.8); }
.cta .tel { color: rgba(255,255,255,.85); }
.cta .tel b { font-weight: 500; }

/* patička */
.paticka { background: #fff; border-top: 1px solid var(--hair); padding-block: 4rem 2rem; font-size: .925rem; color: var(--slate); }
.paticka .mrizka { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 2.5rem; }
.paticka h4 { color: var(--ink); font-size: .95rem; margin-bottom: .85rem; font-weight: 800; }
.paticka ul { list-style: none; padding: 0; }
.paticka li { margin: .4rem 0; }
.paticka a:hover { color: var(--ink); }
.paticka .logo { font-size: 1.4rem; margin-bottom: .9rem; }
.paticka .dolni { border-top: 1px solid var(--hair); margin-top: 3rem; padding-top: 1.25rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .85rem; }

/* responzivita */
@media (max-width: 1100px) {
  .dlazdice { grid-template-columns: repeat(2, 1fr); }
  .linie-radek { grid-template-columns: 13rem minmax(0, 1fr); gap: 1.5rem; }
  .cesta { grid-template-columns: repeat(2, 1fr); }
  .clanky { grid-template-columns: repeat(2, 1fr); }
  .hodiny { grid-template-columns: 1fr; gap: 1rem; }
  .produkty { grid-template-columns: 1fr; }
  .foto-strana { width: 40%; }
  .paticka .mrizka { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 767px) {
  :root { --sekce: 4rem; }
  .menu { position: absolute; left: 0; right: 0; top: 100%; background: #fff; flex-direction: column; gap: 0; padding: .5rem var(--gutter) 1.25rem; display: none; border-bottom: 1px solid var(--hair); }
  .menu li a { display: block; padding: .7rem 0; }
  .menu-prepinac { display: inline-flex; margin-left: auto; background: none; border: 2px solid var(--ink); padding: .5rem .9rem; font: inherit; font-weight: 700; font-size: .9rem; color: var(--ink); cursor: pointer; }
  .hlavicka.otevrena .menu { display: flex; }
  .hlavicka .akce { display: none; }
  .hero { min-height: 0; }
  .hero .kontejner { padding-top: 14rem; }
  :root { --hero-presah: 2rem; }
  .hero-blok { padding: 2rem 1.5rem; min-height: 0; margin-bottom: calc(-1 * var(--hero-presah)); }
  .po-hero, .sekce--seda.po-hero { padding-top: calc(var(--sekce) + var(--hero-presah)); }
  .dlazdice, .cesta, .clanky, .sloupce-2 { grid-template-columns: 1fr; }
  .dlazdice a, .cesta li { aspect-ratio: auto; min-height: 14rem; }
  .linie-radek { grid-template-columns: 1fr; gap: 1.25rem; }
  .jsme .kontejner { grid-template-columns: 1fr; }
  .jsme .text { grid-column: 1; }
  .menu { border-left: 0; padding-left: 0; }
  .kariera .kontejner { grid-template-columns: 1fr; }
  .kariera .text { grid-column: 1; }
  .foto-strana { position: relative; width: 100%; height: 14rem; clip-path: none; }
  .hodiny .linka { grid-auto-flow: row; grid-auto-columns: auto; padding-top: 0; padding-left: 1.5rem; gap: 1rem; }
  .hodiny .linka::before { left: .35rem; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .hodiny .linka::after { display: none; }
  .hodiny .udalost::before { left: -1.5rem; top: .3rem; }
  .produkt .text { padding: 1.75rem 1.5rem; }
  .produkt .nahled { padding: 0 1.5rem; }
  .produkt ul { grid-template-columns: 1fr; }
  .paticka .mrizka { grid-template-columns: 1fr 1fr; }
  .porovnani thead th.rezim { width: 6rem; }
  .panel { padding: 1rem 1rem 1.5rem; }
  .dalsi .kontejner { padding: 1.5rem; }
}

/* Doplňky k navrh.css pro generované stránky (vyklad5.py) a šablony child themu.
   Stejná pravidla: ostré rohy, horní a levý barevný okraj, šipka ve čtverečku. */

/* barvy dlaždic mimo [nabidka] (podle barvy stránky) */
.dlazdice--kyber { --c: var(--green); --c-dark: var(--green-dark); --c-text: var(--ink); }
.dlazdice--ai { --c: var(--blue); --c-dark: var(--blue-dark); --c-text: var(--paper); }
.dlazdice--it { --c: var(--orange); --c-dark: var(--orange-dark); --c-text: var(--paper); }
.dlazdice--nastroje { --c: var(--violet); --c-dark: var(--violet-dark); --c-text: var(--paper); }
.dlazdice--firma { --c: var(--ink); --c-dark: var(--ink); --c-text: var(--paper); }
.dlazdice .ikona svg { stroke: var(--c-text); }
.dlazdice a:hover .sipka { color: var(--c-text); }
.dlazdice > a > .sipka { grid-row: 4; }
.dlazdice p { margin: 0; }
.dlazdice--text > article { aspect-ratio: auto; grid-template-rows: 2.5rem auto 1fr; align-content: start; }
.akcent { color: var(--mint); }
.sekce .akcent, .sekce--seda .akcent { color: var(--c-dark); }
.tmave .akcent, .sekce--tmava .akcent, .hero .akcent, .cta .akcent { color: var(--c); }

/* Divizní akcent v obsahu, včetně starších komponent. */
:is(.telo, .panel, .odpoved, .skupina, .argument, .clanek-telo) a:where(:not(.tl, .sipka, .nv-tlacitko)), .text :is(p, li) a:where(:not(.tl, .sipka)) { color: var(--c-dark); text-decoration: underline; text-underline-offset: .15em; }
:is(.tmave, .udaj) :is(.text, .telo, p, li) a:where(:not(.tl, .sipka)), .udaj--panel a { color: var(--c); }
.seznam li::before, .udaj--panel .seznam li::before, .hodiny .udalost::before { background: var(--c); }
.udaj .cislo, .clanek-meta .kat { color: var(--c); }
.faq summary::after, .porovnani td.z .ano { color: var(--c-dark); stroke: var(--c-dark); }
.dalsi .kontejner { border-top-color: var(--c); border-left-color: var(--c); }

/* text ve sloupci */
.telo--uzky { max-width: 62ch; }
.telo p, .telo li { max-width: 62ch; }
.telo .udaj, .boxy .udaj { margin-top: 1rem; }
.telo .udaj:first-child, .boxy .udaj:first-child { margin-top: 0; }
.telo ol { padding-left: 1.3em; }
.pod { margin-top: 2rem; }
.akce--stred { justify-content: center; margin-top: 2.5rem; }

/* sekce s fotkou na straně */
.s-fotkou .kontejner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; min-height: 24rem; }
.s-fotkou--vpravo .text { grid-column: 1; }
.s-fotkou--vlevo .text { grid-column: 2; }
.s-fotkou .text { display: grid; gap: 1rem; align-content: center; padding-block: 1rem; }
.s-fotkou .text .lead { margin: 0; }
.s-fotkou .text p { margin: 0; }

/* dva sloupce v panelech */
.sloupce-2--panely > div { padding: 2rem 2.25rem; }
.sloupce-2--panely .panel h3, .sloupce-2--panely .udaj h3 { margin-bottom: 1rem; font-size: 1.3rem; }
.udaj--panel { border-top-color: var(--c); border-left-color: var(--c); }
.udaj--panel ul, .udaj--panel ol { padding-left: 1.2em; color: rgba(255,255,255,.85); }
.udaj--panel .seznam li::before { background: var(--c); }
.udaj--panel p { color: rgba(255,255,255,.85); }
.udaj--panel a { color: var(--c); }
.panel > p, .panel li { max-width: 62ch; }
.panel .seznam { margin-top: .5rem; }

/* fakta v řadě */
.fakta-radek { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.fakta-radek div { background: #fff; padding: 1.5rem 1.5rem 1.4rem; border-top: 3px solid var(--c); border-left: 3px solid var(--c); display: grid; gap: .35rem; min-width: 0; }
.fakta-radek dt { font-size: 2rem; line-height: 1; font-weight: 800; letter-spacing: -.02em; }
.fakta-radek dd { margin: 0; font-size: .925rem; color: var(--slate); }
.sekce:not(.sekce--seda) .fakta-radek div { background: var(--grey); }

/* argumenty */
.argumenty { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.argument { background: var(--grey); padding: 1.5rem 1.6rem; border-top: 3px solid var(--c); border-left: 3px solid var(--c); display: grid; gap: .4rem; }
.argument strong { font-size: 1.1rem; }
.argument p { font-size: .95rem; color: var(--slate); margin: 0; }

/* skupiny opatření */
.skupiny { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.skupina { background: var(--grey); padding: 1.25rem 1.4rem; display: grid; gap: .3rem; border-top: 3px solid var(--c, var(--green)); border-left: 3px solid var(--c, var(--green)); }
.skupina strong { font-size: 1.05rem; }
.skupina p { font-size: .9rem; color: var(--slate); margin: 0; }
.linie-radek--kyber { --c: var(--green); --c-dark: var(--green-dark); }

/* kroky: výstupy jako štítky, dva sloupce */
.kroky .vystupy { display: flex; flex-wrap: wrap; gap: .35rem; align-self: end; grid-row: 4; }
.kroky .vystupy span { font-size: .78rem; font-weight: 700; padding: .25em .6em; background: var(--grey); }
.kroky li { grid-template-rows: auto auto 1fr auto; }
.kroky--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kroky--2 li { aspect-ratio: auto; min-height: 13rem; }
.kroky li:last-child { border-color: var(--c); }
.kroky li:last-child .cis { background: var(--c); color: var(--c-text); }
.kroky p { margin: 0; }
.kroky--ai li, .kroky--ai li:last-child { border-color: var(--blue); }
.kroky--ai .cis, .kroky--ai li:last-child .cis { background: var(--blue); color: #fff; }
.kroky--it li, .kroky--it li:last-child { border-color: var(--orange); }
.kroky--it .cis, .kroky--it li:last-child .cis { background: var(--orange); color: #fff; }
.kroky--nastroje li, .kroky--nastroje li:last-child { border-color: var(--violet); }
.kroky--nastroje .cis, .kroky--nastroje li:last-child .cis { background: var(--violet); color: #fff; }
.kroky--firma li, .kroky--firma li:last-child { border-color: var(--ink); }
.kroky--firma .cis, .kroky--firma li:last-child .cis { background: var(--ink); color: #fff; }
.sloupec-nadpis { margin-bottom: 1rem; }

/* pás cesty pod hero */
.pas-obal { padding-top: calc(var(--sekce) + var(--hero-presah)); padding-bottom: 0; }
.pas-obal + .sekce { padding-top: 3rem; }
.pas { background: transparent; border: 0; }
.pas ol { padding: 0; }
.pas li[aria-current] { border-bottom: 3px solid var(--c); }
.pas li a:hover { color: var(--c-dark); }

/* Pruhy s fotkou a nové plnobarevné varianty bez fotky. */
.pruh { background: var(--ink); color: var(--paper); overflow: hidden; }
.pruh .text { display: grid; gap: 1.25rem; max-width: 38rem; }
.pruh .lead { color: inherit; margin: 0; }
.pruh .foto-strana::after { background: linear-gradient(90deg, var(--ink), transparent); }
.pruh.pruh--barevny { background: var(--divize); color: var(--c-text); }
.pruh--barevny .text { max-width: 56rem; }
.pruh--barevny h2 { max-width: 32ch; }
.pruh--barevny p { max-width: 62ch; margin: 0; }
.pruh--barevny .akcent, .pruh--barevny .text a { color: inherit; }
.pruh.pruh--zelene { background: var(--green); color: var(--ink); }
.pruh.pruh--modra { background: var(--blue); color: var(--paper); }

/* Portfolio: snímek nebo pojmenovaná šedá plocha, odkaz jen s URL. */
.portfolio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.portfolio-polozka { min-width: 0; display: grid; grid-template-rows: auto 1fr; border-top: 3px solid var(--c); border-left: 3px solid var(--c); background: var(--grey); }
.portfolio-nahled { aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--grey-2); overflow: hidden; }
.portfolio-nahled img { width: 100%; height: 100%; object-fit: cover; }
.portfolio-nahled span { padding: 2rem; font-size: 1.3rem; font-weight: 700; text-align: center; }
.portfolio-text { display: grid; grid-template-rows: auto 1fr auto; gap: .75rem; padding: 1.5rem; }
.portfolio-text h3 { font-size: 1.2rem; }
.portfolio-text p { color: var(--slate); margin: 0; }
.portfolio-polozka:hover .sipka { background: var(--c); color: var(--c-text); }

/* formulář a údaje o firmě */
.sloupce-2--formular { margin-top: 1rem; }
.sloupce-2--formular > * { min-width: 0; }
.formular { background: var(--ink); color: var(--paper); padding: 2rem 2.25rem; color-scheme: light; }
.formular .wpforms-container { margin: 0; }
.formular .wpforms-field { padding: .5rem 0 !important; }
.formular .wpforms-field-label { color: var(--paper) !important; font-weight: 700 !important; font-size: .95rem !important; margin-bottom: .35rem !important; }
.formular input[type=text], .formular input[type=email], .formular input[type=tel], .formular textarea, .formular select {
  width: 100% !important; max-width: 100% !important; border: 2px solid var(--hair) !important; border-radius: 0 !important; padding: .75em .9em !important; font: inherit !important; background: #fff !important; color: var(--ink) !important; }
.formular input:focus, .formular textarea:focus, .formular select:focus { border-color: var(--c) !important; outline: 2px solid var(--paper) !important; outline-offset: 2px; }
.formular button[type=submit], .formular .wpforms-submit { background: var(--divize) !important; color: var(--c-text) !important; border: 0 !important; border-radius: 0 !important; font: inherit !important; font-weight: 700 !important; padding: .9em 1.5em !important; }
.formular button[type=submit]:hover, .formular .wpforms-submit:hover { background: var(--c-hover) !important; }
.formular .wpforms-field-description, .formular .wpforms-field-sublabel, .formular .wpforms-field-label-inline { color: var(--paper) !important; font-size: .85rem !important; }
.formular .wpforms-required-label, .formular .wpforms-error { color: #ffb8a3 !important; }
.formular .wpforms-confirmation-container { color: var(--ink); }
.firma { background: var(--grey); padding: 2rem 2.25rem; border-top: 3px solid var(--ink); border-left: 3px solid var(--ink); align-self: start; }
.firma h3 { margin-bottom: 1rem; }
.firma ul { list-style: none; padding: 0; margin: 0; }
.firma ul + ul { border-top: 1px solid var(--hair); margin-top: 1.25rem; padding-top: 1.25rem; }
.firma li { display: flex; gap: .9rem; align-items: flex-start; padding: .6rem 0; border-top: 1px solid var(--hair); margin: 0; }
.firma li:first-child { border-top: 0; }
.firma li svg { width: 1.25rem; height: 1.25rem; flex: none; margin-top: .2rem; stroke: var(--c-dark); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.firma a { color: var(--ink); font-weight: 600; }

/* osoba */
.osoba .kontejner { display: grid; grid-template-columns: 18rem minmax(0, 1fr); gap: 3rem; align-items: start; }
.osoba-portret { width: 18rem; max-width: 100%; aspect-ratio: 1; }
.osoba-portret img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.osoba .text { display: grid; gap: 1rem; }
.osoba .text p { margin: 0; }
.osoba .jmeno { font-size: 1.1rem; }
.osoba .jmeno span { color: var(--slate); font-weight: 400; }

/* články: výpis dlaždic (shortcode nv5_clanky, stránka Články, archiv) */
.clanky .obr { position: relative; }
.clanky--vypis { margin-top: 2rem; }
.strankovani { display: flex; justify-content: center; margin-top: 2.5rem; }
.strankovani ul { list-style: none; padding: 0; display: flex; gap: .5rem; }
.strankovani a, .strankovani span { display: inline-block; padding: .55em .9em; border: 2px solid var(--hair); font-weight: 700; }
.strankovani .current { background: var(--ink); color: #fff; border-color: var(--ink); }

/* článek: tělo textu */
.clanek-telo { max-width: 46rem; }
.clanek-telo h2 { font-size: 1.6rem; margin: 2.25rem 0 .75rem; }
.clanek-telo h3 { font-size: 1.2rem; margin: 1.75rem 0 .5rem; }
.clanek-telo p, .clanek-telo li { max-width: 62ch; }
.clanek-telo ul, .clanek-telo ol { margin: 0 0 1em; padding-left: 1.3em; }
.clanek-telo a { color: var(--green-dark); text-decoration: underline; }
.clanek-telo .nv-box, .clanek-telo .nv-box--pozor { background: var(--ink); color: #fff; padding: 1.5rem 1.75rem; margin: 1.5rem 0; border-top: 4px solid var(--green); border-left: 4px solid var(--green); }
.clanek-telo .nv-box--pozor { border-color: var(--orange); }
.clanek-telo .nv-box-nadpis { display: block; font-weight: 800; margin-bottom: .4rem; }
.clanek-telo .nv-box p { color: rgba(255,255,255,.85); margin: 0; }
.clanek-telo .nv-box a { color: var(--mint); }
.clanek-telo table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .95rem; }
.clanek-telo th, .clanek-telo td { padding: .7rem .9rem; border-bottom: 1px solid var(--hair); text-align: left; vertical-align: top; }
.clanek-telo thead th { border-bottom: 2px solid var(--ink); font-weight: 700; }
.clanek-telo .nv-predpisy, .clanek-telo .nv-zdroje { font-size: .875rem; color: var(--slate); border-top: 1px solid var(--hair); padding-top: 1rem; margin-top: 2.5rem; }
.clanek-telo .nv-predpisy-nadpis, .clanek-telo .nv-zdroje-nadpis { font-weight: 800; color: var(--ink); }
.clanek-telo .nv-kicker { display: none; }
.clanek-telo .nv-clanek-akce { background: var(--ink); color: #fff; padding: 1.5rem 1.75rem; margin: 2rem 0; border-top: 4px solid var(--green); border-left: 4px solid var(--green); display: grid; gap: .5rem; }
.clanek-telo .nv-clanek-akce p { color: rgba(255,255,255,.85); margin: 0; }
.clanek-telo .nv-clanek-akce-nazev { font-weight: 800; font-size: 1.15rem; }
.clanek-telo .nv-clanek-akce .nv-ikona { display: none; }
.clanek-telo .nv-clanek-akce .nv-tlacitko { display: inline-flex; justify-self: start; margin-top: .5rem; background: var(--green); color: var(--ink); font-weight: 700; padding: .8em 1.3em; text-decoration: none; }
.clanek-telo .nv-par { font-size: .85rem; color: var(--slate); }
.clanek-telo img { margin: 1.5rem 0; }
.clanek-telo sup a { text-decoration: none; }
.clanek-meta { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .9rem; color: rgba(255,255,255,.7); }
.clanek-meta .kat { color: var(--mint); font-weight: 700; }
.clanek-akce { margin-top: 2.5rem; display: flex; gap: .75rem; flex-wrap: wrap; }

/* kalkulačka */
.kalk-rozlozeni { display: grid; grid-template-columns: 60fr 40fr; gap: 3rem; align-items: start; }
.nv-kalk { background: var(--grey); padding: 2rem; border-top: 3px solid var(--green); border-left: 3px solid var(--green); }
.nv-kalk-kroky { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; gap: .5rem; flex-wrap: wrap; counter-reset: kk; }
.nv-kalk-kroky li { counter-increment: kk; padding: .4em .8em; background: #fff; font-weight: 700; font-size: .9rem; color: var(--slate); }
.nv-kalk-kroky li::before { content: counter(kk) " "; color: var(--green-dark); }
.nv-kalk-kroky li.je-aktivni { background: var(--ink); color: #fff; }
.nv-kalk-pozn { font-size: .85rem; color: var(--slate); margin-top: 1.5rem; }
.nv-kalk button, .nv-kalk .nv-tlacitko { background: var(--green); color: var(--ink); border: 0; font: inherit; font-weight: 700; padding: .8em 1.3em; cursor: pointer; }
.nv-kalk .nv-tlacitko--tiche, .nv-kalk button.tiche { background: transparent; border: 2px solid var(--ink); }
.nv-kalk label { display: block; padding: .6em .8em; background: #fff; margin: .35rem 0; cursor: pointer; border: 2px solid transparent; }
.nv-kalk label:has(input:checked) { border-color: var(--ink); }
.nv-kalk select, .nv-kalk input[type=text], .nv-kalk input[type=number] { width: 100%; padding: .7em .8em; border: 2px solid var(--hair); font: inherit; background: #fff; }
.nv-kalk .nv-kalk-vysledek { background: var(--ink); color: #fff; padding: 1.5rem; margin-top: 1rem; border-top: 4px solid var(--green); border-left: 4px solid var(--green); }
.nv-kalk .nv-kalk-vysledek a { color: var(--mint); }

/* 404 */
.rozcestnik { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

/* Patička dostává stejnou tmavou plochu jako ostatní supergrafika. */
.paticka { background: var(--ink); color: var(--hair); border-top-color: var(--slate); }
.paticka h4, .paticka a:hover { color: var(--paper); }
.paticka .dolni { border-top-color: var(--slate); }

@media (max-width: 1100px) {
  .fakta-radek { grid-template-columns: repeat(2, 1fr); }
  .portfolio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .s-fotkou .kontejner { grid-template-columns: 1fr; }
  .s-fotkou .text { grid-column: 1 !important; }
  .fakta-radek, .argumenty, .skupiny, .kroky--2, .rozcestnik { grid-template-columns: 1fr; }
  .kalk-rozlozeni { grid-template-columns: 1fr; }
  .pas-obal { padding-top: calc(var(--sekce) + var(--hero-presah)); }
  .sloupce-2--panely > div { padding: 1.5rem; }
  .portfolio, .osoba .kontejner { grid-template-columns: 1fr; }
  .formular, .firma { padding: 1.5rem; }
  .osoba .kontejner { gap: 2rem; }
  .sekce-hlava--radek { gap: 1.5rem; }
  .se-supergrafikou::after, .paticka::after { right: -18rem; }
}

/* Rám webu v5. Zdroj identity: logo/navit-logo-web/web/navit-identita.css.
   Skládá se až za navrh.css a extra.css, oba původní soubory zůstávají beze změny. */

/* Logo z křivek a jeho divizní varianty. Barvy platí jen uvnitř loga. */
.logo-odkaz { display: inline-flex; flex: none; padding: .5rem; }
.navit-logo { display: block; height: 28px; width: auto; color: var(--ink); }
.navit-logo--inverzni, .na-tmavem .navit-logo { color: var(--paper); }
.navit-logo[class*="navit-logo--"] { --logo-neaktivni: var(--hair); }
.navit-logo.navit-logo--inverzni { --logo-neaktivni: var(--slate); }
.navit-logo--kyber { --blue: var(--logo-neaktivni); --orange: var(--logo-neaktivni); --violet: var(--logo-neaktivni); }
.navit-logo--ai { --green: var(--logo-neaktivni); --orange: var(--logo-neaktivni); --violet: var(--logo-neaktivni); }
.navit-logo--it { --green: var(--logo-neaktivni); --blue: var(--logo-neaktivni); --violet: var(--logo-neaktivni); }
.navit-logo--nastroje { --green: var(--logo-neaktivni); --blue: var(--logo-neaktivni); --orange: var(--logo-neaktivni); }

/* Moduly 20 × 10 px, divizní symbol alespoň 32 px. */
.moduly { display: inline-flex; gap: 4px; margin-bottom: 1.25rem; }
.moduly i { display: block; flex: none; width: 20px; height: 10px; }
.moduly i:nth-child(1) { background: var(--green); }
.moduly i:nth-child(2) { background: var(--blue); }
.moduly i:nth-child(3) { background: var(--orange); }
.moduly i:nth-child(4) { background: var(--violet); }
.symbol { display: inline-flex; width: 36px; height: 36px; margin-bottom: 1.25rem; flex: none; }
.symbol svg { display: block; width: 100%; height: 100%; }
:is(.tmave, .sekce--tmava, .na-tmavem) .symbol svg [fill="#D9DFE5"] { fill: var(--slate); }
:is(.tmave, .sekce--tmava, .na-tmavem) .symbol svg [fill="#0B1420"] { fill: var(--paper); }

/* Menu má vlastní barvu, nezávislou na právě otevřené stránce. */
.hlavicka .kontejner { gap: 1.25rem; }
.hlavicka .menu { gap: 1.15rem; }
.menu a { position: relative; border-bottom: 0; padding-block: .65rem; }
.menu a::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: var(--menu-barva); transform: scaleX(0); transform-origin: left; transition: transform .18s ease; }
.menu a[data-divize="kyber"] { --menu-barva: var(--green); }
.menu a[data-divize="ai"] { --menu-barva: var(--blue); }
.menu a[data-divize="it"] { --menu-barva: var(--orange); }
.menu a[data-divize="nastroje"] { --menu-barva: var(--violet); }
.menu a[data-divize="firma"] { --menu-barva: linear-gradient(90deg, var(--green) 0 25%, var(--blue) 25% 50%, var(--orange) 50% 75%, var(--violet) 75% 100%); }
.menu a:is(:hover, :focus-visible, [aria-current])::after { transform: scaleX(1); }

/* Čtyři tvrdé barevné úseky přejedou zleva. Poslední je fialový. */
.hlavicka .tl--znacka { overflow: hidden; isolation: isolate; padding: .8em 1.15em; background: var(--ink); color: var(--paper); }
.hlavicka .tl--znacka > span { position: relative; z-index: 1; }
.hlavicka .tl--znacka::before { inset: 0 auto 0 0; width: 400%; background: linear-gradient(90deg, var(--violet) 0 25%, var(--orange) 25% 50%, var(--blue) 50% 75%, var(--green) 75% 100%); transform: translateX(-100%); }
.hlavicka .tl--znacka::after { z-index: 2; }
.hlavicka .tl--znacka:is(:hover, :focus-visible)::before { animation: nv5-konzultace .8s linear forwards; }
@keyframes nv5-konzultace { from { transform: translateX(-100%); } to { transform: translateX(0); } }

/* Inverzní patička a čtyři stejně dlouhé plné úseky nad ní. */
.linie { height: 4px; border: 0; margin: 0; background: linear-gradient(90deg, var(--green) 0 25%, var(--blue) 25% 50%, var(--orange) 50% 75%, var(--violet) 75% 100%); }
.paticka { background: var(--ink); color: var(--hair); border-top: 0; }
.paticka .mrizka { grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 1.75rem; }
.paticka .mrizka > div { min-width: 0; }
.paticka .logo-odkaz { margin: -.5rem 0 .75rem -.5rem; }
.paticka h4, .paticka a:is(:hover, :focus-visible) { color: var(--paper); }
.paticka a { overflow-wrap: anywhere; }
.paticka .dolni { border-color: var(--slate); }
.paticka .dolni > :last-child { max-width: 65ch; }

/* Kalkulačka: čitelný hlavní sloupec, textové kroky a menší vysvětlení. */
.nv5-kalkulacka .pas ol { gap: .5rem 1.75rem; }
.nv5-kalkulacka .pas li { padding: .6rem 0; margin: 0; border-right: 0; border-bottom: 3px solid transparent; }
.nv5-kalkulacka .pas li::before { width: auto; height: auto; background: transparent; color: inherit; }
.nv5-kalkulacka .pas li[aria-current] { border-bottom-color: var(--green); }
.kalk-sekce { padding-top: 3rem; }
.kalk-rozlozeni { grid-template-columns: minmax(0, 65fr) minmax(0, 35fr); gap: 2.5rem; }
.kalk-rozlozeni > * { min-width: 0; }
.nv-kalk { font-size: 1.125rem; }
.nv-kalk h2 { font-size: clamp(1.4rem, 1rem + 1vw, 1.9rem); margin-bottom: 1rem; }
.nv-kalk h3 { font-size: 1.15rem; margin-top: 1.5rem; }
.nv-kalk .nv-kalk-kroky { gap: .6rem 1.3rem; margin-bottom: 2rem; }
.nv-kalk .nv-kalk-kroky li { padding: .4rem 0 .65rem; margin: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--slate); font-size: .95rem; font-weight: 600; }
.nv-kalk .nv-kalk-kroky li::before { content: counter(kk, decimal-leading-zero) " "; font-variant-numeric: tabular-nums; color: inherit; }
.nv-kalk .nv-kalk-kroky li.je-aktivni { background: transparent; border-bottom-color: var(--green); color: var(--ink); font-weight: 800; }
.nv-kalk .nv-kalk-kroky li.je-hotovy { color: var(--green-dark); }
.nv-kalk-pole { margin-top: 1.25rem; }
.nv-kalk label { background: transparent; border: 0; margin: 0 0 .35rem; padding: 0; font-weight: 700; cursor: default; }
.nv-kalk select, .nv-kalk input { max-width: 100%; min-width: 0; border-radius: 0; color: var(--ink); }
.nv-kalk select:focus-visible, .nv-kalk input:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 2px; }
.nv-kalk-napoveda { display: block; margin-top: .4rem; font-size: .9rem; color: var(--slate); }
.nv-kalk-tlacitka { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1.5rem; }
.nv-kalk button { border-radius: 0; }
.nv-kalk button:hover { background: var(--mint); }
.nv-kalk .nv-tlacitko--tiche:hover { background: var(--ink); color: var(--paper); }
.nv-kalk-pozn a { text-decoration: underline; text-underline-offset: .2em; }
.nv-kalk .nv-kalk-vysledek { padding: 1.5rem; }
.nv-kalk-vysledek p { margin-top: 1rem; }
.nv-kalk .nv-kalk-vysledek .nv-kalk-stitek { margin: 0 0 .65rem; color: var(--mint); font-size: .85rem; font-weight: 700; }
.nv-kalk-odkazy { display: grid; gap: .5rem; font-size: 1rem; }
.nv-kalk-odkazy a { text-decoration: underline; text-underline-offset: .2em; }
.nv-kalk .nv-kalk-vysledek .nv-kalk-dalsi { background: var(--green); color: var(--ink); white-space: normal; text-align: center; margin-top: .75rem; }
.nv-kalk .nv-kalk-vysledek .nv-kalk-dalsi:hover { background: var(--mint); }
.nv-kalk-shrnuti { display: grid; grid-template-columns: minmax(5rem, 1fr) minmax(0, 3fr); gap: .6rem 1rem; margin-block: 1.5rem; font-size: .95rem; }
.nv-kalk-shrnuti dt { font-weight: 700; }
.nv-kalk-shrnuti dd { margin: 0; overflow-wrap: anywhere; }
.nv-kalk-chyba, .nv-kalk-nejiste { margin-top: 1rem; padding: 1rem; background: var(--paper); border-top: 3px solid var(--orange); border-left: 3px solid var(--orange); }
.kalk-vysvetleni { font-size: .95rem; }
.kalk-vysvetleni h2 { font-size: 1.3rem; margin-top: 0; }

/* Článek a ikony po odpojení starého style.css. SVG loga se to netýká. */
.clanek-telo { min-width: 0; overflow-wrap: anywhere; }
.clanek-telo .nv-ikona { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.2em; height: 1.2em; line-height: 1; vertical-align: -.15em; }
.clanek-telo .nv-ikona svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.clanek-telo .nv-ikona svg.nv5-ikona { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.clanek-telo .nv-clanek-akce .nv-ikona { display: inline-flex; }
.clanek-telo .nv-clanek-akce .nv-tlacitko { align-items: center; gap: .65em; max-width: 100%; white-space: normal; }
.clanek-telo .nv-clanek-akce .nv-tlacitko:hover { background: var(--mint); }
.clanek-telo .clanek-akce .tl { text-decoration: none; white-space: normal; }
.clanek-telo .clanek-akce .tl--zelene { color: var(--ink); }
.clanek-telo .clanek-akce .tl--obrys { color: var(--ink); }
.clanek-telo .clanek-akce .tl--obrys:hover { color: var(--paper); }
.clanek-telo .nv-tabulka-posuv { max-width: 100%; overflow-x: auto; }
.clanek-telo .nv-tabulka-posuv:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 3px; }

/* Souhlas je mimo main a používá třídy původní šablony. */
.nv-cookies { position: fixed; z-index: 100; inset: auto 1.25rem 1.25rem; max-width: 72rem; max-height: calc(100dvh - 2.5rem); overflow-y: auto; margin-inline: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem; padding: 1.5rem; background: var(--ink); color: var(--paper); border-top: 3px solid var(--green); border-left: 3px solid var(--green); box-shadow: 0 8px 32px #0b142033; }
.nv-cookies[hidden] { display: none; }
.nv-cookies-text { flex: 1 1 28rem; }
.nv-cookies-text p { margin: 0 0 .5rem; font-size: .95rem; }
.nv-cookies-text p:last-child { margin-bottom: 0; }
.nv-cookies-text a { color: var(--mint); text-decoration: underline; }
.nv-cookies-tlacitka { display: flex; flex-wrap: wrap; gap: .75rem; }
.nv-cookies .nv-tlacitko { padding: .85em 1.25em; background: var(--green); color: var(--ink); border: 2px solid var(--green); border-radius: 0; font: inherit; font-weight: 700; cursor: pointer; }
.nv-cookies .nv-tlacitko--tiche { background: transparent; color: var(--paper); border-color: var(--paper); }
.nv-cookies .nv-tlacitko:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

@media (max-width: 1200px) {
  .hlavicka .kontejner { flex-wrap: wrap; gap: .75rem 1rem; padding-block: .65rem; }
  .hlavicka .menu { order: 3; width: 100%; justify-content: space-between; margin-left: 0; }
  .hlavicka .akce { margin-left: auto; }
  .paticka .mrizka { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .kalk-rozlozeni { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .hlavicka .menu { align-items: stretch; padding: .5rem var(--gutter) 1.25rem; }
  .hlavicka .menu a { white-space: normal; }
  .hlavicka .akce { display: flex; margin-left: auto; }
  .hlavicka .tl--znacka { font-size: .8rem; padding: .8em; }
  .hlavicka .menu-prepinac { margin-left: 0; }
  .paticka .mrizka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paticka .mrizka > div:first-child { grid-column: 1 / -1; }
  .nv-kalk { padding: 1.25rem; }
  .nv-kalk .nv-kalk-kroky { gap: .35rem 1rem; }
  .nv-kalk .nv-kalk-kroky li { font-size: .85rem; }
  .nv-kalk-shrnuti { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
  .nv-kalk-shrnuti dd { margin-bottom: .75rem; }
  .nv-cookies { inset: auto .75rem .75rem; padding: 1.25rem; }
  .nv-cookies-tlacitka { width: 100%; }
  .nv-cookies-tlacitka button { flex: 1 1 10rem; }
}
@media (max-width: 640px) {
  .navit-logo { height: 24px; }
  .hlavicka .kontejner { gap: .5rem; }
  .hlavicka .logo-odkaz { padding-inline: 0; }
}
@media (max-width: 350px) {
  .hlavicka .akce { width: 100%; justify-content: flex-end; }
  .hlavicka .menu-prepinac { margin-left: auto; }
  .paticka .mrizka { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .menu a::after { transition: none; }
  .hlavicka .tl--znacka:is(:hover, :focus-visible)::before { animation: none; transform: none; }
}

/* formulář: tlačítko odeslat nesmí být oříznuté ani malé */
.formular, .formular .wpforms-container, .formular .wpforms-form, .formular .wpforms-submit-container { overflow: visible !important; }
.formular .wpforms-submit-container { padding-top: 1rem !important; }
.formular button[type=submit], .formular .wpforms-submit { display: inline-block !important; width: auto !important; min-width: 14rem; white-space: nowrap !important; font-size: 1rem !important; padding: 1em 1.6em !important; line-height: 1.2 !important; height: auto !important; }
@media (max-width: 767px) { .formular button[type=submit], .formular .wpforms-submit { width: 100% !important; min-width: 0; } }

/* CTA bez supergrafiky, zůstává jen v patičce a hero */
.cta::after { display: none !important; }

/* mobilní audit */
@media (max-width: 767px) {
  /* Rozbalené menu přes celou šířku okna, ne jen přes kontejner. */
  .hlavicka .menu { left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); }
  /* Fotka na straně sekce leží v toku nad textem; supergrafika přes ni kreslila tmavý čtverec. */
  .se-supergrafikou .foto-strana { z-index: 1; }
  /* Tónová supergrafika textových sekcí na úzkém okně působí jako obdélníky v textu. */
  .sekce--symbol::after { display: none; }
  /* Odstavec navazující na fakta v řadě se lepil na poslední panel. */
  .fakta-radek + p { margin-top: 1.5rem; }
  /* Tabulky: užší buňky, aby se tři sloupce vešly do 350 px; delší se posouvají v obalu. */
  .obal-tabulky, .clanek-telo .nv-tabulka-posuv { overflow-x: auto; -webkit-overflow-scrolling: touch;
    /* stín na okraji napoví, že se tabulka dá posunout */
    background: linear-gradient(90deg, #fff 30%, rgba(255,255,255,0)), linear-gradient(90deg, rgba(255,255,255,0), #fff 70%) 100% 0, radial-gradient(farthest-side at 0 50%, rgba(11,20,32,.22), transparent), radial-gradient(farthest-side at 100% 50%, rgba(11,20,32,.22), transparent) 100% 0;
    background-repeat: no-repeat; background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll; }
  .porovnani { font-size: .925rem; }
  .porovnani th, .porovnani td { padding: .7rem .6rem; }
  .porovnani thead th.rezim { width: auto; }
  .clanek-telo table { font-size: .9rem; }
  .clanek-telo th, .clanek-telo td { padding: .6rem .5rem; hyphens: auto; }
  /* Formulář: WPForms dává selectu pevnou výšku, text byl oříznutý. */
  .formular select { height: auto !important; min-height: 3.1rem; line-height: 1.3 !important; }
}
@media (max-width: 480px) {
  .porovnani, .clanek-telo table { font-size: .875rem; }
  .porovnani th, .porovnani td, .clanek-telo th, .clanek-telo td { padding: .55rem .45rem; }
  .hero-blok { padding: 1.75rem 1.25rem; }
  .cta .kontejner { padding-block: 4rem; }
}

/* platí i na desktopu (změřeno na 1280 px): oříznutý select a mezera za fakty */
.formular select { height: auto !important; min-height: 3.1rem; line-height: 1.3 !important; }
.fakta-radek + p { margin-top: 1.5rem; }