/* /css/blog.css
   MobileSeek — публичные стили блога.
   Палитра: тёмно-синий #0A2540, лаймовый #00E5A0, оранжевый #FF6B00. */

/* ============================================================
   1. Переменные и сброс
   ============================================================ */
:root {
    --ms-dark:       #0A2540;
    --ms-dark-2:     #143151;
    --ms-lime:       #00E5A0;
    --ms-orange:     #FF6B00;
    --ms-text:       #1d1d1f;
    --ms-text-2:     #6e6e73;
    --ms-text-3:     #86868b;
    --ms-bg:         #ffffff;
    --ms-bg-soft:    #f5f5f7;
    --ms-divider:    #e5e7eb;
    --ms-radius:     14px;
    --ms-radius-lg:  20px;
    --ms-shadow:     0 2px 8px rgba(0, 0, 0, 0.04);
    --ms-shadow-h:   0 4px 16px rgba(0, 0, 0, 0.08);
    --ms-font:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --ms-font-mono:  'SF Mono', 'Courier New', monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.ms-body {
    margin: 0;
    padding: 0;
    background: var(--ms-bg);
    color: var(--ms-text);
    font-family: var(--ms-font);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--ms-dark); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--ms-orange); }

h1, h2, h3, h4 { color: var(--ms-text); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
h1 { font-size: 34px; margin: 0 0 16px; }
h2 { font-size: 26px; margin: 32px 0 16px; }
h3 { font-size: 20px; margin: 24px 0 12px; }

p { margin: 0 0 16px; }

ul, ol { margin: 0 0 16px; padding-left: 24px; }
li { margin-bottom: 6px; }

blockquote {
    margin: 24px 0;
    padding: 16px 20px;
    border-left: 4px solid var(--ms-lime);
    background: var(--ms-bg-soft);
    border-radius: 0 var(--ms-radius) var(--ms-radius) 0;
    color: var(--ms-text-2);
    font-style: italic;
}

code, pre {
    font-family: var(--ms-font-mono);
    font-size: 14px;
}
pre {
    background: var(--ms-bg-soft);
    padding: 16px 20px;
    border-radius: var(--ms-radius);
    overflow-x: auto;
    margin: 16px 0;
}
:not(pre) > code {
    background: var(--ms-bg-soft);
    padding: 2px 8px;
    border-radius: 6px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 15px;
}
th, td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--ms-divider);
    text-align: left;
}
th {
    background: var(--ms-bg-soft);
    font-weight: 600;
}

/* ============================================================
   2. Контейнер и шапка
   ============================================================ */
.ms-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.ms-header {
    border-bottom: 1px solid var(--ms-divider);
    background: var(--ms-bg);
    position: sticky;
    top: 0;
    z-index: 50;
}
.ms-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    padding-bottom: 16px;
    gap: 20px;
}
.ms-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 20px;
    color: var(--ms-dark);
}
.ms-logo-icon { font-size: 24px; line-height: 1; }
.ms-nav {
    display: flex;
    gap: 24px;
    align-items: center;
}
.ms-nav a {
    font-size: 15px;
    font-weight: 500;
    color: var(--ms-text-2);
}
.ms-nav a:hover { color: var(--ms-dark); }
.ms-nav a.active { color: var(--ms-dark); font-weight: 600; }

.ms-main {
    min-height: calc(100vh - 200px);
    padding: 40px 0 60px;
}

/* ============================================================
   3. Подвал
   ============================================================ */
.ms-footer {
    background: var(--ms-dark);
    color: #b8c5d1;
    padding: 48px 0 24px;
    margin-top: 60px;
}
.ms-footer-inner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ms-footer-title {
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 12px;
}
.ms-footer-desc {
    font-size: 14px;
    line-height: 1.55;
    color: #8a9bab;
    max-width: 320px;
}
.ms-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ms-footer-links li { margin-bottom: 8px; }
.ms-footer-links a {
    color: #b8c5d1;
    font-size: 14px;
}
.ms-footer-links a:hover { color: var(--ms-lime); }
.ms-footer-bottom {
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
    color: #6e8095;
}
.ms-footer-disclaimer {
    font-size: 12px;
    color: #5a6c80;
    margin: 0;
}

/* ============================================================
   4. Листинг статей (blog/index.php)
   ============================================================ */
.blog-header {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 24px;
    text-align: center;
}
.blog-header h1 {
    font-size: 36px;
    margin-bottom: 12px;
}
.blog-header p {
    font-size: 17px;
    color: var(--ms-text-2);
    max-width: 640px;
    margin: 0 auto;
}

.blog-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--ms-divider);
}
.blog-filters a {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ms-text-2);
    background: var(--ms-bg-soft);
}
.blog-filters a:hover { background: #ebebef; color: var(--ms-text); }
.blog-filters a.active {
    background: var(--ms-dark);
    color: #fff;
}

.blog-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 48px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.blog-list { display: flex; flex-direction: column; gap: 16px; }

.blog-list-item {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 20px 24px;
    background: #fff;
    border: 1px solid var(--ms-divider);
    border-radius: var(--ms-radius-lg);
    transition: box-shadow 0.2s, transform 0.1s;
}
.blog-list-item:hover {
    box-shadow: var(--ms-shadow-h);
    transform: translateY(-1px);
}
.item-date {
    flex-shrink: 0;
    width: 90px;
    font-size: 13px;
    color: var(--ms-text-3);
    padding-top: 4px;
}
.item-content { flex: 1; min-width: 0; }
.item-title {
    display: block;
    font-size: 21px;
    font-weight: 700;
    color: var(--ms-text);
    margin-bottom: 8px;
    line-height: 1.3;
}
.item-title:hover { color: var(--ms-orange); }
.item-excerpt {
    font-size: 15px;
    color: var(--ms-text-2);
    margin: 0 0 10px;
    line-height: 1.55;
}
.item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 13px;
    color: var(--ms-text-3);
    align-items: center;
}
.category-tag {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    background: rgba(0, 229, 160, 0.12);
    color: #00875f;
    text-decoration: none;
}
.category-tag:hover {
    background: rgba(0, 229, 160, 0.2);
    color: #005f43;
}
.item-image {
    flex-shrink: 0;
    width: 200px;
}
.item-image img {
    width: 200px;
    height: 130px;
    object-fit: cover;
    border-radius: var(--ms-radius);
}

/* Сайдбар */
.blog-sidebar { font-size: 15px; }
.sidebar-widget {
    background: var(--ms-bg-soft);
    border-radius: var(--ms-radius-lg);
    padding: 20px 24px;
    margin-bottom: 20px;
}
.sidebar-widget h3 {
    font-size: 16px;
    margin: 0 0 14px;
}
.sidebar-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sidebar-widget li {
    padding: 8px 0;
    border-bottom: 1px solid var(--ms-divider);
    margin: 0;
}
.sidebar-widget li:last-child { border-bottom: none; }
.sidebar-widget a {
    font-size: 14px;
    font-weight: 500;
    color: var(--ms-text);
    line-height: 1.45;
    display: block;
}
.sidebar-widget a:hover { color: var(--ms-orange); }

/* Пагинация */
.pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 40px 0 0;
}
.pagination a, .pagination span {
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    color: var(--ms-text-2);
    background: var(--ms-bg-soft);
    padding: 0 12px;
}
.pagination a:hover { background: #ebebef; color: var(--ms-text); }
.pagination .active {
    background: var(--ms-dark);
    color: #fff;
}
.pagination .disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.notification {
    padding: 16px 20px;
    border-radius: var(--ms-radius);
    font-size: 15px;
    margin: 16px 0;
}
.notification.info {
    background: #eef4ff;
    color: #1e40af;
    border-left: 4px solid #3b82f6;
}

/* ============================================================
   5. Страница статьи (blog/post.php)
   ============================================================ */
.article-nav-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 0 20px;
    max-width: 1200px;
    margin: 0 auto 24px;
    font-size: 14px;
}
.nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 10px;
    color: var(--ms-text-2);
    font-weight: 500;
}
.nav-btn:hover { background: var(--ms-bg-soft); color: var(--ms-dark); }
.nav-btn.current { color: var(--ms-text-3); max-width: 400px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-breadcrumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nav-sep { color: var(--ms-text-3); }

.article-header {
    max-width: 800px;
    margin: 0 auto 24px;
    padding: 0 20px;
}
.article-header h1 {
    font-size: 40px;
    line-height: 1.15;
    margin: 12px 0 20px;
}
.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 14px;
    color: var(--ms-text-3);
    align-items: center;
}
.meta-item { display: inline-flex; align-items: center; gap: 6px; }
.meta-item svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.category-link { color: var(--ms-text-2); font-weight: 500; }
.category-link:hover { color: var(--ms-orange); }

.article-featured-image {
    max-width: 900px;
    margin: 0 auto 32px;
    padding: 0 20px;
}
.article-featured-image img {
    width: 100%;
    border-radius: var(--ms-radius-lg);
}

.article-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
    font-size: 18px;
    line-height: 1.75;
}
.article-content h2 { font-size: 28px; margin-top: 40px; }
.article-content h3 { font-size: 22px; margin-top: 28px; }
.article-content a { color: var(--ms-orange); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.article-content a:hover { color: var(--ms-dark); }
.article-content img { border-radius: var(--ms-radius); margin: 20px 0; }

/* CTA-блок в статье */
.article-cta {
    max-width: 800px;
    margin: 48px auto 0;
    padding: 32px 28px;
    background: linear-gradient(135deg, var(--ms-dark) 0%, var(--ms-dark-2) 100%);
    color: #fff;
    border-radius: var(--ms-radius-lg);
    text-align: center;
}
.article-cta h3 {
    color: #fff;
    font-size: 22px;
    margin: 0 0 12px;
}
.article-cta p {
    color: #b8c5d1;
    font-size: 16px;
    margin: 0 0 20px;
}

/* Похожие статьи */
.related-posts {
    max-width: 1000px;
    margin: 60px auto 0;
    padding: 0 20px;
}
.related-posts h3 {
    font-size: 22px;
    margin: 0 0 20px;
}
.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.related-card {
    background: #fff;
    border: 1px solid var(--ms-divider);
    border-radius: var(--ms-radius-lg);
    overflow: hidden;
    transition: box-shadow 0.2s;
}
.related-card:hover { box-shadow: var(--ms-shadow-h); }
.related-card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}
.related-card-content { padding: 16px 20px 20px; }
.related-card h4 {
    font-size: 16px;
    margin: 0;
    line-height: 1.35;
}
.related-card h4 a { color: var(--ms-text); }
.related-card h4 a:hover { color: var(--ms-orange); }

/* Хлебные крошки (HTML) */
.breadcrumbs {
    max-width: 1200px;
    margin: 0 auto 20px;
    padding: 0 20px;
    font-size: 14px;
}
.breadcrumbs ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    color: var(--ms-text-3);
}
.breadcrumbs ol li:not(:last-child)::after {
    content: '›';
    margin-left: 6px;
    color: var(--ms-text-3);
}
.breadcrumbs a { color: var(--ms-text-2); }
.breadcrumbs a:hover { color: var(--ms-orange); }

/* ============================================================
   6. AI-блоки (для цитирования ИИ-поисковиками)
   ============================================================ */

/* Общий стиль блоков */
.ai-block {
    margin: 32px 0;
    padding: 24px 28px;
    border-radius: var(--ms-radius-lg);
    background: var(--ms-bg-soft);
    border-left: 4px solid var(--ms-lime);
}
.ai-block > h2:first-child,
.ai-block > h3:first-child {
    margin-top: 0;
}
.ai-block > h2,
.ai-block > h3 {
    font-size: 20px;
    margin: 0 0 16px;
}
.ai-block p:last-child { margin-bottom: 0; }
.ai-block ul, .ai-block ol { margin-bottom: 0; }

/* --- 6.1 FAQ --- */
.ai-block-faq {
    border-left-color: var(--ms-orange);
}
.ai-block-faq .faq-item {
    padding: 16px 0;
    border-bottom: 1px solid var(--ms-divider);
}
.ai-block-faq .faq-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.ai-block-faq .faq-item:first-child { padding-top: 0; }
.ai-block-faq .faq-item h3 {
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--ms-dark);
}
.ai-block-faq .faq-item p {
    margin: 0;
    font-size: 16px;
    color: var(--ms-text-2);
    line-height: 1.65;
}

/* --- 6.2 Плюсы / Минусы --- */
.ai-block-proscons {
    background: #fff;
    border-left: none;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--ms-divider);
}
.ai-block-proscons .pros,
.ai-block-proscons .cons {
    padding: 24px 28px;
}
.ai-block-proscons .pros {
    background: rgba(0, 229, 160, 0.06);
    border-right: 1px solid var(--ms-divider);
}
.ai-block-proscons .cons {
    background: rgba(255, 107, 0, 0.06);
}
.ai-block-proscons h3 {
    font-size: 18px;
    margin: 0 0 14px;
}
.ai-block-proscons .pros h3 { color: #00875f; }
.ai-block-proscons .cons h3 { color: #c2410c; }
.ai-block-proscons ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ai-block-proscons li {
    position: relative;
    padding: 6px 0 6px 28px;
    font-size: 15px;
    line-height: 1.55;
    margin: 0;
}
.ai-block-proscons .pros li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 6px;
    color: #00875f;
    font-weight: 700;
    font-size: 16px;
}
.ai-block-proscons .cons li::before {
    content: '✕';
    position: absolute;
    left: 0;
    top: 6px;
    color: #c2410c;
    font-weight: 700;
    font-size: 14px;
}

/* --- 6.3 Вердикт --- */
.ai-block-verdict {
    background: linear-gradient(135deg, var(--ms-dark) 0%, var(--ms-dark-2) 100%);
    color: #fff;
    border-left: none;
    padding: 28px 32px;
}
.ai-block-verdict h3 {
    color: var(--ms-lime);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 12px;
}
.ai-block-verdict p {
    font-size: 18px;
    line-height: 1.6;
    color: #fff;
    font-weight: 500;
    margin: 0;
}

/* --- 6.4 Ключевые выводы --- */
.ai-block-takeaways {
    border-left-color: var(--ms-lime);
}
.ai-block-takeaways h3 {
    color: var(--ms-dark);
}
.ai-block-takeaways ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ai-block-takeaways li {
    position: relative;
    padding: 8px 0 8px 28px;
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    border-bottom: 1px solid var(--ms-divider);
}
.ai-block-takeaways li:last-child { border-bottom: none; }
.ai-block-takeaways li::before {
    content: '→';
    position: absolute;
    left: 0;
    top: 8px;
    color: var(--ms-orange);
    font-weight: 700;
}

/* --- 6.5 Сравнительная таблица --- */
.ai-block-table {
    background: #fff;
    border-left: none;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--ms-divider);
}
.ai-block-table h2,
.ai-block-table h3 {
    padding: 20px 28px 0;
    margin: 0 0 12px;
}
.ai-block-table table {
    margin: 0;
    font-size: 15px;
    border-collapse: collapse;
}
.ai-block-table th,
.ai-block-table td {
    padding: 14px 20px;
    border-bottom: 1px solid var(--ms-divider);
    vertical-align: top;
}
.ai-block-table tr:last-child td { border-bottom: none; }
.ai-block-table th {
    background: var(--ms-bg-soft);
    font-weight: 600;
    color: var(--ms-dark);
}

/* ============================================================
   7. Адаптив
   ============================================================ */
@media (max-width: 900px) {
    .blog-layout { grid-template-columns: 1fr; gap: 32px; }
    .blog-sidebar { order: 2; }
    .related-grid { grid-template-columns: 1fr 1fr; }
    .ms-footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
    body.ms-body { font-size: 16px; }
    h1 { font-size: 26px; }
    h2 { font-size: 22px; }
    h3 { font-size: 18px; }

    .ms-header-inner { flex-direction: column; gap: 12px; padding-top: 14px; padding-bottom: 14px; }
    .ms-nav { gap: 16px; }
    .ms-nav a { font-size: 14px; }

    .blog-header h1 { font-size: 26px; }
    .blog-header p { font-size: 15px; }

    .blog-list-item { flex-wrap: wrap; padding: 16px 18px; }
    .item-date { width: 100%; order: 2; font-size: 12px; padding: 0; }
    .item-content { order: 1; width: 100%; }
    .item-image { order: 3; width: 100%; margin-top: 4px; }
    .item-image img { width: 100%; height: 160px; }
    .item-title { font-size: 18px; }

    .article-header h1 { font-size: 26px; }
    .article-content { font-size: 17px; }
    .article-content h2 { font-size: 22px; }
    .article-content h3 { font-size: 19px; }

    .related-grid { grid-template-columns: 1fr; }

    .ai-block { padding: 18px 20px; margin: 24px 0; }
    .ai-block-proscons { grid-template-columns: 1fr; }
    .ai-block-proscons .pros { border-right: none; border-bottom: 1px solid var(--ms-divider); }
    .ai-block-verdict { padding: 22px 24px; }
    .ai-block-verdict p { font-size: 16px; }

    .ai-block-table { overflow-x: auto; }
    .ai-block-table table { min-width: 520px; }
    .ai-block-table th,
    .ai-block-table td { padding: 10px 14px; font-size: 14px; }

    .ms-footer-inner { grid-template-columns: 1fr; gap: 24px; }
    .ms-footer-bottom { flex-direction: column; align-items: flex-start; gap: 6px; }

    .article-nav-row { flex-direction: column; align-items: flex-start; gap: 8px; }
    .nav-btn.current { max-width: 100%; }
}

@media (max-width: 480px) {
    .ms-container { padding: 0 16px; }
    .blog-filters a { padding: 6px 12px; font-size: 13px; }
    .ai-block { padding: 16px 18px; }
    .ai-block-faq .faq-item h3 { font-size: 16px; }
    .ai-block-faq .faq-item p { font-size: 15px; }
}