@charset "UTF-8";
/* =====================================================================
   NSP Study

   Barvy i písma jsou klientovy, odečtené z loga a z původního webu na
   WordPressu. Tmavá modrá a zlatá jsou jediné dvě barvy, které logo
   obsahuje. Oranžová #FF5722 z jejich Elementor kitu se sem záměrně
   nepřenesla: v logu není a se zlatou se tluče.

   Rozvržení vychází z předloh, které dodal provozovatel: fotka přes celou
   šířku s přetékajícím nadpisem, plovoucí skleněná lišta a zaoblené karty
   s rozostřeným pozadím. Struktura stránek zůstává stejná jako na původním
   webu, aby klient poznal svůj web.
   ===================================================================== */

/* ── Písma ─────────────────────────────────────────────────────────── */
/* Hostujeme lokálně: Google Fonts by znamenaly prozrazení IP návštěvníka
   třetí straně, což by musela řešit cookie lišta, a jeden DNS dotaz navíc
   v kritické cestě. Obě rodiny jsou variabilní, takže jeden soubor
   pokrývá všechny řezy. latin-ext je tu kvůli češtině i turečtině
   (ş, ğ, İ); ı bez tečky spadá ještě do latin. */
@font-face {
  font-family: 'Jost';
  src: url('/assets/fonts/jost-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  src: url('/assets/fonts/jost-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/assets/fonts/montserrat-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/assets/fonts/montserrat-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Hodnoty ───────────────────────────────────────────────────────── */
:root {
  --navy:        #011633;
  --navy-2:      #0A2145;   /* o stupeň světlejší, na vrstvení karet */
  --navy-3:      #13294F;
  --zlata:       #C8A84C;
  --zlata-svet:  #E2C87E;
  --svetla:      #F3F5FC;
  --bila:        #FFFFFF;
  /* Ztmaveno z #6F747E: na světlém pozadí sekcí #F3F5FC měla 4,3:1 a WCAG
     AA chce 4,5:1. Okem rozdíl nepoznáš, čtečka textu s horším zrakem ano. */
  --seda:        #686D77;
  --seda-svet:   #AEB4C0;

  --obal:        1240px;
  --radius:      28px;
  --radius-m:    18px;

  /* Sklo: dvě varianty, na tmavém a na světlém podkladu. */
  --sklo-tmave:  rgba(255, 255, 255, 0.08);
  --sklo-ramec:  rgba(255, 255, 255, 0.18);
  --sklo-svet:   rgba(255, 255, 255, 0.72);

  --stin:        0 18px 50px rgba(1, 22, 51, 0.12);
  --stin-velky:  0 30px 80px rgba(1, 22, 51, 0.28);

  --prechod:     0.32s cubic-bezier(0.2, 0.7, 0.3, 1);

  --lista-v:     84px;
}

/* ── Základ ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Kotvy nesmí zmizet pod plovoucí lištou. */
  scroll-padding-top: calc(var(--lista-v) + 20px);
}

body {
  margin: 0;
  background: var(--bila);
  color: var(--navy);
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: 'Jost', 'Montserrat', sans-serif;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--navy); color: var(--bila); }

:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Text jen pro čtečky. Vizuálně pryč, ale ve stromu přístupnosti zůstává. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.preskocit {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--navy);
  color: var(--bila);
  padding: 14px 22px;
  border-radius: 0 0 var(--radius-m) 0;
}
.preskocit:focus { left: 0; }

/* ── Rozvržení ─────────────────────────────────────────────────────── */
.obal {
  width: min(100% - 48px, var(--obal));
  margin-inline: auto;
}
.obal--uzky { width: min(100% - 48px, 880px); margin-inline: auto; }

.sekce { padding: clamp(72px, 9vw, 130px) 0; }
.sekce--tmava  { background: var(--navy); color: var(--bila); }
/* Pro sekce s jedním krátkým sdělením. Plná výška by kolem jednoho
   odstavce udělala zbytečnou díru. */
.sekce--uzka   { padding: clamp(46px, 5vw, 76px) 0; }
.sekce--svetla { background: var(--svetla); }

/* Nadpis sekce se zlatým vlasovým pravítkem. Tenká linka je motiv
   převzatý z loga, kde je Česko nakreslené jednou čarou. */
.nadpis-sekce { margin-bottom: clamp(36px, 5vw, 64px); }
/* Štítek se zlatou linkou nad nadpisem odstraněn: nahradila ho
   `.cislovka`, drobný řádek s pořadovým číslem bez barevného akcentu. */

.nadpis-sekce__titul {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  margin: 0;
}
.nadpis-sekce__popis {
  max-width: 62ch;
  margin-top: 18px;
  color: var(--seda);
  font-size: 1.05rem;
}
.sekce--tmava .nadpis-sekce__popis { color: var(--seda-svet); }

/* ── Tlačítka ──────────────────────────────────────────────────────── */
.tlacitko {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform var(--prechod), background var(--prechod),
              color var(--prechod), border-color var(--prechod);
  white-space: nowrap;
}
.tlacitko:hover { transform: translateY(-2px); }

.tlacitko--zlate  { background: var(--zlata); color: var(--navy); }
.tlacitko--zlate:hover { background: var(--zlata-svet); }

.tlacitko--tmave  { background: var(--navy); color: var(--bila); }
.tlacitko--tmave:hover { background: var(--navy-3); }

.tlacitko--obrys  { border-color: currentColor; color: inherit; background: transparent; }
.tlacitko--obrys:hover { background: var(--navy); color: var(--bila); border-color: var(--navy); }

/* Na fotce musí tlačítko fungovat i tam, kde je podklad světlý. */
.tlacitko--sklo {
  background: var(--sklo-tmave);
  border-color: var(--sklo-ramec);
  color: var(--bila);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.tlacitko--sklo:hover { background: rgba(255, 255, 255, 0.18); }

/* Na tmavém pruhu portálu. Bílá plocha je tam jediná, která se
   od navy dostatečně odrazí, aniž by se tloukla se zlatou v liště. */
.tlacitko--bile { background: var(--bila); color: var(--navy); }
.tlacitko--bile:hover { background: var(--svetla); }

.tlacitko--male { padding: 10px 20px; font-size: 14px; }

/* ── Lišta ─────────────────────────────────────────────────────────── */
.lista {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 18px 0;
  transition: background var(--prechod), padding var(--prechod),
              box-shadow var(--prechod);
}
/* Nad hero fotkou je lišta průhledná a splývá s obrázkem. Po odrolování
   dostane sklo a stín, jinak by na bílém obsahu nebyla čitelná. */
.lista.je-odrolovana {
  padding: 10px 0;
  background: rgba(1, 22, 51, 0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 10px 30px rgba(1, 22, 51, 0.22);
}
/* Stránky bez hero fotky mají lištu tmavou od začátku. */
.lista[data-pruhledna="0"] {
  background: var(--navy);
}

.lista__vnitrek {
  width: min(100% - 48px, var(--obal));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 28px;
}

/* Otevřený mobilní panel je fixed a v DOM stojí za logem, takže by ho
   překreslil. Logo proto drží vlastní vrstvu nad ním. */
.lista__logo { flex: 0 0 auto; position: relative; z-index: 2; }
.lista__logo-obr {
  width: auto;
  height: 46px;
  transition: height var(--prechod);
}
.lista.je-odrolovana .lista__logo-obr { height: 38px; }

.menu { margin-left: auto; }
.menu__seznam {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu__odkaz {
  display: block;
  padding: 10px 14px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.86);
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.01em;
  transition: color var(--prechod), background var(--prechod);
}
.menu__odkaz:hover { color: var(--bila); background: rgba(255, 255, 255, 0.1); }
.menu__odkaz.je-aktivni { color: var(--zlata); }

/* Stejný důvod jako u loga: přepínač i tlačítko portálu musí zůstat nad
   otevřeným panelem menu, jinak se nedá zavřít. */
.lista__vpravo {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
}
.lista__jazyk {
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.72);
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--sklo-ramec);
  transition: color var(--prechod), border-color var(--prechod);
}
.lista__jazyk:hover { color: var(--bila); border-color: var(--bila); }

.prepinac {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.prepinac span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--bila);
  border-radius: 2px;
  transition: transform var(--prechod), opacity var(--prechod);
}
.prepinac[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.prepinac[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.prepinac[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ── Hero ──────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: min(100svh, 940px);
  display: flex;
  align-items: flex-end;
  padding: calc(var(--lista-v) + 40px) 0 clamp(96px, 11vw, 148px);
  color: var(--bila);
  isolation: isolate;
  overflow: hidden;
}
.hero__obr {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
/* Dva přechody nad sebou: svislý kvůli čitelnosti nadpisu dole a jemný
   modrý závoj, aby fotka ladila s firemní modrou. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(1, 22, 51, 0.94) 0%, rgba(1, 22, 51, 0.72) 38%, rgba(1, 22, 51, 0.3) 68%, rgba(1, 22, 51, 0.6) 100%),
    linear-gradient(to right, rgba(1, 22, 51, 0.42), rgba(1, 22, 51, 0));
}

.hero__obsah { width: min(100% - 48px, var(--obal)); margin-inline: auto; }

/* .hero__stitek odstraněn: hero má místo štítku jen nadpis a text. */


/* Nadpis schválně přetéká přes fotku a je největším prvkem stránky.
   clamp drží velikost v rozumných mezích od telefonu po velký monitor. */
.hero__titul {
  font-size: clamp(2.6rem, 8vw, 6.4rem);
  font-weight: 500;
  line-height: 0.97;
  letter-spacing: -0.03em;
  margin: 0 0 24px;
  max-width: 16ch;
}
/* Tenký řez nahoře, tučný dole. Kontrast v jednom nadpisu nese víc
   než barevný akcent a nevypadá jako šablona. */
.hero__titul b { display: block; font-weight: 700; }

/* Nadpis vlevo, popis a tlačítko vpravo dole. Vycentrovaný blok textu
   pod nadpisem je nejčastější tvar generované úvodní obrazovky. */
.hero__mrizka {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(24px, 5vw, 72px);
  align-items: end;
}
.hero__vedle { padding-bottom: 0.65em; }

.hero__popis {
  max-width: 54ch;
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 34px;
}

.hero__akce { display: flex; flex-wrap: wrap; gap: 14px; }

/* Skleněná lišta dole s kontakty, převzato z předlohy s hotelem. */
.hero__pas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 34px;
  padding: 18px 28px;
  border-radius: 999px;
  background: var(--sklo-tmave);
  border: 1px solid var(--sklo-ramec);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  font-size: 14px;
}
.hero__pas a { color: rgba(255, 255, 255, 0.92); transition: color var(--prechod); }
.hero__pas a:hover { color: var(--bila); }
.hero__pas-odd { width: 1px; height: 20px; background: var(--sklo-ramec); }

/* ── Vnitřní hlavička stránky ──────────────────────────────────────── */
/* Stejná stavba jako hero na úvodu, jen nižší: fotka, nadpis ve dvou
   řezech vlevo dole, popis vpravo. Dřív to byl tmavý pruh s nadpisem
   a odstavcem pod sebou, nejobecnější tvar vnitřní stránky, jaký existuje.
   Palubní lístek pod záhlavím je jen na úvodu: na každé podstránce
   dělal stránky moc podobné (provozovatel 2. 10. 2026). */
.zahlavi {
  position: relative;
  min-height: clamp(480px, 68vh, 660px);
  display: flex;
  align-items: flex-end;
  padding: calc(var(--lista-v) + 48px) 0 clamp(52px, 6vw, 88px);
  color: var(--bila);
  isolation: isolate;
  overflow: hidden;
}
.zahlavi > .obal { width: min(100% - 48px, var(--obal)); }
.zahlavi__obr {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
.zahlavi::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(1, 22, 51, 0.94) 0%, rgba(1, 22, 51, 0.7) 42%, rgba(1, 22, 51, 0.35) 75%, rgba(1, 22, 51, 0.62) 100%),
    linear-gradient(to right, rgba(1, 22, 51, 0.4), rgba(1, 22, 51, 0));
}
.zahlavi__mrizka {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(20px, 5vw, 72px);
  align-items: end;
}
.zahlavi__titul {
  font-size: clamp(2.5rem, 6.6vw, 5.2rem);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0;
}
.zahlavi__titul b { display: block; font-weight: 700; }
.zahlavi__popis {
  max-width: 50ch;
  margin: 0;
  padding-bottom: 0.4em;
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(0.98rem, 1.3vw, 1.08rem);
}

.drobecky {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: clamp(20px, 3vw, 34px);
  font-family: 'Jost', sans-serif;
}
.drobecky a { color: rgba(255, 255, 255, 0.78); }
.drobecky a:hover { color: var(--bila); }

@media (max-width: 800px) {
  .zahlavi { min-height: 0; padding-top: calc(var(--lista-v) + 64px); }
  .zahlavi__mrizka { grid-template-columns: 1fr; gap: 18px; }
}

/* ── Karty ─────────────────────────────────────────────────────────── */
.mrizka { display: grid; gap: 24px; }
.mrizka--2 { grid-template-columns: repeat(2, 1fr); }
.mrizka--3 { grid-template-columns: repeat(3, 1fr); }

.karta {
  position: relative;
  padding: 34px 32px;
  border-radius: var(--radius);
  background: var(--bila);
  border: 1px solid rgba(1, 22, 51, 0.08);
  box-shadow: var(--stin);
  transition: transform var(--prechod), box-shadow var(--prechod);
}
.karta:hover { transform: translateY(-4px); box-shadow: var(--stin-velky); }
.karta__titul { font-size: 1.22rem; margin-bottom: 10px; }
.karta__text { color: var(--seda); font-size: 0.96rem; line-height: 1.65; margin: 0; }

/* Na tmavém podkladu je karta skleněná, ne bílá. */
.sekce--tmava .karta {
  background: var(--sklo-tmave);
  border-color: var(--sklo-ramec);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: none;
  color: var(--bila);
}
.sekce--tmava .karta__text { color: var(--seda-svet); }
.sekce--tmava .karta:hover { background: rgba(255, 255, 255, 0.12); }

/* Zlatá obrysová ikona nahoře v kartě, ve stylu linky z loga. */
.karta__ikona {
  width: 46px;
  height: 46px;
  margin-bottom: 20px;
  color: var(--navy);
}
.sekce--tmava .karta__ikona { color: rgba(255, 255, 255, 0.8); }
.karta__ikona svg { width: 100%; height: 100%; display: block; }

/* ── Text s obrázkem ───────────────────────────────────────────────── */
.dvojice {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.dvojice--obraceno .dvojice__obraz { order: -1; }
.dvojice__obraz {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--stin-velky);
}
.dvojice__obraz img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.dvojice__titul { font-size: clamp(1.7rem, 3vw, 2.5rem); }
.dvojice__text { color: var(--seda); }
.sekce--tmava .dvojice__text { color: var(--seda-svet); }

/* ── Univerzity ────────────────────────────────────────────────────── */
/* Pevné čtyři sloupce, ne auto-fit: osm log se s auto-fit lámalo na
   sedm a jedno osamělé na druhém řádku. */
.uni-mrizka {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.uni-dlazdice {
  display: grid;
  place-items: center;
  padding: 26px 20px;
  border-radius: var(--radius-m);
  background: var(--bila);
  border: 1px solid rgba(1, 22, 51, 0.08);
  transition: transform var(--prechod), box-shadow var(--prechod);
}
.uni-dlazdice:hover { transform: translateY(-3px); box-shadow: var(--stin); }
.uni-dlazdice img {
  max-height: 58px;
  width: auto;
  /* Loga jsou různobarevná a v řadě by se tloukla. V klidu jsou tlumená,
     po najetí se rozsvítí. */
  filter: grayscale(1) contrast(1.15);
  opacity: 0.82;
  transition: filter var(--prechod), opacity var(--prechod);
}
.uni-dlazdice:hover img { filter: none; opacity: 1; }

/* Podrobný výpis univerzit na stránce registrace. */
.uni-polozka {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 36px;
  align-items: start;
  padding: 36px 0;
  border-top: 1px solid rgba(1, 22, 51, 0.1);
}
.uni-polozka:last-child { border-bottom: 1px solid rgba(1, 22, 51, 0.1); }
.uni-polozka__znak {
  display: grid;
  place-items: center;
  padding: 22px;
  border-radius: var(--radius-m);
  background: var(--svetla);
  min-height: 120px;
}
.uni-polozka__znak img { max-height: 70px; width: auto; }
.uni-polozka__titul { font-size: 1.32rem; margin-bottom: 8px; }
.uni-polozka__cesky {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--seda);
  margin-top: 4px;
}
.uni-polozka__text { color: var(--seda); font-size: 0.97rem; margin: 0; }

/* ── Číslované kroky ───────────────────────────────────────────────── */
/* Převzato z předlohy s Tokiem: velké tlumené číslo vedle obsahu. */
.kroky { display: grid; gap: 0; }
.krok {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 32px;
  align-items: start;
  padding: 34px 0;
  border-top: 1px solid var(--sklo-ramec);
}
.krok:last-child { border-bottom: 1px solid var(--sklo-ramec); }
.krok__cislo {
  font-family: 'Jost', sans-serif;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 300;
  line-height: 1;
  color: rgba(255, 255, 255, 0.42);
}
.krok__titul { font-size: 1.3rem; margin-bottom: 8px; }
.krok__text { color: var(--seda-svet); font-size: 0.97rem; margin: 0 0 12px; }
.krok__lhuta {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid var(--sklo-ramec);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
  font-family: 'Jost', sans-serif;
}

/* ── Čísla ─────────────────────────────────────────────────────────── */
.cisla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 22px;
}
.cislo { text-align: center; padding: 28px 18px; }
.cislo__hodnota {
  font-family: 'Jost', sans-serif;
  font-size: clamp(2.2rem, 4.6vw, 3.2rem);
  font-weight: 600;
  line-height: 1;
  display: block;
  margin-bottom: 10px;
}
.cislo__popis {
  font-size: 0.9rem;
  color: var(--seda-svet);
  margin: 0;
  line-height: 1.5;
}

/* ── Portál: upoutávka ─────────────────────────────────────────────── */
.portal-upoutavka {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy-2), var(--navy));
  color: var(--bila);
  padding: clamp(40px, 5vw, 66px);
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  border: 1px solid var(--sklo-ramec);
}
/* Zlatý kruh vlevo dole jako jemné světlo pod obsahem. */
.portal-upoutavka::before {
  content: '';
  position: absolute;
  left: -14%;
  bottom: -46%;
  width: 52%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 168, 76, 0.26), transparent 68%);
  pointer-events: none;
}
.portal-upoutavka__titul { font-size: clamp(1.8rem, 3.4vw, 2.7rem); }
.portal-upoutavka__text { color: var(--seda-svet); margin-bottom: 28px; }
.portal-upoutavka__seznam {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.portal-upoutavka__seznam li {
  position: relative;
  padding-left: 30px;
  font-size: 0.96rem;
  color: rgba(255, 255, 255, 0.9);
}
.portal-upoutavka__seznam li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 14px;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
}

/* =====================================================================
   Studentský portál
   ---------------------------------------------------------------------
   Vzhled webu kolem je klientův: tmavá modrá, zlatá, Jost a Montserrat.
   Uvnitř aplikace ale platí jiná pravidla než na marketingové stránce,
   a to schválně:

   - Hustota je vyšší. Marketingová sekce dýchá, tabulka dokladů ne.
     Proto menší rádiusy (10 a 14 px proti 28 px venku) a menší řádkování.
   - Zlatá se tu nepoužívá na stavy. Stav dokladu musí nést význam, ne
     značku: zelená schváleno, jantarová čeká, červená chybí, modrá
     kontrolujeme. Kdyby "čeká" bylo firemní zlaté, splyne to s tlačítky
     a přestane to být informace.
   - Nic tu není ozdoba. Každá barevná plocha něco znamená.
   ===================================================================== */

.app {
  border-radius: 16px;
  overflow: hidden;
  background: var(--bila);
  border: 1px solid #E4E8F0;
  box-shadow: 0 24px 60px rgba(1, 22, 51, 0.13);
  display: grid;
  grid-template-columns: 236px 1fr;
  min-height: 680px;
}

/* ── Postranní nabídka ─────────────────────────────────────────────── */
.app__bok {
  background: var(--navy);
  color: var(--bila);
  display: flex;
  flex-direction: column;
  padding: 20px 0 16px;
  /* Bez tohohle si sloupec 1fr vezme šířku podle nejširšího obsahu.
     Na mobilu, kde je nabídka naležato a měří přes tisíc pixelů, by
     roztáhla celou aplikaci mimo obrazovku. */
  min-width: 0;
}
.app__znacka {
  display: flex; align-items: center;
  padding: 0 20px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
}
.app__znacka img { height: 28px; width: auto; }

.app__nav { list-style: none; margin: 0; padding: 14px 10px 0; display: grid; gap: 1px; }
/* Nabídka je rozdělená na skupiny, protože deset položek v jednom sloupci
   se nedá přelétnout očima. Nadpis skupiny není odkaz. */
.app__skupina {
  font-family: 'Jost', sans-serif;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  padding: 16px 12px 7px;
}
.app__nav li:first-child .app__skupina { padding-top: 0; }

.app__nav button {
  width: 100%; text-align: left;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border: 0; border-radius: 9px;
  background: transparent; color: rgba(255, 255, 255, 0.74);
  font-family: 'Jost', sans-serif; font-size: 13.5px; font-weight: 400;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.app__nav button:hover { background: rgba(255, 255, 255, 0.07); color: var(--bila); }
.app__nav button[aria-selected="true"] {
  background: rgba(255, 255, 255, 0.13);
  color: var(--bila); font-weight: 500;
}
/* Zlatý pruh u aktivní položky je jediné místo, kde se v aplikaci
   objevuje firemní barva. Drží spojení s webem, aniž by kolidovala
   s významovými barvami stavů. */
.app__nav button[aria-selected="true"]::before {
  content: ''; width: 3px; height: 17px; border-radius: 2px;
  background: var(--zlata); margin-left: -12px; margin-right: 9px;
}
.app__nav svg { width: 16px; height: 16px; flex: 0 0 auto; opacity: 0.85; }

.app__odznak {
  margin-left: auto;
  background: #C0392B; color: #fff;
  font-size: 10px; font-weight: 700;
  min-width: 17px; height: 17px; border-radius: 9px;
  display: grid; place-items: center; padding: 0 5px;
}
.app__odznak--klid { background: rgba(255, 255, 255, 0.2); }

.app__pata { margin-top: auto; padding: 16px 20px 0; border-top: 1px solid rgba(255, 255, 255, 0.11); }
.app__osoba { display: flex; align-items: center; gap: 10px; }
.app__avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.14);
  display: grid; place-items: center;
  font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 600;
}
.app__osoba-jmeno { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.app__osoba-role { font-size: 10.5px; color: rgba(255, 255, 255, 0.5); }
.app__osoba > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Pracovní plocha ───────────────────────────────────────────────── */
.app__telo { display: flex; flex-direction: column; min-width: 0; background: #F7F9FC; }
.app__lista {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid #E4E8F0;
  background: var(--bila);
}
.app__titul { margin: 0; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
.app__podtitul { margin: 2px 0 0; font-size: 0.79rem; color: var(--seda); }
.app__plocha { padding: 22px 24px; flex: 1; }

.pohled { display: none; }
.pohled.je-aktivni { display: block; animation: nabehne 0.28s ease both; }
@keyframes nabehne { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Karta v aplikaci ──────────────────────────────────────────────── */
.kap {
  background: var(--bila);
  border: 1px solid #E4E8F0;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 14px;
}
.kap:last-child { margin-bottom: 0; }
.kap__hlava {
  display: flex; flex-wrap: wrap; gap: 9px;
  align-items: center; justify-content: space-between;
  padding: 13px 18px; border-bottom: 1px solid #E4E8F0;
}
.kap__titul { margin: 0; font-size: 0.93rem; font-weight: 600; font-family: 'Jost', sans-serif; }
.kap__telo { padding: 16px 18px; }
.kap__telo--tesne { padding: 0; }
.kap__pozn { font-size: 0.79rem; color: var(--seda); margin: 0; }

/* Popisek nad hodnotou. Drobné verzálky, nikdy ne zlaté. */
.stitek {
  font-family: 'Jost', sans-serif;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--seda); margin: 0 0 8px;
}

/* ── Rozvržení plochy ──────────────────────────────────────────────── */
/* Schválně nestejné sloupce. Mřížka čtyř shodných karet je nejrychlejší
   cesta k tomu, aby obrazovka vypadala jako šablona. */
.mriz-2 { display: grid; grid-template-columns: 1.55fr 1fr; gap: 14px; align-items: start; }
.mriz-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mriz-4 { grid-template-columns: repeat(4, 1fr); }
/* Karta má dole okraj a poslední ne. V mřížce by pak poslední dlaždice
   vyšla o ten okraj vyšší než ostatní. */
.mriz-3 > .kap { margin-bottom: 0; }
.mriz-hlavni { display: grid; grid-template-columns: 1fr 300px; gap: 14px; align-items: start; }

/* ── Velké číslo ───────────────────────────────────────────────────── */
.udaj { padding: 15px 18px; }
.udaj__hodnota {
  font-family: 'Jost', sans-serif;
  font-size: 1.62rem; font-weight: 600; line-height: 1;
  margin: 0; letter-spacing: -0.015em;
}
.udaj__hodnota--pozor { color: #B3382A; }
.udaj__pozn { font-size: 0.76rem; color: var(--seda); margin: 6px 0 0; line-height: 1.45; }

/* Prstenec postupu. Procento se předává proměnnou --hodnota. */
.prstenec { display: flex; align-items: center; gap: 14px; }
.prstenec__graf {
  width: 56px; height: 56px; border-radius: 50%; flex: 0 0 auto;
  background: conic-gradient(var(--navy) calc(var(--hodnota, 0) * 1%), #E4E8F0 0);
  display: grid; place-items: center;
}
.prstenec__graf::after {
  content: ''; grid-area: 1 / 1;
  width: 42px; height: 42px; border-radius: 50%; background: var(--bila);
}
.prstenec__cislo {
  grid-area: 1 / 1; z-index: 1;
  font-family: 'Jost', sans-serif; font-size: 0.83rem; font-weight: 700;
}

/* ── Postup fázemi ─────────────────────────────────────────────────── */
.postup { display: flex; overflow-x: auto; padding: 2px 0 8px; }
.postup__uzel {
  flex: 1 0 auto; min-width: 98px;
  display: grid; justify-items: center; gap: 8px;
  position: relative; text-align: center;
}
.postup__tecka {
  width: 27px; height: 27px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bila); border: 2px solid #E4E8F0; color: var(--seda);
  font-family: 'Jost', sans-serif; font-size: 11.5px; font-weight: 700;
  position: relative; z-index: 1;
}
.postup__uzel--hotovo .postup__tecka { background: var(--navy); border-color: var(--navy); color: var(--bila); }
.postup__uzel--ted .postup__tecka {
  background: var(--bila); border-color: var(--navy); color: var(--navy);
  box-shadow: 0 0 0 4px rgba(1, 22, 51, 0.1);
}
.postup__uzel:not(:last-child)::after {
  content: ''; position: absolute; top: 13px; left: 50%;
  width: 100%; height: 2px; background: #E4E8F0;
}
.postup__uzel--hotovo:not(:last-child)::after { background: var(--navy); }
.postup__stitek { font-size: 10.5px; color: var(--seda); line-height: 1.35; }
.postup__uzel--ted .postup__stitek { color: var(--navy); font-weight: 700; }

/* ── Tabulka ───────────────────────────────────────────────────────── */
.tab { width: 100%; border-collapse: collapse; }
.tab th {
  text-align: left;
  font-family: 'Jost', sans-serif;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--seda);
  padding: 11px 16px; border-bottom: 1px solid #E4E8F0;
  background: #F7F9FC;
}
.tab td { padding: 12px 16px; border-bottom: 1px solid #EDF0F6; font-size: 0.85rem; vertical-align: middle; }
.tab tbody tr:last-child td { border-bottom: 0; }
.tab tbody tr { transition: background 0.16s ease; }
.tab tbody tr:hover { background: #F7F9FC; }
.tab__nazev { font-weight: 600; display: block; }
.tab__pozn { display: block; color: var(--seda); font-size: 0.75rem; font-weight: 400; margin-top: 2px; }
.tab__vpravo { text-align: right; }
.tab__skupina td {
  background: #F7F9FC; padding-top: 9px; padding-bottom: 9px;
  border-bottom: 1px solid #E4E8F0;
}

/* ── Stavy ─────────────────────────────────────────────────────────── */
/* Barva tu nese význam, ne značku. Proto zelená, jantarová, červená
   a modrá, a proto tu není zlatá. */
.stav {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 6px;
  font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: 0.02em; white-space: nowrap;
}
.stav::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.stav--ok       { background: #E7F3ED; color: #16704A; }
.stav--kontrola { background: #E8EDF6; color: #123A6B; }
.stav--ceka     { background: #FBF2DF; color: #8A6212; }
.stav--chybi    { background: #FBE9E7; color: #B3382A; }
.stav--neutral  { background: #EEF1F6; color: #55607A; }

/* ── Tlačítko v řádku ──────────────────────────────────────────────── */
.tlac {
  border: 1px solid #DDE3EC; background: var(--bila);
  border-radius: 7px; padding: 5px 12px;
  font-family: 'Jost', sans-serif; font-size: 11.5px; font-weight: 500;
  color: var(--navy); cursor: pointer; white-space: nowrap;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.tlac:hover { background: var(--navy); color: var(--bila); border-color: var(--navy); }
.tlac--hlavni { background: var(--navy); color: var(--bila); border-color: var(--navy); }
.tlac--hlavni:hover { background: var(--navy-3, #13294F); }

.filtry { display: flex; flex-wrap: wrap; gap: 6px; }
.filtr {
  padding: 5px 12px; border-radius: 7px;
  border: 1px solid #DDE3EC; background: var(--bila);
  font-family: 'Jost', sans-serif; font-size: 11.5px; color: var(--seda);
  cursor: pointer; transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.filtr:hover { border-color: var(--navy); color: var(--navy); }
.filtr[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--bila); }

/* ── Upozornění ────────────────────────────────────────────────────── */
.vyzva {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 16px; border-radius: 11px;
  font-size: 0.85rem; margin-bottom: 14px;
  background: #FBE9E7; border: 1px solid #F3CFCA; color: #7E2A20;
}
.vyzva--klid { background: #F1F4FA; border-color: #E0E6F0; color: var(--navy); }
.vyzva--info { background: #E8EDF6; border-color: #D3DDEE; color: #123A6B; }
.vyzva__ikona { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; }
.vyzva p { margin: 0; }
.vyzva strong { font-family: 'Jost', sans-serif; }

/* ── Svislá osa ────────────────────────────────────────────────────── */
.osa { list-style: none; margin: 0; padding: 0 0 0 24px; position: relative; }
.osa::before {
  content: ''; position: absolute; left: 5px; top: 7px; bottom: 7px;
  width: 1px; background: #E4E8F0;
}
.osa__bod { position: relative; padding-bottom: 20px; }
.osa__bod:last-child { padding-bottom: 0; }
.osa__bod::before {
  content: ''; position: absolute; left: -24px; top: 5px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--bila); border: 2px solid #E4E8F0;
}
.osa__bod--hotovo::before { background: var(--navy); border-color: var(--navy); }
.osa__bod--ted::before { background: var(--bila); border-color: var(--navy); box-shadow: 0 0 0 3px rgba(1, 22, 51, 0.11); }
.osa__kdy {
  font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--seda); margin: 0;
}
.osa__nazev { font-weight: 600; font-size: 0.88rem; margin: 3px 0 2px; }
.osa__text { font-size: 0.8rem; color: var(--seda); margin: 0; }

/* ── Zprávy ────────────────────────────────────────────────────────── */
.zpravy { display: grid; gap: 12px; }
.zprava { max-width: 74%; }
.zprava--moje { margin-left: auto; }
.zprava__bublina {
  background: var(--bila); border: 1px solid #E4E8F0;
  border-radius: 12px 12px 12px 3px; padding: 11px 14px; font-size: 0.84rem;
}
.zprava--moje .zprava__bublina {
  background: var(--navy); color: var(--bila); border-color: var(--navy);
  border-radius: 12px 12px 3px 12px;
}
.zprava__kdo { font-size: 10.5px; color: var(--seda); margin: 0 0 4px; font-family: 'Jost', sans-serif; }
.zprava--moje .zprava__kdo { text-align: right; }
.zprava__bublina p { margin: 0; }
.zprava__priloha {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 8px; padding: 6px 11px; border-radius: 7px;
  background: #F1F4FA; border: 1px solid #E0E6F0;
  font-size: 0.76rem; color: var(--navy);
}
.zprava__priloha svg { width: 14px; height: 14px; }

/* ── Pruh postupu ──────────────────────────────────────────────────── */
.pruh { height: 6px; border-radius: 3px; background: #E4E8F0; overflow: hidden; margin: 8px 0 6px; }
.pruh__vypln { height: 100%; background: var(--navy); border-radius: 3px; }
.pruh--varovny .pruh__vypln { background: #B3382A; }

/* ── Ubytování ─────────────────────────────────────────────────────── */
.byt { display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: start; }
.byt__foto { border-radius: 11px; overflow: hidden; }
.byt__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.byt__fakta { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.byt__fakta li {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 8px 0; border-bottom: 1px solid #EDF0F6; font-size: 0.85rem;
}
.byt__fakta li:last-child { border-bottom: 0; }
.byt__fakta dt, .byt__fakta span:first-child { color: var(--seda); }
.byt__fakta span:last-child { font-weight: 600; text-align: right; }

/* ── Rozvrh ────────────────────────────────────────────────────────── */
.rozvrh { display: grid; gap: 1px; background: #E4E8F0; border-radius: 10px; overflow: hidden; }
.rozvrh__radek { display: grid; grid-template-columns: 112px 1fr auto; gap: 14px; background: var(--bila); padding: 11px 16px; align-items: center; }
.rozvrh__cas {
  font-family: 'Jost', sans-serif; font-size: 0.8rem; font-weight: 600;
  color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rozvrh__predmet { font-size: 0.85rem; font-weight: 600; }
.rozvrh__mistnost { font-size: 0.76rem; color: var(--seda); }
.rozvrh__den {
  background: #F7F9FC; padding: 8px 16px;
  font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--seda);
}

/* ── Docházka ──────────────────────────────────────────────────────── */
/* Docházka není kosmetika: při prodlužování víza se dokládá studium,
   takže propadlá docházka je pro studenta skutečný problém. */
/* Pevná mřížka, ne flex-wrap: třicet dnů se při zalamování rozsypalo
   do ragged třetí řady a vypadalo to jako chyba, ne jako kalendář. */
.dochazka { display: grid; grid-template-columns: repeat(15, 1fr); gap: 4px; max-width: 360px; }
.dochazka__den {
  aspect-ratio: 1; border-radius: 4px;
  background: #E7F3ED; border: 1px solid #CDE6DA;
}
.dochazka__den--chybel { background: #FBE9E7; border-color: #F3CFCA; }
.dochazka__den--omluven { background: #FBF2DF; border-color: #EEDFB6; }
.dochazka__den--budouci { background: #F1F4FA; border-color: #E0E6F0; }
.legenda { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: 0.75rem; color: var(--seda); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 11px; height: 11px; border-radius: 3px; display: block; }

/* ── Odpočet ───────────────────────────────────────────────────────── */
.odpocet { display: flex; align-items: baseline; gap: 7px; }
.odpocet__cislo {
  font-family: 'Jost', sans-serif; font-size: 2.5rem; font-weight: 600;
  line-height: 1; letter-spacing: -0.02em;
}
.odpocet__jednotka { font-family: 'Jost', sans-serif; font-size: 0.9rem; color: var(--seda); }

/* ── Kdo má přístup ────────────────────────────────────────────────── */
.pristup { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.pristup li {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 13px; border: 1px solid #E4E8F0; border-radius: 10px;
  font-size: 0.83rem;
}
.pristup__kdo { font-weight: 600; }
.pristup__co { color: var(--seda); font-size: 0.76rem; }
/* ── Patička ───────────────────────────────────────────────────────── */
.paticka {
  background: var(--navy);
  color: var(--seda-svet);
  padding: clamp(56px, 7vw, 92px) 0 30px;
  font-size: 0.93rem;
}
.paticka__mrizka {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 44px;
  padding-bottom: 50px;
  border-bottom: 1px solid var(--sklo-ramec);
}
.paticka__logo { height: 54px; width: auto; margin-bottom: 20px; }
.paticka__tagline { max-width: 34ch; line-height: 1.65; }
.paticka__nadpis {
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bila);
  margin-bottom: 18px;
  font-weight: 500;
}
.paticka__adresa { font-style: normal; display: grid; gap: 3px; margin-bottom: 14px; line-height: 1.6; }
.paticka__radek { margin: 0 0 8px; }
.paticka a { transition: color var(--prechod); }
.paticka a:hover { color: var(--bila); }
/* Odkaz uprostřed věty se od okolního textu liší jen odstínem, a ten má
   kontrast 2,7:1. Kdo barvy nerozliší, podtržení pozná. */
.paticka__autor a { text-decoration: underline; text-underline-offset: 2px; }
.paticka__seznam { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.paticka__site { display: flex; gap: 18px; margin-top: 16px; }
.paticka__spodek {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: space-between;
  padding-top: 26px;
  font-size: 0.84rem;
  color: rgba(174, 180, 192, 0.7);
}
.paticka__spodek p { margin: 0; }
.paticka__autor a { color: rgba(255, 255, 255, 0.85); }

/* ── Responzivita ──────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .paticka__mrizka { grid-template-columns: 1fr 1fr; gap: 36px; }
  .mrizka--3 { grid-template-columns: repeat(2, 1fr); }
  .portal-upoutavka { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  /* Menu se schová za přepínač a vyjede jako skleněný panel. */
  .prepinac { display: flex; }
  .menu {
    position: fixed;
    inset: 0 0 auto 0;
    margin: 0;
    padding: calc(var(--lista-v) + 24px) 24px 34px;
    background: rgba(1, 22, 51, 0.97);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    transform: translateY(-100%);
    transition: transform var(--prechod);
    visibility: hidden;
    border-radius: 0 0 var(--radius) var(--radius);
    z-index: 1;
  }
  .menu.je-otevrene { transform: none; visibility: visible; }
  .menu__seznam { flex-direction: column; align-items: stretch; gap: 2px; }
  .menu__odkaz { padding: 14px 16px; font-size: 1.05rem; }

  .dvojice { grid-template-columns: 1fr; }
  .dvojice--obraceno .dvojice__obraz { order: 0; }
  .uni-mrizka { grid-template-columns: repeat(3, 1fr); }
  .uni-polozka { grid-template-columns: 1fr; gap: 20px; }
  .uni-polozka__znak { max-width: 180px; }
  .krok { grid-template-columns: 74px 1fr; gap: 20px; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .obal, .obal--uzky, .lista__vnitrek, .hero__obsah { width: calc(100% - 36px); }
  .mrizka--2, .mrizka--3 { grid-template-columns: 1fr; }
  .uni-mrizka { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .paticka__mrizka { grid-template-columns: 1fr; }
  .hero__pas { border-radius: var(--radius-m); padding: 16px 20px; }
  .hero__pas-odd { display: none; }
  .lista__jazyk { display: none; }
  .panel__telo { padding: 20px 16px; }
  .doklady thead { display: none; }
  /* Tabulka dokladů se na telefonu rozpadá na karty, jinak by se
     nevešla a vodorovné rolování v tabulce se špatně ovládá. */
  .doklady tr { display: grid; gap: 8px; padding: 16px 0; border-bottom: 1px solid rgba(1, 22, 51, 0.08); }
  .doklady td { border: 0; padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Formulář ──────────────────────────────────────────────────────── */
.pole { display: grid; gap: 7px; margin: 0 0 18px; }
.pole label {
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--navy);
}
/* Chyba u pole. Text, ne jen červený rámeček: barvu nerozliší každý. */
.pole__chyba { font-size: 0.86rem; color: #A43427; }
.pole [aria-invalid="true"] { border-color: #B3382A; }
.pole input,
.pole select,
.pole textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid rgba(1, 22, 51, 0.16);
  border-radius: var(--radius-m);
  background: var(--bila);
  font: inherit;
  font-size: 0.95rem;
  color: var(--navy);
  transition: border-color var(--prechod), box-shadow var(--prechod);
}
.pole textarea { resize: vertical; min-height: 120px; }
.pole input:focus,
.pole select:focus,
.pole textarea:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(1, 22, 51, 0.1);
  outline: none;
}
.pole--pozn { display: block; font-size: 0.82rem; color: var(--seda); }
.pole--pozn a { text-decoration: underline; }

.kontakt-blok {
  font-style: normal;
  line-height: 1.8;
  margin-bottom: 18px;
  padding-left: 18px;
  border-left: 1px solid rgba(1, 22, 51, 0.16);
}

/* ── Chybová stránka ───────────────────────────────────────────────── */
.chyba-404 {
  min-height: 74svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: calc(var(--lista-v) + 60px) 0 80px;
}
.chyba-404__kod {
  font-family: 'Jost', sans-serif;
  font-size: clamp(4.5rem, 16vw, 11rem);
  font-weight: 300;
  line-height: 1;
  color: rgba(1, 22, 51, 0.16);
  margin-bottom: 10px;
}

/* ── Právní text ───────────────────────────────────────────────────── */
.pravni h2 { font-size: 1.32rem; margin-top: 2.2em; }
.pravni h2:first-child { margin-top: 0; }
.pravni ul { padding-left: 1.2em; color: var(--seda); }
.pravni li { margin-bottom: 0.5em; }
.pravni p { color: var(--seda); }

/* =====================================================================
   Marketingové stránky: panel a tabulka
   ---------------------------------------------------------------------
   Czechia, Foundation programs a Contact stavějí na téhle dvojici.
   Je to vědomě jiná sada než `.kap` a `.tab` uvnitř portálu: venku se
   dýchá (rádius 28 px, řádky 15 px), uvnitř aplikace se šetří místem.
   Kdybych je sloučil, buď zhustne marketing, nebo se rozvolní tabulka
   dokladů, a ani jedno nechceme.
   ===================================================================== */
.panel {
  border-radius: var(--radius);
  background: var(--bila);
  border: 1px solid rgba(1, 22, 51, 0.1);
  box-shadow: var(--stin);
  overflow: hidden;
}
.panel__zahlavi {
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; justify-content: space-between;
  padding: 24px 30px;
  border-bottom: 1px solid rgba(1, 22, 51, 0.08);
  background: var(--svetla);
}
.panel__titul { margin: 0; font-size: 1.15rem; }
.panel__telo { padding: 30px; }

.doklady { width: 100%; border-collapse: collapse; }
.doklady th {
  text-align: left;
  font-family: 'Jost', sans-serif;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--seda);
  padding: 0 14px 12px 0;
  border-bottom: 1px solid rgba(1, 22, 51, 0.1);
}
.doklady td {
  padding: 15px 14px 15px 0;
  border-bottom: 1px solid rgba(1, 22, 51, 0.07);
  font-size: 0.93rem; vertical-align: middle;
}
.doklady tr:last-child td { border-bottom: 0; }
.doklady__nazev { font-weight: 600; }
.doklady__pozn { display: block; color: var(--seda); font-size: 0.82rem; font-weight: 400; margin-top: 2px; }

/* Upozornění na marketingových stránkách. Uvnitř portálu je `.vyzva`. */
.upozorneni {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 18px 22px; border-radius: var(--radius-m);
  background: rgba(1, 22, 51, 0.05);
  border: 1px solid rgba(1, 22, 51, 0.12);
  margin-bottom: 28px; font-size: 0.93rem;
}
.upozorneni__ikona { color: var(--navy); flex: 0 0 auto; margin-top: 2px; }
/* Na tmavé sekci by tmavá ikona zmizela v pozadí. */
.sekce--tmava .upozorneni__ikona { color: rgba(255, 255, 255, 0.82); }
.upozorneni p { margin: 0; }
.upozorneni strong { font-family: 'Jost', sans-serif; }

/* =====================================================================
   Vlastní bloky
   ---------------------------------------------------------------------
   Tahle část existuje proti tomu, aby web vypadal jako vygenerovaný.
   Otisk generovaného návrhu je předvídatelný: všechno zabalené do
   stejně velkých zaoblených panelů, mřížka tří shodných karet, nadpis
   na střed, nic nikdy nepřeteče přes okraj sloupce.

   Pravidla, kterými se tahle sada řídí:
     1. Velikost panelu nese význam. Co je důležitější, je větší.
        Když jsou všechny stejné, nic není důležité.
     2. Co nemusí být v boxu, v boxu není. Sazba a fotka unesou víc
        než rámeček.
     3. Přetečení přes okraj sloupce je záměr, ne nehoda, a funguje
        jen tam, kde je zbytek mřížky pevný.
     4. Řada karet nekončí zarovnaně. Poslední je useknutá, protože
        tím říká, že se dá posunout dál.

   Motiv je cestovní doklad: palubní lístek s výsekem, razítko v pase,
   odjezdová tabule. Sedí to na to, co klient dělá (hranice, víza,
   nostrifikace), a nedá se to splést s obecnou šablonou.
   ===================================================================== */

/* ── Asymetrické záhlaví sekce ─────────────────────────────────────── */
/* Nadpis vlevo, popis vpravo a níž. Ne nadpis na střed s odstavcem pod
   ním, to je nejčastější tvar generované stránky. */
.hlavicka {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(24px, 4vw, 72px);
  align-items: end;
  margin-bottom: clamp(34px, 4vw, 58px);
}
.hlavicka__titul {
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0;
}
.hlavicka__titul b { font-weight: 600; }
.hlavicka__popis { color: var(--seda); margin: 0; padding-bottom: 0.5em; }
.sekce--tmava .hlavicka__popis { color: var(--seda-svet); }

/* Drobný popisek sekce. Bez linky, bez zlaté, jen číslo a slovo. */
.cislovka {
  display: flex; align-items: baseline; gap: 12px;
  font-family: 'Jost', sans-serif;
  font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--seda); margin: 0 0 18px;
}
.cislovka::before {
  content: attr(data-cislo);
  font-variant-numeric: tabular-nums;
  opacity: 0.45;
}
.sekce--tmava .cislovka { color: rgba(255, 255, 255, 0.55); }

/* ── Kulaté tlačítko se šipkou ─────────────────────────────────────── */
/* Interpunkce mezi bloky. Drobnost, ale drží celek pohromadě. */
.sipka {
  display: inline-grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--navy); color: var(--bila);
  border: 0; cursor: pointer; flex: 0 0 auto;
  transition: transform var(--prechod), background var(--prechod);
}
.sipka:hover { transform: rotate(45deg); background: var(--navy-3); }
.sipka svg { width: 17px; height: 17px; }
.sipka--svetla { background: var(--bila); color: var(--navy); }
.sipka--svetla:hover { background: var(--svetla); }
.sipka--velka { width: 58px; height: 58px; }

/* ── Palubní lístek ────────────────────────────────────────────────── */
/* Přesahuje přes spodní okraj fotky a má po stranách výsek jako
   utržený lístek. Výsek je radiální přechod v pozadí, ne obrázek,
   takže drží i při změně barvy pod ním. */
.listek {
  position: relative;
  margin: -68px auto 0;
  width: min(100% - 96px, 1080px);
  background: var(--bila);
  border-radius: 18px;
  box-shadow: 0 26px 64px rgba(1, 22, 51, 0.18);
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  align-items: center;
  gap: 0;
  padding: 22px 26px 22px 34px;
  z-index: 2;
}
/* Výsek vlevo a vpravo. Barva musí sedět s pozadím sekce pod lístkem. */
.listek::before, .listek::after {
  content: '';
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--svetla);
}
.listek::before { left: -11px; }
.listek::after  { right: -11px; }

.listek__pole { padding-inline: 18px; border-left: 1px dashed rgba(1, 22, 51, 0.16); }
.listek__pole:first-child { border-left: 0; padding-left: 0; }
.listek__stitek {
  font-family: 'Jost', sans-serif;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--seda); margin: 0 0 5px;
}
.listek__hodnota { font-size: 0.95rem; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.listek__hodnota span { display: block; font-size: 0.76rem; font-weight: 400; color: var(--seda); margin-top: 2px; }
.listek__akce { padding-left: 22px; }

/* ── Odjezdová tabule ──────────────────────────────────────────────── */
/* Jména škol běžící v pásu. Není to mřížka log, je to pruh, který se
   hýbe, takže se nedá splést s obvyklou stěnou referencí. */
.tabule {
  overflow: hidden;
  border-block: 1px solid rgba(1, 22, 51, 0.12);
  padding: 22px 0;
  /* Okraje se ztrácejí do ztracena, jinak pás působí useknutě. */
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}
.tabule__pas {
  display: flex; align-items: center; gap: 0;
  width: max-content;
  animation: jede 46s linear infinite;
}
.tabule:hover .tabule__pas { animation-play-state: paused; }
@keyframes jede { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.tabule__polozka {
  display: flex; align-items: center; gap: 16px;
  padding-inline: 30px;
  font-family: 'Jost', sans-serif;
  font-size: clamp(1.1rem, 2vw, 1.55rem);
  font-weight: 400; letter-spacing: -0.015em;
  white-space: nowrap; color: var(--navy);
}
.tabule__polozka img {
  height: 30px; width: auto;
  mix-blend-mode: multiply;
  filter: grayscale(1) contrast(1.15);
  opacity: 0.85;
}
.tabule__zkratka {
  font-size: 0.66em; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--seda);
}
.tabule__odd { color: rgba(1, 22, 51, 0.22); font-size: 1.1rem; }

/* ── Číslovaný výpis ───────────────────────────────────────────────── */
/* Nahradil schodiště s postupně odsazenými řádky. Všechny položky teď
   začínají na stejné svislici, číslo je obyčejné „1.“ a čte se to jako
   seznam, protože to seznam je. */
.vycet { list-style: none; margin: 0; padding: 0; }
.vycet__polozka {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(14px, 3vw, 44px);
  align-items: baseline;
  padding: 22px 0;
  border-top: 1px solid rgba(1, 22, 51, 0.1);
}
.vycet__polozka:last-child { border-bottom: 1px solid rgba(1, 22, 51, 0.1); }
.sekce--tmava .vycet__polozka { border-color: rgba(255, 255, 255, 0.15); }
.vycet__cislo {
  font-family: 'Jost', sans-serif;
  font-size: clamp(1.15rem, 2.2vw, 1.62rem);
  font-weight: 300;
  color: var(--seda);
  font-variant-numeric: tabular-nums;
}
.sekce--tmava .vycet__cislo { color: var(--seda-svet); }
.vycet__nazev {
  font-family: 'Jost', sans-serif;
  font-size: clamp(1.15rem, 2.2vw, 1.62rem);
  font-weight: 400; margin: 0; letter-spacing: -0.02em;
}
.vycet__text { color: var(--seda); font-size: 0.95rem; margin: 0; }
.sekce--tmava .vycet__text { color: var(--seda-svet); }

@media (max-width: 800px) {
  .vycet__polozka { grid-template-columns: 2.4rem minmax(0, 1fr); row-gap: 6px; }
  .vycet__text { grid-column: 2; }
}

/* ── Vodorovná dráha ───────────────────────────────────────────────── */
/* Karty různých šířek, poslední je useknutá okrajem okna. To je ten
   rozdíl proti mřížce tří stejných dlaždic: řada nekončí, pokračuje. */
.draha {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 4px 0 26px;
  /* Dráha vyjíždí z obalu ven do pravého okraje okna. */
  margin-right: calc(50% - 50vw);
  padding-right: max(26px, calc(50vw - 50%));
  scrollbar-width: thin;
}
.draha > * { scroll-snap-align: start; }
.draha::-webkit-scrollbar { height: 6px; }
.draha::-webkit-scrollbar-thumb { background: rgba(1, 22, 51, 0.2); border-radius: 3px; }

/* ── Zastávka na dráze ─────────────────────────────────────────────── */
.zastavka {
  width: 340px;
  background: var(--bila);
  border: 1px solid rgba(1, 22, 51, 0.1);
  border-radius: 16px;
  padding: 26px 26px 24px;
  display: flex; flex-direction: column; gap: 14px;
}
/* První je širší a má víc obsahu: je to krok, kterým se začíná. */
.zastavka--hlavni { width: 430px; background: var(--navy); color: var(--bila); border-color: var(--navy); }
.zastavka--uzka { width: 268px; }

.zastavka__hlava { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.zastavka__poradi {
  font-family: 'Jost', sans-serif;
  font-size: 2.4rem; font-weight: 200; line-height: 0.85;
  color: rgba(1, 22, 51, 0.24); font-variant-numeric: tabular-nums;
}
.zastavka--hlavni .zastavka__poradi { color: rgba(255, 255, 255, 0.4); }
.zastavka__nazev { font-size: 1.14rem; font-weight: 500; margin: 0; letter-spacing: -0.015em; }
.zastavka__text { font-size: 0.89rem; color: var(--seda); margin: 0; flex: 1; }
.zastavka--hlavni .zastavka__text { color: var(--seda-svet); }

/* ── Razítko ───────────────────────────────────────────────────────── */
/* Lhůta jako otisk v pase: dvojitý rámeček, pootočené, prostrkané
   verzálky. Úřední lhůta je na téhle stránce to nejdůležitější sdělení,
   tak ať vypadá jako úřední otisk, ne jako další štítek. */
.razitko {
  align-self: flex-start;
  display: inline-block;
  padding: 7px 14px;
  border: 1.5px solid rgba(1, 22, 51, 0.4);
  border-radius: 4px;
  box-shadow: 0 0 0 2.5px var(--bila), 0 0 0 4px rgba(1, 22, 51, 0.18);
  font-family: 'Jost', sans-serif;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(1, 22, 51, 0.72);
  transform: rotate(-2.4deg);
}
.zastavka--hlavni .razitko {
  border-color: rgba(255, 255, 255, 0.55); color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 2.5px var(--navy), 0 0 0 4px rgba(255, 255, 255, 0.3);
}
.razitko--varovne {
  border-color: rgba(179, 56, 42, 0.55); color: #A43427;
  box-shadow: 0 0 0 2.5px var(--bila), 0 0 0 4px rgba(179, 56, 42, 0.22);
  transform: rotate(1.8deg);
}

/* ── Přesahující koláž ─────────────────────────────────────────────── */
/* Dvě fotky a jedna dlaždice, které se překrývají a vyjíždějí z mřížky.
   Nahrazuje obvyklý pár "text vlevo, obrázek v rámečku vpravo". */
.kolaz { position: relative; min-height: 460px; }
.kolaz__velka {
  width: 74%; border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(1, 22, 51, 0.2);
}
.kolaz__velka img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; }
.kolaz__mala {
  position: absolute; right: 0; bottom: 0;
  width: 42%; border-radius: 16px; overflow: hidden;
  border: 7px solid var(--bila);
  box-shadow: 0 18px 44px rgba(1, 22, 51, 0.22);
}
.kolaz__mala img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; }
.kolaz__dlazdice {
  position: absolute; left: 60%; top: 8%;
  width: 118px; aspect-ratio: 1;
  border-radius: 16px; background: var(--navy); color: var(--bila);
  display: grid; place-items: center; text-align: center;
  padding: 14px; gap: 4px;
  box-shadow: 0 16px 40px rgba(1, 22, 51, 0.3);
}
.kolaz__dlazdice-cislo { font-family: 'Jost', sans-serif; font-size: 1.6rem; font-weight: 600; line-height: 1; }
.kolaz__dlazdice-text { font-size: 0.66rem; line-height: 1.3; color: var(--seda-svet); }

/* ── Velké číslo přes okraj ────────────────────────────────────────── */
.udaje {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(22px, 3vw, 46px);
  align-items: start;
}
.udaje__polozka { display: grid; gap: 6px; }
.udaje__cislo {
  font-family: 'Jost', sans-serif;
  font-size: clamp(2.6rem, 5.2vw, 4rem);
  font-weight: 200; line-height: 0.92;
  letter-spacing: -0.045em;
}
.udaje__popis { font-size: 0.86rem; color: var(--seda); margin: 0; max-width: 24ch; line-height: 1.5; }
.sekce--tmava .udaje__popis { color: var(--seda-svet); }

/* ── Výzva přes fotku ──────────────────────────────────────────────── */
/* Bez panelu. Text leží přímo na fotce, fotka jde od kraje ke kraji. */
.vyzva-foto {
  position: relative; isolation: isolate;
  min-height: 520px;
  display: grid; align-items: end;
  color: var(--bila);
  overflow: hidden;
}
.vyzva-foto__obr { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.vyzva-foto::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(1, 13, 30, 0.92), rgba(1, 13, 30, 0.2) 62%);
}
.vyzva-foto__obsah {
  width: min(100% - 52px, var(--obal));
  margin-inline: auto;
  padding-bottom: clamp(42px, 5vw, 76px);
  display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 34px; align-items: end;
}
.vyzva-foto__titul {
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 300; line-height: 1.02; letter-spacing: -0.03em; margin: 0;
}
.vyzva-foto__titul b { font-weight: 600; }
.vyzva-foto__popis { color: rgba(255, 255, 255, 0.82); margin: 0 0 20px; }

/* ── Ukázka portálu ────────────────────────────────────────────────── */
/* Tmavý panel v obalu stránky, útržek rozhraní v něm. Dřív vyjížděl
   doprava až k okraji okna, provozovatel ho chtěl uprostřed (2. 10. 2026).
   Reálné rozhraní prodává portál líp než stocková fotka. */
.portal-pruh {
  position: relative;
  background: var(--navy);
  color: var(--bila);
  border-radius: 24px;
  padding: clamp(38px, 4.5vw, 62px) clamp(26px, 4vw, 54px);
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  overflow: hidden;
}
.portal-pruh__utrzek {
  border-radius: 14px; overflow: hidden;
  background: var(--bila);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 26px 60px rgba(1, 13, 30, 0.5);
  transform: perspective(1400px) rotateY(-9deg) rotateX(2deg);
  transform-origin: left center;
}
.portal-pruh__seznam { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 10px; }
.portal-pruh__seznam li {
  position: relative; padding-left: 26px;
  font-size: 0.93rem; color: rgba(255, 255, 255, 0.88);
}
.portal-pruh__seznam li::before {
  content: ''; position: absolute; left: 0; top: 0.68em;
  width: 13px; height: 1px; background: rgba(255, 255, 255, 0.5);
}

/* ── Responzivita vlastních bloků ──────────────────────────────────── */
@media (max-width: 1000px) {
  .hlavicka { grid-template-columns: 1fr; align-items: start; gap: 18px; }
  .listek {
    grid-template-columns: 1fr 1fr;
    gap: 16px 0; width: calc(100% - 48px); margin-top: -44px;
    padding: 22px 24px;
  }
  .listek__pole { padding-inline: 14px; }
  .listek__pole:nth-child(odd) { border-left: 0; padding-left: 0; }
  .listek__akce { grid-column: 1 / -1; padding-left: 0; padding-top: 6px; }
  .portal-pruh { grid-template-columns: 1fr; border-radius: 24px; margin-right: 0; }
  .portal-pruh__utrzek { transform: none; }
  .vyzva-foto__obsah { grid-template-columns: 1fr; }
  .kolaz { min-height: 0; }
  .kolaz__velka { width: 100%; }
  .kolaz__mala { position: static; width: 62%; margin: -46px 0 0 auto; }
  .kolaz__dlazdice { left: auto; right: 64%; top: auto; bottom: 12%; }
}

@media (max-width: 640px) {
  .listek { grid-template-columns: 1fr; margin-top: -34px; }
  .listek__pole { border-left: 0; padding-left: 0; border-top: 1px dashed rgba(1, 22, 51, 0.16); padding-top: 12px; }
  .listek__pole:first-child { border-top: 0; padding-top: 0; }
  .zastavka { width: 78vw; }
  .zastavka--hlavni, .zastavka--uzka { width: 78vw; }
  .kolaz__dlazdice { width: 92px; }
  .tabule__polozka { padding-inline: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .tabule__pas { animation: none; }
  .sipka:hover { transform: none; }
}


/* ── Hero na užší obrazovce ────────────────────────────────────────── */
@media (max-width: 1000px) {
  .hero__mrizka { grid-template-columns: 1fr; align-items: start; }
  .hero__vedle { padding-bottom: 0; }
}

/* Dvě karty, které si nejsou rovné. Velikost nese význam: vlevo hlavní
   nabídka, vpravo doplňková. */
.dve-nestejne { display: grid; grid-template-columns: 1.3fr 0.95fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .dve-nestejne { grid-template-columns: 1fr; } }

/* Číslovka bez pořadového čísla: ::before by jinak nechalo mezeru. */
.cislovka:not([data-cislo])::before { content: none; }

/* ── Portál na celou obrazovku ─────────────────────────────────────── */
/* Portál je aplikace, ne další stránka s obsahem, takže se neotevírá
   v okně mezi menu a patičkou, ale přes celý výřez. Rolovat se má jen
   pracovní plocha, ne celá stránka: v aplikaci má postranní nabídka
   zůstat na místě. */
body.rezim-app {
  height: 100dvh;
  overflow: hidden;
  background: var(--navy);
}
.app--cela {
  height: 100dvh;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-height: 0;
}
.app--cela .app__bok { overflow-y: auto; }
.app--cela .app__telo { min-height: 0; }
.app--cela .app__plocha { overflow-y: auto; }

/* Odkaz zpátky na web. Stojí v horní liště, ne v postranní nabídce:
   ta se na úzké obrazovce skládá naležato a patička se schovává, takže
   by s ní zmizela i jediná cesta z aplikace ven. */
.app__lista-vlevo { display: flex; align-items: center; gap: 16px; min-width: 0; }
.app__zpet {
  display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  padding: 7px 13px 7px 9px;
  border: 1px solid #DDE3EC; border-radius: 999px;
  font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 500;
  color: var(--seda);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.app__zpet:hover { background: var(--navy); color: var(--bila); border-color: var(--navy); }
.app__zpet svg { width: 14px; height: 14px; flex: 0 0 auto; }

@media (max-width: 1100px) {
  /* Na užší obrazovce se nabídka položí naležato nahoru a roluje se
     celá stránka, protože dvě nezávisle rolující plochy vedle sebe se
     na dotyku ovládají mizerně. */
  body.rezim-app { height: auto; overflow: visible; }
  .app--cela { height: auto; }
  .app--cela .app__plocha { overflow: visible; }
  .app__zpet span { display: none; }
  .app__zpet { padding: 7px 9px; }
}

/* ── Aplikace na užší obrazovce ────────────────────────────────────── */
/* Postranní nabídka se položí naležato nad obsah a roluje se vodorovně.
   Dvě nezávisle rolující plochy vedle sebe se na dotyku ovládají
   mizerně, proto na mobilu roluje celá stránka. */
@media (max-width: 1000px) {
  .app, .app--cela { grid-template-columns: 1fr; height: auto; min-height: 0; }
  body.rezim-app { height: auto; overflow: visible; }

  .app__bok {
    flex-direction: row; align-items: center; gap: 4px;
    padding: 10px 12px;
    overflow-x: auto; overflow-y: hidden;
    position: sticky; top: 0; z-index: 5;
    min-width: 0; max-width: 100vw;
  }
  .app__bok::-webkit-scrollbar { display: none; }
  .app__znacka, .app__pata { display: none; }
  /* Nadpis skupiny by v řádku jen zabíral místo, položky se pozná
     podle ikony a názvu. */
  .app__skupina { display: none; }
  .app__nav { display: flex; padding: 0; gap: 4px; }
  .app__nav li { flex: 0 0 auto; }
  .app__nav button { white-space: nowrap; padding: 9px 13px; }
  .app__nav button[aria-selected="true"]::before { display: none; }
  .app__nav button[aria-selected="true"] { background: rgba(255, 255, 255, 0.18); }

  .app--cela .app__plocha { overflow: visible; }
  .app__telo { min-width: 0; }

  .app__lista { padding: 14px 16px; }
  .app__plocha { padding: 16px; }

  .mriz-hlavni, .mriz-2, .mriz-3, .app__sloupce { grid-template-columns: 1fr; }
  .dlazdice { grid-template-columns: 1fr; }
  .byt { grid-template-columns: 1fr; }
  .byt__foto { max-width: 260px; }
}

@media (max-width: 640px) {
  .app__lista { padding: 12px 14px; }
  .app__lista-vlevo { gap: 10px; }
  .app__titul { font-size: 0.98rem; }
  .app__podtitul { font-size: 0.74rem; }
  .app__plocha { padding: 12px; }
  .rozvrh__radek { grid-template-columns: 92px 1fr; gap: 10px; }
  .postup__uzel { min-width: 86px; }
}

/* Položky mřížek v aplikaci nesmí růst podle svého nejširšího obsahu.
   Stopa `1fr` je `minmax(auto, 1fr)` a `auto` znamená min-content, takže
   jeden široký prvek uvnitř (vodorovný postup fázemi, tabulka) roztáhne
   celý sloupec mimo obrazovku. Ty prvky mají vlastní vodorovné rolování,
   jen se k němu musí dostat. */
.mriz-hlavni > *, .mriz-2 > *, .mriz-3 > *, .dlazdice > *, .app__sloupce > * { min-width: 0; }
.kap { min-width: 0; }

/* ══ Podstránky ════════════════════════════════════════════════════════
   Bloky, ze kterých se od 30. 9. 2026 skládají vnitřní stránky. Dřív to
   byly obecné díly (tmavý pruh, dvě stejné karty, vystředěná výzva) a
   provozovatel je poznal jako generované. Tyhle navazují na motiv úvodu:
   cestovní doklady. */


/* ── Útržek: závěrečná výzva ───────────────────────────────────────── */
/* Nadpis vlevo, text a tlačítko vpravo, nahoře perforace jako na
   odtrženém kuponu. Perforace je přerušovaná čára s výseky na krajích. */
.utrzek { position: relative; background: var(--svetla); padding: clamp(64px, 8vw, 112px) 0; }
.utrzek::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0;
  border-top: 2px dashed rgba(1, 22, 51, 0.16);
}
.utrzek__mrizka {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(24px, 5vw, 80px);
  align-items: end;
}
.utrzek__titul {
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  font-weight: 300; line-height: 1.02; letter-spacing: -0.025em; margin: 0;
}
.utrzek__titul b { display: block; font-weight: 600; }
.utrzek__popis { color: var(--seda); margin: 0 0 24px; max-width: 46ch; }

/* ── Časová osa kurzů ──────────────────────────────────────────────── */
/* Dva kurzy na jedné ose měsíců. Rozdíl mezi nimi je hlavně v tom, kdy
   začínají, a to se z tabulky čte špatně, z osy na první pohled. */
.osa-kurzu { margin: 0 0 clamp(48px, 6vw, 80px); }
.osa-kurzu__mesice {
  display: grid; grid-template-columns: 11rem repeat(12, 1fr);
  font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--seda);
  border-bottom: 1px solid rgba(1, 22, 51, 0.12); padding-bottom: 10px;
}
.osa-kurzu__mesice span:first-child { grid-column: 2; }
.osa-kurzu__radek {
  display: grid; grid-template-columns: 11rem repeat(12, 1fr);
  align-items: center; padding: 16px 0;
  border-bottom: 1px solid rgba(1, 22, 51, 0.08);
}
.osa-kurzu__nazev { font-family: 'Jost', sans-serif; font-weight: 500; font-size: 1.02rem; line-height: 1.25; }
.osa-kurzu__nazev small { display: block; font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 0.78rem; color: var(--seda); }
.osa-kurzu__pruh {
  height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px; font-size: 0.8rem; white-space: nowrap;
  background: var(--navy); color: var(--bila);
}
.osa-kurzu__pruh--kratky { background: var(--navy-3); }

/* ── Srovnávací tabulka ────────────────────────────────────────────── */
/* Dva kurzy vedle sebe v jedné tabulce místo dvou stejných karet. Kdo
   se rozhoduje mezi dvěma možnostmi, potřebuje je vidět v řádku. */
.srovnani { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.srovnani th, .srovnani td { padding: 16px 18px; text-align: left; border-bottom: 1px solid rgba(1, 22, 51, 0.1); vertical-align: top; }
.srovnani thead th { border-bottom: 2px solid var(--navy); vertical-align: bottom; }
.srovnani thead th:first-child { width: 30%; }
.srovnani__kurz { font-family: 'Jost', sans-serif; font-size: 1.2rem; font-weight: 600; line-height: 1.2; display: block; letter-spacing: -0.01em; }
.srovnani__uvod { display: block; font-weight: 400; font-size: 0.86rem; color: var(--seda); margin-top: 8px; max-width: 42ch; }
.srovnani tbody th { font-weight: 500; }
.srovnani td { color: var(--navy); font-variant-numeric: tabular-nums; }
.srovnani__nic { color: rgba(1, 22, 51, 0.3); }
.srovnani tbody tr:last-child th, .srovnani tbody tr:last-child td { border-bottom: 0; font-weight: 600; }

/* ── Fotka přes okraj ──────────────────────────────────────────────── */
/* Obrázek u textu nemá rámeček a vyjíždí až k pravému okraji okna.
   Nahrazuje „text vlevo, zaoblená fotka se stínem vpravo“. */
.pres-okraj {
  display: grid; grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(32px, 5vw, 80px); align-items: center;
}
.pres-okraj__obraz { margin-right: calc(50% - 50vw); }
.pres-okraj__obraz img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 22px 0 0 22px; }

/* ── Účtenka ───────────────────────────────────────────────────────── */
/* Měsíční náklady jako účtenka: položka, tečky, částka. Úzký sloupec
   s pevnou šířkou, protože tak se účtenka čte, a vedle něj dva velké
   součty, které jsou to hlavní, co si člověk odnese. */
.naklady { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.uctenka {
  background: var(--bila);
  padding: 34px 34px 40px;
  box-shadow: 0 22px 54px rgba(1, 22, 51, 0.12);
  /* Zoubkovaný spodní okraj, jako utržená páska z pokladny. */
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat,
                conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 20px 10px repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat,
                conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 20px 10px repeat-x;
}
.uctenka__hlava {
  font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--seda);
  padding-bottom: 14px; margin: 0 0 6px; border-bottom: 1px dashed rgba(1, 22, 51, 0.2);
}
.uctenka__seznam { list-style: none; margin: 0; padding: 0; }
.uctenka__polozka { padding: 14px 0; border-bottom: 1px dashed rgba(1, 22, 51, 0.14); }
.uctenka__radek { display: flex; align-items: baseline; gap: 8px; font-weight: 600; }
.uctenka__radek::after { content: ''; order: 1; flex: 1; border-bottom: 1px dotted rgba(1, 22, 51, 0.35); transform: translateY(-4px); }
.uctenka__cena { order: 2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.uctenka__pozn { margin: 4px 0 0; font-size: 0.84rem; color: var(--seda); line-height: 1.5; }

/* ── Zákonná lhůta ─────────────────────────────────────────────────── */
/* Nejdůležitější sdělení registrace. Velké číslo, ne rámeček s ikonou. */
.lhuta { display: grid; grid-template-columns: auto 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.lhuta__cislo {
  font-family: 'Jost', sans-serif; font-weight: 200;
  font-size: clamp(4rem, 11vw, 8.5rem); line-height: 0.85; letter-spacing: -0.05em;
}
.lhuta__cislo small { display: block; font-size: 0.16em; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; margin-top: 14px; color: var(--seda-svet); }
.lhuta__text { max-width: 58ch; color: var(--seda-svet); margin: 0; }
.lhuta__text strong { color: var(--bila); display: block; font-size: 1.2rem; font-family: 'Jost', sans-serif; font-weight: 500; margin-bottom: 8px; }

/* ── O nás ─────────────────────────────────────────────────────────── */
.poslani { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.poslani__titul { font-size: clamp(2.1rem, 4.6vw, 3.6rem); font-weight: 300; line-height: 1.02; letter-spacing: -0.025em; margin: 0; position: sticky; top: calc(var(--lista-v) + 32px); }
.poslani__titul b { display: block; font-weight: 600; }
.poslani__text p { color: var(--seda); }
.poslani__text p:first-child { color: var(--navy); font-size: 1.18rem; line-height: 1.6; }

.dve-foto { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: 18px; align-items: end; margin-top: clamp(56px, 7vw, 96px); }
.dve-foto img { width: 100%; object-fit: cover; border-radius: 18px; }
.dve-foto__velka img { aspect-ratio: 16 / 9; }
.dve-foto__mala { margin-bottom: -48px; }
.dve-foto__mala img { aspect-ratio: 4 / 5; }

/* ── Kontakt ───────────────────────────────────────────────────────── */
/* Formulář bez panelu, v jednom sloupci. Vedle něj cesty, které jsou
   rychlejší než formulář, a to nahoře, ne pod ním. */
.kontakt { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.kontakt__formular { max-width: 600px; }
.kontakt__formular h2, .kontakt__cesty h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 400; margin: 0 0 10px; letter-spacing: -0.02em; }
.kontakt__uvod { color: var(--seda); margin: 0 0 32px; }
.kontakt__cesty { position: sticky; top: calc(var(--lista-v) + 32px); }
.cesta {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 18px; align-items: center;
  padding: 20px 0; border-bottom: 1px solid rgba(1, 22, 51, 0.1);
}
.cesta:first-of-type { border-top: 1px solid rgba(1, 22, 51, 0.1); }
.cesta__stitek { font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--seda); margin: 0; }
.cesta__hodnota { font-size: 1.12rem; font-weight: 500; margin: 0; grid-column: 1; }
.cesta .sipka { grid-row: 1 / span 2; grid-column: 2; }
.cesta--adresa .cesta__hodnota { font-style: normal; line-height: 1.5; }
.pole__nepovinne { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--seda); }

@media (max-width: 1000px) {
  .utrzek__mrizka, .pres-okraj, .naklady, .poslani, .kontakt, .lhuta { grid-template-columns: 1fr; }
  .pres-okraj__obraz { margin-right: 0; }
  .pres-okraj__obraz img { border-radius: 18px; }
  .poslani__titul, .kontakt__cesty { position: static; }
  /* Na telefonu je WhatsApp nejrychlejší cesta, tak jde nad sedm polí
     formuláře, ne pod ně. */
  .kontakt__cesty { order: -1; }
  .osa-kurzu__mesice, .osa-kurzu__radek { grid-template-columns: 7.5rem repeat(12, 1fr); }
  .osa-kurzu__pruh span:last-child { display: none; }
}
@media (max-width: 640px) {
  /* Na telefonu by dvanáct sloupců měsíců byla nečitelná drť. Zůstane
     jen první písmeno měsíce. */
  .osa-kurzu__mesice { font-size: 9px; letter-spacing: 0; }
  .osa-kurzu__mesice span { overflow: hidden; width: 1ch; }
  .osa-kurzu__mesice, .osa-kurzu__radek { grid-template-columns: 5.4rem repeat(12, 1fr); }
  .osa-kurzu__pruh { padding: 0 8px; font-size: 0.72rem; }
  .srovnani th, .srovnani td { padding: 12px 8px; }
  .srovnani thead th:first-child { width: 34%; }
  .srovnani__uvod { display: none; }
  .dve-foto { grid-template-columns: 1fr; }
  .dve-foto__mala { display: none; }
}

/* ── Přepínač jazyka ───────────────────────────────────────────────── */
/* Jméno jazyka jeho vlastní řečí, žádné vlajky. V liště je vidět jen
   ten druhý jazyk, aby se vedle menu a tlačítka portálu vešel. V patičce
   a v rozbaleném menu na telefonu jsou oba a aktivní je zvýrazněný. */
.jazyky ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; align-items: center; }
.jazyky a, .jazyky__aktivni {
  display: inline-block;
  padding: 6px 10px; border-radius: 999px;
  font-family: 'Jost', sans-serif; font-size: 13.5px; font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
}
.jazyky a:hover { color: var(--bila); background: rgba(255, 255, 255, 0.1); }
.jazyky__aktivni { color: var(--bila); border: 1px solid rgba(255, 255, 255, 0.28); }

.jazyky--lista .jazyky__aktivni { display: none; }
.jazyky--lista a { border: 1px solid rgba(255, 255, 255, 0.28); }
.jazyky--menu { display: none; }
.jazyky--paticka { margin-top: 22px; }
.jazyky--paticka ul { gap: 8px; }

@media (max-width: 900px) {
  .jazyky--lista { display: none; }
  .jazyky--menu { display: block; margin-top: 18px; padding: 16px 16px 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
}

/* ══ Účet: registrace, ověření, přihlášení, obnova hesla ═══════════════
   Dvě poloviny. Vlevo tmavý pruh s noční Prahou z úvodu, vpravo formulář
   na bílé, bez rámečku a stínu. Formulář je na stránce jediná věc, kterou
   má člověk udělat, nic ho nemá obalovat. */
/* Stránky účtu: tmavý pruh s fotkou a nadpisem, pod ním bílý list
   s formulářem, který do pruhu zasahuje o --presah. Šířku listu nese
   --list: registrace je širší, krátké formuláře užší. */
.stranka-vstup { background: var(--svetla); }
.vstup { --list: 760px; --presah: 72px; --okraj: clamp(24px, 5vw, 56px); padding-bottom: 8px; }
.vstup--uzky { --list: 540px; }

.vstup-lista {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  height: var(--lista-v);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 clamp(20px, 4vw, 48px);
}
.vstup-lista__logo img { display: block; width: 112px; height: auto; }
.vstup-lista__vpravo { display: flex; align-items: center; gap: 16px; }
.vstup-lista__zpet { font-family: 'Jost', sans-serif; font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, 0.86); }
.vstup-lista__zpet:hover { color: var(--bila); text-decoration: underline; text-underline-offset: 4px; }
.jazyky--vstup .jazyky__aktivni { display: none; }
.jazyky--vstup a { border: 1px solid rgba(255, 255, 255, 0.28); }

.vstup__hlava {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--navy); color: var(--bila);
  padding: calc(var(--lista-v) + clamp(32px, 6vw, 72px)) var(--okraj) calc(var(--presah) + clamp(40px, 5vw, 56px));
}
.vstup__obr { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; z-index: -2; opacity: 0.5; }
.vstup__hlava::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(1, 22, 51, 0.82), rgba(1, 22, 51, 0.6) 55%, rgba(1, 22, 51, 0.92));
}
.vstup__hlava-obsah { width: min(100%, var(--list)); margin: 0 auto; }
.vstup__stitek {
  display: flex; align-items: center; gap: 12px;
  font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--zlata); margin: 0 0 14px;
}
.vstup__stitek::before { content: ''; width: 28px; height: 1px; background: currentColor; }
.vstup__titul {
  font-size: clamp(2.3rem, 4.6vw, 3.6rem);
  font-weight: 300; line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 14px;
}
.vstup__titul br { display: none; }
.vstup__titul b::before { content: " "; }
.vstup__titul b { font-weight: 600; }
.vstup__uvod { color: rgba(255, 255, 255, 0.8); max-width: 52ch; margin: 0; }

/* List. Bez vnitřních rámečků: formulář člení jen čáry a nadpisy. */
.vstup__formular {
  position: relative; z-index: 2;
  width: min(100% - 32px, var(--list));
  margin: calc(-1 * var(--presah)) auto 0;
  background: var(--bila);
  border-radius: 20px;
  box-shadow: 0 26px 64px rgba(1, 22, 51, 0.14);
  padding: var(--okraj);
}

/* Kroky jako pole palubního lístku, oddělené od formuláře perforací
   s výseky po stranách. Výsek má barvu pozadí stránky. */
.cesta {
  list-style: none; position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin: calc(-1 * var(--okraj)) calc(-1 * var(--okraj)) var(--okraj);
  padding: 22px var(--okraj);
  border-bottom: 1.5px dashed rgba(1, 22, 51, 0.16);
}
.cesta::before, .cesta::after {
  content: ''; position: absolute; bottom: -12px;
  width: 22px; height: 22px; border-radius: 50%; background: var(--svetla);
}
.cesta::before { left: -11px; }
.cesta::after { right: -11px; }
.cesta__krok { padding-inline: 16px; border-left: 1px dashed rgba(1, 22, 51, 0.14); min-width: 0; }
.cesta__krok:first-child { border-left: 0; padding-left: 0; }
.cesta__cislo { display: block; font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.17em; text-transform: uppercase; color: var(--seda); margin-bottom: 4px; }
.cesta__nazev { display: block; font-family: 'Jost', sans-serif; font-size: 1rem; font-weight: 500; color: var(--navy); }
.cesta__pod { display: block; font-size: 0.76rem; color: var(--seda); margin-top: 1px; }
.cesta__krok--ted .cesta__cislo { color: var(--navy); }
.cesta__krok--ted .cesta__nazev { font-weight: 600; }
.cesta__krok--ted .cesta__nazev::after {
  content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 7px; vertical-align: middle;
  border-radius: 50%; background: var(--zlata);
}
.cesta__krok--pozdeji .cesta__nazev { color: var(--seda); font-weight: 400; }
.cesta__krok--hotovo .cesta__nazev { color: var(--seda); text-decoration: line-through; text-decoration-color: rgba(1, 22, 51, 0.3); }

/* Výběr programu: řádky pod názvem skupiny, ne dlaždice. */
.programy { border: 0; padding: 0; margin: 0 0 26px; min-width: 0; }
.programy__skupina { font-family: 'Jost', sans-serif; font-size: 1rem; font-weight: 600; padding: 0; margin: 0 0 2px; }
.programy__popis { font-size: 0.86rem; color: var(--seda); margin: 0 0 10px; }
.programy__volba {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 14px; margin: 0 -14px;
  border-top: 1px solid rgba(1, 22, 51, 0.08);
  border-radius: 10px;
  font-size: 0.95rem; color: var(--navy); cursor: pointer;
  transition: background var(--prechod);
}
.programy__volba:last-of-type { border-bottom: 1px solid rgba(1, 22, 51, 0.08); }
.programy__volba:hover { background: var(--svetla); }
.programy__volba:has(input:checked) { background: var(--svetla); border-color: transparent; font-weight: 600; box-shadow: inset 3px 0 0 var(--zlata); }
.programy__volba:has(input:checked) + .programy__volba { border-top-color: transparent; }
.programy__volba input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; accent-color: var(--navy); }
.programy__volba:has(input:focus-visible) { outline: 2px solid var(--navy); outline-offset: 2px; }

.vstup .oddil:first-of-type { border-top: 0; padding-top: 0; }

.vstup-pata {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px;
  padding: 36px 24px 40px;
  font-size: 0.84rem; color: var(--seda); text-align: center;
}
.vstup-pata p { margin: 0; }
.vstup-pata a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 700px) {
  .vstup { --presah: 40px; --okraj: 22px; }
  .vstup__formular { width: calc(100% - 20px); border-radius: 16px; }
  .vstup-lista { padding: 0 18px; }
  .vstup-lista__logo img { width: 92px; }
  .vstup-lista__zpet { font-size: 12.5px; }
  .cesta { padding-block: 16px; }
  .cesta__krok { padding-inline: 8px; }
  .cesta__pod { display: none; }
  .cesta__nazev { font-size: 0.86rem; }
  .cesta__cislo { font-size: 9px; letter-spacing: 0.12em; }
  .cesta__krok--ted .cesta__nazev::after { display: none; }
}
.vstup__prepnout { color: var(--seda); margin: 0 0 32px; font-size: 0.95rem; }
.vstup__prepnout a, .vstup__radek a, .vstup__pomoc a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.vstup__prepnout--dole { margin: 28px 0 0; }
.vstup__text { color: var(--seda); font-size: 1.05rem; margin: 0 0 28px; }
.vstup__text strong { color: var(--navy); }
.vstup__podtitul { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 400; margin: 0 0 12px; }
.vstup__radek { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin: 0 0 26px; font-size: 0.92rem; }

.vstup__pomoc { margin-top: 44px; padding-top: 28px; border-top: 1px dashed rgba(1, 22, 51, 0.18); font-size: 0.93rem; color: var(--seda); }
.vstup__pomoc h2 { font-size: 1.1rem; font-weight: 500; color: var(--navy); margin: 0 0 8px; }
.vstup__pomoc ul { margin: 0 0 18px; padding-left: 1.1em; }
.vstup__pomoc .pole__napoveda { display: block; margin-top: 8px; }

/* ── Oddíly registrace ─────────────────────────────────────────────── */
/* Čtyři oddíly číslované 1. až 4., stejně jako výpisy na webu. Bez
   rámečků, oddělené jen čarou a nadpisem. */
.oddil { border: 0; margin: 0 0 40px; padding: 32px 0 0; border-top: 1px solid rgba(1, 22, 51, 0.12); min-width: 0; }
.oddil__nadpis {
  float: left; width: 100%; padding: 0; margin: 0 0 22px;
  font-family: 'Jost', sans-serif; font-size: clamp(1.35rem, 2.4vw, 1.7rem); font-weight: 400; letter-spacing: -0.015em;
}
.oddil__nadpis span { color: var(--seda); font-weight: 300; margin-right: 6px; }
.oddil__nadpis + * { clear: both; }
/* Pole vedle sebe jsou odstavce a poslední z nich by obecné pravidlo
   p:last-child připravilo o spodní okraj. Pak by se v řádku posunulo
   o kus níž než soused. */
.pole-vedle { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; align-items: start; }
.pole-vedle .pole { margin-bottom: 18px; }
.pole__napoveda { font-size: 0.84rem; color: var(--seda); line-height: 1.5; }
.pole__napoveda--pod { margin: -8px 0 18px; }

/* Heslo s tlačítkem uvnitř pole. */
.heslo { position: relative; display: block; }
.heslo input { padding-right: 96px; }
.heslo__ukaz {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  min-height: 36px; padding: 0 14px; border-radius: 12px;
  border: 0; background: var(--svetla); color: var(--navy);
  font: 500 13px 'Jost', sans-serif; cursor: pointer;
}
.heslo__ukaz:hover { background: #E4E8F2; }

/* Datum narození: tři pole vedle sebe, každé tak široké, kolik se do
   něj píše. Široké pole na dvě číslice svádí psát celé datum. */
.datum { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.datum legend { font-family: 'Jost', sans-serif; font-size: 15px; font-weight: 500; padding: 0; margin-bottom: 7px; }
.datum__pole { display: flex; flex-wrap: wrap; gap: 12px; }
.datum__pole .pole { margin: 0; }
.datum__pole label { font-family: 'Montserrat', sans-serif; font-size: 0.82rem; font-weight: 400; color: var(--seda); }
.datum__kratke { width: 4.6em !important; }
.datum__rok { width: 6.2em !important; }

/* Volba cesty: čtyři velké přepínače. */
.volba-cesty { border: 0; padding: 0; margin: 4px 0 22px; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.volba-cesty legend { font-family: 'Jost', sans-serif; font-size: 15px; font-weight: 500; padding: 0; margin-bottom: 9px; }
.volba-cesty__moznost {
  position: relative; display: flex; gap: 12px; align-items: flex-start;
  padding: 16px 18px; border: 1px solid rgba(1, 22, 51, 0.16); border-radius: var(--radius-m);
  cursor: pointer; transition: border-color var(--prechod), background var(--prechod);
}
.volba-cesty__moznost:hover { border-color: rgba(1, 22, 51, 0.4); }
.volba-cesty__moznost:has(input:checked) { border-color: var(--navy); background: var(--svetla); box-shadow: inset 0 0 0 1px var(--navy); }
.volba-cesty__moznost input { margin: 4px 0 0; accent-color: var(--navy); width: 18px; height: 18px; flex: 0 0 auto; }
.volba-cesty__text { font-size: 0.86rem; color: var(--seda); line-height: 1.5; }
.volba-cesty__text strong { display: block; color: var(--navy); font-family: 'Jost', sans-serif; font-weight: 500; font-size: 1rem; margin-bottom: 2px; }

.zaskrt { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 14px; font-size: 0.93rem; color: var(--navy); cursor: pointer; }
.zaskrt input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--navy); flex: 0 0 auto; }
.zaskrt a { text-decoration: underline; text-underline-offset: 3px; }
.zaskrt--male { margin: 0; font-size: 0.9rem; }

.tlacitko--siroke { width: 100%; justify-content: center; min-height: 56px; }

/* Pole na kód: velké a prostrkané, aby se šest číslic dalo zkontrolovat
   jedním pohledem. */
.kod {
  font-family: 'Jost', sans-serif !important; font-size: 1.9rem !important;
  letter-spacing: 0.5em; text-align: center; padding: 14px 0 14px 0.5em !important;
  font-variant-numeric: tabular-nums;
}

/* Obálka s razítkem nad textem ověření. */
.obalka {
  position: relative; width: 132px; height: 88px; margin: 0 0 30px;
  border-radius: 10px; background: var(--svetla);
  border: 1px solid rgba(1, 22, 51, 0.12);
  overflow: hidden;
}
.obalka::before {
  content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 58px;
  background: linear-gradient(to bottom right, transparent 49.5%, rgba(1, 22, 51, 0.12) 50%, transparent 51%),
              linear-gradient(to bottom left, transparent 49.5%, rgba(1, 22, 51, 0.12) 50%, transparent 51%);
}
.obalka .razitko { position: absolute; right: 8px; bottom: 9px; font-size: 8.5px; padding: 4px 7px; }

}
@media (max-width: 640px) {
  .pole-vedle, .volba-cesty { grid-template-columns: 1fr; }
}

/* Chyba ve formuláři účtu. Barva i text: barvu nerozliší každý. */
.upozorneni--chyba { background: rgba(190, 48, 48, 0.08); border-color: rgba(190, 48, 48, 0.35); }
.vstup__formular .upozorneni { margin-bottom: 26px; }
.volba-cesty--skupina { margin-bottom: 18px; }
.volba-cesty--skupina legend .pole__nepovinne { display: block; margin-top: 2px; }

/* ══ Skutečný portál a admin ══════════════════════════════════════════
   Vychází z makety (/portal-demo/). Rozdíl: pohledy jsou odkazy s vlastní
   adresou, ne záložky přepínané skriptem, aby šly otevřít z mailu. */
.app__nav a {
  width: 100%; text-align: left;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 9px;
  color: rgba(255, 255, 255, 0.74);
  font-family: 'Jost', sans-serif; font-size: 13.5px; font-weight: 400;
  transition: background 0.18s ease, color 0.18s ease;
}
.app__nav a:hover { background: rgba(255, 255, 255, 0.07); color: var(--bila); }
.app__nav a[aria-current="page"] { background: rgba(255, 255, 255, 0.13); color: var(--bila); font-weight: 500; }
.app__nav a[aria-current="page"]::before {
  content: ''; width: 3px; height: 17px; border-radius: 2px;
  background: var(--zlata); margin-left: -12px; margin-right: 9px;
}
/* Pohled, který se otevře až po aktivaci: vidět ano, ať student ví,
   co ho čeká, ale ztlumeně. */
.app__nav a.je-zamceno { color: rgba(255, 255, 255, 0.42); }
.app__lista-vpravo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.inline { display: inline; margin: 0; }

.tlac--male { padding: 3px 9px; font-size: 11px; }
.tlac--velke { padding: 10px 22px; font-size: 13.5px; border-radius: 9px; }

/* Kontrolní seznam před aktivací: číslo, text, stav, odkaz. */
.kontrola { list-style: none; margin: 0; padding: 0; }
.kontrola__polozka {
  display: grid; grid-template-columns: 1.6rem 1fr auto auto; gap: 12px; align-items: center;
  padding: 13px 0; border-top: 1px solid #E8ECF2;
}
.kontrola li:first-child .kontrola__polozka { border-top: 0; }
/* Celý řádek je odkaz. Hover jen zesvětlí pozadí a posune šipku. */
.kontrola__polozka--odkaz {
  grid-template-columns: 1.6rem 1fr auto 20px;
  color: inherit; text-decoration: none;
  margin: 0 -12px; padding-inline: 12px; border-radius: 10px;
  transition: background 0.16s ease;
}
.kontrola__polozka--odkaz:hover { background: var(--svetla); }
.kontrola__sipka { color: var(--seda); transition: transform 0.16s ease; }
.kontrola__polozka--odkaz:hover .kontrola__sipka { transform: translateX(3px); color: var(--navy); }
.odeslat-chybi { font-size: 0.84rem; color: #8A5A00; background: #FFF6E0; border-radius: 10px; padding: 10px 12px; margin: 0 0 14px; }
.tlac:disabled { opacity: 0.45; cursor: not-allowed; }
.kontrola__cislo { font-family: 'Jost', sans-serif; color: var(--seda); }
.kontrola__text strong { display: block; font-family: 'Jost', sans-serif; font-weight: 500; font-size: 0.95rem; }
.kontrola__text span { display: block; font-size: 0.78rem; color: var(--seda); line-height: 1.45; }

.udaj--odkaz { display: block; color: inherit; transition: border-color 0.16s ease; }
.udaj--odkaz:hover { border-color: var(--navy); }
.udaj--odkaz .udaj__hodnota { font-size: 1.15rem; }

/* Formuláře uvnitř aplikace: menší písmo a pole ve dvou sloupcích. */
.formular--portal .pole { margin-bottom: 14px; }
.formular--portal .pole label, .formular--portal .pole legend { font-size: 13px; }
.formular--portal .pole input, .formular--portal .pole select, .formular--portal .pole textarea {
  padding: 9px 12px; border-radius: 9px; font-size: 0.9rem;
}
.formular--portal input[readonly], .formular--portal select:disabled, .formular--portal textarea[readonly] {
  background: #F4F6FA; color: var(--seda);
}
.pole-mriz { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; align-items: start; }
.pole-mriz--3 { grid-template-columns: 0.6fr 1fr 1fr; }
.pole-mriz__cela { grid-column: 1 / -1; }
.pole-mriz .pole:last-child, .pole-mriz .pole { margin-bottom: 14px; }
.formular__lista { margin: 4px 0 0; }
.formular--portal + .formular--portal, .kap + .formular__lista { margin-top: 14px; }
.ano-ne { border: 0; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.ano-ne legend { width: 100%; font-family: 'Jost', sans-serif; font-weight: 500; margin-bottom: 6px; }

/* Doklady. */
.doklady__prazdne { padding: 14px 18px 0; }
.tab__pozn--chyba { color: #A43427; }
.nahrani {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 14px 18px; border-top: 1px dashed #DDE3EC;
}
/* Zóna pro nahrání: pole pro soubor leží průhledné přes ni, takže
   kliknutí i přetažení souboru jde rovnou do něj. */
.nahrani__zona {
  position: relative; flex: 1 1 100%;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border: 1.5px dashed #C9D2E0; border-radius: 12px;
  background: #FAFBFD; color: var(--navy); cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
}
.nahrani__zona:hover, .nahrani__zona.je-nad { border-color: var(--navy); background: var(--svetla); }
.nahrani__zona:focus-within { outline: 2px solid var(--navy); outline-offset: 2px; }
.nahrani__zona input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.nahrani__zona svg { flex: 0 0 auto; color: var(--seda); }
.nahrani__text strong { display: block; font-family: 'Jost', sans-serif; font-weight: 500; font-size: 0.95rem; }
.nahrani__pod { display: block; font-size: 0.78rem; color: var(--seda); }
.nahrani.je-js .nahrani__tlac { display: none; }
.nahrani.odesila .nahrani__zona { opacity: 0.6; pointer-events: none; }

/* Rozcestník oddílů profilu. */
.obsah-profilu { margin: 0 0 14px; }
.obsah-profilu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.obsah-profilu a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 999px; background: var(--bila); border: 1px solid #E3E8F0;
  font-family: 'Jost', sans-serif; font-size: 0.84rem; color: var(--navy); text-decoration: none;
}
.obsah-profilu a:hover { border-color: var(--navy); }
.obsah-profilu__tecka { width: 8px; height: 8px; border-radius: 50%; background: #E0A526; }
.je-hotovo .obsah-profilu__tecka { background: #2E8B57; }

/* Ukládací lišta u spodního okraje okna. */
.formular__lista--drzi {
  position: sticky; bottom: 0; z-index: 3;
  display: flex; align-items: center; justify-content: flex-end; gap: 16px;
  margin: 14px -24px -22px; padding: 14px 24px;
  background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(6px);
  border-top: 1px solid #E3E8F0;
}
.formular__neulozeno { font-size: 0.84rem; color: #8A5A00; }

/* Údaje jako seznam popisek a hodnota. */
.udaje-seznam { margin: 0; display: grid; gap: 10px; }
.udaje-seznam > div { display: grid; grid-template-columns: 11rem 1fr; gap: 12px; }
.udaje-seznam dt { font-size: 0.8rem; color: var(--seda); }
.udaje-seznam dd { margin: 0; font-size: 0.9rem; }

/* Platby: údaje vlevo, QR vpravo. Údaje jdou označit jedním klepnutím,
   aby se IBAN a symbol daly zkopírovat bez přepisování. */
.platba__telo { display: grid; grid-template-columns: 1fr 200px; gap: 24px; align-items: start; }
.platba__castka { font-family: 'Jost', sans-serif; font-size: 1.25rem; font-weight: 600; }
.platba__vs { font-family: 'Jost', sans-serif; font-size: 1.1rem; letter-spacing: 0.04em; user-select: all; }
.platba__kopie { user-select: all; font-variant-numeric: tabular-nums; }
.platba__qr .qr { width: 180px; max-width: 100%; background: var(--bila); }
.platba__qr .qr svg { display: block; width: 100%; height: auto; }
.platba__qr .kap__pozn { margin-top: 8px; }

/* Volby univerzit. */
.volby { list-style: none; margin: 0 0 16px; padding: 0; }
.volby__polozka { display: grid; grid-template-columns: 1.6rem 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid #E8ECF2; }
.volby__polozka:first-child { border-top: 0; }
.volby__cislo { font-family: 'Jost', sans-serif; color: var(--seda); }
.volby__text strong { font-family: 'Jost', sans-serif; font-weight: 500; }
.volby__akce { display: flex; gap: 4px; }
.volby__pridat { border-top: 1px dashed #DDE3EC; padding-top: 14px; }

@media (max-width: 900px) {
  .pole-mriz, .pole-mriz--3, .platba__telo { grid-template-columns: 1fr; }
  .udaje-seznam > div { grid-template-columns: 1fr; gap: 2px; }
  .kontrola__polozka { grid-template-columns: 1.4rem 1fr auto; }
  .kontrola__polozka .stav { grid-column: 2; grid-row: 2; justify-self: start; }
  .kontrola__sipka { grid-column: 3; grid-row: 1 / span 2; }
  .app__nav a { white-space: nowrap; padding: 9px 13px; }
  .app__nav a[aria-current="page"]::before { display: none; }
  .app__nav a[aria-current="page"] { background: rgba(255, 255, 255, 0.18); }
}

/* Admin: hlavička studenta, záložky, filtry, posudky dokladů. */
.student-hlava { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.student-hlava__jmeno { font-size: 1.35rem; margin: 0 0 4px; }
.zalozky { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 14px; border-bottom: 1px solid #E3E8F0; }
.zalozky a { padding: 8px 12px; font-family: 'Jost', sans-serif; font-size: 13px; color: var(--seda); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.zalozky a:hover { color: var(--navy); }
.zalozky a[aria-current="page"] { color: var(--navy); border-bottom-color: var(--navy); font-weight: 500; }
.posudek { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.posudek input, .posudek select { padding: 4px 8px; border: 1px solid #DDE3EC; border-radius: 7px; font: inherit; font-size: 12px; }
.posudek input { width: 13rem; }
.filtr-lista { display: flex; flex-wrap: wrap; gap: 0 12px; align-items: flex-end; margin-bottom: 6px; }
.filtr-lista .pole { margin-bottom: 12px; }
.filtr-lista .pole input, .filtr-lista .pole select { padding: 8px 12px; border-radius: 9px; font-size: 0.88rem; }
.filtr-lista .pole label { font-size: 12px; }
.tab-obal { overflow-x: auto; }
.tab thead th { text-align: left; font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--seda); padding: 10px 18px; border-bottom: 1px solid #E3E8F0; }

/* Odkaz na registraci v liště vedle zlatého tlačítka portálu. */
.lista__odkaz { font-family: 'Jost', sans-serif; font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, 0.86); padding: 6px 4px; }
.lista__odkaz:hover { color: var(--bila); text-decoration: underline; text-underline-offset: 4px; }
.menu__ucet { display: none; }
@media (max-width: 900px) {
  .lista__odkaz { display: none; }
  .menu__ucet { display: block; margin: 14px 16px 0; color: rgba(255, 255, 255, 0.5); }
  .menu__ucet a { color: var(--bila); font-family: 'Jost', sans-serif; font-weight: 500; }
}

/* Lišta mezi tabletem a notebookem. Turecké názvy jsou delší a s odkazem
   na registraci by se položky lámaly na dva řádky. Úvod z menu zmizí,
   vede na něj logo. Pod 900 px přebírá menu přepínač. */
.menu__odkaz { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1240px) {
  .menu__seznam li:first-child { display: none; }
  .menu__odkaz { padding-inline: 9px; font-size: 13.5px; }
  .lista__vpravo { gap: 8px; }
}
@media (min-width: 901px) and (max-width: 1040px) {
  .menu__odkaz { padding-inline: 6px; font-size: 12.5px; }
  .jazyky--lista a { padding: 5px 8px; font-size: 12.5px; }
  .lista__odkaz { font-size: 12.5px; }
}

/* ── Přihlášení do adminu ──────────────────────────────────────────── */
/* Záměrně jiné než přihlášení studentů na webu: bílá karta na šedé,
   bez fotky a bez odkazů webu, ať je hned vidět, že jde o pracovní
   nástroj, ne o stránku pro studenty. */
.admin-vstup { min-height: 100svh; display: grid; place-items: center; background: var(--svetla); padding: 24px; }
.admin-vstup__karta { width: 100%; max-width: 420px; background: var(--bila); border-radius: var(--radius-m); padding: clamp(28px, 5vw, 44px); box-shadow: 0 1px 2px rgba(1, 22, 51, 0.06); }
.admin-vstup__logo { width: 104px; height: auto; display: block; margin: 0 0 24px; }
.admin-vstup__titul { font-size: 1.6rem; font-weight: 500; margin: 0 0 6px; }
.admin-vstup__uvod { color: var(--seda); font-size: 0.92rem; margin: 0 0 24px; }
.admin-vstup__uvod a, .admin-vstup .vstup__radek a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.vstup--uzky .cesta__pod { display: none; }

/* Řádek tabulky klikací celý (site.js, data-radek-odkaz). */
.tab tr.je-odkaz { cursor: pointer; }
.tab tr.je-odkaz:hover td { background: var(--svetla); }
.tab__program { min-width: 190px; }

/* Tlačítko výzvy a vedle něj tichý odkaz na kontakt. */
.utrzek__akce { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 0; }
.utrzek__druhy { font-family: 'Jost', sans-serif; font-size: 0.95rem; font-weight: 500; color: var(--navy); text-decoration: underline; text-underline-offset: 4px; }
.utrzek__druhy--svetly { color: var(--bila); }

/* Chybějící pole v profilu: jantarová, ne červená. Nic se nepokazilo,
   jen ještě něco chybí. */
.kap__chybi { margin: 0; padding: 10px 18px; background: #FFF6E0; color: #6B4700; font-size: 0.84rem; border-bottom: 1px solid #F3E2B3; }
.kap__chybi a, .souhrn-chybi a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.pole--chybi input, .pole--chybi select, .pole--chybi textarea { border-color: #D99A1E !important; box-shadow: 0 0 0 3px rgba(217, 154, 30, 0.16); }
.pole--chybi > label, .pole--chybi legend { color: #6B4700; }
.zaskrt.pole--chybi { outline: 2px solid rgba(217, 154, 30, 0.5); outline-offset: 6px; border-radius: 6px; }
.souhrn-chybi { margin: 8px 0 0; padding-left: 1.1em; font-size: 0.9rem; }
.souhrn-chybi li { margin: 2px 0; }
#souhrn-chybi:focus { outline: none; }
[data-souhlas-rodice][hidden] { display: none; }

/* Nahrání dokladu v adminu: štítky typu a široká zóna. */
.nahrani--admin { display: grid; gap: 14px; border-top: 0; padding: 18px; }
.stitky { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.stitky legend { font-family: 'Jost', sans-serif; font-weight: 500; font-size: 0.9rem; margin-bottom: 8px; padding: 0; }
.stitky__volba { position: relative; cursor: pointer; }
/* Přepínač leží neviditelný přes štítek. Obecný styl polí v aplikaci
   mu dává pozadí a rámeček, proto se tu ruší výslovně. */
.stitky__volba input { position: absolute; inset: 0; width: 100% !important; height: 100% !important; margin: 0; padding: 0;
  opacity: 0 !important; appearance: none; background: none !important; border: 0 !important; box-shadow: none !important; cursor: pointer; }
.stitky__volba span {
  display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid #DDE3EC; background: var(--bila);
  font-family: 'Jost', sans-serif; font-size: 0.86rem; color: var(--navy); transition: background 0.16s ease, border-color 0.16s ease;
}
.stitky__volba:hover span { border-color: var(--navy); }
.stitky__volba input:checked + span { background: var(--navy); border-color: var(--navy); color: var(--bila); }
.stitky__volba input:focus-visible + span { outline: 2px solid var(--navy); outline-offset: 2px; }
.nahrani__zona--velka { padding: 30px 24px; justify-content: center; text-align: left; }

/* Souhrn po uložení neúplného profilu: jantarový, pod sebou. */
.vyzva.souhrn { display: block; background: #FFF6E0; border-color: #F0D9A0; color: #6B4700; }
.vyzva.souhrn p { margin: 0; }

/* Přístup rodiče: zamčené zobrazení. Fieldset s disabled vypne pole;
   tlačítka a zóny pro nahrání jsou k ničemu, tak se schovají úplně. */
.jen-cist { border: 0; margin: 0; padding: 0; min-width: 0; }
.jen-cist button, .jen-cist .nahrani, .jen-cist .formular__lista, .jen-cist .obsah-profilu + .vyzva { display: none !important; }
.jen-cist input:disabled, .jen-cist select:disabled, .jen-cist textarea:disabled { opacity: 1; color: var(--navy); background: #FAFBFD; cursor: default; }
.rodic-pruh { align-items: center; flex-wrap: wrap; }
.rodic-pruh p { flex: 1 1 320px; }
.rodic-pruh__vyber select { min-width: 200px; }
.rodice { list-style: none; margin: 0 0 16px; padding: 0; }
.rodice__polozka { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #E8ECF2; }
.rodice__polozka:first-child { border-top: 0; }
.rodice__polozka strong { display: block; font-weight: 500; }
.rodice__pozvat { max-width: 460px; }