/* ==========================================================================
   Dotexo — hlavní stylopis

   Jeden soubor záměrně. Web má kolem deseti opakujících se typů sekcí,
   takže se do jednoho dobře okomentovaného souboru vejdou a prohlížeč
   si je stáhne jedním požadavkem místo deseti.

   Obsah:
     1. Písmo                        14. Karty služeb
     2. Tokeny — značka              15. Výhody
     3. Tokeny — barvy               16. Kroky procesu
     4. Tokeny — typografie a mezery 17. Časté dotazy
     5. Reset                        18. Vnitřní stránky
     6. Typografie                   19. Tabulky
     7. Layout                       20. Rozhodovací strom
     8. Tlačítka a odkazy            21. Kontakt, produkty, mapa
     9. Hlavička                     22. Blog
    10. Mega menu                    23. Trojrozměrný model
    11. Patička                      24. Mapa webu
    12. Hero                         25. Zvýrazněný blok a výzva
    13. Čísla                        26. Formuláře
                                     27. Přístupnost
   ========================================================================== */

/* ==========================================================================
   1. PÍSMO
   --------------------------------------------------------------------------
   Space Grotesk je variabilní font — jeden soubor obsahuje všechny tloušťky
   od 100 do 900, takže se nestahuje pět souborů, ale jeden.

   Dvě podmnožiny (subsets), protože čeština potřebuje obojí:
     latin      — základní abeceda a á é í ó ú ý
     latin-ext  — háčky a kroužek: č ď ě ň ř š ť ů ž

   Prohlížeč si podle `unicode-range` stáhne jen tu podmnožinu, kterou
   stránka opravdu potřebuje. Soubory jsou u nás na serveru, žádné volání
   na Google Fonts.

   Běžný text používá systémové písmo. Nestahuje se, vykreslí se okamžitě
   a na každém zařízení vypadá přirozeně: na Macu SF Pro, na Windows
   Segoe UI, na Androidu Roboto.
   ========================================================================== */

@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/space-grotesk-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  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: "Space Grotesk";
  src: url("/assets/fonts/space-grotesk-latinext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  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;
}

/* ==========================================================================
   2. TOKENY — ZNAČKA
   --------------------------------------------------------------------------
   Barvy odměřené z hlavičkového papíru, viz podklady/logo-handoff/README.md.
   Tyhle čtyři hodnoty se nemění. Všechno ostatní se od nich odvozuje.
   ========================================================================== */

:root {
  --dotexo-blue: #5695e2; /* primární modrá, 1. tečka v logu */
  --dotexo-navy: #284473; /* námořní modrá, 2. tečka */
  --dotexo-mint: #afe2e3; /* mint akcent, 3. tečka */
  --dotexo-ink: #213858; /* wordmark a hlavní text */

  /* Značkový přechod. Směr je odvozený z vlny na hlavičkovém papíře. */
  --gradient-brand: linear-gradient(
    76deg,
    var(--dotexo-navy) 0%,
    var(--dotexo-blue) 52%,
    var(--dotexo-mint) 100%
  );
  --gradient-light: linear-gradient(
    135deg,
    var(--dotexo-mint) 0%,
    var(--dotexo-blue) 100%
  );
  --gradient-dark: linear-gradient(
    135deg,
    var(--dotexo-blue) 0%,
    var(--dotexo-navy) 100%
  );
}

/* ==========================================================================
   3. TOKENY — BARVY
   --------------------------------------------------------------------------
   Sémantické barvy. V kódu stránek se používají VŽDY tyhle, nikdy značkové
   z bodu 2. Důvod: `--color-text` se v tmavém režimu přepne na světlou,
   `--dotexo-ink` by zůstal tmavý a text by zmizel.

   Kontrasty jsou ověřené proti WCAG AA (normální text potřebuje 4.5:1):
     ink #213858 na bílé            11.9:1
     navy #284473 na bílé            9.7:1
     bílá na navy #284473            9.7:1
     blue #5695E2 na bílé            3.1:1  → jen velké nadpisy, ikony a rámečky,
                                              NIKDY běžný text
   ========================================================================== */

:root {
  /* Pozadí */
  --color-bg: #ffffff;
  --color-bg-soft: #f2f6fb; /* jemné odsazení sekcí */
  --color-surface: #ffffff; /* karty a boxy */
  --color-surface-raised: #f7fafd; /* karta na barevném pozadí */

  /* Text */
  --color-text: var(--dotexo-ink);
  --color-text-muted: #5a6b85; /* 5.6:1 na bílé */
  --color-heading: var(--dotexo-ink);
  --color-text-inverse: #ffffff; /* text na tmavém nebo barevném pozadí */

  /* Akce */
  --color-primary: var(--dotexo-navy); /* tlačítka a odkazy */
  --color-primary-hover: #1c3155;
  --color-on-primary: #ffffff;

  /* Akcenty a dekorace.

     Pozor na rozdíl mezi těmito dvěma tokeny:

     --color-accent      značková modrá. Na bílé má kontrast jen 3.1:1,
                         takže smí jen na velké nadpisy nad 24 px, na ikony,
                         čáry a rámečky. NIKDY na drobný text.

     --color-accent-text tmavší odstín téže modré s kontrastem 5.4:1 na bílé
                         a 4.9:1 na jemném pozadí. Pro malé popisky nad
                         nadpisy a podobný drobný text, kde by značková
                         modrá nebyla čitelná. */
  --color-accent: var(--dotexo-blue);
  --color-accent-text: #2e6bb8;
  --color-accent-soft: #e8f1fc;
  --color-mint-soft: #eaf7f7;

  /* Čáry a rámečky */
  --color-border: #dde5ef;
  --color-border-strong: #c3d1e2;

  /* Tmavé sekce.
     Inovativa střídá bílé sekce s celočernými přes celou šířku okna.
     Je to nejvýraznější rys jejího rytmu, proto ho přebíráme.
     Barvy jsou odečtené přímo z inovativy. */
  --color-dark-bg: #101014;
  --color-dark-surface: #1a1a20;
  --color-dark-text: rgba(255, 255, 255, 0.72);
  --color-dark-muted: rgba(255, 255, 255, 0.55);
  --color-dark-border: rgba(255, 255, 255, 0.12);

  /* Stavy */
  --color-focus: var(--dotexo-blue);
  --color-error: #b3261e; /* 6.5:1 na bílé */
  --color-success: #1c6b45; /* 5.5:1 na bílé */

  /* Stíny. V tmavém režimu se ztlumí, jinak vypadají špinavě. */
  --shadow-sm: 0 1px 2px rgba(33, 56, 88, 0.06),
    0 2px 8px rgba(33, 56, 88, 0.04);
  --shadow-md: 0 2px 4px rgba(33, 56, 88, 0.06),
    0 8px 24px rgba(33, 56, 88, 0.08);
  --shadow-lg: 0 4px 8px rgba(33, 56, 88, 0.07),
    0 16px 48px rgba(33, 56, 88, 0.12);
}

/* ==========================================================================
   4. TOKENY — TYPOGRAFIE A MEZERY
   --------------------------------------------------------------------------
   Velikosti používají clamp(min, plynule, max). Prostřední hodnota v `vw`
   roste s šířkou okna, takže se text plynule přizpůsobuje od mobilu
   k monitoru a nejsou potřeba zlomové body pro každou velikost.
   ========================================================================== */

:root {
  /*
    Dvě písma a jasné pravidlo, kde se které používá:

    --font-heading  Space Grotesk. Jen na nadpisy a velká čísla. Má hranatá
                    zakončení tahů, která ve velkém dávají charakter, ale
                    v drobném textu působí jako patky.

    --font-body     systémové písmo. Na všechno ostatní včetně ovládacích
                    prvků: menu, tlačítka, popisky, hlavičky tabulek.
                    Stejné dělení má i inovativa.
  */
  --font-heading: "Space Grotesk", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Typografická škála */
  --text-xs: 0.8125rem; /* 13px, popisky a poznámky */
  --text-sm: 0.9375rem; /* 15px, drobný text */
  --text-base: 1.0625rem; /* 17px, běžný text */
  --text-lg: clamp(1.125rem, 0.4vw + 1.03rem, 1.25rem);
  --text-xl: clamp(1.25rem, 0.7vw + 1.09rem, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.2vw + 1.22rem, 2rem);
  --text-3xl: clamp(1.875rem, 2vw + 1.4rem, 2.75rem);
  --text-4xl: clamp(2.25rem, 3.4vw + 1.45rem, 4rem);

  --leading-tight: 1.05;
  --leading-snug: 1.35;
  --leading-normal: 1.65;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;

  /* Mezery. Škála po zhruba 1.5násobku, ať se nevymýšlí náhodná čísla. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Svislé odsazení sekcí, na mobilu menší */
  --section-y: clamp(3rem, 6vw, 6rem);

  /* Šířky */
  --width-container: 75rem; /* 1200px */
  --width-narrow: 45rem; /* 720px, pro čtený text */

  /* Zaoblení */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-pill: 100vmax;

  /* Přechody */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
}

/* ==========================================================================
   5. RESET
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Plynulé posouvání při kliknutí na kotvu, ale ne pro ty, kdo mají
     v systému vypnuté animace (viz bod 10). */
  scroll-behavior: smooth;
  /* Aby nadpis po skoku na kotvu neskončil pod lepivou hlavičkou. */
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  /* Full-bleed sekce mohou přetéct o šířku posuvníku a na mobilu způsobit
     vodorovné posouvání. `clip` to zarazí a na rozdíl od `hidden` nerozbije
     position: sticky. */
  overflow-x: clip;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Fotky mají do načtení jemné podbarvení, aby na jejich místě nebyla díra.
   Netýká se log a ikon, ty jsou průhledné a podbarvení by bylo vidět
   jako obdélník kolem nich. */
img:not([src$=".svg"]) {
  background-color: var(--color-bg-soft);
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* ==========================================================================
   6. TYPOGRAFIE
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-heading);
  /* Váha 800 a řádkování 1.05 jsou odečtené z inovativy. Nadpisy tam mají
     zřetelně těžší řez a sedí těsněji, než je u bezpatkových písem obvyklé.
     Je to jeden z rysů, podle kterých se ten web pozná. */
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
  /* Zabrání osamocené předložce na konci řádku. */
  text-wrap: balance;
}

h1 {
  font-size: var(--text-4xl);
}
h2 {
  font-size: var(--text-3xl);
}
h3 {
  font-size: var(--text-2xl);
}
h4 {
  font-size: var(--text-xl);
}
h5,
h6 {
  font-size: var(--text-lg);
}

p,
ul,
ol,
dl,
table,
figure,
blockquote {
  margin: 0 0 var(--space-5);
}

p {
  /* Odstavce se nelámou tak, aby na posledním řádku zůstalo jedno slovo. */
  text-wrap: pretty;
}

:is(p, li) {
  max-width: var(--width-narrow);
}

strong,
b {
  font-weight: 600;
}

small {
  font-size: var(--text-sm);
}

hr {
  height: 1px;
  margin: var(--space-7) 0;
  border: 0;
  background-color: var(--color-border);
}

/* Nadepsání sekce, malý text nad hlavním nadpisem. */
.eyebrow {
  display: block;
  margin-bottom: var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/*
  Nadpis vyplněný barevným přechodem.

  Na inovativě mají takhle vyplněné všechny nadpisy sekcí na světlém
  pozadí. Je to nejnápadnější prvek jejího vzhledu, proto ho přebíráme.

  Na tmavých sekcích se přechod nepoužívá, tam jsou nadpisy bílé.
  Zařizuje to pravidlo u .section--dark níž.
*/
.gradient-text,
.section__title,
/* Na právních stránkách i podnadpisy: „2.1", „2.2" jsou pododdíly textu,
   ne nadpisy uvnitř karet, takže přechod je u nich na místě. */
.pravni h3 {
  background-image: var(--gradient-dark);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Bez tohoto by se u některých písem ořízly přesahy písmen jako „g". */
  padding-bottom: 0.08em;
}

/*
  Hlavní nadpis sekce dostane přechod i bez zvláštní třídy.

  Selektor cílí jen na nadpis, který je přímým potomkem kontejneru sekce.
  Nadpisy uvnitř karet, zvýrazněných bloků nebo odpovědí rozhodovacího
  stromu se tím nezmění, což je záměr: přechod patří nadpisům sekcí,
  ne každému nadpisu na stránce.
*/
.section > .container > h2,
.section > .container > .section__head > h2 {
  background-image: var(--gradient-dark);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.08em;
}

.section--dark > .container > h2,
.section--dark > .container > .section__head > h2 {
  background-image: none;
  color: #ffffff;
}

/* Nadpis sekce. Velikost odečtená z inovativy, kde má 41.8 px. */
.section__title {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-5);
}

/* Hlavička sekce, tedy popisek a nadpis nad obsahem. */
.section__head {
  margin-bottom: var(--space-7);
}

.section__head > :last-child {
  margin-bottom: 0;
}

/* Hlavička sekce ve dvou sloupcích: nadpis vlevo, úvodní text vpravo.
   Takhle je postavená černá sekce s výhodami na inovativě. */
@media (min-width: 60rem) {
  .section__head--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: start;
  }

  .section__head--split .section__title {
    margin-bottom: 0;
  }
}

.lead {
  max-width: var(--width-narrow);
  font-size: var(--text-lg);
  color: var(--color-text-muted);
}

/* ==========================================================================
   7. LAYOUT
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--width-container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

/*
  Užší varianta kontejneru pro souvisle čtený text, například článek
  na blogu nebo právní stránku.

  Nezmenšuje se sám kontejner, ale obsah v něm. Kdyby se zmenšil kontejner,
  vycentroval by se na střed stránky a jeho levý okraj by se rozešel
  s okrajem širokých sekcí. Text by pak na každé stránce začínal jinde
  podle toho, jestli je sekce široká, nebo úzká.
*/
.container--narrow > * {
  max-width: var(--width-narrow);
}

/*
  Dvousloupcová sekce: nadpis vlevo, obsah vpravo.

  Takhle jsou postavené obsahové sekce na podstránkách inovativy a je to
  hlavní důvod, proč tam stránka působí vyváženě. Když je všechno v jednom
  úzkém sloupci vlevo, zbyde napravo prázdná polovina obrazovky.

  Nadpis zůstává nahoře i u dlouhého textu vpravo, protože je ukotvený
  v prvním řádku mřížky.

  Na mobilu se z toho stane obyčejný sloupec, nadpis nad textem.
*/
@media (min-width: 60rem) {
  .section__split {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    column-gap: var(--space-8);
    align-items: start;
  }

  /* Do levého sloupce patří nadpis, ať už stojí sám, nebo je zabalený
     v hlavičce sekce spolu s popiskem nad ním. */
  .section__split > h2,
  .section__split > .section__head {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
  }

  .section__split > *:not(h2):not(.section__head) {
    grid-column: 2;
  }
}

.section {
  padding-block: var(--section-y);
}

.section--soft {
  background-color: var(--color-bg-soft);
}

/*
  Tmavá sekce přes celou šířku okna.

  Střídání bílých a celočerných sekcí je nejvýraznější rys vzhledu
  inovativy. Barva je odečtená přímo z ní.

  Sekce si přepisuje sémantické tokeny, takže všechno uvnitř (nadpisy,
  text, rámečky, tlačítka) se přebarví samo a nemusí se pro tmavý podklad
  psát zvláštní pravidla. Je to stejný postup jako u tmavého režimu.
*/
.section--dark {
  background-color: var(--color-dark-bg);
  padding-block: clamp(3.5rem, 8vw, 7.5rem);

  --color-bg: var(--color-dark-bg);
  --color-surface: var(--color-dark-surface);
  --color-surface-raised: #23232b;
  --color-text: var(--color-dark-text);
  --color-text-muted: var(--color-dark-muted);
  --color-heading: #ffffff;
  --color-border: var(--color-dark-border);
  --color-border-strong: rgba(255, 255, 255, 0.22);
  --color-primary: #ffffff;
  --color-primary-hover: rgba(255, 255, 255, 0.85);
  --color-on-primary: var(--color-dark-bg);
  --color-accent-text: var(--dotexo-mint);
  --color-accent-soft: rgba(255, 255, 255, 0.08);
}

/* Na tmavé sekci se nadpis nevyplňuje přechodem, ale je bílý.
   Přechod by na černém podkladu ztratil čitelnost. */
.section--dark .section__title {
  background-image: none;
  color: #ffffff;
}

/* Mřížka, která sama zalomí položky podle dostupné šířky.
   `--min` říká, jak úzká smí být jedna položka, než se zalomí. */
.grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(var(--min, 16rem), 100%), 1fr)
  );
}

.stack > * + * {
  margin-top: var(--space-4);
}

/* ==========================================================================
   8. TLAČÍTKA A ODKAZY
   ========================================================================== */

a {
  color: var(--color-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--transition-fast);
}

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

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  /* Minimálně 44 px na výšku, aby se dalo pohodlně trefit prstem. */
  min-height: 2.75rem;
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast),
    border-color var(--transition-fast), transform var(--transition-fast);
}

.button:hover {
  background-color: var(--color-primary-hover);
  color: var(--color-on-primary);
}

.button:active {
  transform: translateY(1px);
}

/* Vedlejší tlačítko, jen obrys */
.button--outline {
  background-color: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-primary);
}

.button--outline:hover {
  background-color: var(--color-accent-soft);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Tlačítko na barevném nebo tmavém pozadí */
.button--inverse {
  background-color: var(--color-bg);
  color: var(--color-primary);
}

.button--inverse:hover {
  background-color: var(--color-surface-raised);
  color: var(--color-primary);
}

/* ==========================================================================
   9. HLAVIČKA
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: 4.5rem;
}

/* --- Logo --------------------------------------------------------------- */

.site-header__logo {
  flex-shrink: 0;
  line-height: 0;
}

.site-header__logo-img {
  /* Značkový manuál uvádí minimum 120 px a doporučuje 180 až 220 px.
     168 px je pod doporučením, ale s velkou rezervou nad minimem.
     Menší logo dá v hlavičce víc prostoru menu. */
  width: 10.5rem;
  height: auto;
}

/* --- Pravá strana hlavičky ---------------------------------------------- */

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}

/* --- Hamburger ---------------------------------------------------------- */

.burger {
  display: grid;
  align-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: transparent;
  cursor: pointer;
}

.burger__line {
  display: block;
  height: 2px;
  border-radius: 1px;
  background-color: var(--color-text);
  transition: transform var(--transition-base), opacity var(--transition-fast);
}

/* Tři čárky se po otevření změní na křížek. */
.burger[aria-expanded="true"] .burger__line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.burger[aria-expanded="true"] .burger__line:nth-child(2) {
  opacity: 0;
}

.burger[aria-expanded="true"] .burger__line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   10. MEGA MENU
   --------------------------------------------------------------------------
   Stejné HTML slouží dvěma podobám. Základ je mobilní: svislé vysouvací
   menu s rozbalovacími sekcemi. Od šířky 64rem se přepne na vodorovné
   mega menu s panely pod hlavičkou.
   ========================================================================== */

/* --- Mobilní podoba (výchozí) ------------------------------------------- */

.site-nav {
  position: fixed;
  inset: 4.5rem 0 0 auto;
  z-index: 40;
  width: min(24rem, 100%);
  padding: var(--space-5);
  overflow-y: auto;
  background-color: var(--color-bg);
  border-left: 1px solid var(--color-border);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--transition-base), visibility var(--transition-base);
}

.site-nav[data-open] {
  transform: translateX(0);
  visibility: visible;
}

/* Když je vysouvací menu otevřené, stránka pod ním se nesmí posouvat. */
body[data-menu-open] {
  overflow: hidden;
}

.mega__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mega__item {
  border-bottom: 1px solid var(--color-border);
}

.mega__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4) 0;
  border: 0;
  background: none;
  /* Menu je ovládací prvek, ne nadpis, proto běžné písmo.
     Space Grotesk má hranatá zakončení tahů, která v drobném textu
     působí jako patky. Inovativa to má stejně. */
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}

/* Pořadové číslo nad položkou. Na mobilu se nezobrazuje, tam by jen
   zabíralo místo. */
.mega__index {
  display: none;
}

.mega__chevron {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform var(--transition-fast);
}

.mega__trigger[aria-expanded="true"] .mega__chevron {
  transform: rotate(180deg);
}

.mega__panel-inner {
  padding-bottom: var(--space-5);
}

/* --- Odkaz na pilířovou stránku ----------------------------------------- */

/* Obrázková dlaždice s odkazem na pilířovou stránku. Na inovativě je to
   tmavá karta s ilustrací a popiskem dole. */
.mega__overview {
  display: block;
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background-color: var(--dotexo-ink);
  background-image: radial-gradient(
      circle at 1px 1px,
      rgba(255, 255, 255, 0.35) 1px,
      transparent 0
    ),
    linear-gradient(150deg, #1b2f4d 0%, #284473 100%);
  background-size: 14px 14px, cover;
  text-decoration: none;
  transition: transform var(--transition-fast);
}

.mega__overview:hover {
  transform: translateY(-2px);
}

/* Prázdné místo nahoře, které dlaždici dá poměr stran obrázku. */
.mega__overview-visual {
  display: block;
  aspect-ratio: 16 / 9;
}

.mega__overview-label {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

.mega__overview-title {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: #ffffff;
}

/* --- Sloupce odkazů ------------------------------------------------------ */

.mega__groups {
  display: grid;
  gap: var(--space-5);
}

/* Nadpis sloupce je na inovativě modrý a psaný normálně, ne kapitálkami. */
.mega__group-label {
  margin-bottom: var(--space-4);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-accent-text);
}

.mega__group-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-1);
}

.mega__group-list a {
  display: block;
  padding: var(--space-2) var(--space-3);
  margin-inline: calc(var(--space-3) * -1);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  text-decoration: none;
  transition: background-color var(--transition-fast),
    color var(--transition-fast);
}

.mega__group-list a:hover {
  background-color: var(--color-accent-soft);
  color: var(--color-primary);
}

/* Odkaz na stránku, na které právě jsme. */
.mega__group-list a[aria-current="page"],
.mega__overview[aria-current="page"] {
  font-weight: 600;
  color: var(--color-primary);
}

/* --- Promo blok ---------------------------------------------------------- */

/* Modrá promo karta s bílým tlačítkem, stejně jako na inovativě. */
.mega__promo {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background-image: var(--gradient-dark);
  color: #ffffff;
}

.mega__promo-eyebrow {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.7);
  max-width: none;
}

.mega__promo-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: var(--leading-snug);
  max-width: none;
}

.mega__promo-text {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: rgba(255, 255, 255, 0.85);
  max-width: none;
}

.mega__promo-cta {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background-color: #ffffff;
  color: var(--dotexo-navy);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.mega__promo-cta:hover {
  background-color: var(--dotexo-mint);
  color: var(--dotexo-ink);
}

/* Výzva k akci uvnitř vysouvacího menu, na monitoru se skryje. */
.site-nav__cta {
  width: 100%;
  margin-top: var(--space-5);
}

/* Na mobilu je výzva v menu, ne v hlavičce. */
.site-header__cta {
  display: none;
  /* Menší než tlačítka v obsahu stránky. Na mobilu se tohle tlačítko
     nezobrazuje, takže se nemusí držet minima 44 px pro dotyk. */
  min-height: 2.5rem;
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  white-space: nowrap;
  /* Značkový přechod místo plné barvy. */
  background-image: var(--gradient-dark);
  border: 0;
}

.site-header__cta:hover {
  background-image: linear-gradient(
    135deg,
    var(--dotexo-blue) 0%,
    #1c3155 100%
  );
}

/* --- Podoba na monitoru -------------------------------------------------- */

@media (min-width: 64rem) {
  .burger {
    display: none;
  }

  .site-header__cta {
    display: inline-flex;
  }

  .site-nav__cta {
    display: none;
  }

  /*
    Hlavička jde přes celou šířku okna: logo u levého okraje, menu na
    středu stránky, tlačítko u pravého okraje. Stejně jako na inovativě.

    Kdyby hlavička zůstala v kontejneru jako zbytek obsahu, logo i tlačítko
    by se stáhly ke středu a po stranách by zbylo prázdné místo.

    Mřížka `auto 1fr auto` dá krajním sloupcům jen tolik místa, kolik
    potřebují, a menu ve středním sloupci se vycentruje na střed stránky.

    Svislé roztažení řeší druhou věc: bez něj je položka menu vycentrovaná
    a mezi jejím spodním okrajem a panelem zůstane pár pixelů mrtvého
    místa. Myš tu mezeru při cestě dolů překročí a panel se zavře dřív,
    než na něj uživatel dojede.
  */
  .site-header__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: stretch;
    max-width: none;
    padding-inline: clamp(var(--space-5), 3vw, var(--space-8));
  }

  .site-header__logo,
  .site-header__actions {
    align-self: center;
  }

  .site-header__actions {
    margin-left: 0;
  }

  .site-nav {
    justify-self: center;
  }

  .site-nav {
    position: static;
    display: flex;
    align-items: stretch;
    width: auto;
    padding: 0;
    overflow: visible;
    background: none;
    border: 0;
    transform: none;
    visibility: visible;
  }

  .mega {
    display: flex;
    align-items: stretch;
  }

  .mega__list {
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
  }

  .mega__item {
    display: flex;
    align-items: stretch;
    border: 0;
  }

  .mega__trigger {
    /* Číslo nad názvem. */
    display: grid;
    align-content: center;
    justify-items: start;
    /* Mobilní podoba používá mezeru mezi názvem a šipkou. Tady by se
       z ní stala mezera mezi řádky mřížky a číslo by se od názvu
       odtrhlo, proto se ruší. */
    gap: 0;
    width: auto;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    /* Bez tohoto se dlouhé názvy jako „Bezúročný úvěr NZÚ" zalomí
       na dva řádky a hlavička se roztáhne do výšky. */
    white-space: nowrap;
  }

  /* Inovativa u položek menu šipku nemá, že jde o rozbalovací položku
     je vidět z čísla a z chování. Na mobilu šipka zůstává, tam je to
     harmonika a bez ní by nebylo poznat, že se dá rozbalit. */
  .mega__chevron {
    display: none;
  }

  /* Drobné pořadové číslo nad položkou, detail převzatý z inovativy. */
  .mega__index {
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.625rem;
    /* Bez tohoto by číslo zdědilo řádkování 1.65 z textu stránky.
       U desetibodového písma to pod ním nechá přes šest pixelů prázdna
       a číslo se od názvu opticky odtrhne. */
    line-height: 1;
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
  }

  .mega__trigger-label {
    line-height: 1.2;
  }

  .mega__trigger:hover,
  .mega__trigger[aria-expanded="true"] {
    color: var(--color-accent-text);
  }

  .mega__trigger:hover .mega__index,
  .mega__trigger[aria-expanded="true"] .mega__index {
    color: var(--color-accent-text);
  }

  /* Panel je ukotvený k celé hlavičce, ne k jednotlivé položce menu.
     Kdyby visel na položce, u té první by přetekl mimo levý okraj
     obrazovky. Takhle se drží uvnitř stránky vždycky. */
  .mega__panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 45;
    padding: var(--space-3) var(--space-5) 0;
  }

  .mega__panel-inner {
    display: grid;
    grid-template-columns: 0.95fr 0.8fr 0.8fr 1.05fr;
    /* Bez tohoto by se všechny sloupce natáhly na výšku nejvyššího z nich
       a promo karta by měla dole prázdné místo. */
    align-items: start;
    gap: var(--space-6);
    width: 100%;
    /* Panel je užší než obsah stránky, jak to má inovativa. */
    max-width: 64rem;
    margin-inline: auto;
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    box-shadow: 0 24px 60px rgba(16, 16, 20, 0.16);
  }

  /* Když položka nemá pilířovou stránku (Dotexo), zbydou tři sloupce. */
  .mega__panel-inner:not(:has(.mega__overview)) {
    grid-template-columns: 0.9fr 0.9fr 1.05fr;
  }

  .mega__overview {
    margin-bottom: 0;
    align-self: start;
  }

  /* Sloupce odkazů jsou vedle sebe, ne pod sebou. */
  .mega__groups {
    display: contents;
  }

  .mega__promo {
    margin-top: 0;
  }
}

/* ==========================================================================
   11. PATIČKA
   ========================================================================== */

.site-footer {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-8) var(--space-5);
  /* Stejná černá jako tmavé sekce, aby na sebe patička navazovala. */
  background-color: var(--color-dark-bg);
  color: var(--color-dark-text);
}

/*
  Obří vodoznak přes celou šířku patičky. Inovativa má takhle dole
  „ai first mindset", u Dotexa je to název firmy.

  Je to čistá dekorace, proto je pro odečítače skrytý.
*/
.site-footer::after {
  /* Text přichází z proměnné --vodoznak, kterou nastavuje šablona patičky
     podle názvu firmy. Jako obsah v CSS není v DOM, takže ho nástroje
     na přístupnost neposuzují jako text ke čtení, což je správně:
     je to dekorace, ne informace. */
  content: var(--vodoznak, "");
  display: block;
  /* Záporný spodní okraj uřízne prázdný prostor pod účařím písma,
     takže vodoznak sedí na spodní hraně patičky jako na inovativě. */
  margin: var(--space-7) 0 -0.18em;
  font-family: var(--font-heading);
  font-size: clamp(4rem, 21vw, 18rem);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.04em;
  text-align: center;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.06);
  user-select: none;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}

.site-footer a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.site-footer__top {
  display: grid;
  gap: var(--space-7);
  padding-bottom: var(--space-7);
}

.site-footer__logo {
  width: 10rem;
  height: auto;
}

.site-footer__tagline {
  margin: var(--space-4) 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: #ffffff;
  /*
    Vyrovná délku řádků, takže se zlomí mezi „poradci" a „Nové". Bez toho
    zbylo na prvním řádku „Nové" samotné a název programu se rozpadl na
    dva řádky. Obě půlky mají shodou okolností po devatenácti znacích,
    takže vyrovnávání trefí přesně tohle místo.
  */
  text-wrap: balance;
}

.site-footer__region {
  margin: 0;
  font-size: var(--text-sm);
}

.site-footer__nav {
  display: grid;
  gap: var(--space-6);
}

/*
  Nadpisy sloupců mají písmo z menu, jen tučné.

  Byly verzálkami s prostrkáním, což zákazníkovi nesedělo. Menu je proti
  tomu psané normálně a stejným řezem, takže patička a hlavička teď mluví
  jedním hlasem. Verzálky navíc u českých názvů („BEZÚROČNÝ ÚVĚR NZÚ")
  ubíraly na čitelnosti víc než jinde: diakritika se nad velkými písmeny
  mačká.
*/
.site-footer__col-title {
  /*
    Rámeček vysoký jako dotyková plocha odkazu, s textem uprostřed.

    Tři nadpisy ze čtyř jsou odkazy a ty si kvůli trefitelnosti prstem
    berou výšku 2,75 rem s vystředěným textem. Čtvrtý („Dotexo") odkaz
    není, protože k němu nevede rozcestník, takže zůstával obyčejným
    řádkem u horní hrany a seděl výš než ostatní. Když má rámeček
    i nadpis, srovnají se oba případy na stejnou linku.
  */
  display: flex;
  align-items: center;
  /*
    Nižší rámeček než u odkazů v seznamu (2,75 rem). Mezera mezi nadpisem
    a prvním odkazem vzniká ze dvou takových rámečků nad sebou: pod textem
    nadpisu i nad textem odkazu zbývá prázdno, dohromady skoro čtyřicet
    bodů. Zmenšením na 2,25 rem a zrušením odsazení klesla na dvacet.

    Šestatřicet bodů je pořád pohodlný cíl pro prst a s přehledem plní
    požadavek WCAG 2.2 na velikost cíle (24 bodů). Apple doporučuje 44,
    proto ho odkazy v seznamu, kterých je víc pod sebou, mají dál.
  */
  min-height: 2.25rem;
  /* Trochu vzduchu nad řadou nadpisů. Posune se tím celý blok
     i s odkazy pod ním, takže se odstupy uvnitř nemění. */
  margin-top: var(--space-2);
  margin-bottom: 0;
  /* Jsou to h2, takže si bez tohohle berou značkové písmo i stažené
     prostrkání z globálního pravidla pro nadpisy. Menu má obojí jinak. */
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: normal;
  color: #ffffff;
}

.site-footer__col-title a {
  text-decoration: none;
}

.site-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  /*
    Odkazy se skládají odshora a nerozestupují se.

    Sloupce jsou v mřížce stejně vysoké podle toho nejdelšího, a protože
    mřížka svoje řádky ve výchozím stavu roztahuje, sloupec se třemi
    odkazy je rozprostřel po celé té výšce. Vedle pětiodkazového sousedu
    z toho byly obří mezery a druhý odkaz jednoho sloupce ležel na úrovni
    třetího odkazu druhého.

    Takhle mají všechny odkazy stejnou výšku řádku (dotyková plocha
    2,75 rem), takže si odpovídají: druhý s druhým, třetí s třetím.
  */
  align-content: start;
  font-size: var(--text-sm);
}

/* Odkazy v patičce potřebují dost velkou plochu, aby se daly na mobilu
   trefit prstem. Samotný řádek textu má jen kolem 25 px, doporučené
   minimum je 44 px, proto je z odkazu dlaždice s výškou. */
.site-footer__list a,
.site-footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

/* Nadpis sloupce je někdy odkaz, někdy prostý text. Rámeček musí být
   v obou případech stejný, jinak nadpis bez odkazu sedí výš. Výšku
   určuje nadpis, odkaz ji jen vyplní. */
.site-footer__col-title a {
  display: inline-flex;
  align-items: center;
  min-height: inherit;
}

/* --- Spodní lišta -------------------------------------------------------- */

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: var(--text-sm);
}

.site-footer__copy {
  margin: 0;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.to-top {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  margin-left: auto;
  padding: var(--space-2) var(--space-4);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-pill);
  background: none;
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.to-top:hover {
  border-color: rgba(255, 255, 255, 0.6);
  color: #ffffff;
}

@media (min-width: 48rem) {
  .site-footer__nav {
    grid-template-columns: repeat(4, 1fr);
    /* Dva řádky: nadpisy a pod nimi seznamy odkazů. */
    grid-template-rows: auto 1fr;
  }

  /*
    Sloupce si berou řádky z rodičovské mřížky, takže všechny nadpisy
    dostanou výšku toho nejvyššího a seznamy začnou na společné lince.
    Bez toho začínal jednořádkový nadpis „Dotexo" o řádek výš než
    dvouřádkové sousedy a „O nás" viselo nad „Rodinnými domy".
  */
  .site-footer__col {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
  }

  /*
    Každý nadpis na jeden řádek. „Zaměření a pasportizace" se do čtvrtiny
    šířky nevešlo a lámalo se, takže řada nadpisů vypadala rozházeně.

    Sloupce se proto přestaly dělit na přesné čtvrtiny: `auto` je nechá
    vyrůst tak akorát na nejdelší nadpis a `space-between` zbylé místo
    rozdělí do mezer. Odkazy pod nadpisy jsou kratší, takže na ně to
    nemá vliv.
  */
  .site-footer__nav {
    grid-template-columns: repeat(4, auto);
    justify-content: space-between;
  }

  .site-footer__col-title {
    white-space: nowrap;
  }
}

@media (min-width: 64rem) {
  .site-footer__top {
    grid-template-columns: 1fr 2.2fr;
    column-gap: var(--space-8);
  }
}

/* ==========================================================================
   12. HERO
   ========================================================================== */

/*
  Hero podle inovativy: obří kruh ve značkové barvě, vizuál překrývající
  ho zleva a bílý nadpis položený přes kruh vpravo.

  Kruh je vždycky dost velký na to, aby text ležel na barevném podkladu.
  Bílý text tak nikdy neskončí na bílém pozadí, ať je okno jakkoli široké.
*/
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Odsazení nahoře i dole stejné. Kruh je vycentrovaný na text, takže
     při nestejném odsazení by se přiblížil k jednomu okraji a ten by ho
     ořízl dřív než druhý. */
  --hero-odsazeni: clamp(2.5rem, 5vw, 4.5rem);
  padding-block: var(--hero-odsazeni);
}

.hero__inner {
  position: relative;
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

/*
  Barevný podklad pod textem.

  Je ukotvený přímo k textovému bloku, ne k celé sekci. Díky tomu text
  vždycky leží na barevném podkladu, ať je okno jakkoli široké, a nemůže
  se stát, že by bílá písmena skončila na bílém pozadí.

  Na mobilu je to zaoblený pruh přes celou šířku, na monitoru kruh.
  Kruh se totiž na úzké obrazovce ořízne ze tří stran a přestane vypadat
  jako kruh. Pruh vypadá záměrně a text pokryje vždycky.
*/
.hero__text::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* Přesah do stran dorovná vnitřní okraje kontejneru, takže pruh
     sahá od okraje k okraji obrazovky. */
  left: calc(var(--space-5) * -1);
  right: calc(var(--space-5) * -1);
  top: calc(var(--space-6) * -1);
  bottom: calc(var(--space-6) * -1);
  border-radius: var(--radius-lg);
  background-image: var(--gradient-dark);
  /*
    Lehce průhledný, aby pod ním prosvítal dům, který pod kruh zajíždí.
    Devadesát procent je strop: víc už by světlý podklad prosvítil natolik,
    že by bílý text ztratil kontrast. Kontroluje se to Lighthousem, který
    počítá kontrast proti tomu, co je za textem.

    Průhlednost je na podkladu, ne na celém textovém bloku. Kdyby byla na
    bloku, zprůhledněla by i písmena.
  */
  opacity: 0.9;
}

.hero__title {
  margin-bottom: var(--space-5);
  color: #ffffff;
  font-size: var(--text-4xl);
}

.hero__text {
  position: relative;
  z-index: 1;
}

/* Rotující slovo. Šířku mu vyhradí js/hero-rotator.js podle nejdelší
   varianty, aby nadpis při výměně neposkakoval.
   Leží na značkovém přechodu, takže mint dává dost kontrastu i na světlejším
   konci přechodu. */
.hero__rotator {
  display: inline-block;
  color: var(--dotexo-mint);
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.hero__rotator[data-state="out"] {
  opacity: 0;
  transform: translateY(-0.25em);
}

.hero__rotator[data-state="in"] {
  opacity: 1;
  transform: translateY(0);
}

.hero__lead {
  margin-bottom: var(--space-6);
  max-width: 34ch;
  color: rgba(255, 255, 255, 0.88);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  max-width: none;
}

/* Na kruhu je hlavní tlačítko bílé s tmavým textem, vedlejší jen obrys. */
.hero__actions .button {
  background-color: #ffffff;
  color: var(--dotexo-navy);
}

.hero__actions .button:hover {
  background-color: var(--dotexo-mint);
  color: var(--dotexo-ink);
}

.hero__actions .button--outline {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.5);
  color: #ffffff;
}

.hero__actions .button--outline:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
  color: #ffffff;
}

/* --- Vizuál ---------------------------------------------------------------
   Obsah nese partial hero-model.njk: sekvence od lidarového skenu
   k vizualizaci. Vzhled je v sekci 23, tady jen místo, kam se vejde.

   Vizuál jde PŘES CELOU ŠÍŘKU OKNA, ne jen přes sloupec mřížky. Body
   mračna totiž startují za okrajem plátna, a dokud bylo plátno v levém
   sloupci, přilétaly zpoza neviditelného rámečku uprostřed stránky
   místo zpoza hrany obrazovky.

   Na mobilu zůstává v toku jako pruh nad textem, na monitoru se položí
   přes celé hero a text s kruhem leží nad ním.
   -------------------------------------------------------------------------- */

.hero__media {
  position: relative;
  z-index: 0;
  /* Roztažení na šířku okna zevnitř kontejneru s odsazením. Počítá se
     z rozdílu mezi polovinou kontejneru a polovinou okna, takže na
     odsazení kontejneru nezáleží. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* Nahoru až k čáře pod menu, ze stejného důvodu jako na monitoru:
     body mračna přilétají od horní hrany plátna a ta má ležet na té
     čáře, ne uprostřed bílé plochy pod ní. */
  margin-top: calc(var(--hero-odsazeni) * -1);
}

@media (min-width: 60rem) {
  .hero__inner {
    /* Text vpravo, vizuál pod ním přes celou šířku. Levý sloupec zůstává
       prázdný a drží textu místo, aby nepřelezl přes dům. */
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-6);
    /* Hero musí být vyšší než kruh, jinak ho `overflow: hidden` ořízne
       nahoře i dole a místo kruhu zbyde tvar s rovnými hranami. */
    min-height: 46rem;
  }

  .hero__media {
    /* Vyskočí z mřížky a lehne si přes celé hero. `inset: 0` by se
       vázalo na kontejner s maximální šířkou, proto se levý okraj
       počítá k oknu, ne k němu.

       Nahoru sahá až k čáře pod menu, tedy o odsazení hera výš, než kde
       začíná text. Body mračna přilétají od horní hrany plátna, a ta má
       ležet právě na té čáře: kdyby plátno začínalo až za odsazením,
       body by se objevovaly uprostřed bílé plochy pod menu, jako by
       vznikaly z ničeho. Sekce má `overflow: hidden`, takže se nic
       nedostane nad čáru. */
    position: absolute;
    top: calc(var(--hero-odsazeni) * -1);
    bottom: 0;
    left: calc(50% - 50vw);
    width: 100vw;
    margin-left: 0;
  }

  .hero__text {
    /* Musí se říct výslovně, protože vizuál už v mřížce nezabírá místo. */
    grid-column: 2;
  }

  /*
    Na monitoru je z pruhu kruh.

    Průměr má dvě omezení a musí splnit obě:

    Dolní hranice: kruh musí obsáhnout celý textový blok i s rohy, jinak
    by bílá písmena přetekla na bílé pozadí. Rozhoduje úhlopříčka textu,
    ne jeho šířka.

    Horní hranice: kruh se musí vejít do výšky hera. Strop 48rem je
    o dva rem menší než výška obsahu výš, takže nad ním i pod ním zbyde
    místo a kruh zůstane kulatý, ne useknutý.
  */
  .hero__text::before {
    aspect-ratio: 1;
    width: min(max(165%, 36rem), 48rem);
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    translate: -50% -50%;
    border-radius: 50%;
  }

  .hero__media {
    /* Zajede pod kruh, aby se překrývaly. */
    margin-right: calc(var(--space-7) * -1);
  }

  .hero__text {
    padding-left: var(--space-5);
  }

  .hero__title {
    font-size: var(--text-3xl);
  }
}

@media (min-width: 75rem) {
  .hero__title {
    font-size: var(--text-4xl);
  }
}

/* ==========================================================================
   13. ČÍSLA
   ========================================================================== */

/* Čísla bez rámečků, jen ikona, hodnota a popis. Na inovativě jsou takhle
   hned pod herem a působí vzdušně, ne jako karty. */
.stats {
  margin: 0;
  padding: 0;
  list-style: none;
}

.stats__item {
  max-width: none;
}

.stats__icon {
  margin-bottom: var(--space-4);
  color: var(--color-accent);
}

.stats__value {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
  max-width: none;
}

.stats__label {
  margin: var(--space-2) 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-heading);
  max-width: none;
}

.stats__text {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: none;
}

/* ==========================================================================
   14. KARTY SLUŽEB
   ========================================================================== */

.services {
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: sluzba;
}

/*
  Služby na inovativě nejsou karty s rámečky, ale minimalistický číslovaný
  seznam: pořadové číslo, nadpis, krátký text a odkaz „Více". Odděluje je
  jen tenká vodorovná linka nahoře.
*/
.service {
  position: relative;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  max-width: none;
}

.service__number {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  max-width: none;
}

.service__title {
  margin-bottom: var(--space-4);
  font-size: var(--text-xl);
}

.service__title a {
  text-decoration: none;
  color: var(--color-heading);
  transition: color var(--transition-fast);
}

.service:hover .service__title a {
  color: var(--color-accent-text);
}

/* Kliknutelná je celá položka, ne jen nadpis. */
.service__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.service p {
  color: var(--color-text-muted);
}

.service p:last-of-type {
  margin-bottom: var(--space-4);
}

/* Odkaz „Více" na konci položky. Je jen dekorativní, protože celou položku
   už zaklikává odkaz v nadpisu. */
.service__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 0;
  font-weight: 600;
  color: var(--color-accent-text);
  max-width: none;
}

/* Služby jsou čtyři, takže dvě řady po dvou. Automatické zalamování
   by je na monitoru rozdělilo na tři a jednu, což vypadá jako chyba. */
@media (min-width: 52rem) {
  .services {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-8);
    row-gap: var(--space-7);
  }
}

/* ==========================================================================
   15. VÝHODY
   ========================================================================== */

/*
  Dlaždice výhod podle inovativy: ikona v zaoblené ploše, tučný nadpis,
  krátký text. Dlaždice jsou oddělené tenkými svislými linkami, ne rámečky.
*/
.advantage__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-6) 0;
}

.advantage__item {
  padding-left: var(--space-5);
  border-left: 1px solid var(--color-border);
  max-width: none;
}

.advantage__icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  background-color: var(--color-accent-soft);
  color: var(--color-accent-text);
}

.advantage__title {
  margin-bottom: var(--space-2);
  font-size: var(--text-lg);
}

.advantage__item p {
  margin-bottom: 0;
  color: var(--color-text-muted);
}

@media (min-width: 40rem) {
  .advantage__list {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7) var(--space-6);
  }
}

/* ==========================================================================
   16. KROKY PROCESU
   ========================================================================== */

.steps {
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

.step {
  max-width: none;
}

/* Krok procesu: ikona v zaoblené ploše a pořadové číslo vedle ní,
   stejně jako na inovativě. */
.step__number {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  max-width: none;
}

.step__icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius-md);
  background-color: var(--color-accent-soft);
  color: var(--color-accent-text);
}

.step__poradi {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}

/* Kroky, které nemají ikonu, ukážou samotné pořadové číslo ve stejné
   zaoblené ploše. Vzhled tak zůstane jednotný, ať už ikona je, nebo není. */
.step__number:not(:has(.step__icon)) {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius-md);
  background-color: var(--color-accent-soft);
  color: var(--color-accent-text);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 800;
}

.step__title {
  margin-bottom: var(--space-3);
  font-size: var(--text-lg);
}

.step p:last-child {
  margin-bottom: 0;
}

/* --- Svislá varianta pro delší postupy ------------------------------------
   Tři kroky se do řady vejdou hezky. Pět už ne, zbyl by osamocený krok
   na druhém řádku. U číslovaného postupu navíc svislá osa lépe ukazuje,
   že kroky jdou po sobě.
   -------------------------------------------------------------------------- */

.steps--vertical {
  display: grid;
  gap: 0;
  max-width: var(--width-narrow);
}

.steps--vertical .step {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  column-gap: var(--space-5);
  padding-bottom: var(--space-6);
}

.steps--vertical .step:last-child {
  padding-bottom: 0;
}

.steps--vertical .step__number {
  grid-row: 1 / span 2;
  /* Ve svislé ose je pod ikonou pořadové číslo, ne vedle ní. */
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: 0;
  position: relative;
}

/* Čára, která spojuje ikony do jedné osy. */
.steps--vertical .step:not(:last-child) .step__number::after {
  content: "";
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 1.625rem;
  width: 2px;
  height: calc(100% + var(--space-4));
  transform: translateX(-50%);
  background-color: var(--color-border);
}

.steps--vertical .step__title {
  align-self: center;
  margin-bottom: var(--space-2);
}

/* ==========================================================================
   17. ČASTÉ DOTAZY
   --------------------------------------------------------------------------
   Postavené na značkách <details> a <summary>, které rozbalování umí samy.
   Nula řádků JavaScriptu, ovládání klávesnicí zdarma a funguje to
   i bez skriptů.
   ========================================================================== */

.faq {
  margin-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.faq__item {
  border-bottom: 1px solid var(--color-border);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-heading);
  cursor: pointer;
  /* Skryje výchozí trojúhelníček prohlížeče, máme vlastní ikonu. */
  list-style: none;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question:hover {
  color: var(--color-primary);
}

.faq__icon {
  flex-shrink: 0;
  color: var(--color-accent);
  transition: transform var(--transition-base);
}

/* Plus se po rozbalení otočí na minus. */
.faq__item[open] .faq__icon {
  transform: rotate(135deg);
}

.faq__answer {
  padding-bottom: var(--space-4);
}

.faq__answer p {
  margin-bottom: 0;
  color: var(--color-text-muted);
}

/* ==========================================================================
   18. VNITŘNÍ STRÁNKY
   ========================================================================== */

/* --- Drobečková navigace -------------------------------------------------- */

.breadcrumbs {
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: none;
  color: var(--color-text-muted);
}

/* Drobečky jsou samostatná navigace, ne odkazy uvnitř textu, takže
   potřebují dost velkou plochu na dotyk. Odkazy uvnitř odstavců se naopak
   roztahovat nesmí, rozhodily by řádkování. */
.breadcrumbs__item a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.breadcrumbs__separator {
  /* Je to jen oddělovač a pro odečítače je skrytý, ale i tak má být
     čitelný. Barva rámečků na něj byla moc světlá. */
  color: var(--color-text-muted);
}

/* --- Úvodní blok vnitřní stránky ------------------------------------------
   Tmavý pruh přes celou šířku okna, jako má inovativa na podstránkách
   služeb. Bílá stránka, která začínala nadpisem v levém rohu, působila
   prázdně a nepřipravená.
   -------------------------------------------------------------------------- */

.page-hero {
  padding-block: clamp(3rem, 6vw, 5.5rem);
  background-color: var(--dotexo-ink);
  background-image: radial-gradient(
      circle at 1px 1px,
      rgba(255, 255, 255, 0.22) 1px,
      transparent 0
    ),
    linear-gradient(115deg, #16243b 0%, #284473 58%, #3a5f9c 100%);
  background-size: 22px 22px, cover;
  color: rgba(255, 255, 255, 0.85);
}

.page-hero__eyebrow {
  display: block;
  margin-bottom: var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.page-hero__title {
  max-width: 20ch;
  margin-bottom: var(--space-4);
  color: #ffffff;
}

.page-hero__subtitle {
  max-width: 46ch;
  margin-bottom: var(--space-6);
  color: rgba(255, 255, 255, 0.85);
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: 0;
  max-width: none;
}

/* Na barevném pruhu je tlačítko bílé, ne tmavě modré. */
.page-hero__actions .button {
  background-color: #ffffff;
  background-image: none;
  color: var(--dotexo-navy);
}

.page-hero__actions .button:hover {
  background-color: var(--dotexo-mint);
  color: var(--dotexo-ink);
}

/*
  První sekce stránky odsazuje nahoře míň než ostatní, ale ne nulově.

  Nula tu byla z doby, kdy sekce navazovala rovnou na úvodní blok
  a odsazení by se sečetlo dvakrát. Mezi ně ale později přibyly drobečky
  s linkou pod sebou, takže nadpis sekce na té lince skoro seděl. Dvě
  rem od ní odsadí a přitom nedělá takovou díru jako plné odsazení sekce
  (tři až šest rem). Blogové články mají shodou okolností stejné dvě rem
  ve svém záhlaví, takže je odsazení pod drobečky na celém webu stejné.

  Je to `first-of-type`, ne `first-child`: stránka lidarového skenu
  začíná blokem se značkou `script`, který by jako první dítě pravidlo
  zablokoval a nadpis by od drobečků odskočil dvakrát dál než jinde.
*/
.page-body > .section:first-of-type {
  padding-top: var(--space-6);
}

.page-body > .section--soft:first-of-type {
  padding-top: var(--section-y);
}

/* --- Kalkulačka úvěru ----------------------------------------------------- */

/*
  Stojí pod tabulkou sazeb na stránkách bezúročného úvěru. Tabulka je
  úplný přehled a musí fungovat bez JavaScriptu; kalkulačka je nástavba
  pro toho, kdo si chce spočítat vlastní dům, a bez skriptu se vůbec
  nezobrazí.
*/
.kalkulacka {
  margin-top: var(--space-7);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg-soft);
}

.kalkulacka__nadpis {
  margin-bottom: var(--space-2);
  font-size: var(--text-2xl);
}

.kalkulacka__perex {
  margin-bottom: var(--space-5);
  max-width: 60ch;
  color: var(--color-text-muted);
}

.kalkulacka__rezim {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding: 0;
  border: 0;
}

.kalkulacka__legenda {
  padding: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
}

.kalkulacka__prepinac,
.kalkulacka__polozka {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* Dotyková plocha, stejně jako u odkazů v patičce. */
  min-height: 2.75rem;
  cursor: pointer;
}

/* Systémové zaškrtávátko má kolem 13 bodů, což se na mobilu špatně
   trefuje. Klikací plocha je sice celý štítek se 44 body, ale menší
   čtvereček vypadá jako drobnost, kterou lze přehlédnout. */
.kalkulacka__prepinac input,
.kalkulacka__polozka input {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  accent-color: var(--color-primary);
}

.kalkulacka__byty {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
}

.kalkulacka__skupina + .kalkulacka__skupina {
  margin-top: var(--space-5);
}

.kalkulacka__skupina-nazev {
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-muted);
}

/*
  Řádek opatření: název, políčko na množství a částka.

  Na monitoru vedle sebe s částkou zarovnanou vpravo, na mobilu se
  políčko s částkou zalomí pod název, protože tři sloupce se do 360 bodů
  čitelně nevejdou.
*/
.kalkulacka__radek {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--space-3);
  padding-block: var(--space-1);
  border-bottom: 1px solid var(--color-border);
}

.kalkulacka__mnozstvi {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.kalkulacka__cislo {
  width: 6rem;
  min-height: 2.75rem;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background-color: var(--color-bg);
  color: var(--color-text);
}

.kalkulacka__cislo:disabled {
  opacity: 0.45;
}

.kalkulacka__castka-radku {
  padding-bottom: var(--space-2);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--color-heading);
}

@media (min-width: 42rem) {
  .kalkulacka__radek {
    grid-template-columns: 1fr auto 8rem;
    align-items: center;
  }

  .kalkulacka__mnozstvi,
  .kalkulacka__castka-radku {
    padding-bottom: 0;
  }

  .kalkulacka__castka-radku {
    text-align: right;
  }
}

.kalkulacka__vysledek {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background-color: var(--color-bg);
}

.kalkulacka__vyzva {
  margin: 0;
  color: var(--color-text-muted);
}

.kalkulacka__castka {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-heading);
  font-variant-numeric: tabular-nums;
}

.kalkulacka__popis {
  margin: var(--space-1) 0 var(--space-3);
  color: var(--color-text-muted);
}

.kalkulacka__poznamka {
  margin: 0;
  font-size: var(--text-sm);
}

.kalkulacka__akce {
  margin: var(--space-5) 0 var(--space-3);
}

.kalkulacka__disclaimer {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* --- Právní stránky ------------------------------------------------------ */

/*
  Nadpisy oddílů o stupeň menší než jinde na webu.

  Obchodní podmínky mají patnáct číslovaných oddílů a zásady jedenáct.
  V běžné velikosti (h2 až 44 bodů) z toho byl seznam nadpisů proložený
  odstavci a text se ztrácel. O stupeň níž je pořád jasně poznat, kde
  oddíl začíná, ale hlavní je text, ne jeho členění.
*/
.pravni h2 {
  font-size: var(--text-2xl);
}

/* Přechod si berou z pravidla u .gradient-text výš, tady jen velikost. */
.pravni h3 {
  font-size: var(--text-xl);
}

/* ==========================================================================
   19. TABULKY
   --------------------------------------------------------------------------
   Tabulky s parametry programů se plní ze souborů v src/_data/programs/.
   Nikdy se nepíšou přímo do textu stránky, protože se částky mění
   několikrát ročně a zákazník je upravuje sám.
   ========================================================================== */

/* Rámeček, ve kterém se dá širokou tabulkou na mobilu posouvat do stran,
   místo aby tlačila celou stránku mimo obrazovku. */
.table-scroll {
  margin-bottom: var(--space-5);
  overflow-x: auto;
  /* Aby bylo poznat, že je čím posouvat. */
  scrollbar-width: thin;
}

.program {
  margin-bottom: var(--space-6);
}

.program__title {
  margin-bottom: var(--space-3);
  font-size: var(--text-lg);
}

.program__desc {
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.program__table,
.data-table {
  width: 100%;
  margin-bottom: 0;
  border-collapse: collapse;
  text-align: left;
}

.program__table th,
.program__table td,
.data-table th,
.data-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.program__table th[scope="row"],
.data-table th[scope="row"] {
  font-weight: 400;
  color: var(--color-text);
}

.data-table thead th {
  border-bottom: 2px solid var(--color-border-strong);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.program__table tr:last-child th,
.program__table tr:last-child td,
.data-table tr:last-child th,
.data-table tr:last-child td {
  border-bottom: 0;
}

.program__table td {
  text-align: right;
  white-space: nowrap;
}

/*
  Tabulky opatření mají druhý sloupec všude na stejném místě.

  Šířku sloupců si jinak spočítá prohlížeč z obsahu, takže skupina
  s dlouhými názvy („Tepelné čerpadlo země-voda nebo voda-voda") odsune
  částky dál než skupina s krátkými. Pod sebou na jedné stránce to
  vypadá, jako by tabulky patřily každá jinam.

  Šedesát ku čtyřiceti je poměr, který obě dnešní skupiny drží zhruba
  samy od sebe, takže se nic nemačká. Platí to jen pro tabulky uvnitř
  bloku opatření: na stránce Ceny je tabulka o třech sloupcích a té by
  pevná šířka prvního sloupce rozhodila zbytek.
*/
.program .data-table {
  table-layout: fixed;
}

.program .data-table th:first-child,
.program .data-table td:first-child {
  width: 60%;
}

.program__value {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-heading);
}

/* Výjimky typu „památky 5 000 Kč/m²", které se do jednoho čísla nevejdou. */
.program__note {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-text-muted);
  white-space: normal;
}

.program__footnote {
  margin-bottom: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.program__links {
  font-size: var(--text-sm);
}

/* Dvě tabulky parametrů vedle sebe, na mobilu pod sebou. */
.programs-pair {
  display: grid;
  gap: var(--space-6);
  margin-bottom: var(--space-5);
}

@media (min-width: 52rem) {
  .programs-pair {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7);
  }
}

/* ==========================================================================
   20. ROZHODOVACÍ STROM
   --------------------------------------------------------------------------
   Stránka /jaky-dokument-potrebuju. Otázky i odpovědi se plní ze souboru
   src/_data/decisionTree.json, obsluhuje js/decision-tree.js.
   ========================================================================== */

/* Strom se ukáže jen tam, kde funguje JavaScript. Třídu `js` nastavuje
   skript v hlavičce ještě před vykreslením stránky, takže se strom
   neobjeví se zpožděním a obsah pod ním neposkočí.

   Bez JavaScriptu zůstane strom skrytý a návštěvník jde rovnou na
   statickou tabulku pod ním, místo aby zíral na tlačítka, která nereagují. */
.tree {
  display: none;
}

.js .tree {
  display: block;
  padding: clamp(var(--space-5), 4vw, var(--space-7));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.tree__progress {
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent-text);
  max-width: none;
}

.tree__step {
  margin: 0;
  padding: 0;
  border: 0;
}

.tree__question {
  padding: 0;
  margin-bottom: var(--space-5);
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
}

.tree__options {
  display: grid;
  gap: var(--space-3);
}

.tree__option {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background-color: var(--color-bg);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-fast),
    background-color var(--transition-fast);
}

.tree__option:hover {
  border-color: var(--color-primary);
  background-color: var(--color-accent-soft);
}

.tree__option-label {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-heading);
}

.tree__option-desc {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* --- Odpověď -------------------------------------------------------------- */

.tree__result-eyebrow {
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent-text);
  max-width: none;
}

.tree__result-title {
  margin-bottom: var(--space-4);
  font-size: var(--text-2xl);
}

.tree__result-text {
  margin-bottom: var(--space-6);
  color: var(--color-text-muted);
}

.tree__result-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: 0;
  max-width: none;
}

.tree__reset {
  margin: var(--space-6) 0 0;
  max-width: none;
}

.tree__reset:has(> [hidden]) {
  margin-top: 0;
}

.tree__reset-button {
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.tree__reset-button:hover {
  color: var(--color-primary);
}

/* ==========================================================================
   21. KONTAKT, PRODUKTY, MAPA
   ========================================================================== */

.contact {
  display: grid;
  gap: var(--space-7);
}

.contact__list {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.contact__item dt {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.contact__item dd {
  margin: var(--space-1) 0 0;
  font-size: var(--text-lg);
  color: var(--color-heading);
}

.contact__cta-title {
  font-size: var(--text-xl);
}

@media (min-width: 56rem) {
  .contact {
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--space-8);
  }
}

/* --- Štítek stavu produktu ------------------------------------------------ */

.product__state {
  margin-bottom: var(--space-3);
  max-width: none;
}

.badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background-color: var(--color-accent-soft);
  /* Čitelnější odstín, protože štítek má drobné písmo na barevném pozadí.
     Značková modrá by na něm měla kontrast jen 4.35:1. */
  color: var(--color-accent-text);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.badge--live {
  background-color: var(--color-mint-soft);
  color: var(--color-success);
}

.product__note {
  margin-bottom: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* --- Mapa ----------------------------------------------------------------- */

.map {
  height: clamp(18rem, 40vh, 26rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  /* Bez tohoto by dlaždice přetekly přes zaoblené rohy. */
  overflow: hidden;
  /* Rezervované místo, aby se stránka po načtení mapy nepřeskládala. */
  background-color: var(--color-bg-soft);
}

/* Značka je vlastní SVG, ne výchozí Leaflet ikona. */
.map__pin {
  background: none;
  border: 0;
}

/* ==========================================================================
   22. BLOG
   ========================================================================== */

.blog-filter {
  margin-bottom: var(--space-6);
}

.blog-filter__label {
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  max-width: none;
}

.blog-filter__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.blog-filter__button {
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background-color: transparent;
  color: var(--color-text);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: border-color var(--transition-fast),
    background-color var(--transition-fast), color var(--transition-fast);
}

.blog-filter__button:hover {
  border-color: var(--color-primary);
}

/* Vybraná kategorie. Rozlišuje se podle aria-pressed, takže stav vidí
   i odečítač obrazovky, ne jen oko. */
.blog-filter__button[aria-pressed="true"] {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

.posts {
  margin: 0;
  padding: 0;
  list-style: none;
}

.post {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  max-width: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.post:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

.post__meta,
.article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: none;
}

.post__title {
  margin-bottom: var(--space-3);
  font-size: var(--text-xl);
}

.post__title a {
  text-decoration: none;
}

/* Kliknutelná je celá karta článku, ne jen nadpis. */
.post__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.post__perex {
  margin-bottom: 0;
  color: var(--color-text-muted);
}

.blog-empty {
  padding: var(--space-6);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  text-align: center;
  color: var(--color-text-muted);
}

/* --- Článek --------------------------------------------------------------- */

.article__header {
  padding-block: var(--space-6) var(--space-5);
}

.article__title {
  margin-bottom: var(--space-4);
}

.article__perex {
  margin-bottom: 0;
}

.article__body {
  padding-bottom: var(--space-8);
}

.article__body h2 {
  margin-top: var(--space-7);
  font-size: var(--text-2xl);
}

.article__body h3 {
  margin-top: var(--space-6);
  font-size: var(--text-xl);
}

.article__body table {
  width: 100%;
  margin-bottom: var(--space-5);
  border-collapse: collapse;
  text-align: left;
}

.article__body th,
.article__body td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.article__body thead th {
  border-bottom: 2px solid var(--color-border-strong);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Odkaz na kategorii v hlavičce článku je tlačítko, ne text v odstavci,
   takže potřebuje dost velkou plochu na dotyk. */
.article__meta .badge {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  text-decoration: none;
}

/* ==========================================================================
   23. TROJROZMĚRNÝ MODEL
   --------------------------------------------------------------------------
   Model se načítá až po kliknutí, viz komentář v partialu model-3d.njk.
   Do té doby je na jeho místě zástupný vizuál s rastrem teček, který
   odkazuje na mračno bodů.
   ========================================================================== */

.model3d {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: var(--dotexo-ink);
  background-image: radial-gradient(
      circle at 1px 1px,
      rgba(255, 255, 255, 0.3) 1px,
      transparent 0
    ),
    linear-gradient(150deg, #101c30 0%, #1b2f4d 55%, #284473 100%);
  background-size: 15px 15px, cover;
}

.model3d__platno {
  aspect-ratio: 16 / 10;
  width: 100%;
}

/* Plátno, na které kreslí knihovna, se musí roztáhnout na celý blok. */
.model3d__platno canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* Výzva ke spuštění leží přes vizuál a po spuštění zmizí. */
.model3d__vyzva {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-6);
  text-align: center;
  /* Jemné ztmavení, aby byl text čitelný i na světlejší části podkladu. */
  background-color: rgba(16, 28, 48, 0.55);
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

.model3d[data-stav="bezi"] .model3d__vyzva {
  opacity: 0;
  visibility: hidden;
}

.model3d__nadpis {
  margin: 0;
  max-width: 24ch;
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: #ffffff;
}

.model3d__text {
  margin: 0;
  max-width: 44ch;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: rgba(255, 255, 255, 0.8);
}

.model3d__tlacitko {
  margin-top: var(--space-2);
  background-color: #ffffff;
  background-image: none;
  color: var(--dotexo-navy);
}

.model3d__tlacitko:hover {
  background-color: var(--dotexo-mint);
  color: var(--dotexo-ink);
}

.model3d__tlacitko:disabled {
  cursor: wait;
  opacity: 0.7;
}

.model3d__poznamka {
  margin: 0;
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.55);
}

/* --------------------------------------------------------------------------
   23.1 Varianta v heru na titulce

   Tady sekvence nekončí složeným modelem, ale prolnutím do vyrenderované
   vizualizace. Obrázky proto leží nad plátnem a přepíná se jejich krytí.

   Denní obrázek je vidět od začátku a je to prvek, podle kterého se měří
   doba do vykreslení největšího prvku. Plátno se odkryje až tím, že mu
   JavaScript stáhne krytí na nulu. Bez JavaScriptu obrázek zůstane, což
   je plnohodnotný stav, ne náhradní.
   -------------------------------------------------------------------------- */

/* Hero nemá rám ani podklad. Dům leží přímo na stránce, stojí na měkkém
   stínu z renderu a nikde nekončí hranou. Vyrenderovaný obrázek je proto
   na průhledném pozadí a plátno je průhledné taky.

   Ukázka na podstránce si tmavý rámeček nechává, tam dává smysl: je to
   ohraničený blok uvnitř textu, ne hlavní vizuál. */
.model3d--hero {
  overflow: visible;
  border-radius: 0;
  background: none;
  box-shadow: none;
  height: 100%;

  /*
    Kde se ze širokoúhlého renderu ukrojí to, co je vidět. Nula je levý
    okraj, jednička pravý. Čte to `object-position` u obrázku i videa
    a stejnou hodnotu si bere JavaScript pro výřez kamery, aby plátno
    ořezávalo úplně stejně.

    Na mobilu se ořezává blíž k levému okraji. Okno je tam mnohem užší
    než render, takže při ořezu na střed by dům, který stojí vlevo,
    zůstal mimo záběr.
  */
  --model-vyrez: 0.12;

  /*
    Kam v plátně padne střed technického výkresu, když kamera vystoupá nad
    dům. Nula je levý okraj, jednička pravý. Čte to JavaScript, protože
    jedině CSS ví, kde leží kruh s nadpisem.

    Na mobilu je z kruhu pruh nad vizuálem, takže výkres má celou šířku
    pro sebe a patří na střed.
  */
  --model-pudorys-stred: 0.5;
}

@media (min-width: 60rem) {
  .model3d--hero {
    --model-vyrez: 0.5;

    /*
      Na monitoru začíná kruh zhruba ve 44 % šířky okna. Volný pruh vlevo
      od něj má tedy něco přes 40 % šířky a výkres se posadí doprostřed
      něj, jen o kousek doprava, aby svislá kóta nelepila na okraj okna.
    */
    --model-pudorys-stred: 0.24;
  }
}

/*
  Na mobilu drží výšku poměr stran, na monitoru vyplní celé hero.

  Poměr obrázku a videa se s tímhle NEMUSÍ shodovat. Renderují se
  širokoúhlé (viz POMER v tools/vizualizace.py) a vykreslují přes
  `object-fit: cover`, takže se ořízne jen prázdno po stranách a svislý
  rozsah zůstane stejný. Přesně tak se chová i kamera v prohlížeči: drží
  svislý zorný úhel a do šířky přibírá. Díky tomu prolnutí sedí na
  jakékoli šířce okna.
*/
.model3d--hero .model3d__platno {
  aspect-ratio: 4 / 3;
  height: 100%;
}

@media (min-width: 60rem) {
  .model3d--hero .model3d__platno {
    aspect-ratio: auto;
  }
}

.model3d__foto {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  /* `cover`, protože obrázek je širokoúhlý a okno bývá užší. Ořízne se
     tím jen prázdno po stranách a svislý rozsah zůstane, což je přesně
     to, co dělá kamera v prohlížeči. */
  object-fit: cover;
  object-position: calc(var(--model-vyrez, 0.5) * 100%) center;
}

/*
  Obrázek se ukazuje jen tam, kde animace neběží.

  Dřív ležel nad plátnem, dokud se model nestáhl, a pak ustoupil. Jenže
  tím na začátku probleskl hotový dům, což prozradilo pointu dřív, než
  sekvence vůbec začala.

  Skrývá se třídou `js`, kterou nastavuje skript v hlavičce ještě před
  vykreslením. Návštěvník bez JavaScriptu tak obrázek vidí, protože se
  k němu pravidlo vůbec nedostane, a nikde není okamžik, kdy by obrázek
  problikl a zase zmizel.

  Vrací se ve třech případech, a vždy je to jediné, co uvidí:
  vypnuté animace, šetření dat (`data-stav="staticky"`, nastavuje
  JavaScript) a chyba při načítání modelu.
*/
.js .model3d__foto {
  opacity: 0;
}

.js .model3d[data-stav="staticky"] .model3d__foto,
.js .model3d[data-stav="chyba"] .model3d__foto {
  opacity: 1;
}

/*
  Konec sekvence: živý model se prolne do obrázku a ten zůstane stát.

  Dům je v tu chvíli zaparkovaný a nehýbe se, obrázek je vyfocený ze
  stejného místa, takže se při prolnutí nic neposune. Plátno zároveň
  odchází, aby model nekoukal zpod obrázku tam, kde se siluety
  nepřekrývají na chlup.

  Dělá to CSS, ne JavaScript: vykreslovací smyčka se v tu chvíli zastavuje
  a přechod krytí prohlížeč dopočítá i bez ní.
*/
.js .model3d[data-stav="stoji"] .model3d__foto {
  opacity: 1;
}

.js .model3d[data-stav="stoji"] .model3d__platno {
  opacity: 0;
}

.model3d__foto,
.model3d__platno {
  transition: opacity 1400ms ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .js .model3d__foto {
    opacity: 1;
  }

  .model3d__foto,
  .model3d__platno {
    transition: none;
  }
}

/* Kóty nad půdorysem. Leží nad plátnem i nad obrázkem, výkres nesmí nic
   překrýt. */
.model3d__koty {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms linear;
}

/* Tmavé čáry na světlém podkladu, jako na papírovém výkrese. */
.model3d__koty line {
  stroke: rgba(33, 56, 88, 0.8);
  stroke-width: 1.25;
}

/* Zdivo v řezu: šrafované, s výraznou obrysovou čarou. Tak se kreslí
   v dokumentaci, kterou Dotexo dodává. */
.model3d__zdivo {
  fill: url(#srafovaniZdiva);
  fill-rule: evenodd;
  stroke: var(--dotexo-ink);
  stroke-width: 1.6;
  stroke-linejoin: round;
}

/* Obrys, který se neuzavřel do smyčky. Vyplnit ho nejde, protože nemá
   vnitřek, takže zůstane jako obyčejná čára. */
.model3d__cara {
  fill: none;
  stroke: rgba(33, 56, 88, 0.55);
  stroke-width: 1;
}

.model3d__koty text {
  fill: var(--dotexo-ink);
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  /* Bílé obtažení, aby byl popisek čitelný i tam, kde překryje stěnu. */
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 3;
}

/* Popis místnosti: název a pod ním plocha, jako ve výkresu. Název je
   větší, plocha drobnější, obojí uvnitř místnosti. */
.model3d__mistnost {
  font-size: 0.75rem;
  font-weight: 700;
}

.model3d__plocha {
  font-size: 0.6875rem;
  font-weight: 500;
  fill: rgba(33, 56, 88, 0.75);
}

/* Štítek výplně otvoru. Ve výkresu je to oválek s odkazovou čarou
   k oknu, tak aby bylo poznat, ke kterému otvoru patří. */
.model3d__stitek {
  fill: #ffffff;
  stroke: var(--dotexo-ink);
  stroke-width: 1;
}

.model3d__znacka {
  /* Deset bodů. Musí souhlasit s PISMO_ZNACKY v js/model-3d.js, protože
     podle té hodnoty se počítá velikost oválku pod textem. Proto se tady
     nesmí použít rem: ta by se změnou velikosti písma v prohlížeči
     rozešla s kresbou a text by z oválku vylezl. */
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  /* Uvnitř oválku nemá co překrývat, obtažení by jen rozmazalo písmo. */
  stroke: none;
}

.model3d__koty line.model3d__odkaz {
  stroke: rgba(33, 56, 88, 0.45);
  stroke-width: 0.75;
}

/* Výšková kóta. Na rozdíl od značky konstrukce je v hranatém rámečku,
   přesně jak se to kreslí ve výkresu: oválek znamená odkaz na skladbu,
   obdélník výšku. */
.model3d__uroven {
  fill: #ffffff;
  stroke: var(--dotexo-ink);
  stroke-width: 1;
}

/* Legenda skladeb a texty razítka. Drobné písmo bez obtažení: leží na
   volné ploše, takže nemá co překrývat. */
.model3d__legenda {
  font-size: 10px;
  font-weight: 600;
  stroke: none;
}

.model3d__legenda--slabsi {
  font-weight: 400;
  fill: rgba(33, 56, 88, 0.7);
}

.model3d__razitko-nadpis {
  /* Devět bodů, ne deset. Razítko je na plátně úzké a delší název akce
     by při desetibodovém písmu přetekl do sloupce s měřítkem. */
  font-size: 9px;
  font-weight: 700;
  stroke: none;
}

.model3d__razitko-popis {
  font-size: 8px;
  font-weight: 400;
  fill: rgba(33, 56, 88, 0.7);
  stroke: none;
}

/* Značka řezu: čára přes výkres, na koncích kolečko a trojúhelník
   ukazující, kterým směrem se na řez díváme. */
.model3d__koty line.model3d__rez {
  stroke: rgba(33, 56, 88, 0.5);
  stroke-width: 1;
  stroke-dasharray: 14 4 3 4;
}

.model3d__smer {
  fill: var(--dotexo-ink);
}

/* Rohové razítko. Jen rámeček s linkami, výplň bílá, aby se pod ním
   neprosvítala kresba. */
.model3d__razitko {
  fill: #ffffff;
  stroke: var(--dotexo-ink);
  stroke-width: 1.2;
}

.model3d__koty line.model3d__razitko-cara {
  stroke: rgba(33, 56, 88, 0.55);
  stroke-width: 0.75;
}

/* Výzva a tlačítko zpět musí být nad obrázky. */
.model3d--hero .model3d__vyzva,
.model3d__zpet {
  z-index: 3;
}

/* V heru je výzva jen tlačítko dole, ne celé překrytí s nadpisem.
   Nadpis nese sekce sama, opakovat ho tady by byl šum. */
/* V heru leží výzva na světlém podkladu, takže žádné ztmavení ani bílý
   text. Je to jen tlačítko dole pod domem. */
.model3d__vyzva--hero {
  align-content: end;
  background: none;
}

.model3d__vyzva--hero .model3d__tlacitko {
  background-color: var(--dotexo-navy);
  color: #ffffff;
}

.model3d__vyzva--hero .model3d__tlacitko:hover {
  background-color: var(--dotexo-ink);
  color: #ffffff;
}

.model3d__vyzva--hero .model3d__poznamka {
  color: var(--color-text-muted);
}

/* Jakmile animace běží nebo dojela, výzva je zbytečná. */
.model3d[data-stav="nacita"] .model3d__vyzva,
.model3d[data-stav="dokonceno"] .model3d__vyzva,
.model3d[data-stav="prohlidka"] .model3d__vyzva {
  opacity: 0;
  visibility: hidden;
}

/* Tlačítko zpátky k modelu se ukáže, až sekvence dojede. */
.model3d__zpet {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-4);
  border: 1px solid rgba(33, 56, 88, 0.25);
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.85);
  color: var(--dotexo-ink);
  font-family: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base),
    background-color var(--transition-base);
}

.model3d[data-stav="dokonceno"] .model3d__zpet {
  opacity: 1;
  visibility: visible;
}

.model3d__zpet:hover {
  background-color: var(--dotexo-navy);
  border-color: var(--dotexo-navy);
  color: #ffffff;
}

/* ==========================================================================
   24. MAPA WEBU
   ========================================================================== */

.sitemap__title {
  margin-bottom: var(--space-3);
  font-size: var(--text-lg);
}

.sitemap__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.sitemap__list a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

/* ==========================================================================
   25. ZVÝRAZNĚNÝ BLOK A ZÁVĚREČNÁ VÝZVA
   ========================================================================== */

.callout {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--color-accent);
  background-color: var(--color-surface);
}

.callout > :last-child {
  margin-bottom: 0;
}

.callout--warning {
  border-left-color: var(--color-error);
}

.callout h2 {
  font-size: var(--text-2xl);
}

.final-cta__box {
  padding: clamp(var(--space-6), 5vw, var(--space-8));
  border-radius: var(--radius-lg);
  background-image: var(--gradient-dark);
  color: #ffffff;
  text-align: center;
}

.final-cta__title {
  margin-bottom: var(--space-4);
  color: #ffffff;
}

.final-cta__text {
  max-width: 46ch;
  margin-inline: auto;
  margin-bottom: var(--space-6);
  color: rgba(255, 255, 255, 0.88);
}

/* ==========================================================================
   26. FORMULÁŘE
   ========================================================================== */

/* Past na roboty. Odsunutá mimo obrazovku, ne `display: none` — to roboti
   poznají a pole přeskočí. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/*
  Kontaktní blok přes celou šířku s vizuálem na pozadí a bílou kartou
  formuláře nad ním. Na inovativě je tam fotka týmu, u Dotexa zatím
  zástupný rastr teček odkazující na mračno bodů z lidarového skenu.
*/
.contact-band {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3rem, 7vw, 6rem);
  background-color: var(--dotexo-ink);
  background-image: radial-gradient(
      circle at 1px 1px,
      rgba(255, 255, 255, 0.28) 1px,
      transparent 0
    ),
    linear-gradient(120deg, #16243b 0%, #284473 55%, #3a5f9c 100%);
  background-size: 20px 20px, cover;
}

.contact-band__inner {
  display: grid;
  gap: var(--space-6);
}

.contact-band__text {
  color: rgba(255, 255, 255, 0.85);
}

.contact-band__text .section__title {
  background-image: none;
  color: #ffffff;
}

.contact-band__text .eyebrow {
  color: rgba(255, 255, 255, 0.7);
}

/* Bílá karta, ve které sedí formulář. */
.contact-band__card {
  padding: clamp(var(--space-5), 4vw, var(--space-7));
  border-radius: var(--radius-lg);
  background-color: var(--color-bg);
  box-shadow: 0 30px 70px rgba(16, 16, 20, 0.35);
}

.contact-band__card .form {
  margin-top: 0;
}

@media (min-width: 60rem) {
  .contact-band__inner {
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--space-8);
    align-items: center;
  }
}

/* --- Kontaktní formulář --------------------------------------------------- */

.form {
  margin-top: var(--space-6);
}

.form__grid {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.form__field {
  margin: 0;
  max-width: none;
}

.form__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-heading);
}

.form__required {
  color: var(--color-error);
}

.form__input {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background-color: var(--color-bg);
  color: var(--color-text);
  transition: border-color var(--transition-fast);
}

.form__input:hover {
  border-color: var(--color-primary);
}

.form__textarea {
  min-height: 8rem;
  padding-block: var(--space-3);
  resize: vertical;
}

/* Pole, které má zabrat celou šířku i ve dvousloupcovém rozvržení. */
.form__field--full {
  grid-column: 1 / -1;
}

.form__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: none;
}

.form__consent input {
  flex-shrink: 0;
  /* Zaškrtávátko bývá drobné, tady je zvětšené na rozumnou plochu. */
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2rem;
  accent-color: var(--color-primary);
}

.form__note {
  margin-bottom: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Vysvětlení, které se ukáže místo formuláře, dokud není napojený. */
.form--placeholder {
  padding: var(--space-5);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-soft);
}

.form--placeholder p {
  margin-bottom: 0;
}

@media (min-width: 42rem) {
  .form__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4) var(--space-5);
  }
}

/* Hláška po odeslání formuláře. */
.form__status:empty {
  display: none;
}

.form__status {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
}

.form__status[data-state="success"] {
  color: var(--color-success);
}

.form__status[data-state="error"] {
  color: var(--color-error);
}

/* V patičce je tmavé pozadí, tam potřebuje hláška světlejší odstíny. */
.site-footer .form__status[data-state="success"] {
  color: var(--dotexo-mint);
}

.site-footer .form__status[data-state="error"] {
  color: #ff8a80;
}

/* ==========================================================================
   27. PŘÍSTUPNOST
   ========================================================================== */

/* Odkaz pro přeskočení na obsah. Je vidět až po stisku tabulátoru,
   slouží lidem, kteří web ovládají klávesnicí nebo čtečkou. */
.skip-link {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  text-decoration: none;
  /* Posune se mimo obrazovku, ale zůstane čitelný pro čtečky. */
  transform: translateY(-200%);
  transition: transform var(--transition-fast);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* Viditelný rámeček kolem prvku, na kterém je právě klávesnicový fokus.
   Bez něj se web nedá ovládat bez myši. */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Text jen pro čtečky obrazovky, vizuálně skrytý. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Někteří lidé mají v systému vypnuté animace, protože jim způsobují
   nevolnost nebo je ruší. Respektujeme to. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}