/* =========================================================
   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 {
  /* barvy — sdílené napříč Form/Body, Bali dostane zelenou později */
  --c-bg: #ffffff;
  --c-bg-alt: #dcd0ce;
  --c-accent: #a99780;
  --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: clamp(28px, 6vw, 56px);
  --fs-h3: clamp(20px, 4vw, 28px);
  --fs-perex: clamp(17px, 2.5vw, 20px);
  --fs-body: 17px;
  --fs-small: 15px;

  --radius: 10px; /* jednotné zaoblení rohů (tlačítka, pills, dlaždice, karty) */
  --container: 1500px;
  --gutter: 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;
  -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.02em; }
h2 { font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -0.015em; }
h3 { font-size: var(--fs-h3); line-height: 1.15; }
h4 { font-size: var(--fs-body); line-height: 1.3; }

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

p { margin: 0; }

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

.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-small);
  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-accent);
  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: #b1a08a; }
}
@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: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* 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; }