/* Мягкая оптимизация CLS: только безопасные правки без изменения внешнего вида */

/* 1) Изображения: если заданы width/height — резервируем пропорции */
img[width][height] {
    aspect-ratio: attr(width) / attr(height);
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

.logo-image_new,
.header-logo__a img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.new-footer-cards-container img {
    width: auto;
    height: auto;
    max-height: 25px;
    object-fit: contain;
    flex-shrink: 0;
}

/* 2) Lazy-элементы: минимально резервируем место под асинхронный контент.
   Применяем только если высота не задана ни стилями, ни атрибутами. */
[loading="lazy"],
[data-src],
[data-lazy] {
    contain: content;
}

/* 3) Текстовые элементы — отображение не меняем, чтобы не влиять на макет. */

/* 4) Модальные окна и collapses: убираем внезапные переполнения. */
/*.modal:not([style*="overflow"]) { overflow: hidden; }*/
/*.collapse:not([style*="overflow"]) { overflow: hidden; }*/

/* 5) Аналитика и пиксели: исключаем влияние на поток документа. */
#yandex_metrika,
#google_analytics {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    visibility: hidden !important;
}

/* 6) Скрытые элементы не двигают макет. */
[style*="opacity: 0"] {
    visibility: hidden;
}
[style*="visibility: hidden"] {
    position: absolute;
    left: -9999px;
    top: -9999px;
}
[style*="display: none"] {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

/* 7) Трансформации и анимации — подсказка браузеру для стабильности. */
[style*="transform"],
[style*="transition"],
[style*="animation"] {
    will-change: auto;
}