/* Minimal CSS to avoid layout conflicts & performance overhead */
.seic-carousel {
    width: 100%;
    position: relative;
}

/* Full-width breakout: span the whole browser width, out of Elementor's column */
.seic-carousel.seic-fullwidth {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Core Swiper Layout - Support both .swiper and .swiper-container for compatibility */
.seic-carousel .swiper,
.seic-carousel .swiper-container {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
    display: block;
}

.seic-carousel .swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    flex-direction: row;
    box-sizing: content-box;
    will-change: transform;
}

.seic-carousel .swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
    backface-visibility: hidden;
}

.seic-slide {
    box-sizing: border-box;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.seic-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

/* Slide media rendered as a background-image div (sliver-proof, prefixed class only) */
.seic-carousel .seic-carousel-image {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    position: relative;
}
.seic-carousel .seic-link,
.seic-carousel .seic-video {
    width: 100%;
    height: 100%;
}

.seic-empty {
    padding: 20px;
    border: 2px dashed #cccccc;
    border-radius: 8px;
    font-size: 14px;
    text-align: center;
    color: #666666;
    background: #f9f9f9;
}

/* ============================================================
   COVERFLOW (3D) LAYOUT
   ============================================================ */
.seic-carousel.seic-coverflow .swiper,
.seic-carousel.seic-coverflow .swiper-container {
    overflow: hidden;
    padding: 10px 0;
}

/* Each slide auto-sizes; width is driven by the Center Slide Width control
   (defaults below act as a fallback if that control is empty). */
.seic-carousel.seic-coverflow .swiper-slide {
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Preserve original (portrait) artwork proportions in coverflow.
   Higher specificity than Elementor's per-image object-fit selector,
   so artwork is never cropped in this layout. */
.seic-carousel.seic-coverflow .swiper-slide .seic-carousel-image {
    background-size: contain; /* portrait podcast art shows uncropped by default */
}

/* Coverflow: reveal ONLY the active slide + its two immediate neighbours,
   so far-off slides never appear as thin slivers at the edges.
   Scoped to .swiper-initialized so if the JS ever fails to init,
   slides stay visible (never blanks the carousel). */
.seic-carousel.seic-coverflow .seic-swiper.swiper-initialized .swiper-slide {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
.seic-carousel.seic-coverflow .seic-swiper.swiper-initialized .swiper-slide-active,
.seic-carousel.seic-coverflow .seic-swiper.swiper-initialized .swiper-slide-prev,
.seic-carousel.seic-coverflow .seic-swiper.swiper-initialized .swiper-slide-next {
    opacity: 1;
    visibility: visible;
}


/* ============================================================
   NAVIGATION ARROWS
   ============================================================ */
.seic-carousel .seic-next,
.seic-carousel .seic-prev {
    position: absolute !important;
    width: 44px;
    height: 44px;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.5);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-top: 0 !important;
    z-index: 10 !important;
    pointer-events: auto !important;
    color: #5b2a9e;
    transition: color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
    cursor: pointer !important;
    border: none !important;
    outline: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.seic-carousel .seic-prev {
    left: 10px !important;
    right: auto !important;
}

.seic-carousel .seic-next {
    right: 10px !important;
    left: auto !important;
}

.seic-carousel .seic-next:hover,
.seic-carousel .seic-prev:hover {
    transform: translateY(-50%) scale(1.08) !important;
}

/* Hide default Swiper arrow glyphs (we render our own icon) */
.seic-carousel .seic-next::after,
.seic-carousel .seic-prev::after {
    display: none !important;
}

.seic-carousel .seic-next i,
.seic-carousel .seic-next svg,
.seic-carousel .seic-prev i,
.seic-carousel .seic-prev svg {
    display: block;
    line-height: 1;
    pointer-events: none;
}

/* Minimal arrows: clean chevrons with no circular background */
.seic-arrows-plain .seic-carousel .seic-prev,
.seic-arrows-plain .seic-carousel .seic-next {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
}

/* ============================================================
   PAGINATION DOTS (centered underneath the carousel)
   ============================================================ */
/* Default (Carousel / Slideshow): dots overlaid at the bottom, as before */
.seic-carousel .seic-pagination,
.seic-carousel .swiper-pagination {
    position: absolute !important;
    bottom: 10px !important;
    left: 0 !important;
    width: 100% !important;
    text-align: center !important;
    z-index: 10;
    pointer-events: auto !important;
}

/* Coverflow: dots sit centered underneath the carousel */
.seic-carousel.seic-coverflow .seic-pagination,
.seic-carousel.seic-coverflow .swiper-pagination {
    position: static !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    bottom: auto !important;
}

.seic-carousel .swiper-pagination-bullet {
    background: #d6d6de;
    opacity: 1;
    width: 8px;
    height: 8px;
    margin: 0 6px;
    border-radius: 50%;
    transition: background-color 0.25s ease, transform 0.25s ease;
    cursor: pointer;
    display: inline-block;
}

.seic-carousel .swiper-pagination-bullet-active {
    opacity: 1;
    background: #5b2a9e;
    transform: scale(1.15);
}

/* Ensure container allows arrows to be visible */
.seic-carousel .swiper-container,
.seic-carousel .seic-swiper {
    position: relative;
    overflow: hidden;
}

/* Image Stretch Option */
.seic-carousel.seic-stretch .seic-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Caption Styling */
.seic-caption {
    padding: 10px;
    text-align: center;
    font-size: 14px;
    color: #666666;
    background: #f9f9f9;
    margin-top: 8px;
    border-radius: 4px;
}

/* Lightbox Link Styling */
.seic-link {
    display: block;
    cursor: pointer;
    text-decoration: none;
    height: 100%;
    line-height: 0;
    position: relative;
}

.seic-link:hover img {
    opacity: 0.9;
}

/* Video card play overlay */
.seic-video .seic-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.seic-video .seic-play svg {
    width: 64px;
    height: 64px;
    transition: transform 0.25s ease;
}

.seic-video:hover .seic-play svg {
    transform: scale(1.08);
}

/* Swiper Lazy Preloader */
.seic-carousel .swiper-lazy-preloader {
    width: 42px;
    height: 42px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -21px;
    margin-top: -21px;
    z-index: 10;
    transform-origin: 50%;
    animation: seic-spin 1s infinite linear;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top-color: #333333;
    border-radius: 50%;
}

@keyframes seic-spin {
    100% { transform: rotate(360deg); }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .seic-carousel .swiper-wrapper {
        transition-duration: 0ms !important;
    }
}