/**
 * Overlay styling for the device-screenshot carousel
 */

.screenshot-carousel .wp-block-cb-slide-v2 {
    position: relative;
    overflow: hidden;
    aspect-ratio: 246 / 506; /* match device screenshot proportions */
    border-radius: 12px;
}

.screenshot-carousel .wp-block-cb-slide-v2 figure.wp-block-image,
.screenshot-carousel .wp-block-cb-slide-v2 figure.wp-block-image img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
}

.screenshot-carousel .wp-block-cb-slide-v2::after {
    content: "";
    position: absolute;
    inset: auto 3px 3px 3px;
    height: 25%;
    background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));
    pointer-events: none;
    border-radius: 0 0 38px 38px;
}

.screenshot-carousel .wp-block-cb-slide-v2 figure.wp-block-image ~ * {
    position: absolute;
    inset: auto 12px 24px 24px;
    margin: 0;
    color: #fff;
    z-index: 1;
}

/**
 * Carousel Slider Block's documented styling API (see
 * https://www.carouselblock.com/docs?doc=styling) - raise contrast for
 * arrows/dots against this carousel's dark background. Scoped to
 * .screenshot-carousel rather than :root so it doesn't affect any other
 * carousel elsewhere on the site.
 */
.carousel-dark {
    /* Navigation arrows */
    --wp--custom--carousel-block--navigation-color: #fff;
    --wp--custom--carousel-block--navigation-hover-color: var(--wp--preset--color--custom-siku-yellow-80);
    --wp--custom--carousel-block--navigation-size: 28px;

    /* Pagination dots */
    --wp--custom--carousel-block--pagination-bullet-active-color: var(--wp--preset--color--custom-siku-yellow-80);
    --wp--custom--carousel-block--pagination-bullet-active-opacity: 1;
    --wp--custom--carousel-block--pagination-bullet-inactive-color: #fff;
    --wp--custom--carousel-block--pagination-bullet-inactive-opacity: 0.5;
    --wp--custom--carousel-block--pagination-bullet-inactive-hover-opacity: 0.8;
    --wp--custom--carousel-block--pagination-bullet-size: 10px;
}