/* Project photo carousel – the tabs + slider group inside Final Project
   Results (Figma 6877:11172). Full-bleed 1880 container, a centred pill row,
   then an edge-to-edge track of 705x500 cards on a 725px pitch, centred on
   the second card. The header above it belongs to css/project/results.css. */

.project-photo-gallery {
    /* the pill row keeps a gutter; the track runs edge to edge and lets the
       centred slide decide what bleeds off each side */
    --ppg-gutter: 20px;
    --ppg-slide: 705px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    width: 100%;
}

/* Group tabs */

.project-photo-gallery .project-photo-gallery__tabs {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    padding: 0 var(--ppg-gutter);
    box-sizing: border-box;
}

.project-photo-gallery .project-photo-gallery__tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex-shrink: 0;
    margin: 0;
    padding: 12px 36px;
    border: 0;
    border-radius: 13px;
    background: #171B1C;
    color: #FFFFFF;
    font-family: Montserrat, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: normal;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.2s ease;
}

/* the header's 3D Configurator pill (.section-header-wrap-right-block-button)
   is the same #FF6B00-on-#171B1C pair the other way round, so the tabs take
   its orange rather than the older #F69924 */
.project-photo-gallery .project-photo-gallery__tab:hover,
.project-photo-gallery .project-photo-gallery__tab.is-active {
    background: #FF6B00;
}

.project-photo-gallery .project-photo-gallery__tab:focus-visible {
    outline: 2px solid #FF6B00;
    outline-offset: 2px;
}

/* Slider */

.project-photo-gallery .project-photo-gallery__panels {
    width: 100%;
}

.project-photo-gallery .project-photo-gallery__panel {
    position: relative;
}

.project-photo-gallery .project-photo-gallery__panel[hidden] {
    display: none;
}

.project-photo-gallery .project-photo-gallery__panel-heading {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.project-photo-gallery .project-photo-gallery__slider {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.project-photo-gallery .project-photo-gallery__slider::-webkit-scrollbar {
    display: none;
}

.project-photo-gallery .project-photo-gallery__slider.is-swiper-ready {
    overflow: hidden;
    scroll-snap-type: none;
}

.project-photo-gallery .project-photo-gallery__slider .swiper-wrapper {
    display: flex;
    align-items: flex-start;
}

.project-photo-gallery .project-photo-gallery__slider:not(.is-swiper-ready) .swiper-wrapper {
    gap: 20px;
    justify-content: center;
}

.project-photo-gallery .project-photo-gallery__slide {
    flex-shrink: 0;
    box-sizing: border-box;
    width: var(--ppg-slide);
    height: auto;
    aspect-ratio: 705 / 500;
    border-radius: 32px;
    overflow: hidden;
    scroll-snap-align: start;
}

/* a button rather than a link, so it carries the chrome reset an anchor did not
   need — see the note in the section template */
.project-photo-gallery .project-photo-gallery__link {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

/* swiping should not paint the photo with the selection colour or peel it off
   as a drag ghost */
.project-photo-gallery .project-photo-gallery__slider {
    -webkit-user-select: none;
    user-select: none;
}

.project-photo-gallery .project-photo-gallery__slide img {
    -webkit-user-drag: none;
    user-drag: none;
}

.project-photo-gallery .project-photo-gallery__slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Below the mock width the 705 card stops fitting long before the page does */

@media screen and (max-width: 1439px) {
    .project-photo-gallery {
        --ppg-slide: 470px;
    }
}

@media screen and (max-width: 1023px) {
    .project-photo-gallery {
        --ppg-gutter: 15px;
        --ppg-slide: 359px;
    }
}

@media screen and (max-width: 767px) {
    /* On a phone this track is the 3D wrap track: same 360px card, same 24px
       radius, same 10px step (set on the swiper in the section template), and
       the row is left unclipped so the neighbours peek past the column instead
       of the card being cut 35px short on each side, which is what
       100vw - 70px did. */
    .project-photo-gallery {
        --ppg-slide: 360px;
    }

    .project-photo-gallery .project-photo-gallery__slider {
        overflow: visible;
    }

    .project-photo-gallery .project-photo-gallery__slide {
        border-radius: 24px;
    }

    .project-photo-gallery .project-photo-gallery__tabs {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .project-photo-gallery .project-photo-gallery__tabs::-webkit-scrollbar {
        display: none;
    }

}