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



.slider #heroCarousel .carousel-item {
    height: calc(100vh - 75px); /* Full screen minus header */
    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.3); /* Subtle dark overlay for text readability */
    z-index: 1;
    pointer-events: none;
}

/* Desktop typography defaults */
.slider #heroCarousel .slider-title {
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.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: calc(70vh - 60px); /* Mobile header is usually slightly smaller */
        min-height: 400px;
    }

    /* 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: 1rem; /* Less padding on mobile */
        left: 5%;
        right: 5%;
    }
}