/* ==========================================================
   Landscape Carousel + Top Switcher - Structure
   1) Local Tokens
   2) Panels + Wrapper
   3) Carousel Surface
   4) Carousel Images + Controls
   5) Responsive
   ========================================================== */

/* ==========================================================
   Local Tokens
   ========================================================== */
.media-carousel-switcher-top-controls {
    /* Space under top switcher buttons */
    --media-carousel-switcher-top-controls-block-space: 50px;
}

:is(.media-landscape-section, .project-image-carousel-section) {
    /* Space around landscape carousels and controls */
    --media-landscape-gap: 28px;
}

/* ==========================================================
   Panels + Wrapper
   ========================================================== */
.media-carousel-panel[hidden] {
    display: none;
}

.media-landscape-carousel-wrap {
    width: 100%;
    margin: 0 auto;
}

.project-image-carousel-section .media-landscape-carousel-wrap {
    margin-top: var(--media-landscape-gap, 28px);
}

/* ==========================================================
   Carousel Surface
   ========================================================== */
.media-landscape-carousel {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--project-carousel-radius, 20px);
    overflow: hidden;
    clip-path: inset(0 round var(--project-carousel-radius, 20px));
    mask-image: radial-gradient(white, black);
    transform: translateZ(0);
    backface-visibility: hidden;
    background: var(--bg-light);
    touch-action: pan-y;
}

/* ==========================================================
   Carousel Images + Controls
   ========================================================== */
.media-landscape-carousel-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 220ms ease-out;
    pointer-events: none;
}

.media-landscape-carousel-image.is-active {
    opacity: 1;
}

.media-carousel-panel[data-panel="website"] .media-landscape-carousel-image {
    object-position: top center;
}

.media-carousel-controls.media-carousel-dots {
    justify-content: center;
    margin-top: var(--media-landscape-gap, 28px);
}

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 900px) {
    .media-landscape-carousel {
        border-radius: 0;
        clip-path: inset(0);
        mask-image: none;
    }

    .media-landscape-carousel-wrap {
        width: 100%;
    }

    .media-carousel-controls.media-carousel-dots {
        margin-top: var(--project-media-controls-gap-mobile, 20px);
    }
}