/* Carousel Fix CSS - Final override to ensure consistent carousel display
 * Fixes inconsistent display between posts caused by overflow: hidden rules
 * Load this last to override all conflicting CSS
 */

/* Override problematic overflow: hidden that clips arrows and content */
.post-card .media-carousel,
.post-card .media-carousel .media-item {
    overflow: visible !important;
}

/* Let carousel maintain natural content dimensions */
.post-card .media-carousel {
    width: 100% !important;
    max-width: 500px !important;
    position: relative !important;
    min-height: 200px !important; /* Ensure minimum height for arrow positioning */
}

/* Media items flow naturally */
.post-card .media-carousel .media-item {
    width: 100% !important;
}

/* Standardize image sizing - keep natural proportions */
.post-card .media-carousel img {
    width: auto !important;
    height: auto !important;
    max-height: 300px !important; /* Mobile max height */
    max-width: 100% !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Desktop image sizing - larger for desktop */
@media (min-width: 768px) {
    .post-card .media-carousel img {
        max-height: 563px !important; /* Desktop max height */
    }
    
    .post-card .media-carousel {
        min-height: 300px !important; /* Larger minimum height for desktop */
    }
}

/* Videos maintain their specified heights */
.post-card .media-carousel video,
.post-card .media-carousel .video-container {
    width: 100% !important;
    object-fit: contain !important;
}

/* Position arrows at a consistent height: 50% of min-height + content center */
.post-card .media-carousel .carousel-control {
    position: absolute !important;
    top: 200px !important; /* Fixed position on mobile - roughly center of typical content */
    transform: translateY(-50%) !important;
    overflow: visible !important;
    z-index: 1000 !important;
}

@media (min-width: 768px) {
    .post-card .media-carousel .carousel-control {
        top: 280px !important; /* Fixed position on desktop - center of typical content area */
    }
}

.post-card .media-carousel .carousel-control.prev {
    left: 8px !important;
}

.post-card .media-carousel .carousel-control.next {
    right: 8px !important;
}

/* Fix any clipped indicator dots */
.media-indicators {
    overflow: visible !important;
    z-index: 999 !important;
}