/* Gallery Section */
.gallery-section {
    padding: 0 0 40px;
    position: relative;
}

/* Carousel Styles */
.carousel-wrapper {
    z-index: 5;
    position: relative;
    max-width: 1100px; /* enlarged width for bigger images */
    margin: 0 auto;
}

.carousel {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.25);
}

/* Multi (three-up) variant overrides */
.carousel.multi {
    background: transparent; /* items get their own visual box */
    box-shadow: none;
    overflow: visible; /* allow scaled items to show */
}

.carousel.multi .carousel-track {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 1rem;
    position: relative;
    padding: 0.5rem 0 1rem;
}

.carousel.multi .carousel-item, .carousel.multi .multi-item {
    flex: 0 0 32%; /* default basis now slightly larger */
    position: relative;
    transition: transform .45s ease, opacity .45s ease, box-shadow .45s ease;
    cursor: pointer;
    border-radius: 16px;
}

.carousel.multi .carousel-item img, .carousel.multi .multi-item img {
    width: 100%;
    height: 460px; /* fixed equal height for all items */
    max-height: 460px; /* retain for safety */
    object-fit: cover;
    border-radius: 16px;
    display: block;
    background: #000;
}

.carousel.multi .carousel-item.prev, .carousel.multi .multi-item.prev,
.carousel.multi .carousel-item.next, .carousel.multi .multi-item.next {
    /* Remove scale so side items are full height like center */
    /* transform: scale(.92); */
    transform: none;
    opacity: .75;
    box-shadow: 0 4px 14px -4px rgba(0,0,0,.3);
    z-index: 1;
    /* Ensure overflow hidden so fixed-height crop works */
    overflow: hidden;
}

.carousel.multi .carousel-item.current, .carousel.multi .multi-item.current {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 8px 24px -6px rgba(0,0,0,.4);
    z-index: 2;
    cursor: default;
}

/* Slight lift on hover for side items */
.carousel.multi .carousel-item.prev:hover,
.carousel.multi .carousel-item.next:hover,
.carousel.multi .multi-item.prev:hover,
.carousel.multi .multi-item.next:hover { transform: scale(.96); }

/* Caption positioning inside each item */
.carousel.multi .carousel-item .carousel-caption,
.carousel.multi .multi-item .carousel-caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: .75rem 1rem;
    color: #fff;
    border-radius: 0 0 16px 16px;
}

/* Original single-image slide (kept for <3 images fallback) */
.carousel-slide {
    position: relative;
}

.carousel-slide img {
    width: 100%;
    /* Allow natural height; prevent cropping */
    height: auto;
    object-fit: contain; /* Show full image without cropping */
    max-height: 500px;
    display: block;
    background: #000; /* Letterbox background if aspect ratios differ */
}

.carousel-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1rem 1.25rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.1));
    color: #fff;
}

.carousel-caption h5 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 500;
}

.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    color: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: background .25s;
    z-index: 10; /* ensure arrows stay above images on small screens */
    background: rgba(255,255,255,0.85); /* subtle bg for contrast over photo */
    backdrop-filter: blur(2px); /* small blur for readability */
}

.carousel-nav:hover {
    background: #fff;
}

.carousel-nav.prev {
    left: -20px;
}

.carousel-nav.next {
    right: -20px;
}

/* Keep arrows inside viewport and visible when layout collapses to single image */
@media (max-width: 768px) {
    .carousel-nav.prev { left: 8px; }
    .carousel-nav.next { right: 8px; }
    .carousel.multi .carousel-track { gap:.5rem; }
    .carousel.multi .carousel-item.prev,
    .carousel.multi .carousel-item.next,
    .carousel.multi .multi-item.prev,
    .carousel.multi .multi-item.next { transform:none; }
}

@media (max-width: 576px) {
    .carousel.multi .carousel-item.prev,
    .carousel.multi .carousel-item.next,
    .carousel.multi .multi-item.prev,
    .carousel.multi .multi-item.next { display:none; }
    .carousel.multi .carousel-item.current,
    .carousel.multi .multi-item.current { flex:1 1 100%; transform:scale(1); }
}

/* Desktop: widen center image */
@media (min-width: 992px) {
  .carousel.multi .multi-item.current { flex:0 0 50%; }
  .carousel.multi .multi-item.prev, .carousel.multi .multi-item.next { flex:0 0 25%; }
}

.carousel.multi .carousel-track .multi-item:only-child { flex:1 1 100%; max-width:100%; }