/* ==================================================================
   ZÁKLAD — reset, typografie, sdílené prvky
   ================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;   /* pojistka proti vodorovnému posunu na mobilu */
  /* plocha za webem na velmi širokých monitorech */
  background: var(--c-noir);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-weight: var(--vaha-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  display: flex;
  flex-direction: column;
  min-height: 100dvh;

  /* Nad 2560 px se web dál neroztahuje. Ultrawide monitory jsou dnes
     běžné a hero fotka by se na nich musela nafouknout přes dvojnásobek
     zdroje. Takhle zůstane sazba i fotky v rozumných proporcích.
     position: relative drží absolutně poziciovanou hlavičku uvnitř. */
  position: relative;
  max-width: 160rem;
  margin-inline: auto;
}

/* Header leží nad hero fotkou. Stránky bez hera si pod něj musí uklidit. */
main { flex: 1 0 auto; padding-top: var(--vyska-headeru); }
main:has(.hero) { padding-top: 0; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-nadpis);
  font-weight: 500;
  letter-spacing: var(--ls-nadpis);
  text-transform: none;   /* verzálky v nadpisech se nepoužívají */
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 400; }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: 400; }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

/* Prohlížeč dává <figure> a <blockquote> boční okraj 40 px. Bez tohohle
   řádku by se citace odsazovaly od hrany, na které stojí zbytek sazby. */
figure, blockquote { margin: 0; }

img, svg, video { display: block; max-width: 100%; height: auto; }

a {
  color: inherit;
  text-decoration-color: currentColor;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: color var(--prechod), text-decoration-color var(--prechod);
}
a:hover { color: var(--accent); text-decoration-color: var(--accent); }

button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* --- pomocné třídy ------------------------------------------------ */

/* Sloupec obsahu je nejvýš 1260 px, okraje kolem něj rostou s oknem. */
.obal {
  width: 100%;
  max-width: calc(var(--sirka-obsah) + 2 * var(--padding-x));
  margin-inline: auto;
  padding-inline: var(--padding-x);
}

/* popisek nad nadpisem — Montserrat Light 10,5 px, tracking 2,94 */
.label {
  margin: 0 0 var(--space-3);
  font-family: var(--font-text);
  font-weight: var(--vaha-text);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-label);
}

/* místo, kde ještě chybí podklad od klientky */
.doplnit { color: var(--accent); font-style: normal; }

/* !important: pole formuláře mají vlastní šířku 100 %. Skryté pole
   na nahrání fotek se tím natáhlo přes celý formulář a vystrčilo
   stránku o stovky pixelů doprava. */
.jen-pro-ctecky {
  position: absolute;
  width: 1px !important; height: 1px !important;
  min-width: 0 !important;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.preskocit {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: calc(var(--z-menu) + 1);
  padding: var(--space-2) var(--space-4);
  background: var(--bg-dark);
  color: #fff;
  text-decoration: none;
  transform: translateY(-200%);
}
.preskocit:focus-visible { transform: translateY(0); color: #fff; }

/* --- tlačítko ------------------------------------------------------
   Figma: bg #BFA26F, padding 18/26, text 20 px, bílá, bez rádiusu.
   ------------------------------------------------------------------ */

.tlacitko {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.8125rem, 12.14px + 0.2288vw, 1.125rem)   /* 13 → 18 */
           clamp(1.25rem, 18.97px + 0.2746vw, 1.625rem);    /* 20 → 26 */
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font-weight: var(--vaha-tlacitko);
  font-size: var(--fs-tlacitko);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--prechod), color var(--prechod);
}
.tlacitko:hover {
  background: transparent;
  color: var(--accent);
  text-decoration: none;
}

/* Drobnější varianta — pro tlačítka uvnitř karet, kde plnohodnotné
   tlačítko přebíjí obsah, na kterém leží. */
.tlacitko--male {
  padding: clamp(0.5625rem, 8.49px + 0.1373vw, 0.75rem)      /* 9 → 12 */
           clamp(0.875rem, 13.31px + 0.1831vw, 1.125rem);    /* 14 → 18 */
  font-size: clamp(0.78125rem, 12.24px + 0.0687vw, 0.875rem);/* 12,5 → 14 */
}

/* tlačítko na tmavém pozadí */
.tlacitko--na-tmavem:hover { color: #fff; border-color: #fff; }

.odkaz {
  display: inline-block;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 0.28em;
}

/* --- animace ------------------------------------------------------ */

.odhalit {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms ease, transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.odhalit.je-videt { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .odhalit { opacity: 1; transform: none; }
}

/* Malé textové odkazy a tlačítka dostanou víc místa na prst (min. 24 px
   na výšku), aniž by se změnil vzhled — jen svislý padding. */
.odkaz { padding-block: var(--space-1); }