/* ==================================================================
   ÚVODNÍ STRÁNKA — sekce podle Figmy (frame „Úvodní stránka")

   Svislé odsazení každé sekce je pojmenované (--pad-xs … --pad-l),
   ne nasypané natvrdo. Mezera mezi dvěma sekcemi = spodek první
   + vršek druhé, takže se dá ladit po jednotlivých přechodech.
   ================================================================== */

/* Výjimky z rytmu — kde si klient přál víc nebo míň prostoru. */
.sekce--kroky    { padding-block: var(--pad-xl); }
.sekce--vysledky { padding-bottom: var(--pad-xl); }
.sekce--o-ivete  { padding-bottom: calc(var(--pad-l) - 0.625rem); }
.sekce--pribeh   { padding-top: calc(var(--pad-l) - 0.625rem); padding-bottom: var(--pad-xl); }
.sekce--faq      { padding-bottom: var(--pad-xl); }

/* ------------------------------------------------------------------
   1 — HERO
   ------------------------------------------------------------------ */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;   /* na mobilu text dole pod fotkou */
  /* Výška se mění plynule s oknem. Dřív to bylo přes zlom u 750 px,
     jenže tam hero skákalo o 160 px naráz — stačila lišta záložek
     navíc a stejně velké okno v jiném prohlížeči vypadalo jinak.
     84 % výšky okna drží strop 44rem na běžném monitoru a dolů se
     zmenšuje po troškách. */
  min-height: clamp(26rem, 84svh, 44rem);
  overflow: hidden;
  background: var(--c-noir);
}

.hero__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Výřez podle zařízení je už ve videu (mobil / tablet / počítač),
     tady se jen vystředí. */
  object-position: 50% 50%;
}

/* Figma má plochý překryv 25 %. Na mobilu by na něm text nebyl čitelný,
   proto je doplněný o jemný přechod shora (kvůli logu a menu) a zdola. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0) 22%),
    linear-gradient(to top, rgba(0, 0, 0, 0.62) 0, rgba(0, 0, 0, 0.18) 48%, rgba(0, 0, 0, 0) 72%),
    rgba(0, 0, 0, 0.12);
}

.hero__obsah {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: calc(var(--vyska-headeru) + var(--space-5)) var(--pad-m);
}

.hero h1 { max-width: 22ch; color: #fff; }

.hero__lead {
  /* Na širokém okně by se řádek roztáhl na celou šířku sloupce a špatně
     se četl. 60 vw ho drží v rozumné délce na tabletu i na desktopu. */
  max-width: min(74ch, 60vw);
  margin: var(--space-5) 0 0;
  color: #fff;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  /* O stupeň silnější než běžný text — na fotce se 300 ztrácelo. */
  font-weight: var(--vaha-ui);
}

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

@media (max-width: 47.9375rem) {
  .hero__lead { max-width: none; }
}

/* Na tabletu je Iveta v úvodním záběru vpravo — nadpis a podtext
   zůstanou v levé polovině, aby jí nevedly přes postavu. */
@media (min-width: 48rem) and (max-width: 63.9375rem) {
  .hero h1 { max-width: 14ch; }
  .hero__lead { max-width: 52vw; }
}

/* Podtext má dvě znění. Na mobilu je plná verze moc dlouhá — zabere
   půl obrazovky a člověk ji nepřečte. Kratší nese totéž sdělení
   i klíčové fráze pro vyhledávače. */
.hero__lead--dlouhy { display: none; }

@media (min-width: 48rem) {
  .hero__lead--kratky { display: none; }
  .hero__lead--dlouhy { display: block; }
}

@media (min-width: 64rem) {
  /* Na počítači video zabere co nejvíc výšky okna, ale nikdy víc, než
     kolik je samo vysoké při dané šířce (šířka × 9/16). Strop 44rem
     z mobilu by na velkém monitoru nechal z videa jen prostřední pás
     a působilo by přiblížené. Na úzkém a nízkém monitoru se oříznutí
     nahoře a dole nevyhne — tam výřez hlídá web.js. */
  .hero {
    align-items: center;
    min-height: max(26rem, min(84svh, 56.25vw));
  }
  .hero__obsah { padding-block: var(--vyska-headeru) 0; }
  .hero::after {
    background:
      linear-gradient(to bottom, rgba(0, 0, 0, 0.42) 0, rgba(0, 0, 0, 0) 24%),
      linear-gradient(to right, rgba(0, 0, 0, 0.46) 0, rgba(0, 0, 0, 0.2) 45%, rgba(0, 0, 0, 0) 62%),
      rgba(0, 0, 0, 0.2);   /* Figma má plochých 25 %; video je světlejší a pohyblivé, proto víc vlevo pod textem */
  }
  /* Iveta je v úvodním záběru vpravo od středu. Podtext končí před ní,
     jinak by jí řádky vedly přes ruku. */
  .hero__lead { max-width: min(60ch, 46vw); }
}

/* ------------------------------------------------------------------
   3 — BEZ OBAV (tři karty s fotkou)
   ------------------------------------------------------------------ */

.karty {
  display: grid;
  gap: var(--space-8) var(--sloupec-mezera);
}

.karta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Na mobilu a tabletu je karta přes celou šířku — na výšku by z ní byl
   dvousetpixelový sloup a z fotky zbyl úzký výřez. Proto tam drží
   přirozený poměr zdroje. Portrét z Figmy nastoupí až ve třech sloupcích. */
.karta__foto {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: var(--vyrez, 50% 50%);
  background: var(--c-placeholder);
}

.karta h3 { margin-top: var(--space-5); }

.karta p {
  margin-top: var(--space-3);
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

/* Odstavec v kartě si nenese spodní mezeru — o odstup od tlačítka
   se stará jen tlačítko samo, jinak se obě mezery sečtou. */
.karta p { margin-bottom: 0; }
.karta .tlacitko { margin-top: var(--space-4); }

@media (min-width: 56rem) {
  .karta .tlacitko { margin-top: var(--space-6); }
}

.pod-kartami {
  margin-top: var(--space-7);
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

@media (min-width: 56rem) {
  .karty { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .karta__foto { aspect-ratio: 404 / 415; }   /* poměr z Figmy */
  /* tlačítko první karty nesmí rozhodit výšku ostatních */
  .karta { height: 100%; }
}

/* ------------------------------------------------------------------
   4 — MAPA + SEZNAM VÝSLEDKŮ
   ------------------------------------------------------------------ */

.mapa { display: grid; gap: var(--space-7); align-items: start; }

.mapa__obrazek {
  width: 100%;
  mix-blend-mode: luminosity;
}

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

.vysledky__polozka {
  padding-block: var(--space-5) var(--space-4);
  border-top: 1px solid var(--line);
}
.vysledky__polozka:last-of-type { border-bottom: 1px solid var(--line); }

.vysledky__stitek {
  margin: 0 0 var(--space-1);
  color: var(--text-label);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.vysledky__nazev {
  font-family: var(--font-nadpis);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.6;
}

.vysledky__pozn {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-mini);
  line-height: 1.6;
}

.vysledky .tlacitko { align-self: flex-start; margin-top: var(--space-6); }

@media (min-width: 64rem) {
  .mapa { grid-template-columns: 637fr 550fr; gap: clamp(2rem, 0.5rem + 3.2vw, 4.6875rem); }
}

/* ------------------------------------------------------------------
   5 — PĚT KROKŮ
   ------------------------------------------------------------------ */

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

.kroky__krok {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--space-1) var(--space-4);
  padding-block: var(--space-5);
  border-top: 1px solid var(--line);
}
.kroky__krok:last-child { border-bottom: 1px solid var(--line); }

.kroky__cislo {
  grid-row: span 2;
  color: var(--text-label);
  font-family: var(--font-nadpis);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.33;
}

.kroky__nazev { font-size: var(--fs-h4); line-height: var(--lh-h4); }

.kroky__popis {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.kroky + .tlacitko { margin-top: var(--space-7); }

@media (min-width: 64rem) {
  .kroky__krok {
    grid-template-columns: clamp(3rem, 1rem + 2.7vw, 4.375rem) clamp(11rem, 6rem + 9.4vw, 15rem) minmax(0, 1fr);
    gap: clamp(1.5rem, 0.2rem + 2.2vw, 3.125rem);
    align-items: center;
    min-height: clamp(3.75rem, 2.6rem + 2vw, 4.8125rem);
    padding-block: 0;
  }
  .kroky__cislo { grid-row: auto; }
}

/* ------------------------------------------------------------------
   8 — FAQ
   ------------------------------------------------------------------ */

/* Bez mezery mezi položkami — oddělují je linky. S gapem se mezera
   přičítala pod každou otázku kromě poslední, takže text seděl na
   spodní lince o 15 px dál než na horní. */
.faq { display: flex; flex-direction: column; margin-top: var(--space-5); }

.faq__polozka { border-top: 1px solid var(--line); }
.faq__polozka:last-child { border-bottom: 1px solid var(--line); }

.faq__otazka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  /* Zavřená otázka stojí mezi dvěma linkami sama, takže musí mít nad
     sebou i pod sebou stejně. Zmenšuje se až po rozbalení, kde na ni
     navazuje odpověď. */
  padding-block: var(--space-5);
  font-family: var(--font-nadpis);
  font-weight: 400;
  font-size: clamp(1.0625rem, 16.49px + 0.0916vw, 1.1875rem);   /* 17 → 19 */
  line-height: 1.39;
  cursor: pointer;
  list-style: none;
}
.faq__otazka::-webkit-details-marker { display: none; }

.faq__znak {
  flex-shrink: 0;
  color: var(--text-label);
  font-size: var(--fs-h4);
  line-height: 1;
  transition: transform var(--prechod);
}
.faq__polozka[open] .faq__otazka { padding-bottom: var(--space-2); }
.faq__polozka[open] .faq__znak { transform: rotate(45deg); }

.faq__odpoved {
  max-width: 78ch;
  padding-block: var(--space-2) var(--space-5);
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-body);
  line-height: 1.55;
}