/**
 * Image Thumbnails, Upload Area, and Carousel Styles
 * 
 * - .thumbnail img:
 *     - Limits max width and height to container size
 *     - Uses object-fit: cover to crop images proportionally without distortion
 * 
 * - .thumbnail div:
 *     - Centers content horizontally and vertically using flexbox
 * 
 * - #uploadArea:
 *     - Styled as dashed bordered box with padding and rounded corners
 *     - Changes background color on drag-and-drop interaction via 'dragging' class
 *     - Cursor changes to pointer to indicate interactivity
 * 
 * - .carousel-item img and embed:
 *     - Sets max height for uniform carousel height
 *     - Uses object-fit (cover for images, contain for embedded PDFs) to maintain aspect ratio
 *     - Centers images horizontally within container
 * 
 * - .carousel-indicators li:
 *     - Sets indicator color to bootstrap primary blue (#007bff)
 * 
 * - .carousel-caption:
 *     - Semi-transparent black background with padding and rounded corners
 *     - Positioned with margin to appear below the carousel image
 * 
 * - .carousel-inner and .carousel:
 *     - Ensures consistent height for carousel items and spacing below carousel
 * 
 * - .equal-thumbnail:
 *     - Forces thumbnails to consistent width and height
 *     - Ensures images scale and crop to fill thumbnail container
 * 
 * - .thumbnail container:
 *     - Flexbox centering with fixed height and hidden overflow
 *     - Border and rounded corners for distinct thumbnail appearance
 * 
 * - #imageModal img:
 *     - Responsive image scaling inside modal with object-fit: contain
 * 
 * Usage:
 * - Use these styles on pages that display image galleries, upload areas, or carousels
 * - Ensure markup uses classes and IDs accordingly for proper styling
 */

 
.thumbnail img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover; /* Crop images while maintaining their aspect ratio */
}

.thumbnail div {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#uploadArea {
    border: 2px dashed #ccc;
    border-radius: 5px;
    padding: 30px;
    cursor: pointer;
    text-align: center;
    background-color: #f8f9fa;
}
#uploadArea.dragging {
    background-color: #e9ecef;
}
.thumbnail img {
    width: 100%;
    height: auto;
}
.carousel-item img,
.carousel-item embed {
    max-height: 400px;
    object-fit: contain;
    margin: 0 auto;
}

.carousel-indicators li {
    background-color: #007bff;
}

.carousel-caption {
    background: rgba(0, 0, 0, 0.5);
    padding: 10px;
    border-radius: 5px;
    margin-top: 50px;
}

.carousel-item img {
    width: 100%; /* Ensures the image fits the width of its container */
    max-height: 400px; /* Sets a consistent height for all images */
    object-fit: cover; /* Ensures images are cropped proportionally without distorting */
    display: block;
}
.carousel-item embed {
    width: 100%; /* Ensures PDFs are responsive */
    max-height: 400px; /* Keeps height consistent */
    object-fit: contain;
}
.carousel-inner {
    height: 400px; /* Ensures all carousel items are the same height */
}

.carousel {
    margin-bottom: 20px;
}

/* Set equal size for thumbnails */
.equal-thumbnail {
    width: 100%;
    height: 150px; /* Adjust the height to your preference */
    object-fit: cover; /* Ensures images scale to fit within the defined dimensions */
    display: block;
}

/* Ensure thumbnail container consistency */
.thumbnail {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px; /* Match the height of the image */
    overflow: hidden;
    border: 1px solid #ddd;
    border-radius: 5px;
}


#imageModal img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}