/* mod_webportaly_articles — náznak, že pás pokračuje, a ťahanie myšou.
 *
 * Rozloženie pásu je v šablóne (`template.css`); tu je len to, čo bez JavaScriptu nemá zmysel.
 * Preto vlastný súbor a nie zásah do šablóny: modul beží na tpl_web, tpl_magazin aj tpleshop
 * a náznak má vyzerať rovnako všade.
 *
 * Triedy nastavuje `swipe.js`:
 *   .wp-articles--viac-vpravo / --viac-vlavo … na tej strane je ešte obsah
 *   .wp-articles__swipe-track.is-tahane      … práve sa ťahá myšou
 *
 * Na telefóne pokračovanie naznačuje prečnievajúca karta (82 % šírky). Na počítači sa karty vojdú
 * presne, takže dovtedy nič nenaznačovalo, že vpravo niečo je. (Robert, 9. 10. 2026.)
 */
.wp-articles--swipe {
    position: relative;
}

/* Vyblednutý okraj **len vpravo a len na väčších obrazovkách**.
 *
 * Vľavo ho nedávame: keď sa pás posunie, za ľavým okrajom je obsah, ktorý už človek videl, a
 * zatmavenie z dvoch strán pôsobí ako chyba. Na telefóne ho vypíname úplne – tam pokračovanie
 * naznačuje prečnievajúca karta (82 % šírky) a efekt navyše už len ruší.
 * (Robert, 9. 10. 2026: „len z jednej strany z prava a menší, na mobile to už ruší".)
 *
 * `mask-image` a nie prekrytie gradientom: prekrytie by muselo poznať farbu pozadia, a tú šablóna
 * aj téma menia (aj v tmavom režime). Takto okraj naozaj „vybledne".
 */
@media (min-width: 600px) {
    .wp-articles--viac-vpravo .wp-articles__swipe-track {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.25rem), transparent 100%);
        mask-image: linear-gradient(to right, #000 calc(100% - 1.25rem), transparent 100%);
    }
}

/* Myš: kurzor hovorí, že sa dá chytiť. Dotyku sa nedotýkame – posúva si ho prehliadač sám. */
@media (hover: hover) and (pointer: fine) {
    .wp-articles--swipe .wp-articles__swipe-track {
        cursor: grab;
    }

    .wp-articles--swipe .wp-articles__swipe-track.is-tahane {
        cursor: grabbing;
        /* Počas ťahania vypneme plynulé prichytávanie, inak dráha „skáče" pod rukou. */
        scroll-snap-type: none;
        scroll-behavior: auto;
        user-select: none;
    }

/* `pointer-events: none` na odkazoch počas ťahania tu BOLO a bola to chyba:
   trieda `is-tahane` sa pridáva pri stlačení myši, takže v tej chvíli odkaz prestal byť cieľom
   udalosti – a prehliadač potom nevyrobil klik vôbec, hoci sa trieda pri pustení zase odobrala.
   Na odkaz sa teda nedalo kliknúť. (Robert naživo na úvodke webportaly.sk, 9. 10. 2026 –
   a nestačilo ani to, že ťahanie nezačíname, keď sa dráha nemá kam posúvať: pri zlomkových
   šírkach vyjde `scrollWidth - clientWidth` na pár pixelov a ťahanie sa zapne.)
   Otvorenie článku po ťahaní rieši `swipe.js`, ktorý klik zahodí podľa toho, či sa dráha naozaj
   posunula. To je presné a kliknutie nerozbije. */
}

/* Kto má v systéme vypnuté animácie, nech nedostane ani plynulé posúvanie šípkami. */
@media (prefers-reduced-motion: reduce) {
    .wp-articles--swipe .wp-articles__swipe-track {
        scroll-behavior: auto;
    }
}