/* Стили для страницы статьи - скопированы из темы moskvichmag2023 */

/* Контейнеры статей - z-index ниже хедера */
.article,
.article--single,
section.article--single,
.site-main--autoloaded,
[data-autoloaded="true"] {
    position: relative;
    z-index: 1 !important; /* z-index ниже хедера (z-index: 9999), но выше брендированного фона (z-index: 0) */
}

/* Все контейнеры внутри AJAX загруженного контента - только z-index, не меняем position */
.site-main--autoloaded > *,
[data-autoloaded="true"] > *,
.article--single > * {
    z-index: 1 !important; /* Гарантируем, что все дочерние элементы не перекрывают хедер */
}

/* Все элементы с position (relative, absolute, fixed, sticky) внутри AJAX контента - ограничиваем z-index */
.site-main--autoloaded [style*="position"],
.site-main--autoloaded [style*="position"],
[data-autoloaded="true"] [style*="position"],
.site-main--autoloaded .sticky,
[data-autoloaded="true"] .sticky,
.site-main--autoloaded [class*="sticky"],
[data-autoloaded="true"] [class*="sticky"] {
    z-index: 1 !important;
}

/* Элементы с position: fixed или sticky внутри AJAX контента - ограничиваем z-index */
.site-main--autoloaded [style*="position: fixed"],
.site-main--autoloaded [style*="position:fixed"],
[data-autoloaded="true"] [style*="position: fixed"],
[data-autoloaded="true"] [style*="position:fixed"] {
    z-index: 1 !important;
}

/* Safari: контент и баннер сразу на месте, без «разъезда» после загрузки — задаём ширину с первого кадра */
@media (min-width: 1151px) {
    .site-main--autoloaded,
    [data-autoloaded="true"] {
        width: 100%;
        max-width: 1140px;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
        display: block;
    }
    .site-main--autoloaded .container,
    [data-autoloaded="true"] .container {
        width: 100%;
        max-width: 1140px;
        box-sizing: border-box;
    }
    .site-main--autoloaded .article__body,
    [data-autoloaded="true"] .article__body {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}

@media all and (min-width: 768px) {
    .article {
        margin: 0;
    }
}

/* ==========================================================================
   ARTICLE TOP / Картинка слева от заголовка (альтернативная верстка)
   ========================================================================== */

/**
 * article__top - контейнер для картинки слева и заголовка справа
 * Используется когда в ACF поле kartinka_v_shapke выбрано "left"
 */
.article__top {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-start;
    align-items: center;
    margin: 0 0 40px;
}

@media all and (min-width: 1150px) {
    .article__top {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        margin: 0 0 72px;
    }
}

/**
 * article__intro - контейнер для картинки (общий)
 */
.article__intro {
    margin: 30px auto;
}

@media all and (min-width: 1150px) {
    .article__intro {
        margin-bottom: 60px;
    }
}

.article__intro img {
    max-width: 100%;
    height: auto;
}

/**
 * article__intro--left - модификатор для картинки слева от заголовка
 */
.article__intro--left {
    margin: 0;
    max-width: 480px;
    position: relative;
}

@media all and (min-width: 1150px) {
    .article__intro--left {
        margin-right: 40px;
        min-width: 480px;
    }
}

/**
 * Когда используется .article__top, заголовок, мета и время чтения
 * находятся в .article__top-content справа от картинки
 */
.article__top-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media all and (max-width: 1150px) {
    .article__top-content {
        margin-top: 20px;
        width: 100%;
    }
}

/* Стили для Urban Awards */
.article__header-title .toptitle {
    font-family: 'CoFo Robert Beta', serif;
    font-size: 48px;
    font-weight: 300;
    line-height: 58px;
    margin-bottom: 15px;
}

.article__header-title .subtitle {
    font-family: 'CoFo Robert Beta', serif;
    font-size: 24px;
    font-weight: 300;
    line-height: 28px;
}

@media (max-width: 768px) {
    .article__header-title .toptitle {
        font-size: 28px;
        line-height: normal;
    }

    .article__header-title .subtitle {
        font-size: 18px;
        line-height: normal;
    }
}

/* ==========================================================================
   СТИЛИ ДЛЯ ВИДЕО
   ========================================================================== */

/* YouTube Embed - адаптивный контейнер с aspect ratio 16:9 */
.youtube-embed {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    margin: 32px 0;
}

.youtube-embed__iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* VK Video Embed - адаптивный контейнер */
.vk-video-embed {
    width: 100%;
    max-width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    background-color: #000;
}

.vk-video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* WordPress Video Player */
.wp-video,
video.wp-video-shortcode,
.mejs-container,
.mejs-overlay.load {
    width: 100% !important;
    height: 100% !important;
}

.mejs-container {
    padding-top: 56.25%;
    /* 16:9 aspect ratio */
    position: relative;
}

.wp-video,
video.wp-video-shortcode {
    max-width: 100% !important;
}

video.wp-video-shortcode {
    position: relative;
}

.mejs-mediaelement {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.mejs-controls {
    display: none;
}

.mejs-overlay-play {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto !important;
    height: auto !important;
}

/* Видео внутри контента статьи */
.article__content .youtube-embed,
.article__content .vk-video-embed {
    margin: 32px auto;
    max-width: 100%;
}

/* Адаптивное видео для любых iframe в контенте */
.article__content iframe[src*="youtube.com"],
.article__content iframe[src*="youtu.be"],
.article__content iframe[src*="vk.com/video"] {
    max-width: 100%;
    display: block;
}

/* ===================================================
   НОВАЯ СТРУКТУРА SINGLE POST
   ================================================= */

/* 1. Главная заставка (картинка или видео на всю ширину контейнера) */
.article__hero {
    width: 100%;
    margin: 0px 0 10px 0;
    padding-top: 20px;
    min-height: 577px;
    overflow: hidden;
    position: relative;
}

.article__hero--inline {
    margin-top: 20px;
    padding-top: 0;
    min-height: 0;
}

.article__hero>img,
.article__hero>video,
.article__hero>iframe {
    width: 100%;
    height: 100%;
    min-height: 577px;
    object-fit: cover;
    display: block;
}

.article__hero--inline > img,
.article__hero--inline > video,
.article__hero--inline > iframe {
    height: auto;
    min-height: 0;
    object-fit: cover;
}

/* YouTube embed в шапке статьи */
.article__hero .youtube-embed {
    width: 100%;
    height: 577px;
    margin: 0;
    padding-bottom: 0;
    /* Отменяем padding для шапки, используем фиксированную высоту */
    position: relative;
    overflow: hidden;
}

.article__hero--inline .youtube-embed {
    height: auto;
    padding-bottom: 56.25%;
}

.article__hero .youtube-embed__iframe,
.article__hero iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 577px;
    border: none;
}

.article__hero--inline .youtube-embed__iframe,
.article__hero--inline iframe {
    min-height: 0;
}

/* VK video в шапке статьи */
.article__hero .vk-video-embed {
    width: 100%;
    height: 577px;
    padding-bottom: 0;
    /* Отменяем padding для шапки, используем фиксированную высоту */
    position: relative;
    overflow: hidden;
    background-color: #000;
}

.article__hero--inline .vk-video-embed {
    height: auto;
    padding-bottom: 56.25%;
}

.article__hero .vk-video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.article__hero--inline .vk-video-embed iframe {
    min-height: 0;
}

/* Старые inline стили VK (для обратной совместимости) */
.article__hero>div[style*="padding-bottom"] {
    padding-bottom: 0 !important;
    height: 577px !important;
}

.article__hero>div[style*="padding-bottom"] iframe {
    position: relative !important;
    height: 100% !important;
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
    .article__hero {
        margin: 0;
        min-height: auto;
    }

    .article__hero>img,
    .article__hero>video,
    .article__hero>iframe {
        min-height: auto;
    }

    .article__hero .youtube-embed {
        height: 250px;
    }

    .article__hero .youtube-embed__iframe,
    .article__hero iframe {
        min-height: 250px;
    }

    .article__hero .vk-video-embed {
        height: 250px;
    }

    .article__hero .vk-video-embed iframe {
        min-height: 250px;
    }

    .article__hero>div[style*="padding-bottom"] {
        height: 250px !important;
    }
}

/* 2. Блок категории и автора (как в большом посте на главной) */
.article__meta-block {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    font-family: 'Steinbeck', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #6D6D6D;
    width: 100%;
    flex-direction: row;
}

.article__category {
    display: flex;
    gap: 10px;
    line-height: 20px;
    color: #6D6D6D;
    flex-shrink: 0;
    margin-right: 10px;
}

.article__category a {
    display: flex;
    line-height: 16px;
    margin-bottom: -3px;
    color: #6D6D6D;
    text-decoration: none;
}

.article__category a:hover {
    color: #000000;
}

.article__author-block {
    display: flex;
    align-items: center;
}

.article__author-block .divider {
    display: block;
    width: 4px;
    min-width: 4px;
    max-width: 4px;
    flex: 0 0 4px;
    height: 18px;
    background: #000;
    margin-right: 10px;
}

.article__author-link {
    display: inline-block;
    color: #6D6D6D;
    flex-shrink: 0;
    text-decoration: none!important;
}

.article__author-link:hover {
    color: #000000;
}

@media (max-width: 768px) {
    .article__meta-block {
        padding-top: 20px;
    }

    .article__category,
    .article__author-link {
        font-size: 12px;
    }
}

/* 3. Заголовок статьи */
.article__header {
    margin: 0;
}

.article__title {
    display: block;
    font-family: 'Panama', serif;
    font-weight: 700;
    font-style: normal;
    font-size: 48px;
    line-height: 54px;
    text-transform: none;
    color: #000;
    padding-left: 0;
    padding-bottom: 20px;
    max-width: 810px;
    padding-top: 0px;
    margin: 0;
}

h1.article__title::before,
.article__title::before {
    display: none;
}

@media (max-width: 768px) {
    .article__title {
        font-size: 38px;
        line-height: 1.2;
    }
}

@media (max-width: 480px) {
    .article__title {
        font-size: 28px;
        line-height: 1.2;
    }
}

/* 4. Дата публикации и время на чтение */
.article__meta-date {
    font-family: 'Steinbeck', sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 16px;
    margin-bottom: -3px;
    color: #6D6D6D;
}

/* Дата после автора — только десктоп */
.article__meta-date--desktop {
    display: inline;
}

.article__meta-date-divider--desktop {
    display: block;
    margin-left: 10px;
}

/* Дата перед временем чтения — только планшет/мобилка */
.article__meta-date--mobile {
    display: none;
    margin-left: 0;
    margin-right: 0;
    line-height: 16px;
    margin-bottom: 0px;
}

.article__reading-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    
    gap: 0 10px;
    font-family: 'Steinbeck', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    line-height: 1.2;
    color: #717171;
    padding: 15px 0px;
    margin: 0px 0 15px 0;
}

.article__reading-meta .article__reading-time {
    margin: 0;
    padding: 0;
}

.article__reading-meta .divider {
    display: none;
}


@media (max-width: 768px) {
    .article__meta-date--desktop,
    .article__meta-date-divider--desktop {
        display: none !important;
    }

    .article__meta-date--mobile {
        display: inline;
    }
    .article__reading-meta .article__reading-time {
        margin-bottom: -3px;
    }
    .article__reading-meta .divider {
        display: block;
        margin-right: 0;
    }

    .article__reading-meta {
        margin: 30px 0 0 0;
        font-size: 14px;
        padding: 12px 0;
    }
}

@media (max-width: 480px) {
    .article__reading-meta {
        margin: 10px 0 10px 0;
        font-size: 14px;
        padding: 10px 0;
    }
}

.article__reading-time {
    font-family: 'Steinbeck', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    line-height: 1.2;
    color: #717171;
}

/* 5. Двухколоночная обёртка */
.article__body {
    display: grid;
    grid-template-columns: 1fr 330px;
    gap: 40px;
    margin: 0 0 25px 0;
    align-items: flex-start;
    padding-top: 25px;
    position: relative;
    overflow: visible; /* Важно для работы sticky */
    z-index: 1; /* z-index ниже хедера (z-index: 9999), но выше брендированного фона (z-index: 0) */
}

@media (max-width: 1150px) {
    .article__body {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

@media (max-width: 768px) {
    .article__body {
        padding-top: 0;
    }

    .article__body {
        margin: 0 0 20px 0;
    }
}

/* 6. Левая колонка - контент (max-width: 714px) */
.article__content-wrapper {
    max-width: 720px;
    width: 100%;
    min-height: 600px;
    position: relative;
    z-index: 1; /* z-index для контента статьи, но ниже хедера (z-index: 9999) */
}

@media (max-width: 768px) {
    .article__content-wrapper {
        min-height: auto;
        max-width: 100%;
    }
}

/* 7. Контент статьи */
.article__content {
    font-family: CoFo Robert,sans-serif;
    font-size: 18px;
    line-height: 1.4;
    color: #000;
}

.article__content p {
    margin: 0 0 20px 0;
}

.article__content p:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .article__content p {
        margin: 0 0 20px 0;
    }

}

/* Буквица: padding-top подгоняет верх глифа под cap-height строки текста */
.article__content>p:first-child::first-letter {
    font-family: 'Panama', serif;
    font-size: 78px;
    line-height: 0.55;
    float: left;
    padding: 20px 5px 0 0;
    margin: 0;
    font-weight: 400;
}

.article__content h2,
.article__content h3,
.article__content h4 {
    font-weight: 400;
    margin: 32px 0 16px 0;
}

.article__content h2 {
    font-size: 32px;
    line-height: 36px;
}

.article__body h2 {
    padding-left: 0;
    font-weight: 500;
}

.article__content h3 {
    font-size: 26px;
    line-height: 30px;
}

.article__content h4 {
    font-size: 22px;
    line-height: 30px;
}

.article__content a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.article__content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 32px auto;
    transition: opacity 0.3s ease;
}

.article__content .photo-slide img {
    height: 100%;
    min-height: 470px;

}

.article__content img:hover {
    opacity: 0.95;
}

/* WordPress alignment classes для картинок */
.article__content .aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.article__content .alignleft {
    float: left;
    margin: 8px 32px 24px 0;
}

.article__content .alignright {
    float: right;
    margin: 8px 0 24px 32px;
}

.article__content .alignnone {
    margin: 32px 0;
}

.article__content figure {
    margin: 32px 0;
    max-width: 100% !important;
    width: 100% !important;

}
.article__content figure img {
    margin: 5px 0;
}

.article__content figure.alignleft {
    float: left;
    margin: 8px 32px 24px 0;
}

.article__content figure.alignright {
    float: right;
    margin: 8px 0 24px 32px;
}

.article__content figcaption {
    font-family: 'Steinbeck', sans-serif;
    font-size: 16px;
    line-height: 28px;
    text-align: start;
    color: #000000;
    margin-top: 10px;
    font-style: normal;
}

.article__content blockquote, .article__content blockquote p {
    font-weight: 700!important;
}
.article__content blockquote {
    font-family: 'Panama', serif;
    font-size: 40px;
    line-height: 46px;
    margin: 40px 0 40px 90px;
    padding-left: 35px;
    border-left: 4px solid #000;
}

.article__content ul,
.article__content ol {
    margin: 24px 0;
    padding-left: 24px;
}

.article__content li {
    margin: 8px 0;
}

/* Таблицы - минималистичный стиль */
.article__content table {
    width: 100%;
    border-collapse: collapse;
    margin: 40px 0;
    font-size: 16px;
    line-height: 1.3;
}

.article__content table th {
    font-family: 'Panama', serif;
    font-weight: 400;
    font-size: 18px;
    text-align: left;
    padding: 16px 12px;
    border-bottom: 2px solid #000;
    background: transparent;
}

.article__content table td {
    padding: 14px 12px;
    border-bottom: 1px solid #e0e0e0;
    vertical-align: top;
}

.article__content table tr:last-child td {
    border-bottom: none;
}

/* Убрали hover эффект для таблиц */

/* Выравнивание таблиц */
.article__content table.aligncenter {
    margin-left: auto;
    margin-right: auto;
}

.article__content table.alignleft {
    float: left;
    margin: 8px 32px 24px 0;
    width: auto;
}

.article__content table.alignright {
    float: right;
    margin: 8px 0 24px 32px;
    width: auto;
}

@media (max-width: 768px) {
    .article__content {
        line-height: 1.5;
    }

    .article__content>p:first-child::first-letter {
        font-size: 64px;
        padding: 16px 10px 0 0;
    }

    .article__content h2 {
        font-size: 26px;
        line-height: 30px;
    }

    .article__content h3 {
        font-size: 22px;
        line-height: 26px;
    }

    .article__content blockquote {
        font-size: 27px;
        font-weight: 700!important;
        padding-left: 20px;
        line-height: 30px;
        margin: 32px 0;
    }

    /* Картинки на мобильных */
    .article__content img {
        margin: 24px auto;
    }

    .article__content .alignleft,
    .article__content .alignright {
        float: none;
        margin: 24px auto;
        display: block;
    }

    .article__content figure.alignleft,
    .article__content figure.alignright {
        float: none;
        margin: 24px 0;
    }

    .article__content figcaption {
        font-size: 12px;
    }

    /* Таблицы на мобильных */
    .article__content table {
        font-size: 14px;
        margin: 32px 0;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .article__content table th {
        font-size: 15px;
        padding: 12px 8px;
    }

    .article__content table td {
        padding: 10px 8px;
    }

    .article__content .photo-slide img {
        height: 100%;
        min-height: 300px;
    
    }
    
    .article__content table.alignleft,
    .article__content table.alignright {
        float: none;
        margin: 32px 0;
        width: 100%;
    }
}

@media (max-width: 480px) {

    .article__content .alignleft,
    .article__content .alignright {
        margin: 16px auto;
    }
    .article__content .photo-slide img {
        height: 100%;
        min-height: 250px;
    
    }
    
    .article__content table {
        font-size: 13px;
        margin: 24px 0;
    }

    .article__content table th {
        font-size: 14px;
        padding: 10px 6px;
    }

    .article__content table td {
        padding: 8px 6px;
    }
}

/* 8. Правая колонка - рекламный баннер (sticky) */
.article__sidebar {
    position: relative;
    height: 100%;
}

.article__sidebar-sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 60px;
    align-self: flex-start;
    z-index: 10;
}

.article__sidebar-sticky--inline {
    position: static;
    top: auto;
    margin: 24px 0;
    width: 100%;
    z-index: auto;
}


.article__inline-banner-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 25px -15px;
    min-height: 41px; /* резерв под вставку из JS — снижает CLS */
    text-transform: uppercase;
    font-family: 'Steinbeck', sans-serif;
    font-size: 12px;
    letter-spacing: 0.08em;
    color: #000;
}

.article__inline-banner-divider-line {
    flex: 1;
    height: 0.5px;
    background: #000000;
}

.article__inline-banner-divider--line {
    gap: 0;
}

.article__inline-banner-divider--line .article__inline-banner-divider-line {
    width: 100%;
}

@media (max-width: 768px) {
    .article__header-banner--inline .banner-middle-flat--desktop {
        display: none;
    }
}

@media (min-width: 769px) {
    .article__header-banner--inline,
    .article__sidebar-sticky--inline,
    .article__inline-banner-divider {
        display: none;
    }
}

/* Стили для баннера в сайдбаре статьи */
.article__sidebar .posts-section__banner {
    width: 100%;
    height: auto;
    margin-bottom: 0;
    /* Sidebar banner aspect-ratio (330x660) — резервируем место до загрузки */
    aspect-ratio: 330 / 660;
}

.article__sidebar-sticky--inline .posts-section__banner {
    width: 100%;
    max-width: 330px;
    height: auto;
    margin: 0;
    /* min-height вместо aspect-ratio + overflow: visible — в Safari на мобилке контент не наезжает */
    min-height: 350px;
}

.article__sidebar .banner-article-left--desktop {
    width: 100%;
    display: block;
    aspect-ratio: 330 / 660;
}

.article__sidebar-sticky--inline .banner-article-left--desktop {
    display: none;
}

.article__sidebar .banner-middle-flat--mobile {
    display: none;
}

.article__sidebar-sticky--inline .banner-middle-flat--mobile {
    display: flex;
    width: 100%;
    height: auto;
    min-height: 350px;
}

.article__sidebar .banner-article-left--desktop img,
.article__sidebar .banner-article-left--desktop a {
    width: 100%;
    height: auto;
    display: block;
}

.article__sidebar .banner-article-left--desktop a {
    line-height: 0;
}

/* Убираем фоновые стили для реального баннера */
.article__sidebar .posts-section__banner-placeholder {
    display: none;
}

@media (max-width: 1150px) {
    .article__sidebar {
        display: none;
    }
}

/* 9. Секция с тегами  */
.article__tags-section {
    margin: 20px 0 0;
    min-height: 44px; /* резерв под рендер — снижает CLS */
}

.article__tags {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.article__tag {
    display: block;
    padding: 10px 15px;
    font-family: 'Steinbeck', sans-serif;
    font-size: 12px;
    background: #E9E9E9;
    color: black;
    text-decoration: none;
    border-radius: 0;
    transition: background-color 0.2s ease;
}

.article__tag:hover {
    background: #D0D0D0;
    color: black;
    text-decoration: none;
}

@media (max-width: 768px) {
    .article__tags {
        flex-wrap: wrap;
        gap: 15px;
        margin: 15px 0;
    }

    .article__tag {
        padding: 8px 12px;
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .article__tags {
        gap: 10px;
        margin: 10px 0;
    }

    .article__tag {
        padding: 6px 10px;
        font-size: 10px;
    }
}

/* 10. Блок "подписаться" - использует стили из social-subscribe.css */
.article__subscribe-section {
    margin: 0 0 70px 0;
    min-height: 80px; /* резерв под рендер — снижает CLS */
}

.article__subscribe-section .subscribe {
    padding-top: 30px;
}

@media (max-width: 768px) {
    .article__subscribe-section {
        margin: 0 0 48px 0;
    }
}

/* 11. Похожие статьи (6 постов в 2 ряда по 3) */
.article__related-posts {
    margin: 0 0 50px 0;
}

.article__related-posts-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 32px;
}

.article__related-posts-header h2 {
    margin: 0;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 700;
}

.article__related-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 55px;
    margin: 0;
}

/* Адаптивность для похожих постов */
@media (max-width: 1150px) {
    .article__related-posts-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px 24px;
    }
}

@media (max-width: 768px) {
    .article__related-posts {
        margin: 0 0 60px 0;
    }

    .article__related-posts-header {
        margin-bottom: 24px;
    }

    .article__related-posts-header h2 {
        font-size: 24px;
    }

    .article__related-posts-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

@media (max-width: 480px) {
    .article__related-posts {
        margin: 0 0 48px 0;
    }

    .article__related-posts-grid {
        gap: 24px;
    }

    .article__related-posts-header h2 {
        font-size: 22px;
    }
}

/* 12. Рекламный баннер на всю ширину в конце статьи */
.article+.banner-full-width,
article+.banner-full-width {
    margin: 0 0 80px 0;
}

.banner-full-width {
    width: 100%;
    min-height: 300px;
    contain: inline-size layout;
}

.banner-full-width .container {
    max-width: 100%;
    padding: 0;
}

.banner-full-width .banner-middle-flat {
    width: 100%;
    display: block;
}

.banner-full-width .banner-middle-flat img {
    width: 100%;
    height: auto;
    display: block;
}

body.wp-singular.post-template-default.single.single-post .banner-full-width {
    margin-top: 10px;
    margin-bottom: 20px;
}

/* 13. Рекомендательный виджет под баннером (на всю ширину, как реклама) */
.banner-recommend--full-width {
    width: 100%;
    margin: 0 0 0px 0;
}

.banner-recommend--full-width .container {
    max-width: 100%;
    padding: 0;
}

.banner-recommend--full-width .banner-recommend__widget {
    width: 100%;
}

@media (max-width: 768px) {
    .banner-recommend--full-width {
        margin: 0 0 0px 0;
    }
}

@media (max-width: 480px) {
    .banner-recommend--full-width {
        margin: 0 0 0px 0;
    }
}

/* ==========================================================================
   VERSTKA FULL WIDTH - Контейнер на всю ширину для верстки
   ========================================================================== */

/**
 * Когда внутри статьи/страницы есть элементы с классом, начинающимся с "верстка" или "verstka",
 * контейнер расширяется на всю ширину страницы без паддингов
 */
.article--single .container.verstka-full-width,
.article--page .container.verstka-full-width,
.has-verstka-content .container.verstka-full-width {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Убираем паддинги у родительского контейнера статьи, если есть верстка */
.article--single.has-verstka-content,
.article--page.has-verstka-content {
    padding-left: 0;
    padding-right: 0;
}


@media (max-width: 768px) {

    .article__sidebar-sticky--inline .posts-section__banner {
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: auto;
        margin: 0;
        min-height: 350px;
        overflow: hidden;
    }

    .article__content   .article__sidebar-sticky--inline .posts-section__banner img {
        margin: 0px auto;
    }

    .article+.banner-full-width,
    article+.banner-full-width {
        margin: 0 0 60px 0;
    }

    .banner-full-width {
        min-height: 350px;
    }

    .article__related-posts .article__related-posts-grid .main-article__medium {
        display: flex;
        flex-direction: row;
        gap: 20px;
    }

    .article__related-posts .article__related-posts-grid .main-article__medium .main-article__theme {
        display: none;
    }

    .article__related-posts .article__related-posts-grid .main-article__medium .main-article__image {
        height: 160px;
        width: 122px;
    }


    .article__related-posts .article__related-posts-grid .main-article__medium .main-article__title {
        font-size: 20px;
        padding-top: 0;
    }

}

@media (max-width: 480px) {

    .article+.banner-full-width,
    article+.banner-full-width {
        margin: 0 0 48px 0;
    }
}