/* ============================================================
   VARIANTA C — „Rozhovor"
   Osobní: fotografie přes celou šířku, úzký čtecí sloupec, měkčí tón.
   ============================================================ */

:root {
  --sirka: 72rem;
  --r: 3px;
  --blok: clamp(4rem, 8vw, 7rem);
  --ctecka: 40rem;

  /* Pás referencí: šířka karty, mezera a doba jednoho okruhu.
     Rychlost = délka sady / doba. Při 24rem kartách vychází 20 px/s;
     vyšší doba = pomalejší jízda. Mobilní hodnota drží stejnou rychlost
     při užších kartách. */
  --ref-karta: 24rem;
  --ref-mezera: 1rem;
  --ref-doba: 100s;
}

body {
  font-size: 1.06rem;
  line-height: 1.72;
}

.stitek {
  color: var(--accent);
  letter-spacing: 0.18em;
  font-size: 0.7rem;
}

.hlavicka {
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(12px);
}

.menu a {
  font-size: 0.9rem;
}

/* Hlavička jde přes celou šířku — logo tak sedí u kraje, ne uprostřed. */
.hlavicka__obsah {
  max-width: none;
  padding-inline: clamp(1.25rem, 3vw, 2.75rem);
}

.tlacitko {
  border-radius: 999px;
  padding: 1rem 1.75rem;
}

.tlacitko--maly {
  padding: 0.6rem 1.15rem;
}

/* ---------- hero přes celou šířku ---------- */

.hero {
  /* Hero přechází gradientem do papíru, takže bez linky splývá
     s následující sekcí — ta ji ukončuje. */
  padding-block: 0 clamp(2.5rem, 5vw, 3.75rem);
  border-bottom: 1px solid var(--rule);
}

.hero__foto {
  position: relative;
  margin-bottom: clamp(-9rem, -8vw, -5rem);
}

.hero__foto img {
  width: 100%;
  height: clamp(24rem, 62vh, 40rem);
  object-fit: cover;
  /* Nízká hodnota drží výřez u horního okraje fotky, aby hlava zůstala celá. */
  object-position: center 8%;
}

.hero__foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--dark) 22%, transparent) 0%,
    color-mix(in srgb, var(--dark) 8%, transparent) 40%,
    var(--paper) 100%
  );
}

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

.hero__nadpis {
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  max-width: 18ch;
  margin-bottom: 1.75rem;
}

.hero__akce {
  margin-top: 2rem;
}

/* ---------- výklad jako jeden čtecí sloupec ---------- */

.vyklad__uvod {
  max-width: var(--ctecka);
}

.situace__karta {
  border-top: 0;
  background: var(--surface);
  border-radius: var(--r);
  padding: 1.6rem;
}

.vyklad__pointa {
  border-top: 0;
  padding-top: 0;
  color: var(--accent);
  font-size: clamp(1.4rem, 2.4vw, 1.95rem);
  padding-left: 1.5rem;
  border-left: 3px solid var(--accent);
}

/* ---------- karty služeb ---------- */

.prehled__hlava {
  max-width: var(--ctecka);
}

.karta {
  border-left-width: 0;
  border-top: 3px solid var(--accent);
  padding: 1.75rem;
}

/* ---------- citát ---------- */

.citat {
  border-top: 0;
  background: var(--surface);
  text-align: center;
}

.citat__text {
  margin-inline: auto;
  max-width: 24ch;
  font-style: italic;
}

.citat__autor {
  color: var(--accent);
}

/* ---------- dvojice ---------- */

.dvojice__foto img {
  aspect-ratio: 3 / 2;
}

/* ---------- podstránky ---------- */

.uvod-stranky {
  border-bottom: 0;
  background: var(--surface);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}

.uvod-stranky__nadpis {
  max-width: 19ch;
}

.uvod-stranky__foto img {
  aspect-ratio: 4 / 3;
}

/* Celá postava na světlém pozadí — ořez na 4/3 by jí uřízl nohy. */
.uvod-stranky__foto--postava img {
  aspect-ratio: 3 / 4;
  max-height: 26rem;
  width: auto;
  margin-left: auto;
}

.obsah-stranky {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.sluzba__telo {
  max-width: 58ch;
}

.sluzba__zaver {
  border-left: 0;
  padding: 1.4rem 1.6rem;
  background: var(--surface);
  border-radius: var(--r);
}

.poradenstvi__pointa {
  border-radius: var(--r);
}

/* ---------- volná místa ---------- */

.nabidky {
  border-top: 0;
  display: grid;
  gap: 0.75rem;
}

.nabidka {
  border-bottom: 0;
  background: var(--surface);
  border-radius: var(--r);
  overflow: hidden;
}

.nabidka__hlava {
  padding: 1.5rem;
}

.nabidka__detail {
  padding: 0 1.5rem 2rem;
}

/* ---------- reference jako souvislý pás ----------
   Jede plynule pořád dokola. Skript karty zdvojí, animace posune pás
   přesně o délku jedné sady, takže smyčka navazuje bez skoku. */

.reference__okno {
  overflow: hidden;
  /* Karty na okrajích mizí do pozadí místo useknutí ostrou hranou. */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 3rem,
    #000 calc(100% - 3rem),
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 3rem,
    #000 calc(100% - 3rem),
    transparent
  );
}

.reference__rada {
  display: flex;
  gap: var(--ref-mezera);
}

.reference__rada[data-jede='1'] {
  width: max-content;
  animation: reference-jizda var(--ref-doba) linear infinite;
}

/* Zastaví se pod kurzorem, aby šlo dočíst rozepsanou referenci. */
.reference__okno:hover .reference__rada[data-jede='1'] {
  animation-play-state: paused;
}

@keyframes reference-jizda {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-50% - var(--ref-mezera) / 2));
  }
}

/* Dvě delší firemní reference nemá smysl posouvat — vedle sebe se vejdou. */
.reference__rada--staticka {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  width: auto;
  animation: none;
}

.reference__karta {
  flex: 0 0 var(--ref-karta);
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent);
}

@media (max-width: 44rem) {
  :root {
    --ref-karta: min(21rem, 84vw);
    --ref-doba: 86s;
  }
}

/* ---------- kontakt ---------- */

.formular {
  background: var(--surface);
  border-radius: var(--r);
}

.pole__vstup {
  border-radius: var(--r);
}

.o-mne {
  border-top: 0;
  background: var(--surface);
}

.o-mne__foto img {
  border-radius: var(--r);
}

.o-mne__text {
  max-width: 56ch;
}

/* ---------- CTA ---------- */

.cta__nadpis {
  max-width: 20ch;
}

@media (max-width: 62rem) {
  .hero__foto {
    margin-bottom: -4rem;
  }

  .hero__foto img {
    height: 20rem;
  }
}