/* 4:3 Aspect Ratio Image Styles for YasCMS */

/* Standard 4:3 aspect ratio container */
.image-container-4x3 {
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 8px;
    overflow: hidden;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Image inside 4:3 container */
.image-container-4x3 img,
.image-container-4x3 .mud-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* Small thumbnail 4:3 (for lists and previews) */
.image-thumbnail-4x3-small {
    width: 100px;
    height: 75px;
    aspect-ratio: 4/3;
    border-radius: 4px;
    overflow: hidden;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.image-thumbnail-4x3-small:hover {
    transform: scale(1.02);
}

.image-thumbnail-4x3-small img,
.image-thumbnail-4x3-small .mud-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

/* Medium thumbnail 4:3 (for product thumbnails) */
.image-thumbnail-4x3-medium {
    width: 133px;
    height: 100px;
    aspect-ratio: 4/3;
    border-radius: 4px;
    overflow: hidden;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.image-thumbnail-4x3-medium:hover {
    transform: scale(1.02);
}

.image-thumbnail-4x3-medium img,
.image-thumbnail-4x3-medium .mud-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

/* Large 4:3 container for detailed views */
.image-container-4x3-large {
    width: 100%;
    max-width: 800px;
    aspect-ratio: 4/3;
    border-radius: 8px;
    overflow: hidden;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.image-container-4x3-large img,
.image-container-4x3-large .mud-image {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Use contain for large views to show full image */
    border-radius: 8px;
}

/* Gallery grid with 4:3 images */
.image-gallery-4x3 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    padding: 16px 0;
}

.image-gallery-4x3 .image-item {
    aspect-ratio: 4/3;
    border-radius: 8px;
    overflow: hidden;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.image-gallery-4x3 .image-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.image-gallery-4x3 .image-item img,
.image-gallery-4x3 .image-item .mud-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .image-thumbnail-4x3-medium {
        width: 100px;
        height: 75px;
    }
    
    .image-thumbnail-4x3-small {
        width: 80px;
        height: 60px;
    }
    
    .image-gallery-4x3 {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .image-gallery-4x3 {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 8px;
    }
}

/* Loading placeholder for 4:3 images */
.image-placeholder-4x3 {
    width: 100%;
    aspect-ratio: 4/3;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 14px;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Utility classes for aspect ratio enforcement */
.aspect-ratio-4x3 {
    aspect-ratio: 4/3;
}

.aspect-ratio-4x3-cover {
    aspect-ratio: 4/3;
    object-fit: cover;
}

.aspect-ratio-4x3-contain {
    aspect-ratio: 4/3;
    object-fit: contain;
}