/* =========================================================
   Pás kariet so šípkami.

   Karty ostávajú tie isté (`.card`) — mení sa len to, že miesto
   mriežky stoja vedľa seba a dajú sa posúvať. Bez JavaScriptu to
   funguje prstom aj kolieskom, šípky sú len pohodlie navyše.
   ========================================================= */

.cpas{--cpas-medzera:18px;--cpas-naraz:3;--cpas-sipka:42px;position:relative}

.cpas-stopa{
  display:flex;gap:var(--cpas-medzera);
  overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  /* aby tieň karty pri okraji nebol orezaný */
  padding:4px 2px 10px
}
.cpas-stopa::-webkit-scrollbar{display:none}
.cpas-stopa > .card{
  flex:0 0 calc((100% - (var(--cpas-naraz) - 1) * var(--cpas-medzera)) / var(--cpas-naraz));
  scroll-snap-align:start
}

/* Šípky odkryje JavaScript, a len keď je pás širší než rám. */
.cpas-sipka{
  display:none;position:absolute;top:calc(50% - 10px);transform:translateY(-50%);z-index:3;
  width:var(--cpas-sipka);height:var(--cpas-sipka);border-radius:999px;
  background:rgba(252,248,239,.94);border:1px solid rgba(121,91,51,.18);
  box-shadow:var(--shadow,0 10px 30px rgba(121,91,51,.12));
  color:var(--brown,#795B33);cursor:pointer;padding:0
}
.cpas.je-pripravena .cpas-sipka{display:grid;place-items:center}
.cpas-sipka.je-vlavo{left:-8px}
.cpas-sipka.je-vpravo{right:-8px}
.cpas-sipka::before{
  content:'';width:9px;height:9px;
  border-top:2px solid currentColor;border-right:2px solid currentColor
}
.cpas-sipka.je-vlavo::before{transform:rotate(-135deg);margin-left:3px}
.cpas-sipka.je-vpravo::before{transform:rotate(45deg);margin-right:3px}
.cpas-sipka:hover{background:var(--cream,#ECDFC1)}
.cpas-sipka[disabled]{opacity:.3;cursor:default}
.cpas-sipka:focus-visible{outline:2px solid var(--gold,#AB8D59);outline-offset:3px}

/* Na tablete platí šírka karty priamo, nie cez premennú: počet kariet
   naraz si blok píše do štýlu prvku a ten by premennú vždy prebil. */
@media(max-width:860px){
  .cpas{--cpas-medzera:14px}
  .cpas-stopa > .card{flex:0 0 calc((100% - 1.1 * var(--cpas-medzera)) / 2.1)}
  .cpas-sipka.je-vlavo{left:0}
  .cpas-sipka.je-vpravo{right:0}
}
/* Na mobile z pásu nič nekrútime — karty idú pod seba, každá na celú
   šírku. Pás tam aj tak nefungoval: počet kariet naraz si blok píše
   priamo do štýlu prvku, takže by ho žiadne pravidlo neprebilo, a tri
   karty vedľa seba sa na telefón nezmestia. */
@media(max-width:600px){
  .cpas-stopa{
    display:grid;grid-template-columns:1fr;gap:16px;
    overflow:visible;scroll-snap-type:none;padding:0
  }
  .cpas-stopa > .card{flex:none;width:auto;scroll-snap-align:none}
  .cpas.je-pripravena .cpas-sipka{display:none}
}

@media(prefers-reduced-motion:reduce){
  .cpas-stopa{scroll-behavior:auto}
}