/**
 * Blog Carousel Block – front-end styles
 *
 * Mobile/tablet: track sits outside .container, bleeds to the right screen edge.
 *   padding-left + scroll-padding-left mirror the container's left inset so the
 *   first card aligns with surrounding content and all snap targets land there too.
 *
 * Desktop (lg+): track wrapper becomes container-like (centred, max-width, equal
 *   padding both sides) — no bleed, cards fill the full container width.
 *
 * Container config (tailwind.config.js):
 *   mobile  → 1.25rem (20px) padding
 *   lg      → 1.875rem (30px) padding, max-width 1440px
 */

/* ─── Track wrapper: desktop container behaviour ─────────────────────────── */

@media (min-width: 1024px) {
    .rs-blog-carousel__track-wrapper {
        max-width: 1440px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 1.875rem;
        padding-right: 1.875rem;
    }
}

/* ─── Track: mobile/tablet left-offset, desktop resets ──────────────────── */

.rs-blog-carousel__track {
    /*
     * Mobile: padding-left offsets the first card to match the container's
     * left edge. scroll-padding-left mirrors it so every snap target — cards
     * 2, 3, 4… — snaps to that same aligned position, not the raw left edge.
     */
    padding-left: 1.25rem;
    scroll-padding-left: 1.25rem;

    /* Hide scrollbar while keeping scroll functionality */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.rs-blog-carousel__track::-webkit-scrollbar {
    display: none;
}

@media (min-width: 1024px) {
    .rs-blog-carousel__track {
        /* Wrapper handles centering and padding on desktop */
        padding-left: 0;
        scroll-padding-left: 0;
    }
}

/* ─── Card widths ────────────────────────────────────────────────────────── */

.rs-blog-carousel__card {
    /*
     * Mobile: show 1.5 cards (1 full + peek of second).
     * 1.5w + 0.5 gap(1rem) = 100vw − left-padding(1.25rem)
     * w = (100vw − 1.75rem) / 1.5
     */
    width: calc((100vw - 1.75rem) / 1.5);
}

@media (min-width: 640px) {
    .rs-blog-carousel__card {
        /*
         * sm: show 2 cards.
         * 2w + 1 gap(1rem) = 100vw − left-padding(1.25rem)
         * w = (100vw − 2.25rem) / 2
         */
        width: calc((100vw - 2.25rem) / 2);
    }
}

@media (min-width: 1024px) {
    .rs-blog-carousel__card {
        /*
         * Desktop: 4 equal cards fill the wrapper's content area.
         * Wrapper content width = 100% (of the 1440px-capped, padded wrapper).
         * 4w + 3 gaps(2rem each) = 100%
         * w = calc(25% - (3 * 2rem / 4)) = calc(25% - 1.5rem)
         */
        width: calc(25% - 1.5rem);
    }
}

/* ─── Skeleton / image reveal ────────────────────────────────────────────── */

.rs-blog-carousel__img.is-loaded {
    opacity: 1;
}

.rs-blog-carousel__card:has(.rs-blog-carousel__img.is-loaded) .rs-blog-carousel__skeleton {
    display: none;
}