/* Complete CSS for blog posts - заменяет home_posts.css с WordPress */

.blog_posts {
    width: 100% !important;
    display: -webkit-box !important;
    display: -moz-box !important;
    display: -ms-flexbox !important;
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-flex-wrap: wrap !important;
    -moz-flex-wrap: wrap !important;
    -ms-flex-wrap: wrap !important;
    -o-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    font-size: 14px !important;
    float: none !important;
    clear: both !important;
    padding: 2em 0 4em;
}

.blog_posts .blog_post_width6 {
    width: 50% !important;
}

.blog_posts .blog_post_width4 {
    width: 33.33333333333333% !important;
}

.blog_posts .blog_post_item {
    padding: 10px !important;
    box-sizing: border-box !important;
}

.blog_posts .blog_post_item .blog_post_item_img {
    max-height: 200px !important;
    overflow: hidden !important;
    position: relative !important;
}

.blog_posts .blog_post_item.inner .blog_post_item_img {
    max-height: 250px !important;
    height: 250px !important;
    overflow: hidden !important;
    position: relative !important;
}

.blog_posts .blog_post_item .blog_post_item_img img {
    width: 100% !important;
    height: auto !important;
    transform: scale(1.5);
}

.blog_posts .blog_post_item.inner {
    position: relative !important;
    overflow: hidden !important; /* обрезаем содержимое, выходящее за пределы */
}

/* Ссылка внутри inner должна быть относительным контейнером */
.blog_posts .blog_post_item.inner > a {
    position: relative !important;
    display: block !important;
    height: 250px !important; /* фиксируем высоту = высоте изображения */
    overflow: hidden !important; /* обрезаем всё, что выходит за пределы */
}

/* Wrapper для inner items - КРИТИЧЕСКИ ВАЖНО */
.blog_posts .blog_post_item.inner .blog_post_item_wrapper {
    box-sizing: border-box !important;
    position: absolute !important;
    bottom: 0 !important; /* выравниваем по самому низу родителя (a) */
    left: 0 !important;
    right: 0 !important;
    color: #fff !important;
    padding: 20px 25px !important;
    font-size: 16px !important;
    /* Используем flexbox для выравнивания содержимого по низу */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important; /* прижимаем содержимое к низу */
    max-height: 100% !important; /* не выше родителя (a = 250px) */
    pointer-events: none !important; /* клики проходят сквозь wrapper к ссылке */
    z-index: 2 !important; /* wrapper поверх изображения */
}

/* Восстанавливаем клики на содержимом wrapper */
.blog_posts .blog_post_item.inner .blog_post_item_wrapper * {
    pointer-events: auto !important;
}

/* Wrapper для обычных items */
.blog_posts .blog_post_item .blog_post_item_wrapper {
    box-sizing: border-box !important;
    padding: 15px 0 0 !important;
    font-size: 16px !important;
    color: #000 !important;
    overflow: hidden;
}

.blog_posts .blog_post_item .blog_post_item_wrapper span {
    font-size: .85em !important;
}

/* Заголовок h6 для inner items - видимый по умолчанию */
.blog_posts .blog_post_item.inner .blog_post_item_wrapper h6 {
    font-size: 1.5em !important;
    padding: 0 !important;
    margin: 0 0 .3em 0 !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9) !important;
    color: #fff !important;
    line-height: 1.2em !important;
    max-height: none !important;
    overflow: hidden !important; /* скрываем переполнение */
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important; /* ограничение до 3 строк */
    -webkit-box-orient: vertical !important;
    word-break: break-word !important;
    flex-shrink: 0 !important; /* не сжимаем заголовок */
}

/* Заголовок h6 для обычных items */
.blog_posts .blog_post_item .blog_post_item_wrapper h6 {
    font-size: 1.5em !important;
    padding: 0 !important;
    margin: .6em 0 !important;
    text-shadow: none !important;
    color: #000 !important;
}

/* Параграф (превью) - скрыт по умолчанию через JS */
.blog_posts .blog_post_item .blog_post_item_wrapper p {
    font-size: 0.95em !important;
    margin-top: 0.3em !important;
    line-height: 1.4em !important;
    transition: all .3s !important;
    flex-shrink: 0 !important; /* не сжимаем превью */
    overflow: hidden !important;
}

.blog_posts .blog_post_item .blog_post_item_wrapper {
    color: #000 !important;
}

.blog_posts .blog_post_item a {
    text-decoration: none !important;
}

/* Затемнение изображения - умеренное по умолчанию */
.blog_posts .blog_post_item .blog_post_item_img:after {
    display: block !important;
    content: '' !important;
    position: absolute !important;
    background: rgba(0, 0, 0, .5) !important; /* усиленное затемнение для читабельности */
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    transition: all .3s;
}

/* При hover - еще больше затемняем для inner */
.blog_posts .blog_post_item.inner a:hover .blog_post_item_img:after {
    background: rgba(0, 0, 0, .75) !important;
    transition: all .3s;
}

/* При hover для обычных items */
.blog_posts .blog_post_item a:hover .blog_post_item_img:after {
    background: rgba(0, 0, 0, .2) !important;
    transition: all .3s;
}

/* При hover показываем превью с анимацией */
.blog_posts .blog_post_item a:hover .blog_post_item_wrapper p {
    margin-bottom: 0 !important;
    transition: all .3s !important;
}