.swiper-container-wrapper {
    max-width: 900px;
    margin: 0 auto 2rem;  /* Remove top margin, keep bottom margin */
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: none;
    background-color: var(--color-bg);
}

.swiper {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* Prevent Swiper from pausing on hover */
.swiper-container-autoplay:hover .swiper-wrapper {
    animation-play-state: running !important;
}

.swiper:hover {
    cursor: default;
}

.swiper-slide {
    text-align: center;
    background: #000;  /* Black background for letterboxing */
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;  /* Contain instead of cover - preserves aspect ratio with black borders */
}

/* --- Caption Styling --- */
.swiper-slide figure {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
}
.swiper-slide figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
    color: white;
    padding: 2rem 1rem 1rem;
    font-size: 1rem;
    text-align: left;
}

/* --- Controls Container Styling --- */
.swiper-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background-color: var(--color-chip-bg);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* Ensure play/pause stays left, pagination goes right */
.swiper-controls .swiper-toggle-button {
    order: 1;
}

.swiper-controls .swiper-pagination {
    order: 2;
    justify-content: flex-end;
}

/* Play/Pause Button */
.swiper-toggle-button {
    cursor: pointer;
    background: transparent;
    border: none;
    color: var(--color-fg);
    padding: 0;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.swiper-toggle-button:hover { 
    opacity: 1;
}
.swiper-toggle-button svg { 
    width: 24px; 
    height: 24px; 
}

/* Pagination Dots - Scoped to carousel only */
.swiper-container-wrapper .swiper-pagination {
    position: static;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.swiper-container-wrapper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: var(--color-muted);
    opacity: 0.6;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.swiper-container-wrapper .swiper-pagination-bullet:hover {
    opacity: 0.9;
    transform: scale(1.2);
    background: var(--color-fg);
}

.swiper-container-wrapper .swiper-pagination-bullet-active {
    background: var(--maroon);
    opacity: 1;
    transform: scale(1.3);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Mobile responsive controls */
@media (max-width: 768px) {
    .swiper-controls {
        padding: 0.5rem 0.75rem;
    }
    
    .swiper-toggle-button svg {
        width: 20px;
        height: 20px;
    }
    
    .swiper-container-wrapper .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
    }
}

@media (prefers-color-scheme: dark) {
    .swiper-container-wrapper .swiper-pagination-bullet {
        background: #ffffff;
        opacity: 1.0;
        border: 2px solid #ffffff;
    }
    
    .swiper-container-wrapper .swiper-pagination-bullet-active {
        background: var(--orange);
        border-color: rgba(255, 255, 255, 0.5);
    }
    
    .swiper-container-wrapper .swiper-pagination-bullet:hover {
        background: var(--orange);
        opacity: 0.8;
    }
}

/* Autoplay Progress Bar - Hidden */
.swiper-autoplay-progress {
    display: none;
}


/* Dark mode enhancements */
@media (prefers-color-scheme: dark) {
    .swiper-container-wrapper {
        box-shadow: none;
    }
    
    .swiper-slide {
        background: var(--color-chip-bg);
    }

    .swiper-autoplay-progress .progress-bar-fill {
        background: white;
    }
}