/* ==========================================================================
   Sub-Page Carousel System (Bootstrap 5.3 Compatible + Full-Height Controls)
   ========================================================================== */

/* 1. Base Container & Inner Items */
.carousel-wrapper-half {
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: var(--dark-blue, #0d1b2a);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* 
   Apply aspect-ratio ONLY to .carousel-inner.
   On mobile, let aspect-ratio be auto so the entire poster image scales down 
   without cropping text or graphics.
*/
.carousel-wrapper-half .carousel-inner {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    aspect-ratio: auto;
    /* Dynamic height on mobile so posters stay whole */
}

/* Let Bootstrap control item display without breaking transition animations */
.carousel-wrapper-half .carousel-item {
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* 2. Responsive Image Handling */
.carousel-wrapper-half .carousel-img-render {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    /* Shows full picture on mobile without cropping */
    object-position: center !important;
    display: block !important;
}

/* 3. Tablets & Desktop: Switch to Half-Height (32:9 Aspect Ratio) */
@media (min-width: 768px) {
    .carousel-wrapper-half .carousel-inner {
        aspect-ratio: 32 / 9;
        /* Halves height on larger screens */
    }

    .carousel-wrapper-half .carousel-item {
        height: 100%;
    }

    .carousel-wrapper-half .carousel-img-render {
        height: 100% !important;
        object-fit: cover !important;
        /* Fills container nicely on desktop */
    }
}

/* --------------------------------------------------------------------------
   4. OVERLAY & RESPONSIVE TYPOGRAPHY DESIGN
   -------------------------------------------------------------------------- */

.carousel-wrapper-half .carousel-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    padding: 0 15px;
    pointer-events: none;
}

.carousel-wrapper-half .banner-title-container {
    padding: 0.8rem 1.5rem;
    border-radius: 4px;
    text-align: center;
    max-width: 85%;
    pointer-events: auto;
}

.carousel-wrapper-half .banner-main-title {
    font-family: 'Times New Roman', Times, serif !important;
    font-size: clamp(0.85rem, 3vw, 2.1rem);
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0;
    line-height: 1.2;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.carousel-wrapper-half .banner-sub-caption {
    font-size: clamp(0.65rem, 1.4vw, 1rem);
    font-weight: 500;
    color: #f8f9fa;
    margin-top: 0.3rem;
    margin-bottom: 0;
    letter-spacing: 0.5px;
}

/* --------------------------------------------------------------------------
   5. NAVIGATION CONTROLS & OVERLAYS
   -------------------------------------------------------------------------- */

/* Elevate floating controls above navigation arrows */
.carousel-wrapper-half .carousel-manage-floating-btn {
    z-index: 100 !important;
    /* Increased z-index */
    position: absolute;
    top: 10px;
    right: 10px;
    pointer-events: auto !important;
}

.carousel-wrapper-half .carousel-status-overlay {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 100 !important;
    /* Increased z-index */
    pointer-events: auto !important;
}

/* Standard Bootstrap 5.3 Style Navigation Buttons (Full Height) */
.carousel-wrapper-half .carousel-control-prev,
.carousel-wrapper-half .carousel-control-next {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15%;
    /* Gives standard touch target width */
    padding: 0 1rem;
    /* Adds padding/spacing from sides for the icon */
    color: #fff;
    text-align: center;
    background: none;
    border: 0;
    opacity: 0;
    /* Hidden by default */
    transition: opacity 0.3s ease;
    /* Smooth fade-in transition */
}

/* 
   FIX: Allow pointer clicks to pass through the empty hitboxes 
   of the prev/next containers, but keep the icons clickable.
*/
.carousel-wrapper-half .carousel-control-prev,
.carousel-wrapper-half .carousel-control-next {
    pointer-events: none;
}

.carousel-wrapper-half .carousel-control-prev-icon,
.carousel-wrapper-half .carousel-control-next-icon {
    pointer-events: auto;
    /* Re-enable pointer events strictly on arrow icons */
}

.carousel-wrapper-half .carousel-control-prev {
    left: 0;
}

.carousel-wrapper-half .carousel-control-next {
    right: 0;
}

/* Reveal Arrows on Hover (Opacity 1) */
.carousel-wrapper-half:hover .carousel-control-prev,
.carousel-wrapper-half:hover .carousel-control-next {
    opacity: 1 !important;
}

.carousel-wrapper-half .carousel-remarks-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 15 !important;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.88));
    padding: 0.5rem 1rem;
    pointer-events: auto;
}

.carousel-wrapper-half .carousel-remarks-box {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    padding: 4px 10px;
}

/* --------------------------------------------------------------------------
   6. MOBILE COMPACTING
   -------------------------------------------------------------------------- */
@media (max-width: 576px) {
    .carousel-wrapper-half .banner-title-container {
        padding: 0.4rem 0.8rem;
        max-width: 90%;
    }

    .carousel-wrapper-half .carousel-control-prev,
    .carousel-wrapper-half .carousel-control-next {
        padding: 0 0.5rem;
        /* Slightly tighter side padding on small mobile screens */
    }
}