@layer parts {
    .post-slider {
        position: relative;
    }

    .post-slider__scrim {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 200px;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
        z-index: 3;
        pointer-events: none;
    }

    .post-slider__ring {
        border-radius: var(--slider-radius, var(--radius-md));
        outline: var(--card-ring-width, 2px) var(--card-ring-style, solid) transparent;
        outline-offset: var(--card-ring-offset, 0px);
        transition: outline-color var(--card-ring-speed, 150ms);
    }

    .post-slider__ring:hover {
        outline-color: var(--card-ring-color, var(--color-border));
    }

    .post-slider__heading {
        position: absolute;
        top: var(--slider-heading-offset-y, var(--spacing-sm));
        left: var(--slider-nav-offset, var(--spacing-sm));
        z-index: 2;
        font-family: var(--font-heading);
        font-size: var(--heading-font-size, var(--font-size-lg));
        font-weight: 600;
        color: #fff;
        pointer-events: none;
    }

    .post-slider .splide__slide {
        display: flex;
    }

    .post-slider .splide__slide > * {
        flex: 1;
        min-width: 0;
    }

    .post-slider .splide__track {
        border-radius: var(--slider-radius, var(--radius-md));
        overflow: hidden;
    }

    .post-slider .post-card--overlay {
        border-radius: 0;
    }

    .layout-row--flush .post-slider .splide__track {
        background: var(--color-background);
        margin-inline: -2px;
        padding-inline: 2px;
    }

    .post-slider .post-card--overlay {
        contain: layout;
    }

    .post-slider .post-card__body {
        transform: translateZ(0);
    }


    @media (hover: hover) {
        .post-slider:hover .post-card--overlay .post-card__bg {
            opacity: var(--thumbnail-hover-opacity, 1);
            filter: brightness(var(--thumbnail-hover-brightness, 1));
        }

        .post-slider:hover:not(.is-moving) .post-card--overlay .post-card__bg {
            transform: scale(var(--thumbnail-hover-scale, 1));
        }

        .dark .post-slider:hover .post-card--overlay .post-card__bg {
            filter: brightness(var(--thumbnail-hover-brightness-dark, var(--thumbnail-hover-brightness, 1)));
        }

        .post-slider:hover:not(.is-moving) .post-card--overlay .post-card__overlay {
            transform: scale(var(--thumbnail-hover-scale, 1));
        }
    }

    .post-slider .post-card--overlay .post-card__bg,
    .post-slider .post-card--overlay .post-card__overlay {
        transition: transform var(--thumbnail-hover-speed, 0s), filter var(--thumbnail-hover-speed, 0s), opacity var(--thumbnail-hover-speed, 0s);
    }

    .post-slider.is-moving .post-card--overlay .post-card__bg,
    .post-slider.is-moving .post-card--overlay .post-card__overlay {
        transform: scale(1);
    }

    .post-slider .post-card__bg {
        transition: transform var(--slider-hover-speed, 0s);
    }


    .post-slider .splide__slide .post-card__body {
        flex: 1;
    }

    .post-slider .splide__slide .post-card--overlay-end .post-card__body {
        justify-content: flex-end;
    }

    .post-slider .splide__slide .post-card--overlay-start .post-card__body {
        justify-content: flex-start;
    }

    .post-slider .splide__slide .post-card--overlay-center .post-card__body {
        justify-content: center;
    }

    .post-slider:not(.splide--pagination-outside):not(.splide--count-outside):not(.splide--nav-top) .post-card--overlay .post-card__body {
        margin-bottom: var(--slider-nav-space, calc(var(--slider-nav-offset, var(--spacing-sm)) + var(--spacing-md)));
    }

    .post-slider.splide--nav-top:not(.splide--pagination-outside):not(.splide--count-outside) .post-card--overlay .post-card__body {
        margin-top: var(--slider-nav-space, calc(var(--slider-nav-offset, var(--spacing-sm)) + var(--spacing-md)));
    }

    .post-slider--peek {
        overflow: visible;
    }

    .post-slider--dim .splide__slide:not(.is-active) {
        opacity: var(--slide-inactive-opacity, 0.4);
        transition: opacity var(--transition-speed) ease;
    }

    .post-slider--hide-inactive .splide__slide:not(.is-active) .post-card__body {
        opacity: 0;
        transition: opacity var(--transition-speed) ease;
    }

    .post-slider--hide-inactive .splide__slide.is-active .post-card__body {
        opacity: 1;
        transition: opacity var(--transition-speed) ease;
    }


    /* Pagination */
    .post-slider .splide__pagination {
        bottom: calc(var(--spacing-lg) * -1);
    }

    .post-slider .splide__pagination__page {
        background: var(--color-border);
    }

    .post-slider .splide__pagination__page.is-active {
        background: var(--color-primary);
    }

    /* Controls bar */
    .slider-controls {
        display: flex;
        align-items: center;
        justify-content: var(--slider-controls-justify, space-between);
        margin-top: var(--slider-controls-gap, var(--spacing-sm));
    }

    .slider-controls__group {
        display: flex;
        align-items: center;
        gap: var(--slider-controls-group-gap, var(--spacing-xs));
    }

    .post-slider--has-controls > .splide__arrows {
        display: none;
    }

}

/* Unlayered — override splide defaults so layered button sizing works */
.post-slider .splide__arrow {
    width: var(--button-size, var(--_size, 40px));
    height: var(--button-size, var(--_size, 40px));
    background: none;
    border-radius: var(--_radius, var(--radius-full));
    opacity: 1;
}

.post-slider .splide__arrow:focus-visible,
.post-slider.is-focus-in .splide__arrow:focus {
    outline: var(--form-focus-ring-width, 2px) var(--form-focus-ring-style, solid) var(--form-focus-ring-color, var(--color-border));
    outline-offset: var(--form-focus-ring-offset, 2px);
}

.post-slider .splide__arrow svg {
    width: var(--button-icon-size, var(--_icon-size, 16px));
    height: var(--button-icon-size, var(--_icon-size, 16px));
    fill: none;
}

.post-slider .splide__arrow--prev {
    left: calc(var(--slider-arrow-offset, var(--spacing-sm)) * -1);
}

.post-slider .splide__arrow--next {
    right: calc(var(--slider-arrow-offset, var(--spacing-sm)) * -1);
}

.post-slider:has(.post-card--overlay) .splide__arrow {
    --button-color: #fff;
    --button-border-color: rgba(255, 255, 255, 0.15);
    --button-hover-bg: rgba(255, 255, 255, 0.1);
    --color-background: #000;
    --color-text: #fff;
}

.post-slider:has(.post-card--overlay):not(.post-slider--arrows-outside) .splide__arrow--prev {
    left: var(--slider-arrow-offset, var(--spacing-sm));
}

.post-slider:has(.post-card--overlay):not(.post-slider--arrows-outside) .splide__arrow--next {
    right: var(--slider-arrow-offset, var(--spacing-sm));
}


.slider-controls .splide__arrow {
    position: static;
    transform: none;
}

.slider-controls .splide__count {
    position: static;
    margin: 0;
    margin-bottom: var(--slider-count-offset, 0);
    transform: none;
}

.slider-controls .splide__count-current {
    width: var(--slider-count-digit-width, 2ch);
    text-align: center;
}


/* Equal height slides — unlayered to override Splide */
.post-slider .splide__list {
    align-items: stretch;
}

.post-slider .splide__slide > * {
    height: 100%;
}

.post-slider .splide__slide .post-card {
    height: 100%;
}

/* Heading + nav stacking — unlayered to override Splide pagination/count */
.post-slider:has(.post-slider__heading).splide--nav-top .splide__count,
.post-slider:has(.post-slider__heading).splide--nav-top .splide__pagination {
    top: calc(var(--slider-nav-offset, var(--spacing-sm)) + var(--heading-font-size, var(--font-size-lg)) * 1.2 + var(--spacing-xs));
}
