/* ============================================================
   article-blocks.css — семантические классы для контента статей.

   Цель: убрать inline-стили из post_content. Все цвета берутся
   из CSS-переменных (см. dark-theme.css), поэтому тёмная тема
   подхватывается автоматически.

   Префикс .as-* = "article style". Все классы рассчитаны на
   использование внутри .article-content-single (single-article.php).
   ============================================================ */

/* ── Лид-абзац (мелкий, приглушённый, под заголовком) ── */
.article-content-single .as-lead {
    font-size: 15px;
    color: var(--c-text-muted, #6b5a48);
    margin: 0 0 24px 0;
    font-style: italic;
}

/* ── Акцентный H3 с подчёркиванием ── */
.article-content-single .as-h3 {
    font-size: 22px;
    font-weight: 600;
    margin: 32px 0 12px 0;
    color: var(--c-accent, #ff6f00);
    border-bottom: 2px solid var(--c-bg-soft, #f7f3ec);
    padding-bottom: 6px;
}

/* ── Выравнивание по ширине: переносим длинные слова, чтобы
   не было огромных пробелов между словами в кириллических текстах. */
.article-content-single p[style*="justify"],
.article-content-single .as-justify {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    word-spacing: 0.02em;
}

/* ============================================================
   ЦИТАТА В РАМКЕ (.as-quote) — оформление авторской цитаты
   с большой декоративной кавычкой.
   <blockquote class="as-quote">
       <p>Текст цитаты.</p>
       <cite class="as-quote-cite">— Автор, источник</cite>
   </blockquote>
   ============================================================ */
.as-quote {
    position: relative;
    margin: 28px 0;
    padding: 26px 32px 22px 56px;
    background: var(--c-bg-soft, #faf8f5);
    border: 1px solid var(--c-card-border, #ede8e0);
    border-left: 4px solid var(--c-accent, #ff6f00);
    border-radius: 12px;
    font-style: italic;
    font-size: 17px;
    line-height: 1.65;
    color: var(--c-text, #2d2926);
    quotes: "«" "»" "„" "“";
}
.as-quote::before {
    content: "“";
    position: absolute;
    left: 14px; top: -4px;
    font-family: Georgia, "Times New Roman", serif;
    font-style: normal;
    font-size: 64px;
    line-height: 1;
    color: var(--c-accent, #ff6f00);
    opacity: 0.35;
    pointer-events: none;
}
.as-quote p { margin: 0 0 10px 0; color: inherit; }
.as-quote p:last-child { margin-bottom: 0; }
.as-quote .as-quote-cite,
.as-quote cite {
    display: block;
    margin-top: 12px;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    color: var(--c-text-muted, #6b5a48);
}

/* Варианты цитаты — pull (крупная, центрированная) и subtle (без кавычки) */
.as-quote--pull {
    text-align: center;
    font-size: 20px;
    padding: 30px 40px;
    border-left: none;
    border-top: 3px solid var(--c-accent, #ff6f00);
    border-bottom: 3px solid var(--c-accent, #ff6f00);
    border-radius: 0;
    background: transparent;
}
.as-quote--pull::before { display: none; }

.as-quote--subtle {
    border-left: 3px solid var(--c-card-border, #ede8e0);
    background: transparent;
    padding: 8px 24px;
    font-size: 16px;
    border-top: none; border-right: none; border-bottom: none;
    border-radius: 0;
}
.as-quote--subtle::before { display: none; }

/* ============================================================
   НЕЙТРАЛЬНЫЙ КОНТЕЙНЕР-РАМКА (.as-frame) — просто рамочка,
   без цветной плашки и заголовка. Для группировки текста или
   подсветки фрагмента.
   <div class="as-frame">
       <p>Произвольный контент в рамке.</p>
   </div>
   ============================================================ */
.as-frame {
    margin: 22px 0;
    padding: 18px 22px;
    background: var(--c-card-bg, #ffffff);
    border: 1px solid var(--c-card-border, #ede8e0);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    color: var(--c-text, #2d2926);
}
.as-frame p:last-child { margin-bottom: 0; }
.as-frame--dashed { border-style: dashed; box-shadow: none; background: transparent; }
.as-frame--accent { border-color: var(--c-accent, #ff6f00); border-width: 2px; }

/* ============================================================
   ВЫНОСКА (callout) — короткая заметка/совет/предупреждение.
   <div class="as-callout as-callout--info">
       <p>Текст выноски...</p>
   </div>
   ============================================================ */
.as-callout {
    margin: 24px 0;
    padding: 18px 22px;
    background: var(--as-co-bg, #ecfdf5);
    border: 1px solid var(--as-co-border, #d1fae5);
    border-left: 4px solid var(--as-co-accent, #10b981);
    border-radius: 8px;
    color: var(--as-co-fg, #065f46);
}
.as-callout p { margin: 0 0 10px 0; color: inherit; }
.as-callout p:last-child { margin-bottom: 0; }
.as-callout strong { color: inherit; }

/* Варианты — success (по умолчанию зелёный), info, warn, danger */
.as-callout--info {
    --as-co-bg:     #eff6ff;
    --as-co-border: #dbeafe;
    --as-co-accent: #3b82f6;
    --as-co-fg:     #1e3a8a;
}
.as-callout--warn {
    --as-co-bg:     #fffbeb;
    --as-co-border: #fef3c7;
    --as-co-accent: #f59e0b;
    --as-co-fg:     #78350f;
}
.as-callout--danger {
    --as-co-bg:     #fef2f2;
    --as-co-border: #fee2e2;
    --as-co-accent: #ef4444;
    --as-co-fg:     #7f1d1d;
}

/* ============================================================
   ЦВЕТНАЯ КАРТОЧКА с заголовком-плашкой.
   <div class="as-card as-card--blue">
       <div class="as-card-header">Заголовок плашки</div>
       <div class="as-card-body"><p>Содержимое...</p></div>
   </div>
   ============================================================ */
.as-card {
    border: 1px solid var(--as-cd-border, #e5e7eb);
    border-radius: 14px;
    overflow: hidden;
    margin: 24px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    background: var(--c-card-bg, #ffffff);
}
.as-card-header {
    padding: 14px 20px 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--as-cd-fg, #0d47a1);
    background: var(--as-cd-grad, linear-gradient(135deg,#d6eaf8,#e3f2fd));
    margin: 0;
}
.as-card-body {
    padding: 16px 20px;
    color: var(--c-text, #2d2926);
}
.as-card-body p:last-child { margin-bottom: 0; }

/* Варианты цвета */
.as-card--blue {
    --as-cd-border: #90caf9;
    --as-cd-grad:   linear-gradient(135deg,#d6eaf8,#e3f2fd);
    --as-cd-fg:     #0d47a1;
}
.as-card--green {
    --as-cd-border: #81c784;
    --as-cd-grad:   linear-gradient(135deg,#d7ecd9,#e8f5e9);
    --as-cd-fg:     #1b5e20;
}
.as-card--orange {
    --as-cd-border: #ffcc80;
    --as-cd-grad:   linear-gradient(135deg,#fff3e0,#ffe0b2);
    --as-cd-fg:     #e65100;
}
.as-card--purple {
    --as-cd-border: #b39ddb;
    --as-cd-grad:   linear-gradient(135deg,#e1d6f7,#ede4fa);
    --as-cd-fg:     #4a148c;
}

/* ============================================================
   РЕФ-СПИСОК (упоминания книг/авторов/исследований внизу статьи).
   <ul class="as-refs">
       <li><a class="as-ref-item" href="#">
           <img class="as-ref-img" src="..." alt="">
           <span class="as-ref-text">
               <span class="as-ref-title">Название книги</span>
               <span class="as-ref-meta">Автор, год</span>
           </span>
       </a></li>
   </ul>
   ============================================================ */
.as-refs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    margin: 28px 0 0;
    list-style: none;
}
.as-refs li { margin: 0; padding: 0; flex: 1 1 260px; }
.as-ref-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: var(--c-card-bg, #fff);
    border: 1px solid var(--c-card-border, #d0d0d0);
    border-radius: 10px;
    text-decoration: none !important;
    color: var(--c-text, #333);
    transition: all 0.2s ease;
    height: 100%;
}
.as-ref-item:hover {
    border-color: var(--c-accent, #ff6f00);
    transform: translateY(-1px);
    color: var(--c-text, #333);
}
.as-ref-img {
    width: 56px; height: 56px;
    min-width: 56px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}
.as-ref-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.as-ref-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--c-text, #333);
}
.as-ref-meta {
    font-size: 11px;
    color: var(--c-text-muted, #888);
}

/* Цветной квадратик-номер вместо картинки */
.as-ref-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    min-width: 36px;
    border-radius: 7px;
    background: linear-gradient(135deg,#667eea,#764ba2);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}
.as-ref-num--green  { background: linear-gradient(135deg,#43e97b,#38f9d7); color: #1a1a1a; }
.as-ref-num--pink   { background: linear-gradient(135deg,#f093fb,#f5576c); }
.as-ref-num--blue   { background: linear-gradient(135deg,#4facfe,#00f2fe); color: #1a1a1a; }
.as-ref-num--purple { background: linear-gradient(135deg,#a18cd1,#5b86e5); }

/* ============================================================
   СРАВНИТЕЛЬНАЯ ТАБЛИЦА.
   <div class="as-table-wrap">
     <table class="as-table">
       <thead><tr><th>Показатель</th><th>Было</th><th>Стало</th></tr></thead>
       <tbody>
         <tr><td>...</td><td class="neg">плохо</td><td class="pos">хорошо</td></tr>
       </tbody>
     </table>
   </div>
   ============================================================ */
.as-table-wrap { overflow-x: auto; margin: 22px 0; }
.as-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    background: var(--c-card-bg, #fff);
    border: 1px solid var(--c-card-border, #e5e7eb);
}
.as-table th,
.as-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--c-card-border, #f3f4f6);
    text-align: left;
    color: var(--c-text, #333);
}
.as-table th {
    background: var(--c-bg-soft, #f9fafb);
    font-weight: 600;
}
.as-table tr:last-child td { border-bottom: none; }
.as-table .pos     { color: #10b981; font-weight: 600; }
.as-table .neg     { color: #ef4444; font-weight: 600; }
.as-table .neutral { color: var(--c-text-muted, #6b7280); }
.as-table .center  { text-align: center; }

/* ============================================================
   ТЁМНАЯ ТЕМА — переопределение токенов, остальное идёт само
   через CSS-переменные.
   ============================================================ */
html[data-theme="dark"] .as-callout {
    --as-co-bg:     #172c22;
    --as-co-border: #1e4a35;
    --as-co-fg:     #86efac;
}
html[data-theme="dark"] .as-callout--info {
    --as-co-bg:     #172033;
    --as-co-border: #1e3a5f;
    --as-co-fg:     #93c5fd;
}
html[data-theme="dark"] .as-callout--warn {
    --as-co-bg:     #2e2410;
    --as-co-border: #5a3d1a;
    --as-co-fg:     #fcd34d;
}
html[data-theme="dark"] .as-callout--danger {
    --as-co-bg:     #2e1818;
    --as-co-border: #5a2929;
    --as-co-fg:     #fca5a5;
}

html[data-theme="dark"] .as-card--blue {
    --as-cd-grad:   linear-gradient(135deg,#1e3a5f,#1a3050);
    --as-cd-fg:     #93c5fd;
    --as-cd-border: #2c5180;
}
html[data-theme="dark"] .as-card--green {
    --as-cd-grad:   linear-gradient(135deg,#1f3a26,#173420);
    --as-cd-fg:     #86efac;
    --as-cd-border: #2d5a3a;
}
html[data-theme="dark"] .as-card--orange {
    --as-cd-grad:   linear-gradient(135deg,#3a2510,#301c0a);
    --as-cd-fg:     #fdba74;
    --as-cd-border: #5a3d1a;
}
html[data-theme="dark"] .as-card--purple {
    --as-cd-grad:   linear-gradient(135deg,#2e2348,#241a36);
    --as-cd-fg:     #c4b5fd;
    --as-cd-border: #4a3d6e;
}

html[data-theme="dark"] .as-table .pos { color: #4ade80; }
html[data-theme="dark"] .as-table .neg { color: #f87171; }

/* Mobile */
@media (max-width: 600px) {
    .as-card-header { font-size: 15px; padding: 12px 16px 10px; }
    .as-card-body   { padding: 14px 16px; }
    .as-callout     { padding: 14px 16px; }
    .as-refs li     { flex: 1 1 100%; }
}