/* ===========================================================================
   layout.css — lepivá hlavička, pásy sekcií, hero, časová os, pätka
   Mobil je základ. Vertikálny rytmus riadia --sec-pad a --sec-gap.
   =========================================================================== */

/* ── hlavička ─────────────────────────────────────────────────────────── */
.site-head {
  position: sticky;
  top: 0;
  z-index: var(--z-head);
  /* podklad drží stále, inak by pri scrollovaní presvital obsah pod lištou */
  background: var(--bg);
  border-bottom: var(--hair) solid transparent;
  transition:
    background-color var(--dur-ui) var(--ease-ui),
    border-color var(--dur-ui) var(--ease-ui);
}

/* linka pribudne, až keď stránka odíde z východiskovej polohy */
.site-head.is-stuck { border-bottom-color: var(--rule-soft); }

.site-head__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "mark lang"
    "nav  nav";
  align-items: center;
  column-gap: var(--sp-4);
  row-gap: var(--sp-1);
  min-height: var(--hdr-h);
  padding-block: var(--sp-2);
}

.wordmark { grid-area: mark; }
.nav      { grid-area: nav; }
.lang     { grid-area: lang; }

/* ── pás sekcie ───────────────────────────────────────────────────────── */
.band { padding-block: var(--sec-pad); }

.band + .band { border-top: var(--hair) solid var(--rule-soft); }

.band--inv {
  --rule: var(--rule-inv);
  --rule-soft: var(--rule-soft-inv);
  --mid: var(--faint);
  background: var(--inv-bg);
  color: var(--inv-ink);
}

.band + .band--inv { border-top-color: transparent; }

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero {
  display: flex;
  min-height: calc(100svh - var(--hdr-h));
  padding-block: var(--sp-5) var(--sp-7);
}

.hero__inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
}

.hero__kicker { padding-bottom: var(--sp-5); }

.hero__h {
  margin-left: var(--hang);
  font-size: var(--fs-h1);
}

.hero__sub {
  max-width: var(--w-sub);
  padding-top: var(--sp-5);
  font-size: var(--fs-l);
  line-height: var(--lh-mid);
  color: var(--mid);
}

.hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-4) var(--sp-6);
  margin-top: auto;
  padding-top: var(--sp-5);
  border-top: var(--hair) solid var(--rule);
}

.hero__direct {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-4);
}

.hero__or {
  font-size: var(--fs-s);
  color: var(--mid);
}

/* ── hlavička sekcie: rovnaká vo všetkých sekciách ────────────────────── */
.sechead {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  padding-bottom: var(--sp-6);
  margin-bottom: var(--sec-gap);
  border-bottom: var(--hair) solid var(--rule);
}

.sechead__h {
  margin-left: var(--hang);
  font-size: var(--fs-h2);
}

.sechead__lede {
  max-width: var(--w-lede);
  color: var(--mid);
}

/* ── časová os ────────────────────────────────────────────────────────── */
.tl__axis { padding-bottom: var(--sp-5); }

.tl { display: grid; }

/* medzera pod krokom je násobkom dní do ďalšieho kroku (--span z config.php),
   takže dĺžka úseku na osi zodpovedá skutočnému termínu */
.tl__step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-left: var(--sp-5);
  padding-bottom: calc(var(--span) * var(--tl-unit));
  border-left: var(--hair) solid var(--rule-soft);
}

.tl__step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: var(--sp-3);
  height: var(--hair);
  background: var(--rule);
}

.tl__when { color: var(--accent); }

.tl__title {
  font-size: var(--fs-xl);
  padding-block: var(--sp-2);
}

.tl__text {
  max-width: var(--w-prose);
  color: var(--mid);
}

/* ── prípadovka v sekcii Práca ────────────────────────────────────────── */
.case {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
}

/* ── cenník a ihlan vedľa seba ────────────────────────────────────────── */
.svc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* ── telesá sa zapínajú až tam, kde je na ne miesto ───────────────────── */
.tl-wrap { position: relative; }

.pyr,
.dod { display: none; }

/* ── kontakt ──────────────────────────────────────────────────────────── */
.ct__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-7);
}

.ct__direct {
  display: grid;
  align-content: start;
  gap: var(--sp-2);
}

.ct__direct-lbl { padding-bottom: var(--sp-2); }

.ct__hours { padding-top: var(--sp-4); }

/* ── pätka ────────────────────────────────────────────────────────────── */
.site-foot {
  border-top: var(--hair) solid var(--rule);
  padding-block: var(--sp-6);
}

.site-foot__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3) var(--sp-5);
  font-size: var(--fs-s);
}

.site-foot__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  color: var(--mid);
}

/* celá šírka, teda vlastný riadok pod kontaktmi; veľkosť dedí z pätky */
.site-foot__privacy {
  flex-basis: 100%;
  margin: 0;
  color: var(--mid);
}










.spacer {
  margin-bottom: 2em;
}

/* ===========================================================================
   od 560px
   =========================================================================== */
@media (min-width: 560px) {
  .hero__direct {
    padding-left: var(--sp-6);
    border-left: var(--hair) solid var(--rule-soft);
  }
}

/* ===========================================================================
   od 760px
   =========================================================================== */
@media (min-width: 760px) {
  .site-head__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "mark nav lang";
    column-gap: var(--sp-6);
    padding-block: 0;
  }

  .hero { padding-block: var(--sp-6) var(--sp-8); }

  .hero__kicker { padding-bottom: var(--sp-6); }

  .sechead {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: end;
  }

  .sechead__lede { padding-bottom: var(--sp-2); }

  /* termín sa presunie na kótu vľavo od osi */
  .tl__step {
    grid-template-columns: var(--tl-lbl) minmax(0, var(--w-text));
    padding-left: 0;
    padding-bottom: 0;
    border-left: 0;
  }

  .tl__step::before { left: var(--tl-lbl); }

  .tl__when {
    padding-right: var(--sp-4);
    padding-top: var(--sp-1);
    text-align: right;
  }

  .tl__body {
    padding-left: var(--sp-5);
    padding-bottom: calc(var(--span) * var(--tl-unit));
    border-left: var(--hair) solid var(--rule-soft);
  }

  .tl__title { padding-top: 0; }

  .tl__text { max-width: var(--w-text); }

  .ct__grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: var(--sp-8);
  }

  .ct__direct {
    padding-left: var(--sp-6);
    border-left: var(--hair) solid var(--rule-soft);
  }
}

/* ===========================================================================
   od 1000px — ukážka práce sa rozdelí na rám a popis, ihlan si sadne
   vedľa cenníka
   =========================================================================== */
@media (min-width: 1000px) {
  .case {
    grid-template-columns: minmax(0, 62%) minmax(0, 1fr);
    gap: var(--sp-7);
    align-items: start;
  }

  .svc-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sp-7);
    align-items: center;
  }

  /* ihlan drží spodok cenníka a ešte kus klesne; posun je transformom,
     aby sa nehýbala výška riadka */
  .pyr {
    display: block;
    align-self: end;
    margin-bottom: var(--sp-6);
    transform: translate(var(--pyr-shift), var(--pyr-drop));
  }
}

/* ===========================================================================
   od 1100px — kocka si sadne vedľa nadpisu. Nižšie na ňu vedľa textu
   nie je miesto: perspektíva ju vykreslí širšiu, než je jej rámček.
   =========================================================================== */
@media (min-width: 1100px) {
  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto 1fr auto;
    column-gap: var(--sp-7);
  }

  /* nadpis drží celú šírku, aby „Weby a softvér“ ostalo na jednom riadku */
  .hero__kicker { grid-area: 1 / 1 / 2 / 3; }
  .hero__h      { grid-area: 2 / 1 / 3 / 3; }
  .hero__sub    { grid-area: 3 / 1 / 4 / 2; }
  .hero__foot   { grid-area: 5 / 1 / 6 / 3; }

  /* kocka sedí pri nadpise a klesne nižšie; posun je transformom,
     aby mriežka hero ostala nedotknutá */
  .cube {
    grid-area: 2 / 2 / 4 / 3;
    align-self: end;
    justify-self: end;
    margin: 0 0 var(--sp-5) 0;
    transform: translateY(var(--cube-drop));
  }
}

/* ===========================================================================
   od 1200px — v pravom dolnom rohu časovej osi je miesto na dvanásťsten
   =========================================================================== */
@media (min-width: 1200px) {
  .dod {
    display: block;
    position: absolute;
    right: var(--sp-6);
    top: var(--sp-6);
  }
}

/* ===========================================================================
   obmedzený pohyb — obe telesá sú čisto ambientné, tu nemajú čo robiť.
   Pravidlo musí stáť až za mediálnym dotazom vyššie, inak ho neprebije.
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .cube,
  .pyr,
  .dod { display: none; }
}