/* Klientský web kreco.cz. Barvy značky (SPEC 19): černá, žlutá, bílá.
   Žlutá jen jako plocha, tlačítko nebo detail – text na ní vždy černý,
   žlutý text na světlém pozadí nikde. Písmo systémové (žádné cizí servery). */
:root {
  color-scheme: light dark;
  --cerna: #0d0d0d;
  --zluta: #f2c200;
  --zluta-hover: #dcb000;
  --bg: #f4f4f2;
  --plocha: #ffffff;
  --text: #0d0d0d;
  --tlumeny: #585c61;
  --linka: #dcdbd6;
  --odkaz: #0d0d0d;
  --znak-telo: #0d0d0d;
  --znak-akcent: #f2c200;
  --znak-naradi: #ffffff;
  --stitek-bg: #0d0d0d;
  --stitek-text: #ffffff;
  --ok-bg: #e7f5ea;
  --ok-text: #14532d;
  --chyba-bg: #fdecea;
  --chyba-text: #7f1d1d;
  --chyba-linka: #b42318;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101011;
    --plocha: #19191b;
    --text: #f3f3f1;
    --tlumeny: #a3a3a8;
    --linka: #34343a;
    --odkaz: #f3f3f1;
    --znak-telo: #f2c200;
    --znak-akcent: #0d0d0d;
    --znak-naradi: #0d0d0d;
    --stitek-bg: #f3f3f1;
    --stitek-text: #0d0d0d;
    --ok-bg: #12301c;
    --ok-text: #c9efd3;
    --chyba-bg: #3a1413;
    --chyba-text: #ffd7d3;
    --chyba-linka: #ff8a80;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.obal { max-width: 1040px; margin: 0 auto; padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
h1, h2, h3 { text-wrap: balance; letter-spacing: -0.015em; line-height: 1.15; margin: 0; }
h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 800; }
h3 { font-size: 1.05rem; font-weight: 700; }
p { margin: 0; }
a { color: var(--odkaz); text-underline-offset: 2px; }
:focus-visible { outline: 3px solid var(--zluta); outline-offset: 2px; }
[hidden] { display: none !important; }
section[id], main[id] { scroll-margin-top: 72px; }

.preskocit { position: absolute; left: -9999px; top: 8px; z-index: 10; background: var(--zluta); color: var(--cerna); padding: 8px 12px; border-radius: 8px; }
.preskocit:focus { left: 8px; }

/* Znak – barvy přes třídy, na tmavé ploše negativ */
.znak { flex: none; display: block; }
.z-telo { fill: var(--znak-telo); }
.z-akcent { fill: var(--znak-akcent); }
.z-naradi { fill: var(--znak-naradi); }
.uvod, .paticka { --znak-telo: #f2c200; --znak-akcent: #0d0d0d; --znak-naradi: #0d0d0d; }

/* Hlavička */
.hlavicka { background: var(--plocha); border-bottom: 1px solid var(--linka); position: sticky; top: 0; z-index: 5; padding-top: env(safe-area-inset-top, 0px); }
.hlavicka .obal { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 10px; }
.znacka { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.znacka b { display: block; font-size: 1rem; letter-spacing: 0.01em; }
.znacka small { display: block; color: var(--tlumeny); font-size: 0.8rem; }

.tlacitko {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 12px 20px; border-radius: 10px; border: 0; cursor: pointer;
  background: var(--zluta); color: var(--cerna); font: inherit; font-weight: 800;
  text-decoration: none; white-space: nowrap;
}
.tlacitko:hover { background: var(--zluta-hover); }
.tlacitko[disabled] { opacity: 0.6; cursor: progress; }
.tlacitko.maly { min-height: 42px; padding: 8px 14px; font-size: 0.92rem; }
.odkaz { font-weight: 700; }
.akce { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; }

/* Úvod – černá plocha v obou režimech */
.uvod { background: var(--cerna); color: #f3f3f1; }
.uvod .obal { display: grid; gap: 28px; padding-block: 44px 52px; align-items: center; }
.uvod h1 { font-size: clamp(2rem, 6.2vw, 3.3rem); font-weight: 850; letter-spacing: -0.025em; }
.uvod .pozn { display: flex; gap: 8px; align-items: center; margin-top: 16px; font-size: 0.95rem; color: #cfcfcb; }
.uvod .lead { margin-top: 18px; font-size: 1.1rem; color: #e6e6e2; max-width: 34ch; }
.znak.velky { display: none; justify-self: center; width: 240px; height: auto; }
@media (min-width: 760px) {
  .uvod .obal { grid-template-columns: 1.6fr 1fr; padding-block: 72px; }
  .znak.velky { display: block; }
}
.stitek {
  display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--zluta); color: var(--cerna); border-radius: 999px; padding: 3px 10px;
}
.stitek.tmavy { background: var(--stitek-bg); color: var(--stitek-text); }

.blok { padding-block: 56px; }
section.blok + section.blok { border-top: 1px solid var(--linka); }
.nadpis { display: grid; gap: 10px; margin-bottom: 28px; max-width: 62ch; }
.nadpis p, .tlumene { color: var(--tlumeny); }

/* Služby */
.skupiny { display: grid; gap: 18px; }
@media (min-width: 760px) { .skupiny { grid-template-columns: 1fr 1fr; } }
.skupina { background: var(--plocha); border: 1px solid var(--linka); border-radius: 14px; padding: 22px; }
.skupina h3 { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; margin-bottom: 14px; }
.skupina h3::before {
  content: ""; width: 14px; height: 16px; flex: none; background: var(--zluta);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.skupina ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.skupina li b { display: block; font-size: 0.98rem; }
.skupina li span { display: block; color: var(--tlumeny); font-size: 0.93rem; }
.skupina li em { font-style: normal; font-weight: 600; color: var(--text); }
.skupina.pripravujeme { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.skupina.pripravujeme h3 { margin: 0; }
.vyjimka { margin-top: 22px; font-size: 0.93rem; color: var(--tlumeny); max-width: 70ch; }

/* Postup – skutečná posloupnost, proto čísla */
.kroky { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: krok; }
@media (min-width: 640px) { .kroky { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .kroky { grid-template-columns: repeat(3, 1fr); } }
.kroky li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; }
.kroky li::before {
  counter-increment: krok; content: counter(krok);
  width: 40px; height: 44px; display: grid; place-items: center; font-weight: 850;
  background: var(--zluta); color: var(--cerna);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  font-variant-numeric: tabular-nums;
}
.kroky span { display: block; color: var(--tlumeny); font-size: 0.93rem; }

.onas p { max-width: 62ch; }
.onas p + p { margin-top: 12px; }

/* Formulář */
.formular, .hlaska.ok { max-width: 640px; }
.formular { background: var(--plocha); border: 1px solid var(--linka); border-radius: 16px; padding: 22px; }
.pole { display: grid; gap: 6px; margin-bottom: 16px; }
.pole > label { font-size: 0.9rem; font-weight: 700; }
.pov { color: var(--tlumeny); font-weight: 400; }
.radek { display: grid; gap: 0 14px; }
@media (min-width: 560px) { .radek { grid-template-columns: 1fr 1fr; } }
input[type="text"], input[type="tel"], input[type="email"], select, textarea {
  width: 100%; font: inherit; color: inherit; background: var(--plocha);
  border: 1px solid var(--linka); border-radius: 10px; padding: 11px 12px; min-height: 48px;
}
textarea { min-height: 120px; resize: vertical; }
[aria-invalid="true"] { border-color: var(--chyba-linka) !important; box-shadow: 0 0 0 1px var(--chyba-linka); }
.chyba-pole { color: var(--chyba-linka); font-size: 0.88rem; font-weight: 600; }
.souhlas { display: flex; gap: 10px; align-items: flex-start; font-size: 0.93rem; font-weight: 400; }
.souhlas input { width: 22px; height: 22px; flex: none; margin: 2px 0 0; accent-color: var(--zluta); }
.pasti { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.turnstile { min-height: 65px; margin-bottom: 16px; }
.formular .tlacitko { width: 100%; }
.hlaska { border-radius: 10px; padding: 14px 16px; font-size: 0.95rem; }
.formular .hlaska { margin-top: 14px; }
.hlaska.ok { background: var(--ok-bg); color: var(--ok-text); }
.hlaska.chyba { background: var(--chyba-bg); color: var(--chyba-text); }
.hlaska a { color: inherit; font-weight: 700; }

/* Kontakt */
.kontakt { display: grid; gap: 12px; }
@media (min-width: 640px) { .kontakt { grid-template-columns: repeat(3, 1fr); } }
.kontakt div { background: var(--plocha); border: 1px solid var(--linka); border-radius: 14px; padding: 16px 18px; }
.kontakt span { display: block; font-size: 0.85rem; color: var(--tlumeny); }
.kontakt a { text-decoration: none; }
.kontakt b { font-size: 1.05rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* Textové stránky (ochrana údajů, 404) */
.text { max-width: 68ch; }
.text h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); font-weight: 850; margin-bottom: 8px; }
.text h2 { font-size: 1.25rem; margin: 28px 0 8px; }
.text p + p { margin-top: 10px; }
.text ul { padding-left: 1.2em; margin: 10px 0; }
.text li + li { margin-top: 6px; }

/* Patička */
.paticka { background: var(--cerna); color: #d8d8d4; font-size: 0.88rem; }
.paticka .obal { display: grid; gap: 14px; padding-block: 34px calc(44px + env(safe-area-inset-bottom, 0px)); }
.paticka .znacka b { color: #fff; }
.paticka .znacka small { color: #b5b5b0; }
.paticka p { max-width: 70ch; }
.paticka a { color: #fff; }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }