/* Рамка слайда — стабильная пропорция для фото и видео одновременно.
   Пропорция задаётся через CSS-переменную --cvg-frame-ratio (JS выставляет её
   из настроек плагина), значение 1/1 — дефолтный fallback. */
.cvg-slide-frame {
    position: relative;
    width: 100%;
    aspect-ratio: var(--cvg-frame-ratio, 1 / 1);
    overflow: hidden;
    border-radius: 4px;
    background: #f2f2f2;
}

/* Fallback для старых браузеров без поддержки aspect-ratio (iOS Safari < 15) */
@supports not (aspect-ratio: 1 / 1) {
    .cvg-slide-frame {
        height: 0;
        padding-top: 100%;
    }
    .cvg-slide-frame > * {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

/* Блюр-подложка — та же картинка/кадр, растянутая и размытая под весь фон рамки,
   чтобы не было пустых полей при несовпадающих пропорциях контента и рамки */
.cvg-slide-frame__backdrop {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(24px) brightness(0.65) saturate(1.1);
    transform: scale(1.15);
}

/* Сам контент (фото/видео) — вписывается целиком, ничего не обрезается */
.cvg-slide-frame__content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.cvg-slide-frame__content img,
.cvg-slide-frame__content video,
.cvg-slide-frame__content iframe {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border: 0;
}

/* Миниатюры в thumbnail-strip — консистентный квадрат, обрезка допустима */
.cvg-slide-frame--thumb {
    aspect-ratio: 1 / 1;
    border-radius: 3px;
}
.cvg-slide-frame--thumb .cvg-slide-frame__content img {
    object-fit: cover;
}

/* Кнопка воспроизведения поверх постера видео */
.cvg-video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 48px;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 2;
    padding: 0;
}
.cvg-video-play-btn .cvg-play-icon {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
    transition: transform 0.15s ease;
}
.cvg-video-play-btn:hover .cvg-play-icon {
    transform: scale(1.08);
}