/*
 * ForTraders.org - Two-Column Image Blocks
 * Стили для двухколоночных блоков с изображениями в статьях
 * Version: 1.0
 */

/* =============================================================================
   ДВУХКОЛОНОЧНЫЕ БЛОКИ С КАРТИНКАМИ
   ============================================================================= */

/* Вариант 1: Картинка справа, текст слева (серый фон) */
.ft-image-block-right {
    display: flex;
    align-items: center;
    gap: 40px;
    margin: 40px 0;
    padding: 30px;
    background: #f9f9f9;
    border-radius: 12px;
    border-left: 4px solid #4f46e5;
    clear: both;
}

.ft-image-block-right .ft-text-content {
    flex: 1;
}

.ft-image-block-right .ft-image-content {
    flex: 0 0 45%;
    max-width: 500px;
}

.ft-image-block-right .ft-image-content img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    margin: 0 !important;
    display: block;
}

/* Вариант 2: Картинка слева, текст справа (голубой фон) */
.ft-image-block-left {
    display: flex;
    align-items: center;
    gap: 40px;
    margin: 40px 0;
    padding: 30px;
    background: #f0f9ff;
    border-radius: 12px;
    border-right: 4px solid #0ea5e9;
    clear: both;
}

.ft-image-block-left .ft-image-content {
    flex: 0 0 45%;
    max-width: 500px;
}

.ft-image-block-left .ft-text-content {
    flex: 1;
}

.ft-image-block-left .ft-image-content img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    margin: 0 !important;
    display: block;
}

/* Вариант 3: Компактный с градиентом (картинка меньше) */
.ft-image-block-compact {
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 40px 0;
    padding: 25px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    color: #fff;
    clear: both;
}

.ft-image-block-compact .ft-image-content {
    flex: 0 0 35%;
    max-width: 350px;
}

.ft-image-block-compact .ft-text-content {
    flex: 1;
}

.ft-image-block-compact .ft-image-content img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    margin: 0 !important;
    display: block;
}

.ft-image-block-compact h3,
.ft-image-block-compact p {
    color: #fff;
}

/* Общие стили для текстового контента */
.ft-text-content h3 {
    font-size: 24px;
    margin-bottom: 15px;
    color: inherit;
    font-weight: 600;
}

.ft-text-content p {
    margin-bottom: 15px;
    line-height: 1.8;
}

.ft-text-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ft-text-content ul li {
    padding-left: 25px;
    position: relative;
    margin-bottom: 10px;
}

.ft-text-content ul li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #10b981;
    font-weight: bold;
}

.ft-image-block-compact .ft-text-content ul li:before {
    color: #fbbf24;
}

/* Интеграция с дизайном темы */
.designv2-article-content .ft-image-block-right,
.designv2-article-content .ft-image-block-left,
.designv2-article-content .ft-image-block-compact {
    font-size: 1rem;
}

.main-post-content .ft-image-block-right,
.main-post-content .ft-image-block-left,
.main-post-content .ft-image-block-compact {
    font-size: 16px;
}

/* Отмена float для картинок внутри блоков */
.ft-image-block-right img,
.ft-image-block-left img,
.ft-image-block-compact img {
    float: none !important;
}

/* =============================================================================
   АДАПТИВНОСТЬ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ
   ============================================================================= */

@media (max-width: 768px) {
    .ft-image-block-right,
    .ft-image-block-left,
    .ft-image-block-compact {
        flex-direction: column;
        padding: 20px;
        gap: 20px;
    }

    .ft-image-block-left {
        flex-direction: column-reverse;
    }

    .ft-image-block-right .ft-image-content,
    .ft-image-block-left .ft-image-content,
    .ft-image-block-compact .ft-image-content {
        flex: 1;
        max-width: 100%;
    }

    .ft-text-content h3 {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .ft-image-block-right,
    .ft-image-block-left,
    .ft-image-block-compact {
        padding: 15px;
    }

    .ft-text-content h3 {
        font-size: 18px;
    }

    .ft-text-content p {
        font-size: 14px;
    }
}

/* =============================================================================
   АВТОМАТИЧЕСКИЕ СТИЛИ ДЛЯ КАРТИНОК С ALIGNNONE ВНУТРИ ТЕКСТА
   ============================================================================= */

/* Стили для картинок с alignnone - обтекание текстом справа */
.designv2-article-content p img.alignnone,
.main-post-content p img.alignnone {
    float: right;
    max-width: 40%;
    width: auto;
    height: auto;
    margin: 0 0 20px 30px !important;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: block;
}

/* Параграфы с картинками alignnone - используем display: contents чтобы убрать блочный контекст */
.designv2-article-content p:has(img.alignnone),
.main-post-content p:has(img.alignnone) {
    margin: 0;
    padding: 0;
    display: contents; /* Параграф "исчезает", картинка становится прямым потомком article */
}

/* Fallback для браузеров без display: contents */
@supports not (display: contents) {
    .designv2-article-content p:has(img.alignnone),
    .main-post-content p:has(img.alignnone) {
        display: block;
        margin: 20px 0;
        overflow: visible;
    }
}

/* Списки после параграфов с картинками - теперь они могут обтекать картинку */
.designv2-article-content p:has(img.alignnone) + ul,
.main-post-content p:has(img.alignnone) + ul {
    margin: 20px 0;
    padding-left: 25px;
    clear: none; /* Не очищаем float, чтобы обтекать картинку */
}

/* Очистка float только после списка, который идет после картинки */
.designv2-article-content p:has(img.alignnone) + ul + p,
.main-post-content p:has(img.alignnone) + ul + p {
    clear: both;
}

/* Fallback для браузеров без :has() - базовые стили */
.designv2-article-content p img.alignnone,
.main-post-content p img.alignnone {
    float: right;
    max-width: 45%;
    margin: 0 0 20px 30px !important;
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
    .designv2-article-content p img.alignnone,
    .main-post-content p img.alignnone {
        float: none !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 0 20px 0 !important;
        display: block;
    }
    
    /* На мобильных очищаем float для списков */
    .designv2-article-content p:has(img.alignnone) + ul,
    .main-post-content p:has(img.alignnone) + ul {
        clear: both;
    }
}

/* =============================================================================
   ИНСТРУКЦИЯ ПО ИСПОЛЬЗОВАНИЮ В РЕДАКТОРЕ
   ============================================================================= */

/* 
ПРИМЕР 1: Картинка справа (серый фон)

<div class="ft-image-block-right">
    <div class="ft-text-content">
        <h3>Заголовок блока</h3>
        <ul>
            <li>Пункт 1</li>
            <li>Пункт 2</li>
            <li>Пункт 3</li>
        </ul>
    </div>
    <div class="ft-image-content">
        <img src="URL" alt="Описание">
    </div>
</div>

ПРИМЕР 2: Картинка слева (голубой фон)

<div class="ft-image-block-left">
    <div class="ft-image-content">
        <img src="URL" alt="Описание">
    </div>
    <div class="ft-text-content">
        <h3>Заголовок блока</h3>
        <p>Текст описания...</p>
    </div>
</div>

ПРИМЕР 3: Компактный (градиент)

<div class="ft-image-block-compact">
    <div class="ft-image-content">
        <img src="URL" alt="Описание">
    </div>
    <div class="ft-text-content">
        <h3>Заголовок блока</h3>
        <ul>
            <li>Пункт 1</li>
            <li>Пункт 2</li>
        </ul>
    </div>
</div>
*/