/**
 * UAM Product Images Styles
 * 
 * Handles responsive image layouts and retina display
 */

/* Base container */
.uam-product-images {
    margin: 20px 0;
}

/* Single image layouts */
.uam-product-images .uam-image-single {
    margin: 0;
    padding: 0;
}

.uam-product-images .uam-image-single img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* Content Horizontal (4:3) - 343 × 252 */
.uam-product-images .uam-image-content_horizontal img {
    max-width: 343px;
}

/* Content Vertical (3:4) - 343 × 447 */
.uam-product-images .uam-image-content_vertical img {
    max-width: 343px;
}

/* Content Wide (7:4) - 705 × 400 */
.uam-product-images .uam-image-content_wide img {
    max-width: 705px;
}

/* Large Banner (3:1) - 705 × 240 */
.uam-product-images .uam-image-large_banner img {
    max-width: 705px;
}

/* Image pairs */
.uam-product-images .uam-image-pair {
    display: flex;
    gap: 20px;
    align-items: center;
}

.uam-product-images .uam-image-pair figure {
    margin: 0;
    padding: 0;
    flex: 1;
}

.uam-product-images .uam-image-pair img {
    display: block;
    width: 100%;
    height: auto;
}

/* Horizontal pair (side by side) */
.uam-product-images .uam-image-pair-horizontal {
    flex-direction: row;
}

.uam-product-images .uam-image-pair-horizontal figure {
    max-width: 343px;
}

/* Vertical pair (stacked) */
.uam-product-images .uam-image-pair-vertical {
    flex-direction: column;
}

.uam-product-images .uam-image-pair-vertical figure {
    max-width: 343px;
}

/* All product images container */
.uam-all-product-images {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Retina display support */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Images are already at 2x resolution, no adjustments needed */
}

/* Mobile responsive */
@media (max-width: 768px) {
    /* Convert horizontal pairs to vertical on mobile */
    .uam-product-images .uam-image-pair-horizontal {
        flex-direction: column;
    }
    
    /* Ensure images don't exceed viewport */
    .uam-product-images .uam-image-single img,
    .uam-product-images .uam-image-pair img {
        max-width: 100%;
    }
    
    /* Reduce gap on mobile */
    .uam-product-images .uam-image-pair {
        gap: 15px;
    }
    
    .uam-all-product-images {
        gap: 20px;
    }
}

/* Centered alignment option */
.uam-product-images.align-center {
    text-align: center;
}

.uam-product-images.align-center .uam-image-single,
.uam-product-images.align-center .uam-image-pair {
    margin-left: auto;
    margin-right: auto;
}

/* Shadow option */
.uam-product-images.with-shadow img {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Rounded corners option */
.uam-product-images.rounded img {
    border-radius: 8px;
}

/* Border option */
.uam-product-images.with-border img {
    border: 1px solid #e0e0e0;
}