/**
 * Image Dimensions Fix - CLS Prevention (05.11.2025)
 * 
 * Для динамічних зображень з /uploads/* задаємо aspect-ratio
 * щоб запобігти Cumulative Layout Shift (CLS)
 */

/* Новини - середній розмір (news-slider__item-img) */
.news-slider__item-img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
    height: auto;
}

/* Новини - великий розмір (cards-view_img) */
.cards-view_img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
    height: auto;
    max-width: 800px;
}

/* Блог - великий розмір */
.blog-view__img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
    height: auto;
}

/* Блог - малий розмір (в списку) */
.blog__item-img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
    height: auto;
}

/* Промо/акції - великий розмір */
.promotion__img-big {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
    height: auto;
}

/* Промо/акції - малий розмір */
.promotion__img-small {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
    height: auto;
}

/* Продукти - зображення товарів */
.product-view-img img,
.product-slider-item img {
    aspect-ratio: 4 / 3;
    object-fit: contain;
    width: 100%;
    height: auto;
}

/* Логотипи клієнтів (slider-clients) */
.logo-card img,
img[data-lazy*="/uploads/slider-clients/"] {
    aspect-ratio: 1 / 1;
    object-fit: contain;
    width: 100%;
    height: auto;
}

/* Сертифікати */
.sertificate-slider-item img {
    aspect-ratio: 3 / 4;
    object-fit: contain;
    width: 100%;
    height: auto;
    max-width: 400px;
}

/* Загальне правило для всіх зображень з /uploads/ */
img[src*="/uploads/"] {
    height: auto;
}

/* Lazy loading placeholder - запобігає стрибанню контенту */
img[data-lazy] {
    min-height: 200px;
    background: #f0f0f0;
}