/* Image Overlay Styles */
.img-card-container {
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 100%;
}

.img-card-container img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* 
   Ratio Enforcers 
   - Cards: 1:1 
   - Modals: 16:9 
*/
.ratio-1x1 {
    aspect-ratio: 1 / 1;
}

.ratio-16x9 {
    aspect-ratio: 16 / 9;
}

/* White Footer Strip */
.img-footer-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    /* Pure White */
    color: #000000;
    /* Pure Black Text */
    text-align: center;
    padding: 5px 0;
    font-family: 'Inter', sans-serif;
    /* Clean Font */
    font-weight: 700;
    /* Bold */
    text-transform: uppercase;
    z-index: 10;

    /* Responsive Text Logic */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Allow wrapping for long text */
    white-space: normal;
    text-align: center;
    line-height: 1.2;

    /* Dynamic Font Size based on container width */
    font-size: clamp(8px, 3.5cqw, 14px);
    /* Slightly smaller to fit better */
    padding: 4px 6px;
    /* Add padding so text doesn't touch edges */
    min-height: 24px;
    /* Ensure minimum height */
}

/* Setup Container Query on Parent */
.img-card-container {
    container-type: inline-size;
}