/* ==========================================================================
   Страница дерматоскопа Stern Derma Pro (stern_derma.html)
   Десктоп не трогаем ("на ПК всё ок") — только адаптация под мобильный.
   ========================================================================== */

/* h3 в видео-шапке раньше был шириной 600px через инлайновый style= —
   убрали инлайн (чтобы можно было переопределить на мобильном без
   !important), но десктопный вид сохраняем этим же правилом здесь. */
.promo-video-derma .video-top-text h3 {
    max-width: 600px;
}

@media (max-width: 860px) {

    /* ---- видео-шапка (.promo-video-derma) ----
       На этой странице вместо фото-слайдера — фоновое видео с текстом
       поверх (аналог .slider/.slide-content на других страницах, но под
       другими классами, так что общие правила adaptive.css тут не
       действуют). На десктопе высота блока завязана на ширину вьюпорта
       (min-height:calc(100vw*0.55)), текст лежит абсолютным слоем поверх
       видео — при мобильной ширине это даёт слишком узкую полосу для
       крупного заголовка. Переводим в обычный поток: текст сверху, видео
       обычным адаптивным блоком под ним (тот же приём для ВТОРОГО,
       "нижнего" ролика — у него тот же класс .promo-video-derma, поэтому
       правило чинит оба сразу). */
    .promo-video-derma {
        min-height: 0;
        height: auto;
        overflow: visible;
    }
    .promo-video-derma .video-top-text {
        position: static;
        margin: 0;
        padding: 20px 15px 15px;
        text-align: center;
    }
    .promo-video-derma video {
        position: static;
        display: block;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
        min-height: 0;
        transform: none;
    }
    .promo-video-derma .video-top-text h1 {
        font: 32px/1.3 'Roboto Light';
        margin: 0 0 12px;
    }
    .promo-video-derma .video-top-text h3 {
        max-width: 100%;
        font: 16px/24px 'Roboto Thin';
        margin: 0 0 15px;
    }

    /* ---- "Преимущества Stern Derma Pro" (.derta) ----
       Тот же float-паттерн 390/350px, что уже чинили на других страницах
       под другими классами (.innovations-lor-kombajn-stern, .derma-i) —
       в одну колонку на мобильном. Декоративное фоновое фото
       (stern_derta_pic1.jpg, background-size:60%) под мобильную ширину
       не подогнано — убираем. */
    .derta .item,
    .derta .item.pull-right {
        float: none;
        width: 100%;
        text-align: left;
    }
    .derta {
        background-image: none;
    }
}