/* ==========================================================================
   Статьи блога (blog.html → razrabotka_otoscan.html, razrabotka_derma.html,
   razrabotka_unilor.html, razrabotka_talmo.html, razrabotka_colpo.html).
   Страницы раньше вообще не имели мобильной адаптации — не было ни
   правильного viewport, ни подключения adaptive.css. Базовый respons
   (картинки, .features-stanok h1, .container) теперь берётся из adaptive.css
   само собой, тут только специфика этих страниц.
   Десктоп не трогаем — только адаптация под мобильный.
   ========================================================================== */

@media (max-width: 860px) {

    /* ---- razrabotka_otoscan.html, razrabotka_derma.html: .photo-grid ----
       Desktop: flex-wrap:nowrap, 2-5 фото в ряд, фиксированная высота 260px
       с object-fit:cover — на мобильном ряд из 3-5 фото сжимается до узких
       вертикальных полосок. Переносим в сетку 2 в ряд с меньшей высотой. */
    .photo-grid {
        flex-wrap: wrap !important;
    }
    .photo-grid .photo-item {
        flex: 1 1 calc(50% - 5px) !important;
        min-width: calc(50% - 5px) !important;
    }
    .photo-grid .sert-img-wrap {
        height: 140px !important;
    }
    .photo-caption {
        font-size: 11px !important;
    }
    .derma-note p {
        font-size: 15px !important;
        line-height: 22px !important;
    }

    /* ---- razrabotka_unilor.html, razrabotka_talmo.html, razrabotka_colpo.html ----
       Простые <img width="XXX"> без обёртки — max-width:100% из adaptive.css
       уже не даёт им вылезать за экран и переносит на новую строку, если
       несколько подряд. Добавляем только отступ между картинками, которые
       на мобильном встают друг под другом (на десктопе шли в ряд впритык
       через &nbsp;). */
    .features-stanok .container > div > img,
    .features-stanok .container > div > div > img {
        margin-bottom: 8px;
    }

    /* Вложенные .features-stanok (у каждой секции статьи — своя обёртка
       внутри общей) — десктопные padding:20px 0 удваиваются на стыке
       родитель/потомок. Сжимаем только вложенный уровень, общий класс
       .features-stanok на остальных страницах сайта не трогаем (там он не
       вложен сам в себя). */
    .features-stanok .features-stanok {
        padding: 12px 0;
    }
}