/* Jediný stylesheet webu. Tokeny a pravidla podle schváleného návrhu (Session/CH1_design_output/tokens.md).
   CSP povoluje jen tento soubor – žádné inline styly v Razoru. */

/* ===== Písma (SIL OFL, soubory ve wwwroot/fonts) ===== */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  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: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2");
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  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: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2");
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  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;
}

/* ===== Tokeny ===== */
:root {
  --papir: #F3F4EF;
  --plocha: #FFFFFF;
  --inkoust: #17201A;
  --inkoust-2: #4A564E;
  --text-2: #2B342E;
  --na-tmavem: #D9DED8;
  --na-tmavem-2: #A9B4AC;
  --linka: #D5D9D1;
  --linka-jemna: #E6E9E3;
  --linka-carkovana: #C9CEC6;
  --linka-tmava: #2F3A33;
  --oddelovac-tmavy: #47524A;
  --okraj-pole: #8A958D;
  --okraj-tmavy: #5B665E;
  --ikona-prazdna: #A7B0A9;
  --zelen: #2D5B3C;
  --zelen-tmava: #244A30;
  --zelen-svetla: #E3ECE3;
  --okr: #C08A2E;
  --okr-jemny: #E5CD9B;
  --okr-svetly: #F6EBD3;
  --okr-text: #7A5310;
  --okr-na-tmavem: #E0B25A;
  --info: #2A5A86;
  --info-pozadi: #E2ECF5;
  --chyba: #A3322A;
  --chyba-pozadi: #F8E3E0;
  --chyba-na-tmavem: #F28B7D; /* červené upozornění na inkoustu, kontrast ≥ 4,5 : 1 */

  --pismo: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --zaobleni: 6px;
  --zaobleni-karta: 8px;
  --sirka-obsahu: 1200px;
  --vyska-hlavicky: 76px;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papir);
  color: var(--inkoust);
  font-family: var(--pismo);
  font-size: 17px;
  line-height: 1.6;
}

a {
  color: var(--zelen);
}

a:hover {
  color: var(--inkoust);
}

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

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

button {
  font: inherit;
}

[hidden] {
  display: none !important;
}

/* Cíle kotev nekončí pod lepící hlavičkou. */
[id] {
  scroll-margin-top: calc(var(--vyska-hlavicky) + 16px);
}

:focus-visible {
  outline: 2px solid var(--okr);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--okr-svetly);
  border-radius: var(--zaobleni);
}

.ikona {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ikona--18 {
  width: 18px;
  height: 18px;
  stroke-width: 1.4;
}

.ikona--22 {
  width: 22px;
  height: 22px;
  stroke-width: 1.5;
}

/* ===== Typografie ===== */
.claim {
  font-stretch: 75%;
  font-weight: 700;
  font-size: 64px;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.nadpis-stranky {
  font-stretch: 75%;
  font-weight: 700;
  font-size: 52px;
  line-height: 1.05;
}

.nadpis-sekce {
  font-stretch: 75%;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.1;
}

.nadpis-blok {
  font-size: 22px;
  font-weight: 650;
  line-height: 1.3;
}

.perex {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 32em;
  text-wrap: pretty;
}

.perex--uvod {
  font-size: 20px;
  line-height: 1.55;
}

.meta {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--inkoust-2);
}

.stitek-sekce {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--inkoust-2);
}

.stitek-sekce--na-tmavem {
  color: var(--na-tmavem-2);
  padding-bottom: 6px;
}

/* ===== Rozložení ===== */
.obsah {
  max-width: var(--sirka-obsahu);
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}

.stranka {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 32px 96px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.stranka__hlava {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.stranka__titul {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 760px;
}

/* ===== Tlačítka ===== */
.tlacitko {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--zaobleni);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
}

.tlacitko--primarni {
  background: var(--zelen);
  color: #FFFFFF;
  border-color: var(--zelen);
}

.tlacitko--primarni:hover {
  background: var(--zelen-tmava);
  border-color: var(--zelen-tmava);
  color: #FFFFFF;
}

.tlacitko--sekundarni {
  background: var(--plocha);
  color: var(--inkoust);
  border-color: var(--okraj-pole);
}

.tlacitko--sekundarni:hover {
  border-color: var(--inkoust);
  color: var(--inkoust);
}

/* Položky menu v rámečku: Pro dodavatele a Pro společníky */
.tlacitko--ramecek {
  min-height: 44px;
  padding: 0 16px;
  gap: 8px;
  font-size: 15px;
  background: transparent;
  color: var(--inkoust);
  border-color: var(--okraj-pole);
}

.tlacitko--ramecek:hover {
  border-color: var(--inkoust);
  color: var(--inkoust);
}

.tlacitko--ramecek[aria-current="page"] {
  background: var(--zelen-svetla);
  border-color: var(--zelen);
}

.tlacitko--ramecek .ikona {
  stroke-width: 1.4;
}

.tlacitko--na-tmavem {
  min-height: 40px;
  padding: 0 16px;
  font-size: 15px;
  background: transparent;
  color: var(--papir);
  border-color: var(--okraj-tmavy);
}

.tlacitko--na-tmavem:hover {
  border-color: var(--papir);
  color: #FFFFFF;
}

.tlacitka {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 6px;
}

/* ===== Hlavička veřejného webu (lepí nahoře) ===== */
.hlavicka {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--plocha);
  border-bottom: 1px solid var(--linka);
}

.hlavicka__vnitrek {
  min-height: var(--vyska-hlavicky);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--inkoust);
}

.logo:hover {
  color: var(--inkoust);
}

.logo__znacka {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

.logo__cara {
  stroke: currentColor;
}

.logo__cesta {
  stroke: var(--okr);
  stroke-dasharray: 3 3;
}

.logo__text {
  font-stretch: 75%;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.01em;
  line-height: 1;
}

.hlavicka__akce {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}

.navigace {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.navigace a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 14px 9px;
  color: var(--inkoust-2);
  text-decoration: none;
  border-bottom: 3px solid transparent;
}

.navigace a:hover {
  color: var(--inkoust);
}

.navigace a[aria-current="page"] {
  color: var(--inkoust);
  font-weight: 600;
  border-bottom-color: var(--okr);
}

.navigace-ramecky {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.menu-tlacitko {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  background: var(--plocha);
  color: var(--inkoust);
  border: 1px solid var(--okraj-pole);
  border-radius: var(--zaobleni);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.menu-tlacitko--tmave {
  background: var(--inkoust);
  color: var(--papir);
  border-color: var(--okraj-tmavy);
}

/* ===== Úvod ===== */
.uvod {
  padding-top: 72px;
  padding-bottom: 72px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
  gap: 48px;
  align-items: center;
}

.uvod__text {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.mapa img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--linka);
  border-radius: var(--zaobleni-karta);
}

/* ===== Stav projektu ===== */
.stav-projektu {
  background: var(--plocha);
  border-top: 1px solid var(--linka);
  border-bottom: 1px solid var(--linka);
}

.stav-projektu__vnitrek {
  padding-top: 56px;
  padding-bottom: 64px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.sekce-hlava {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 24px;
}

.harmonogram {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 24px 16px;
}

.harmonogram__polozka {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 4px solid var(--linka);
  padding-top: 16px;
}

.harmonogram__polozka.stav-realizace {
  border-top-color: var(--okr);
}

.harmonogram__polozka.stav-priprava {
  border-top-color: var(--okr-jemny);
}

.harmonogram__polozka.stav-dokonceno {
  border-top-color: var(--zelen);
}

.harmonogram__cislo {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--inkoust-2);
}

.harmonogram__nazev {
  font-size: 19px;
  font-weight: 650;
  line-height: 1.3;
}

.harmonogram__termin {
  font-size: 14px;
  color: var(--inkoust-2);
}

.panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 28px;
  background: var(--papir);
  border-radius: var(--zaobleni-karta);
}

.panel__text {
  font-size: 18px;
  line-height: 1.6;
  max-width: 46em;
  text-wrap: pretty;
}

.etapy-blok {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.etapy {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 12px;
}

/* Karta etapy na Úvodu je odkaz na etapu u dodavatelů. */
.etapa {
  border: 1px solid var(--linka);
  border-radius: var(--zaobleni-karta);
}

.etapa:hover {
  border-color: var(--okraj-pole);
}

.etapa.stav-nerealizuje {
  border-style: dashed;
  border-color: var(--linka-carkovana);
}

.etapa__odkaz {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  height: 100%;
  padding: 16px 18px;
  color: var(--inkoust);
  text-decoration: none;
}

.etapa__odkaz:hover {
  color: var(--inkoust);
}

.etapa .stav__ikona {
  width: 22px;
  height: 22px;
  margin-top: 2px;
}

.etapa__telo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.etapa__nazev {
  font-weight: 650;
  line-height: 1.35;
}

.stav-nerealizuje .etapa__nazev {
  color: var(--inkoust-2);
}

.etapa__stav {
  font-size: 14px;
  font-weight: 600;
  color: var(--inkoust-2);
}

.stav-priprava .etapa__stav,
.stav-realizace .etapa__stav {
  color: var(--okr-text);
}

.stav-dokonceno .etapa__stav {
  color: var(--zelen);
}

.etapa__poznamka {
  font-size: 15px;
  line-height: 1.45;
  color: var(--inkoust-2);
}

.etapa__sipka {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  stroke: var(--zelen);
}

/* ===== Stav (ikona + popisek) ===== */
.stav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--inkoust-2);
}

.stav.stav-priprava,
.stav.stav-realizace {
  color: var(--okr-text);
}

.stav.stav-dokonceno {
  color: var(--zelen);
}

.stav__ikona {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
}

.stav__obrys {
  stroke: var(--okraj-pole);
  stroke-width: 1.8;
}

.stav-priprava .stav__obrys,
.stav-realizace .stav__obrys {
  stroke: var(--okr);
}

.stav__vypln {
  fill: var(--okr);
}

.stav__plny {
  fill: var(--zelen);
}

.stav__fajfka {
  stroke: #FFFFFF;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stav__skrt {
  stroke: var(--okraj-pole);
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* ===== Pro dodavatele na Úvodu ===== */
.pro-dodavatele {
  padding-top: 72px;
  padding-bottom: 80px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 40px;
  align-items: start;
}

.pro-dodavatele__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.boxy {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 12px;
}

.box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px;
  background: var(--plocha);
  border: 1px solid var(--linka);
  border-radius: var(--zaobleni-karta);
  text-decoration: none;
  color: var(--inkoust);
}

.box:hover {
  border-color: var(--okraj-pole);
  color: var(--inkoust);
}

.box__nadpis {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 650;
}

.box__nadpis .ikona {
  width: 18px;
  height: 18px;
  stroke: var(--zelen);
}

.box__popis {
  color: var(--inkoust-2);
  font-size: 15px;
  line-height: 1.5;
}

/* ===== Patička (kontakt) ===== */
.paticka {
  background: var(--inkoust);
  color: var(--na-tmavem);
}

.paticka a {
  color: var(--na-tmavem);
  text-decoration: none;
}

.paticka a:hover {
  color: #FFFFFF;
}

.paticka__vnitrek {
  padding-top: 56px;
  padding-bottom: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 32px;
}

.paticka__blok {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  font-size: 15px;
}

.paticka__blok a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
}

.paticka__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
  color: var(--papir);
  font-stretch: 75%;
  font-weight: 700;
  font-size: 22px;
}

.paticka__logo .logo__znacka {
  width: 28px;
  height: 28px;
}

.paticka .logo__cesta {
  stroke: var(--okr-na-tmavem);
}

.paticka__ucet {
  font-family: var(--mono);
  font-size: 18px;
  color: var(--papir);
}

.paticka__upozorneni {
  color: var(--chyba-na-tmavem);
  font-weight: 600;
  line-height: 1.5;
  max-width: 30em;
}

.paticka a.paticka__odkaz-ucet,
.paticka a.paticka__vstup {
  color: var(--okr-na-tmavem);
  font-weight: 600;
}

.paticka a.paticka__odkaz-ucet:hover,
.paticka a.paticka__vstup:hover {
  color: #FFFFFF;
}

.paticka__spodek {
  padding-bottom: 32px;
}

.paticka__spodek p {
  padding-top: 20px;
  border-top: 1px solid var(--linka-tmava);
  font-size: 14px;
  color: var(--na-tmavem-2);
}

/* ===== Stránka pro dodavatele ===== */
.drobecky {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--inkoust-2);
}

.kotvy {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 12px;
}

.kotva {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 22px;
  background: var(--plocha);
  border: 1px solid var(--linka);
  border-radius: var(--zaobleni-karta);
  text-decoration: none;
  color: var(--inkoust);
}

.kotva:hover {
  border-color: var(--okraj-pole);
  color: var(--inkoust);
}

.kotva__cislo {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--okr-text);
}

.kotva__nazev {
  font-size: 20px;
  font-weight: 650;
  line-height: 1.3;
}

.kotva__popis {
  font-size: 16px;
  color: var(--inkoust-2);
}

.sekce {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sekce__uvod {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 760px;
}

.karta {
  background: var(--plocha);
  border: 1px solid var(--linka);
  border-radius: var(--zaobleni-karta);
}

/* Rozbalitelné etapy a skupiny dokumentace (nativní details) */
.etapy-detaily,
.skupiny {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.etapa-detail,
.skupina {
  background: var(--plocha);
  border: 1px solid var(--linka);
  border-radius: var(--zaobleni-karta);
}

.etapa-detail.stav-nerealizuje {
  border-style: dashed;
  border-color: var(--linka-carkovana);
}

.etapa-detail__hlava,
.skupina__hlava {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 12px 24px;
  list-style: none;
  cursor: pointer;
}

.etapa-detail--bez-obsahu .etapa-detail__hlava {
  cursor: default;
}

.etapa-detail__hlava::-webkit-details-marker,
.skupina__hlava::-webkit-details-marker {
  display: none;
}

.etapa-detail__hlava .stav__ikona {
  width: 24px;
  height: 24px;
}

.etapa-detail__titul {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.etapa-detail__nazev {
  font-size: 19px;
  font-weight: 650;
  line-height: 1.3;
}

.stav-nerealizuje .etapa-detail__nazev {
  color: var(--inkoust-2);
}

.etapa-detail__stav {
  font-size: 15px;
  font-weight: 600;
  color: var(--inkoust-2);
}

.stav-priprava .etapa-detail__stav,
.stav-realizace .etapa-detail__stav {
  color: var(--okr-text);
}

.stav-dokonceno .etapa-detail__stav {
  color: var(--zelen);
}

.etapa-detail__sipka,
.skupina__sipka {
  width: 18px;
  height: 18px;
  stroke: var(--zelen);
  stroke-width: 1.8;
  transition: transform 0.15s ease;
}

.etapa-detail[open] .etapa-detail__sipka,
.skupina[open] .skupina__sipka {
  transform: rotate(90deg);
}

.etapa-detail__telo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 24px 20px 64px;
}

.etapa-detail__poznamka {
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 46em;
}

.etapa-detail__soubory,
.etapa-detail__dalsi {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.skupina__hlava {
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 16px;
}

.skupina__nazev {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 650;
  font-size: 19px;
}

.skupina__poznamka {
  padding: 0 24px 12px 52px;
  font-size: 16px;
  color: var(--okr-text);
}

.soubory--skupina {
  padding: 0 24px 8px 52px;
}

.soubor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  min-height: 52px;
  padding: 4px 0;
  border-top: 1px solid var(--linka-jemna);
}

.soubor__nazev {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 17px;
}

.soubor__nazev .ikona {
  stroke: var(--inkoust-2);
}

.soubor__kod {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--inkoust-2);
  margin-right: 4px;
}

.soubor__akce {
  display: flex;
  align-items: center;
  gap: 16px;
}

.soubor__meta {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--inkoust-2);
}

.soubor__stahnout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-weight: 600;
  font-size: 16px;
  color: var(--zelen);
}

.tabulka-box {
  overflow-x: auto;
}

.tabulka {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  font-size: 18px;
}

.tabulka th,
.tabulka td {
  text-align: left;
  padding: 16px 24px;
  border-bottom: 1px solid var(--linka-jemna);
}

.tabulka thead th {
  padding: 14px 24px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--inkoust-2);
  border-bottom: 1px solid var(--linka);
}

.tabulka tbody th {
  font-weight: 600;
}

.tabulka tbody tr:last-child th,
.tabulka tbody tr:last-child td {
  border-bottom: 0;
}

/* Kontakt na stavbyvedoucího a stavební povolení (tmavá karta) */
.kontakt-karta {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px 48px;
  padding: 40px;
  background: var(--inkoust);
  color: var(--na-tmavem);
  border-radius: var(--zaobleni-karta);
}

.kontakt-karta .nadpis-sekce {
  color: var(--papir);
}

.kontakt-karta .perex {
  color: var(--na-tmavem);
  font-size: 19px;
  line-height: 1.5;
  max-width: none;
}

.kontakt-karta__text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 320px;
  min-width: 0;
}

.kontakt-karta__bloky {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 48px;
  flex: 1 1 520px;
  min-width: 0;
}

.kontakt-karta__osoba {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 240px;
  min-width: 0;
}

.kontakt-karta__jmeno {
  font-size: 20px;
  font-weight: 650;
  color: var(--papir);
}

.kontakt-karta__funkce {
  font-size: 15px;
  color: var(--na-tmavem-2);
}

.kontakt-karta__telefon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding-top: 6px;
  color: var(--okr-na-tmavem);
  font-size: 26px;
  font-weight: 700;
}

.kontakt-karta__email {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--okr-na-tmavem);
  font-size: 18px;
  font-weight: 600;
}

.povoleni {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 260px;
  min-width: 0;
}

.povoleni__seznam {
  display: flex;
  flex-direction: column;
}

.povoleni__radek {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--linka-tmava);
}

.povoleni__radek:last-child {
  border-bottom: 0;
}

.povoleni dt {
  flex: 0 0 150px;
  font-size: 14px;
  color: var(--na-tmavem-2);
}

.povoleni dd {
  flex: 1 1 160px;
  font-size: 16px;
  font-weight: 600;
  color: var(--papir);
}

/* ===== Prosté rozložení (přihlášení, chybové stránky) ===== */
.prosty {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.prosta-hlavicka {
  background: var(--plocha);
  border-bottom: 1px solid var(--linka);
}

.prosta-hlavicka__vnitrek {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.prosta-hlavicka__odkaz {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--zelen);
  font-weight: 600;
  text-decoration: none;
}

.prosty-obsah {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 80px 24px 64px;
}

.prosta-paticka {
  border-top: 1px solid var(--linka);
  font-size: 14px;
  color: var(--inkoust-2);
}

.prosta-paticka .obsah {
  padding-top: 24px;
  padding-bottom: 24px;
}

.prihlaseni {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.prihlaseni__hlava {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.prihlaseni__nadpis {
  font-stretch: 75%;
  font-weight: 700;
  font-size: 44px;
  line-height: 1.05;
}

.formular {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px;
}

.formular__pole {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.formular__pole label {
  font-size: 15px;
  font-weight: 600;
}

.pole {
  min-height: 48px;
  padding: 0 14px;
  font: inherit;
  font-size: 17px;
  color: var(--inkoust);
  background: var(--plocha);
  border: 1px solid var(--okraj-pole);
  border-radius: var(--zaobleni);
}

.pole:focus-visible {
  outline: 3px solid var(--okr-svetly);
  outline-offset: 0;
  box-shadow: none;
  border: 2px solid var(--okr);
  padding: 0 13px;
}

.hlaska {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--zaobleni);
  font-size: 16px;
  line-height: 1.45;
}

.hlaska--chyba {
  background: var(--chyba-pozadi);
  color: var(--chyba);
}

.hlaska .ikona {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  stroke-width: 1.8;
}

.poznamka {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  color: var(--inkoust-2);
}

.poznamka .ikona {
  margin-top: 1px;
  stroke-width: 1.4;
}

.chyba {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.chyba__kod {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--inkoust-2);
}

.chyba__kod--okr {
  color: var(--okr-text);
}

.chyba__kod--chyba {
  color: var(--chyba);
}

.chyba__nadpis {
  font-stretch: 75%;
  font-weight: 700;
  font-size: 34px;
  line-height: 1.1;
}

.chyba__text {
  color: var(--text-2);
  max-width: 30em;
}

.chyba .tlacitko {
  align-self: flex-start;
  margin-top: 6px;
}

/* ===== Portál ===== */
.portal {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.portal-hlavicka {
  background: var(--inkoust);
  color: var(--papir);
  border-bottom: 3px solid var(--okr);
}

.portal-hlavicka__vnitrek {
  min-height: 64px;
  padding: 10px 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
}

.logo--portal {
  gap: 12px;
  color: var(--papir);
}

.logo--portal:hover {
  color: var(--papir);
}

.logo--portal .logo__znacka {
  width: 28px;
  height: 28px;
}

.logo--portal .logo__cesta {
  stroke: var(--okr-na-tmavem);
}

.logo--portal .logo__text {
  font-size: 22px;
}

.logo__oddelovac {
  width: 1px;
  height: 22px;
  background: var(--oddelovac-tmavy);
}

.logo__popisek {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--okr-na-tmavem);
}

.portal-hlavicka__akce {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
}

.portal-hlavicka__web {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--na-tmavem);
  text-decoration: none;
  font-size: 15px;
}

.portal-hlavicka__web:hover {
  color: #FFFFFF;
}

.uzivatel {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
}

.portal-hlavicka .uzivatel .ikona {
  stroke: var(--na-tmavem);
}

.stitek {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}

.stitek--jednatel {
  background: var(--okr-svetly);
  color: var(--okr-text);
}

.stitek--spolecnik {
  background: var(--zelen-svetla);
  color: var(--zelen);
}

.odhlaseni {
  margin: 0;
  display: flex;
}

.portal-telo {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.portal-menu {
  flex: 1 1 260px;
  max-width: 300px;
  background: var(--plocha);
  border-right: 1px solid var(--linka);
  padding: 16px 12px 32px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.portal-menu__skupina {
  padding: 18px 14px 6px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--inkoust-2);
}

.portal-menu__skupina:first-child {
  padding-top: 12px;
}

.portal-menu__skupina--jednatel {
  margin-top: 14px;
  border-top: 1px solid var(--linka);
  padding-top: 16px;
  color: var(--okr-text);
}

.portal-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--zaobleni);
  color: var(--text-2);
  text-decoration: none;
  font-size: 16px;
}

.portal-menu a:hover {
  background: var(--papir);
  color: var(--inkoust);
}

.portal-menu a[aria-current="page"] {
  background: var(--zelen-svetla);
  color: var(--inkoust);
  font-weight: 650;
}

.portal-menu a[aria-current="page"]::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-radius: 999px;
  background: var(--zelen);
  flex: 0 0 auto;
}

.portal-menu a .ikona {
  width: 18px;
  height: 18px;
  stroke: var(--okr-text);
  stroke-width: 1.5;
}

.portal-menu__uzivatel {
  display: none;
}

.portal-obsah {
  flex: 999 1 560px;
  min-width: 0;
  padding: 40px 48px 64px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.portal-hlava {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.portal-hlava .nadpis-stranky {
  font-size: 48px;
}

.dlazdice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 20px;
  align-items: start;
}

.karta--blok {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}

.karta__hlava {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 16px;
}

.karta__nadpis {
  font-stretch: 75%;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
}

.prazdny-stav {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 0 8px;
  color: var(--inkoust-2);
}

.prazdny-stav__ikona {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--ikona-prazdna);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.prazdny-stav__ram {
  stroke: var(--linka);
  stroke-width: 1.5;
}

.stav-seznam {
  display: flex;
  flex-direction: column;
}

.stav-seznam__polozka {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  border-bottom: 1px solid var(--linka-jemna);
}

.stav-seznam__polozka:last-child {
  border-bottom: 0;
}

.stav-seznam__nazev {
  flex: 1 1 auto;
  font-weight: 650;
}

.stav-seznam .stav {
  font-size: 14px;
  gap: 6px;
}

.stav-seznam .stav__ikona {
  width: 18px;
  height: 18px;
}

.portal-obsah .chyba {
  flex: 1 1 auto;
  justify-content: center;
}

/* ===== Mobil (pod 720 px): jeden sloupec, navigace za tlačítkem Menu v lepící liště ===== */
@media (max-width: 719px) {
  :root {
    --vyska-hlavicky: 64px;
  }

  .obsah {
    padding-left: 20px;
    padding-right: 20px;
  }

  .claim {
    font-size: 42px;
  }

  .nadpis-stranky,
  .portal-hlava .nadpis-stranky {
    font-size: 38px;
  }

  .nadpis-sekce {
    font-size: 30px;
  }

  .perex--uvod {
    font-size: 18px;
  }

  .nadpis-blok {
    font-size: 20px;
  }

  .tlacitka {
    flex-direction: column;
    gap: 10px;
  }

  .tlacitka .tlacitko {
    width: 100%;
  }

  /* Hlavička webu */
  .logo__znacka {
    width: 28px;
    height: 28px;
  }

  .logo__text {
    font-size: 22px;
  }

  .menu-tlacitko:not([hidden]) {
    display: flex;
  }

  .hlavicka__akce {
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0 20px;
    border-top: 1px solid var(--linka-jemna);
  }

  .js .hlavicka__akce:not(.je-otevrene) {
    display: none;
  }

  .navigace {
    flex-direction: column;
    gap: 0;
  }

  .navigace a {
    min-height: 48px;
    padding: 0 12px;
    border-bottom: 0;
    border-radius: var(--zaobleni);
    color: var(--text-2);
  }

  .navigace a[aria-current="page"] {
    background: var(--zelen-svetla);
    color: var(--inkoust);
    font-weight: 650;
  }

  .navigace-ramecky {
    flex-direction: column;
    gap: 10px;
    margin: 12px 12px 0;
  }

  .navigace-ramecky .tlacitko--ramecek {
    min-height: 48px;
    justify-content: center;
  }

  .navigace-ramecky .tlacitko--ramecek-vstup {
    background: var(--inkoust);
    color: var(--papir);
    border-color: var(--inkoust);
  }

  .navigace-ramecky .tlacitko--ramecek-vstup .ikona {
    display: none;
  }

  /* Úvod */
  .uvod {
    padding-top: 36px;
    padding-bottom: 32px;
    gap: 16px;
  }

  .uvod__text {
    gap: 16px;
  }

  .mapa {
    margin-top: 8px;
  }

  .stav-projektu__vnitrek {
    padding-top: 28px;
    padding-bottom: 28px;
    gap: 18px;
  }

  .sekce-hlava {
    flex-direction: column;
    gap: 2px;
  }

  .sekce-hlava .meta {
    font-size: 13px;
  }

  .harmonogram {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .harmonogram__polozka {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 0;
    border-top: 0;
    border-bottom: 1px solid var(--linka-jemna);
  }

  .harmonogram__polozka:last-child {
    border-bottom: 0;
  }

  .harmonogram__cislo {
    width: 20px;
  }

  .harmonogram__nazev {
    flex: 1 1 auto;
    font-size: 17px;
  }

  .harmonogram .stav {
    font-size: 14px;
    gap: 6px;
  }

  .harmonogram .stav__ikona {
    width: 18px;
    height: 18px;
  }

  .harmonogram__termin {
    display: none;
  }

  .panel {
    padding: 18px;
  }

  .panel__text {
    font-size: 17px;
  }

  .etapy {
    gap: 8px;
  }

  .etapa__odkaz {
    padding: 14px 16px;
    gap: 12px;
  }

  .etapa .stav__ikona {
    width: 20px;
    height: 20px;
  }

  .pro-dodavatele {
    padding-top: 32px;
    padding-bottom: 36px;
    gap: 14px;
  }

  .boxy {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--plocha);
    border: 1px solid var(--linka);
    border-radius: var(--zaobleni-karta);
  }

  .box {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    min-height: 56px;
    padding: 0 16px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--linka-jemna);
    border-radius: 0;
  }

  .box:last-child {
    border-bottom: 0;
  }

  .box__nadpis {
    flex: 1 1 auto;
    font-size: 17px;
    font-weight: 600;
  }

  .box__popis {
    display: none;
  }

  .paticka__vnitrek {
    padding-top: 28px;
    padding-bottom: 8px;
    gap: 20px;
  }

  .paticka__spodek {
    padding-bottom: 24px;
  }

  /* Stránka pro dodavatele */
  .stranka {
    padding: 28px 20px 64px;
    gap: 40px;
  }

  .etapa-detail__hlava,
  .skupina__hlava {
    padding: 12px 16px;
    gap: 12px;
    min-height: 56px;
  }

  .etapa-detail__telo {
    padding: 0 16px 16px;
  }

  .skupina__poznamka,
  .soubory--skupina {
    padding-left: 16px;
    padding-right: 16px;
  }

  .soubor__akce {
    width: 100%;
    justify-content: space-between;
  }

  .tabulka th,
  .tabulka td {
    padding: 12px 16px;
  }

  .kontakt-karta {
    padding: 24px 20px;
  }

  .kontakt-karta__bloky {
    flex-direction: column;
    gap: 20px;
  }

  /* Přihlášení a chyby */
  .prosta-hlavicka__vnitrek {
    min-height: 64px;
  }

  .prosty-obsah {
    padding: 32px 20px;
    align-items: stretch;
  }

  .prihlaseni__nadpis {
    font-size: 38px;
  }

  .formular {
    padding: 22px 20px;
    gap: 18px;
  }

  .pole,
  .formular .tlacitko {
    min-height: 52px;
  }

  .chyba__nadpis {
    font-size: 30px;
  }

  /* Portál */
  .portal-hlavicka__vnitrek {
    min-height: 60px;
    padding: 8px 16px 8px 20px;
  }

  .logo--portal {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 10px;
    row-gap: 2px;
    align-items: center;
  }

  .logo--portal .logo__znacka {
    grid-row: 1 / 3;
    width: 26px;
    height: 26px;
  }

  .logo--portal .logo__text {
    font-size: 19px;
  }

  .logo__oddelovac {
    display: none;
  }

  .logo__popisek {
    font-size: 11px;
  }

  .portal-hlavicka__akce {
    display: none;
  }

  .portal-telo {
    flex-direction: column;
  }

  .portal-menu {
    flex: 0 0 auto;
    max-width: none;
    border-right: 0;
    border-bottom: 1px solid var(--linka);
    padding: 8px 12px 16px;
  }

  .js .portal-menu:not(.je-otevrene) {
    display: none;
  }

  .portal-menu a {
    min-height: 48px;
    padding: 0 12px;
  }

  .portal-menu__uzivatel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding: 14px 12px 0;
    border-top: 1px solid var(--linka);
  }

  .portal-menu__uzivatel .uzivatel .ikona {
    display: none;
  }

  .portal-menu__uzivatel .tlacitko--na-tmavem {
    min-height: 44px;
    color: var(--inkoust);
    border-color: var(--okraj-pole);
  }

  .portal-obsah {
    padding: 28px 20px 40px;
    gap: 16px;
  }

  .dlazdice {
    gap: 12px;
  }

  .karta--blok {
    padding: 20px;
    gap: 10px;
  }

  .karta__nadpis {
    font-size: 22px;
  }

  .prazdny-stav {
    padding: 0;
  }

  .prazdny-stav__ikona {
    display: none;
  }
}