/* Asora Blog — публичная часть. На тёмном lp-body, Aurora-палитра. */

.blog-body { background: #0c0d18; color: #e6e8f1; }

/* === HERO === */
.blog-hero {
    position: relative;
    padding: 110px 0 60px;
    overflow: hidden;
}
.blog-hero .lp-eyebrow { margin-bottom: .75rem; }
.blog-hero .lp-h1 { margin: 0 0 1rem; font-size: clamp(2rem, 5vw, 3.5rem); }
.blog-hero .lp-hero-sub { max-width: 760px; }

/* Заголовок категории/тега */
.blog-section-hero { padding: 110px 0 30px; }
.blog-section-title { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 700; margin: .5rem 0 .75rem; color: #fff; letter-spacing: -.01em; }
.blog-section-desc { color: #aab1cc; max-width: 760px; }

/* === Хлебные крошки === */
.blog-crumbs { font-size: .85rem; color: #8a90ad; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.blog-crumbs a { color: #c4b5fd; text-decoration: none; }
.blog-crumbs a:hover { color: #ddd6fe; text-decoration: underline; }
.blog-crumbs .is-current { color: #d8dce8; }
.blog-crumbs span { color: #555879; }

/* === Лента: layout === */
.blog-main { padding: 30px 0 80px; }
.blog-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    align-items: start;
}
@media (max-width: 900px) {
    .blog-layout { grid-template-columns: 1fr; gap: 24px; }
    .blog-side { order: 2; }
}

/* === Sidebar === */
.blog-side { position: sticky; top: 24px; }
.blog-search { display: flex; gap: 0; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 4px; margin-bottom: 1.5rem; }
.blog-search input {
    flex: 1; background: transparent; border: 0; color: #e6e8f1; padding: 8px 12px; font-size: .92rem; font-family: inherit;
}
.blog-search input:focus { outline: none; }
.blog-search input::placeholder { color: #6e7794; }
.blog-search button {
    background: linear-gradient(90deg, #8B5FE3, #4FE0E8);
    border: 0; color: #fff; border-radius: 9px; padding: 0 12px; cursor: pointer;
    transition: filter .2s;
}
.blog-search button:hover { filter: brightness(1.1); }

.blog-side-block { margin-bottom: 1.75rem; }
.blog-side-h { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: #8a90ad; margin-bottom: .65rem; font-weight: 600; }
.blog-cats { list-style: none; padding: 0; margin: 0; }
.blog-cats li { margin: 0; }
.blog-cats a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; border-radius: 8px; color: #d8dce8; text-decoration: none;
    font-size: .92rem; transition: background .15s, color .15s;
}
.blog-cats a:hover { background: rgba(255,255,255,.05); color: #fff; }
.blog-cats a.is-active { background: rgba(139,124,248,.15); color: #c4b5fd; font-weight: 600; }
.blog-cat-cnt { font-size: .8rem; color: #6e7794; }
.blog-cats a.is-active .blog-cat-cnt { color: #c4b5fd; }
.blog-rss-link { color: #c4b5fd; text-decoration: none; font-size: .92rem; display: inline-flex; align-items: center; gap: .35rem; }
.blog-rss-link:hover { color: #ddd6fe; text-decoration: underline; }

/* === Лента: карточки === */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
@media (max-width: 700px) { .blog-grid { grid-template-columns: 1fr; } }

.blog-card {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px;
    overflow: hidden;
    transition: transform .2s, border-color .2s, background .2s;
}
.blog-card:hover { transform: translateY(-2px); border-color: rgba(139,124,248,.32); background: rgba(255,255,255,.05); }
.blog-card-link, .blog-card a { color: inherit; text-decoration: none; display: block; }

.blog-card-cover { aspect-ratio: 16 / 9; overflow: hidden; background: #1a1d2e; }
.blog-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.blog-card:hover .blog-card-cover img { transform: scale(1.03); }

.blog-card-body { padding: 18px 20px 20px; }
.blog-card-cat { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: #c4b5fd; margin-bottom: .5rem; font-weight: 600; }
.blog-card-title { font-size: 1.15rem; line-height: 1.35; font-weight: 700; color: #fff; margin: 0 0 .55rem; letter-spacing: -.01em; }
.blog-card-excerpt { font-size: .92rem; color: #aab1cc; line-height: 1.55; margin: 0 0 .85rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-card-meta { font-size: .82rem; color: #8a90ad; display: flex; gap: .35rem; align-items: center; }
.blog-meta-dot { color: #555879; }

/* Лид-карточка (первая) — на всю ширину */
.blog-card--lead { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr 1fr; }
.blog-card--lead .blog-card-cover { aspect-ratio: auto; height: 100%; min-height: 280px; }
.blog-card--lead .blog-card-body { padding: 28px 32px; align-self: center; }
.blog-card--lead .blog-card-title { font-size: 1.6rem; line-height: 1.25; }
.blog-card--lead .blog-card-excerpt { font-size: 1rem; -webkit-line-clamp: 4; }
@media (max-width: 700px) {
    .blog-card--lead { grid-template-columns: 1fr; }
    .blog-card--lead .blog-card-cover { aspect-ratio: 16/9; min-height: 0; }
    .blog-card--lead .blog-card-body { padding: 18px 20px 20px; }
    .blog-card--lead .blog-card-title { font-size: 1.25rem; }
}

.blog-empty { text-align: center; padding: 60px 20px; color: #aab1cc; }
.blog-empty i { font-size: 2.5rem; color: #555879; display: block; margin-bottom: 1rem; }

/* === Пагинация === */
.blog-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 40px; flex-wrap: wrap; }
.blog-page {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: 8px 16px; border-radius: 8px; background: rgba(255,255,255,.04); color: #d8dce8;
    text-decoration: none; border: 1px solid rgba(255,255,255,.08); font-size: .92rem;
    transition: background .15s, border-color .15s;
}
.blog-page:hover { background: rgba(139,124,248,.12); border-color: rgba(139,124,248,.32); color: #fff; }
.blog-page-cur { color: #aab1cc; font-size: .92rem; }

/* === Статья === */
.blog-article-head { padding: 100px 0 24px; }
.blog-article-cat { margin: 1rem 0 .5rem; }
.blog-article-cat a { color: #c4b5fd; text-decoration: none; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.blog-article-cat a:hover { color: #ddd6fe; }

.blog-article-title {
    font-size: clamp(1.85rem, 4vw, 2.85rem);
    font-weight: 800; color: #fff; line-height: 1.15;
    letter-spacing: -.015em; margin: .5rem 0 1.25rem;
}
.blog-article-lead { font-size: 1.15rem; color: #c8cfe5; line-height: 1.55; max-width: 800px; margin-bottom: 1.5rem; }

.blog-article-meta { display: flex; align-items: center; gap: .5rem; color: #8a90ad; font-size: .92rem; flex-wrap: wrap; }
.blog-author { display: inline-flex; align-items: center; gap: .5rem; }
.blog-author-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: linear-gradient(135deg, #8B5FE3, #4FE0E8);
    color: #fff; display: inline-flex; align-items: center; justify-content: center;
    font-size: .82rem;
}
.blog-author-name { color: #d8dce8; font-weight: 500; }

.blog-article-cover-wrap { padding: 16px 0 0; }
.blog-article-cover { margin: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.blog-article-cover img { width: 100%; height: auto; display: block; }

/* === Тело статьи + TOC === */
.blog-article-body-wrap { padding: 40px 0 60px; }
.blog-article-grid {
    display: grid; grid-template-columns: 220px 1fr; gap: 50px; align-items: start;
}
@media (max-width: 900px) {
    .blog-article-grid { grid-template-columns: 1fr; gap: 24px; }
    .blog-toc { order: 2; }
}

.blog-toc { position: sticky; top: 24px; max-height: calc(100vh - 60px); overflow: auto; padding-right: 8px; }
.blog-toc-h { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: #8a90ad; margin-bottom: .65rem; font-weight: 600; }
.blog-toc-list { list-style: none; padding: 0; margin: 0; border-left: 1px solid rgba(255,255,255,.08); }
.blog-toc-list li { padding: 4px 0 4px 16px; line-height: 1.45; }
.blog-toc-list .blog-toc-l3 { padding-left: 32px; }
.blog-toc-list a { color: #aab1cc; text-decoration: none; font-size: .88rem; }
.blog-toc-list a:hover { color: #ddd6fe; }

.blog-article-body { font-size: 1.05rem; line-height: 1.75; color: #d8dce8; max-width: 760px; }
.blog-article-body--full { max-width: 820px; margin: 0 auto; }
.blog-article-body p { margin: 0 0 1.1em; }
.blog-article-body h2 {
    font-size: 1.65rem; font-weight: 700; color: #fff; margin: 2.2em 0 .6em;
    line-height: 1.25; letter-spacing: -.01em; scroll-margin-top: 100px;
}
.blog-article-body h3 {
    font-size: 1.3rem; font-weight: 700; color: #fff; margin: 1.8em 0 .55em;
    line-height: 1.3; scroll-margin-top: 100px;
}
.blog-article-body a { color: #c4b5fd; text-decoration: underline; text-decoration-color: rgba(196,181,253,.4); text-underline-offset: 3px; }
.blog-article-body a:hover { color: #ddd6fe; text-decoration-color: #ddd6fe; }
.blog-article-body strong, .blog-article-body b { color: #fff; font-weight: 700; }
.blog-article-body ul, .blog-article-body ol { margin: 0 0 1.1em 1.4em; padding: 0; }
.blog-article-body li { margin: 0 0 .5em; }
.blog-article-body img { max-width: 100%; height: auto; border-radius: 12px; margin: 1.5em 0; display: block; }
.blog-article-body figure { margin: 1.5em 0; }
.blog-article-body figcaption { font-size: .85rem; color: #8a90ad; margin-top: .5em; text-align: center; }
.blog-article-body blockquote {
    margin: 1.5em 0; padding: 1em 1.5em;
    border-left: 3px solid #8B5FE3;
    background: rgba(139,95,227,.08);
    border-radius: 0 12px 12px 0;
    font-style: italic; color: #c8cfe5;
}
.blog-article-body blockquote p:last-child { margin-bottom: 0; }
.blog-article-body code {
    background: rgba(255,255,255,.07); border-radius: 6px;
    padding: 2px 6px; font-size: .92em; color: #ddd6fe;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.blog-article-body pre {
    background: #11141f; border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px; padding: 16px 20px; overflow-x: auto;
    margin: 1.5em 0; font-size: .92rem; line-height: 1.55;
}
.blog-article-body pre code { background: transparent; padding: 0; color: #d8dce8; }
.blog-article-body table { border-collapse: collapse; width: 100%; margin: 1.5em 0; font-size: .95rem; }
.blog-article-body th, .blog-article-body td {
    border: 1px solid rgba(255,255,255,.1); padding: 10px 14px; text-align: left; vertical-align: top;
}
.blog-article-body th { background: rgba(139,124,248,.08); color: #fff; font-weight: 600; }
.blog-article-body hr { border: 0; border-top: 1px solid rgba(255,255,255,.08); margin: 2em 0; }

/* Теги статьи */
.blog-article-tags { margin: 2.5em 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.blog-tag-chip {
    display: inline-flex; align-items: center; padding: 5px 12px;
    border-radius: 999px; background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    color: #c4b5fd; text-decoration: none; font-size: .82rem;
    transition: background .15s, color .15s;
}
.blog-tag-chip:hover { background: rgba(139,124,248,.15); color: #ddd6fe; }
.blog-tag-chip::before { content: '#'; opacity: .6; margin-right: 2px; }

/* CTA-блок */
.blog-cta {
    margin: 3em 0 0;
    background: radial-gradient(ellipse 80% 100% at 0% 50%, rgba(139,95,227,.22), transparent 60%),
                radial-gradient(ellipse 80% 100% at 100% 50%, rgba(79,224,232,.18), transparent 60%),
                rgba(255,255,255,.03);
    border: 1px solid rgba(139,124,248,.25);
    border-radius: 18px;
    padding: 28px 32px;
}
.blog-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.blog-cta-text { flex: 1; min-width: 240px; }
.blog-cta-eyebrow { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: #c4b5fd; font-weight: 600; margin-bottom: .35rem; }
.blog-cta-title { font-size: 1.35rem; font-weight: 700; color: #fff; margin-bottom: .35rem; line-height: 1.3; }
.blog-cta-desc { color: #aab1cc; font-size: .95rem; line-height: 1.5; }

/* === Похожие === */
.blog-related { padding: 60px 0 80px; border-top: 1px solid rgba(255,255,255,.06); }
.blog-related-h { font-size: 1.5rem; font-weight: 700; color: #fff; margin: 0 0 1.5rem; letter-spacing: -.01em; }
.blog-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .blog-related-grid { grid-template-columns: 1fr; } }

/* === 404 === */
.blog-404 { padding: 140px 0 100px; text-align: center; }
.blog-404 h1 { font-size: 2.5rem; color: #fff; margin: 0 0 .5rem; }
.blog-404 p { color: #aab1cc; margin: 0 0 1.5rem; }

/* Активный пункт навигации блога в шапке */
.lp-nav-links a.is-active { color: #ddd6fe; }