/* ========================================
   MOBILE CAROUSEL CONTROLS HIDE
   Hide navigation arrows and indicators on mobile
   ======================================== */

/* Hide carousel controls on mobile devices */
@media (max-width: 768px) {
    
    /* Hide left/right navigation arrows */
    .carousel-control,
    .carousel-control-prev,
    .carousel-control-next {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* Hide carousel indicator dots */
    .carousel-indicators {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* Ensure carousel wrapper still works properly */
    .campus-carousel-wrapper {
        position: relative;
        overflow: hidden;
    }
    
    /* Ensure carousel slides still function */
    .campus-carousel {
        position: relative;
        width: 100%;
        height: auto;
    }
    
    .carousel-slide {
        position: relative;
        width: 100%;
        display: none;
    }
    
    .carousel-slide.active {
        display: block;
    }
    
    /* Ensure images display properly without controls */
    .carousel-slide img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
    }
    
    /* Hide any remaining control elements */
    .carousel-caption {
        bottom: 10px;
        left: 10px;
        right: 10px;
        background: rgba(0, 0, 0, 0.7);
        padding: 8px 12px;
        border-radius: 4px;
    }
}

/* Ensure desktop and tablet views still show controls */
@media (min-width: 769px) {
    
    /* Show navigation arrows on desktop/tablet */
    .carousel-control,
    .carousel-control-prev,
    .carousel-control-next {
        display: flex !important;
        visibility: visible !important;
        opacity: 0 !important; /* Keep hover to show behavior */
        pointer-events: auto !important;
    }
    
    /* Show indicators on desktop/tablet */
    .carousel-indicators {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    
    /* Restore hover behavior for controls */
    .campus-carousel-wrapper:hover .carousel-control,
    .campus-carousel-wrapper:hover .carousel-control-prev,
    .campus-carousel-wrapper:hover .carousel-control-next {
        opacity: 1 !important;
    }
}

/* Extra small mobile devices (phones) */
@media (max-width: 480px) {
    
    /* Double ensure controls are hidden on small phones */
    .carousel-control,
    .carousel-control-prev,
    .carousel-control-next,
    .carousel-indicators {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        z-index: -1 !important;
    }
    
    /* Clean image display on small phones */
    .carousel-slide img {
        max-height: 250px;
        object-fit: cover;
    }
    
    /* Simplified caption for small screens */
    .carousel-caption {
        font-size: 0.8rem;
        padding: 6px 10px;
    }
    
    .carousel-caption h4 {
        font-size: 0.9rem;
        margin-bottom: 2px;
    }
    
    .carousel-caption p {
        font-size: 0.75rem;
        margin: 0;
    }
}

/* Landscape mobile mode */
@media (max-width: 768px) and (orientation: landscape) {
    
    /* Hide controls in landscape mobile */
    .carousel-control,
    .carousel-control-prev,
    .carousel-control-next,
    .carousel-indicators {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* Adjust image height for landscape */
    .carousel-slide img {
        max-height: 200px;
        object-fit: cover;
    }
}