/*
 * RASPILIM SEO STAGE (2026-07-07): responsive fix для блог-статей raspilim.com
 * Классы .article-content / .article-banner / .article-image / .article-lead
 * встречаются в некоторых статьях (например /blog/sovety-pokupatelyam/pochemu-vygodnee-chem-marketplace/)
 * и не имели CSS правил — из-за чего <img width="1200"> ломала мобильную вёрстку.
 * Правила безопасны для остальных страниц (селекторы уникальны).
 */

/* ==== Universal responsive images в article-* контейнерах ==== */
.article-content img,
.article-banner img,
.article-image img,
.article-lead img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 12px;
}

/* ==== Figure blocks ==== */
.article-banner,
.article-image {
    margin: 28px auto;
    max-width: 100%;
    text-align: center;
    display: block;
}

.article-banner figcaption,
.article-image figcaption {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: #6b7684;
    font-style: italic;
    text-align: center;
    padding: 0 12px;
}

/* ==== Article content wrapper ==== */
.article-content {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.article-content p {
    font-size: 16px;
    line-height: 1.75;
    color: #2c3540;
    margin: 0 0 18px;
}

.article-content h2 {
    font-size: 24px;
    font-weight: 800;
    color: #0d2137;
    line-height: 1.3;
    margin: 40px 0 18px;
    letter-spacing: -0.01em;
}

.article-content h3 {
    font-size: 20px;
    font-weight: 700;
    color: #0d2137;
    line-height: 1.35;
    margin: 32px 0 14px;
}

.article-content ul,
.article-content ol {
    margin: 0 0 18px;
    padding-left: 24px;
}

.article-content li {
    line-height: 1.7;
    margin-bottom: 8px;
    color: #2c3540;
}

.article-content a {
    color: #009ba6;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 155, 166, 0.35);
    transition: color .2s, border-color .2s;
}

.article-content a:hover {
    color: #007a83;
    border-bottom-color: currentColor;
}

/* ==== Article lead (вступительный абзац) ==== */
.article-lead {
    font-size: 18px;
    line-height: 1.7;
    color: #2c3540;
    margin: 0 0 28px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #e6fbfb 0%, #d4f4f6 100%);
    border-left: 4px solid #00c8d6;
    border-radius: 4px 12px 12px 4px;
}

/* ==== Sidebar «Товары» — mobile stack ==== */
@media (max-width: 991px) {
    .ordered-block.detail_content_wrapper.side_image_N {
        display: block !important;
    }
    .ordered-block.detail_content_wrapper .inner_wrapper_text {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
    }
    .ordered-block.detail_content_wrapper .ordered-block.goods {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 32px !important;
        padding-top: 24px;
        border-top: 1px solid #e3e8ee;
    }
}

/* ==== Мобильные корректировки картинок и типографики ==== */
@media (max-width: 640px) {
    .article-content h2 {
        font-size: 21px;
        margin: 28px 0 14px;
    }
    .article-content h3 {
        font-size: 18px;
        margin: 22px 0 10px;
    }
    .article-content p,
    .article-content li {
        font-size: 15px;
    }
    .article-lead {
        font-size: 16px;
        padding: 16px 18px;
        margin: 0 0 22px;
    }
    .article-banner,
    .article-image {
        margin: 20px auto;
    }
    .article-banner figcaption,
    .article-image figcaption {
        font-size: 12px;
    }
}

/* ==== Совсем маленькие экраны ==== */
@media (max-width: 400px) {
    .article-content h2 {
        font-size: 19px;
    }
    .article-content h3 {
        font-size: 17px;
    }
}