/* =====================================================================
   Obnova-Domu · komponent „posuvné karty služieb" (prefix sp-)
   Pôvod: /varianty/sluzby-posuvnik/ (vzor ellisdon.com „Our Solutions").
   Markup: /_partials/sluzby-posuvnik.html · skript: /js/komponenty/sluzby-posuvnik.js
   Závisí od tokenov /css/main.css (farby, písma, --max, --okraj, --r-karta).
   Sekcia NEMÁ vlastné pozadie – presvitá pozadie stránky (--paper);
   svetlý panel je o tón tmavší (--paper-2), aby sa od stránky odlíšil.
   Stavové triedy (nastavuje JS): .sp-pripravena, .sp-viditelna, .sp-otvorena, .sp-tahanie
   ===================================================================== */

.sp-sluzby {
  /* farby – namapované na tokeny main.css */
  --sp-panel: var(--paper-2);            /* svetlý panel + pilulka navigácie */
  --sp-plocha: var(--paper-3);           /* šípky v pilulke */
  --sp-nadpis: var(--ink);
  --sp-text: var(--text);
  --sp-zelena: var(--green);             /* iba plochy (s tmavou ikonou) */
  --sp-zelena-text: var(--green-deep);   /* zelený text a aktívna bodka na svetlom */
  --sp-tmava: var(--ink-2);              /* podklad karty, kým sa načíta fotka */
  --sp-biela: #fff;
  --sp-tien-rgb: 18, 20, 18;             /* = --ink, stmavenie fotky */
  --sp-bodka: var(--muted);
  --sp-upozornenie: #B45309;             /* štítok „Dočasná ilustrácia" */

  /* rozmery */
  --sp-max: var(--max);
  --sp-okraj: var(--okraj);
  --sp-ease: cubic-bezier(.2, 1, .2, 1);
  --sp-odstup-hore: clamp(20px, 2.6vw, 44px);    /* medzera medzi hero a panelom */
  --sp-odstup-dole: clamp(28px, 3.4vw, 56px);    /* ďalšia .sekcia má vlastný horný padding */
  /* odsadenie zľava = okraj obsahu stránky (.wrap); vpravo karty vybiehajú za okraj */
  --sp-odsad: calc((100% - min(var(--sp-max), 100% - 2 * var(--sp-okraj))) / 2);
  --sp-karta-w: clamp(250px, 29.6vw, 427px);

  position: relative;
  padding-top: var(--sp-odstup-hore);
  padding-bottom: var(--sp-odstup-dole);
  color: var(--sp-text);
  overflow-x: clip;
}
@supports (background: color-mix(in srgb, red 50%, blue)) {
  .sp-sluzby { --sp-bodka: color-mix(in srgb, var(--muted) 80%, var(--paper-2)); }   /* 3,4 : 1 na paneli */
}

/* Svetlý panel pod nadpisom – karty doň zasahujú zdola */
.sp-sluzby__panel {
  --sp-panel-m: clamp(8px, 1.4vw, 20px);
  margin-inline: var(--sp-panel-m);
  padding: clamp(48px, 7vw, 104px) 0 clamp(150px, 17vw, 250px);
  background: linear-gradient(180deg, var(--sp-panel) 0%, var(--sp-panel) 55%, transparent 100%);
  border-radius: clamp(16px, 2vw, 28px) clamp(16px, 2vw, 28px) 0 0;
}
.sp-sluzby__hlava {
  /* 100 % + 2× okraj panela = šírka sekcie → nadpis lícuje s prvou kartou aj s .wrap */
  width: min(var(--sp-max), 100% + 2 * var(--sp-panel-m) - 2 * var(--sp-okraj));
  margin-inline: auto;
  display: grid; gap: 24px;
}
@media (min-width: 900px) {
  .sp-sluzby__hlava { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; gap: 64px; }
}
.sp-sluzby__kicker {
  display: flex; align-items: center; gap: 10px; margin: 0 0 18px;
  font-family: var(--font-text);
  font-size: var(--fs-small); font-weight: 700; line-height: 1.6; letter-spacing: .12em; text-transform: uppercase;   /* 14–15 px = najmenší text systému */
  color: var(--sp-zelena-text);
}
.sp-sluzby__kicker::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--sp-zelena); }
.sp-sluzby__h {
  margin: 0;
  font-family: var(--font-display); color: var(--sp-nadpis);
  /* Montserrat je širší než pôvodný Bricolage → menší stupeň, aby „Celá obnova domu." ostalo v jednom riadku */
  font-size: clamp(30px, 8.8vw, 48px); line-height: 1.04; letter-spacing: -.035em; font-weight: 300;
  text-wrap: balance;
}
@media (min-width: 900px) {
  .sp-sluzby__h { font-size: clamp(40px, 4.6vw, 68px); }
}
.sp-sluzby__h strong { font-weight: 700; color: var(--sp-zelena-text); }
.sp-sluzby__lead {
  margin: 0; max-width: 32em;
  font-family: var(--font-text); font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; font-weight: 450;
  color: var(--sp-text);
}

/* ---------- Posuvný pás ---------- */
.sp-sluzby__pas {
  margin-top: calc(-1 * clamp(110px, 13vw, 190px));
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding-inline: var(--sp-odsad);   /* % sa počíta zo šírky sekcie, takže sedí s okrajom obsahu */
  scroll-padding-inline: var(--sp-odsad);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  outline: none;
}
.sp-sluzby__pas::-webkit-scrollbar { display: none; }
.sp-sluzby__pas.sp-tahanie { scroll-snap-type: none; cursor: grabbing; user-select: none; -webkit-user-select: none; }
.sp-sluzby__pas.sp-tahanie .sp-karta__odkaz { pointer-events: none; }

.sp-sluzby__rad {
  display: flex; gap: clamp(12px, 1.7vw, 24px);
  width: max-content;
  margin: 0; padding: 6px 0 10px; list-style: none;
}

/* ---------- Karta ---------- */
.sp-karta {
  position: relative; flex: none;
  width: var(--sp-karta-w); aspect-ratio: 427 / 577;
  max-height: 72vh; min-height: 360px;
  border-radius: var(--r-karta); overflow: hidden;
  background: var(--sp-tmava);
  scroll-snap-align: start;
  isolation: isolate;
}
.sp-karta__foto {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover;
  transition: transform .6s var(--sp-ease);
  -webkit-user-drag: none; user-select: none; -webkit-user-select: none;
}
.sp-karta::after {               /* stmavenie zdola, aby bol názov čitateľný */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--sp-tien-rgb), 0) 38%, rgba(var(--sp-tien-rgb), .82) 100%);
  transition: background .4s ease;
}
.sp-karta__odkaz { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.sp-karta__odkaz:focus-visible {
  outline: 3px solid var(--sp-zelena); outline-offset: -3px; border-radius: inherit;
  box-shadow: inset 0 0 0 6px rgba(var(--sp-tien-rgb), .6);
}

.sp-karta__plus {
  position: absolute; z-index: 4; top: clamp(14px, 1.6vw, 24px); right: clamp(14px, 1.6vw, 24px);
  width: clamp(44px, 4vw, 58px); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%;
  background: var(--sp-biela); color: var(--sp-nadpis); cursor: pointer;
  transition: background .3s ease, color .3s ease, transform .5s var(--sp-ease);
}
.sp-karta__plus::before, .sp-karta__plus::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 36%; height: 2px; border-radius: 2px; background: currentColor;
  transform: translate(-50%, -50%);
}
.sp-karta__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.sp-karta__plus:focus-visible {
  outline: 3px solid var(--sp-zelena); outline-offset: 3px; border-radius: 50%;
  box-shadow: 0 0 0 3px var(--sp-nadpis);
}

.sp-karta__text {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0;
  padding: clamp(18px, 2vw, 32px);
  color: var(--sp-biela); pointer-events: none;
}
.sp-karta__nazov {
  margin: 0;
  font-family: var(--font-display); color: var(--sp-biela);
  /* veľkosť odvodená od šírky karty: „Tepelné čerpadlá" (8,4 em v Montserrate) sa zmestí do jedného riadku */
  font-size: clamp(24px, calc(var(--sp-karta-w) * .098), 42px);
  line-height: 1.02; letter-spacing: -.035em; font-weight: 700;
  text-wrap: balance; hyphens: manual;
}
/* Popis: výška 0 → auto cez grid 0fr → 1fr */
.sp-karta__popis {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .55s var(--sp-ease);
}
.sp-karta__popis > div { overflow: hidden; min-height: 0; }
.sp-karta__popis p {
  margin: 0; padding-top: 14px;
  font-family: var(--font-text); font-size: 15px; line-height: 1.5; font-weight: 500; color: rgba(255, 255, 255, .94);
  opacity: 0; transform: translateY(8px);
  transition: opacity .35s ease, transform .55s var(--sp-ease);
}
.sp-karta__viac {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  font-family: var(--font-text); font-size: 14px; font-weight: 700; color: var(--sp-biela);
  opacity: 0; transition: opacity .35s ease .05s;
}
.sp-karta__viac::after {
  content: ""; width: 18px; height: 10px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.sp-karta__docasne {
  position: absolute; z-index: 3; top: clamp(14px, 1.6vw, 24px); left: clamp(14px, 1.6vw, 24px);
  max-width: calc(100% - 110px); padding: 5px 10px; border-radius: 6px;
  background: rgba(255, 255, 255, .9); color: var(--sp-upozornenie);
  font-family: var(--font-text); font-size: 11px; font-weight: 700; line-height: 1.3;
}

/* Otvorený stav: kliknutie na + (všade) alebo hover (len zariadenia s myšou) */
.sp-karta.sp-otvorena .sp-karta__popis { grid-template-rows: 1fr; }
.sp-karta.sp-otvorena .sp-karta__popis p,
.sp-karta.sp-otvorena .sp-karta__viac { opacity: 1; transform: none; }
.sp-karta.sp-otvorena .sp-karta__plus { background: var(--sp-zelena); color: var(--sp-nadpis); transform: rotate(45deg); }
.sp-karta.sp-otvorena::after { background: linear-gradient(180deg, rgba(var(--sp-tien-rgb), .15) 0%, rgba(var(--sp-tien-rgb), .88) 100%); }

@media (hover: hover) and (pointer: fine) {
  .sp-karta:hover .sp-karta__foto { transform: scale(1.05); }
  .sp-karta:hover .sp-karta__popis { grid-template-rows: 1fr; }
  .sp-karta:hover .sp-karta__popis p,
  .sp-karta:hover .sp-karta__viac { opacity: 1; transform: none; }
  .sp-karta:hover .sp-karta__plus { background: var(--sp-zelena); color: var(--sp-nadpis); }
  .sp-karta:hover::after { background: linear-gradient(180deg, rgba(var(--sp-tien-rgb), .15) 0%, rgba(var(--sp-tien-rgb), .88) 100%); }
  /* 3. 10. 2026: na počítači sa popis ukáže pri prejdení myšou, tlačidlo „+“ by nič nerobilo → len na dotykových zariadeniach */
  .sp-karta__plus { display: none; }
  .sp-sluzby__pas { cursor: grab; }
  .sp-sluzby__pas.sp-tahanie { cursor: grabbing; }
}
/* ovládanie klávesnicou: popis sa ukáže, keď je odkaz karty vo fokuse */
.sp-karta:has(.sp-karta__odkaz:focus-visible) .sp-karta__popis { grid-template-rows: 1fr; }
.sp-karta:has(.sp-karta__odkaz:focus-visible) .sp-karta__popis p,
.sp-karta:has(.sp-karta__odkaz:focus-visible) .sp-karta__viac { opacity: 1; transform: none; }
.sp-karta:has(.sp-karta__odkaz:focus-visible)::after { background: linear-gradient(180deg, rgba(var(--sp-tien-rgb), .15) 0%, rgba(var(--sp-tien-rgb), .88) 100%); }

/* Nábeh kariet pri prvom zobrazení (nie pri ?noanim=1 ani pri obmedzenom pohybe).
   Zámerne @keyframes, nie transition: prechod závisí od štýlu „pred zmenou" a v Chromiu sa
   podľa časovania načítania (lazy fotky) často vôbec nespustil – karty naraz skočili.
   Animácia od predchádzajúceho štýlu nezávisí. Časovanie je rovnaké ako v origináli
   (jas .7s ease, posun .9s, karty po 70 ms); po dobehnutí platí bežný štýl karty. */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.noanim) .sp-sluzby:not(.sp-viditelna) .sp-karta { opacity: 0; transform: translateY(36px); }
  html.js:not(.noanim) .sp-sluzby.sp-viditelna .sp-karta {
    animation:
      sp-nabeh-jas .7s ease calc(var(--sp-i, 0) * 70ms) backwards,
      sp-nabeh-posun .9s var(--sp-ease) calc(var(--sp-i, 0) * 70ms) backwards;
  }
  /* poistka: ak by sa skript komponentu nenačítal, karty sa po 4 s ukážu */
  html.js:not(.noanim) .sp-sluzby:not(.sp-pripravena) .sp-karta { animation: sp-poistka 0s 4s forwards; }
}
@keyframes sp-nabeh-jas { from { opacity: 0; } }
@keyframes sp-nabeh-posun { from { transform: translateY(36px); } }
@keyframes sp-poistka { to { opacity: 1; transform: none; } }

/* ---------- Navigácia: pilulka so šípkami a bodkami ---------- */
.sp-sluzby__nav {
  display: flex; align-items: center; gap: 6px;
  width: max-content; max-width: calc(100% - 16px);
  margin: clamp(24px, 3vw, 40px) auto 0; padding: 6px;
  background: var(--sp-panel); border-radius: 999px;
}
html:not(.js) .sp-sluzby__nav { display: none; }   /* bez JS ostáva natívny posun prstom/kolieskom */
/* Kým skript komponentu nenabehne (alebo ak sa nenačíta), šípky by nič nerobili → pilulku nevidno.
   visibility (nie display), aby po nábehu skriptu neposkočil obsah pod sekciou. */
.sp-sluzby:not(.sp-pripravena) .sp-sluzby__nav { visibility: hidden; }
.sp-sluzby__sipka {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: var(--sp-plocha); color: var(--sp-nadpis); cursor: pointer;
  transition: background .25s ease, color .25s ease, opacity .25s ease;
}
.sp-sluzby__sipka svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Na kraji pásu dostane šípka aria-disabled (nie disabled) – ostáva vo fokuse, takže klávesnica ani čítačka nestratia miesto */
.sp-sluzby__sipka:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--sp-zelena); color: var(--sp-nadpis); }
.sp-sluzby__sipka:disabled, .sp-sluzby__sipka[aria-disabled="true"] { opacity: .4; cursor: default; }
.sp-sluzby__sipka:focus-visible { outline: 3px solid var(--sp-zelena-text); outline-offset: 2px; border-radius: 50%; }
.sp-sluzby__bodka:focus-visible { outline: 3px solid var(--sp-zelena-text); outline-offset: -2px; border-radius: 999px; }
.sp-sluzby__bodky { display: flex; align-items: center; gap: 2px; padding-inline: 8px; }
/* Vedomá výnimka z pravidla 44 × 44 px: bodka má 24 × 44 px (aktívna 36 × 44), lebo 8 bodiek po 44 px sa na
   360 px displej nezmestí a rozostup bodiek je súčasť vybraného vzhľadu. Spĺňa WCAG 2.5.8 (min. 24 × 24)
   a to isté robia šípky 44 × 44 px hneď vedľa (rovnocenný ovládací prvok) aj posun prstom. */
.sp-sluzby__bodka {
  display: grid; place-items: center; flex: none; width: 24px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  transition: width .35s var(--sp-ease);
}
.sp-sluzby__bodka::before {
  content: ""; width: 10px; height: 10px; border-radius: 999px; background: var(--sp-bodka);
  transition: width .35s var(--sp-ease), background .25s ease;
}
.sp-sluzby__bodka:hover::before { background: var(--sp-nadpis); }
.sp-sluzby__bodka[aria-current="true"] { width: 36px; }
.sp-sluzby__bodka[aria-current="true"]::before { width: 24px; background: var(--sp-zelena-text); }

/* ---------- Mobil ---------- */
@media (max-width: 640px) {
  .sp-sluzby { --sp-karta-w: 76vw; }
  .sp-karta { min-height: 0; max-height: none; }
  .sp-karta__popis p { font-size: 14.5px; }
}
@media (max-width: 400px) {
  .sp-sluzby__bodky { gap: 0; padding-inline: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .sp-karta, .sp-karta *, .sp-karta::after, .sp-karta__plus::before, .sp-karta__plus::after,
  .sp-sluzby__sipka, .sp-sluzby__bodka, .sp-sluzby__bodka::before { transition: none !important; }
}
html.noanim .sp-karta, html.noanim .sp-karta *, html.noanim .sp-karta::after,
html.noanim .sp-sluzby__bodka, html.noanim .sp-sluzby__bodka::before { transition: none !important; }

@media print {
  .sp-sluzby__nav { display: none; }
  .sp-sluzby__pas { overflow: visible; margin-top: 0; }
  .sp-sluzby__rad { width: auto; flex-wrap: wrap; }
  .sp-karta { opacity: 1 !important; transform: none !important; }
}

/* integracia-2026-09-30:START */
/* štítok „Vizualizácia" (render z 3D konfigurátora) – neutrálny, nie výstražný ako dočasná ilustrácia */
.sp-karta__docasne--viz { color: var(--sp-nadpis); }
/* integracia-2026-09-30:KONIEC */

/* 5. 10. 2026 – PLYNULÉ STMAVNUTIE KARTY (proti preblikovaniu pri prechode myšou)
   ::after = stále rovnaký základný tieň; ::before = doplnok, ktorý sa plynulo zosilní (opacity sa prelína, gradient nie).
   Doplnok X spĺňa 1 − (1 − základ)(1 − X) = pôvodný hover gradient (.15 → .88): hore .15, v 38 % .427, v 69 % .414, dole .333. */
.sp-karta::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--sp-tien-rgb), .15) 0%, rgba(var(--sp-tien-rgb), .427) 38%,
                                      rgba(var(--sp-tien-rgb), .414) 69%, rgba(var(--sp-tien-rgb), .333) 100%);
  opacity: 0; transition: opacity .4s ease;
}
.sp-karta.sp-otvorena::after,
.sp-karta:has(.sp-karta__odkaz:focus-visible)::after { background: linear-gradient(180deg, rgba(var(--sp-tien-rgb), 0) 38%, rgba(var(--sp-tien-rgb), .82) 100%); }
.sp-karta.sp-otvorena::before,
.sp-karta:has(.sp-karta__odkaz:focus-visible)::before { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .sp-karta:hover::after { background: linear-gradient(180deg, rgba(var(--sp-tien-rgb), 0) 38%, rgba(var(--sp-tien-rgb), .82) 100%); }
  .sp-karta:hover::before { opacity: 1; }
  /* fotka má vlastnú vrstvu stále – pri začiatku a konci zväčšenia sa už neprekresľuje */
  .sp-karta__foto { will-change: transform; backface-visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) { .sp-karta::before { transition: none !important; } }
html.noanim .sp-karta::before { transition: none !important; }