/* Live projects: screenshot slider (several images per project) */
.pslider { position: relative; overflow: hidden; border-radius: var(--radius-sm); margin-bottom: 0.9rem; background: var(--color-bg-alt); aspect-ratio: 800 / 500; }
.pslider-track { display: flex; height: 100%; transition: transform 0.45s cubic-bezier(0.3, 0.7, 0.4, 1); }
.pslider-slide { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; display: block; }
.pslider-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(20, 26, 43, 0.6); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; opacity: 0; transition: opacity 0.2s, background 0.2s, transform 0.2s; }
.pslider:hover .pslider-btn, .pslider:focus-within .pslider-btn, .pslider.is-paused .pslider-btn { opacity: 1; }
.pslider-btn:hover { background: var(--color-primary); }
.pslider-prev { left: 0.5rem; }
.pslider-next { right: 0.5rem; }
.pslider-dots { position: absolute; left: 0; right: 0; bottom: 0.5rem; display: flex; justify-content: center; gap: 6px; }
.pslider-dot { width: 8px; height: 8px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, 0.6); cursor: pointer; padding: 0; transition: width 0.25s, background 0.25s; }
.pslider-dot.is-active { width: 22px; background: #fff; }
.pslider-btn:focus-visible, .pslider-dot:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
@media (hover: none) { .pslider-btn { opacity: 0.85; } }
@media (prefers-reduced-motion: reduce) { .pslider-track, .pslider-dot, .pslider-btn { transition: none; } }