/* <FILE>shared/article-styles.css</FILE> */

/* Подключение шрифта Montserrat */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

/* Основные стили */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.7;
    color: #333;
    background-color: #f8f9fa;
}

/* Основной контент */
main {
    padding-top: 80px;
    min-height: 100vh;
}

/* Хлебные крошки */
.breadcrumbs {
    background: #fff;
    border-bottom: 1px solid #e9ecef;
    padding: 15px 20px;
    max-width: 900px;
    margin: 0 auto;
}

.breadcrumbs ol {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.breadcrumbs ol li {
    color: #6c757d;
}

.breadcrumbs ol li:not(:last-child)::after {
    content: "→";
    margin-left: 8px;
    color: #adb5bd;
}

.breadcrumbs a {
    color: #007bff;
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumbs a:hover {
    color: #0056b3;
    text-decoration: underline;
}

/* Заголовок страницы */
main header {
    background: linear-gradient(135deg, #3b82f6 0%, #16a34a 100%);
    padding: 50px 20px;
    color: white;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
}

main header h1 {
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 15px;
}

main header p {
    font-size: 1.1rem;
    font-weight: 300;
    opacity: 0.9;
}

/* Главный контейнер статьи - все стили определяются здесь */
article {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
    padding: 50px;
    margin: 15px auto 40px auto;
    max-width: 900px;
    animation: fadeIn 0.6s ease-in;
}


/* Заголовки */
article h2 {
    font-size: 1.75rem;
    font-weight: 600;
    color: #2c3e50;
    margin-top: 35px;
    margin-bottom: 10px;
}

article h2:first-child {
    margin-top: 0;
}

article h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2c3e50;
    margin-top: 35px;
    margin-bottom: 12px;
}

/* Параграфы */
article p {
    margin-bottom: 15px;
    line-height: 1.8;
    text-align: justify;
}

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

/* Выделение текста */
article strong {
    font-weight: 600;
    color: #2c3e50;
}


/* Выделение ключевых цифр и данных */
article mark {
    background: #fff3cd;
    color: #856404;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 1.2em;
}

article em {
    font-style: italic;
    color: #555;
}

/* Яркая карточка с ключевым результатом */
article blockquote {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    text-align: center;
    padding: 30px 25px;
    margin: 40px auto;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
    max-width: 400px;
}

article blockquote strong {
    display: block;
    font-size: 1.1rem;
    font-weight: 500;
    color: white;
    margin-bottom: 10px;
    opacity: 0.95;
}

article blockquote span {
    display: block;
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
    color: white;
}
    font-style: italic;
    color: #555;
}

/* Списки */
article ul {
    margin: 20px 0;
    padding-left: 30px;
    list-style-type: disc;
}

article ol {
    margin: 20px 0;
    padding-left: 30px;
    list-style-type: decimal;
}

article ul li,
article ol li {
    margin-bottom: 12px;
    line-height: 1.7;
    list-style-position: outside;
}

article ul li::marker {
    color: #28a745;
    font-size: 1.2em;
}

article ol li::marker {
    color: #28a745;
    font-weight: 600;
}

/* Изображения */
article img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    margin: 40px auto;
    display: block;
    transition: transform 0.3s ease;
}

article img:hover {
    transform: scale(1.02);
}


/* Figure и Figcaption */
article figure {
    margin: 40px auto;
    text-align: center;
}

article figure img {
    margin: 0 auto 15px auto;
}

article figcaption {
    font-size: 0.9rem;
    color: #555;
    font-style: italic;
    line-height: 1.6;
    text-align: center;
    padding: 0 20px;
}


/* Карточка с выделенной информацией */
article aside {
    background: linear-gradient(135deg, #f0f7f0 0%, #e8f5e9 100%);
    border-left: 5px solid #28a745;
    border-radius: 8px;
    padding: 20px 25px;
    margin: 30px 0;
    box-shadow: 0 2px 10px rgba(44, 95, 45, 0.1);
}

article aside p {
    margin-bottom: 10px;
}

article aside ul {
    margin-top: 10px;
    margin-bottom: 0;
}

/* Div-блоки (универсальная стилизация) */
article div {
    margin: 25px 0;
}

/* ----- Оглавление (Table of Contents) | id="contents" ----- */

/* Стилизуем сам блок оглавления */
article #contents {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px 25px;
    margin: 30px 0;
    max-width: 700px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
}

/* Стилизуем <p> "Содержание" внутри оглавления */
article #contents p {
    font-size: 1.25rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 15px;
    text-align: center; /* Отменяем 'text-align: justify' из 'article p' */
}

/* Настройка CSS-счетчиков для авто-нумерации */
article #contents ol {
    list-style-type: none;
    counter-reset: item; 
    padding-left: 10px;
    margin: 0; /* Отменяем 'margin: 20px 0' из 'article ol' */
}

article #contents ol ol {
    counter-reset: sub-item;
    padding-left: 25px; 
    margin-top: 8px;
}

article #contents li {
    margin-bottom: 8px;
    line-height: 1.6;
    list-style-position: outside;
}

/* Стилизация номеров (1., 2.) */
article #contents > ol > li::before {
    counter-increment: item;
    content: counter(item) ". ";
    font-weight: 600;
    color: #2c3e50;
    margin-right: 5px;
}

/* Стилизация вложенных номеров (1.1., 1.2.) */
article #contents ol ol > li::before {
    counter-increment: sub-item;
    content: counter(item) "." counter(sub-item) ". ";
    font-weight: 500;
    color: #555;
    margin-right: 5px;
}

/* Стилизация ссылок */
article #contents li a {
    text-decoration: none;
    color: #007bff;
    transition: color 0.2s;
}

article #contents li a:hover {
    color: #0056b3;
    text-decoration: underline;
}

/* Отступ для якорей, чтобы заголовки не прятались под шапкой */
article h2[id],
article h3[id] {
    scroll-margin-top: 90px; /* 80px от 'main padding-top' + 10px отступ */
}

/* ----- Конец Оглавления ----- */


/* Адаптивность */
@media (max-width: 1024px) {
    article {
        padding: 40px;
    }
}

@media (max-width: 768px) {
    main {
        padding-top: 70px;
    }
    
    .breadcrumbs {
        padding: 10px 15px;
    }
    
    .breadcrumbs ol {
        font-size: 13px;
        flex-wrap: wrap;
    }
    
    main header {
        padding: 35px 15px;
    }
    
    main header h1 {
        font-size: 1.8rem;
    }
    
    main header p {
        font-size: 1rem;
    }
    
    article {
        padding: 30px 25px;
        margin: 20px 15px;
    }
    
    
    article h2 {
        font-size: 1.6rem;
        margin-top: 35px;
    }
    
    article h3 {
        font-size: 1.3rem;
    }
    
    article blockquote {
        padding: 25px 20px;
        margin: 30px auto;
    }
    
    article blockquote span {
        font-size: 3rem;
    }
}

@media (max-width: 480px) {
    .breadcrumbs {
        padding: 10px 10px;
    }
    
    main header {
        padding: 35px 10px;
    }
    
    main header h1 {
        font-size: 1.5rem;
    }
    
    article {
        padding: 20px 15px;
        margin: 15px 10px;
    }
    
    
    article h2 {
        font-size: 1.4rem;
    }
    
    article h3 {
        font-size: 1.2rem;
    }
    
    article p {
        text-align: left;
    }
    
    article blockquote {
        padding: 20px 15px;
        margin: 25px auto;
    }
    
    article blockquote strong {
        font-size: 1rem;
    }
    
    article blockquote span {
        font-size: 2.5rem;
    }
}

/* Плавное появление */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Печать */
@media print {
    .breadcrumbs,
    main header p {
        display: none;
    }
    
    body {
        background: #fff;
    }
    
    article {
        box-shadow: none;
        border: 1px solid #ddd;
    }
    
    main {
        padding-top: 0;
    }
    
    article img {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}