/* ============================================================
   responsive-fixes.css — AlcogolizmaNet.ru
   Точечные адаптивные правки. Подключается ПОСЛЕ style.css
   (см. chunk "header"), поэтому правила здесь имеют приоритет
   без !important и без риска поломать остальную верстку.
   ============================================================ */

/* ---------------------------------------------------------------
   1) Сайдбар (АлкоБарьер, Популярные статьи, тизер калькулятора)
   сейчас полностью скрывается на планшетах и телефонах (≤1023px) —
   причина — обычный display:none в оригинальном style.css.
   Вместо скрытия — переносим блок под основной контент.
   ----------------------------------------------------------------*/
@media screen and (max-width: 1023px) {
    .sidebar {
        display: block;
        float: none;
        width: 100%;
        margin-top: 30px;
        padding-top: 30px;
        border-top: 1px solid #e6e6e6;
        box-sizing: border-box;
    }

    /* картинки в сайдбаре были рассчитаны на фикс. колонку 300px —
       на полной ширине должны тянуться, а не оставаться крошечными
       или вылезать за край */
    .sidebar img {
        max-width: 100%;
        height: auto;
    }

    /* на планшетах сайдбар можно красиво разложить в 2 колонки —
       на телефоне (см. блок ниже) вернём обратно в одну */
    .sidebar .section {
        margin-bottom: 25px;
    }
}

@media screen and (max-width: 480px) {
    .sidebar {
        margin-top: 20px;
        padding-top: 20px;
    }
}

/* ---------------------------------------------------------------
   2) Мелкие штрихи на самых узких экранах (запас прочности —
   часть и так уже исправлена в style.css на 480px, здесь только
   то, что не было учтено)
   ----------------------------------------------------------------*/
@media screen and (max-width: 360px) {
    .posts__item-img,
    .posts__item-img img {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ---------------------------------------------------------------
   3) Безопасная заглушка-фолбэк "Фото готовится" — на случай если
   когда-нибудь у новой статьи забудут поставить картинку.
   Сейчас на сайте такого почти не встречается, но правило ничего
   не стоит держать на будущее: как только реальное фото подставят,
   onerror просто не сработает, и это правило не понадобится.
   ----------------------------------------------------------------*/
img.section-posts__item-img[src=""],
img.posts__item-img[src=""],
img.related__item-img[src=""] {
    background: #f0edfc url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgMzYwIj48cmVjdCB3aWR0aD0iNjQwIiBoZWlnaHQ9IjM2MCIgZmlsbD0iI2YwZWRmYyIvPjx0ZXh0IHg9IjMyMCIgeT0iMTg1IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LWZhbWlseT0iUm9ib3RvLCBBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIyOCIgZm9udC13ZWlnaHQ9IjcwMCIgZmlsbD0iIzY5NjliMyI+0KTQntCi0J4g0JPQntCi0J7QktCY0KLQodCvPC90ZXh0Pjwvc3ZnPg==") center / cover no-repeat;
}