/* =============================================================
   Ing. Jakub Brázda - trenérská vizitka
   styles.css

   Obsah:
   1. Design systém (proměnné)
   2. Reset & základy
   3. Layout (container, sekce)
   4. Typografie
   5. Tlačítka & ikony
   6. Header / navigace
   7. Hero
   8. O mně
   9. Služby (karty)
   10. Proces (timeline)
   11. Reference (citace)
   12. Kontakt (formulář)
   13. Footer
   14. Animace (reveal)
   15. Responzivita
   ============================================================= */


/* =============================================================
   1. DESIGN SYSTÉM
   ============================================================= */

:root {

  /* ---- AKCENTOVÁ BARVA ----------------------------------
     Chceš jinou barvu? Přepiš --accent a --accent-deep.
     Zbytek (glow, hover, tinty) se dopočítá sám.

     Varianty k vyzkoušení:
       lightsaber červená  #FF2E2E / #C40D0D   ← aktuální
       elektrická modrá    #3B82F6 / #1D4ED8
       limetková           #A3E635 / #65A30D
       sytá oranžová       #F97316 / #C2410C
     -------------------------------------------------------- */
  --accent:       #FF2E2E;   /* hlavní - CTA, podtržení, ikony */
  --accent-deep:  #C40D0D;   /* tmavší - hover na plných tlačítkách */
  --accent-hot:   #FF6B6B;   /* světlejší - akcentový text na tmavém pozadí */
  --accent-glow:  rgb(255 46 46 / 0.30);
  --accent-soft:  rgb(255 46 46 / 0.08);
  --on-accent:    #08090C;   /* text NA akcentu - tmavý, jako jádro čepele */

  /* ---- Neonová záře ----------------------------------------
     Vrstvené stíny: ostré jádro + široký bloom. Jedna vrstva
     vypadá jako rozmazaný stín, teprve dvě až tři jako neon.
     Používat na hrany, linky a ikony - NIKDY na běžný text,
     rozpila by se čitelnost.
     -------------------------------------------------------- */
  --neon-sm: 0 0 4px rgb(255 46 46 / 0.85), 0 0 12px rgb(255 46 46 / 0.45);
  --neon:    0 0 5px rgb(255 46 46 / 0.90), 0 0 18px rgb(255 46 46 / 0.50), 0 0 44px rgb(255 46 46 / 0.22);
  --neon-lg: 0 0 6px rgb(255 46 46 / 1.00), 0 0 26px rgb(255 46 46 / 0.55), 0 0 70px rgb(255 46 46 / 0.30);

  /* ---- Černá škála - leštěné sklo (světlá → tmavá) ---- */
  --ink-700: #0C0E13;  /* světlejší sekce */
  --ink-800: #07080C;  /* tmavší sekce */
  --ink-900: #030305;  /* footer, hero overlay, citát */
  --surface: #0E1116;  /* karty */
  --surface-hi: #141821;  /* karty hover */
  --line:    #232935;  /* linky, okraje */

  /* ---- Sklo ----
     Odlesk světla dopadajícího shora zleva. Bez něj je černá
     plocha jen díra; tímhle začne vypadat jako leštěný panel. */
  --glass-sheen: linear-gradient(157deg,
                   rgb(255 255 255 / 0.075) 0%,
                   rgb(255 255 255 / 0.025) 20%,
                   transparent 44%);
  --glass-edge: rgb(255 255 255 / 0.10);  /* horní hrana skla */

  /* ---- Text ---- */
  --text-hi:  #F3F5F9;
  --text-mid: #AAB2C0;
  --text-lo:  #767E8E;

  /* ---- Stavové barvy ----
     Záměrně NE červená - akcent je červený a hlásky by se pletly s CTA. */
  --warn:    #FFB020;
  --success: #34D399;

  /* ---- Typografie ----
     Jen DVĚ rodiny a jasně vymezené role, ať web nepůsobí "moc fonty":
       Space Grotesk … nadpisy, čísla a VERZÁLKOVÉ popisky
       Inter          … běžný text a zvýraznění v něm

     Prostrkání je sjednotné přes tokeny - všechny popisky mají
     stejné, všechny nadpisy stejné. Tím zmizí pocit, že je tu
     víc druhů písma, i když jde pořád o týž Space Grotesk. */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --ls-tight: -0.02em;  /* nadpisy - stažené k sobě */
  --ls-label: 0.12em;   /* všechny verzálkové popisky - jednotně */

  /* fluidní velikosti - škálují se plynule mezi mobilem a desktopem */
  --fs-hero:  clamp(2.6rem, 7vw + 0.5rem, 5.5rem);
  --fs-h2:    clamp(2rem, 3.5vw + 0.5rem, 3.25rem);
  --fs-h3:    clamp(1.15rem, 0.8vw + 0.9rem, 1.4rem);
  --fs-lead:  clamp(1.05rem, 0.6vw + 0.9rem, 1.25rem);
  --fs-body:  1rem;
  --fs-small: 0.875rem;
  --fs-tiny:  0.78rem;

  /* ---- Spacing (8px základ) ---- */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4rem;
  --sp-7: 6rem;
  --sp-8: 8rem;

  --section-y: clamp(4.5rem, 9vw, 8.5rem);

  /* ---- Tvary ----
     Imperiální design je hranatý. Zaoblení držíme skoro na nule -
     jen tolik, aby hrana nekousala. --radius-pill zůstává jen pro
     avatary a kulaté prvky, ne pro tlačítka. */
  --radius-sm: 2px;
  --radius:    3px;
  --radius-lg: 4px;
  --radius-pill: 999px;

  /* ---- Stíny ----
     Na leštěném skle musí být stín černý, ne šedý - šedá by
     na téhle paletě vypadala jako zaprášené sklo. */
  --shadow-sm: 0 2px 10px rgb(0 0 0 / 0.6);
  --shadow:    0 12px 34px rgb(0 0 0 / 0.7);
  --shadow-lg: 0 28px 70px rgb(0 0 0 / 0.85);
  --shadow-accent: 0 6px 26px rgb(255 46 46 / 0.35);

  /* ---- Pohyb ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 0.18s var(--ease);
  --t:      0.28s var(--ease);

  /* ---- Layout ---- */
  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --header-h: 72px;
}


/* =============================================================
   2. RESET & ZÁKLADY
   ============================================================= */

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

* { margin: 0; }

html {
  scroll-behavior: smooth;
  /* aby kotvy nekončily pod fixním headerem */
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text-mid);
  background: var(--ink-800);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

img { height: auto; }

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

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

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

/* ---- Focus states - viditelné pro klávesnici, ne pro myš ---- */
:focus-visible {
  outline: 2px solid var(--accent-hot);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Skip link pro čtečky/klávesnici ---- */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--sp-2);
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: top var(--t);
}
.skip-link:focus { top: var(--sp-2); }

/* ---- Respekt k systémovému nastavení "omezit pohyb" ---- */
@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;
  }
}


/* =============================================================
   3. LAYOUT
   ============================================================= */

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

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

/* Střídání odstínů dává scrollování rytmus - obojí zůstává tmavé. */
.section--light { background: var(--ink-700); }
.section--dark  { background: var(--ink-800); }

/* jemná dělící linka mezi sekcemi */
.section + .section { border-top: 1px solid rgb(255 255 255 / 0.04); }

.section__head {
  max-width: 640px;
  margin-bottom: var(--sp-6);
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}


/* =============================================================
   4. TYPOGRAFIE
   ============================================================= */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: var(--ls-tight);
  color: var(--text-hi);
  text-wrap: balance;
}

.section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent-hot);
  margin-bottom: var(--sp-2);
}

/* krátká neonová čárka před eyebrow textem */
.section__eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--accent);
  box-shadow: var(--neon-sm);
}

.section__head--center .section__eyebrow { justify-content: center; }

.section__title {
  font-size: var(--fs-h2);
  margin-bottom: var(--sp-3);
}

.section__lead {
  font-size: var(--fs-lead);
  color: var(--text-mid);
  text-wrap: pretty;
}

/* červené podtržení pod slovem v nadpisu - světelná čepel */
.accent-underline {
  position: relative;
  display: inline-block;
  color: var(--text-hi);
}
/* Záporný bottom sype čáru pod účaří textu. V em, aby odstup
   držel poměr i když nadpis přeškáluje z mobilu na desktop. */
.accent-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.12em;
  height: 0.07em;
  background: var(--accent);
  /* žádné zaoblení - neonová trubice má rovné konce */
  box-shadow: var(--neon-lg);
}


/* =============================================================
   5. TLAČÍTKA & IKONY
   ============================================================= */

/* Lineární SVG ikony (styl Lucide) - inline, žádné CDN.
   Barvu dědí z rodiče přes currentColor. */
.icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn {
  --btn-py: 0.85rem;
  --btn-px: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: var(--btn-py) var(--btn-px);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--t-fast), background-color var(--t-fast),
              border-color var(--t-fast), box-shadow var(--t-fast), color var(--t-fast);
}

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

/* Plné červené tlačítko s tmavým textem - kontrast 5.3:1.
   Tmavý text čte jako žhavé jádro čepele a okolní záře jako výboj. */
.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--neon-sm), var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--accent-hot);
  transform: translateY(-2px);
  box-shadow: var(--neon), var(--shadow);
}

/* Obrysové tlačítko = zhasnutá neonová trubice, hover ji rozsvítí */
.btn--ghost {
  background: rgb(255 255 255 / 0.02);
  color: var(--text-hi);
  border-color: var(--line);
}
.btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent-hot);
  transform: translateY(-2px);
  box-shadow: var(--neon-sm), inset 0 0 18px rgb(255 46 46 / 0.10);
}

.btn--block { width: 100%; }

.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}


/* =============================================================
   6. HEADER / NAVIGACE
   ============================================================= */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background-color var(--t), box-shadow var(--t), backdrop-filter var(--t);
}

/* třídu přidává script.js po odscrollování */
.site-header.is-scrolled {
  background: rgb(9 10 14 / 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.06), var(--shadow-sm);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-hi);
  transition: color var(--t-fast);
}
.logo:hover { color: var(--accent-hot); }

/* malá svislá čepel místo loga */
.logo__mark {
  width: 3px;
  height: 22px;
  background: var(--accent);
  box-shadow: var(--neon);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.nav__link {
  position: relative;
  display: inline-block;
  padding: 0.5rem 0.9rem;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text-mid);
  border-radius: var(--radius-sm);
  transition: color var(--t-fast);
}

/* podtržení vyjíždí ze středu */
.nav__link::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.25rem;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform var(--t);
}
.nav__link:hover { color: var(--text-hi); }
.nav__link:hover::after { transform: scaleX(1); }

/* aktivní sekce - třídu nastavuje scrollspy v script.js */
.nav__link.is-active { color: var(--text-hi); }
.nav__link.is-active::after { transform: scaleX(1); }

.nav__link--cta {
  margin-left: 0.5rem;
  padding: 0.6rem 1.2rem;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  box-shadow: var(--neon-sm);
  transition: background-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.nav__link--cta::after { display: none; }
.nav__link--cta:hover {
  background: var(--accent-hot);
  color: var(--on-accent);
  box-shadow: var(--neon);
  transform: translateY(-1px);
}

/* ---- Přepínač jazyka CZ | EN ----
   Funkčně jsou to dva odkazy mezi českou a anglickou verzí (každá je
   samostatná stránka na vlastní adrese - kvůli SEO, ne přepínání textu). */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  margin-left: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: var(--ls-label);
}
.lang-switch__opt {
  padding: 0.4rem 0.5rem;
  color: var(--text-lo);
  border-radius: var(--radius-sm);
  transition: color var(--t-fast);
}
.lang-switch__opt:hover { color: var(--text-hi); }
.lang-switch__opt.is-active { color: var(--accent-hot); }
.lang-switch__sep { color: var(--line); }

/* seskupení přepínače + tlačítka vpravo v hlavičce právní stránky */
.header__end { display: inline-flex; align-items: center; gap: var(--sp-2); }
.header__end .lang-switch { margin-left: 0; }

/* ---- Hamburger (jen mobil) ---- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--t-fast);
}
.nav-toggle:hover { border-color: var(--accent); }

.nav-toggle__bar {
  width: 18px;
  height: 2px;
  margin-inline: auto;
  background: var(--text-hi);
  border-radius: 2px;
  transition: transform var(--t), opacity var(--t-fast);
}

/* hamburger → křížek */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* =============================================================
   7. HERO
   ============================================================= */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + var(--sp-5));
  padding-bottom: var(--sp-6);
  overflow: hidden;
  background: var(--ink-900);
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  /* Odbarvení POUZE u hero fotky - odsouhlaseno.
     Fotky v balíčku v sekci O mně zůstávají barevné.
     Ztmavení nedělá filtr, ale gradient nad fotkou (.hero__overlay),
     aby šlo vypnout bez zásahu do obrazu. */
  filter: grayscale(1);
}

/* Trojitý gradient: zleva tma pro čitelnost textu, shora pro navigaci,
   zespodu splynutí s citátovým pruhem. */
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      rgb(3 3 5 / 0.96) 0%,
      rgb(3 3 5 / 0.84) 45%,
      rgb(3 3 5 / 0.50) 100%),
    linear-gradient(to bottom,
      rgb(3 3 5 / 0.88) 0%,
      rgb(3 3 5 / 0.30) 35%,
      rgb(3 3 5 / 1) 100%);
}

/* Obal drží zarovnání se zbytkem stránky (max-width 1200, vycentrováno). */
.hero__container {
  position: relative;
  z-index: 1;
}

/* Vnitřek omezuje šířku textu. Je to blokový prvek bez auto margins,
   takže zůstává u levého okraje - nevycentruje se. */
.hero__content {
  max-width: 780px;
}

.hero__title {
  font-size: var(--fs-hero);
  /* Větší než u ostatních nadpisů: neonová čára visí pod účařím,
     takže z tohohle odstupu si ukrojí ~11 px. */
  margin-bottom: var(--sp-4);
  text-shadow: 0 2px 30px rgb(0 0 0 / 0.5);
}

.hero__subtitle {
  max-width: 52ch;
  font-size: var(--fs-lead);
  color: var(--text-mid);
  margin-bottom: var(--sp-4);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid rgb(255 255 255 / 0.10);
}

.hero__stats li {
  display: flex;
  flex-direction: column;
}
.hero__stats strong {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
  /* stejné stažené prostrkání jako nadpis, ať čísla čtou stejně */
  letter-spacing: var(--ls-tight);
  color: var(--text-hi);
}
.hero__stats span {
  font-size: var(--fs-small);
  color: var(--text-lo);
}

/* =============================================================
   7b. CITÁT / MANIFEST
   Celoplošný pruh mezi hero a sekcí O mně. Hero i tenhle pruh
   jsou tmavé, proto ho odlišuje červená záře a čepel nahoře -
   jinak by obojí splynulo v jednu plochu.
   ============================================================= */

.quote-band {
  position: relative;
  padding-block: clamp(4rem, 8vw, 7rem);
  background: var(--ink-900);
  overflow: hidden;
  text-align: center;
}

/* červená záře za textem */
.quote-band::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(760px, 95%);
  aspect-ratio: 2 / 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgb(255 46 46 / 0.13), transparent 70%);
  pointer-events: none;
}

.manifesto {
  position: relative; /* nad záři */
  max-width: 900px;
  margin-inline: auto;
  /* prolnutí při střídání citátů (řídí script.js) */
  transition: opacity 0.35s var(--ease);
}

/* Jemné ovládání citátů - nenápadné tmavě šedé šipky ‹ ›.
   Klidové jsou skoro neviditelné, hover/fokus je zvýrazní. */
.quote-nav {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: var(--sp-3);
}
.quote-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--text-lo);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  opacity: 0.4;
  transition: opacity var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.quote-nav__btn:hover {
  opacity: 1;
  color: var(--text-mid);
  border-color: var(--line);
}
.quote-nav__btn .icon { width: 20px; height: 20px; }

.manifesto blockquote p {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3.2vw + 0.6rem, 2.9rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: var(--ls-tight);
  color: var(--text-hi);
  text-wrap: balance;
}

.manifesto__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  margin-top: var(--sp-3);
}

.manifesto__author {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent-hot);
}
.manifesto__author::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

/* anglický originál - drobně a ztlumeně jako zdroj pod překladem.
   Bez kurzívy: ta se čte jako další druh písma. Odliší ho velikost
   a tlumená barva, ne řez. */
.manifesto__orig {
  max-width: 48ch;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-lo);
  text-wrap: pretty;
}


/* =============================================================
   8. O MNĚ
   ============================================================= */

.about {
  display: grid;
  gap: var(--sp-5);
  align-items: center;
}

/* ---- Balíček fotek ----
   Karty leží na sobě, zadní vykukují. Vrchní odletí doprava
   a zařadí se dozadu - jako když sesbíráš karty z hromádky.
   Rozvržení dělá JS (transform + z-index), CSS jen vzhled a přechody. */

.deck {
  position: relative;
  /* Zadní karty se posouvají o 27px doprava a nahoru (3 × 9px).
     Bez téhle rezervy by je na mobilu ořízl okraj displeje. */
  padding: 0 30px 0 0;
}

.deck__stack {
  position: relative;
  aspect-ratio: 3 / 4;
}

.deck__card {
  position: absolute;
  inset: 0;
  border: 1px solid var(--line);
  border-top-color: var(--glass-edge);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  transform-origin: center bottom;
  will-change: transform;
  transition: transform 0.45s var(--ease), opacity 0.45s var(--ease),
              box-shadow var(--t);
}

/* Fotky se nepřebarvují - žádný filter. Odlišení vrchní karty
   řeší jen červený rámeček a záře, ne zásah do obrazu. */
.deck__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Vrchní karta - rámeček dává najevo, která je "na řadě" */
.deck__card.is-front {
  border-color: rgb(255 46 46 / 0.28);
  box-shadow: var(--shadow-lg), 0 0 34px rgb(255 46 46 / 0.10);
}

/* Odlétající karta - JS ji po doběhnutí přeřadí dozadu */
.deck__card.is-leaving {
  transform: translateX(115%) rotate(9deg) !important;
  opacity: 0;
}

/* ---- Ovládání ---- */
.deck__controls {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.deck__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px - pohodlný cíl pro prst */
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--text-hi);
  background: var(--glass-sheen), var(--surface);
  border: 1px solid var(--line);
  border-top-color: var(--glass-edge);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast),
              box-shadow var(--t-fast), transform var(--t-fast);
}
.deck__btn:hover {
  color: var(--accent-hot);
  border-color: var(--accent);
  box-shadow: var(--neon-sm);
}
.deck__btn:active { transform: translateY(1px); }

.deck__counter {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  color: var(--text-lo);
}
.deck__counter-sep { margin: 0 0.35rem; color: var(--line); }
#deck-current { color: var(--accent-hot); }

/* Bez animace přeskočí karta rovnou - žádné lítání po obrazovce. */
@media (prefers-reduced-motion: reduce) {
  .deck__card { transition: none; }
  .deck__card.is-leaving { opacity: 0; transform: none !important; }
}

.about__body > p:not(.section__eyebrow) { margin-bottom: var(--sp-2); }

/* ---- Certifikace ---- */
.creds {
  display: grid;
  gap: 0.75rem;
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}

/* Certifikátů je hodně a delší se zalamují na víc řádků,
   proto zarovnáváme k hornímu okraji - ikona pak drží u prvního řádku. */
.creds li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--text-mid);
  line-height: 1.5;
}
.creds li strong {
  font-weight: 600;
  color: var(--text-hi);
}
.creds .icon {
  color: var(--accent);
  width: 18px;
  height: 18px;
  margin-top: 0.15em; /* opticky srovná ikonu s výškou písma */
}


/* =============================================================
   9. SLUŽBY (KARTY)
   ============================================================= */

.cards {
  display: grid;
  gap: var(--sp-3);
}

/* Celá karta je odkaz na formulář, ne jen text uvnitř.
   Proto cursor: pointer a vlastní focus stav - bez něj by
   uživatel klávesnice nevěděl, na které kartě stojí. */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  padding: var(--sp-4);
  /* dvě vrstvy: odlesk světla nahoře + samotné sklo pod ním */
  background: var(--glass-sheen), var(--surface);
  border: 1px solid var(--line);
  border-top-color: var(--glass-edge);   /* horní hrana skla chytá světlo */
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgb(255 255 255 / 0.04);
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t),
              border-color var(--t), background-color var(--t);
}

/* neonová linka nahoře, rozsvítí se při hoveru */
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--accent);
  box-shadow: var(--neon-sm);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t);
}

/* šikmý odlesk přejíždějící přes sklo - jen na hover */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%,
              rgb(255 255 255 / 0.05) 45%, transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t);
}

/* Fokus z klávesnice dostane stejnou odezvu jako hover myší.
   Obrys navíc přidává globální pravidlo pro :focus-visible. */
.card:hover,
.card:focus-visible {
  transform: translateY(-6px);
  background: var(--glass-sheen), var(--surface-hi);
  border-color: rgb(255 46 46 / 0.30);
  box-shadow: var(--shadow-lg), 0 0 30px rgb(255 46 46 / 0.10),
              inset 0 1px 0 rgb(255 255 255 / 0.06);
}
.card:hover::before,
.card:focus-visible::before { transform: scaleX(1); }

.card:hover::after,
.card:focus-visible::after { opacity: 1; }

.card:active { transform: translateY(-2px); }

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: var(--sp-2);
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgb(255 46 46 / 0.25);
  border-radius: var(--radius);
  /* ikona sama září - jako podsvícený panel */
  filter: drop-shadow(0 0 5px rgb(255 46 46 / 0.55));
  transition: background-color var(--t), box-shadow var(--t), filter var(--t);
}
.card:hover .card__icon,
.card:focus-visible .card__icon {
  background: rgb(255 46 46 / 0.14);
  box-shadow: var(--neon-sm), inset 0 0 16px rgb(255 46 46 / 0.15);
  filter: drop-shadow(0 0 8px rgb(255 46 46 / 0.85));
}
.card__icon .icon { width: 24px; height: 24px; }

.card__title {
  font-size: var(--fs-h3);
  margin-bottom: 0.6rem;
}

.card__text {
  font-size: var(--fs-small);
  color: var(--text-mid);
  margin-bottom: var(--sp-2);
  /* posune cenu na spodek, karty pak mají zarovnané paty */
  flex-grow: 1;
}

.card__price {
  font-size: var(--fs-small);
  color: var(--text-lo);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line);
}
.card__price strong {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--text-hi);
}

/* Upřesnění pod cenou (minimální odběr, "podle rozsahu"…).
   Na samostatném řádku - v závorce za cenou by to tlačilo
   hlavní číslo do zalomení. */
.card__note {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--fs-tiny);
  line-height: 1.65;
  color: var(--text-lo);
}

/* Poznámku má jen část karet. Jejich cenový blok je proto o řádek
   vyšší a oddělovací čára nad cenou jim sedí výš než ostatním -
   odkazy dole lícují (drží je spodek karty), ale čáry plavou.
   Karty bez poznámky si ten řádek rezervují prázdným místem.
   Řešíme to tady, a ne dopisováním textu do karet, aby zarovnání
   drželo i po přepsání popisů. */
.card__price:not(:has(.card__note))::after {
  content: "";
  display: block;
  margin-top: 0.15rem;
  height: calc(var(--fs-tiny) * 1.65);
}

/* =============================================================
   10. PROCES (TIMELINE)
   ============================================================= */

.timeline {
  display: grid;
  gap: var(--sp-3);
  counter-reset: step;
}

.step {
  position: relative;
  padding: var(--sp-3);
  padding-left: var(--sp-5);
  background: var(--glass-sheen), rgb(255 255 255 / 0.015);
  border: 1px solid var(--line);
  border-top-color: var(--glass-edge);
  border-radius: var(--radius);
  transition: border-color var(--t), background-color var(--t),
              transform var(--t), box-shadow var(--t);
}
.step:hover {
  transform: translateY(-4px);
  border-color: rgb(255 46 46 / 0.30);
  background: var(--glass-sheen), rgb(255 255 255 / 0.03);
  box-shadow: 0 0 24px rgb(255 46 46 / 0.08);
}

/* Číslo kroku je jediné místo, kde nechávám neon přímo na textu.
   Jsou to dvě číslice v displejovém řezu, ne souvislý text -
   čitelnost to neohrozí a působí to jako podsvícený panel. */
.step__num {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent-hot);
  text-shadow: 0 0 8px rgb(255 46 46 / 0.7);
}

.step__title {
  font-size: var(--fs-h3);
  margin-bottom: 0.4rem;
}

.step__text {
  font-size: var(--fs-small);
  color: var(--text-mid);
}


/* =============================================================
   10b. FAQ (časté dotazy)
   Accordion přes nativní <details>/<summary> - bez JS, přístupné
   a odpovědi jsou v DOM (čitelné pro vyhledávače i se zavřeným).
   ============================================================= */

.faq {
  display: grid;
  gap: var(--sp-2);
  max-width: 820px;
  margin-inline: auto;
}

.faq__item {
  background: var(--glass-sheen), var(--surface);
  border: 1px solid var(--line);
  border-top-color: var(--glass-edge);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--t), box-shadow var(--t);
}
.faq__item[open] {
  border-color: rgb(255 46 46 / 0.30);
  box-shadow: 0 0 24px rgb(255 46 46 / 0.07);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-3);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-hi);
  cursor: pointer;
  list-style: none;
  transition: color var(--t-fast);
}
/* skryje výchozí trojúhelník <summary> */
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--accent-hot); }

/* šipka: dolů zavřené, nahoru otevřené */
.faq__q::after {
  content: "";
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  margin-left: var(--sp-2);
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform var(--t);
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg); }

.faq__a {
  padding: 0 var(--sp-3) var(--sp-3);
  font-size: var(--fs-small);
  color: var(--text-mid);
}
.faq__a p { margin: 0; }
.faq__a a {
  color: var(--accent-hot);
  border-bottom: 1px solid rgb(255 46 46 / 0.4);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.faq__a a:hover { color: var(--accent); border-bottom-color: var(--accent); }


/* =============================================================
   11. REFERENCE (CITACE)
   ============================================================= */

.quotes {
  display: grid;
  gap: var(--sp-3);
}

.quote {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-4);
  background: var(--glass-sheen), var(--surface);
  border: 1px solid var(--line);
  border-top-color: var(--glass-edge);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgb(255 255 255 / 0.04);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.quote:hover {
  transform: translateY(-6px);
  border-color: rgb(255 46 46 / 0.28);
  box-shadow: var(--shadow-lg), 0 0 28px rgb(255 46 46 / 0.09),
              inset 0 1px 0 rgb(255 255 255 / 0.06);
}

.quote__mark {
  width: 28px;
  height: 28px;
  margin-bottom: var(--sp-2);
  fill: var(--accent);
  stroke: none;
  opacity: 0.45;
  filter: drop-shadow(0 0 6px rgb(255 46 46 / 0.5));
  transition: opacity var(--t), filter var(--t);
}
.quote:hover .quote__mark {
  opacity: 0.8;
  filter: drop-shadow(0 0 9px rgb(255 46 46 / 0.8));
}

.quote blockquote {
  flex-grow: 1;
  margin-bottom: var(--sp-3);
}
.quote blockquote p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-hi);
  text-wrap: pretty;
}

.quote__author {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line);
}

.quote__avatar {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--line);
  transition: border-color var(--t);
}
.quote:hover .quote__avatar { border-color: var(--accent); }

.quote__author span {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.quote__author strong {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  color: var(--text-hi);
}
.quote__author em {
  font-style: normal;
  font-size: var(--fs-tiny);
  color: var(--accent-hot);
}


/* =============================================================
   12. KONTAKT (FORMULÁŘ)
   ============================================================= */

.contact {
  display: grid;
  gap: var(--sp-5);
  align-items: start;
}

.contact__list {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.contact__list li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: var(--fs-body);
  color: var(--text-hi);
}
.contact__list .icon { color: var(--accent); }

.contact__list a {
  transition: color var(--t-fast);
  border-bottom: 1px solid transparent;
}
.contact__list a:hover {
  color: var(--accent-hot);
  border-bottom-color: var(--accent);
}

/* ---- Formulář ---- */
.form {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--glass-sheen), var(--surface);
  border: 1px solid var(--line);
  border-top-color: var(--glass-edge);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow), inset 0 1px 0 rgb(255 255 255 / 0.04);
}

.form__row { display: grid; gap: 0.4rem; }

/* Popisky polí patří k textu, ne k nadpisům - proto Inter (jako
   zbytek běžného textu), jen tučnější. Dřív to byl Space Grotesk,
   který mezi Inter poli působil jako cizí písmo. */
.form__label {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-hi);
}

.form__input {
  width: 100%;
  padding: 0.8rem 1rem;
  font-size: var(--fs-body);
  color: var(--text-hi);
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
}

.form__input::placeholder { color: var(--text-lo); }

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

/* Aktivní pole se rozsvítí jako podsvícený ovládací panel.
   Neon je na rámečku, ne na textu - zadaný text musí zůstat ostrý. */
.form__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--neon-sm),
              inset 0 0 14px rgb(255 46 46 / 0.07);
}

.form__input--area {
  resize: vertical;
  min-height: 120px;
  font-family: var(--font-body);
}

/* Chybový stav - oranžová, ne červená.
   Červená je akcent/CTA a hlásky by se s ní pletly. */
.form__input.is-invalid {
  border-color: var(--warn);
}
.form__input.is-invalid:focus {
  box-shadow: 0 0 0 3px rgb(255 176 32 / 0.15);
}

.form__error {
  min-height: 1.1rem;
  font-size: var(--fs-tiny);
  color: var(--warn);
}

.form__honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* Informace o zpracování údajů pod tlačítkem. Drobně - má to
   být dostupné, ne aby to křičelo přes celý formulář. */
.form__legal {
  font-size: var(--fs-tiny);
  line-height: 1.5;
  color: var(--text-lo);
  text-align: center;
}
.form__legal a {
  color: var(--accent-hot);
  border-bottom: 1px solid rgb(255 46 46 / 0.4);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.form__legal a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.form__status {
  min-height: 1.4rem;
  font-size: var(--fs-small);
  text-align: center;
}
.form__status.is-success { color: var(--success); }
.form__status.is-error   { color: var(--warn); }


/* =============================================================
   12b. PRÁVNÍ STRÁNKA (gdpr.html)
   Dlouhý text ke čtení, ne k prohlížení. Proto úzký sloupec,
   větší řádkování a klidnější typografie než na hlavní stránce.
   ============================================================= */

.legal {
  padding-top: calc(var(--header-h) + var(--sp-5));
  padding-bottom: var(--sp-7);
  background: var(--ink-800);
}

.legal__inner {
  /* ~70 znaků na řádek - přes to už oko ztrácí začátek dalšího řádku */
  max-width: 760px;
}

.legal__title {
  font-size: clamp(2rem, 3vw + 1rem, 3rem);
  margin-bottom: var(--sp-3);
}

.legal__meta {
  margin-top: var(--sp-3);
  padding-bottom: var(--sp-4);
  font-size: var(--fs-small);
  color: var(--text-lo);
  border-bottom: 1px solid var(--line);
}

.legal h2 {
  font-size: var(--fs-h3);
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-2);
  /* scroll-margin, kdyby na nadpis někdo mířil odkazem */
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

.legal p {
  margin-bottom: var(--sp-2);
  color: var(--text-mid);
  text-wrap: pretty;
}

/* 600, ne výchozí 700: Inter 700 není načtený, prohlížeč by ho
   synteticky ztučnil (faux bold) a text by působil jinak než
   zbytek webu. 600 je reálná načtená váha. */
.legal strong { font-weight: 600; color: var(--text-hi); }

.legal__list {
  display: grid;
  gap: 0.6rem;
  margin-bottom: var(--sp-2);
  padding-left: var(--sp-2);
}

.legal__list li {
  position: relative;
  padding-left: var(--sp-2);
  color: var(--text-mid);
}

/* červená odrážka místo klasické tečky */
.legal__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 5px;
  height: 5px;
  background: var(--accent);
  box-shadow: var(--neon-sm);
}

/* Odkazy v běžném textu musí být poznat i bez barvy -
   proto podtržení, ne jen červená. */
.legal a:not(.btn):not(.logo) {
  color: var(--accent-hot);
  border-bottom: 1px solid rgb(255 46 46 / 0.4);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.legal a:not(.btn):not(.logo):hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}


/* =============================================================
   13. FOOTER
   ============================================================= */

.footer {
  padding-block: var(--sp-5);
  background: var(--ink-900);
  border-top: 1px solid var(--line);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  text-align: center;
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
}
.footer__nav a {
  font-size: var(--fs-small);
  color: var(--text-mid);
  transition: color var(--t-fast);
}
.footer__nav a:hover { color: var(--accent-hot); }

.footer__copy {
  font-size: var(--fs-tiny);
  color: var(--text-lo);
}


/* =============================================================
   14. ANIMACE (REVEAL)
   ============================================================= */

/* Výchozí skrytý stav přidává JS (třída .reveal-ready), ne CSS.
   Kdyby JS selhal nebo se nenačetl, obsah je normálně vidět. */
.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.reveal-ready .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* postupné nabíhání sourozenců (karty, kroky, citace) */
.reveal-ready .cards .reveal:nth-child(2),
.reveal-ready .quotes .reveal:nth-child(2),
.reveal-ready .timeline .reveal:nth-child(2) { transition-delay: 0.08s; }

.reveal-ready .cards .reveal:nth-child(3),
.reveal-ready .quotes .reveal:nth-child(3),
.reveal-ready .timeline .reveal:nth-child(3) { transition-delay: 0.16s; }

.reveal-ready .cards .reveal:nth-child(4),
.reveal-ready .timeline .reveal:nth-child(4) { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .reveal-ready .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* =============================================================
   15. RESPONZIVITA
   Mobile-first - výchozí styly platí pro mobil,
   media queries přidávají to, co dává smysl na větších plochách.
   ============================================================= */

/* ---- MOBIL: skládací menu ---- */
@media (max-width: 899px) {

  .nav-toggle { display: flex; }

  /* Panel má přirozenou výšku a jen se vysune + prolne.
     Záměrně NEanimujeme grid-template-rows (0fr→1fr) ani max-height -
     první je křehké, druhé nutí hádat výšku předem. */
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    background: rgb(9 10 14 / 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);

    /* zavřené */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity var(--t), transform var(--t), visibility 0s linear var(--t);
  }

  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    /* při otevírání zviditelnit hned, ne až po doběhnutí tranzice */
    transition: opacity var(--t), transform var(--t), visibility 0s;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-inline: var(--gutter);
    padding-bottom: var(--sp-1);
  }

  .nav__link {
    padding: 1rem 0;
    font-size: 1.05rem;
    border-bottom: 1px solid rgb(255 255 255 / 0.06);
    border-radius: 0;
  }
  .nav__link::after { left: 0; right: auto; width: 30px; }

  .nav__link--cta {
    margin: var(--sp-2) 0 var(--sp-3);
    padding: 0.9rem;
    text-align: center;
    border-bottom: none;
  }

  /* zamkne scroll stránky, když je menu otevřené */
  body.nav-open { overflow: hidden; }
}

/* ---- TABLET ---- */
@media (min-width: 600px) {

  .cards  { grid-template-columns: repeat(2, 1fr); }
  .quotes { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: repeat(2, 1fr); }

  .form { padding: var(--sp-5); }

  .footer__inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* ---- DESKTOP ---- */
@media (min-width: 900px) {

  .nav-toggle { display: none; }

  /* Vynuluje mobilní stav - bez tohohle by menu na desktopu
     zůstalo průhledné a posunuté, pokud bylo zavřené. */
  .nav {
    position: static;
    display: block;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    /* odsune navigaci i přepínač jazyka doprava, logo zůstane vlevo */
    margin-left: auto;
  }

  .about {
    grid-template-columns: 5fr 6fr;
    gap: var(--sp-6);
  }

  .cards { grid-template-columns: repeat(4, 1fr); }

  .timeline { grid-template-columns: repeat(4, 1fr); }

  /* spojnice mezi kroky - jen na desktopu, kde jsou v řadě */
  .timeline .step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(var(--sp-3) * -1);
    width: var(--sp-3);
    height: 1px;
    background: var(--line);
  }

  .quotes { grid-template-columns: repeat(3, 1fr); }

  .contact {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6);
  }
}

/* ---- HERO NA DESKTOPU ----
   Portrét 2:3 se přes celou šířku roztáhnout nedá - ořez by z něj
   udělal vodorovný pruh bez hlavy. Ukotvíme ho proto vpravo a text
   dostane vlastní černou plochu vlevo. Na mobilu tohle neplatí,
   tam poměr fotky sedí na výšku obrazovky. */
@media (min-width: 900px) {

  .hero__bg {
    left: auto;
    right: 0;
    /* Na užším desktopu si fotka ukrojí míň, jinak by na text nezbylo místo. */
    width: 42%;

    /* Vodorovná složka je 35 %, ne 50 %, a je to schválně naopak, než
       se zdá: neurčuje, kam dát postavu, ale kterou část fotky ukázat.
       Nižší číslo = ukaž levější výřez = postava se posune DOPRAVA,
       tedy pryč z levého okraje, který ukusuje maska.
       Projeví se to jen na vysokém okně - tam je fotka oříznutá
       vodorovně. Na širokém okně se ořezává svisle a tahle hodnota
       nedělá nic.
       Svislých 15 % drží v záběru hlavu. */
    object-position: 40% 15%;

    /* Maska rozpouští levý a spodní okraj fotky do průhledna, takže
       pod ní prosvítá černé pozadí hero sekce. Tím zmizí viditelná
       hrana mezi šedým ateliérovým pozadím fotky a černou stránkou -
       postava vystupuje ze tmy místo aby vypadala jako nalepený obdélník.
       Maska sedí na fotce, ne na stránce, takže drží při každé šířce okna.
       Dvě masky nad sebou se musí protnout (intersect), ne sečíst -
       výchozí "add" by je sloučil a nefungovalo by to. */
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, #000 35%),
      linear-gradient(to bottom, #000 68%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent 0%, #000 35%),
      linear-gradient(to bottom, #000 68%, transparent 100%);
    mask-composite: intersect;
  }

  /* Text se nesmí dostat na postavu - proto užší než původních 780px. */
  .hero__content { max-width: 520px; }

  /* Prolnutí okrajů teď dělá maska na fotce, takže tenhle překryv
     může být znatelně jemnější - fotka zůstane světlá a čitelná.
     Slouží už jen k čitelnosti textu vlevo a k navázání na citát dole. */
  .hero__overlay {
    background:
      linear-gradient(to right,
        var(--ink-900) 0%,
        var(--ink-900) 36%,
        rgb(3 3 5 / 0.42) 52%,
        rgb(3 3 5 / 0.08) 72%,
        transparent 100%),
      linear-gradient(to bottom,
        rgb(3 3 5 / 0.35) 0%,
        transparent 24%,
        rgb(3 3 5 / 0.72) 100%);
  }
}

/* Od 1200px je místa dost - fotka se roztáhne a text může být širší. */
@media (min-width: 1200px) {
  .hero__bg { width: 48%; }
  .hero__content { max-width: 620px; }
}