/* =========================================================
   One+ — sdílený základ (reset, typografie, layout, komponenty)
   Platí napříč celým webem (Form / Body / Bali)
   ========================================================= */

@font-face {
  font-family: "Helvetica Now Display";
  font-weight: 400;
  font-display: block; /* krátce skryje text místo probliknutí náhradního písma */
  src:
    url("/assets/fonts/HelveticaNowProDisplayRegular/font.woff2") format("woff2"),
    url("/assets/fonts/HelveticaNowProDisplayRegular/font.woff") format("woff");
}
@font-face {
  font-family: "Helvetica Now Display";
  font-weight: 700;
  font-display: block; /* krátce skryje text místo probliknutí náhradního písma */
  src:
    url("/assets/fonts/HelveticaNowProDisplayBold/font.woff2") format("woff2"),
    url("/assets/fonts/HelveticaNowProDisplayBold/font.woff") format("woff");
}

:root {
  /* jednotný styl menu a CTA tlačítka v hero (výjimka ze škály) */
  --fs-menu: 14px;
  --fs-eyebrow: 14px; /* Eyebrow / popisek */
  --ls-menu: 0.08em;
  /* barvy — sdílené napříč Form/Body, Bali dostane zelenou později */
  --c-bg: #ffffff;
  --c-bg-alt: #dcd0ce;
  --c-accent: #a99780;
  --c-btn: rgba(169, 151, 128, 0.5); /* tlačítka: #a99780 s průhledností (jako nápis Movement Space) */
  --c-btn-hover: rgba(169, 151, 128, 0.65);
  --c-sand: #d8d0b8;
  --c-text: #000000;
  --c-bali: #556551; /* orientační zelená pro Bali (odebraná z fotky), grafička doladí */

  /* typografická škála — Varianta C */
  --fs-h1: clamp(44px, 9vw, 96px);
  --fs-h2: 30px; /* mobil; tablet a desktop níže přes breakpointy */
  --fs-h3: 24px; /* mobil; tablet a desktop se přepíná níže přes breakpointy */
  --fs-h4: 21px; /* mobil; tablet a desktop níže */
  --fs-perex: clamp(17px, 2.5vw, 20px);
  --fs-body: 17px;
  --fs-small: 14px;

  --radius: 10px; /* jednotné zaoblení rohů (tlačítka, pills, dlaždice, karty) */
  --container: 1500px;
  --gutter: 24px;
}

/* H3: mobil 24 px, tablet (od 768 px) 32 px, desktop (od 1100 px) 36 px */
/* H2: 30 / 40 / 50 px, H4: 21 / 22 / 24 px (Bold, verzálky) — mobil / tablet / desktop */
@media (min-width: 768px) { :root { --fs-h2: 40px; --fs-h3: 32px; --fs-h4: 22px; } }
@media (min-width: 1100px) { :root { --fs-h2: 50px; --fs-h3: 36px; --fs-h4: 24px; } }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scrollbar-gutter: stable; } /* stabilní šířka při zamčení scrollu (otevřené menu) */

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: "Helvetica Now Display", -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.5; /* Body text */
  -webkit-font-smoothing: antialiased;
  text-transform: uppercase; /* zatím experiment: verzálky všude, případně se vrátí zpět */
}

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

button { text-transform: inherit; } /* tlačítka ve výchozím stavu verzálky nedědí */

a { color: inherit; text-decoration: none; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Breakpointy webu: mobil do 767 px, tablet 768–1099 px, desktop od 1100 px */
@media (max-width: 1099px) { :root { --gutter: 20px; } }

/* Typografie */

h1, h2, h3, h4 {
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: 1.02; letter-spacing: 0; }
h2 { font-size: var(--fs-h2); line-height: 1.05; letter-spacing: 0; }
h3 { font-size: var(--fs-h3); line-height: 1.15; }
h4 { font-size: var(--fs-h4); line-height: 1.2; letter-spacing: 0; }

.perex {
  font-size: var(--fs-perex);
  line-height: 1.5;
  margin: 0;
}

/* Perex 2: stejná velikost jako Perex, ale bez verzálek */
.perex-2 {
  font-size: var(--fs-perex);
  font-weight: 400;
  line-height: 1.5;
  text-transform: none;
}

p { margin: 0; }

/* Pevný zlom řádku jen na desktopu (≥1100 px); na tabletu a mobilu text teče volně */
.br-desktop { display: none; }
@media (min-width: 1100px) { .br-desktop { display: inline; } }

.small { font-size: var(--fs-small); text-transform: none; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.eyebrow {
  font-size: var(--fs-eyebrow); /* VÝJIMKA ze škály — velikost zadána ručně */
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Tlačítka */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: inherit;
  font-weight: 700;
  font-size: var(--fs-body);
  padding: 1em 2em;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease, translate 0.25s ease, box-shadow 0.25s ease;
}
.btn-primary {
  background: var(--c-btn);
  color: #fff;
}
/* Hover — lehká změna barvy pozadí a jemné "vznesení" (translate, ne transform) */
@media (hover: hover) {
  .btn:where(:not(.btn-disabled)):hover {
    translate: 0 -3px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  }
  .btn-primary:where(:not(.btn-disabled)):hover { background-color: var(--c-btn-hover); }
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover { translate: none; }
}
.btn-ghost {
  background: transparent;
  color: currentColor;
  border: 1.5px solid currentColor;
}

/* Placeholder — pro chybějící assety (loga, fotky, widgety) */

.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(
    45deg,
    rgba(0,0,0,0.06),
    rgba(0,0,0,0.06) 10px,
    rgba(0,0,0,0.02) 10px,
    rgba(0,0,0,0.02) 20px
  );
  border: 1.5px dashed rgba(0,0,0,0.3);
  color: rgba(0,0,0,0.55);
  font-size: var(--fs-small);
  font-weight: 400;
  text-align: center;
  text-transform: none; /* Malý text je bez verzálek */
  letter-spacing: 0;
}

/* Sekce */

.section {
  padding: clamp(3rem, 8vw, 7rem) 0;
}
.section--alt { background: var(--c-bg-alt); }

/* ---------- Scroll reveal (plynule vázané na pozici scrollu, ne jen jednorázový fade) ---------- */

.reveal {
  transform: translateY(48px);
  will-change: transform;
}

/* Hero — jednorázový nástup při načtení (ne vázaný na scroll, je hned ve viewportu) */
.hero-in {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0s);
}
.hero-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .hero-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

body.no-scroll { overflow: hidden; }

/* Vektorová loga a ikony: hladké vykreslení hran i na monitorech s nízkým rozlišením */
svg {
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
}