/* ==================================================================
   O IVETĚ — sekce podle Figmy (frame „O mně stránka", node 225:109)

   Sdílené kameny (rytmus sekcí, pás čísel, dvojice text+foto,
   závěrečné CTA) jsou v sekce.css. Tady je jen to, co má tahle
   stránka vlastní.

   Svislé odsazení sekcí odpovídá mezerám z Figmy, přepsaným do
   pojmenované škály --pad-*. Mezera mezi dvěma sekcemi = spodek
   první + vršek druhé.
   ================================================================== */

/* Rytmus drží sdílené .sekce (sekce.css) — mezera mezi dvěma sekcemi
   je tedy stejná jako na úvodní stránce. Výjimky jsou jen tři a mají
   svůj protějšek i na úvodu. */

/* Hero končí fotkou, na kterou hned navazuje pás čísel (.sekce--tesne). */
.sekce--hero-svetly { padding-block: var(--pad-m) 0; }

/* Poslední sekce před tmavým CTA dostala nejvíc vzduchu z celé
   stránky — je to osobní odbočka a potřebuje kolem sebe ticho. */
.sekce--mimo        { padding-block: var(--pad-xl); }

/* Na mobilu je hlavička níž nad textem než na desktopu, takže hero
   potřebuje pod ní o kus víc místa. A pás čísel o kousek odsadit,
   aby nelepil na spodní hranu hero fotky. */
@media (max-width: 63.9375rem) {
  .sekce--hero-svetly { padding-top: var(--pad-l); }
  .sekce--hero-svetly + .sekce--tesne { padding-top: var(--pad-m); }
}

/* Na desktopu končí hero fotkou přes půl šířky a pás čísel na ni
   dosedal moc těsně — o stupeň víc vzduchu. */
@media (min-width: 64rem) {
  .sekce--hero-svetly + .sekce--tesne { padding-top: var(--pad-m); }
}

/* ------------------------------------------------------------------
   5 — KDYŽ SE NĚCO ZADRHNE (text + citace klienta)
   ------------------------------------------------------------------ */

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

.zadrhne__text h2 { margin-bottom: var(--space-5); }

/* :not(.label) je tu schválně — bez něj by tenhle zápis přebil .label
   (je specifičtější) a popisek nad nadpisem by měl velikost odstavce. */
.zadrhne__text p:not(.label) {
  margin: 0;
  max-width: 60ch;
  color: var(--text-muted);
  font-size: var(--fs-body);
  line-height: 1.5;
}
.zadrhne__text p:not(.label) + p { margin-top: var(--space-5); }

.zadrhne__text .odkaz {
  margin-top: var(--space-6);
  font-size: var(--fs-body);
}

/* Citace visí na vlastní vlasové lince — v návrhu odděluje pravý
   sloupec od levého, aniž by mezi ně stavěla plnou příčku. */
.citace {
  /* <figure> si nese výchozí boční margin 40 px — ten by citaci
     odsadil od stejné hrany, na které stojí všechny ostatní sekce. */
  margin: 0;
  border-top: 1px solid var(--line-papir);
  padding-top: clamp(2rem, 10.7px + 3.49vw, 6.25rem);   /* 32 → 100 */
}

.citace blockquote {
  margin: 0;
  font-family: var(--font-nadpis);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.4;
  text-wrap: balance;
}

/* Popisek pod citací je tentýž prvek jako .label nad nadpisy sekcí. */
.citace__zdroj {
  margin: var(--space-4) 0 0;
  color: var(--text-label);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

@media (min-width: 64rem) {
  .zadrhne {
    grid-template-columns: 1.3fr 1fr;
    gap: clamp(2.5rem, 26.7px + 1.3vw, 3.75rem);   /* 40 → 60 */
  }
}

/* ------------------------------------------------------------------
   6 — O CO SE KLIENTI MOHOU OPŘÍT

   Původní mřížka vyplněných dlaždic vypadala jako tabulka. Šest
   položek je proto vysázených stejným způsobem jako pět kroků na
   úvodní stránce: řádky oddělené vlasovou linkou, žádné rámečky,
   žádná výplň. Název drží levý sloupec, popis doplňuje zbytek řádku.
   Pod 1024 px se řádek zlomí — název nad popis.
   ------------------------------------------------------------------ */

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

.opora__polozka {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-5);
  /* linka na papírovém podkladu je o odstín teplejší než na bílé */
  border-top: 1px solid var(--line-papir);
}
.opora__polozka:last-child { border-bottom: 1px solid var(--line-papir); }

.opora h3 {
  margin: 0;
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
}

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

@media (min-width: 64rem) {
  .opora__polozka {
    grid-template-columns: 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: var(--space-4);
  }
}

/* ------------------------------------------------------------------
   7 — MIMO REALITY (fotka vlevo, text vpravo)
   ------------------------------------------------------------------ */

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

.mimo__foto {
  width: 100%;
  aspect-ratio: 520 / 330;
  object-fit: cover;
  object-position: 50% 52%;
  background: var(--c-placeholder);
}

.mimo__text h2 { margin-bottom: var(--space-5); }

.mimo__text p:not(.label) {
  margin: 0;
  max-width: 60ch;
  color: var(--text-muted);
  font-size: var(--fs-body);
  line-height: 1.5;
}
.mimo__text p:not(.label) + p { margin-top: var(--space-5); }

@media (min-width: 64rem) {
  .mimo {
    grid-template-columns: 520fr 612fr;
    gap: clamp(3rem, -4.7px + 5.143vw, 7.9375rem);   /* 48 → 127 */
  }
}