/* Стили для страницы отдельной статьи блога учебного центра "Что делать Квалификация" */

/* ===== ХЛЕБНЫЕ КРОШКИ ===== */
.breadcrumbs-section {
    background-color: var(--color-bg-pages);
    padding: 20px 0;
}

.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.breadcrumb-link {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-120);
    letter-spacing: var(--letter-spacing-minus1);
}

.breadcrumb-link:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.breadcrumb-separator {
    color: var(--color-text-gray);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-120);
    letter-spacing: var(--letter-spacing-minus1);
}

.breadcrumb-current {
    color: var(--color-text-gray);
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-120);
    letter-spacing: var(--letter-spacing-minus1);
}

/* ===== ОСНОВНОЙ КОНТЕНТ СТАТЬИ ===== */
.article-content {
    background-color: var(--color-bg-pages);
    padding: 40px 0 80px;
}

.article-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 60px;
}

.article-main {
    min-width: 0;
    background-color: var(--color-bg-plashka);
    border-radius: 30px;
    padding: 40px;
}

/* ===== ЗАГОЛОВОК СТАТЬИ ===== */
.article-header {
    position: static; /* Отключаем любое закрепление */
    background: none; /* Убираем любой фон */
    background-color: transparent; /* Прозрачный фон */
}

.article-category-wrapper {
    margin-bottom: 20px;
}

.article-title {
    color: var(--color-text-main);
    margin-bottom: 24px;
    line-height: 1.2;
    position: static; /* Отключаем любое закрепление заголовка */
}

.article-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.article-author-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.author-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.author-details {
    display: flex;
    flex-direction: column;
}

.author-name {
    color: var(--color-text-main);
    margin-bottom: 2px;
}

.author-role {
    color: var(--color-text-gray);
}

.article-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.article-date,
.article-read-time,
.article-views {
    color: var(--color-text-gray);
}

/* ===== ГЛАВНОЕ ИЗОБРАЖЕНИЕ ===== */
.article-hero-image {
    border-radius: 12px;
    overflow: hidden;
}

.article-hero-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
}

/* ===== КОМПАКТНАЯ ИНФОРМАЦИЯ ОБ АВТОРЕ ===== */
.article-author-compact {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 0px 0;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border-light);
}

.author-avatar-small {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center center;
    background-color: var(--color-bg-light);
    border: 2px solid var(--color-border-light);
    flex-shrink: 0;
}

.author-info-compact {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.author-name-small {
    color: var(--color-text-main);
}

.author-meta-small {
    color: var(--color-text-gray);
}

/* Дополнительные стили для блока автора */
.article-author-compact.no-avatar {
    gap: 0;
}

.article-author-compact.no-avatar .author-info-compact {
    margin-left: 0;
}

.author-info-compact {
    transition: margin-left 0.3s ease;
}

/* Блок только с датой (без автора) */
.article-meta-only {
    margin: 0px 0 40px 0;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border-light);
}

.article-date-time {
    color: var(--color-text-gray);
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-140);
}

/* ===== ВВОДНЫЙ ТЕКСТ ===== */
.article-intro {
    margin-bottom: 40px;
    padding: 0;
}

.lead-paragraph {
    color: var(--color-text-main);
    margin: 0;
}

/* ===== СОДЕРЖАНИЕ СТАТЬИ ===== */
.article-toc {
    background-color: var(--color-bg-pages);
    padding: 28px;
    border-radius: 30px;
    margin-bottom: 40px;
    display: none; /* на десктопе скрываем версию внутри контента */
}

/* Сайдбарная версия по умолчанию видна на десктопе */
.sidebar-widget.sticky-toc { display: block; }

.article-toc h3 {
    color: var(--color-text-main);
    margin-bottom: 16px;
}

.toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.toc-list li {
    margin-bottom: 8px;
}

.toc-list a {
    color: var(--color-text-plashka);
    text-decoration: none;
    transition: color 0.3s ease;
    display: block;
    padding: 4px 0;
}

.toc-list a:hover {
    color: var(--color-primary);
}

/* Единый стиль пунктов оглавления (в статье и в сайдбаре) */
.article-toc .toc-list a,
.toc-link {
    color: var(--color-text-plashka);
    text-decoration: none;
    padding: 8px 0;
    border-radius: 6px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    display: block;
}

.article-toc .toc-list a:hover,
.article-toc .toc-list a.active,
.toc-link:hover,
.toc-link.active {
    color: var(--color-primary);
    background-color: transparent;
    border-color: transparent;
}

/* Выравнивание отступов элементов списка в .article-toc */
.article-toc .toc-list li {
    margin-bottom: 8px;
}

/* ===== ОСНОВНОЙ ТЕКСТ (.article-body) =====
   Размеры/отступы/межстрочный 1-в-1 с эталоном 4dk-pages/Статья/.
   Источник — инлайн-стили из Google Docs экспорта:
     p:  font 12pt (16px),  line-height 1.38,  padding-bottom 12pt (16px)
     h2: font 16pt (21.3px), line-height 1.38, padding 12pt 0 (16px 0)
     h3: font 14pt (18.7px)  — на случай, если автор использует h3
   Сброс * { margin: 0 } выше делает наследование margin невозможным,
   поэтому все интервалы заданы явно.
*/
.article-body {
    font-family: var(--font-primary);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-regular);
    line-height: 1.38;
    color: var(--color-text-main);
    letter-spacing: 0;
}

.article-body p {
    font-family: var(--font-primary);
    font-size: var(--font-size-16);            /* 16px (12pt) */
    font-weight: var(--font-weight-regular);
    line-height: 1.38;
    color: var(--color-text-main);
    letter-spacing: 0;
    margin: 0 0 16px 0;                         /* 12pt bottom — как Google Docs */
}

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

.article-body h2 {
    font-family: var(--font-primary);
    font-size: 1.333rem;                        /* 21.3px = 16pt */
    font-weight: var(--font-weight-semibold);
    line-height: 1.38;
    color: var(--color-text-main);
    letter-spacing: 0;
    margin: 0;
    padding: 16px 0;                            /* 12pt 0 — как Google Docs */
    scroll-margin-top: 120px;                   /* для якорей из sticky-toc */
}

.article-body h3 {
    font-family: var(--font-primary);
    font-size: 1.167rem;                        /* 18.7px = 14pt */
    font-weight: var(--font-weight-semibold);
    line-height: 1.38;
    color: var(--color-text-main);
    letter-spacing: 0;
    margin: 0;
    padding: 14px 0 8px;
}

.article-body h4 {
    font-family: var(--font-primary);
    font-size: var(--font-size-18);             /* 18px */
    font-weight: var(--font-weight-semibold);
    line-height: 1.38;
    color: var(--color-text-main);
    letter-spacing: 0;
    margin: 0;
    padding: 10px 0 6px;
}

.article-body ul,
.article-body ol {
    margin: 0 0 16px 0;
    padding-left: 0;
    list-style: none;
}

.article-body li {
    font-family: var(--font-primary);
    font-size: var(--font-size-16);             /* 16px — внутри article-body списки тоже 16px */
    font-weight: var(--font-weight-regular);
    line-height: 1.38;
    color: var(--color-text-main);
    letter-spacing: 0;
    margin-bottom: 6px;
    position: relative;
    padding-left: 24px;
}

.article-body ul li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 7px;
    width: 8px;
    height: 8px;
    background-color: var(--color-primary);
    border-radius: 50%;
}

.article-body ol {
    counter-reset: dk-art-item;
}

.article-body ol li {
    counter-increment: dk-art-item;
}

.article-body ol li::before {
    content: counter(dk-art-item) ".";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.article-body a {
    font-family: var(--font-primary);
    font-size: inherit;
    font-weight: inherit;
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.3s ease;
    letter-spacing: 0;
    line-height: inherit;
}

.article-body a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.article-body strong,
.article-body b {
    font-weight: var(--font-weight-semibold);
}

.article-body em,
.article-body i {
    font-style: italic;
}

.article-body img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 16px 0;
    display: block;
}

.article-body blockquote {
    background-color: var(--color-bg-pages);
    border-radius: 16px;
    padding: 16px 20px;
    margin: 16px 0;
    border-left: 3px solid var(--color-primary);
    font-style: italic;
}

.article-body blockquote p:last-child {
    margin-bottom: 0;
}

/* Сохраняем для обратной совместимости со старыми статьями, у которых был .content-section */
.content-section {
    margin-bottom: 50px;
    scroll-margin-top: 120px;
}

.content-section:last-child {
    margin-bottom: 0;
}

.content-section h2 {
    color: var(--color-text-main);
    margin-bottom: 20px;
}

.content-section h3 {
    color: var(--color-text-main);
    margin: 30px 0 16px 0;
}

.content-section p {
    color: var(--color-text-main);
    margin-bottom: 16px;
}

.content-section ul,
.content-section ol {
    margin: 20px 0;
    padding-left: 24px;
}

.content-section li {
    color: var(--color-text-main);
    margin-bottom: 8px;
}

.content-section ul {
    list-style: none;
    padding-left: 0;
}

.content-section ul li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
}

.content-section ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    background-color: var(--color-primary);
    border-radius: 50%;
}

/* ===== СПЕЦИАЛЬНЫЕ БЛОКИ ===== */

/* Блок цитаты */
.quote-block {
    background-color: var(--color-bg-pages);
    border-radius: 30px;
    padding: 28px;
    margin: 30px 0;
    position: relative;
}

.quote-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    color: var(--color-primary);
}

.quote-icon svg {
    width: 32px;
    height: 32px;
    fill: currentColor;
}

.quote-icon img {
    width: 32px;
    height: 32px;
}

.quote-content {
    text-align: center;
}

.quote-content p {
    margin: 0 0 16px 0;
    font-style: italic;
}

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

.quote-text {
    margin-bottom: 16px;
}

/* Таблица сравнения времени */
.timing-table-wrapper {
    margin: 30px 0;
    overflow-x: auto;
    border: 1px solid var(--color-border-light);
    border-radius: 28px;
    overflow: hidden;
}

.timing-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.timing-table th {
    padding: 16px 20px;
    text-align: center;
    color: var(--color-text-white);
    background-color: var(--color-primary);
    border-right: 1px solid var(--color-border-light);
    width: 50%;
}

.timing-table th:last-child {
    border-right: none;
}

.timing-table td {
    padding: 16px 20px;
    border: 1px solid var(--color-border-light);
    vertical-align: top;
    color: var(--color-text-main);
    width: 50%;
}

/* Ключевые выводы */
.key-takeaways {
    background: var(--color-bg-pages);
    padding: 30px;
    border-radius: 30px;
    margin: 30px 0;
}

.key-takeaways h4 {
    color: var(--color-primary);
    margin-bottom: 20px;
}

.key-takeaways ul {
    margin: 0;
}

.key-takeaways li {
    color: var(--color-text-main);
    margin-bottom: 12px;
}

/* ===== ТЕГИ СТАТЬИ ===== */
.article-tags {
    margin: 50px 0;
    padding: 30px 0;
    border-top: 2px solid var(--color-border-light);
}

.article-tags h3 {
    color: var(--color-text-main);
    margin-bottom: 16px;
}

.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ===== ОБ АВТОРЕ ===== */
.author-bio {
    background-color: var(--color-bg-pages);
    border-radius: 30px;
    padding: 28px;
    margin: 40px 0;
}

.author-bio-title {
    color: var(--color-primary);
    margin-bottom: 20px;
}

.author-bio-info {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.author-bio-avatar {
    flex-shrink: 0;
}

.author-bio-avatar img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.author-bio-content h4 {
    color: var(--color-text-main);
    margin-bottom: 4px;
}

.author-bio-role {
    color: var(--color-text-gray);
    margin-bottom: 12px;
}

/* ===== ПРИЗЫВ К ДЕЙСТВИЮ В СТАТЬЕ ===== */
.article-cta {
    background-image: url('../img/webp/CTA_banner.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--color-text-main);
    padding: 40px;
    border-radius: 30px;
    margin: 40px 0 40px 0;
}

.article-cta .cta-content {
    display: grid;
    grid-template-columns: 1fr 360px;
    align-items: center;
    gap: 24px;
}

.article-cta .cta-text h3 {
    margin-bottom: 12px;
}

.article-cta .cta-text .text-p2 {
    margin-bottom: 24px;
}
/* ===== ПОХОЖИЕ СТАТЬИ ===== */
.related-articles-section {
    background-color: var(--color-bg-pages);
    padding-bottom: 80px;
}

.related-articles-section h2 {
    color: var(--color-text-main);
    margin-left: 28px;
    margin-bottom: 40px;
}

.related-articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    align-items: start; /* высота карточек по контенту */
    /* скрываем нативный скролл, оставляем кастомный */
    -ms-overflow-style: none; /* IE и старый Edge */
    scrollbar-width: none;    /* Firefox */
}
.related-articles-grid::-webkit-scrollbar { /* Chrome/Safari */
    display: none;
    height: 0;
    background: transparent;
}

.related-article-card {
    background-color: var(--color-bg-plashka);
    border-radius: 30px;
    overflow: hidden;
    border: 1px solid var(--color-border-light);
    display: flex;              /* тянем карточку по высоте */
    flex-direction: column;
    height: 100%;               /* занимает всю высоту ряда */
    position: relative;
}

.related-card-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    text-indent: -9999px; /* кликабельная зона без визуального текста */
}

.related-article-card:hover {
    transform: translateY(-5px);
}

.related-article-image {
    flex-shrink: 0;
    width: 100%;
    height: 220px;
    border-radius: 6px;
    overflow: hidden;
}

.related-article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.related-article-content {
    padding: 28px;
    display: flex;              /* содержимое заполняет высоту карточки */
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.related-article-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-text-gray);
    margin-bottom: 16px;
}

.related-article-views {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-gray);
}

.related-article-desc {
    color: var(--color-text-plashka);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 12px;
    margin-bottom: 16px;
}

.related-article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;           /* теги всегда у нижней границы */
}

.related-article-content h4 {
    color: var(--color-text-main);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-article-content a {
    color: var(--color-text-main);
    text-decoration: none;
    transition: color 0.3s ease;
}

.related-article-content a:hover {
    color: var(--color-primary);
}

.related-article-date {
    color: var(--color-text-gray);
}

/* ===== БОКОВАЯ ПАНЕЛЬ ===== */
.article-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 100px;
    align-self: flex-start;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-light) transparent;
}

/* Стилизация скроллбара для webkit браузеров */
.article-sidebar::-webkit-scrollbar {
    width: 6px;
}

.article-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.article-sidebar::-webkit-scrollbar-thumb {
    background: var(--color-border-light);
    border-radius: 3px;
}

.article-sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-gray);
}

.sidebar-widget {
    background-color: var(--color-bg-plashka);
    border-radius: 30px;
    padding: 24px;
}

.sidebar-widget h4 {
    color: var(--color-text-main);
    margin-bottom: 16px;
}

/* Статичное содержание */
.sticky-toc {
    position: static;
}

.toc-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toc-link:hover,
.toc-link.active {
    color: var(--color-primary);
    background-color: transparent;
    border-color: transparent;
}

/* Кнопки поделиться */
.share-buttons {
    display: flex;
    gap: 12px;
}

.share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: var(--color-bg-pages);
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid var(--color-border-light);
}

.share-btn:hover {
    background-color: var(--color-bg-green-shield);
}

.share-btn img {
    width: 20px;
    height: 20px;
}

/* Рекламный блок */
.promo-widget {
    background-color: var(--color-primary);
    border: none;
    border-radius: 30px;
}

.promo-content h4 {
    color: var(--color-text-white);
}

.promo-content .text-p2 {
    color: var(--color-text-white);
    margin-bottom: 16px;
}

.promo-content ul {
    margin: 16px 0;
    padding-left: 20px;
}

.promo-content li {
    color: var(--color-text-white);
    margin-bottom: 6px;
}

/* ===== СОВЕТ ЭКСПЕРТА ===== */
.expert-advice {
    display: grid;
    grid-template-columns: 96px 1fr;
    background-color: var(--color-bg-pages);
    border-radius: 30px;
    padding: 28px;
    margin: 30px 0;
}

.expert-illustration {
    width: 76px;
    height: 76px;
    border-radius: 20px;
    background-color: var(--color-bg-pages);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

.expert-illustration svg {
    width: 62px;
    height: 62px;
    display: block;
}

.expert-title {
    color: var(--color-primary);
    margin-bottom: 8px;
}

.expert-text {
    color: var(--color-text-main);
}

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

/* Планшеты */
@media screen and (max-width: 1200px) {
    .article-layout {
        grid-template-columns: 1fr 280px;
        gap: 40px;
    }
    
    .article-main {
        padding: 30px;
    }
}

@media screen and (max-width: 1024px) {
    .article-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    /* Порядок: сначала контент, затем сайдбар */
    .article-main { order: 1; }
    .article-sidebar { order: 2; position: static; }
    .related-articles-section { order: 3; padding: 40px 0; }

    /* Горизонтальный скролл на планшетах и ниже (как в эталоне) */
    .related-articles-grid {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 300px;     /* фиксированная ширина карточки */
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        overflow-x: auto;
        gap: 24px;
        padding-bottom: 8px;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
    }
    .related-article-card { scroll-snap-align: start; }

    .sticky-toc {
        position: static;
    }

    .sidebar-widget {
        border-radius: 24px;
    }

    .related-article-content {
        padding: 20px;
    }
    
    .timing-table th,
    .timing-table td {
        padding: 12px 16px;
    }   
    .article-cta .cta-content {
        grid-template-columns: 1fr 280px;
        gap: 20px;
    }
    .article-cta .cta-illustration {
        height: 160px;
    }
    .content-section {
        scroll-margin-top: 100px;
    }
    /* На планшетах/мобилках показываем оглавление в контенте и скрываем в сайдбаре */
    .article-toc { display: block; }
    .sidebar-widget.sticky-toc { display: none; }
}

/* Мобильные устройства */
@media screen and (max-width: 768px) {
    .article-content { padding: 24px 0 32px; }
    .article-main { padding: 20px; border-radius: 20px; }

    /* Порядок сохраняется: main → sidebar → related */
    .article-main { order: 1; }
    .article-sidebar { order: 2; }
    .related-articles-section { order: 3; padding: 24px 0; }

    /* Скролл карточек на мобилках */
    .related-articles-grid {
        grid-auto-columns: 300px; /* фиксированная ширина карточки */
        gap: 12px;
    }
    
    .article-main {
        padding: 24px;
        border-radius: 24px;
    }
    
    .article-header {
        margin-bottom: 30px;
        padding-bottom: 20px;
    }
    
    .article-author-compact {
        margin: 16px 0 32px 0;
        padding: 12px 0;
    }
    
    .author-avatar-small {
        width: 36px;
        height: 36px;
    }
    
    .article-hero-image img {
        height: 200px;
    }
    
    .article-intro {
        padding: 0;
    }
    
    .article-toc {
        padding: 20px;
    }
    
    .author-bio {
        padding: 24px;
    }
    
    .author-bio-info {
        flex-direction: column;
        gap: 16px;
    }
    
    .author-bio-avatar img {
        width: 60px;
        height: 60px;
    }
    
    .article-cta {
        padding: 30px 20px;
    }
    .article-cta .cta-content {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .article-cta .cta-illustration {
        display: none;
    }
    
    .sidebar-widget {
        padding: 20px;
        border-radius: 24px;
    }
    
    .article-sidebar {
        grid-template-columns: 1fr;
    }

    .related-article-image {
        width: 100%;
        height: 120px;
    }

    .expert-advice {
        grid-template-columns: 1fr;
        text-align: left;
        padding: 20px;
    }
    .expert-illustration {
        width: 72px;
        height: 72px;
        border-radius: 16px;
        margin-bottom: 8px;
    }
    .expert-illustration svg {
        width: 56px;
        height: 56px;
    }
    .content-section {
        scroll-margin-top: 80px;
    }
    /* Дублируем правило для мобильных на всякий случай */
    .article-toc { display: block; }
    .sidebar-widget.sticky-toc { display: none; }
}

/* Очень маленькие экраны */
@media screen and (max-width: 480px) {
    .breadcrumb-current {
        max-width: 200px;
    }
    
    .article-content {
        padding: 20px 0 30px;
    }
    
    .article-main {
        padding: 20px;
        border-radius: 20px;
    }
    
    .article-header {
        margin-bottom: 0;
    }

    .article-title {
        margin-bottom: 0;
    }
    
    .article-author-compact {
        margin: 12px 0 24px 0;
        padding: 8px 0;
        gap: 10px;
    }
    
    .author-avatar-small {
        width: 48px;
        height: 48px;
    }

    .article-hero-image img {
        height: 160px;
    }
    
    .article-intro {
        padding: 0;
    }
    
    .article-toc {
        padding: 16px;
    }
    
    .key-takeaways {
        padding: 20px;
    }
    
    .quote-block {
        padding: 20px;
        margin: 20px 0;
    }
    
    .quote-icon {
        margin-bottom: 16px;
    }
    
    .quote-icon svg {
        width: 28px;
        height: 28px;
    }

    .author-bio {
        padding: 20px;
    }
    
    .author-bio-title {
        margin-bottom: 16px;
    }
    
    .article-cta {
        padding: 24px 16px;
    }
    .article-cta .cta-content {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .sidebar-widget {
        padding: 16px;
        border-radius: 20px;
    }
    
    .related-articles-section {
        padding: 30px 0;
    }
    
    .related-articles-grid {
        gap: 20px;
    }
    
    .related-article-content {
        padding: 16px;
    }
    
    .related-article-image {
        height: 160px;
    }
    
    .timing-table th,
    .timing-table td {
        padding: 10px 12px;
    }
    
    .timing-table-wrapper {
        margin: 20px 0;
    }

    .related-articles-section h2 {
        margin-bottom: 20px;
        margin-left: 20px;
    }
    .article-main,
    .sidebar-widget,
    .article-toc,
    .quote-block,
    .expert-advice,
    .promo-widget,
    .article-cta,
    .related-article-card,
    .author-bio,
    .timing-table-wrapper {
        border-radius: 20px;
    }

    .author-bio {
        margin: 0;
    }

    .article-tags {
        margin: 24px 0;
    }
}

/* Адаптивность для больших экранов */
@media screen and (min-width: 1400px) {
    .article-layout {
        grid-template-columns: 1fr 320px;
        gap: 20px;
    }
    
    .article-main {
        padding: 32px;
    }
    
    .article-sidebar {
        max-height: calc(100vh - 140px);
    }
}

/* Пользовательская полоса прокрутки для related-articles */
.related-scrollbar {
    display: none; /* по умолчанию скрыта на десктопе */
    height: 8px;
    background: transparent;
    position: relative;
    margin-top: 10px;
}

.related-scrollbar-thumb {
    position: absolute;
    left: 20px;
    width: 90px;
    height: 8px;
    background-color: var(--color-primary);
    border-radius: 8px;
}

@media screen and (max-width: 1024px) {
    .related-scrollbar { display: block; }
}