/* ==========================================================================
   Общий файл мобильной адаптации для мелких страниц-аксессуаров:
   double_c_usb.html, battery_ruk.html, doc_station.html, kinesio_tape.html,
   fotoadaper_stern_dlya_dermatoskopa_na_iphone.html,
   chehol_na_stetoskop_infant_zhiraf.html.
   Страницы короткие и структурно однотипные (слайдер + блок "Достоинства"
   с float-парой + таблица характеристик) — один файл с секциями по
   странице вместо шести почти пустых файлов.
   Десктоп не трогаем — только адаптация под мобильный.
   ========================================================================== */

/* chehol_na_stetoskop_infant_zhiraf.html: новое фото в шапку, которого на
   десктопе нет и не должно быть — по умолчанию скрыто, показывается только
   в мобильном media-запросе ниже. */
.zhiraf-hero-mobile {
    display: none;
}

@media (max-width: 860px) {

    /* ---- double_c_usb.html: "Достоинства Stern Double-C USB" (.doubleusbc) ----
       Тот же float-паттерн 390/350px + своё декоративное фоновое фото
       (double_c_usb2.jpg, background-size:40%). */
    .doubleusbc .item,
    .doubleusbc .item.pull-right {
        float: none;
        width: 100%;
        text-align: left;
    }
    .doubleusbc {
        background-image: none;
    }

    /* ---- battery_ruk.html: "Особенности" (.akkumulyator_stern_ruk) ----
       Тот же float-паттерн + своё декоративное фото (akkumulyator_stern_ruk_osb.png). */
    .akkumulyator_stern_ruk .item,
    .akkumulyator_stern_ruk .item.pull-right {
        float: none;
        width: 100%;
        text-align: left;
    }
    .akkumulyator_stern_ruk {
        background-image: none;
    }

    /* ---- kinesio_tape.html: "Инновации" (.kinesiotape) ----
       Тот же float-паттерн + своё декоративное фото (kinesiotape_stern.jpg). */
    .kinesiotape .item,
    .kinesiotape .item.pull-right {
        float: none;
        width: 100%;
        text-align: left;
    }
    .kinesiotape {
        background-image: none;
    }

    /* ---- kinesio_tape.html: "Выбери свой Kinesio tape" (.table-gallery-6col) ----
       Таблица-галерея 6 колонок × 2 группы строк (фото + подпись цвета,
       затем ещё фото + подпись) — тот же случай, что "Примеры диагностики"
       на странице синускопа (см. stern-sinuscope-page), только больше
       колонок. Каждое фото должно идти сразу перед своей подписью.
       По просьбе — не в один столбец, а по 2 цвета в ряд: сетка 2 колонки,
       у каждой пары "фото+подпись" явно расставлены grid-column и
       grid-row так, чтобы цвета 1-2 были в одном визуальном ряду, 3-4 —
       в следующем и т.д. (12 цветов = 6 визуальных рядов × 2 колонки). */
    .table-gallery-6col,
    .table-gallery-6col tbody {
        display: block;
        width: 100% !important;
    }
    .table-gallery-6col tbody {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 4px 10px !important;
    }
    .table-gallery-6col tr {
        display: contents !important;
    }
    /* группа 1 (цвета 1-6): строка 1 — фото, строка 2 — подписи */
    .table-gallery-6col tr:nth-child(1) td:nth-child(1) { grid-row: 1 !important; grid-column: 1 !important; }
    .table-gallery-6col tr:nth-child(1) td:nth-child(2) { grid-row: 1 !important; grid-column: 2 !important; }
    .table-gallery-6col tr:nth-child(1) td:nth-child(3) { grid-row: 3 !important; grid-column: 1 !important; }
    .table-gallery-6col tr:nth-child(1) td:nth-child(4) { grid-row: 3 !important; grid-column: 2 !important; }
    .table-gallery-6col tr:nth-child(1) td:nth-child(5) { grid-row: 5 !important; grid-column: 1 !important; }
    .table-gallery-6col tr:nth-child(1) td:nth-child(6) { grid-row: 5 !important; grid-column: 2 !important; }
    .table-gallery-6col tr:nth-child(2) td:nth-child(1) { grid-row: 2 !important; grid-column: 1 !important; }
    .table-gallery-6col tr:nth-child(2) td:nth-child(2) { grid-row: 2 !important; grid-column: 2 !important; }
    .table-gallery-6col tr:nth-child(2) td:nth-child(3) { grid-row: 4 !important; grid-column: 1 !important; }
    .table-gallery-6col tr:nth-child(2) td:nth-child(4) { grid-row: 4 !important; grid-column: 2 !important; }
    .table-gallery-6col tr:nth-child(2) td:nth-child(5) { grid-row: 6 !important; grid-column: 1 !important; }
    .table-gallery-6col tr:nth-child(2) td:nth-child(6) { grid-row: 6 !important; grid-column: 2 !important; }
    /* группа 2 (цвета 7-12): строка 3 — фото, строка 4 — подписи */
    .table-gallery-6col tr:nth-child(3) td:nth-child(1) { grid-row: 7 !important; grid-column: 1 !important; }
    .table-gallery-6col tr:nth-child(3) td:nth-child(2) { grid-row: 7 !important; grid-column: 2 !important; }
    .table-gallery-6col tr:nth-child(3) td:nth-child(3) { grid-row: 9 !important; grid-column: 1 !important; }
    .table-gallery-6col tr:nth-child(3) td:nth-child(4) { grid-row: 9 !important; grid-column: 2 !important; }
    .table-gallery-6col tr:nth-child(3) td:nth-child(5) { grid-row: 11 !important; grid-column: 1 !important; }
    .table-gallery-6col tr:nth-child(3) td:nth-child(6) { grid-row: 11 !important; grid-column: 2 !important; }
    .table-gallery-6col tr:nth-child(4) td:nth-child(1) { grid-row: 8 !important; grid-column: 1 !important; }
    .table-gallery-6col tr:nth-child(4) td:nth-child(2) { grid-row: 8 !important; grid-column: 2 !important; }
    .table-gallery-6col tr:nth-child(4) td:nth-child(3) { grid-row: 10 !important; grid-column: 1 !important; }
    .table-gallery-6col tr:nth-child(4) td:nth-child(4) { grid-row: 10 !important; grid-column: 2 !important; }
    .table-gallery-6col tr:nth-child(4) td:nth-child(5) { grid-row: 12 !important; grid-column: 1 !important; }
    .table-gallery-6col tr:nth-child(4) td:nth-child(6) { grid-row: 12 !important; grid-column: 2 !important; }
    .table-gallery-6col 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: 14px !important;
    }
    .table-gallery-6col tr:nth-child(2n) td {
        padding-bottom: 22px !important;
    }
    .table-gallery-6col img {
        display: block !important;
        max-width: 60% !important;
        margin: 0 auto !important;
    }

    /* ---- chehol_na_stetoskop_infant_zhiraf.html ---- */

    /* "Чехол для стетоскопа Жираф" (.block-zhiraf-1 .block-zhiraf-innovations) —
       текст поверх декоративного фото фиксированной высоты (550px), тот же
       принцип, что и .block-otoskop-stern-otoview-innovations на странице
       Otoview (см. stern-otoview-page) — в styles.css задан с префиксом
       родителя (специфичность выше голого класса), держим тот же префикс
       в переопределении, иначе тихо проиграет. */
    .block-zhiraf-1 .block-zhiraf-innovations {
        background-image: none !important;
        height: auto !important;
    }
    .block-zhiraf-1 .block-zhiraf-innovations .item {
        width: 100% !important;
        margin-top: 0 !important;
    }

    /* Фото в шапке (.zhiraf-hero-mobile) — на этой странице вообще не было
       слайдера/фото сверху, только заголовок и текст. По просьбе — фото
       на мобилке в шапку; на десктопе элемента как не было, так и нет
       (display:none по умолчанию вне media-запроса, ниже). */
    .zhiraf-hero-mobile {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 8px;
        margin: 16px 0 8px;
    }

    /* "Фото прибора в работе" (.zhiraf-photo-row) — 3 фото inline с
       width:33% каждое, съезжали вкривь (2+1) и вылезали за край экрана.
       По просьбе — друг под другом (одна колонка), а не в ряд. */
    .zhiraf-photo-row {
        display: block !important;
    }
    .zhiraf-photo-row img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto;
        display: block;
        border-radius: 6px;
        margin: 0 0 10px !important;
    }

    /* "Особенности чехла для стетоскопов Littmann Infant" (.cheholzhiraf) —
       тот же float-паттерн + декоративное фото (zhiraf_so_stetoskopom_vnutri_1.png,
       фиксированные 550px/300px — тоже убираем, не только background-size:%). */
    .cheholzhiraf .item,
    .cheholzhiraf .item.pull-right {
        float: none;
        width: 100%;
        text-align: left;
        margin-top: 0;
    }
    .cheholzhiraf {
        background-image: none;
        height: auto;
    }

    /* "Характеристики чехла..." (.block-characters-zhiraf) — НЕ тот же
       паттерн, что .block-characters (тут тёмный текст на едва заметном
       узоре, не белый на фото) — фон не трогаем, только чиним фиксированную
       ширину пунктов списка (330px, inline-block) и чекмарк-иконку той же
       "вылезает за нижний край" историей, что и везде. */
    .block-characters-zhiraf ul li {
        display: block;
        width: 100%;
        min-height: 46px;
        margin: 0 0 22px;
    }

    /* .zhiraf-sushka — декоративная картинка сушки фиксированным
       background-size:600px (в пикселях, не %) — на узком экране обрезает
       половину картинки по бокам. */
    .zhiraf-sushka {
        background-size: 80%;
    }
}