/* ============================================================
   Блог — список статей и страница статьи.
   Тёмная тема сайта, Inter, читаемая типографика. Грузится async из _seo.php.
   ============================================================ */

.bt-blog { padding-bottom: 60px; }
.bt-blog-empty { color: rgba(223,223,223,.7); font-family: 'Inter', sans-serif; }

/* ---------- Сетка карточек ---------- */
.bt-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 10px;
}
.bt-blog-grid-3 { grid-template-columns: repeat(3, 1fr); }

.bt-blog-card {
    display: flex;
    flex-direction: column;
    background: #161616;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none !important;
    color: var(--white);
    transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .35s, box-shadow .35s;
}
.bt-blog-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255,255,255,.18);
    box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.bt-blog-card.is-featured { grid-column: 1 / -1; flex-direction: row; }
.bt-blog-card.is-featured .bt-blog-card-media { flex: 0 0 52%; aspect-ratio: auto; min-height: 360px; }
.bt-blog-card.is-featured .bt-blog-card-title { font-size: 32px; }
.bt-blog-card.is-featured .bt-blog-card-body { justify-content: center; padding: 40px; }

.bt-blog-card-media { position: relative; aspect-ratio: 16 / 9; background: #0e0e0e; overflow: hidden; }
.bt-blog-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.22,1,.36,1); }
.bt-blog-card:hover .bt-blog-card-media img { transform: scale(1.04); }
.bt-blog-card-ph {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(60% 80% at 30% 20%, #2e2e2e 0, #121212 100%);
}
.bt-blog-card-ph span {
    font-family: 'Inter', sans-serif; font-weight: 800; font-size: 96px; line-height: 1;
    color: transparent; -webkit-text-stroke: 1px rgba(223,223,223,.45);
}

.bt-blog-card-body { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px 26px; flex: 1; }
.bt-blog-meta {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-family: 'Inter', sans-serif; font-size: 13px; color: rgba(223,223,223,.55);
}
.bt-blog-meta a { color: rgba(223,223,223,.85); text-decoration: none; border-bottom: 1px solid rgba(223,223,223,.25); }
.bt-blog-meta a:hover { color: #fff; border-color: #fff; }
.bt-blog-card-title { margin: 0; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 21px; line-height: 1.25; color: var(--white); }
.bt-blog-card-desc { margin: 0; font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.5; color: rgba(223,223,223,.72); }
.bt-blog-card-more { margin-top: auto; padding-top: 6px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: var(--white); }
.bt-blog-card.is-compact { background: #121212; }

/* ---------- Страница статьи ---------- */
.bt-article-hero .h-service-main { padding-bottom: 20px; }
.bt-article-hero-inner { max-width: 860px; }
.bt-crumbs { display: flex; gap: 10px; font-family: 'Inter', sans-serif; font-size: 13px; color: rgba(223,223,223,.5); margin-bottom: 18px; }
.bt-crumbs a { color: rgba(223,223,223,.7); text-decoration: none; }
.bt-crumbs a:hover { color: #fff; }
.bt-article-title {
    font-family: 'Inter', sans-serif; font-weight: 800; font-size: 46px; line-height: 1.12;
    letter-spacing: -.01em; color: var(--white); margin: 0 0 18px; text-transform: none;
}
.bt-article-meta { font-size: 14px; }

.bt-article { max-width: 760px; margin: 0 auto; }
.bt-article-cover { margin: 0 0 36px; border-radius: 18px; overflow: hidden; background: #0e0e0e; }
.bt-article-cover img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.bt-article-lead {
    font-family: 'Inter', sans-serif; font-size: 20px; line-height: 1.5; color: rgba(223,223,223,.9);
    margin: 0 0 28px; padding-left: 18px; border-left: 3px solid var(--white);
}
.bt-article-body { font-family: 'Inter', sans-serif; font-size: 17px; line-height: 1.7; color: rgba(223,223,223,.88); }
.bt-article-body h2 { font-size: 28px; font-weight: 700; line-height: 1.25; color: #fff; margin: 44px 0 16px; text-transform: none; }
.bt-article-body h3 { font-size: 21px; font-weight: 700; line-height: 1.3; color: #fff; margin: 32px 0 12px; text-transform: none; }
.bt-article-body p { margin: 0 0 18px; }
.bt-article-body ul, .bt-article-body ol { margin: 0 0 20px; padding-left: 24px; }
.bt-article-body li { margin-bottom: 8px; }
.bt-article-body li::marker { color: rgba(223,223,223,.5); }
.bt-article-body strong { color: #fff; font-weight: 600; }
.bt-article-body a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); transition: border-color .2s; }
.bt-article-body a:hover { border-color: #fff; }
.bt-article-body blockquote {
    margin: 28px 0; padding: 18px 22px; border-left: 3px solid var(--white);
    background: rgba(255,255,255,.04); border-radius: 0 12px 12px 0; font-size: 18px; color: #fff;
}
.bt-article-body table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 15px; }
.bt-article-body th, .bt-article-body td { padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.1); text-align: left; vertical-align: top; }
.bt-article-body th { color: #fff; font-weight: 600; background: rgba(255,255,255,.04); }
.bt-article-body .bt-note {
    margin: 24px 0; padding: 16px 20px; border-radius: 12px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); font-size: 15px;
}

/* CTA в конце статьи */
.bt-article-cta {
    margin: 48px 0 0; padding: 28px 30px; border-radius: 18px;
    background: var(--white); color: #111;
    display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.bt-article-cta-title { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 22px; line-height: 1.2; }
.bt-article-cta-sub { font-family: 'Inter', sans-serif; font-size: 14px; color: #555; margin-top: 6px; }
.bt-article-cta-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.bt-article-cta-link { font-family: 'Inter', sans-serif; font-weight: 600; color: #111; text-decoration: none; border-bottom: 1px solid #111; }
.bt-article-cta-btn {
    font-family: 'Inter', sans-serif; font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: .04em;
    background: #111; color: #fff; border: 0; border-radius: 999px; padding: 14px 24px; cursor: pointer; transition: transform .2s, opacity .2s;
}
.bt-article-cta-btn:hover { transform: translateY(-1px); opacity: .9; }

.bt-blog-more { margin-top: 70px; }
.bt-blog-more-title { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 26px; color: var(--white); margin: 0 0 18px; text-transform: none; }

/* ---------- Адаптив ---------- */
@media (max-width: 1199px) {
    .bt-blog-grid, .bt-blog-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .bt-blog-grid, .bt-blog-grid-3 { grid-template-columns: 1fr; gap: 18px; }
    .bt-blog-card.is-featured { flex-direction: column; }
    .bt-blog-card.is-featured .bt-blog-card-media { flex: none; aspect-ratio: 16 / 9; min-height: 0; }
    .bt-blog-card.is-featured .bt-blog-card-title { font-size: 24px; }
    .bt-blog-card.is-featured .bt-blog-card-body { padding: 22px 20px 24px; }
    .bt-article-title { font-size: 30px; }
    .bt-article-lead { font-size: 17px; }
    .bt-article-body { font-size: 16px; }
    .bt-article-body h2 { font-size: 23px; margin-top: 34px; }
    .bt-article-body h3 { font-size: 18px; }
    .bt-article-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: 14px; }
    .bt-article-body table thead, .bt-article-body table tbody { display: table; width: 100%; min-width: 560px; }
    .bt-article-body th, .bt-article-body td { padding: 10px 12px; min-width: 110px; }
    .bt-article-body td:first-child, .bt-article-body th:first-child { min-width: 130px; }
    .bt-article-cta { padding: 22px 20px; }
    .bt-article-cta-title { font-size: 19px; }
}