/* --- SWIPER GALLERY STYLES --- */

/* 1. Override Gutenberg Defaults */
.wp-block-gallery.atrium-swiper {
    margin: 0;
    display: block; /* Override grid/flex */
    position: relative;
    border-radius: 4px; /* Subtle rounding */
    overflow: hidden;
}

/* 2. The Slide Image */
.atrium-swiper .swiper-slide img {
    width: 100%;
    height: 500px; /* Fixed height for consistency */
    object-fit: cover; /* Ensures image fills the box without stretching */
    display: block;
}

/* 3. Custom Navigation Arrows (Minimalist Gold) */
.atrium-swiper .swiper-button-next,
.atrium-swiper .swiper-button-prev {
    color: #8d5d32; /* Brand Brown */
    background: rgba(255, 255, 255, 0.8); /* Semi-transparent white backing */
    width: 50px;
    height: 50px;
    border-radius: 50%; /* Circle shape */
    backdrop-filter: blur(4px); /* Frosted glass effect */
    transition: all 0.3s ease;
}

.atrium-swiper .swiper-button-next::after,
.atrium-swiper .swiper-button-prev::after {
    font-size: 1.2rem; /* Make the arrow icon smaller/elegant */
    font-weight: bold;
}

.atrium-swiper .swiper-button-next:hover,
.atrium-swiper .swiper-button-prev:hover {
    background: #8d5d32; /* Fill with brown on hover */
    color: #ffffff;
}

/* 4. Pagination Dots */
.atrium-swiper .swiper-pagination-bullet {
    background: #2c3437;
    opacity: 0.5;
}
.atrium-swiper .swiper-pagination-bullet-active {
    background: #8d5d32; /* Brand Brown */
    opacity: 1;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .atrium-swiper .swiper-slide img {
        height: 350px; /* Shorter on phone */
    }
}

/* Update the Slide Image */
.atrium-swiper .swiper-slide {
    height: 500px; /* The container height */
    /* Optional: Add a shadow to make the images pop off the white background */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.atrium-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

/* Optional: Dim the "inactive" slides for focus */
.atrium-swiper .swiper-slide:not(.swiper-slide-active) {
    opacity: 0.6;
    transition: opacity 0.4s ease;
}

/* Mobile Adjustment */
@media (max-width: 768px) {
    .atrium-swiper .swiper-slide {
        height: 300px; /* Smaller on phone */
    }
}