/* ===== DESKTOP BANNER PRESERVATION ===== */
/* Memastikan tampilan desktop tetap seperti sebelumnya */
/* Hanya berlaku untuk layar 769px ke atas (desktop/tablet landscape) */

@media (min-width: 769px) {
    /* Preserve original desktop banner styling */
    .banner-carousel .carousel-item {
        /* Let desktop use original styles from other CSS files */
        position: relative;
        overflow: hidden;
        /* Don't force flex layout on desktop */
    }

    .carousel-caption {
        /* Preserve original desktop caption positioning */
        /* Let other CSS files handle desktop positioning */
        position: absolute;
        /* Don't override desktop positioning */
    }

    /* Preserve original desktop text sizing */
    .carousel-caption h5 {
        /* Let desktop use original font sizes from other CSS files */
        /* Don't override desktop text styling */
    }

    .carousel-caption p {
        /* Let desktop use original paragraph styling */
        /* Don't override desktop text styling */
    }

    /* Preserve original desktop button styling */
    .carousel-caption .btn {
        /* Let desktop use original button styles */
        /* Don't override desktop button styling */
    }

    .carousel-caption .btn:hover {
        /* Let desktop use original hover effects */
        /* Don't override desktop hover styling */
    }

    /* Ensure desktop banner images maintain original behavior */
    .banner-carousel .carousel-item img {
        /* Let desktop use original image sizing */
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    /* Desktop carousel controls - preserve original */
    .carousel-control-prev,
    .carousel-control-next {
        /* Let desktop use original control styling */
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        /* Let desktop use original icon sizing */
    }

    .carousel-indicators {
        /* Let desktop use original indicator positioning */
    }

    .carousel-indicators [data-bs-target] {
        /* Let desktop use original indicator sizing */
    }

    /* Disable mobile-specific overlays on desktop */
    .carousel-caption::before {
        display: none !important;
    }

    /* Disable mobile-specific text animations on desktop */
    .banner-text-stagger {
        /* Let desktop use original animation behavior */
        opacity: 1;
        transform: none;
    }

    .banner-text-stagger.animate {
        /* Let desktop use original animation behavior */
        opacity: 1;
        transform: none;
    }
}

/* ===== TABLET LANDSCAPE SPECIFIC ===== */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Tablet landscape can use desktop styles but with slight adjustments */
    .carousel-caption {
        /* Slightly smaller padding for tablet landscape */
        padding: 1.5rem;
    }

    .carousel-caption h5 {
        /* Slightly smaller heading for tablet landscape */
        font-size: 2rem;
    }

    .carousel-caption p {
        /* Slightly smaller text for tablet landscape */
        font-size: 1.1rem;
    }

    .carousel-caption .btn {
        /* Slightly smaller button for tablet landscape */
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }
}

/* ===== LARGE DESKTOP SPECIFIC ===== */
@media (min-width: 1200px) {
    /* Large desktop can use full original styling */
    .carousel-caption {
        /* Full padding for large desktop */
        padding: 2rem;
    }

    .carousel-caption h5 {
        /* Full heading size for large desktop */
        font-size: 2.5rem;
    }

    .carousel-caption p {
        /* Full text size for large desktop */
        font-size: 1.25rem;
    }

    .carousel-caption .btn {
        /* Full button size for large desktop */
        padding: 1rem 2rem;
        font-size: 1.1rem;
    }
}

/* ===== ENSURE MOBILE FIXES DON'T AFFECT DESKTOP ===== */
@media (min-width: 769px) {
    /* Reset any mobile-specific overrides for desktop */
    .carousel-caption * {
        /* Remove mobile-specific box-sizing if needed */
        box-sizing: border-box;
        /* Don't force max-width on desktop */
        max-width: none;
    }

    /* Remove mobile-specific text truncation */
    .carousel-caption h5,
    .carousel-caption p {
        display: block !important;
        -webkit-line-clamp: none !important;
        -webkit-box-orient: initial !important;
        overflow: visible !important;
        word-break: normal !important;
        hyphens: none !important;
    }

    /* Remove mobile-specific height restrictions */
    .banner-carousel .carousel-item {
        height: auto !important;
        min-height: auto !important;
    }
}

/* ===== COMMENTS FOR DEVELOPERS ===== */
/*
IMPORTANT NOTES:
1. This CSS file ensures desktop banner styling remains unchanged
2. Mobile fixes from mobile-banner-fix.css only apply to screens 768px and below
3. Desktop (769px+) uses original styling from other CSS files
4. Tablet landscape (769px-1024px) gets slight adjustments
5. Large desktop (1200px+) gets full original styling

LOAD ORDER:
1. Bootstrap CSS
2. Original custom CSS files
3. mobile-banner-fix.css (mobile only)
4. desktop-banner-preserve.css (desktop only) - THIS FILE

This ensures mobile gets fixes while desktop remains unchanged.
*/