/* ============================================
   Видео-превью поверх картинки блока (ТЗ 26, B-059)
   Файл: assets/css/video-teaser.css
   Скрипт: assets/js/video-teaser.js

   Разметка — в паттерне («Произвольный HTML»), внутри обёртки с position: relative
   (у «Время жить» — .vzh-about__inner), сразу после картинки:
   <button class="ng-video-teaser ng-video-teaser--row ng-zhk--{slug} video-reviews-item" data-src="…embed…">
     <span class="ng-video-teaser__media"><video class="ng-video-teaser__video" …></video></span>
     <span class="ng-video-teaser__label">Видео о ЖК</span>
     <span class="ng-video-teaser__icon"><svg …></svg></span>
   </button>

   Класс video-reviews-item — ключ существующей модалки видеообзоров (main.js,
   initVideoReviews). Её оформление карточки (подъём на hover, анимация появления)
   здесь гасится.

   Раскладка: от 768 px — миниатюра в левом верхнем углу картинки.
   До 767 px — по модификатору: --row (строка под картинкой) или --corner (угол).
   ============================================ */

/* --- Токены: база темы, значения ЖК — ниже --- */
.ng-video-teaser {
    --ng-vt-accent: #0d3c63;
    --ng-vt-text:   #0d3c63;
    --ng-vt-radius: 18px;
}

/* «Время жить»: класс ЖК в разметке, а не класс body — блок может выводиться
   и под карточкой квартиры, где в URL нет vremya-zhit (D-062, п. 7) */
.ng-video-teaser.ng-zhk--vremya-zhit {
    --ng-vt-accent: var(--vzh-primary, #258D82);
    --ng-vt-text:   var(--vzh-text, #0d3c63);
    --ng-vt-radius: var(--vzh-radius, 18px);
}

/* --- Кнопка-корень: сброс кнопки --- */
.ng-video-teaser {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Оформление карточки видеообзора из custom.css (.video-reviews-item):
   анимация появления, подъём на hover. Раскладку (display/flex-direction)
   здесь не трогаем — её задают правила ниже */
.ng-video-teaser.video-reviews-item {
    animation: none;
    transition: none;
}

.ng-video-teaser.video-reviews-item:hover {
    transform: none;
}

/* <br> от wpautop: если фрагмент попал в классический блок, а не в «Произвольный HTML»,
   переводы строк внутри кнопки становятся <br> и растягивают её ниже миниатюры (ТЗ 26, fix1) */
.ng-video-teaser br {
    display: none;
}

/* --- Миниатюра: угол картинки (десктоп, планшет и мобайл --corner) --- */
.ng-video-teaser {
    position: absolute;
    z-index: 2;
    top: clamp(12px, 1.6vw, 24px);
    left: clamp(12px, 1.6vw, 24px);
    /* Картинка двора — 80 % обёртки, миниатюра — ~25 % картинки */
    width: 20%;
    min-width: 160px;
}

.ng-video-teaser__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 4px solid #ffffff;
    /* 2/3 радиуса ЖК: миниатюра в ~4 раза меньше картинки, полный радиус
       на высоте 120–140 px читается как «пилюля» */
    border-radius: calc(var(--ng-vt-radius) * 2 / 3);
    background: var(--ng-vt-text);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

/* Видео — на всю рамку независимо от соседей в потоке */
.ng-video-teaser__video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* Затемнение на hover */
.ng-video-teaser__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.2s ease;
}

.ng-video-teaser:hover .ng-video-teaser__media::after {
    background: rgba(0, 0, 0, 0.18);
}

/* Значок «открыть» — белый круг, иконка акцентом ЖК (#258D82 на белом — 4,0 : 1) */
.ng-video-teaser__icon {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--ng-vt-accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}

.ng-video-teaser__icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

.ng-video-teaser:hover .ng-video-teaser__icon {
    transform: scale(1.1);
}

/* Подпись — только в строке (мобайл --row) */
.ng-video-teaser__label {
    display: none;
}

/* Фокус с клавиатуры — кольцо акцентом ЖК */
.ng-video-teaser:focus-visible {
    outline: 3px solid var(--ng-vt-accent);
    outline-offset: 3px;
    border-radius: calc(var(--ng-vt-radius) * 2 / 3);
}

.ng-video-teaser:focus:not(:focus-visible) {
    outline: none;
}

/* --- Планшет: картинка двора на всю ширину (vremya-zhit.css, до 991 px) --- */
@media (max-width: 991px) {
    .ng-video-teaser {
        width: 25%;
    }
}

/* --- Мобайл --- */
@media (max-width: 767px) {

    /* --corner: угол картинки, ~40 % ширины, не меньше 120 px */
    .ng-video-teaser--corner {
        top: 12px;
        left: 12px;
        width: 40%;
        min-width: 120px;
    }

    .ng-video-teaser--corner .ng-video-teaser__media {
        border-width: 3px;
    }

    .ng-video-teaser--corner .ng-video-teaser__icon {
        right: 6px;
        bottom: 6px;
        width: 28px;
        height: 28px;
    }

    .ng-video-teaser--corner .ng-video-teaser__icon svg {
        width: 14px;
        height: 14px;
    }

    /* --row: строка под картинкой, в стиле карточки списка */
    .ng-video-teaser--row {
        position: static;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 14px;
        width: 100%;
        min-width: 0;
        margin-top: 12px;
        padding: 8px 14px 8px 8px;
        background: #ffffff;
        border-radius: var(--ng-vt-radius);
        box-shadow: 0 4px 20px rgba(37, 141, 130, 0.10);
    }

    .ng-video-teaser--row .ng-video-teaser__media {
        flex: 0 0 140px;
        width: 140px;
        border: 0;
        border-radius: calc(var(--ng-vt-radius) * 2 / 3);
        box-shadow: none;
    }

    .ng-video-teaser--row .ng-video-teaser__label {
        display: block;
        flex: 1 1 auto;
        color: var(--ng-vt-text);
        font-size: 16px;
        line-height: 1.3;
    }

    /* Значок — справа в строке, в рамке как у иконок списка (.vzh-about__icon) */
    .ng-video-teaser--row .ng-video-teaser__icon {
        position: static;
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        border: 1.5px solid var(--ng-vt-accent);
        box-shadow: none;
    }

    .ng-video-teaser--row:hover .ng-video-teaser__icon {
        transform: none;
    }

    .ng-video-teaser--row:focus-visible {
        border-radius: var(--ng-vt-radius);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ng-video-teaser__media::after,
    .ng-video-teaser__icon {
        transition: none;
    }
}