/* =============  TELEGRAPH ORIGINAL  ============= */
/* 1. Reset (ровно такой же у Telegraph) */
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,
address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,
samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,
dl,dt,dd,ol,ul,li,fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,embed,figure,
figcaption,footer,header,hgroup,menu,nav,output,
ruby,section,summary,time,mark,audio,video{
    margin:0;padding:0;border:0;
    font:inherit;font-size:100%;vertical-align:baseline;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{display:block}
body{line-height:1;background:#fff;color:#222}
ol,ul{list-style:none}blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
table{border-collapse:collapse;border-spacing:0}



html{font-size:18px}
body{
    font-family:"Noto Serif", Georgia, "Times New Roman", Times, serif;
    line-height:1.62;
    -webkit-font-smoothing:antialiased;
}

/* 3. Общая ширина статьи / контейнера */
.container-max{
    max-width:980px;
    margin:0 auto;
    padding:10px 20px 40px;
}

/* 4. Заголовки 1-3 уровня (точные размеры Tele-css) */
h1{font-size:2.4rem;font-weight:700;line-height:1.2;margin:0 0 .8em}
h2{font-size:1.75rem;font-weight:700;line-height:1.25;margin:1.6em 0 .8em}
h3{font-size:1.4rem;font-weight:700;line-height:1.3;margin:1.6em 0 .8em}

/* 5. Параграфы, ссылки, hr */
p{margin:1.05em 0}
a{color:#2f89fc;text-decoration:none;transition:color .15s}
a:hover{text-decoration:underline;color:#1373f9}
hr{border:none;border-top:1px solid #e4e4e4;margin:2.2em 0}

/* 6. Метаданные под заголовком статьи */
.meta{
    font:400 0.9rem/1.4 "Inter", Helvetica, Arial, sans-serif;
    color:#6f6f6f;
    margin:-.3rem 0 1.8rem;
}

/* Используем unicode escape, чтобы не зависеть от кодировки (исправляет отображение вида "·") */
.meta span:not(:last-child)::after{content:"\00B7";margin:0 .4rem}

/* 7. Изображения и медиа */
img,iframe,video{max-width:100%;height:auto;border:none}

/* ===== Lightbox для изображений в постах ===== */
.post-text img { cursor: zoom-in; }

.img-lightbox-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.86);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 99999;
}

.img-lightbox-overlay.open{ display: flex; }

.img-lightbox-image{
    max-width: min(96vw, 1400px);
    max-height: 92vh;
    width: auto;
    height: auto;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    border-radius: 6px;
    cursor: zoom-out;
    background: #111;
}

.img-lightbox-close{
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.35);
    background: rgba(0,0,0,.45);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

body.lightbox-open{ overflow: hidden; }

/* 8. Копка / шэр-кнопки Telegraph */
.btn{
    display:inline-block;cursor:pointer;
    font:400 .9rem/1 "Inter",sans-serif;
    padding:.55rem 1.1rem;border:1px solid #d4d4d4;border-radius:4px;
    background:#fff;transition:background .15s;
}
.btn:hover{background:#f3f3f3;text-decoration:none;color:inherit}

/* 9. Список превью постов (псевдо-главная) */
.post-preview{padding:1.4rem 0;border-bottom:1px solid #e7e7e7}
.post-preview:last-child{border-bottom:none}
.post-preview h3{font-size:1.35rem;font-weight:700;margin-bottom:.4rem}
.post-preview h3 a{color:#222}
.post-preview h3 a:hover{color:#2f89fc;text-decoration:none}

/* 10. Input-title / author при создании новой статьи (редактор Telegraph) */
.edit-title{
    width:100%;border:none;outline:none;
    font-size:2.4rem;font-weight:700;font-family:inherit;
    margin-bottom:.6rem;
}
.edit-author{
    width:100%;border:none;outline:none;
    font:400 1rem/1.4 "Inter",sans-serif;color:#6f6f6f;margin-bottom:1.6rem;
}
textarea.edit-content{
    width:100%;border:none;outline:none;resize:none;
    font:400 1.1rem/1.62 "Noto Serif",serif;
    min-height:480px;
}

/* 11. Адаптив (точные брейк-пойнты Telegraph) */
@media(max-width:740px){html{font-size:16px}}
@media(max-width:560px){html{font-size:15px}}
@media(max-width:460px){html{font-size:14px}}

b,
strong {
    font-weight: 700;   /* или bold */
}
i, em { font-style: italic; }
/* ============  IVOL READABILITY ADD-ON  ============ */

/* ===== Уменьшение паддинга и толщины рамки на мобильных ===== */
.post-page {
    background: #fff;
    padding: 1.2rem 1rem;    /* Было: 2rem 2.4rem */
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,.04);
}

/* 2. Разделители для h2–h3: тонкая линия + фирменный маркер */
.post-page h2,
.post-page h3{position:relative;padding-bottom:.6rem;border-bottom:1px solid #ececec;}
.post-page h2::after,
.post-page h3::after{
    content:'';position:absolute;left:0;bottom:-.4rem;
    width:60px;height:3px;background:#2f89fc;border-radius:2px;
}

/* 3. Blockquote — серый фон + синий «бородок» */
blockquote{
    margin:1.4em 0;padding:.9em 1.4em;
    background:#f9fafb;border-left:4px solid #2f89fc;
    font-style:italic;color:#444;
}
blockquote p{margin:0;}
blockquote i{font-style:normal;font-weight:600;color:#2f89fc;}

/* 4. Inline-code и pre */
code{
    font-family:"Courier New",monospace;
    background:#f3f4f7;border:1px solid #e1e4e8;
    border-radius:4px;padding:0 .25em;font-size:.9rem;
}
pre{
    background:#0d1117;color:#c9d1d9;
    padding:1rem 1.2rem;border-radius:6px;
    overflow:auto;line-height:1.5;margin:1.4em 0;
}
pre code{background:transparent;border:none;padding:0;color:inherit;font-size:.95rem;}

/* 5. Таблицы — рамка, зебра, читаемые отступы */
table{width:100%;margin:1.6em 0;border:1px solid #dfe2e6;font-size:.95rem;}
thead{background:#f3f4f6;}
th,td{padding:.65em .9em;text-align:left;}
th{font-weight:600;color:#222;}
tbody tr:nth-child(odd){background:#fafafa;}
tbody tr:hover{background:#f1f5f9;}
/* Подсветка первой колонки с ключевыми названиями */
td:first-child b{color:#2f89fc;}

/* 6. HR — пунктир для более лёгкого визуального ритма */
hr{    border: none;
    border-top: 2px dashed #292c32;
    margin: 2em 0;
}

/* 7. Кнопка «Создано тут» — фирменный цвет + hover */
.navigation .btn{background:#2f89fc;color:#fff!important;border:none;}
.navigation .btn:hover{background:#1669e0;}


/* На самых маленьких экранах — еще меньше */
@media (max-width: 560px) {
    .post-page {
        padding: 0.6rem 0.5rem;   /* Было: 1.2rem 1rem */
        border-width: 1px;        /* Можно сделать 0.5px если нужно */
    }
    h1 {
        font-size: 1.6rem;        /* Было: 2.4rem, стало заметно компактней */
        margin-bottom: .6em;
    }
}

/* Для чуть более широких, но всё равно мобильных */
@media (max-width: 740px) and (min-width: 561px) {
    .post-page {
        padding: 1rem 0.7rem;
    }
    h1 {
        font-size: 1.9rem;
    }
}

/* Для десктопа — можно чуть уменьшить h1 */
h1 {
    font-size: 2rem;    /* Было 2.4rem */
}
/* === fix delete-button colors =============================== */
.btn.btn-danger {
    background-color: #dc3545 !important;   /* красный bootstrap */
    color: #fff !important;                 /* белый текст      */
    border-color: #dc3545 !important;
}

.btn.btn-danger:hover,
.btn.btn-danger:focus {
    background-color: #c82333 !important;   /* чуть темнее при ховере */
    border-color: #bd2130 !important;
    color: #fff !important;
}

.btn {
    background-color: #f2f2f2; /* Светло-серый фон */
    color: #1a1a1a !important;                 /* белый текст      */
}
.post-text {
    white-space: normal;   /* \n → визуальный перенос */
}
/* ======== LISTS (bullet & ordered) ======== */
.post-text ul,
.post-text ol{
    margin: 1.1em 0 1.1em 1.8em;
    padding: 0;
}

/* --- UL --- */
.post-text ul li{
    position: relative;
    padding-left: 1.4em;
    margin: .45em 0;
}
.post-text ul li::before{
    content: '●';
    position: absolute;
    left: 0; top: .15em;
    font-size: .78em;
    color: #2f89fc;
    line-height: 1;
}

/* --- OL --- */
.post-text ol{ counter-reset: item; }
.post-text ol li{
    position: relative;
    padding-left: 2.2em;
    margin: .45em 0;
}
.post-text ol li::before{
    counter-increment: item;
    content: counter(item) '.';
    position: absolute;
    left: 0; top: 0;
    width: 1.8em;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: #2f89fc;
    font-weight: 600;
}

/* --- Nested lists --- */
.post-text ul ul,
.post-text ol ul,
.post-text ul ol,
.post-text ol ol{
    margin-top: .35em;
    margin-bottom: .35em;
}

/* --- Check-list modifier --- */
.post-text ul.check li::before{
    content: '✔';
    color: #16a34a;
    font-weight: 700;
}

/* --- Mobile tweaks --- */
@media (max-width: 560px){
    .post-text ul li,
    .post-text ol li{
        padding-left: 1.1em;
        margin: .35em 0;
    }
    .post-text ul li::before,
    .post-text ol li::before{
        left: 0;
        font-size: .74em;
    }
}
/* Стили для блока think */
think {
    display: block;
    margin: 20px 0;
    padding: 15px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 8px;
    border-left: 4px solid #5a67d8;
    position: relative;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

/* Контейнер для содержимого */
think::before {
    content: "🤔 Размышления AI";
    display: block;
    font-weight: bold;
    color: #fff;
    margin-bottom: 10px;
    padding: 5px 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
}

/* Стили для внутреннего контента */
think > * {
    color: #fff;
    line-height: 1.6;
    margin: 10px 0;
}

/* Параграфы внутри think */
think p {
    margin: 10px 0;
    padding: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

/* Списки внутри think */
think ul, think ol {
    margin: 10px 0;
    padding-left: 25px;
}

think li {
    margin: 5px 0;
}

/* Код внутри think */
think code {
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
}

/* Состояние свернутого блока */
think.collapsed {
    max-height: 50px;
    overflow: hidden;
}

think.collapsed::before {
    content: "🤔 Размышления AI (развернуть)";
}

think.collapsed::after {
    content: "▼";
    position: absolute;
    right: 15px;
    top: 15px;
    color: #fff;
    font-size: 18px;
}

think:not(.collapsed)::after {
    content: "▲";
    position: absolute;
    right: 15px;
    top: 15px;
    color: #fff;
    font-size: 18px;
}

/* Анимация при наведении */
think:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);


/* =============== SEO ОПТИМИЗАЦИЯ - НОВЫЕ КОМПОНЕНТЫ =============== */

/* ========== ОСНОВНАЯ СТАТЬЯ ========== */
.post-seo {
    background: #fff;
    padding: 2rem 2.4rem;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
}

@media (max-width: 740px) {
    .post-seo {
        padding: 1.2rem 1rem;
    }
}

@media (max-width: 560px) {
    .post-seo {
        padding: 0.6rem 0.5rem;
        border-radius: 4px;
    }
}

/* ========== ХЛЕБНЫЕ КРОШКИ ========== */
.breadcrumbs {
    margin: 0 0 1.6rem 0;
    padding: 0.8rem 0;
    font-size: 0.9rem;
}

.breadcrumbs__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

.breadcrumbs__item {
    display: flex;
    align-items: center;
}

.breadcrumbs__item::after {
    content: "/";
    color: #999;
    margin: 0 0.5rem;
    font-weight: 300;
}

.breadcrumbs__item:last-child::after {
    content: "";
    margin: 0;
}

.breadcrumbs__item--current {
    color: #666;
    font-weight: 500;
}

.breadcrumbs__link {
    color: #2f89fc;
    text-decoration: none;
    transition: color 0.15s;
}

.breadcrumbs__link:hover {
    color: #1373f9;
    text-decoration: underline;
}

/* ========== ЗАГОЛОВОК СТАТЬИ И МЕТА-ИНФОРМАЦИЯ ========== */
.article-header {
    margin-bottom: 2rem;
}

.article-title {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 1rem 0;
    color: #222;
}

@media (max-width: 560px) {
    .article-title {
        font-size: 1.6rem;
    }
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem 0;
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    font: 0.85rem/1.5 "Inter", Helvetica, Arial, sans-serif;
    color: #666;
}

.article-meta__item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.article-meta__label {
    font-weight: 600;
    color: #444;
}

.article-meta__value {
    color: #555;
}

.article-meta__date {
    font-style: italic;
}

@media (max-width: 560px) {
    .article-meta {
        flex-direction: column;
        gap: 0.5rem;
        font-size: 0.8rem;
    }
}

/* ========== KEY TAKEAWAYS ========== */
.key-takeaways {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1.5rem 1.8rem;
    border-radius: 8px;
    margin: 2rem 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.key-takeaways__title {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
    color: white;
}

.key-takeaways__title .icon {
    margin-right: 0.5rem;
}

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

.key-takeaways__item {
    position: relative;
    padding-left: 1.5rem;
    margin: 0.6rem 0;
    line-height: 1.6;
}

.key-takeaways__item::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
    color: #a0e7e5;
}

@media (max-width: 560px) {
    .key-takeaways {
        padding: 1rem 1.2rem;
        margin: 1.5rem 0;
    }

    .key-takeaways__title {
        font-size: 1.1rem;
    }
}

/* ========== TABLE OF CONTENTS ========== */
.toc {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 1.5rem;
    margin: 2rem 0;
}

.toc__title {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
    color: #222;
}

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

.toc__item {
    margin: 0.5rem 0;
}

.toc__item--h2 {
    padding-left: 0;
}

.toc__item--h3 {
    padding-left: 1.5rem;
}

.toc__item--h4 {
    padding-left: 3rem;
}

.toc__link {
    color: #2f89fc;
    text-decoration: none;
    transition: color 0.15s;
    display: block;
    padding: 0.3rem 0;
}

.toc__link:hover {
    color: #1373f9;
    text-decoration: underline;
}

@media (max-width: 560px) {
    .toc {
        padding: 1rem;
        margin: 1.5rem 0;
    }

    .toc__title {
        font-size: 1rem;
    }

    .toc__item--h3 {
        padding-left: 1rem;
    }

    .toc__item--h4 {
        padding-left: 2rem;
    }
}

/* ========== КОНТЕНТ СТАТЬИ ========== */
.article-content {
    margin: 2rem 0;
    line-height: 1.62;
}

.article-content p {
    margin: 1.05em 0;
    color: #222;
}

.article-content h2 {
    position: relative;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #ececec;
    margin-top: 1.6em;
    margin-bottom: 0.8em;
}

.article-content h3 {
    margin-top: 1.4em;
    margin-bottom: 0.6em;
}

.article-content h4 {
    margin-top: 1.2em;
    margin-bottom: 0.5em;
    font-size: 1.1rem;
}

.article-h2,
.article-h3,
.article-h4 {
    scroll-margin-top: 80px;
}

/* Якорные ссылки для заголовков */
.anchor-link {
    display: inline-block;
    margin-left: 0.5rem;
    color: #ccc;
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
    font-size: 0.8em;
    vertical-align: middle;
}

h2:hover .anchor-link,
h3:hover .anchor-link,
h4:hover .anchor-link {
    opacity: 1;
    color: #2f89fc;
}

.anchor-link:hover {
    color: #1373f9;
}

/* ========== ИНФОРМАЦИЯ ОБ АВТОРЕ ========== */
.author-bio {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 2rem;
    margin: 2.5rem 0;
}

.author-bio__title {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 1.5rem 0;
    color: #222;
}

.author-bio__container {
    display: flex;
    gap: 1.5rem;
}

.author-bio__avatar {
    flex-shrink: 0;
}

.author-bio__avatar-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.8rem;
    font-weight: 700;
}

.author-bio__content {
    flex: 1;
}

.author-bio__name {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: #222;
}

.author-bio__service {
    margin: 0.5rem 0;
}

.badge {
    display: inline-block;
    background: #2f89fc;
    color: white;
    padding: 0.3rem 0.7rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.author-bio__description {
    color: #555;
    line-height: 1.6;
    margin: 0.8rem 0;
}

.author-bio__links {
    display: flex;
    gap: 0.8rem;
    margin-top: 1rem;
}

@media (max-width: 560px) {
    .author-bio {
        padding: 1.2rem;
        margin: 1.5rem 0;
    }

    .author-bio__container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
    }

    .author-bio__avatar-placeholder {
        width: 60px;
        height: 60px;
        font-size: 1.4rem;
    }

    .author-bio__links {
        justify-content: center;
    }
}

/* ========== ПОДВАЛ СТАТЬИ ========== */
.article-footer {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
}

.article-footer__divider {
    border: none;
    border-top: 1px dashed #d8d8d8;
    margin: 0 0 1.5rem 0;
}

.article-footer__content {
    text-align: center;
}

.article-footer__text {
    color: #666;
    font-size: 0.9rem;
    margin: 0 0 1rem 0;
}

.article-footer__navigation {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-primary {
    background-color: #2f89fc !important;
    color: white !important;
    border-color: #2f89fc !important;
}

.btn-primary:hover {
    background-color: #1373f9 !important;
    border-color: #1373f9 !important;
    text-decoration: none !important;
}

.btn-outline-primary {
    background-color: transparent !important;
    color: #2f89fc !important;
    border-color: #2f89fc !important;
}

.btn-outline-primary:hover {
    background-color: #f0f8ff !important;
    color: #1373f9 !important;
    border-color: #1373f9 !important;
    text-decoration: none !important;
}

.btn-sm {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
}

/* ========== SKIP LINK (ДОСТУПНОСТЬ) ========== */
.skip-link {
    position: absolute;
    top: -10000px;
    left: -10000px;
    z-index: 999;
}

.skip-link:focus {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #2f89fc;
    color: white;
    padding: 0.8rem;
    text-decoration: underline;
    z-index: 10000;
}

}

/* Footer layout: make all elements on a single line */
footer[role="contentinfo"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.9rem;
    margin-top: 20px;
}

footer[role="contentinfo"]   div,
footer[role="contentinfo"]   nav,
footer[role="contentinfo"]   p {
    margin: 0;
}