/* Native b2sme Splide integration. No Swiper compatibility rules live here. */
body.b2sme-theme .b2sme-splide {
    --b2sme-slider-gutter: clamp(4.75rem, 6vw, 6.5rem);
    position: relative;
    width: 100%;
    overflow: visible;
}

/* Progressive enhancement: do not hide content if JavaScript is unavailable. */
body.b2sme-theme .b2sme-splide:not(.is-initialized) {
    visibility: visible;
}

body.b2sme-theme .b2sme-splide:not(.is-initialized) .splide__list {
    display: block;
}

body.b2sme-theme .b2sme-splide .splide__track {
    margin-inline: var(--b2sme-slider-gutter);
    overflow: hidden;
}

body.b2sme-theme .b2sme-splide .splide__list {
    align-items: flex-start;
}

body.b2sme-theme .b2sme-splide .splide__slide {
    min-width: 0;
    align-self: flex-start;
}

body.b2sme-theme .b2sme-splide .splide__slide > :first-child {
    margin-top: 0;
}

/* On desktop, text may use the complete width of each column. Single-column
   teaser layouts keep the global 80% line-length cap for readability. */
@media (min-width: 48.001rem) {
    body.b2sme-theme .b2sme-splide :is(
        .b2sme-teaser--image-left,
        .b2sme-teaser--image-right,
        .b2sme-teaser--text-text,
        .b2sme-teaser--full-width
    ) :is(h1, h2, h3, h4, h5, h6, p, li, span) {
        max-width: 100%;
    }
}

/* Full-width teaser inside Splide keeps the component semantics, but its inner
   content must still obey the normal b2sme content width. The track only owns
   the navigation gutter; it must not become the content container itself. */
body.b2sme-theme .b2sme-splide .b2sme-teaser--full-width {
    width: 100%;
    max-width: none;
    background: transparent !important;
    color: var(--b2sme-secondary) !important;
}

body.b2sme-theme .b2sme-splide .b2sme-teaser--full-width .b2sme-teaser__inner {
    width: min(calc(100% - 2rem), var(--b2sme-content));
    max-width: 100%;
    margin-inline: auto;
    padding-inline: 0;
    box-sizing: border-box;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1rem, 2vw, 2rem);
}

body.b2sme-theme .b2sme-splide .b2sme-teaser--full-width .b2sme-teaser__media,
body.b2sme-theme .b2sme-splide .b2sme-teaser--full-width .b2sme-teaser__content {
    min-width: 0;
    max-width: 100%;
}

body.b2sme-theme .b2sme-splide .b2sme-teaser--full-width h1,
body.b2sme-theme .b2sme-splide .b2sme-teaser--full-width h2,
body.b2sme-theme .b2sme-splide .b2sme-teaser--full-width h3,
body.b2sme-theme .b2sme-splide .b2sme-teaser--full-width h4,
body.b2sme-theme .b2sme-splide .b2sme-teaser--full-width p,
body.b2sme-theme .b2sme-splide .b2sme-teaser--full-width li,
body.b2sme-theme .b2sme-splide .b2sme-teaser--full-width .b2sme-teaser__content,
body.b2sme-theme .b2sme-splide .b2sme-teaser--full-width .b2sme-teaser__text {
    color: var(--b2sme-secondary) !important;
}

body.b2sme-theme .b2sme-splide .b2sme-teaser--full-width .b2sme-eyebrow,
body.b2sme-theme .b2sme-splide .b2sme-teaser--full-width a:not(.b2sme-button) {
    color: var(--b2sme-primary) !important;
}

body.b2sme-theme .b2sme-splide .splide__arrows {
    pointer-events: none;
}

body.b2sme-theme .b2sme-splide .splide__arrow {
    position: absolute;
    z-index: 4;
    top: 50%;
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
    place-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--b2sme-secondary);
    color: #fff;
    box-shadow: 0 .55rem 1.5rem rgb(10 15 26 / .18);
    transform: translateY(-50%);
    cursor: pointer;
    pointer-events: auto;
    transition:
        left .3s ease,
        right .3s ease,
        top .3s ease,
        bottom .3s ease,
        transform .2s ease,
        box-shadow .2s ease,
        opacity .2s ease;
}

body.b2sme-theme .b2sme-splide .splide__arrow:hover,
body.b2sme-theme .b2sme-splide .splide__arrow:focus-visible {
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 .7rem 1.8rem rgb(10 15 26 / .22);
}

body.b2sme-theme .b2sme-splide .splide__arrow:focus-visible {
    outline: .18rem solid var(--b2sme-accent);
    outline-offset: .2rem;
}

body.b2sme-theme .b2sme-splide .splide__arrow:disabled {
    opacity: .3;
    cursor: default;
}

body.b2sme-theme .b2sme-splide .splide__arrow svg {
    display: none;
}

body.b2sme-theme .b2sme-splide .splide__arrow::before {
    content: "";
    width: .72rem;
    height: .72rem;
    border-top: .22rem solid currentColor;
    border-right: .22rem solid currentColor;
}

/* Keep desktop arrows visually attached to the content grid, with a little
   extra breathing room when the viewport provides it. On narrower viewports
   max() pulls them safely back inside. */
body.b2sme-theme .b2sme-splide .splide__arrow--prev {
    left: max(1rem, calc((100% - var(--b2sme-content)) / 2 - 5.875rem));
}

body.b2sme-theme .b2sme-splide .splide__arrow--prev::before {
    transform: rotate(-135deg) translate(-.05rem, -.05rem);
}

body.b2sme-theme .b2sme-splide .splide__arrow--next {
    right: max(1rem, calc((100% - var(--b2sme-content)) / 2 - 5.875rem));
}

body.b2sme-theme .b2sme-splide .splide__arrow--next::before {
    transform: rotate(45deg) translate(-.05rem, -.05rem);
}

body.b2sme-theme .b2sme-splide .splide__pagination {
    position: static;
    gap: .45rem;
    margin-top: 1.5rem;
    padding: 0;
}

body.b2sme-theme .b2sme-splide .splide__pagination__page {
    width: .6rem;
    height: .6rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--b2sme-secondary) 25%, transparent);
    cursor: pointer;
    transition: transform .2s ease, background-color .2s ease;
}

body.b2sme-theme .b2sme-splide .splide__pagination__page.is-active {
    background: var(--b2sme-primary);
    transform: scale(1.25);
}

body.b2sme-theme .b2sme-splide:not(.is-overflow) .splide__track {
    margin-inline: 0;
}

@media (max-width: 48rem) {
    body.b2sme-theme .b2sme-splide {
        padding-bottom: 4.5rem;
    }

    body.b2sme-theme .b2sme-splide .splide__track {
        margin-inline: 0;
    }

    body.b2sme-theme .b2sme-splide .b2sme-teaser--full-width .b2sme-teaser__inner {
        width: min(calc(100% - 2rem), var(--b2sme-content));
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    body.b2sme-theme .b2sme-splide .splide__arrow {
        top: auto;
        bottom: 0;
        width: 3rem;
        height: 3rem;
        transform: none;
    }

    body.b2sme-theme .b2sme-splide .splide__arrow:hover,
    body.b2sme-theme .b2sme-splide .splide__arrow:focus-visible {
        transform: scale(1.04);
    }

    body.b2sme-theme .b2sme-splide .splide__arrow--prev {
        left: 1rem;
    }

    body.b2sme-theme .b2sme-splide .splide__arrow--next {
        right: 1rem;
    }

    body.b2sme-theme .b2sme-splide .splide__pagination {
        position: absolute;
        right: 4.5rem;
        bottom: 1.1rem;
        left: 4.5rem;
        margin: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.b2sme-theme .b2sme-splide .splide__arrow,
    body.b2sme-theme .b2sme-splide .splide__pagination__page {
        transition: none;
    }
}