/* KUBO Rancher, Pripravujeme. Hodnoty len z tokeny.css. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
p, h1, h2 { margin: 0; }

body {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  font-family: var(--font);
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  font-weight: var(--fw-text);
  background: var(--c-dark);
  color: var(--c-on-dark);
}

a { color: inherit; }
a:focus-visible {
  outline: var(--focus-width) solid var(--c-focus);
  outline-offset: var(--focus-offset);
}

.skryte {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Štítok: jedna podoba pre každý údaj a stav, vždy nad hodnotou.
   Pred textom stĺpik plota v žltej (motív, podoba "štítok"). */
.stitok {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: var(--fs-14);
  line-height: var(--lh-head);
  font-weight: var(--fw-strong);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--c-on-dark-mute);
}
.stitok::before {
  content: "";
  flex: none;
  width: 4px;
  height: 14px;
  background: var(--c-tag);
}

/* Hlavička: len značka, stav webu je štítok nad h1 na každej šírke */
.hlavicka {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  min-height: 56px;
  padding: var(--sp-12) var(--gutter);
}

.znacka {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: var(--fs-25);
  line-height: 1;
  font-stretch: var(--stretch-display);
  font-weight: var(--fw-display);
  letter-spacing: 0.02em;
  text-decoration: none;
}
.znacka > span:last-child { font-weight: var(--fw-text); }
.znacka-stlpik {
  width: 6px;
  height: 24px;
  background: var(--c-tag);
}

/* Úvod: h1 a kontakt pod sebou, od 1024 px vedľa seba */
.uvod {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
  padding: var(--sp-16) var(--gutter) calc(var(--plot-h) - var(--sp-48));
}

.hero-blok { display: flex; flex-direction: column; gap: var(--sp-16); }
.hero {
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  font-weight: var(--fw-display);
  font-stretch: var(--stretch-display);
  letter-spacing: var(--tracking-hero);
  text-transform: uppercase;
}
.hero-akcent { color: var(--c-tag); }

.kontakt {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}
.udaj {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

/* Tlačidlá: telefón plné žlté, e-mail a návrat obrys, jedna os vľavo */
.tlacidlo {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: var(--sp-8) var(--sp-24);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.tlacidlo-hlavne {
  min-height: 64px;
  font-size: var(--fs-31);
  line-height: 1;
  font-weight: var(--fw-display);
  font-stretch: var(--stretch-display);
  background: var(--c-tag);
  color: var(--c-dark);
}
.tlacidlo-hlavne:hover { background: var(--c-tag-hover); }
.tlacidlo-hlavne:active { background: var(--c-tag-active); }
.tlacidlo-obrys {
  font-size: var(--fs-20);
  line-height: 1.2;
  font-weight: var(--fw-strong);
  border: var(--border-strong) solid var(--c-on-dark);
  background: var(--c-dark);
  overflow-wrap: anywhere;
}
.tlacidlo-obrys:hover { background: var(--c-on-dark); color: var(--c-dark); }

/* Plot fixácie: ráhno a stĺpiky z gradientu, od spodku okna na celú šírku */
.plot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  height: var(--plot-h);
  background:
    linear-gradient(var(--c-motiv), var(--c-motiv)) 0 0 / 100% var(--plot-rahno) no-repeat,
    repeating-linear-gradient(90deg, var(--c-motiv) 0 var(--plot-stlpik), transparent var(--plot-stlpik) var(--plot-krok)) var(--gutter) 0 / 100% 100%;
}
.brana {
  position: absolute;
  top: var(--plot-rahno);
  width: var(--brana-w);
  height: calc(100% - var(--plot-rahno));
  /* Sedí v rastri plota: ľavá hrana na pravej hrane stĺpika, okolo 72 % šírky */
  left: calc(var(--gutter) + var(--plot-stlpik) + 3 * var(--plot-krok));
  left: calc(var(--gutter) + var(--plot-stlpik) + round(down, 72% - var(--gutter) - var(--plot-krok), var(--plot-krok)));
  background: var(--c-dark);
  fill: var(--c-motiv-brana);
}

@media (min-width: 640px) {
  .tlacidlo { width: fit-content; }
}

@media (min-width: 1024px) {
  .hlavicka { min-height: 80px; }
  .hero-blok { gap: var(--sp-24); }
  .kontakt { gap: var(--sp-24); }
  .uvod {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
    align-items: center;
    column-gap: var(--sp-64);
    padding-top: var(--sp-32);
    padding-bottom: calc(var(--plot-h) - var(--sp-64));
  }
  .hero { font-size: var(--fs-hero-wide); }
  .tlacidlo-hlavne { min-height: 88px; font-size: var(--fs-49); }
  .tlacidlo-obrys { min-height: 64px; font-size: var(--fs-25); }
  .tlacidlo { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .tlacidlo { transition: none; }
}