/* 
 * Image Size Fix v2 - Override all image sizing 
 * This file is specifically created to bypass any browser caching
 */

/* Global image size constraints */
img.img-fluid, 
.post-image img, 
.media-item img, 
.image-container img, 
.media-carousel img,
.card-body img,
.post-content img {
    max-height: 300px !important;
    height: auto !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: top !important; /* Always align to top */
    margin: 0 auto !important;
    display: block !important;
    margin-top: 0 !important; /* No margin at top */
    padding-top: 0 !important; /* No padding at top */
}

/* Image container constraints */
.image-container, 
.post-image, 
.media-item, 
.post-media-container {
    max-height: 320px !important;
    overflow: visible !important; /* CRITICAL: Changed from hidden to visible to show full top */
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important; /* CRITICAL: Changed from center to flex-start */
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Modal image constraints */
#modalImage {
    max-height: 70vh !important;
    max-width: 70vw !important;
    object-fit: contain !important;
    object-position: top !important; /* Show from the very top */
    margin-top: 0 !important;
    padding-top: 0 !important;
    vertical-align: top !important;
}

/* Media carousel overrides */
.media-carousel {
    height: auto !important;
    max-height: 320px !important;
    position: relative !important;
    width: 100% !important;
    overflow: visible !important; /* Changed to visible */
    align-items: flex-start !important; /* Align to top */
}

/* Fix carousel display */
.media-item {
    display: none !important; /* Hide all items by default */
    max-height: 300px !important;
    overflow: visible !important; /* CRITICAL: Changed from hidden to visible */
    width: 100% !important;
    align-items: flex-start !important; /* Align to top */
}

/* Only show active slides */
.media-item.active {
    display: block !important; /* Show only active slide */
}

/* Make sure navigation controls are visible */
.carousel-control {
    display: block !important;
    position: absolute !important;
    z-index: 1000 !important;
    cursor: pointer !important;
    opacity: 0.9 !important;
    background: rgba(0,0,0,0.2) !important;
    padding: 10px !important;
    border-radius: 5px !important;
}

.carousel-control.prev {
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.carousel-control.next {
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Fix the indicator dots */
.media-indicators {
    display: flex !important;
    justify-content: center !important;
    margin-top: 5px !important;
}

.media-indicators .indicator {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background-color: #ccc !important;
    margin: 0 5px !important;
    cursor: pointer !important;
}

.media-indicators .indicator.active {
    background-color: #007bff !important;
}

/* Child post image constraints */
.nested-post .image-container img {
    max-height: 230px !important;
}

/* Custom card fixes */
.card-body .post-image img {
    max-height: 280px !important;
}

/* Clean up any inherited settings that might interfere */
.media-carousel,
.image-container,
.post-image,
.media-item {
    min-height: 0 !important;
}

/* Additional fixes for modal containers */
#imageModal .modal-body {
    align-items: flex-start !important; /* Force top alignment in modal */
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Force top alignment for images in index page */
.card-body .image-container,
.feed-item .image-container,
.post .image-container {
    align-items: flex-start !important;
    justify-content: center !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    overflow: visible !important;
}