/* Modern Slider Styles (Bootstrap 5 Carousel) */
.slider {
    position: relative;
    width: 100%;
    height: auto !important;
}



.slider #heroCarousel .carousel-item {
    height: calc(100vh - var(--header-h, 170px));
    min-height: 500px; /* Minimum height to ensure content fits */
    background-color: #000; /* Fallback color */
}

.slider #heroCarousel .carousel-item.full-slide {
    height: 100vh; /* Full screen minus header */
    min-height: 500px; /* Minimum height to ensure content fits */
    background-color: #000; /* Fallback color */
}

/* Ensure the picture element and image fill the container */
.slider #heroCarousel .carousel-item picture,
.slider #heroCarousel .carousel-item .hero-img {
    display: block;
    width: 100%;
    height: 100%;
}

.slider #heroCarousel .carousel-item .hero-img {
    object-fit: cover; /* Prevents distortion */
    object-position: center center; /* Centers the crop */
}

/* Caption styling to mimic previous swiper content */
.slider #heroCarousel .carousel-caption {
    bottom: 0;
    top: 0;
    left: 10%;
    right: 10%;
    padding-bottom: 5rem; /* Add padding at bottom for overlay widget if needed */
    z-index: 2;
}

.slider .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2); /* Subtle dark overlay for text readability */
    z-index: 1;
    pointer-events: none;
}

/* Transparent nav: darken the top edge so the white menu stays readable on bright photos */
.slider.slider-transparent-nav .overlay {
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0, rgba(0, 0, 0, 0) 220px),
        rgba(0, 0, 0, 0.2);
}

/* Desktop typography defaults */
.slider #heroCarousel .slider-title {
    font-weight: 700;
}

.slider #heroCarousel .slider-caption {
    font-size: 18px;
    max-width: 800px;
    margin: 0 auto;
    margin-bottom: 40px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

/* Responsive Typography and Mobile Height */
@media (max-width: 767px) {
    /* Make slider full screen on mobile too */
    .slider #heroCarousel .carousel-item {
        height: 80vh;
        min-height: 80vh;
    }

    /* Responsive title and caption */
    .slider #heroCarousel .slider-title {
        font-size: 36px;
        font-weight: 600;
    }

    .slider #heroCarousel .slider-caption {
        font-size: 14px;
        max-width: 400px;
    }
    
    .slider #heroCarousel .carousel-caption {
        padding-bottom: calc(1rem + var(--m-bar-overlap, 225px)); /* Keeps the caption centred above the booking bar (overlap set in modern-booking-bar.css) */
        left: 5%;
        right: 5%;
    }

    /* Landscape hero images inside a tall mobile box get cropped hard
       on the sides with object-fit: cover; show the full image instead */
    .slider #heroCarousel .carousel-item .hero-img {
        object-fit: contain;
        position: relative;
        z-index: 1;
    }

    /* Fill the letterbox bars left by object-fit: contain with a blurred,
       zoomed copy of the same image instead of flat background color */
    .slider #heroCarousel .carousel-item {
        overflow: hidden;
    }

    .slider #heroCarousel .carousel-item::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: var(--bg-image);
        background-size: cover;
        background-position: center;
        filter: blur(20px) brightness(0.6);
        transform: scale(1.15);
        z-index: 0;
    }
}