/* =========================================================
   ZÁKLAD – reset, typografie, sekce, sdílené prvky
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  background: var(--ink);
  color: var(--paper-text);
  line-height: 1.7;
  font-size: 1.03rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

::selection { background: var(--amber); color: var(--ink); }

/* odsazení kotev pod sticky hlavičkou */
section[id] { scroll-margin-top: 92px; }

/* ---- Kontejner sekce ---- */
.section {
  padding: clamp(3.5rem, 8vw, 6.5rem) 1.5rem;
}
.section-inner {
  max-width: var(--container);
  margin: 0 auto;
}

/* barevná schémata sekcí */
.section--paper { background: var(--paper); color: var(--ink-text); }
.section--dark  { background: var(--ink);   color: var(--paper-text); }
.section--sand  { background: var(--sand);  color: var(--ink-text); }

/* ---- Eyebrow (nadřazený štítek s číslem trasy) ---- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-data);
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber-deep);
  margin: 0 0 1rem;
}
.section--dark .eyebrow { color: var(--amber); }
.eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: currentColor;
  display: inline-block;
}

/* ---- Nadpisy ---- */
.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
}
.section-lead {
  max-width: 56ch;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--ink-soft);
  margin: 0 0 2.5rem;
}
.section--dark .section-lead { color: var(--paper-soft); }

/* ---- Tlačítka ---- */
.btn {
  --bg: var(--amber);
  --fg: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .98rem;
  padding: .8rem 1.5rem;
  border-radius: var(--r-pill);
  background: var(--bg);
  color: var(--fg);
  border: 2px solid var(--bg);
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              background .25s var(--ease), color .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--sh-amber); }
.btn:active { transform: translateY(0); }
.btn--ghost {
  --bg: transparent;
  --fg: currentColor;
  border-color: currentColor;
}
.btn--ghost:hover { background: currentColor; box-shadow: var(--sh); }
.btn--ghost:hover .btn-label { color: var(--ink); }
.section--paper .btn--ghost:hover, .section--sand .btn--ghost:hover { color: var(--paper); }

/* ---- Datové čipy (statistiky – GPS / rekordy) ---- */
.stat-chip {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  font-family: var(--font-data);
  font-size: .82rem;
  letter-spacing: .04em;
  padding: .45rem .8rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-soft);
  background: var(--paper-2);
  color: var(--ink-soft);
}
.section--dark .stat-chip {
  border-color: rgba(143, 176, 162, .28);
  background: rgba(255,255,255,.03);
  color: var(--paper-soft);
}
.stat-chip b { color: var(--amber-deep); font-weight: 700; }
.section--dark .stat-chip b { color: var(--amber); }

/* ---- Odhalení při scrollu ---- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }

/* ---- Přerušovaná „stopa trasy" jako oddělovač ---- */
.trace-divider {
  height: 3px;
  border: none;
  margin: 0;
  background-image: radial-gradient(circle, var(--amber) 1.5px, transparent 1.6px);
  background-size: 14px 3px;
  background-repeat: repeat-x;
  opacity: .55;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}