/* ==========================================================================
   Страница проектора знаков Stern Opton (proektor_znakov_opton.html)
   Десктоп не трогаем — только адаптация под мобильный.
   ========================================================================== */

@media (max-width: 860px) {

    /* ---- Видео-шапка (.promo-video-opton) и второй ролик внизу
       (.finish-video-opton) ---- Тот же приём, что и на странице Derma Pro
       (см. stern-derma-page): десктоп завязан на min-height:calc(100vw*.55)
       и видео/текст абсолютным слоем — переводим в обычный поток, видео
       обычным адаптивным блоком, текст (если есть) сверху. У второго
       ролика текстового блока фактически нет (пустой .video-top-text),
       но сброс позиционирования видео нужен так же. */
    .promo-video-opton,
    .finish-video-opton {
        min-height: 0;
        height: auto;
        overflow: visible;
    }
    .promo-video-opton .video-top-text,
    .finish-video-opton .video-top-text {
        position: static;
        margin: 0;
        padding: 20px 15px 15px;
        text-align: center;
    }
    .promo-video-opton video,
    .finish-video-opton video {
        position: static;
        display: block;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
        min-height: 0;
        transform: none;
    }
    .promo-video-opton .video-top-text h1,
    .promo-video-opton .video-top-text h2 {
        font: 28px/1.3 'Roboto Light';
        margin: 0 0 12px;
    }
    .promo-video-opton .video-top-text h3 {
        max-width: 100%;
        font: 16px/24px 'Roboto Thin';
        margin: 0 0 15px;
    }

    /* ---- "Инновации Stern Opton" (.innovations) ----
       Тот же float-паттерн 390/350px + своё декоративное фоновое фото
       (monitor1.jpg, background-size:40%). */
    .innovations .item,
    .innovations .item.pull-right {
        float: none;
        width: 100%;
        text-align: left;
    }
    .innovations {
        background-image: none;
    }

    /* ---- "Размеры и весы" (.parameters-table) ----
       table-layout:fixed на 3 равные колонки — на мобильном первая
       (текстовая) колонка сжимается нечитаемо. Внутри .table-holder уже
       (см. HTML), просто даём колонкам сжиматься по контенту вместо
       принудительного деления на равные трети. */
    .block-innovations-2 .parameters-table {
        table-layout: auto;
        width: auto;
        min-width: 100%;
        font-size: 14px;
    }
    .block-innovations-2 .parameters-table tr td {
        padding: 10px 14px;
    }
}