/* ============================================================
   PROJECT SLIDERS
   2 items per view on desktop, 1 on mobile, auto-run 3s.
   Loaded as a separate stylesheet — styles.css is untouched.
   ============================================================ */

.project-slider{
    position:relative;
}

.slider-viewport{
    overflow:hidden;
}

.slider-track{
    display:flex;
    gap:30px;
    transition:transform .65s cubic-bezier(.22,.61,.36,1);
    will-change:transform;
}

/* each slide = half the row on desktop (2 visible) */
.slider-item{
    flex:0 0 calc((100% - 30px) / 2);
}

/* consistent card height so the row doesn't jump between images */
.slider-item img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* web screenshots: wide */
.project-slider[data-folder="web-dev"] .slider-item{
    aspect-ratio:16 / 10;
}

/* ad creatives: square-ish — tweak to 4/5 if your creatives are portrait */
.project-slider[data-folder="ads"] .slider-item{
    aspect-ratio:1 / 1;
}

/* CONTROLS */

.slider-controls{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    margin-top:30px;
}

.slider-arrows{
    display:flex;
    gap:12px;
}

.slider-arrow{
    width:52px;
    height:52px;
    border-radius:50%;

    background:transparent;
    border:1px solid rgba(255,255,255,.15);
    color:#d9d9d9;

    font-size:18px;
    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:center;

    transition:.3s ease;
}

.slider-arrow:hover{
    border-color:#ff5a1f;
    color:#ff5a1f;
    transform:translateY(-3px);
}

.slider-arrow:focus-visible{
    outline:2px solid #ff5a1f;
    outline-offset:3px;
}

/* DOTS */

.slider-dots{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.slider-dot{
    width:9px;
    height:9px;
    border-radius:50%;
    border:none;
    padding:0;

    background:rgba(255,255,255,.18);
    cursor:pointer;

    transition:.3s ease;
}

.slider-dot:hover{
    background:rgba(255,255,255,.45);
}

.slider-dot.active{
    background:#ff5a1f;
    width:26px;
    border-radius:20px;
}

/* EMPTY STATE */

.slider-empty{
    color:#8f8f8f;
    font-size:16px;
    padding:40px 0;
}

/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce){

    .slider-track{
        transition:none;
    }

}

/* MOBILE — 1 item per view */

@media (max-width:768px){

    .slider-item{
        flex:0 0 100%;
    }

    .slider-track{
        gap:18px;
    }

    .slider-item{
        flex:0 0 100%;
    }

    .slider-arrow{
        width:44px;
        height:44px;
        font-size:15px;
    }

    .slider-controls{
        margin-top:22px;
    }

}