/*
  Veřejná úvodní stránka.

  Záměr: má působit jako tiskovina ze stavebního oboru — technický výkres, formulář, razítko —
  ne jako další softwarová landing page. Proto úzký grotesk v nadpisech, tenké linky místo
  stínů, jediná akcentová barva a žádné karty s barevným proužkem vlevo.
*/
:root{
  --u-tmava:#1c2229;
  --u-tmava-2:#2a323b;
  --u-papir:#f4f2ee;        /* papír / beton */
  --u-papir-2:#e8e5df;
  --u-linka:#cdc8be;
  --u-linka-2:#dcd8d0;
  --u-zluta:#e8a317;        /* výstražná – používá se střídmě, jako razítko */
  --u-text:#31383f;
  --u-text-2:#5d6670;
  --u-nadpis:'IBM Plex Sans Condensed',var(--font);
}
body.uvod{background:var(--u-papir);color:var(--u-text);
  font-family:'IBM Plex Sans',var(--font);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased}
.uvod h1,.uvod h2,.uvod h3{font-family:var(--u-nadpis);font-weight:700;letter-spacing:-.005em;color:var(--u-tmava)}
.uvod p{margin:0 0 1rem}
.uvod a{color:var(--u-tmava)}
.uvod strong{font-weight:600}

/* Souvislé odstavce do bloku s dělením slov. Čeština má dlouhá slova a v širším sloupci
   by bez dělení vznikaly díry mezi slovy. */
.uvod .u-lead,.uvod .u-kroky p,.uvod .u-dva p,.uvod .u-pozn,.uvod .u-list-text,
.uvod .u-srovnani td,.uvod .u-zaver p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
/* Pod ~34 znaky na řádek dělá zarovnání do bloku pravý opak: mezery se roztáhnou přes
   půl řádku. Na telefonu tedy doleva. */
@media(max-width:620px){
  .uvod .u-lead,.uvod .u-kroky p,.uvod .u-dva p,.uvod .u-pozn,.uvod .u-list-text,
  .uvod .u-srovnani td,.uvod .u-zaver p{text-align:left}
}

.u-obal{max-width:1080px;margin:0 auto;padding:0 1.5rem}

/* ---------- hlavička ---------- */
.u-hlavicka{background:var(--u-tmava);color:#fff}
.u-hlavicka-obal{max-width:1080px;margin:0 auto;padding:.85rem 1.5rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem}
.u-znacka{display:flex;align-items:center;gap:.75rem;color:#fff}
.u-znacka:hover{text-decoration:none}
.u-znacka-mark{display:grid;place-items:center;width:38px;height:38px;flex:none;
  border:2px solid var(--u-zluta);color:var(--u-zluta);
  font-family:var(--u-nadpis);font-weight:700;font-size:1.05rem;letter-spacing:.04em}
.u-znacka-text{display:flex;flex-direction:column;line-height:1.2;font-family:var(--u-nadpis);
  font-weight:600;font-size:1.12rem;letter-spacing:.01em}
.u-znacka-text small{font-family:'IBM Plex Sans',var(--font);font-weight:400;font-size:.72rem;
  color:#9aa3ad;letter-spacing:.02em}
.u-nav{display:flex;align-items:center;gap:1.4rem}
.u-nav>a:not(.u-btn){color:#c2c9d1;font-size:.92rem;font-weight:400}
.u-nav>a:not(.u-btn):hover{color:#fff;text-decoration:none}

/* tlačítka – hranatá, bez stínů a bez přechodů */
.u-btn{display:inline-block;padding:.62rem 1.15rem;border:1px solid transparent;
  font-family:'IBM Plex Sans',var(--font);font-weight:600;font-size:.94rem;line-height:1.3;
  cursor:pointer;border-radius:2px}
.u-btn:hover{text-decoration:none}
.u-btn-hlavni{background:var(--u-zluta);color:var(--u-tmava);border-color:var(--u-zluta)}
.u-btn-hlavni:hover{background:#d3930f;border-color:#d3930f}
/* Obrysové tlačítko dědí barvu z okolí. Musí přebít .uvod a{color:…}, jinak je na tmavém
   pozadí tmavý text na tmavém — tlačítko pak vypadá jako prázdné místo. */
.u-btn-obrys{background:transparent;border-color:currentColor;opacity:.8}
.u-btn-obrys:hover{opacity:1}
.uvod a.u-btn-obrys{color:var(--u-tmava)}
.u-hero a.u-btn-obrys,.u-hlavicka a.u-btn-obrys,.u-sekce-tmava a.u-btn-obrys{color:#fff}
.u-btn-lg{padding:.8rem 1.6rem;font-size:1rem}

@media(max-width:820px){
  .u-nav>a:not(.u-btn){display:none}
  .u-znacka-text small{display:none}
}
/* Na telefonu se do hlavičky obě tlačítka nevejdou na jeden řádek a každé se zalomí
   doprostřed. Přihlášení je hned pod tím v heru, takže v hlavičce zbude jen registrace. */
@media(max-width:560px){
  .u-hlavicka .u-btn-obrys{display:none}
  .u-znacka-text{font-size:1rem}
  .u-btn{padding:.55rem .9rem;font-size:.9rem}
}

/* ---------- hero ---------- */
.u-hero{background:var(--u-tmava);color:#e9ecef;padding:3.5rem 0 4rem;
  border-bottom:6px solid var(--u-zluta)}
.u-hero-mrizka{display:grid;gap:2.5rem;align-items:center}
@media(min-width:940px){.u-hero-mrizka{grid-template-columns:1.1fr .9fr;gap:3.5rem}}
.u-hero h1{color:#fff;font-size:2.35rem;line-height:1.08;margin:0 0 1.1rem}
@media(min-width:940px){.u-hero h1{font-size:3.4rem}}
.u-hero .u-lead{font-size:1.1rem;color:#b9c1ca;max-width:33rem;margin-bottom:1.8rem}
.u-stitek{display:inline-block;font-size:.74rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--u-zluta);margin-bottom:1.1rem}
.u-cta{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
.u-hero .u-drobne{font-size:.85rem;color:#8b949e;margin:1.1rem 0 0}

/* ---------- ukázka deníkového listu ---------- */
.u-list{margin:0;background:#fff;color:var(--u-text);border:1px solid var(--u-linka)}
.u-list-hlavicka{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;
  padding:.65rem .9rem;border-bottom:2px solid var(--u-tmava);
  font-family:var(--u-nadpis);font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.07em}
.u-list-cislo{font-family:'IBM Plex Sans',var(--font);font-weight:400;font-size:.78rem;
  color:var(--u-text-2);text-transform:none;letter-spacing:0}
.u-list-tab{width:100%;border-collapse:collapse;font-size:.855rem}
.u-list-tab th,.u-list-tab td{border-bottom:1px solid var(--u-linka-2);padding:.44rem .9rem;
  text-align:left;vertical-align:top}
.u-list-tab th{width:34%;font-family:'IBM Plex Sans',var(--font);font-weight:400;
  font-size:.78rem;color:var(--u-text-2);text-transform:uppercase;letter-spacing:.05em}
.u-list-text{line-height:1.5}
.u-list-pata{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;
  padding:1.5rem .9rem .9rem}
.u-podpis-linka{border-top:1px solid var(--u-tmava);padding-top:.3rem;font-size:.8rem;min-width:11rem}
.u-otisk{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.68rem;
  color:var(--u-text-2);margin-top:.4rem;word-break:break-all}
.u-razitko{flex:none;border:2px solid #2e7d52;color:#2e7d52;padding:.35rem .65rem;text-align:center;
  font-family:var(--u-nadpis);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;
  transform:rotate(-3deg);line-height:1.35}
.u-list figcaption{padding:.6rem .9rem .8rem;font-size:.78rem;color:var(--u-text-2);
  border-top:1px solid var(--u-linka-2);background:#faf9f7}

/* ---------- sekce ---------- */
.u-sekce{padding:4rem 0}
.u-sekce-bila{background:#fff;border-block:1px solid var(--u-linka)}
.u-nadpis-sekce{margin-bottom:2rem;padding-bottom:.9rem;border-bottom:1px solid var(--u-linka)}
.u-nadpis-sekce h2{font-size:1.8rem;margin:0}
.u-nadpis-sekce p{margin:.5rem 0 0;color:var(--u-text-2);max-width:44rem}

/* srovnání dřív / teď – jedna tabulka, žádné karty */
.u-srovnani{width:100%;border-collapse:collapse;font-size:.95rem}
.u-srovnani th{text-align:left;font-family:var(--u-nadpis);font-weight:700;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.09em;color:var(--u-text-2);
  padding:0 1.2rem .6rem 0;border-bottom:2px solid var(--u-tmava)}
.u-srovnani td{padding:.85rem 1.2rem .85rem 0;border-bottom:1px solid var(--u-linka-2);
  vertical-align:top;line-height:1.55}
.u-srovnani td:first-child{width:44%;color:var(--u-text-2)}
.u-srovnani td:last-child{padding-right:0;color:var(--u-tmava)}
.u-srovnani tr:last-child td{border-bottom:0}
@media(max-width:760px){
  .u-srovnani,.u-srovnani tbody,.u-srovnani tr,.u-srovnani td{display:block;width:auto}
  .u-srovnani thead{display:none}
  .u-srovnani tr{padding:.9rem 0;border-bottom:1px solid var(--u-linka-2)}
  .u-srovnani td{padding:0;border:0}
  .u-srovnani td:first-child{width:auto;font-size:.88rem;margin-bottom:.3rem}
  .u-srovnani td:first-child::before{content:'Dřív: ';color:#9aa1ab}
  .u-srovnani td:last-child::before{content:'Teď: ';font-weight:600}
}
.u-pozn{color:var(--u-text-2);font-size:.9rem;margin-top:1.5rem;max-width:50rem;
  padding-top:1rem;border-top:1px solid var(--u-linka-2)}

/* postup dne – číslovaný sloupec, ne karty */
.u-kroky{list-style:none;counter-reset:krok;margin:0;padding:0;display:grid;gap:0}
@media(min-width:860px){.u-kroky{grid-template-columns:1fr 1fr;column-gap:3rem}}
.u-kroky li{counter-increment:krok;display:grid;grid-template-columns:2.6rem 1fr;
  gap:0 1rem;padding:1.3rem 0;border-top:1px solid var(--u-linka-2)}
.u-kroky li::before{content:counter(krok,decimal-leading-zero);grid-row:1/3;
  font-family:var(--u-nadpis);font-weight:700;font-size:1.35rem;color:var(--u-zluta);line-height:1.15}
.u-kroky h3{font-size:1.08rem;margin:0 0 .3rem}
.u-kroky p{margin:0;color:var(--u-text-2);font-size:.94rem}

/* předání */
.u-dva{display:grid;gap:2rem}
@media(min-width:860px){.u-dva{grid-template-columns:1fr 1fr;gap:3.5rem}}
.u-dva h3{font-size:1.15rem;margin-bottom:.5rem}
.u-dva p{margin:0}
.u-sekce-tmava{background:var(--u-tmava);color:#c3c9d1}
.u-sekce-tmava .u-nadpis-sekce{border-bottom-color:#3b434d}
.u-sekce-tmava h2,.u-sekce-tmava h3{color:#fff}
.u-sekce-tmava .u-nadpis-sekce p{color:#9aa3ad}
.u-paragraf{margin-top:2.5rem;padding-top:1.2rem;border-top:1px solid #3b434d;
  font-size:.88rem;color:#8b949e;max-width:52rem}

/* závěr */
.u-zaver{background:#fff;border-top:1px solid var(--u-linka);padding:3.5rem 0}
.u-zaver-mrizka{display:grid;gap:2rem;align-items:start}
@media(min-width:860px){.u-zaver-mrizka{grid-template-columns:1.2fr .8fr;gap:4rem}}
.u-zaver h2{font-size:1.7rem;margin-bottom:.8rem}
.u-zaver p{color:var(--u-text-2)}
.u-zaver .u-cta{margin-top:1.4rem}

/* patička */
.u-pata{background:var(--u-tmava);color:#8b949e;padding:2rem 0;font-size:.87rem}
.u-pata-mrizka{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.u-pata a{color:#c2c9d1}
.u-pata a:hover{color:#fff}
.u-pata-odkazy{display:flex;gap:1.2rem;flex-wrap:wrap}

/* právní stránky */
.u-pravni{max-width:46rem;margin:0 auto;padding:3rem 1.5rem 4rem;background:#fff}
.u-pravni h1{font-size:2rem;margin-bottom:.3rem}
.u-pravni h2{font-size:1.2rem;margin:2.2rem 0 .7rem;padding-top:1.2rem;border-top:1px solid var(--u-linka-2)}
.u-pravni h2:first-of-type{border-top:0;padding-top:0;margin-top:1.8rem}
.u-pravni p,.u-pravni li{line-height:1.7}
.u-pravni ul{padding-left:1.2rem}
.u-pravni li{margin-bottom:.5rem}
.u-pravni-datum{color:var(--u-text-2);font-size:.88rem;margin-bottom:2rem}
.u-pravni-uvod{font-size:1.05rem;color:var(--u-text-2);padding-bottom:.5rem}
.u-pravni-pozn{font-size:.9rem;color:var(--u-text-2);margin-top:2rem;padding-top:1rem;
  border-top:1px solid var(--u-linka-2)}
.u-pravni .table{font-size:.9rem;margin:1rem 0 1.5rem}
.u-pravni .table th{background:var(--u-papir);font-family:var(--u-nadpis);font-weight:700;
  font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}
html{scroll-padding-top:1rem}