/* Fix for partial image display issues */

/* Remove height constraints that might cut off images */
.library-card-image,
.carousel-image-wrapper,
.image-preview {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Ensure images load completely */
img {
    /* Disable lazy loading which might interrupt image loading */
    loading: eager !important;
}

/* Admin dashboard image previews */
.image-preview {
    display: block;
    width: auto;
    max-width: 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-preview.portrait {
    max-width: 120px;
    height: auto;
}

.image-preview.landscape {
    max-width: 180px;
    height: auto;
}

/* Ensure no absolute positioning cuts off images */
.library-card-image img,
.carousel-image-wrapper img {
    position: relative !important;
    width: 100%;
    height: auto;
    object-fit: contain; /* Changed from cover to contain */
}

/* Fix for library page images */
.library-card .image-container {
    width: 100%;
    padding-bottom: 62.5%; /* 16:10 aspect ratio */
    position: relative;
    overflow: visible !important;
}

.library-card .image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Prevent any parent containers from clipping */
.narrative-card,
.carousel-card,
.library-card {
    overflow: visible !important;
}

/* Debug helper - add red border to partially loaded images */
img[data-partial="true"] {
    border: 2px solid red !important;
}