/**
 * Project: Biegun.Studio
 * Path: /theme/assets/css/portfolio-carousel.css
 * Description: Style reużywalnego komponentu karuzeli portfolio (prefix pc-). Ładowany przez każdy szablon korzystający z components/portfolio-carousel.php.
 */

/* ==========================================================================
   Sekcja wrapper
   ========================================================================== */

.sw-portfolio {
    padding: 6rem 0 0;
}

/* ==========================================================================
   Nagłówek karuzeli
   ========================================================================== */

.pc-header {
    margin-bottom: 2.5rem;
}

.pc-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0;
}

/* ==========================================================================
   Karuzela – outer clip + track
   ========================================================================== */

.pc-outer {
    overflow: hidden;
    /*
     * Wyrównanie lewej krawędzi slidera do kontenera sw-container
     * (max-width 1280px, margin: auto, padding: 0 2rem).
     * padding-left celowo tu, a nie na pc-track – overflow-x:scroll
     * ignoruje padding-left przy scroll-left:0 w większości przeglądarek.
     */
    padding-left: max(1.25rem, calc((100% - 1280px) / 2 + 2rem));
}

.pc-track {
    display: flex;
    gap: 1.5rem;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-right: 3rem;
    padding-bottom: 2rem;
}

.pc-track::-webkit-scrollbar {
    display: none;
}

/* ==========================================================================
   Pojedynczy element
   ========================================================================== */

.pc-item {
    flex: 0 0 clamp(260px, 44vw, 540px);
    scroll-snap-align: start;
    margin: 0;
}

.pc-item__img-wrap {
    overflow: hidden;
}

.pc-item__img-wrap img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.3s ease;
}

.pc-item:hover .pc-item__img-wrap img {
    opacity: 0.75;
}

.pc-item__caption {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 1rem 0 0;
}

.pc-item__name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #111;
}

.pc-item__type {
    font-size: 0.78rem;
    color: #888;
    letter-spacing: 0.04em;
}

/* ==========================================================================
   Nawigacja (strzałki)
   ========================================================================== */

.pc-nav {
    display: flex;
    gap: 0.75rem;
    padding: 1.5rem 0 2rem;
}

.pc-btn {
    width: 44px;
    height: 44px;
    border: 1.5px solid #ddd;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.pc-btn:hover {
    background: #111;
    border-color: #111;
    color: #fff;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
    .sw-portfolio {
        padding-top: 4rem;
    }

    .pc-outer {
        padding-left: 1.25rem;
    }

    .pc-item {
        flex: 0 0 clamp(240px, 80vw, 340px);
    }
}