/**
 * Styling for the Lodha Times carousel (see lodha-times-carousel.js),
 * ported 1:1 from lodhatimes.com's own
 * wp-content/mu-plugins/rudr-simple-carousel-block/assets/front.css.
 * .wp-block-rudr-carousel is that plugin's migrated (static) markup;
 * .lodha-carousel is our own lodha/carousel block, sharing the same look.
 */
:is(.wp-block-rudr-carousel, .lodha-carousel) .swiper-button-next,
:is(.wp-block-rudr-carousel, .lodha-carousel) .swiper-button-prev {
    color: #090909;
    /* site.css's own (unrelated, unscoped) old Swiper 3.4.2 CSS also
    targets these generic class names with its own blue background-image
    icon - hide it so only Swiper's own injected <svg> icon shows. */
    background-image: none;

    svg {
        /* Swiper's own CSS sizes this svg to width/height:100% of the
        button, which we deliberately make huge on desktop (a wide,
        full-height click target) - constrain the icon itself so it
        doesn't stretch to match. */
        width: 27px;
        height: 44px;
    }
}

:is(.wp-block-rudr-carousel, .lodha-carousel)[class] {
    @media (max-width: 767px) {
        padding: calc(var(--span1px) * 32) max(50cqw - 240px + var(--span1px) * 32, var(--span1px) * 32);

        .swiper-button-next,
        .swiper-button-prev {
            top: clamp(0px, 45cqw, 210px);
        }
    }
    @media (min-width: 768px) {
        padding: calc(var(--span1px) * 72) max(50cqw - 720px + var(--span1px) * 72, var(--span1px) * 72);

        .swiper-button-next,
        .swiper-button-prev {
            top: 0;
            height: 100%;
            width: max(50cqw - 720px + var(--span1px) * 72, var(--span1px) * 72);
        }
        .swiper-button-next {
            right: 0;
        }
        .swiper-button-prev {
            left: 0;
        }
    }

    .swiper-pagination {
        position: static;
        margin-top: 14px;
    }

    .swiper-pagination-bullet {
        /* content-box (not this site's usual border-box) so the padding
        below enlarges the click target without affecting the visible
        (background-clip: content-box) bar's height. */
        box-sizing: content-box;
        background-color: #f4f1f1;
        background-clip: content-box;
        padding: 10px 0;
        transition: width 100ms linear;
        width: 29px;
        height: 3px;
        opacity: 1;
        border-radius: 0;
    }
    .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
    .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
        margin: 0;
    }

    .swiper-pagination-bullet-active {
        background-color: #000;
        opacity: 1;
    }
}