/* ==========================================================================
   1. ГЛАВНАЯ СТРАНИЦА: Модуль в позиции MAIN-TOP (Свежая статья)
   ========================================================================== */

/* Убираем синюю полосу, фоны и тени у модуля */
.main-top div.mod-articlesnews {
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 30px !important;
    box-shadow: none !important;
    display: block !important;
    width: 100% !important;
}

/* Перестраиваем саму статью на Flexbox: картинка слева, текст справа */
.main-top div.mod-articlesnews article {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 20px !important;
    width: 100% !important;
}

/* Контейнер картинки: жестко фиксируем ширину и запрещаем сжиматься */
.main-top div.mod-articlesnews figure.newsflash-image {
    flex-shrink: 0 !important;
    width: 180px !important;
    margin: 0 !important; 
    display: block !important;
}

/* Делаем саму картинку послушной внутри Flex-контейнера */
.main-top div.mod-articlesnews figure.newsflash-image img {
    width: 100% !important;
    height: auto !important;
    border-radius: 6px !important;
    display: block !important;
}

/* Текстовый блок занимает всё оставшееся пространство */
.main-top div.mod-articlesnews .newsflash-text,
.main-top div.mod-articlesnews div[itemprop="articleBody"] {
    flex-grow: 1 !important;
    min-width: 0 !important;
}


/* ==========================================================================
   2. ГЛАВНАЯ СТРАНИЦА: Сетка модулей снизу ("Из последних материалов...")
   ========================================================================== */

/* Принудительная сетка в 2 колонки */
ul.mod-articlesnews-horizontal {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px !important;
    padding-left: 0 !important;
    list-style: none !important;
}

/* Карточка в линию: картинка слева, текст справа */
ul.mod-articlesnews-horizontal > li {
    display: flex !important;
    flex-direction: row !important; 
    align-items: flex-start !important;
    height: 100% !important;
    overflow: hidden !important;
}

/* Жестко фиксируем контейнер картинки слева */
ul.mod-articlesnews-horizontal figure.newsflash-image,
ul.mod-articlesnews-horizontal .newsflash-image {
    margin: 0 20px 0 0 !important; 
    flex-shrink: 0 !important;     
    width: 180px !important;       
    display: block !important;
}

/* Сама картинка */
ul.mod-articlesnews-horizontal figure.newsflash-image img {
    width: 100% !important;
    height: 140px !important;      
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 4px !important;
    cursor: pointer !important;
}

/* Заставляем текстовый блок занять всё оставшееся место справа */
ul.mod-articlesnews-horizontal h4,
ul.mod-articlesnews-horizontal p,
ul.mod-articlesnews-horizontal li > div {
    min-width: 0 !important;
}

/* Заголовок-ссылка в тёмно-зелёный */
ul.mod-articlesnews-horizontal h4.newsflash-title a,
ul.mod-articlesnews-horizontal h4.newsflash-title {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    font-size: 1.1rem !important;
    color: #1e5934 !important;
    text-decoration: none !important;
}
ul.mod-articlesnews-horizontal h4.newsflash-title a:hover {
    color: #2b7d4a !important;
}

/* Ограничение текста до 6 строк с многоточием */
ul.mod-articlesnews-horizontal p {
    display: -webkit-box !important;
    -webkit-line-clamp: 6 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-bottom: 0 !important;
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
}


/* ==========================================================================
   3. БЛОГ КАТЕГОРИЙ (Внутренние разделы сайта)
   ========================================================================== */

/* Глобальная сетка блога (подходит и для обычной, и для Masonry-плитки) */
.com-content-category-blog__items.blog-items,
.com-content-category-blog__items.masonry-2 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px !important;
}

/* Карточка статьи в блоке категорий */
.com-content-category-blog__items .blog-item {
    display: block !important; /* Отменяем flex, чтобы masonry-сетка не плыла */
    margin-bottom: 40px !important;
    position: relative !important;
}

/* Принудительно изолируем заголовок на всю ширину сверху */
.com-content-category-blog__items .blog-item h2 {
    display: block !important;
    width: 100% !important;
    margin-bottom: 15px !important;
    white-space: nowrap !important;     
    overflow: hidden !important;        
    text-overflow: ellipsis !important; 
    max-width: 100% !important;
}

/* Перекраска заголовков блогов в тёмно-зелёный */
.com-content-category-blog__items .blog-item h2 a {
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    color: #1e5934 !important;
    text-decoration: none !important;
}
.com-content-category-blog__items .blog-item h2 a:hover {
    color: #2b7d4a !important;
}

/* Контейнер вводного текста — делаем его обычным блоком */
.com-content-category-blog__items .blog-item .com-content-category-blog__item-introtext {
    display: block !important;
    width: 100% !important;
}

/* ВСЕЯДНЫЙ ФИКС ДЛЯ КАРТИНОК: Находим ЛЮБЫЕ картинки (и figure, и обычные теги img внутри ссылок) */
.com-content-category-blog__items .blog-item figure.left,
.com-content-category-blog__items .blog-item figure.item-image,
.com-content-category-blog__items .blog-item .com-content-category-blog__item-introtext a img,
.com-content-category-blog__items .blog-item .com-content-category-blog__item-introtext p img,
.com-content-category-blog__items .blog-item img[class*="blog-preview-img"] {
    position: static !important;
    float: left !important;             /* Прижимаем картинку влево */
    width: 130px !important;            /* Фиксированная ширина для всех превью */
    max-width: 130px !important;
    height: 100px !important;           /* Фиксированная высота для аккуратности */
    object-fit: cover !important;       /* Защита от растягивания пропорций */
    margin: 5px 20px 10px 0 !important; /* Идеальный отступ справа до текста */
    border-radius: 4px !important;
    display: block !important;
}

/* Если картинка была обёрнута в ссылку (как в Сварочных работах), заставляем саму ссылку тоже сжаться влево */
.com-content-category-blog__items .blog-item .com-content-category-blog__item-introtext > a:first-child {
    float: left !important;
    width: 130px !important;
    margin: 5px 20px 10px 0 !important;
}
/* Если сработал float на ссылке, обнуляем маргины у картинки внутри неё, чтобы не суммировались */
.com-content-category-blog__items .blog-item .com-content-category-blog__item-introtext > a:first-child img {
    margin: 0 !important;
}

/* Ограничение текста до 6 строк с многоточием + автообтекание картинки */
.com-content-category-blog__items .blog-item p,
.com-content-category-blog__items .blog-item .com-content-category-blog__item-introtext {
    display: -webkit-box !important;
    -webkit-line-clamp: 6 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important; 
    text-overflow: ellipsis !important;
    line-height: 1.4 !important;
    padding-right: 0 !important; /* Убираем старый кривой отступ */
}

/* Жесткий сброс обтекания в самом конце каждой карточки статьи */
.com-content-category-blog__items .blog-item::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}


/* ==========================================================================
   4. ПОЛНАЯ СТРАНИЦА МАТЕРИАЛА И МЕНЮ
   ========================================================================== */

/* Отступы картинок в самих статьях */
.com-content-article figure.left.item-image,
figure.left.item-image {
    display: block !important;
    float: left !important;
    margin: 5px 25px 15px 0 !important;
}


/* ==========================================================================
   5. СМЕНА ГЛОБАЛЬНЫХ ЦВЕТОВ (Перекраска в тёмно-зелёный)
   ========================================================================== */

:root {
    --link-color: #1e5934 !important; 
    --link-color-hover: #2b7d4a !important; 
}

h2 a, h4 a, .page-header a, .newsflash-title a {
    color: #1e5934 !important;
    text-decoration: none !important;
}

h2 a:hover, h4 a:hover, .page-header a:hover, .newsflash-title a:hover {
    color: #2b7d4a !important;
}

.mod-menu a, .vertical img + a {
    color: #1e5934 !important;
}
/* Находим контейнер картинки в блоге и заставляем его аккуратно прижаться влево */
.com-content-category-blog__items .blog-item figure.item-image,
.com-content-category-blog__items .blog-item figure.left {
    position: static !important;
    float: left !important;            /* Двигаем всю конструкцию влево */
    width: 150px !important;           /* Задаем фиксированную ширину */
    max-width: 150px !important;
    margin: 5px 20px 10px 0 !important;/* Идеальный зазор в 20px справа до текста */
    display: block !important;
}

/* Нацеливаемся на саму картинку внутри этого контейнера */
.com-content-category-blog__items .blog-item figure.item-image img,
.com-content-category-blog__items .blog-item img[class*="blog-preview-img"] {
    width: 100% !important;            /* Картинка послушно займет свои 150px */
    max-width: 100% !important;
    height: 110px !important;          /* Выравниваем высоту как у рации ниже */
    object-fit: cover !important;      /* Мягко подрезаем края без искажения пропорций */
    border-radius: 4px !important;     /* Легкое скругление углов */
}

/* Безопасная изоляция вводного текста, чтобы он не затекал под картинку */
.com-content-category-blog__items .blog-item .com-content-category-blog__item-introtext,
.com-content-category-blog__items .blog-item p {
    overflow: hidden !important;       /* Создает чистый вертикальный блок справа */
}