/* ========================================
   ГАЗЕТНЫЙ МАКЕТ С КОЛОНКАМИ
   Адаптивный многоколоночный макет как в газетах
   ======================================== */

/* Основной контейнер статьи - БЕЗ columns, чтобы не сломать grid */
.article-content {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Газетный макет применяется только к текстовым секциям */
.article-content .article-section:not(:has(.projects-grid-section)) {
    column-count: 1;
    column-gap: 40px;
    column-rule: none;
    column-fill: balance;
    width: 100%;
    box-sizing: border-box;
}

/* Элементы, которые не должны разрываться между колонками */
.article-content .article-section:not(:has(.projects-grid-section)) h1,
.article-content .article-section:not(:has(.projects-grid-section)) h2,
.article-content .article-section:not(:has(.projects-grid-section)) h3,
.article-content .article-section:not(:has(.projects-grid-section)) h4,
.article-content .article-section:not(:has(.projects-grid-section)) .hero-image-section,
.article-content .article-section:not(:has(.projects-grid-section)) .article-image,
.article-content .article-section:not(:has(.projects-grid-section)) .featured-image-container,
.article-content .article-section:not(:has(.projects-grid-section)) .video-wrapper,
.article-content .article-section:not(:has(.projects-grid-section)) .data-points,
.article-content .article-section:not(:has(.projects-grid-section)) blockquote,
.article-content .article-section:not(:has(.projects-grid-section)) .traderslab-section,
.article-content .article-section:not(:has(.projects-grid-section)) .greeting-section {
    column-span: all;
    break-inside: avoid;
    page-break-inside: avoid;
}

/* Заголовки не разрываются */
.article-content .article-section:not(:has(.projects-grid-section)) h1,
.article-content .article-section:not(:has(.projects-grid-section)) h2,
.article-content .article-section:not(:has(.projects-grid-section)) h3,
.article-content .article-section:not(:has(.projects-grid-section)) h4 {
    break-after: avoid;
    page-break-after: avoid;
}

/* Параграфы и списки могут разрываться между колонками */
.article-content .article-section:not(:has(.projects-grid-section)) p,
.article-content .article-section:not(:has(.projects-grid-section)) ul,
.article-content .article-section:not(:has(.projects-grid-section)) ol {
    break-inside: avoid;
    page-break-inside: avoid;
    orphans: 3;
    widows: 3;
}

/* Элементы списка могут разрываться, но стараемся избегать */
.article-content .article-section:not(:has(.projects-grid-section)) li {
    break-inside: avoid;
    page-break-inside: avoid;
    orphans: 2;
    widows: 2;
}

/* Изображения не разрываются */
.article-content .article-section:not(:has(.projects-grid-section)) img,
.article-content .article-section:not(:has(.projects-grid-section)) video {
    break-inside: avoid;
    page-break-inside: avoid;
    max-width: 100%;
}

/* ========================================
   АДАПТИВНОСТЬ - ПЛАНШЕТЫ (768px - 1023px)
   ======================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    .article-content .article-section:not(:has(.projects-grid-section)) {
        column-count: 2;
        column-gap: 32px;
    }
}

/* ========================================
   АДАПТИВНОСТЬ - ДЕСКТОП (1024px - 1439px)
   ======================================== */
@media (min-width: 1024px) and (max-width: 1439px) {
    .article-content .article-section:not(:has(.projects-grid-section)) {
        column-count: 2;
        column-gap: 40px;
    }
}

/* ========================================
   АДАПТИВНОСТЬ - БОЛЬШИЕ ЭКРАНЫ (1440px+)
   ======================================== */
@media (min-width: 1440px) {
    .article-content .article-section:not(:has(.projects-grid-section)) {
        column-count: 3;
        column-gap: 48px;
    }
}

/* ========================================
   ОЧЕНЬ БОЛЬШИЕ ЭКРАНЫ (1920px+)
   ======================================== */
@media (min-width: 1920px) {
    .article-content .article-section:not(:has(.projects-grid-section)) {
        column-count: 3;
        column-gap: 56px;
    }
}

/* ========================================
   МОБИЛЬНЫЕ УСТРОЙСТВА (до 767px)
   ======================================== */
@media (max-width: 767px) {
    .article-content .article-section:not(:has(.projects-grid-section)) {
        column-count: 1;
        column-gap: 0;
    }
}

/* ========================================
   ИСКЛЮЧЕНИЯ - ЭЛЕМЕНТЫ ВСЕГДА В ОДНУ КОЛОНКУ
   ======================================== */

/* Секции проектов НЕ попадают под columns - они используют grid */
.projects-grid-section {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Сетка проектов работает нормально */
.projects-grid {
    width: 100%;
}

/* Блоки с данными всегда в одну колонку */
.article-content .article-section:not(:has(.projects-grid-section)) .data-points {
    column-span: all !important;
}

.article-content .article-section:not(:has(.projects-grid-section)) .data-point {
    break-inside: avoid;
    page-break-inside: avoid;
}

/* Цитаты всегда в одну колонку */
.article-content .article-section:not(:has(.projects-grid-section)) blockquote {
    column-span: all !important;
}

/* Изображения и видео всегда в одну колонку */
.article-content .article-section:not(:has(.projects-grid-section)) .hero-image-section,
.article-content .article-section:not(:has(.projects-grid-section)) .article-image,
.article-content .article-section:not(:has(.projects-grid-section)) .featured-image-container,
.article-content .article-section:not(:has(.projects-grid-section)) .video-wrapper,
.article-content .article-section:not(:has(.projects-grid-section)) .traderslab-section,
.article-content .article-section:not(:has(.projects-grid-section)) .greeting-section {
    column-span: all !important;
    break-inside: avoid;
    page-break-inside: avoid;
}

/* ========================================
   УЛУЧШЕНИЕ ЧИТАЕМОСТИ
   ======================================== */

/* Минимальное количество строк в начале/конце колонки */
.article-content .article-section:not(:has(.projects-grid-section)) {
    orphans: 3;
    widows: 3;
}