/* Unlayered — must beat Splide defaults */
.splide__arrow.button {
    background: transparent;
    border: none;
    width: var(--button-size, 2em);
    height: var(--button-size, 2em);
    border-radius: var(--button-radius, 50%);
    opacity: var(--slider-arrow-opacity, 1);
    transition: background 200ms ease, color 200ms ease, border-color 200ms ease, opacity 200ms ease, box-shadow 200ms ease;
}

.splide__arrow.button--ghost:hover:not(:disabled) {
    background: color-mix(in srgb, var(--button-color, var(--color-primary)) 10%, transparent);
}

.splide__arrow.button--bordered {
    background: var(--button-bg, transparent);
    box-shadow: inset 0 0 0 var(--button-border-width, 1px) var(--button-border-color, var(--color-border));
}

.splide__arrow.button--bordered:hover:not(:disabled) {
    background: var(--button-hover-bg, var(--color-surface));
}

.splide__arrow.button--filled {
    background: var(--button-bg, var(--color-surface));
    color: var(--button-color, var(--color-text));
}

.splide__arrow.button--filled:hover:not(:disabled) {
    background: var(--button-hover-bg, color-mix(in oklch, var(--button-bg, var(--color-surface)) 90%, var(--color-text)));
}

.splide__arrow.button--outline {
    background: transparent;
    border: 1px solid var(--button-border-color, var(--button-color, var(--color-primary)));
    color: var(--button-color, var(--color-primary));
}

.splide__arrow.button--outline:hover:not(:disabled) {
    background: var(--button-hover-bg, var(--button-color, var(--color-primary)));
    color: var(--button-hover-color, var(--color-on-primary));
}

.splide__arrow svg {
    width: var(--slider-arrow-icon-size, 18px);
    height: var(--slider-arrow-icon-size, 18px);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.splide__arrow--prev svg {
    transform: scaleX(1);
}

.splide__arrow:disabled {
    display: none;
}

/* Slide count */
.splide__count {
    position: absolute;
    bottom: var(--slider-nav-offset, var(--spacing-sm));
    z-index: 2;
    display: flex;
    align-items: center;
    font-family: var(--slider-count-font, var(--font-body));
    font-size: var(--slider-count-size, var(--font-size-base));
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
    pointer-events: none;
}

.splide.splide--nav-top .splide__count {
    bottom: auto;
    top: var(--slider-nav-offset, var(--spacing-sm));
}

.post-slider:has(.post-card--overlay):not(.post-slider--arrows-outside) .splide__arrow {
    --button-color: var(--color-text);
    --button-border-color: var(--color-border);
}

.has-transparent-header .layout-row:first-child .post-slider:has(.post-card--overlay):not(.post-slider--arrows-outside) .splide__arrow {
    --button-color: #ffffff;
    --button-border-color: rgba(255, 255, 255, 0.15);
    --color-surface: rgba(255, 255, 255, 0.15);
}

.post-slider:has(.post-card--overlay) .splide__count {
    color: #fff;
}

.post-slider:has(.post-card--overlay) .splide__pagination__page {
    background: var(--slider-dot-color, rgb(255 255 255 / 0.4));
}

.post-slider:has(.post-card--overlay) .splide__pagination__page.is-active {
    background: var(--slider-dot-active-color, #fff);
}

.splide__count-sep {
    margin-inline: var(--slider-count-gap, -2px);
    opacity: 0.4;
}

.splide--count-left .splide__count { left: var(--spacing-md); }
.splide--count-center .splide__count { left: 50%; transform: translateX(-50%); }
.splide--count-right .splide__count { right: var(--spacing-md); }

.splide--count-outside .splide__count {
    position: relative;
    bottom: auto;
    margin-top: var(--spacing-xs);
}

.splide--count-outside.splide--count-right .splide__count {
    width: fit-content;
    margin-left: auto;
    right: auto;
}

.splide--count-outside.splide--count-center .splide__count {
    margin-inline: auto;
    left: auto;
    transform: none;
}

/* Count transitions */
.splide__count-current {
    overflow: hidden;
    display: inline-block;
    text-align: center;
    min-width: var(--slider-count-digit-width, 2ch);
}

.splide__count--fade-out {
    animation: count-fade-out var(--slider-count-speed, 150ms) ease forwards;
}

.splide__count--fade-in {
    animation: count-fade-in var(--slider-count-speed, 150ms) ease forwards;
}

.splide__count--slide-out {
    animation: count-slide-out var(--slider-count-speed, 150ms) ease forwards;
}

.splide__count--slide-in {
    animation: count-slide-in var(--slider-count-speed, 150ms) ease forwards;
}

@keyframes count-fade-out {
    to { opacity: 0; }
}

@keyframes count-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes count-slide-out {
    to {
        opacity: 0;
        transform: var(--slider-count-slide-out, translateY(calc(-1 * var(--slider-count-distance, 100%))));
    }
}

@keyframes count-slide-in {
    from {
        opacity: 0;
        transform: var(--slider-count-slide-in, translateY(var(--slider-count-distance, 100%)));
    }
    to { opacity: 1; transform: translate(0); }
}

.splide__count--slide-out-reverse {
    animation: count-slide-out-reverse var(--slider-count-speed, 150ms) ease forwards;
}

.splide__count--slide-in-reverse {
    animation: count-slide-in-reverse var(--slider-count-speed, 150ms) ease forwards;
}

@keyframes count-slide-out-reverse {
    to {
        opacity: 0;
        transform: var(--slider-count-slide-in, translateY(var(--slider-count-distance, 100%)));
    }
}

@keyframes count-slide-in-reverse {
    from {
        opacity: 0;
        transform: var(--slider-count-slide-out, translateY(calc(-1 * var(--slider-count-distance, 100%))));
    }
    to { opacity: 1; transform: translate(0); }
}

[data-count-direction="horizontal"] {
    --slider-count-slide-out: translateX(calc(-1 * var(--slider-count-distance, 100%)));
    --slider-count-slide-in: translateX(var(--slider-count-distance, 100%));
}

/* Pagination dots — base */
.splide__pagination__page {
    width: var(--slider-dot-size, 8px);
    height: var(--slider-dot-size, 8px);
    border-radius: var(--slider-dot-radius, 50%);
    background: var(--slider-dot-color, var(--color-border));
    border: var(--slider-dot-border, none);
    opacity: var(--slider-dot-opacity, 1);
    margin: 0 calc(var(--slider-dot-gap, 6px) / 2);
    padding: 0;
    transition: all var(--transition-speed) ease;
}

.splide__pagination__page.is-active {
    background: var(--slider-dot-active-color, var(--color-primary));
    transform: none;
    opacity: 1;
}

/* Dots style: expanding — active dot stretches into pill */
[data-pagination="expanding"] .splide__pagination__page.is-active {
    width: var(--slider-dot-active-width, 24px);
    border-radius: var(--slider-dot-size, 8px);
}

/* Dots style: scale — active dot scales up */
[data-pagination="scale"] .splide__pagination__page.is-active {
    transform: scale(var(--slider-dot-active-scale, 1.5));
}

/* Dots style: bar — rectangular connected segments */
[data-pagination="bar"] .splide__pagination__page {
    border-radius: var(--slider-dot-radius, 2px);
    width: var(--slider-dot-active-width, 20px);
    height: calc(var(--slider-dot-size, 8px) / 2);
}

[data-pagination="bar"] .splide__pagination__page.is-active {
    border-radius: var(--slider-dot-radius, 2px);
}

/* Pagination position — inside offset */
.splide.splide:not(.splide--pagination-outside) .splide__pagination {
    bottom: var(--slider-nav-offset, var(--spacing-sm));
    left: var(--slider-nav-offset, var(--spacing-sm));
    right: var(--slider-nav-offset, var(--spacing-sm));
    padding: 0;
}

.splide.splide.splide--nav-top .splide__pagination {
    bottom: auto;
    top: var(--slider-nav-offset, var(--spacing-sm));
}

.splide.splide--nav-top .splide__pagination,
.splide.splide:not(.splide--pagination-outside) .splide__pagination {
    z-index: 3;
}

/* Pagination position — outside */
.splide--pagination-outside .splide__pagination {
    position: relative;
    bottom: auto;
    margin-top: var(--spacing-sm);
}

.splide.splide--pagination-left .splide__pagination { justify-content: flex-start; }
.splide.splide--pagination-right .splide__pagination { justify-content: flex-end; }

/* Arrow visibility — hover mode */
.splide--arrows-hover .splide__arrow,
.splide--arrows-hover .splide__arrow:hover:not(:disabled) {
    opacity: 0;
    transition: opacity var(--arrows-show-speed, 0.2s) ease var(--arrows-hide-delay, 0s), background 200ms ease;
}

.splide--arrows-hover.show-arrow-prev .splide__arrow--prev,
.splide--arrows-hover.show-arrow-next .splide__arrow--next {
    opacity: var(--slider-arrow-opacity, 1);
    transition: opacity var(--arrows-show-speed, 0.2s) ease var(--arrows-show-delay, 0s), background 200ms ease;
}

.splide--arrows-hover.show-arrow-prev .splide__arrow--prev:hover:not(:disabled),
.splide--arrows-hover.show-arrow-next .splide__arrow--next:hover:not(:disabled),
.splide--arrows-hover .splide__arrow:focus-visible {
    opacity: 1;
}

/* Arrow visibility — proximity mode */
.splide--arrows-proximity .splide__arrow,
.splide--arrows-proximity .splide__arrow:hover:not(:disabled) {
    opacity: 0;
    transition: opacity var(--arrows-show-speed, 0.2s) ease var(--arrows-hide-delay, 0s), background 200ms ease;
}

.splide--arrows-proximity.show-arrow-prev .splide__arrow--prev,
.splide--arrows-proximity.show-arrow-next .splide__arrow--next {
    opacity: var(--slider-arrow-opacity, 1);
    transition: opacity var(--arrows-show-speed, 0.2s) ease var(--arrows-show-delay, 0s), background 200ms ease;
}

.splide--arrows-proximity.show-arrow-prev .splide__arrow--prev:hover:not(:disabled),
.splide--arrows-proximity.show-arrow-next .splide__arrow--next:hover:not(:disabled),
.splide--arrows-proximity .splide__arrow:focus-visible {
    opacity: 1;
}

/* Outside arrows — hug container edge, slide inside when viewport narrow */
.splide--arrows-outside {
    --_arrow: var(--slider-arrow-size, 2em);
    --_outside-gap: var(--slider-arrow-outside-gap, var(--spacing-md));
    --_outside-space: calc((100vw - 100%) / 2);
}


.splide.splide--arrows-outside .splide__arrow--prev {
    left: max(
        calc((var(--_arrow) + var(--_outside-gap)) * -1),
        calc(var(--_outside-space) * -1 + var(--_outside-gap))
    );
}

.splide.splide--arrows-outside .splide__arrow--next {
    right: max(
        calc((var(--_arrow) + var(--_outside-gap)) * -1),
        calc(var(--_outside-space) * -1 + var(--_outside-gap))
    );
}

/* Progress bar */
.splide__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--slider-progress-height, 3px);
    z-index: 2;
}

.splide__progress__bar {
    height: 100%;
    width: 0;
    background: var(--slider-progress-color, var(--color-primary));
    transition: width 50ms linear;
}