/* ============================================
   UNIVERSAL IMAGE SCALING SYSTEM
   Універсальна система масштабування зображень
   ============================================ */

/* 
   Клас для зображень з contain - зберігає пропорції,
   додає поля якщо формат не підходить
*/
.pv-image-contain {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: var(--color-bg-light);
}

/* Темна тема */
[data-theme="dark"] .pv-image-contain {
    background: var(--color-bg-dark);
}

@media (prefers-color-scheme: dark) {
    [data-theme="auto"] .pv-image-contain {
        background: var(--color-bg-dark);
    }
}

/* 
   Wrapper для зображень - забезпечує однаковий розмір контейнерів
*/
.pv-image-wrapper {
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* Padding для адаптації під широкоформатні зображення */
.pv-image-padding-equal {
    padding: 10px;
}

.pv-image-padding-vertical {
    padding-top: 10px;
    padding-bottom: 10px;
}

.pv-image-padding-horizontal {
    padding-left: 10px;
    padding-right: 10px;
}

/* === CONTENT ЗОБРАЖЕННЯ === */
/* Великі блоки з зображеннями/діаграмами */
.wide-block img,
.about-image-block img,
.mentoring-image-block img,
.content-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    object-position: center;
}

/* === SVG ЗОБРАЖЕННЯ === */
.wide-block svg,
.about-image-block svg,
.mentoring-image-block svg {
    width: 100%;
    height: auto;
    display: block;
}

/* === КАРТКИ КУРСІВ === */
/* .course-card-image img визначено в course-detail-unified.css з object-fit: cover */
.material-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* === EVENT PREVIEWS === */
.event-card-image img,
.video-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* === ВИКЛЮЧЕННЯ: АВАТАРИ (мають бути cover) === */
.avatar,
.expert-photo img,
.speaker-photo img,
.user-avatar img,
[class*="-avatar"],
[class*="-avatar"] img,
[class*="-photo"] img {
    object-fit: cover !important;
}