/* 
  =========================================
  Standardized UI Image System (FORCE CONTROL)
  =========================================
*/

/* STEP 1: GLOBAL RESET (MANDATORY) */
.ui-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* STEP 2: STRICT IMAGE CONTAINER */
.ui-image {
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: #f2f2f2;
}

/* FORCE HEIGHT USING RATIO */
.ui-image::before {
    content: "";
    display: block;
    padding-top: 75%;
    /* DEFAULT 4:3 */
}

.ui-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* STEP 3: DIFFERENT UI VARIANTS */

/* Square (1:1) */
.ui-image.square::before {
    padding-top: 100%;
}

/* Wide (16:9) */
.ui-image.wide::before {
    padding-top: 56.25%;
}

/* Tall (3:4 or similar) */
.ui-image.tall::before {
    padding-top: 130%;
}

/* Utility to ensure contain if needed (rare) */
.ui-image img.contain {
    object-fit: contain !important;
    object-position: center !important;
}

/* Hover effects for cards */
.qr-card:hover .ui-image {
    transform: scale(1.02);
    transition: transform 0.3s ease;
}

/* Ensure background consistency */
.ui-image.square[style*="background: none"],
.ui-image.square[style*="background: transparent"] {
    background: transparent !important;
}