/* =========================================================
   Rýchla pomoc — ukážka (carousel telefónu + 4 kroky).
   Farby berie z témy (--brown, --sand, --paper); hodnoty za čiarkou
   sú len záloha, keby téma premenné nedefinovala.
   ========================================================= */

.cpu{
  --cpu-a:var(--brown,#795B33);
  --cpu-b:#5F4726;
  --cpu-akcent:var(--sand,#D8A77A);
  --cpu-text:var(--paper,#FCF8EF);
  box-sizing:border-box;width:100%;
  padding:clamp(28px,5vw,56px) clamp(18px,4vw,48px);
  border-radius:28px;color:var(--cpu-text);
  background:linear-gradient(135deg,var(--cpu-a),var(--cpu-b));
  box-shadow:var(--shadow-lg,0 16px 50px rgba(121,91,51,.16))
}
.cpu *{box-sizing:border-box}
.cpu-hlava{max-width:680px;margin:0 0 clamp(22px,3.5vw,36px)}
.cpu .eyebrow{color:var(--cpu-akcent);margin:0 0 10px}
.cpu .cpu-nadpis{margin:0 0 12px;color:var(--cpu-text)}
.cpu .cpu-uvod{margin:0;color:var(--cpu-text);opacity:.88}

.cpu-mriezka{display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:clamp(26px,5vw,56px);align-items:center}
.cpu.bez-obrazoviek .cpu-mriezka{grid-template-columns:1fr}

/* telefón */
.cpu-karusel{width:100%;max-width:320px;margin:0 auto}
.cpu-telefon{
  position:relative;overflow:hidden;aspect-ratio:9/19;
  border:8px solid #2b1d0e;border-radius:36px;background:#2b1d0e;
  box-shadow:0 14px 36px rgba(0,0,0,.35);outline-offset:4px
}
.cpu-stopa{display:flex;height:100%;transition:transform .45s ease;touch-action:pan-y}
.cpu-slide{position:relative;flex:0 0 100%;height:100%;background:#3b2a15}
.cpu-slide .cpu-obr{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.cpu-zastup{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:24px;text-align:center;color:var(--cpu-akcent);font-size:.85rem
}
.cpu-zastup b{font-size:2.2rem;font-weight:600;line-height:1}

/* zvýraznenie miesta, na ktoré sa má kliknúť */
.cpu-ram{
  position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);transform:translate(-50%,-50%);
  border:3px solid var(--cpu-akcent);border-radius:16px;pointer-events:none;
  animation:cpuPulz 1.6s ease-out infinite
}
.cpu-tuk{
  position:absolute;left:var(--x);top:var(--y);width:34px;height:34px;margin:4px 0 0 18px;
  border-radius:50%;background:rgba(216,167,122,.85);pointer-events:none;
  animation:cpuTuk 1.6s ease-in-out infinite
}
@keyframes cpuPulz{0%{box-shadow:0 0 0 0 rgba(216,167,122,.7)}70%,100%{box-shadow:0 0 0 14px rgba(216,167,122,0)}}
@keyframes cpuTuk{0%,100%{transform:scale(.8);opacity:.9}50%{transform:scale(1.1);opacity:.5}}

/* ovládanie */
.cpu-nav{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:16px}
.cpu-sipka{
  width:40px;height:40px;border-radius:999px;padding:0;cursor:pointer;display:grid;place-items:center;
  background:transparent;border:2px solid var(--cpu-akcent);color:var(--cpu-akcent);transition:.2s
}
.cpu-sipka::before{
  content:'';width:9px;height:9px;border-top:2px solid currentColor;border-right:2px solid currentColor;
  transform:rotate(-135deg);margin-left:3px
}
.cpu-sipka.je-vpravo::before{transform:rotate(45deg);margin-left:0;margin-right:3px}
.cpu-sipka:hover,.cpu-sipka:focus-visible{background:var(--cpu-akcent);color:var(--cpu-a)}
.cpu-bodky{display:flex;gap:8px}
.cpu-bodka{width:10px;height:10px;padding:0;border:0;border-radius:50%;background:rgba(252,248,239,.35);cursor:pointer;transition:.2s}
.cpu-bodka.je-aktivna{background:var(--cpu-akcent);transform:scale(1.3)}

/* kroky */
.cpu-kroky{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:12px}
.cpu-krok{
  display:flex;gap:16px;align-items:flex-start;width:100%;margin:0;padding:16px 18px;text-align:left;
  font:inherit;color:inherit;cursor:pointer;border-radius:16px;
  background:rgba(252,248,239,.08);border:2px solid transparent;transition:background .25s,border-color .25s
}
.cpu-krok:hover{background:rgba(252,248,239,.13)}
.cpu-krok.je-aktivny{background:rgba(216,167,122,.18);border-color:var(--cpu-akcent)}
.cpu-krok:focus-visible{outline:2px solid var(--cpu-text);outline-offset:2px}
.cpu-cislo{
  flex:0 0 38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--cpu-akcent);color:var(--cpu-a);font-weight:700;font-size:1.05rem
}
.cpu-obsah{display:block}
.cpu-obsah strong{display:block;color:var(--cpu-text);font-size:1.05rem;line-height:1.4;margin-bottom:2px}
.cpu-obsah span{display:block;font-size:.92rem;line-height:1.6;opacity:.88}

@media (max-width:820px){
  .cpu{border-radius:20px}
  .cpu-mriezka{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .cpu-stopa{transition:none}
  .cpu-ram,.cpu-tuk{animation:none}
}