/* Универсальные стили для компонента news.detail */
/* Все стили применяются к семантическим HTML элементам внутри article.detail .content */
/* article.detail - семантическая обертка для статьи на уровне компонента */

/* ============================================
   БАЗОВЫЕ СТИЛИ КОНТЕНТА
   ============================================ */

article.detail .content,
.detail .content {
    max-width: 100% !important;
    width: 100% !important;
    line-height: 1.75;
    color: #1f2d3d;
    font-size: 20px;
}

article.detail .content > *,
.detail .content > * {
    max-width: 100% !important;
}

/* ============================================
   БЛОК МЕТА-ИНФОРМАЦИИ СТАТЬИ (автор, дата, просмотры, шаринг)
   ============================================ */

article.detail .article-meta-block,
.detail .article-meta-block {
    margin: 0 0 30px 0;
    padding: 20px 25px;
    background: #f8f9fa;
    border-radius: 12px;
    border: 1px solid #e9ecef;
}

article.detail .article-meta-block .article-meta-content,
.detail .article-meta-block .article-meta-content {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* Фото автора */
article.detail .article-meta-block .author-photo,
.detail .article-meta-block .author-photo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
}

article.detail .article-meta-block .author-photo img,
.detail .article-meta-block .author-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

article.detail .article-meta-block .author-photo.default,
.detail .article-meta-block .author-photo.default {
    background: linear-gradient(135deg, #27509e 0%, #1e4082 100%);
    color: white;
}

article.detail .article-meta-block .author-photo.default .icon,
.detail .article-meta-block .author-photo.default .icon {
    font-size: 24px;
    color: white;
}

/* Информация об авторе и мета-данные */
article.detail .article-meta-block .article-meta-info,
.detail .article-meta-block .article-meta-info {
    flex: 1;
    min-width: 200px;
}

article.detail .article-meta-block .author-name,
.detail .article-meta-block .author-name {
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 5px;
}

article.detail .article-meta-block .article-meta-details,
.detail .article-meta-block .article-meta-details {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #6c757d;
}

article.detail .article-meta-block .meta-item,
.detail .article-meta-block .meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

article.detail .article-meta-block .meta-item .icon,
.detail .article-meta-block .meta-item .icon {
    font-size: 14px;
    color: #27509e;
}

/* Компактный блок шаринга */
article.detail .article-meta-block .article-share-compact,
.detail .article-meta-block .article-share-compact {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

article.detail .article-meta-block .share-label,
.detail .article-meta-block .share-label {
    font-size: 13px;
    color: #6c757d;
    font-weight: 500;
    white-space: nowrap;
}

article.detail .article-meta-block .share-buttons-compact,
.detail .article-meta-block .share-buttons-compact {
    display: flex;
    gap: 8px;
    align-items: center;
}

article.detail .article-meta-block .share-btn-compact,
.detail .article-meta-block .share-btn-compact {
    width: 20px;
    height: 20px;
    border-radius: 0;
    display: block;
    text-decoration: none;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    /* скрываем текст ссылок (в шаблоне он нужен для доступности) */
    font-size: 0;
    line-height: 0;
    color: transparent;
    overflow: hidden;
}

article.detail .article-meta-block .share-btn-compact:hover,
.detail .article-meta-block .share-btn-compact:hover {
    transform: scale(1.08);
    opacity: 0.95;
    text-decoration: none;
}

article.detail .article-meta-block .share-vk,
.detail .article-meta-block .share-vk {
    background-image: url(/local/templates/aspro-allcorp/images/vk.png);
}

article.detail .article-meta-block .share-facebook,
.detail .article-meta-block .share-facebook {
    background-image: url(/local/templates/aspro-allcorp/images/facebook.png);
}

article.detail .article-meta-block .share-twitter,
.detail .article-meta-block .share-twitter {
    background-image: url(/local/templates/aspro-allcorp/images/twitter.png);
}

article.detail .article-meta-block .share-telegram,
.detail .article-meta-block .share-telegram {
    background-image: url(/local/templates/aspro-allcorp/images/telegram.png);
}

article.detail .article-meta-block .share-whatsapp,
.detail .article-meta-block .share-whatsapp {
    background-image: url(/local/templates/aspro-allcorp/images/whatsapp.png);
}

/* Адаптивность для блока мета-информации */
@media (max-width: 767px) {
    article.detail .article-meta-block,
    .detail .article-meta-block {
        padding: 15px;
        margin-bottom: 25px;
    }

    /* фото слева, имя/дата/просмотры справа — в одну строку */
    article.detail .article-meta-block .article-meta-content,
    .detail .article-meta-block .article-meta-content {
        gap: 12px;
        flex-wrap: nowrap;
    }

    article.detail .article-meta-block .author-photo,
    .detail .article-meta-block .author-photo {
        width: 45px;
        height: 45px;
    }

    article.detail .article-meta-block .article-meta-info,
    .detail .article-meta-block .article-meta-info {
        min-width: 0;
        flex: 1;
    }

    article.detail .article-meta-block .author-name,
    .detail .article-meta-block .author-name {
        font-size: 14px;
        margin-bottom: 4px;
    }

    article.detail .article-meta-block .article-meta-details,
    .detail .article-meta-block .article-meta-details {
        gap: 12px;
        font-size: 11px;
        flex-wrap: wrap;
    }

    /* шаринг — отдельной строкой ниже */
    article.detail .article-meta-block .article-share-compact,
    .detail .article-meta-block .article-share-compact {
        width: 100%;
        justify-content: space-between;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid #e9ecef;
    }

    article.detail .article-meta-block .share-btn-compact,
    .detail .article-meta-block .share-btn-compact {
        width: 28px;
        height: 28px;
    }
}

@media (max-width: 480px) {
    article.detail .article-meta-block .article-meta-content,
    .detail .article-meta-block .article-meta-content {
        flex-wrap: wrap;
    }

    article.detail .article-meta-block .author-photo,
    .detail .article-meta-block .author-photo {
        width: 40px;
        height: 40px;
    }

    article.detail .article-meta-block .author-name,
    .detail .article-meta-block .author-name {
        font-size: 13px;
        margin-bottom: 3px;
    }

    article.detail .article-meta-block .article-meta-details,
    .detail .article-meta-block .article-meta-details {
        gap: 10px;
        font-size: 10px;
    }

    article.detail .article-meta-block .article-share-compact,
    .detail .article-meta-block .article-share-compact {
        justify-content: space-between;
    }
}

/* ============================================
   ЗАГОЛОВКИ
   ============================================ */

article.detail .content h2,
.detail .content h2 {
    font-size: 32px;
    font-weight: 700;
    color: #27509e;
    margin: 50px 0 25px 0;
    line-height: 1.3;
    padding-bottom: 15px;
    border-bottom: 2px solid #e9ecef;
}

article.detail .content h3,
.detail .content h3 {
    font-size: 24px;
    font-weight: 600;
    color: #2c3e50;
    margin: 40px 0 20px 0;
    line-height: 1.4;
}

article.detail .content h4,
.detail .content h4 {
    font-size: 20px;
    font-weight: 600;
    color: #343a40;
    margin: 30px 0 15px 0;
    line-height: 1.4;
}

/* ============================================
   ПАРАГРАФЫ И ТЕКСТ
   ============================================ */

article.detail .content p,
.detail .content p {
    margin: 0 0 28px 0;
    line-height: 1.75;
    font-size: 20px;
    color: #1f2d3d;
}

article.detail .content p:last-child,
.detail .content p:last-child {
    margin-bottom: 0;
}

/* ============================================
   ЦИТАТЫ (BLOCKQUOTE)
   ============================================ */

article.detail .content blockquote,
.detail .content blockquote {
    position: relative;
    margin: 40px 0;
    padding: 30px 40px 30px 100px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-left: 4px solid #27509e;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    font-style: normal;
    color: #2c3e50;
    line-height: 1.8;
    overflow: hidden;
}

article.detail .content blockquote::before,
.detail .content blockquote::before {
    content: '"';
    position: absolute;
    top: 20px;
    left: 30px;
    font-family: Georgia, serif;
    font-size: 80px;
    line-height: 1;
    color: #27509e;
    opacity: 0.2;
    font-weight: bold;
}

article.detail .content blockquote p,
.detail .content blockquote p {
    margin: 0 0 15px 0;
    font-size: 18px;
    line-height: 1.8;
    color: #2c3e50;
    font-weight: 400;
}

article.detail .content blockquote p:last-child,
.detail .content blockquote p:last-child {
    margin-bottom: 0;
}

article.detail .content blockquote cite,
.detail .content blockquote cite {
    display: block;
    margin-top: 20px;
    font-size: 14px;
    color: #6c757d;
    font-style: normal;
    font-weight: 500;
    padding-top: 15px;
    border-top: 1px solid rgba(39, 80, 158, 0.1);
}

article.detail .content blockquote cite::before,
.detail .content blockquote cite::before {
    content: '— ';
    color: #27509e;
    font-weight: 600;
}

/* Вариант для важных/критических цитат */
article.detail .content blockquote[data-type="warning"],
article.detail .content blockquote.warning,
.detail .content blockquote[data-type="warning"],
.detail .content blockquote.warning {
    border-left-color: #e63946;
    background: linear-gradient(135deg, #fff5f5 0%, #ffe5e5 100%);
}

article.detail .content blockquote[data-type="warning"]::before,
article.detail .content blockquote.warning::before,
.detail .content blockquote[data-type="warning"]::before,
.detail .content blockquote.warning::before {
    color: #e63946;
}

article.detail .content blockquote[data-type="warning"] cite::before,
article.detail .content blockquote.warning cite::before,
.detail .content blockquote[data-type="warning"] cite::before,
.detail .content blockquote.warning cite::before {
    color: #e63946;
}

/* ============================================
   ИНФОРМАЦИОННЫЕ БЛОКИ (DIV С H3)
   ============================================ */

/* Информационный блок: div с h3 и p внутри */
article.detail .content > div:has(h3:first-child),
.detail .content > div:has(h3:first-child) {
    background: #f8f9fa;
    border-left: 4px solid #27509e;
    padding: 25px;
    border-radius: 8px;
    margin: 30px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

article.detail .content > div:has(h3:first-child):hover,
.detail .content > div:has(h3:first-child):hover {
    transform: translateX(5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

article.detail .content > div:has(h3:first-child) h3,
.detail .content > div:has(h3:first-child) h3 {
    margin-top: 0;
    color: #27509e;
    font-size: 20px;
    font-weight: 600;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 15px;
}

article.detail .content > div:has(h3:first-child) p,
.detail .content > div:has(h3:first-child) p {
    margin-bottom: 0;
    line-height: 1.7;
    color: #2c3e50;
}

/* Вариант для критических/важных блоков */
article.detail .content > div[data-type="warning"]:has(h3:first-child),
article.detail .content > div.warning:has(h3:first-child),
.detail .content > div[data-type="warning"]:has(h3:first-child),
.detail .content > div.warning:has(h3:first-child) {
    background: #fff5f5;
    border-left-color: #e63946;
}

article.detail .content > div[data-type="warning"]:has(h3:first-child) h3,
article.detail .content > div.warning:has(h3:first-child) h3,
.detail .content > div[data-type="warning"]:has(h3:first-child) h3,
.detail .content > div.warning:has(h3:first-child) h3 {
    color: #e63946;
}

/* Fallback для браузеров без поддержки :has() */
article.detail .content > div.info-block,
.detail .content > div.info-block {
    background: #f8f9fa;
    border-left: 4px solid #27509e;
    padding: 25px;
    border-radius: 8px;
    margin: 30px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

article.detail .content > div.info-block.warning,
.detail .content > div.info-block.warning {
    background: #fff5f5;
    border-left-color: #e63946;
}

article.detail .content > div.info-block h3,
.detail .content > div.info-block h3 {
    margin-top: 0;
    color: #27509e;
    font-size: 20px;
    font-weight: 600;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 15px;
}

article.detail .content > div.info-block.warning h3,
.detail .content > div.info-block.warning h3 {
    color: #e63946;
}

article.detail .content .gesture-info-block,
.detail .content .gesture-info-block {
    background: #f8f9fa;
    border-left: 4px solid #27509e;
    padding: 20px 22px;
    border-radius: 8px;
    margin: 18px 0;
}

article.detail .content .gesture-info-block h3,
.detail .content .gesture-info-block h3 {
    margin: 0 0 10px 0;
    font-size: 20px;
    color: #27509e;
}

article.detail .content .gesture-info-block p,
.detail .content .gesture-info-block p {
    margin: 0;
}

article.detail .content .gesture-info-block.gesture-emergency,
.detail .content .gesture-info-block.gesture-emergency {
    background: #fff5f5;
    border-left-color: #e63946;
}

article.detail .content .gesture-info-block.gesture-emergency h3,
.detail .content .gesture-info-block.gesture-emergency h3 {
    color: #e63946;
}

/* ============================================
   СПИСКИ
   ============================================ */

article.detail .content ul,
article.detail .content ol,
.detail .content ul,
.detail .content ol {
    margin: 20px 0;
    padding-left: 30px;
    line-height: 1.75;
    color: #1f2d3d;
    font-size: 20px;
}

article.detail .content ul li,
article.detail .content ol li,
.detail .content ul li,
.detail .content ol li {
    margin-bottom: 10px;
    color: #1f2d3d;
    line-height: 1.75;
    font-size: 20px;
}

article.detail .content ul li strong,
article.detail .content ol li strong,
.detail .content ul li strong,
.detail .content ol li strong {
    color: #27509e;
    font-weight: 600;
}

/* ============================================
   ИЗОБРАЖЕНИЯ И FIGURE
   ============================================ */

article.detail .content figure,
.detail .content figure {
    margin: 30px 0;
    text-align: center;
}

article.detail .content figure img,
.detail .content figure img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

article.detail .content figure figcaption,
.detail .content figure figcaption {
    margin-top: 10px;
    font-style: italic;
    color: #666;
    font-size: 14px;
}

article.detail .content figure.article-figure,
.detail .content figure.article-figure {
    margin: 30px 0;
    text-align: center;
}

article.detail .content figure.article-figure .article-image,
.detail .content figure.article-figure .article-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

article.detail .content figure.article-figure .article-figcaption,
.detail .content figure.article-figure .article-figcaption {
    margin-top: 10px;
    font-style: italic;
    color: #666;
    font-size: 14px;
}

/* Базовые стили для изображений в контенте */
article.detail .content img:not(figure img),
.detail .content img:not(figure img),
article .content img:not(figure img),
article img:not(figure img) {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    margin: 15px 0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    vertical-align: middle;
}

/* Изображения по умолчанию - блочные (если не указан float) */
article.detail .content img:not([style*="float"]):not(.align-left):not(.align-right):not(figure img):not(p img),
.detail .content img:not([style*="float"]):not(.align-left):not(.align-right):not(figure img):not(p img),
article .content img:not([style*="float"]):not(.align-left):not(.align-right):not(figure img):not(p img),
article img:not([style*="float"]):not(.align-left):not(.align-right):not(figure img):not(p img) {
    display: block;
    margin: 25px auto;
    max-width: 90%;
}

/* Изображения с обтеканием текстом слева */
article.detail .content img[style*="float: left"],
article.detail .content img[style*="float:left"],
article.detail .content img.align-left,
.detail .content img[style*="float: left"],
.detail .content img[style*="float:left"],
.detail .content img.align-left,
article .content img[style*="float: left"],
article .content img[style*="float:left"],
article .content img.align-left {
    float: left !important;
    display: inline-block !important;
    margin: 10px 30px 20px 0 !important;
    max-width: 45% !important;
    min-width: 200px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border: 3px solid rgba(255, 255, 255, 0.8);
    background: #fff;
    padding: 5px;
    vertical-align: top;
}

/* Изображения с обтеканием текстом справа */
article.detail .content img[style*="float: right"],
article.detail .content img[style*="float:right"],
article.detail .content img.align-right,
.detail .content img[style*="float: right"],
.detail .content img[style*="float:right"],
.detail .content img.align-right,
article .content img[style*="float: right"],
article .content img[style*="float:right"],
article .content img.align-right {
    float: right !important;
    display: inline-block !important;
    margin: 10px 0 20px 30px !important;
    max-width: 45% !important;
    min-width: 200px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border: 3px solid rgba(255, 255, 255, 0.8);
    background: #fff;
    padding: 5px;
    vertical-align: top;
}

/* Изображения по центру (без обтекания) */
article.detail .content img[style*="display: block"],
article.detail .content img[style*="margin: auto"],
article.detail .content img.align-center,
.detail .content img[style*="display: block"],
.detail .content img[style*="margin: auto"],
.detail .content img.align-center {
    display: block;
    margin: 30px auto;
    max-width: 80%;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Улучшенные эффекты при наведении */
article.detail .content img:hover,
.detail .content img:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
    border-color: rgba(39, 80, 158, 0.3);
}

/* Специальные эффекты для обтекаемых изображений */
article.detail .content img[style*="float"]:hover,
article.detail .content img.align-left:hover,
article.detail .content img.align-right:hover,
.detail .content img[style*="float"]:hover,
.detail .content img.align-left:hover,
.detail .content img.align-right:hover {
    box-shadow: 0 15px 40px rgba(39, 80, 158, 0.3);
}

/* Обтекание текста вокруг изображений */
article.detail .content p,
.detail .content p,
article .content p {
    text-align: justify;
    hyphens: auto;
    overflow-wrap: break-word;
    line-height: 1.8;
    overflow: hidden; /* Помогает с обтеканием */
}

/* Улучшенное обтекание - текст должен обтекать изображения */
article.detail .content p:has(+ img[style*="float"]),
.detail .content p:has(+ img[style*="float"]),
article .content p:has(+ img[style*="float"]) {
    overflow: visible;
}

/* Улучшенное обтекание для параграфов рядом с изображениями */
article.detail .content img[style*="float: left"] ~ p,
article.detail .content img.align-left ~ p,
.detail .content img[style*="float: left"] ~ p,
.detail .content img.align-left ~ p {
    margin-left: 0;
    padding-right: 0;
}

article.detail .content img[style*="float: right"] ~ p,
article.detail .content img.align-right ~ p,
.detail .content img[style*="float: right"] ~ p,
.detail .content img.align-right ~ p {
    margin-right: 0;
    padding-left: 0;
}

/* Очистка float после изображений */
article.detail .content img[style*="float"] + p,
article.detail .content img.align-left + p,
article.detail .content img.align-right + p,
.detail .content img[style*="float"] + p,
.detail .content img.align-left + p,
.detail .content img.align-right + p,
article .content img[style*="float"] + p,
article .content img.align-left + p,
article .content img.align-right + p {
    margin-top: 0;
}

/* Автоматическое обтекание для изображений внутри параграфов */
article.detail .content p img,
.detail .content p img,
article .content p img,
article p img {
    float: left !important;
    margin: 5px 20px 10px 0 !important;
    max-width: 40% !important;
    min-width: 150px;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    display: inline-block !important;
    vertical-align: top;
}

/* Если изображение в начале параграфа - обтекание справа */
article.detail .content p:has(> img:first-child) img:first-child,
.detail .content p:has(> img:first-child) img:first-child,
article .content p:has(> img:first-child) img:first-child,
article p:has(> img:first-child) img:first-child {
    float: right !important;
    margin: 5px 0 10px 20px !important;
}

/* Если изображение в начале параграфа - обтекание справа */
article.detail .content p:has(> img:first-child),
.detail .content p:has(> img:first-child),
article .content p:has(> img:first-child) {
    overflow: hidden;
}

article.detail .content p > img:first-child,
.detail .content p > img:first-child,
article .content p > img:first-child {
    float: right;
    margin: 5px 0 10px 20px;
}

/* Изображения между параграфами - можно сделать обтекаемыми */
article.detail .content p + img:not([style*="display: block"]):not(.align-center),
.detail .content p + img:not([style*="display: block"]):not(.align-center),
article .content p + img:not([style*="display: block"]):not(.align-center),
article p + img:not([style*="display: block"]):not(.align-center) {
    float: left !important;
    margin: 10px 30px 20px 0 !important;
    max-width: 45% !important;
    display: inline-block !important;
}

/* Универсальное правило для всех изображений в контенте - по умолчанию обтекание слева */
@media (min-width: 768px) {
    article.detail .content > img:not(figure img):not([style*="display: block"]):not([style*="float: right"]):not(.align-center):not(.align-right),
    .detail .content > img:not(figure img):not([style*="display: block"]):not([style*="float: right"]):not(.align-center):not(.align-right),
    article .content > img:not(figure img):not([style*="display: block"]):not([style*="float: right"]):not(.align-center):not(.align-right),
    article > img:not(figure img):not([style*="display: block"]):not([style*="float: right"]):not(.align-center):not(.align-right) {
        float: left !important;
        margin: 10px 30px 20px 0 !important;
        max-width: 45% !important;
        display: inline-block !important;
    }
}

/* Обертка для изображений с подписью (альтернатива figure) */
article.detail .content .image-wrapper,
.detail .content .image-wrapper {
    margin: 25px 0;
    text-align: center;
}

article.detail .content .image-wrapper img,
.detail .content .image-wrapper img {
    margin: 0 auto;
    display: block;
}

article.detail .content .image-wrapper .image-caption,
.detail .content .image-wrapper .image-caption {
    margin-top: 12px;
    font-style: italic;
    color: #666;
    font-size: 14px;
    line-height: 1.5;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 767px) {
    /* На мобильных все изображения становятся блочными */
    article.detail .content img[style*="float: left"],
    article.detail .content img[style*="float:left"],
    article.detail .content img.align-left,
    article.detail .content img[style*="float: right"],
    article.detail .content img[style*="float:right"],
    article.detail .content img.align-right,
    .detail .content img[style*="float: left"],
    .detail .content img[style*="float:left"],
    .detail .content img.align-left,
    .detail .content img[style*="float: right"],
    .detail .content img[style*="float:right"],
    .detail .content img.align-right {
        float: none !important;
        display: block;
        margin: 20px auto !important;
        max-width: 100% !important;
        min-width: auto !important;
        border: none !important;
        padding: 0 !important;
    }
    
    article.detail .content img,
    .detail .content img {
        margin: 20px 0;
    }
    
    article.detail .content img.align-center,
    .detail .content img.align-center {
        max-width: 100%;
    }
    
    article.detail .content p,
    .detail .content p {
        text-align: left;
    }
}

/* ============================================
   БЛОК ПРИЗЫВА К ДЕЙСТВИЮ (CTA)
   ============================================ */

/* CTA блок - универсальный для всех статей */
article.detail .article-cta-block,
.detail .article-cta-block {
    background: linear-gradient(135deg, #27509e 0%, #1e4082 50%, #0d2d5a 100%);
    color: white;
    padding: 70px 60px;
    border-radius: 24px;
    margin: 70px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(39, 80, 158, 0.4), 
                0 0 0 1px rgba(255, 255, 255, 0.1) inset,
                0 0 80px rgba(255, 217, 61, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
}

/* Декоративные элементы фона */
article.detail .article-cta-block::before,
.detail .article-cta-block::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
    animation: cta-shimmer 10s infinite linear;
    pointer-events: none;
}

article.detail .article-cta-block::after,
.detail .article-cta-block::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -30%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 217, 61, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    animation: cta-pulse 6s infinite ease-in-out;
    pointer-events: none;
}

@keyframes cta-shimmer {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes cta-pulse {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.2); opacity: 0.5; }
}

article.detail .article-cta-block .cta-content,
.detail .article-cta-block .cta-content {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
}

article.detail .article-cta-block h3,
.detail .article-cta-block h3 {
    margin: 0 0 25px 0;
    color: white;
    font-size: 38px;
    font-weight: 800;
    line-height: 1.25;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 
                 0 0 20px rgba(255, 255, 255, 0.1);
    border-bottom: none;
    padding-bottom: 0;
    letter-spacing: -0.8px;
}

article.detail .article-cta-block .cta-description,
.detail .article-cta-block .cta-description {
    font-size: 20px;
    line-height: 1.8;
    margin: 0 0 20px 0;
    color: rgba(255, 255, 255, 0.98);
    font-weight: 400;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

article.detail .article-cta-block .cta-subtitle,
.detail .article-cta-block .cta-subtitle {
    font-size: 18px;
    line-height: 1.7;
    margin: 0 0 35px 0;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    font-style: italic;
}

article.detail .article-cta-block .cta-button-wrapper,
.detail .article-cta-block .cta-button-wrapper {
    margin-top: 35px;
}

article.detail .article-cta-block .cta-button,
.detail .article-cta-block .cta-button {
    background: linear-gradient(135deg, #ffd93d 0%, #ffed4e 50%, #fff9a5 100%);
    color: #1e4082;
    border: none;
    padding: 22px 55px;
    font-size: 19px;
    font-weight: 700;
    border-radius: 50px;
    box-shadow: 0 10px 30px rgba(255, 217, 61, 0.6), 
                0 0 0 4px rgba(255, 217, 61, 0.25),
                0 0 40px rgba(255, 217, 61, 0.3);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
}

article.detail .article-cta-block .cta-button::before,
.detail .article-cta-block .cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.6s;
}

article.detail .article-cta-block .cta-button:hover,
.detail .article-cta-block .cta-button:hover {
    background: linear-gradient(135deg, #ffed4e 0%, #fff9a5 50%, #ffd93d 100%);
    box-shadow: 0 15px 40px rgba(255, 217, 61, 0.8), 
                0 0 0 5px rgba(255, 217, 61, 0.35),
                0 0 60px rgba(255, 217, 61, 0.5);
    transform: translateY(-5px) scale(1.03);
    color: #0d2d5a;
}

article.detail .article-cta-block .cta-button:hover::before,
.detail .article-cta-block .cta-button:hover::before {
    left: 100%;
}

article.detail .article-cta-block .cta-button:active,
.detail .article-cta-block .cta-button:active {
    transform: translateY(-2px) scale(1);
    box-shadow: 0 6px 20px rgba(255, 217, 61, 0.5), 0 0 0 3px rgba(255, 217, 61, 0.2);
}

article.detail .article-cta-block .cta-button .icon,
.detail .article-cta-block .cta-button .icon {
    font-size: 22px;
    margin-right: 0;
    transition: transform 0.3s ease;
}

article.detail .article-cta-block .cta-button:hover .icon,
.detail .article-cta-block .cta-button:hover .icon {
    transform: scale(1.15) rotate(5deg);
}

/* Fallback для CTA блока внутри контента (если используется в старых статьях) */
article.detail .content > div.cta-block,
.detail .content > div.cta-block {
    background: linear-gradient(135deg, #27509e 0%, #1e4082 50%, #0d2d5a 100%);
    color: white;
    padding: 50px 40px;
    border-radius: 16px;
    margin: 50px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(39, 80, 158, 0.3);
}

article.detail .content > div.cta-block h3,
.detail .content > div.cta-block h3 {
    margin: 0 0 20px 0;
    color: white;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    border-bottom: none;
    padding-bottom: 0;
}

article.detail .content > div.cta-block p,
.detail .content > div.cta-block p {
    font-size: 18px;
    line-height: 1.7;
    margin: 0 0 15px 0;
    color: rgba(255, 255, 255, 0.95);
}

/* ============================================
   FAQ / АККОРДЕОН
   ============================================ */

article.detail .content .toogle-accordion,
.detail .content .toogle-accordion {
    margin: 40px 0;
}

article.detail .content .toogle-accordion section.toggle,
.detail .content .toogle-accordion section.toggle {
    margin-bottom: 14px;
    border: 1px solid #e6ebf0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(18, 40, 66, 0.05);
    overflow: hidden;
    transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}

article.detail .content .toogle-accordion section.toggle label,
.detail .content .toogle-accordion section.toggle label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 16px 18px;
    font-size: 18px;
    line-height: 1.45;
    font-weight: 600;
    color: #1f2d3d;
    background: #fff;
    border-left: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

article.detail .content .toogle-accordion section.toggle.active label,
.detail .content .toogle-accordion section.toggle.active label {
    background: #f5f8fc;
    color: #163b73;
}

article.detail .content .toogle-accordion section.toggle .toggle-content,
.detail .content .toogle-accordion section.toggle .toggle-content {
    padding: 0 18px 16px;
    background: #f9fbfd;
    border-top: 1px solid #edf2f7;
}

article.detail .content .toogle-accordion section.toggle .toggle-content p,
.detail .content .toogle-accordion section.toggle .toggle-content p {
    margin: 0;
    line-height: 1.7;
    color: #3a4b5f;
    font-size: 18px;
}

article.detail .content .toogle-accordion section.toggle label i.icon-minus,
.detail .content .toogle-accordion section.toggle label i.icon-minus {
    display: none !important;
}

article.detail .content .toogle-accordion section.toggle label i.icon-plus,
.detail .content .toogle-accordion section.toggle label i.icon-plus {
    display: inline !important;
}

article.detail .content .toogle-accordion section.toggle.active label i.icon-minus,
.detail .content .toogle-accordion section.toggle.active label i.icon-minus {
    display: inline !important;
}

article.detail .content .toogle-accordion section.toggle.active label i.icon-plus,
.detail .content .toogle-accordion section.toggle.active label i.icon-plus {
    display: none !important;
}

article.detail .content .toogle-accordion section.toggle label i.icon-plus,
article.detail .content .toogle-accordion section.toggle label i.icon-minus,
.detail .content .toogle-accordion section.toggle label i.icon-plus,
.detail .content .toogle-accordion section.toggle label i.icon-minus {
    margin-right: 0;
    width: 18px;
    text-align: center;
    color: #27509e;
}

article.detail .content .toogle-accordion section.toggle label::before,
.detail .content .toogle-accordion section.toggle label::before {
    display: none !important;
}

article.detail .content .toogle-accordion section.toggle .toggle-content,
.detail .content .toogle-accordion section.toggle .toggle-content {
    display: none !important;
}

article.detail .content .toogle-accordion section.toggle.active .toggle-content,
.detail .content .toogle-accordion section.toggle.active .toggle-content {
    display: block !important;
    animation: faqFadeIn 0.26s ease;
}

article.detail .content .toogle-accordion section.toggle:hover,
.detail .content .toogle-accordion section.toggle:hover {
    border-color: #d5e1ef;
    box-shadow: 0 10px 28px rgba(18, 40, 66, 0.08);
    transform: translateY(-1px);
}

article.detail .content .toogle-accordion section.toggle.active,
.detail .content .toogle-accordion section.toggle.active {
    border-color: #c9d9ec;
    box-shadow: 0 12px 32px rgba(39, 80, 158, 0.12);
}

@keyframes faqFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   ССЫЛКИ
   ============================================ */

article.detail .content a,
.detail .content a {
    color: #27509e;
    text-decoration: underline;
    transition: color 0.3s ease;
}

article.detail .content a:hover,
.detail .content a:hover {
    color: #1e4082;
    text-decoration: none;
}

/* ============================================
   АДАПТИВНОСТЬ
   ============================================ */

@media (max-width: 767px) {
    article.detail .content h2,
    .detail .content h2 {
        font-size: 26px;
        margin: 40px 0 20px 0;
    }
    
    article.detail .content h3,
    .detail .content h3 {
        font-size: 20px;
        margin: 30px 0 15px 0;
    }
    
    article.detail .content blockquote,
    .detail .content blockquote {
        padding: 25px 25px 25px 70px;
        margin: 30px 0;
    }
    
    article.detail .content blockquote::before,
    .detail .content blockquote::before {
        font-size: 60px;
        left: 20px;
        top: 15px;
    }
    
    article.detail .content blockquote p,
    .detail .content blockquote p {
        font-size: 16px;
    }
    
    article.detail .article-cta-block,
    .detail .article-cta-block {
        padding: 40px 25px;
        margin: 50px 0;
        border-radius: 16px;
    }
    
    article.detail .article-cta-block h3,
    .detail .article-cta-block h3 {
        font-size: 28px;
        margin-bottom: 20px;
    }
    
    article.detail .article-cta-block .cta-description,
    .detail .article-cta-block .cta-description {
        font-size: 18px;
        margin-bottom: 15px;
    }
    
    article.detail .article-cta-block .cta-subtitle,
    .detail .article-cta-block .cta-subtitle {
        font-size: 16px;
        margin-bottom: 30px;
    }
    
    article.detail .article-cta-block .cta-button,
    .detail .article-cta-block .cta-button {
        padding: 16px 20px !important;
        font-size: 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        letter-spacing: 0.5px !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        line-height: 1.4 !important;
        min-height: auto !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        text-align: center !important;
    }
    
    article.detail .article-cta-block .cta-button .icon,
    .detail .article-cta-block .cta-button .icon {
        font-size: 18px;
        flex-shrink: 0;
    }
    
    /* Для очень маленьких экранов */
    @media (max-width: 480px) {
        article.detail .article-cta-block .cta-button,
        .detail .article-cta-block .cta-button {
            padding: 14px 16px !important;
            font-size: 13px !important;
            letter-spacing: 0.3px !important;
            gap: 8px !important;
        }
        
        article.detail .article-cta-block .cta-button .icon,
        .detail .article-cta-block .cta-button .icon {
            font-size: 16px !important;
        }
    }
    
    /* Для средних экранов (планшеты) */
    @media (min-width: 481px) and (max-width: 767px) {
        article.detail .article-cta-block .cta-button,
        .detail .article-cta-block .cta-button {
            padding: 15px 25px !important;
            font-size: 15px !important;
        }
    }
    
    article.detail .content > div:has(h3 + p + div:has(.btn)),
    .detail .content > div:has(h3 + p + div:has(.btn)) {
        padding: 30px 20px;
    }
    
    article.detail .content > div:has(h3 + p + div:has(.btn)) h3,
    .detail .content > div:has(h3 + p + div:has(.btn)) h3 {
        font-size: 24px;
    }
    
    article.detail .content > div:has(h3 + p + div:has(.btn)) p,
    .detail .content > div:has(h3 + p + div:has(.btn)) p {
        font-size: 16px;
    }

    article.detail .content .toogle-accordion section.toggle,
    .detail .content .toogle-accordion section.toggle {
        border-radius: 12px;
        margin-bottom: 12px;
    }

    article.detail .content .toogle-accordion section.toggle label,
    .detail .content .toogle-accordion section.toggle label {
        padding: 14px 14px;
        font-size: 16px;
    }

    article.detail .content .toogle-accordion section.toggle .toggle-content,
    .detail .content .toogle-accordion section.toggle .toggle-content {
        padding: 0 14px 14px;
    }

    article.detail .content .toogle-accordion section.toggle .toggle-content p,
    .detail .content .toogle-accordion section.toggle .toggle-content p {
        font-size: 16px;
    }
}

/* ============================================
   UNIFIED ARTICLE DESIGN SYSTEM
   Современная единая стилизация контента статей
   ============================================ */

article.detail .content,
.detail .content {
    --article-text: #1f2d3d;
    --article-muted: #5d6b7a;
    --article-title: #122a44;
    --article-accent: #27509e;
    --article-accent-soft: #eef4ff;
    --article-border: #e3eaf2;
    --article-surface: #ffffff;
    --article-surface-soft: #f7fafe;
    --article-shadow: 0 10px 30px rgba(15, 35, 64, 0.08);

    color: var(--article-text);
    font-size: 20px;
    line-height: 1.75;
}

article.detail .content > *:first-child,
.detail .content > *:first-child {
    margin-top: 0 !important;
}

article.detail .content h2,
.detail .content h2,
article.detail .content h3,
.detail .content h3,
article.detail .content h4,
.detail .content h4,
article.detail .content h5,
.detail .content h5,
article.detail .content h6,
.detail .content h6 {
    color: var(--article-title);
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -0.02em;
}

article.detail .content h2,
.detail .content h2 {
    font-size: clamp(30px, 4vw, 42px);
    margin: 48px 0 22px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--article-border);
}

article.detail .content h3,
.detail .content h3 {
    font-size: clamp(24px, 3vw, 32px);
    margin: 38px 0 16px;
}

article.detail .content h4,
.detail .content h4 {
    font-size: clamp(20px, 2.2vw, 26px);
    margin: 30px 0 12px;
}

article.detail .content h5,
.detail .content h5,
article.detail .content h6,
.detail .content h6 {
    font-size: clamp(18px, 2vw, 22px);
    margin: 24px 0 10px;
}

article.detail .content p,
.detail .content p,
article.detail .content li,
.detail .content li,
article.detail .content td,
.detail .content td,
article.detail .content th,
.detail .content th,
article.detail .content dd,
.detail .content dd {
    color: var(--article-text);
    font-size: 20px;
    line-height: 1.75;
}

article.detail .content p,
.detail .content p {
    margin: 0 0 24px;
}

article.detail .content strong,
.detail .content strong,
article.detail .content b,
.detail .content b {
    font-weight: 700;
    color: #10253d;
}

article.detail .content em,
.detail .content em,
article.detail .content i,
.detail .content i {
    color: #26384c;
}

article.detail .content a,
.detail .content a {
    color: var(--article-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

article.detail .content a:hover,
.detail .content a:hover {
    color: #173d77;
}

article.detail .content ul,
article.detail .content ol,
.detail .content ul,
.detail .content ol {
    margin: 18px 0 26px;
    padding-left: 30px;
}

article.detail .content ul li,
article.detail .content ol li,
.detail .content ul li,
.detail .content ol li {
    margin: 0 0 10px;
}

article.detail .content ul li::marker,
.detail .content ul li::marker,
article.detail .content ol li::marker,
.detail .content ol li::marker {
    color: var(--article-accent);
}

article.detail .content blockquote,
.detail .content blockquote {
    margin: 34px 0;
    padding: 24px 26px;
    border-left: 4px solid var(--article-accent);
    border-radius: 12px;
    background: linear-gradient(135deg, #f5f9ff 0%, #eef5ff 100%);
    box-shadow: var(--article-shadow);
}

article.detail .content blockquote p,
.detail .content blockquote p {
    margin: 0;
    font-size: 19px;
}

article.detail .content hr,
.detail .content hr {
    border: 0;
    border-top: 1px solid var(--article-border);
    margin: 34px 0;
}

article.detail .content pre,
.detail .content pre {
    margin: 24px 0;
    padding: 16px 18px;
    background: #0f1a2a;
    color: #e7eef7;
    border-radius: 12px;
    overflow: auto;
    font-size: 15px;
    line-height: 1.6;
}

article.detail .content code,
.detail .content code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 0.88em;
}

article.detail .content p code,
.detail .content p code,
article.detail .content li code,
.detail .content li code {
    background: #edf2f8;
    color: #193254;
    padding: 0.12em 0.35em;
    border-radius: 6px;
}

article.detail .content table,
.detail .content table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 24px 0 30px;
    background: var(--article-surface);
    border: 1px solid var(--article-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(15, 35, 64, 0.05);
}

article.detail .content table th,
.detail .content table th {
    background: #f1f6fd;
    color: #16385f;
    font-weight: 700;
    border-bottom: 1px solid var(--article-border);
}

article.detail .content table th,
.detail .content table th,
article.detail .content table td,
.detail .content table td {
    padding: 12px 14px;
    text-align: left;
    border-right: 1px solid var(--article-border);
}

article.detail .content table th:last-child,
.detail .content table th:last-child,
article.detail .content table td:last-child,
.detail .content table td:last-child {
    border-right: 0;
}

article.detail .content table tr + tr td,
.detail .content table tr + tr td {
    border-top: 1px solid var(--article-border);
}

article.detail .content figure,
.detail .content figure {
    margin: 30px 0;
}

article.detail .content img,
.detail .content img {
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(15, 35, 64, 0.14);
}

article.detail .content figure figcaption,
.detail .content figure figcaption {
    margin-top: 10px;
    color: var(--article-muted);
    font-size: 15px;
    line-height: 1.55;
}

article.detail .content iframe,
.detail .content iframe,
article.detail .content video,
.detail .content video,
article.detail .content audio,
.detail .content audio {
    width: 100%;
    max-width: 100%;
    border-radius: 12px;
    margin: 22px 0;
    border: 1px solid var(--article-border);
}

article.detail .content kbd,
.detail .content kbd {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 0.82em;
    padding: 0.14em 0.42em;
    border-radius: 6px;
    border: 1px solid #ccd8e6;
    background: #f3f7fc;
    color: #173457;
}

article.detail .content mark,
.detail .content mark {
    background: #fff3bf;
    color: #3f2f00;
    padding: 0.05em 0.2em;
    border-radius: 4px;
}

article.detail .content details,
.detail .content details {
    margin: 18px 0;
    padding: 12px 14px;
    border: 1px solid var(--article-border);
    border-radius: 10px;
    background: var(--article-surface-soft);
}

article.detail .content details summary,
.detail .content details summary {
    cursor: pointer;
    font-weight: 600;
    color: #173457;
}

article.detail .content dl,
.detail .content dl {
    margin: 20px 0;
}

article.detail .content dt,
.detail .content dt {
    font-weight: 700;
    color: #133355;
    margin: 0 0 6px;
}

article.detail .content dd,
.detail .content dd {
    margin: 0 0 14px;
    color: var(--article-text);
}

/* Унифицированные callout-блоки, которые GPT сможет использовать повторно */
article.detail .content .info-block,
.detail .content .info-block,
article.detail .content .note-block,
.detail .content .note-block,
article.detail .content .warning-block,
.detail .content .warning-block,
article.detail .content .success-block,
.detail .content .success-block {
    border-radius: 12px;
    padding: 18px 20px;
    margin: 24px 0;
    border: 1px solid var(--article-border);
    background: var(--article-surface-soft);
}

article.detail .content .info-block,
.detail .content .info-block,
article.detail .content .note-block,
.detail .content .note-block {
    border-left: 4px solid #3a78d6;
}

article.detail .content .warning-block,
.detail .content .warning-block {
    border-left: 4px solid #d94848;
    background: #fff6f6;
}

article.detail .content .success-block,
.detail .content .success-block {
    border-left: 4px solid #2f9e62;
    background: #f4fff8;
}

@media (max-width: 991px) {
    article.detail .content,
    .detail .content,
    article.detail .content p,
    .detail .content p,
    article.detail .content li,
    .detail .content li,
    article.detail .content td,
    .detail .content td,
    article.detail .content th,
    .detail .content th,
    article.detail .content dd,
    .detail .content dd {
        font-size: 18px;
        line-height: 1.72;
    }
}

@media (max-width: 767px) {
    article.detail .content,
    .detail .content,
    article.detail .content p,
    .detail .content p,
    article.detail .content li,
    .detail .content li,
    article.detail .content td,
    .detail .content td,
    article.detail .content th,
    .detail .content th,
    article.detail .content dd,
    .detail .content dd {
        font-size: 16px;
        line-height: 1.68;
    }

    article.detail .content h2,
    .detail .content h2 {
        margin: 34px 0 16px;
        font-size: 28px;
    }

    article.detail .content h3,
    .detail .content h3 {
        margin: 26px 0 12px;
        font-size: 23px;
    }

    article.detail .content table,
    .detail .content table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* ============================================
   RELATED ARTICLES
   ============================================ */

article.detail .related-articles-section,
.detail .related-articles-section {
    margin: 56px 0 16px;
}

article.detail .related-articles-title,
.detail .related-articles-title {
    margin: 0 0 18px;
    font-size: clamp(24px, 3vw, 32px);
    color: #122a44;
    line-height: 1.3;
    font-weight: 700;
}

article.detail .related-articles-grid,
.detail .related-articles-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

article.detail .related-article-card,
.detail .related-article-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e3eaf2;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(16, 38, 66, 0.08);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

article.detail .related-article-card:hover,
.detail .related-article-card:hover {
    transform: translateY(-4px) scale(1.015);
    box-shadow: 0 16px 34px rgba(16, 38, 66, 0.14);
    border-color: #d0dced;
}

article.detail .related-article-image-wrap,
.detail .related-article-image-wrap {
    display: block;
    background: #eef4fc;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

article.detail .related-article-image,
.detail .related-article-image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100% !important;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
    margin: 0 !important;
    padding: 0 !important;
}

article.detail .related-article-body,
.detail .related-article-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 16px 18px;
    height: 100%;
}

article.detail .related-article-name,
.detail .related-article-name {
    margin: 0;
    font-size: 20px;
    line-height: 1.4;
    font-weight: 700;
}

article.detail .related-article-name a,
.detail .related-article-name a {
    color: #122a44;
    text-decoration: none;
}

article.detail .related-article-name a:hover,
.detail .related-article-name a:hover {
    color: #27509e;
}

article.detail .related-article-preview,
.detail .related-article-preview {
    margin: 0;
    color: #4f6072;
    font-size: 16px;
    line-height: 1.65;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

article.detail .related-article-btn,
.detail .related-article-btn {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    padding: 10px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, #27509e 0%, #1e4180 100%);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(39, 80, 158, 0.26);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

article.detail .related-article-btn:hover,
.detail .related-article-btn:hover {
    color: #fff;
    background: linear-gradient(135deg, #2e5db7 0%, #254c98 100%);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(39, 80, 158, 0.32);
}

@media (max-width: 1199px) {
    article.detail .related-articles-grid,
    .detail .related-articles-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    article.detail .related-articles-section,
    .detail .related-articles-section {
        margin-top: 44px;
    }

    article.detail .related-articles-grid,
    .detail .related-articles-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    article.detail .related-article-body,
    .detail .related-article-body {
        padding: 14px 14px 16px;
    }

    article.detail .related-article-name,
    .detail .related-article-name {
        font-size: 18px;
    }

    article.detail .related-article-preview,
    .detail .related-article-preview {
        font-size: 15px;
        -webkit-line-clamp: 5;
    }
}