/* ==========================================================================
   CRERP - Hero Slider & Carousel (3:1 Aspect Ratio) Styles
   ========================================================================== */

/* Seamless Top Alignment & Zero Gap */
#page-home-page,
.page-content-wrapper,
.page-content-wrapper > main,
.page_content,
.page-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.page-breadcrumbs:empty,
.page-breadcrumbs:blank,
.page-header-wrapper:empty,
.page-header:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
}

section[data-section-template="Hero Slider"],
section[data-section-idx="1"],
.page_content > section:first-child,
.hero-slider-section,
.item-group-slideshow {
    padding-top: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 6px !important;
}

.section-carousel {
    width: 100%;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

@media (max-width: 767.98px) {
    section[data-section-template="Hero Slider"],
    section[data-section-idx="1"],
    .page_content > section:first-child,
    .hero-slider-section,
    .item-group-slideshow {
        padding-top: 0 !important;
        margin-top: 0 !important;
        padding-bottom: 4px !important;
    }
}

/* Slider Dimensions & Zero Radius */
.section-carousel .carousel-inner {
    border-radius: 0 !important;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.section-carousel .carousel-item {
    height: auto !important;
    aspect-ratio: 3 / 1 !important;
    min-height: unset !important;
    max-height: none !important;
    position: relative;
    width: 100%;
    border-radius: 0 !important;
}

.section-carousel .carousel-item img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
}

/* Controls & Indicators Responsive Optimization */
.section-carousel .carousel-control {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: all 0.2s ease;
}

.section-carousel .carousel-control:hover {
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

@media (max-width: 767.98px) {
    .section-carousel .carousel-control {
        width: 26px !important;
        height: 26px !important;
    }
    .section-carousel .carousel-control svg {
        width: 12px !important;
        height: 12px !important;
    }
    .section-carousel .carousel-control-prev,
    .section-carousel .carousel-control-next {
        width: 10% !important;
    }
    .section-carousel .carousel-indicators {
        margin-bottom: 4px !important;
    }
    .section-carousel .carousel-indicators li {
        width: 14px !important;
        height: 2.5px !important;
        margin-left: 2px !important;
        margin-right: 2px !important;
    }
}