/* ==================================================================
   REFERENCE — sekce podle Figmy (frame „Reference stránka", 225:381)

   Hero, případ z praxe (.pribeh), rytmus sekcí a závěrečné CTA jsou
   sdílené v sekce.css. Tady je jen to, co má tahle stránka vlastní.
   ================================================================== */

/* Hero končí fotkou, stejně jako na stránce O Ivetě. Sekce případů
   na něj navazuje těsněji než ostatní přechody — patří k sobě. */
.sekce--hero-svetly { padding-block: var(--pad-m) var(--pad-s); }

/* Tlačítko pod nadpisem — odsazené tak, aby na nadpis nelepilo,
   ale pořád k němu patřilo. */
.hero-svetly__tlacitko { margin-top: var(--space-6); }

/* Kotva z tlačítka nesmí skončit pod hlavičkou. */
#pripady { scroll-margin-top: var(--vyska-headeru); }

@media (max-width: 63.9375rem) {
  .sekce--hero-svetly { padding-top: var(--pad-l); }
}

/* Poslední sekce před tmavým CTA — stejný nádech jako na ostatních
   stránkách. */
.sekce--recenze { padding-bottom: var(--pad-xl); }

/* ------------------------------------------------------------------
   2 — PŘÍPADY Z PRAXE

   Dva případy pod sebou v jedné sekci. Patří k sobě, takže mezi nimi
   je menší mezera než mezi sekcemi.
   ------------------------------------------------------------------ */

.pripady { display: grid; gap: var(--pad-l); }

/* První případ má fotku vlevo, druhý vpravo — aby stránka nebyla
   jednostranná. V kódu jde u obou text první, takže na mobilu
   začínají oba stejně: nadpis, text, pak fotka. */
@media (min-width: 64rem) {
  .pribeh--fotka-vlevo { grid-template-columns: 538fr 661fr; }
  .pribeh--fotka-vlevo .pribeh__foto { order: -1; }
}

/* ------------------------------------------------------------------
   3 — OPAKOVANÁ SPOLUPRÁCE (tři karty s číslem)

   Karty stojí na papírovém podkladu, takže mají výplň v barvě
   hlavního pozadí webu — žádné rámečky ani stíny. Číslo je nahoře,
   text sedí u spodní hrany.
   ------------------------------------------------------------------ */

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

.opakovane__karta {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  background: var(--bg);
}

.opakovane__cislo {
  display: block;
  /* Displejové číslo, ne nadpis — proto se sází ve velikosti H1. */
  font-family: var(--font-nadpis);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: 1;
  /* prázdné místo pod číslem drží kartu vzdušnou i s krátkým textem */
  margin-bottom: var(--space-8);
}

.opakovane h3 {
  margin: auto 0 var(--space-3);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
}

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

@media (min-width: 48rem) {
  .opakovane { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .opakovane__karta { min-height: clamp(15rem, 11rem + 7vw, 18.9375rem); }
}

/* ------------------------------------------------------------------
   4 — SLOVY KLIENTŮ (posuvné recenze)

   Recenzí bude přibývat, proto pás, ne mřížka. Posouvá se prstem
   i šipkami, na mobilu je vidět jedna karta, na tabletu dvě,
   na desktopu tři.
   ------------------------------------------------------------------ */

.recenze-pas {
  display: flex;
  gap: var(--sloupec-mezera);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* pás jede od kraje ke kraji, ne jen uvnitř sloupce obsahu */
  margin-inline: calc(var(--padding-x) * -1);
  padding-inline: var(--padding-x);
  /* Bez tohohle by karta při zacvaknutí skočila pod boční odsazení
     a první recenze by nelícovala s nadpisem nad ní. */
  scroll-padding-inline: var(--padding-x);
  /* Posun šipkami animuje prohlížeč sám. V JS se tak jen nastaví
     cílová pozice — a když má člověk vypnuté animace, skočí tam rovnou. */
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  .recenze-pas { scroll-behavior: auto; }
}
.recenze-pas::-webkit-scrollbar { display: none; }

.recenze-karta {
  display: flex;
  flex: 0 0 100%;
  flex-direction: column;
  gap: 6px;
  scroll-snap-align: start;
}

/* Karty se střídají: u liché je nahoře velký box s citací a pod ním
   jméno, u sudé je to obráceně. Protože jsou všechny stejně vysoké,
   velké boxy se tím vzájemně posunou a řádek nevypadá jako tabulka. */
.recenze-karta:nth-child(even) { flex-direction: column-reverse; }

.recenze-karta blockquote {
  flex: 1;
  margin: 0;
  padding: var(--space-5);
  background: #fff;
  font-size: var(--fs-body);
  line-height: 1.5;
}

.recenze-karta figcaption {
  padding: var(--space-4) var(--space-5);
  background: #fff;
  color: var(--text-label);
  font-size: var(--fs-mini);
  line-height: 1.6;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.recenze-ovladani {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.recenze-sipka {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.625rem;
  height: 2.625rem;
  padding: 0;
  /* Linka v barvě textu, ne světlá — na papírovém podkladu byla
     předtím sotva vidět. */
  border: 1px solid var(--text);
  background: none;
  color: var(--text);
  cursor: pointer;
  transition: background var(--prechod), border-color var(--prechod),
              color var(--prechod), opacity var(--prechod);
}
.recenze-sipka:hover {
  background: var(--bg-dark);
  border-color: var(--bg-dark);
  color: #fff;
}
.recenze-sipka svg { width: 1.0625rem; height: 1.0625rem; }
.recenze-sipka[disabled] { opacity: 0.28; cursor: default; }
.recenze-sipka[disabled]:hover {
  background: none;
  border-color: var(--text);
  color: var(--text);
}

@media (min-width: 40rem) {
  .recenze-karta { flex-basis: calc((100% - var(--sloupec-mezera)) / 2); }
}

@media (min-width: 64rem) {
  .recenze-karta { flex-basis: calc((100% - 2 * var(--sloupec-mezera)) / 3); }
}