/* ==========================================================================
   CKEditor 4 (image2) — Стили для изображений и подписей в статьях
   ========================================================================== */

/* Контейнер картинки и подписи (по умолчанию: на всю ширину контента) */
figure.image {
    width: 100% !important;
    max-width: 100% !important;
    margin: 1.75rem auto;
    display: block;
    clear: both;
}

/* Сама картинка внутри контейнера */
figure.image img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
    border-radius: 4px; /* Опционально: скругление углов */
}

/* Подпись под картинкой (мелким серым курсивом по центру) */
figure.image figcaption {
    font-size: 0.875rem;
    line-height: 1.4;
    color: #6c757d;
    font-style: italic;
    text-align: center;
    margin-top: 0.5rem;
    padding: 0 0.5rem;
}

/* --------------------------------------------------------------------------
   Варианты выравнивания (служебные классы CKEditor)
   -------------------------------------------------------------------------- */

/* 1. Обтекание СЛЕВА */
figure.image.cke_image_float_left {
    float: left;
    width: auto !important;
    max-width: 50% !important;
    margin: 0.5rem 1.5rem 1rem 0;
    clear: none;
}

/* 2. Обтекание СПРАВА */
figure.image.cke_image_float_right {
    float: right;
    width: auto !important;
    max-width: 50% !important;
    margin: 0.5rem 0 1rem 1.5rem;
    clear: none;
}

/* 3. ПО ЦЕНТРУ с ограничением ширины */
figure.image.cke_image_align_center {
    float: none;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

figure.image.cke_image_align_center img {
    max-width: 800px !important; /* Ограничение, чтобы картинка не раздувалась слишком сильно */
}

/* --------------------------------------------------------------------------
   Адаптивность под мобильные устройства (до 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* На смартфонах отменяем обтекание по бокам, чтобы текст не сжимался в узкую полоску */
    figure.image.cke_image_float_left,
    figure.image.cke_image_float_right {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 1.25rem auto !important;
    }
}