/* =========================================================
   PC2 CAROUSEL

   The gutter is a percentage of the section width, so the
   first slide lines up with the 1120px content column while
   the rest bleed off the right edge.

   Height is the constant, width follows the ratio. No
   width/margin swap while scrolling.
   ========================================================= */

.pc2__viewport {
    --pc2-max-width: 1120px;

    /* the one dimension that stays fixed */
    --pc2-card-height: 386px;

    /* fallback ratio for any slide without an inline --pc2-ar */
    --pc2-ar: 546.5 / 386;

    --pc2-gap: 24px;

    /* percentage keeps this scrollbar-safe, unlike 100vw */
    --pc2-gutter: max(0px, calc((100% - 1120px) / 2));

    position: relative;
    width: 100%;
}


/* =========================================================
   TRACK
   ========================================================= */

.pc2__track {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: var(--pc2-gap);

    width: 100%;

    padding-left: var(--pc2-gutter);
    padding-right: var(--pc2-gutter);

    overflow-x: auto;
    overflow-y: hidden;

    scroll-behavior: smooth;

    scrollbar-width: none;
    -ms-overflow-style: none;

    cursor: grab;

    overscroll-behavior-x: contain;

    box-sizing: border-box;
}

.pc2__track::-webkit-scrollbar {
    display: none;
}

.pc2__track:focus-visible {
    outline: 2px solid #9ADBE8;
    outline-offset: 4px;
}


/* =========================================================
   DRAGGING
   scroll-behavior MUST be auto here, otherwise every
   scrollLeft assignment animates and the drag feels rubbery.
   ========================================================= */

.pc2__track.pc2--dragging {
    cursor: grabbing;

    scroll-behavior: auto;

    user-select: none;
}

.pc2__track.pc2--dragging .pc2__media {
    cursor: grabbing;
}


/* =========================================================
   SLIDES
   Width comes from the media box, not a fixed value.
   max-width resolves against the track's content box, so a
   slide can never be wider than the visible track.
   ========================================================= */

.pc2__slide {
    flex: 0 0 auto;

    width: auto;
    max-width: 100%;

    box-sizing: border-box;
}


/* =========================================================
   MEDIA
   Fixed height + declared ratio = computed width.
   ========================================================= */

.pc2__media {
    position: relative;

    height: var(--pc2-card-height);
    width: auto;
    max-width: 100%;

    aspect-ratio: var(--pc2-ar);

    overflow: hidden;

    box-sizing: border-box;

    cursor: zoom-in;
}

/* keyboard focus on a photo (Enter opens it full screen); drawn inside and
   on top, because the track clips anything outside the photo and the
   hover zoom would paint the photo over an outline */
.pc2__media:focus-visible {
    outline: none;
}

.pc2__media:focus-visible::after {
    content: '';

    position: absolute;
    inset: 2px;
    z-index: 1;

    border: 2px solid #9ADBE8;

    pointer-events: none;
}


.pc2__media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    user-select: none;
    -webkit-user-drag: none;

    transition: transform 0.5s ease;
}


/* Optional hover effect */

.pc2__slide:hover .pc2__media img {
    transform: scale(1.02);
}


/* =========================================================
   DOTS
   ========================================================= */

.pc2__dots {
    display: flex;

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

    gap: 9px;

    margin-top: 30px;
}


/* nothing to scroll — hide the dots */

.pc2--static .pc2__dots {
    display: none;
}

.pc2--static .pc2__track {
    cursor: default;
}


.pc2__dot {
    width: 7px;
    height: 7px;

    padding: 0;
    margin: 0;

    border: 0;
    border-radius: 0;

    background: #63666A;

    cursor: pointer;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}


.pc2__dot:hover {
    transform: scale(1.2);
}


.pc2__dot[aria-current="true"] {
    background: #9ADBE8;
}


/* =========================================================
   TABLET
   Only the height shrinks — every width follows it.
   ========================================================= */

@media (max-width: 1024px) {

    .pc2__viewport {
        --pc2-gap: 20px;
        --pc2-gutter: 24px;
        --pc2-card-height: 320px;
    }

}


/* =========================================================
   MOBILE
   Same model as desktop — the height stays fixed and widths
   still follow the ratio, so the row is flush. Cards just
   get smaller and more of them peek in from the right.

   A slide whose ratio would be wider than the track is
   clamped by max-width; the height is explicit, so
   aspect-ratio steps aside and object-fit: cover crops the
   sides rather than shortening the card.
   ========================================================= */

@media (max-width: 767px) {

    .pc2__viewport {
        --pc2-gap: 14px;
        --pc2-gutter: 16px;
        --pc2-card-height: 260px;
    }

    .pc2__dots {
        margin-top: 24px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    .pc2__track {
        scroll-behavior: auto;
    }

    .pc2__media img,
    .pc2__dot {
        transition: none;
    }

}


/* =========================================================
   FULLSCREEN PHOTO VIEW
   ========================================================= */

.pc2__lightbox {
    position: fixed;

    inset: 0;

    width: 100vw;
    height: 100vh;

    background: rgba(0, 0, 0, 0.96);

    display: flex;

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

    padding: 40px;

    box-sizing: border-box;

    z-index: 999999;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}


.pc2__lightbox.is-open {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    /* visible at once when opening, so the close button can take focus;
       closing still waits for the fade */
    transition:
        opacity 0.25s ease,
        visibility 0s;
}


.pc2__lightbox-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 96vw;
    max-height: 92vh;

    object-fit: contain;

    user-select: none;

    -webkit-user-drag: none;

    cursor: default;
}


/* single image — no need for the arrows */

.pc2__lightbox.is-single .pc2__lightbox-prev,
.pc2__lightbox.is-single .pc2__lightbox-next {
    display: none;
}


/* =========================================================
   FULLSCREEN CLOSE BUTTON
   ========================================================= */

.pc2__lightbox-close {
    position: absolute;
    top: 20px;
    right: 25px;
    width: 38px;
    justify-content: center;
    height: 38px;
    align-items: center;
    display: flex;
    padding: 0;
    border: 0;
    background: transparent !important;
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 42px;
    line-height: 48px;
    text-align: center;
    cursor: pointer;
    z-index: 2;
    transition: opacity 0.2s ease, transform 0.2s ease;
}


.pc2__lightbox-close:hover {
    opacity: 0.7;

    transform: scale(1.08);
}


/* =========================================================
   FULLSCREEN NAVIGATION
   ========================================================= */

.pc2__lightbox-prev,
.pc2__lightbox-next {
    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 50px;
    height: 70px;

    padding: 0;

    border: 0;

    background: rgba(0, 0, 0, 0.25);

    color: #ffffff;

    font-size: 40px;

    line-height: 70px;

    text-align: center;

    cursor: pointer;

    z-index: 2;

    transition:
        background 0.2s ease,
        opacity 0.2s ease;
}


.pc2__lightbox-prev {
    left: 20px;
}


.pc2__lightbox-next {
    right: 20px;
}


.pc2__lightbox-prev:hover,
.pc2__lightbox-next:hover {
    background: rgba(0, 0, 0, 0.5);
}


/* =========================================================
   FULLSCREEN MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .pc2__lightbox {
        padding: 20px;
    }

    .pc2__lightbox-image {
        max-width: 94vw;
        max-height: 88vh;
    }

    .pc2__lightbox-close {
        top: 10px;
        right: 12px;

        font-size: 36px;
    }

    .pc2__lightbox-prev,
    .pc2__lightbox-next {
        width: 38px;
        height: 55px;

        font-size: 28px;

        line-height: 55px;
    }

    .pc2__lightbox-prev {
        left: 5px;
    }

    .pc2__lightbox-next {
        right: 5px;
    }

}


/* =========================================================
   PREVENT BODY SCROLL WHEN FULLSCREEN IS OPEN
   ========================================================= */

body.pc2-lightbox-open {
    overflow: hidden !important;
}