/* ===========================================================================
   base.css — @font-face, tokeny, reset, typografia, utility
   Každá farba a každý rozmer je definovaný tu. Inde už len var().
   =========================================================================== */

@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/inter-tight-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("../fonts/space-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── paleta: Bone & Oxblood ─────────────────────────────────────────── */
  --bg:        #F4F2EC;
  --panel:     #EDEAE1;
  --ink:       #14120F;
  --mid:       #6E6659;
  --faint:     #A79E90;
  --rule:      #14120F;
  --rule-soft: #CFC8BA;
  --accent:    #8C2F1E;
  --accent-2:  #3A4A3C;
  --hl:        #E3C15C;
  --inv-bg:    #14120F;
  --inv-ink:   #F4F2EC;

  /* odvodené — tie isté farby v inverznom páse a v stavoch */
  --accent-dim:    #8C2F1E52; /* odvrátené hrany drôtených telies */
  --rule-soft-inv: #3A362F;
  --rule-inv:      #6E6659;
  --panel-inv:     #1C1915;
  --focus:         var(--accent);
  --focus-inv:     var(--hl);
  --sel-bg:        var(--hl);
  --sel-ink:       var(--ink);

  /* ── písmo ──────────────────────────────────────────────────────────── */
  --disp: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* nič pod 13px */
  --fs-lbl:   0.8125rem;  /* 13px — mono štítky a nadpisy stĺpcov */
  --fs-s:     0.875rem;   /* 14px — druhoradý text, pätka, poznámky */
  --fs-b:     1.0625rem;  /* 17px — základ, na desktope 18px */
  --fs-m:     1.1875rem;
  --fs-l:     clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  --fs-xl:    clamp(1.5rem, 1.1rem + 1.9vw, 2.5rem);
  --fs-h2:    clamp(2.25rem, 1.25rem + 4.4vw, 4.5rem);
  --fs-h1:    clamp(3.1rem, 1rem + 11.8vw, 10rem);
  --fs-price: clamp(1.125rem, 0.95rem + 0.6vw, 1.5rem);

  --fw-body:  400;
  --fw-med:   500;
  --fw-disp:  600;

  --lh-tight: 0.96;
  --lh-snug:  1.08;
  --lh-mid:   1.3;
  --lh-body:  1.55;

  --ls-disp:  -0.02em;
  --ls-lbl:   0.13em;
  --ls-mono:  0.01em;
  --hang:     -0.045em;   /* optické vysunutie nadpisu do ľavého okraja */

  /* ── priestor ───────────────────────────────────────────────────────── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4.5rem;

  /* rytmus sekcií: jedna hodnota pre všetky pásy, jedna pre odstup
     nadpisu od obsahu. Nikde inde sa vertikálny rytmus nenastavuje. */
  --sec-pad: clamp(3.5rem, 6.5vw, 6rem);
  --sec-gap: var(--sp-6);

  --hair:      1px;
  --ul-w:      3px;
  --edge-w:    1.5px;     /* hrana drôtenej kocky aj ihlana */
  --row-ind:   calc(var(--sp-4) + var(--sp-3));  /* odsadenie názvu služby od znamienka */

  /* drôtená kocka */
  --cube-s:    100px;
  --cube-half: calc(var(--cube-s) / 2);
  --cube-box:  calc(var(--cube-s) * 1.8);
  --cube-drop: 268px;     /* o koľko kocka klesne pod nadpis */
  --pyr-drop:  70px;      /* o koľko ihlan klesne pod cenník */
  /* posun do okraja; min() ho drží vnútri aj na užších obrazovkách */
  --pyr-shift: min(1.5vw, 40px);
  --persp:     700px;

  /* drôtený ihlan so štvorcovou podstavou: strana 165, výška 150.
     Odtiaľ stena 171px a sklon atan(82.5/150) = 28.81deg. */
  --pyr-s:     165px;
  --pyr-half:  82.5px;
  --pyr-slant: 171px;
  --pyr-tilt:  28.81deg;

  /* dvanásťsten: päťuholník s polomerom 95 v poli 200x200.
     Strana a = 111.7, vpísaná guľa r = 1.1135 * a = 124.4.
     Prstence stien zvierajú s osou atan(1/2) = 26.565deg. */
  --dod-face:  200px;
  --dod-r:     124.4px;
  --dod-tilt:  26.565deg;
  --tl-unit:   1.75rem;   /* jeden deň na časovej osi */
  --tl-lbl:    8rem;      /* stĺpec s kótou termínu */
  --frame-h:   320px;     /* okno prehliadača v ukážke práce */
  --shell:     1240px;
  --pad-x:     clamp(1.25rem, 4vw, 3rem);
  --hdr-h:     4.5rem;
  --radius-in: 2px;
  --tap:       44px;

  /* ── miery textových blokov ─────────────────────────────────────────── */
  --w-sub:   40ch;
  --w-lede:  46ch;
  --w-text:  64ch;
  --w-prose: 38ch;

  /* ── pohyb ──────────────────────────────────────────────────────────── */
  --dur-swap:   200ms;    /* prelnutie medzi verziami webu */
  --dur-hl:     1000ms;   /* ťah zvýrazňovača v hero */
  --dur-hl-sec: 800ms;    /* ťah pod nadpismi sekcií */
  --dur-reveal: 520ms;
  --dur-ui:     180ms;
  --dur-row:    220ms;
  --delay-mark: 260ms;
  --dur-draw:   3400ms;   /* kocka sa kreslí pomaly, je to jej výstup */
  --ease-hl:    cubic-bezier(0.16, 0.72, 0.28, 1);
  /* kocka kreslí takmer rovnomerne, spomalí až na konci */
  --ease-draw:  cubic-bezier(0.25, 0.45, 0.4, 1);
  --ease-ui:    cubic-bezier(0.2, 0.6, 0.3, 1);
  --dur-cube:   20s;
  --dur-dod:    46s;
  --dur-tilt:   700ms;
  --dur-lean:   600ms;
  --delay-cube: 120ms;
  --rise:       12px;
  --shift:      0.25rem;
  --blink:      1.4s;

  /* stena dvanásťstena: obrys päťuholníka */
  --dod-face-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100,5 L190.35,70.65 L155.84,176.86 L44.16,176.86 L9.65,70.65 Z' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* stena ihlana: obrys trojuholníka ako maska, farbu dodá --accent */
  --pyr-face: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 165 171' preserveAspectRatio='none'%3E%3Cpath d='M3,169 L82.5,3 L162,169 Z' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");


  --z-head: 20;
  --z-grip: 3;
  --z-tag:  2;
}

@media (min-width: 760px) {
  :root {
    --fs-b:    1.125rem;   /* 18px */
    --fs-m:    1.25rem;
    --hdr-h:   4.25rem;
    --frame-h: 420px;
  }
}

@media (min-width: 1000px) {
  :root { --frame-h: 520px; }
}

@media (min-width: 1100px) {
  :root { --cube-s: 180px; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body,
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }

ul[class], ol[class] { list-style: none; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-b);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

[hidden] { display: none !important; }

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

input, textarea, button, select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button { background: none; border: 0; padding: 0; cursor: pointer; }

table { border-collapse: collapse; width: 100%; }

a { color: inherit; }

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

/* kotvy nesmú skončiť pod lepivou lištou */
section[id] { scroll-margin-top: calc(var(--hdr-h) + var(--sp-4)); }

/* ── typografia ───────────────────────────────────────────────────────── */
h1, h2, h3 {
  font-family: var(--disp);
  font-weight: var(--fw-disp);
  letter-spacing: var(--ls-disp);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

h3 { line-height: var(--lh-snug); }

p { text-wrap: pretty; }

/* mono výhradne pre ceny, termíny, kóty a malé štítky */
.lbl {
  font-family: var(--mono);
  font-size: var(--fs-lbl);
  line-height: var(--lh-mid);
  letter-spacing: var(--ls-lbl);
  text-transform: uppercase;
  color: var(--mid);
}

.num {
  font-family: var(--mono);
  letter-spacing: var(--ls-mono);
  font-variant-numeric: tabular-nums;
}

/* ── prístupnosť ──────────────────────────────────────────────────────── */
:focus-visible {
  outline: var(--ul-w) solid var(--focus);
  outline-offset: var(--sp-1);
}

.band--inv :focus-visible { outline-color: var(--focus-inv); }

.skip {
  position: fixed;
  left: var(--pad-x);
  top: var(--sp-2);
  z-index: calc(var(--z-head) + 1);
  transform: translateY(-250%);
  background: var(--ink);
  color: var(--inv-ink);
  font-family: var(--mono);
  font-size: var(--fs-lbl);
  letter-spacing: var(--ls-lbl);
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--sp-2) var(--sp-4);
}

.skip:focus { transform: translateY(0); }

.head-sentinel {
  display: block;
  height: var(--hair);
}

/* ── plátno ───────────────────────────────────────────────────────────── */
.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}