/* ==========================================================================
   Страница эхосинускопа Stern Sinuscope (sinuscope.html)
   Десктоп не трогаем — только адаптация под мобильный.
   ========================================================================== */

/* ---- Фото у переключателя модификаций (.painting-variants-layout /
   .variant-image-right) ---- Новая разметка (добавлена по просьбе —
   "модификации также с фоточками, и на пк тоже аналогично ЛОР-комбайну"):
   тот же визуальный компонент, что уже есть на страницах Otoview Pro и
   Кольпоскопа (там стилизован их собственным инлайновым <style>) — здесь
   заводим базовые правила прямо в page-css, т.к. разметка для этой
   страницы новая, а не адаптация уже существующей десктопной вёрстки. */
.painting-variants-layout {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}
.variants-left {
    display: grid;
    grid-template-columns: repeat(2, minmax(200px, 260px));
    gap: 20px 30px;
}
.variant-image-right {
    width: 350px;
    flex: none;
}
.variant-image-right .variant-type {
    display: none;
}
.variant-image-right .variant-type img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

@media (max-width: 860px) {

    /* переключатель модификаций — фото над кнопками (тот же приём, что и
       на Otoview Pro/Кольпоскопе), .variants-left{grid-template-columns:1fr}
       уже общее правило в adaptive.css. */
    .painting-variants-layout {
        display: flex;
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 20px;
    }
    /* десктопный align-items:flex-start (нужен там для 2-колоночной
       раскладки) без сброса оставлял .variants-left по ширине своего
       контента — кнопки сидели слева, не на всю ширину/по центру. */
    .variants-left {
        width: 100%;
    }
    .variant-image-right {
        width: 100%;
    }

    /* ---- "Некоторые примеры результатов..." (.innovations-sinuscopepro) ----
       Тот же float-паттерн 390/350px, что и на других страницах — на этой
       странице реально используется только с одиночным .item (без
       .pull-right пары, в одном месте вообще пустой), но на мобильном
       фиксированная ширина 390px всё равно может вылезать за экран —
       сбрасываем на всякий случай. */
    .innovations-sinuscopepro .item {
        float: none;
        width: 100%;
        text-align: left;
    }

    /* ---- "Технические характеристики" / "Некоторые примеры..." заголовки
       (.block-sinuscopepro .item-title) ----
       48px — та же ситуация, что и с .block-title на других страницах,
       только тут другой класс (используется как заголовок раздела, а не
       просто текст). */
    .block-sinuscopepro .item-title {
        font-size: 24px;
        line-height: 1.35;
    }

    /* ---- ".table-sinus" (детальные ТТХ, colspan-заголовки секций) ----
       Общее сжатие/скролл теперь берётся из adaptive.css (.table-sinus
       добавлен туда в общий список рядом с .table-comparison — те же
       правила, один-в-один скопированный десктопный CSS под другим
       именем). Тут отдельно отключаем "прилипающую" первую колонку: у
       строк-заголовков секций ("Технические характеристики адаптера" и
       т.п.) стоит colspan="2" — с sticky первая колонка отъезжает и
       наезжает на объединённую ячейку при скролле, тот же случай, что и с
       рециркулятором. */
    .table-sinus td:first-child {
        position: static;
        box-shadow: none;
    }

    /* .table-photo-text теперь общее правило в adaptive.css — та же самая
       "фото стопкой + длинный текст в одну строку" таблица встретилась на
       странице кольпоскопа тоже. */

    /* ---- Галерейные таблицы "Примеры диагностики" (.table-gallery) ----
       Тот же случай, что "Фото прибора" на странице Otoview Pro (см.
       stern-otoview-pro-page) — колонки это независимые фото+подпись
       пары, а не построчное сравнение. Здесь усложнение: в таблице ДВЕ
       пары строк подряд — сначала 3 колонки (3 фото + 3 подписи), потом
       ещё 2 колонки (2 фото + 2 подписи) в следующих 2 строках. Тот же
       приём: <tbody> — грид в 1 колонку, <tr> — display:contents, и вручную
       расставляем grid-row так, чтобы каждое фото шло сразу перед своей
       подписью, независимо от того, в какой "группе строк" пара
       находится. */
    .table-gallery,
    .table-gallery tbody {
        display: block;
        width: 100% !important;
    }
    .table-gallery tbody {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 6px 0 !important;
    }
    .table-gallery tr {
        display: contents !important;
    }
    /* первая пара строк — 3 колонки */
    .table-gallery tr:nth-child(1) td:nth-child(1) { grid-row: 1 !important; }
    .table-gallery tr:nth-child(2) td:nth-child(1) { grid-row: 2 !important; }
    .table-gallery tr:nth-child(1) td:nth-child(2) { grid-row: 3 !important; }
    .table-gallery tr:nth-child(2) td:nth-child(2) { grid-row: 4 !important; }
    .table-gallery tr:nth-child(1) td:nth-child(3) { grid-row: 5 !important; }
    .table-gallery tr:nth-child(2) td:nth-child(3) { grid-row: 6 !important; }
    /* вторая пара строк — 2 колонки */
    .table-gallery tr:nth-child(3) td:nth-child(1) { grid-row: 7 !important; }
    .table-gallery tr:nth-child(4) td:nth-child(1) { grid-row: 8 !important; }
    .table-gallery tr:nth-child(3) td:nth-child(2) { grid-row: 9 !important; }
    .table-gallery tr:nth-child(4) td:nth-child(2) { grid-row: 10 !important; }
    .table-gallery td {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 auto !important;
        text-align: center !important;
        position: static !important;
        box-shadow: none !important;
        background: transparent !important;
        padding: 4px 0 !important;
        font-size: 15px !important;
    }
    .table-gallery tr:nth-child(2n) td {
        padding-bottom: 26px !important;
    }
    .table-gallery img {
        display: block !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
    }
}