/* ===========================================================================
   components.css — značka, navigácia, odkazy, zvýrazňovač, cenník,
   referencia, posuvník predtým/potom, formulár, odhaľovanie sekcií
   =========================================================================== */

/* ── značka a navigácia ───────────────────────────────────────────────── */
.wordmark {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: var(--fs-b);
  letter-spacing: var(--ls-mono);
  text-decoration: none;
}

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

.nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
}

.nav__link {
  display: inline-block;
  padding-block: var(--sp-2);
  font-size: var(--fs-s);
  text-decoration: none;
  border-bottom: var(--ul-w) solid transparent;
  transition: color var(--dur-ui) var(--ease-ui);
}

.nav__link:hover { color: var(--accent); }

.nav__link.is-current,
.nav__link.is-active { border-bottom-color: var(--accent); }

/* kým je na obrazovke sekcia, podčiarknutie patrí jej */
.nav__link.is-muted { border-bottom-color: transparent; }

.nav__link--soon {
  color: var(--mid);
  border-bottom-width: var(--hair);
  border-bottom-style: dotted;
  border-bottom-color: var(--rule-soft);
  cursor: default;
}

/* text „čoskoro“ ostáva pre čítačky, vizuálne stačí stlmená položka */
.nav__soon {
  position: absolute;
  width: var(--hair);
  height: var(--hair);
  overflow: hidden;
  clip-path: inset(50%);
}

.lang {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--mono);
  font-size: var(--fs-lbl);
  letter-spacing: var(--ls-lbl);
  color: var(--mid);
}

.lang__item {
  padding: var(--sp-2) var(--sp-1);
  text-decoration: none;
}

.lang__item.is-active { color: var(--ink); }

.lang__item--soon { color: var(--faint); cursor: default; }

/* ── zvýrazňovač ──────────────────────────────────────────────────────── */
/* Jedna vrstva atramentu. Tvar aj hrbolčeky rieši SVG z highlighter.js,
   tu sa len umiestni za text a odkryje. */
.hl {
  position: relative;
  display: inline-block;
  /* ťah je odmeraný na túto výšku riadka, drž ju bez ohľadu na okolie */
  line-height: var(--lh-tight);
  white-space: nowrap;
}

.hl-text {
  position: relative;
  z-index: 1;
}

.hl-ink {
  position: absolute;
  /* Odmerané z písma Newsreader pri výške riadka 0.96: účiara sedí 0.72em
     pod vrchom boxu, vrch malých písmen na 0.27em. Ťah ide kúsok nad ne
     a kúsok pod účiaru. Rozmer musí byť daný priamo: SVG je nahradený prvok,
     pri height:auto by si výšku dopočítalo z pomeru strán viewBoxu. */
  left: -0.1em;
  top: 0.14em;
  width: calc(100% + 0.38em);
  height: 0.75em;
  max-width: none;
  z-index: 0;
  opacity: 0.85;
  mix-blend-mode: multiply;
  overflow: visible;
  pointer-events: none;
}

/* farbu drží token, nie atribút v SVG */
.hl-ink > g > path,
.hl-ink > g > ellipse { fill: var(--hl); }

/* Odkrýva sa maska, nie samotný ťah. Tvar sa teda nikdy nenaťahuje
   a hrbolčeky ostanú ostré po celej dĺžke. */
.hl-wipe {
  transform: scaleX(0);
  transform-box: fill-box;
  transform-origin: left center;
  transition: transform var(--dur-hl) var(--ease-hl);
}

.hl.is-inked .hl-wipe { transform: scaleX(1); }

.hl--scroll .hl-wipe { transition-duration: var(--dur-hl-sec); }

/* ── drôtená kocka ────────────────────────────────────────────────────── */
.cube {
  /* rámček je väčší než kocka: perspektíva ju vykreslí širšiu, než je jej
     hrana, a orez pri kreslení jej nesmie ukrojiť rohy */
  display: grid;
  place-items: center;
  width: var(--cube-box);
  height: var(--cube-box);
  margin-top: var(--sp-5);
  perspective: var(--persp);
}

.cube__tilt {
  width: var(--cube-s);
  height: var(--cube-s);
}

/* rovnaké odkrývanie ako pri ťahu: hrany pribúdajú zľava, akoby ich niekto
   ťahal perom, nie akoby sa objekt vynáral. Bez JS je kocka rovno nakreslená. */
.js .cube { clip-path: polygon(-10% -10%, -10% -10%, -10% -10%); }

.js .cube.is-in {
  animation: cube-draw var(--dur-draw) var(--ease-draw) both;
}

/* Odkrývacia hrana je kolmá na uhlopriečku: hrany pribúdajú od jedného rohu
   k protiľahlému. Koncový trojuholník presahuje rámček, takže nič neoreže. */
@keyframes cube-draw {
  from { clip-path: polygon(-10% -10%, -10% -10%, -10% -10%); }
  to   { clip-path: polygon(-10% -10%, 320% -10%, -10% 320%); }
}

/* náklon podľa kurzora sedí nad otáčaním, aby si transformácie neprekážali */
.cube__tilt {
  transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transform-style: preserve-3d;
  transition: transform var(--dur-tilt) var(--ease-ui);
}

.cube__spin {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: cube-spin var(--dur-cube) linear infinite;
}

@keyframes cube-spin {
  from { transform: rotateX(-24deg) rotateY(0deg); }
  to   { transform: rotateX(336deg) rotateY(720deg); }
}

.cube__f {
  position: absolute;
  inset: 0;
  border: var(--edge-w) solid var(--accent);
  backface-visibility: hidden;
  transform: var(--t);
}

.cube__f--fr { --t: translateZ(var(--cube-half)); }
.cube__f--bk { --t: rotateY(180deg) translateZ(var(--cube-half)); }
.cube__f--ri { --t: rotateY(90deg) translateZ(var(--cube-half)); }
.cube__f--le { --t: rotateY(-90deg) translateZ(var(--cube-half)); }
.cube__f--tp { --t: rotateX(90deg) translateZ(var(--cube-half)); }
.cube__f--bt { --t: rotateX(-90deg) translateZ(var(--cube-half)); }

/* dvojča tej istej steny otočené chrbtom: kreslí odvrátené hrany slabšie */
.cube__f--dim {
  border-color: var(--accent-dim);
  transform: var(--t) rotateY(180deg);
}

/* ── drôtený ihlan ────────────────────────────────────────────────────── */
.pyr {
  width: var(--pyr-s);
  height: var(--pyr-slant);
  perspective: var(--persp);
}

.pyr__lean {
  width: 100%;
  height: 100%;
  /* jedna rotácia okolo osi kolmej na smer ku kurzoru: vrchol sa nakláňa
     priamo za ním, nie po osiach. Otáča sa okolo stredu podstavy. */
  transform-origin: 50% 100%;
  transform: rotate3d(var(--rx, 1), 0, var(--rz, 0), var(--ang, 0deg));
  transform-style: preserve-3d;
  transition: transform var(--dur-lean) var(--ease-ui);
}

.pyr__body {
  position: relative;
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;
  transform: rotateY(-28deg);
  transform-style: preserve-3d;
}

.pyr__f {
  --pt: rotateY(calc(var(--n) * 90deg)) translateZ(var(--pyr-half)) rotateX(var(--pyr-tilt));
  position: absolute;
  inset: 0;
  transform-origin: 50% 100%;
  transform: var(--pt);
  background: var(--accent);
  backface-visibility: hidden;
  mask-image: var(--pyr-face);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-image: var(--pyr-face);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
}

.pyr__f--dim {
  background: var(--accent-dim);
  transform: var(--pt) rotateY(180deg);
}

/* ── drôtený dvanásťsten ──────────────────────────────────────────────── */
.dod {
  width: var(--dod-face);
  height: var(--dod-face);
  perspective: calc(var(--persp) * 2);
}

.dod__spin {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: dod-spin var(--dur-dod) linear infinite;
}

@keyframes dod-spin {
  from { transform: rotateX(-14deg) rotateY(0deg); }
  to   { transform: rotateX(346deg) rotateY(360deg); }
}

.dod__f {
  --dt: translateZ(var(--dod-r));
  position: absolute;
  inset: 0;
  transform: var(--dt);
  background: var(--accent);
  backface-visibility: hidden;
  mask-image: var(--dod-face-mask);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-image: var(--dod-face-mask);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
}

/* dva prstence po piatich stenách medzi vrchnou a spodnou */
.dod__f--top { --dt: rotateX(90deg) translateZ(var(--dod-r)); }
.dod__f--bot { --dt: rotateX(-90deg) translateZ(var(--dod-r)); }

.dod__f--up {
  --dt: rotateY(calc(var(--n) * 72deg)) rotateX(var(--dod-tilt))
        translateZ(var(--dod-r)) rotateZ(180deg);
}

.dod__f--lo {
  --dt: rotateY(calc(var(--n) * 72deg + 36deg)) rotateX(calc(var(--dod-tilt) * -1))
        translateZ(var(--dod-r));
}

.dod__f--dim {
  background: var(--accent-dim);
  transform: var(--dt) rotateY(180deg);
}

/* ── odkazy ───────────────────────────────────────────────────────────── */
.cta {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding-bottom: var(--sp-1);
  border-bottom: var(--ul-w) solid var(--accent);
  font-size: var(--fs-m);
  font-weight: var(--fw-med);
  text-decoration: none;
  transition: color var(--dur-ui) var(--ease-ui);
}

.cta:hover { color: var(--accent); }

.cta__arrow { transition: transform var(--dur-ui) var(--ease-ui); }

.cta:hover .cta__arrow { transform: translateX(var(--shift)); }

.cta--inv { border-bottom-color: var(--focus-inv); }

.cta--inv:hover { color: var(--focus-inv); }

.tel {
  font-family: var(--mono);
  font-size: var(--fs-s);
  letter-spacing: var(--ls-mono);
  text-decoration-color: var(--rule-soft);
  text-underline-offset: var(--sp-1);
}

.tel:hover { text-decoration-color: var(--accent); }

.ln {
  text-decoration-color: var(--rule-soft);
  text-underline-offset: var(--sp-1);
}

.ln:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* ── cenník ───────────────────────────────────────────────────────────── */
.ptab thead th {
  padding-bottom: var(--sp-2);
  border-bottom: var(--hair) solid var(--rule);
  font-family: var(--mono);
  font-size: var(--fs-lbl);
  font-weight: var(--fw-body);
  letter-spacing: var(--ls-lbl);
  text-transform: uppercase;
  text-align: left;
  color: var(--mid);
}

.ptab thead .ptab__c-price,
.ptab thead .ptab__c-time,
.ptab__c-price,
.ptab__c-time { text-align: right; }

.ptab__c-time { display: none; }

.ptab__row > * {
  padding-block: var(--sp-3);
  border-bottom: var(--hair) solid var(--rule-soft);
  vertical-align: middle;
  font-weight: var(--fw-body);
  transition: background-color var(--dur-ui) var(--ease-ui);
}

.ptab__row:hover > *,
.ptab__row.is-open > * { background: var(--panel); }

.ptab__c-price {
  font-size: var(--fs-price);
  line-height: var(--lh-snug);
  white-space: nowrap;
}

.ptab__c-time {
  font-size: var(--fs-s);
  line-height: var(--lh-snug);
  color: var(--mid);
  white-space: nowrap;
}

.rowbtn {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: var(--tap);
  text-align: left;
  font-family: var(--disp);
  font-size: var(--fs-l);
  font-weight: var(--fw-disp);
  letter-spacing: var(--ls-disp);
  line-height: var(--lh-snug);
}

.rowbtn:hover { color: var(--accent); }

.rowbtn__sign {
  position: relative;
  flex: none;
  width: var(--sp-4);
  height: var(--sp-4);
  align-self: center;
}

.rowbtn__sign::before,
.rowbtn__sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: var(--hair);
  background: var(--accent);
}

.rowbtn__sign::after {
  inset: 0 50% 0 auto;
  width: var(--hair);
  height: auto;
  transition: transform var(--dur-row) var(--ease-ui);
}

.is-open .rowbtn__sign::after { transform: scaleY(0); }

.ptab__det > td {
  padding: 0;
  border-bottom: var(--hair) solid var(--rule-soft);
}

.det { display: grid; }

.js .det {
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-row) var(--ease-ui);
}

.js .ptab__det.is-open .det { grid-template-rows: 1fr; }

.det__in {
  min-height: 0;
  overflow: hidden;
}

.js .det__in {
  visibility: hidden;
  transition: visibility 0s linear var(--dur-row);
}

.js .ptab__det.is-open .det__in {
  visibility: visible;
  transition-delay: 0s;
}

.det__desc {
  max-width: var(--w-text);
  padding-block: var(--sp-4);
  padding-left: var(--row-ind);
}

.det__grid {
  display: grid;
  gap: var(--sp-5);
  padding-bottom: var(--sp-6);
}

/* text panela začína tam, kde názov služby nad ním */
.det__main { padding-left: var(--row-ind); }

.det__lbl { padding-bottom: var(--sp-3); }

.det__list {
  display: grid;
  gap: var(--sp-3);
  line-height: var(--lh-mid);
}

.det__list li {
  padding-left: var(--sp-4);
  border-left: var(--hair) solid var(--accent-2);
}

.det__timing {
  max-width: var(--w-prose);
  font-size: var(--fs-s);
  line-height: var(--lh-mid);
  color: var(--mid);
}

/* doplnková poznámka v rozbalenom riadku */
.det__note {
  grid-column: 1 / -1;
  max-width: var(--w-text);
  padding-top: var(--sp-4);
  padding-left: var(--row-ind);
  border-top: var(--hair) solid var(--rule-soft);
  font-size: var(--fs-s);
  line-height: var(--lh-mid);
  color: var(--mid);
}

.ptab__note {
  max-width: var(--w-text);
  padding-top: var(--sp-4);
  font-size: var(--fs-s);
  color: var(--mid);
}

/* ── referencia ───────────────────────────────────────────────────────── */
.quote {
  margin-top: var(--sp-8);
  max-width: var(--w-text);
  padding-left: var(--sp-5);
  border-left: var(--ul-w) solid var(--hl);
}

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

.quote__t {
  padding-block: var(--sp-3);
  font-family: var(--disp);
  font-size: var(--fs-xl);
  font-weight: var(--fw-disp);
  letter-spacing: var(--ls-disp);
  line-height: var(--lh-snug);
}

.quote__c {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
  font-size: var(--fs-s);
}

.quote__meta { color: var(--mid); }

/* ── ukážka práce: rám prehliadača ────────────────────────────────────── */
.tabs {
  display: flex;
  gap: var(--sp-4);
  padding-bottom: var(--sp-3);
}

.tab {
  padding-bottom: var(--sp-1);
  border-bottom: var(--ul-w) solid transparent;
  font-family: var(--mono);
  font-size: var(--fs-lbl);
  letter-spacing: var(--ls-lbl);
  text-transform: uppercase;
  color: var(--mid);
  transition: color var(--dur-ui) var(--ease-ui);
}

.tab:hover { color: var(--ink); }

.tab.is-on {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.frame {
  border: var(--hair) solid var(--rule);
  background: var(--panel);
}

.frame__bar {
  display: flex;
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: var(--hair) solid var(--rule-soft);
}

.frame__url { color: var(--mid); }

/* okno má pevnú výšku, stránka v ňom sa roluje */
.frame__port {
  position: relative;
  height: var(--frame-h);
  background: var(--bg);
}

.shot {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur-swap) var(--ease-ui),
    visibility 0s linear var(--dur-swap);
}

.shot.is-on {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.shot img {
  width: 100%;
  height: auto;
}

.frame__hint {
  padding-top: var(--sp-3);
  color: var(--faint);
}

/* na dotyk sa neprechádza myšou, rada by bola zavádzajúca */
@media (hover: none) {
  .frame__hint { display: none; }
}

.case__meta {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-content: start;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-s);
}

.case__meta dt { padding-top: 0.2em; }

.case__meta dd { margin: 0; }

.case__notes {
  grid-column: 1 / -1;
  padding-top: var(--sp-4);
  margin-top: var(--sp-4);
  border-top: var(--hair) solid var(--rule-soft);
}

.case__notes ul {
  display: grid;
  gap: var(--sp-3);
  list-style: none;
  padding: 0;
  color: var(--mid);
  line-height: var(--lh-mid);
}

.case__notes li {
  padding-left: var(--sp-4);
  border-left: var(--hair) solid var(--accent-2);
}

/* ── formulár ─────────────────────────────────────────────────────────── */
.form { display: grid; gap: var(--sp-5); }

.field { display: grid; gap: var(--sp-1); }

.field__lbl { color: var(--faint); }

.field__opt { color: var(--rule-inv); }

.field__in {
  width: 100%;
  min-height: var(--tap);
  padding: var(--sp-2) 0;
  background: transparent;
  border: 0;
  border-bottom: var(--hair) solid var(--rule-inv);
  border-radius: var(--radius-in);
  color: var(--inv-ink);
  transition: border-color var(--dur-ui) var(--ease-ui);
}

.field__in:hover { border-bottom-color: var(--faint); }

.field__in:focus { border-bottom-color: var(--hl); }

.field__in[aria-invalid="true"] { border-bottom-color: var(--hl); }

.field__in--area { resize: vertical; }

/* hlásenie sedí pod poľom, nie v okne prehliadača */
.field__err {
  margin-top: var(--sp-2);
  padding-left: var(--sp-3);
  border-left: var(--ul-w) solid var(--hl);
  font-size: var(--fs-s);
  line-height: var(--lh-mid);
  color: var(--hl);
}

.form__err { margin-top: 0; }

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  padding-top: var(--sp-2);
}

.form__privacy {
  max-width: var(--w-prose);
  font-size: var(--fs-s);
  color: var(--faint);
}

/* ── odosielanie: klik musí byť vidieť skôr, než sa vráti odpoveď ─────── */
.form.is-sending .cta { cursor: progress; }

.form.is-sending .field__in {
  opacity: 0.5;
  border-bottom-style: dashed;
}

/* výpustka je základný stav, animácia ju len rozpisuje po bodkách;
   pri obmedzenom pohybe tak ostane stáť „Odosielam…“ */
.form.is-sending .cta__t::after {
  content: '…';
  display: inline-block;
  width: 1.1ch;
  text-align: left;
  animation: dots 1.2s steps(1, end) infinite;
}

@keyframes dots {
  0%   { content: '.'; }
  33%  { content: '..'; }
  66%  { content: '…'; }
}

/* šípka sa na čas odosielania zmení na krúžok, ktorý sa točí */
.form.is-sending .cta__arrow {
  align-self: center;
  width: 0.85em;
  height: 0.85em;
  border: var(--hair) solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  font-size: 0;                 /* znak šípky preč, krúžok ostáva */
  transform: none;
  animation: cta-spin 700ms linear infinite;
}

@keyframes cta-spin { to { transform: rotate(1turn); } }

.form__ok {
  display: grid;
  gap: var(--sp-3);
  align-content: center;
  padding: var(--sp-6);
  background: var(--panel-inv);
  border-left: var(--ul-w) solid var(--hl);
}

.form__ok-h {
  font-family: var(--disp);
  font-size: var(--fs-xl);
  font-weight: var(--fw-disp);
  letter-spacing: var(--ls-disp);
  line-height: var(--lh-snug);
}

.form__ok-p { font-size: var(--fs-s); color: var(--faint); }

.hp {
  position: absolute;
  width: var(--hair);
  height: var(--hair);
  overflow: hidden;
  clip-path: inset(50%);
}

.ct__big {
  font-family: var(--mono);
  font-size: var(--fs-l);
  letter-spacing: var(--ls-mono);
  line-height: var(--lh-mid);
  text-decoration-color: var(--rule-inv);
  text-underline-offset: var(--sp-1);
  word-break: break-word;
}

.ct__big:hover { color: var(--hl); text-decoration-color: var(--hl); }

.ct__big--mail { font-size: var(--fs-m); }

.ct__hours { color: var(--faint); }

/* ── odhaľovanie sekcií ───────────────────────────────────────────────── */
.js .reveal {
  opacity: 0;
  transform: translateY(var(--rise));
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-reveal) var(--ease-ui),
    transform var(--dur-reveal) var(--ease-ui);
}

/* ── od 560px ─────────────────────────────────────────────────────────── */
@media (min-width: 560px) {
  .ptab { table-layout: fixed; }

  .ptab__c-time { display: table-cell; }

  .ptab__c-price { width: 26%; }

  .ptab__c-time { width: 18%; }
}

/* ── od 760px ─────────────────────────────────────────────────────────── */
@media (min-width: 760px) {
  .nav__list {
    justify-content: flex-end;
    gap: var(--sp-2) var(--sp-6);
  }

  /* rovnaké šírky ako stĺpce tabuľky, takže TRVANIE začína na hrane ceny */
  .det__grid {
    grid-template-columns: 56% minmax(0, 1fr);
    column-gap: 0;
  }

  .ptab__row > * { padding-block: var(--sp-4); }
}