/* ============================================================
   articles.css — раздел «Статьи» (Kyial Aesthetic)
   Наследует палитру и шрифты из style.css (:root, body, h1-h3).
   Подключать ПОСЛЕ style.css. Зона: сайт-чат.
   ============================================================ */

.art-main{padding:44px 0 84px}
.artwrap{max-width:760px;margin:0 auto;padding:0 24px}

/* хлебные крошки */
.crumbs{font-size:12px;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);margin:0 0 22px}
.crumbs a{color:var(--gold-d)}
.crumbs a:hover{color:var(--ink)}
.crumbs .sep{margin:0 9px;color:var(--soft)}

.art-h1{font-size:40px;line-height:1.1;margin:0 0 24px;letter-spacing:.2px}
@media(max-width:560px){.art-h1{font-size:30px}}

/* TL;DR-врезка «Коротко» — прямой ответ для читателя и ИИ */
.tldr{background:linear-gradient(180deg,var(--gold-sheen),var(--card));border:1px solid var(--line);
     border-left:3px solid var(--gold);border-radius:14px;padding:18px 22px;margin:0 0 32px;
     color:var(--ink-2);font-size:17px;line-height:1.62}
.tldr b{display:block;font-family:'Manrope',sans-serif;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
     font-size:11px;color:var(--gold-d);margin-bottom:7px}

.art-body h2{font-size:27px;margin:40px 0 12px;letter-spacing:.2px}
@media(max-width:560px){.art-body h2{font-size:23px;margin-top:34px}}
.art-body p{font-size:17.5px;line-height:1.78;color:var(--ink);margin:0 0 16px;overflow-wrap:break-word}
.artwrap,.hub-grid{overflow-wrap:break-word}

/* автор — E-E-A-T, без курсива (правило Кыял) */
.art-author{display:flex;gap:16px;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
     padding:18px 0;margin:32px 0;color:var(--muted);font-size:15.5px;line-height:1.55}
.art-author img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:0 0 auto;border:1px solid var(--gold-l)}
.art-author b{color:var(--ink);font-weight:600}

/* FAQ — видимые вопросы-ответы (для чтения и цитирования ИИ) */
.art-faq{margin:40px 0 0}
.art-faq h2{margin-bottom:16px}
.art-faq .qa{border-top:1px solid var(--line);padding:16px 0}
.art-faq .q{font-family:'Cormorant Garamond',serif;font-size:21px;font-weight:600;margin:0 0 6px;color:var(--ink)}
.art-faq .a{font-size:16.5px;line-height:1.7;color:var(--ink-2);margin:0}

/* финальный CTA */
.art-cta{margin:44px 0 0;padding:30px 26px;background:var(--slate);border-radius:16px;text-align:center}
.art-cta p{color:var(--nude);font-size:17.5px;line-height:1.6;margin:0 0 20px}
.art-cta .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* связанные статьи */
.art-related{margin:46px 0 0;border-top:1px solid var(--line);padding-top:26px}
.art-related .lbl{font-size:11px;letter-spacing:2.4px;text-transform:uppercase;color:var(--gold-d);font-weight:700;margin-bottom:14px}
.art-related ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.art-related a{display:block;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--card);
     font-family:'Cormorant Garamond',serif;font-size:19px;color:var(--ink);transition:border-color .2s,transform .2s}
.art-related a:hover{border-color:var(--gold-l);transform:translateY(-1px)}

/* ---- хаб /articles/ ---- */
.hub-head{text-align:center;padding:24px 0 6px}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin-top:34px}
.hub-card{display:block;padding:26px;border:1px solid var(--line);border-radius:16px;background:var(--card);
     transition:border-color .2s,transform .2s}
.hub-card:hover{border-color:var(--gold-l);transform:translateY(-2px)}
.hub-card .k{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold-d);font-weight:700;margin-bottom:10px}
.hub-card h2{font-size:25px;margin:0 0 10px;line-height:1.14}
.hub-card p{font-size:15.5px;color:var(--muted);line-height:1.6;margin:0}

/* тизер «Полезное» на главной */
.teaser-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin-top:8px}
.teaser-card{display:block;padding:22px;border:1px solid var(--line);border-radius:14px;background:var(--card);
     transition:border-color .2s,transform .2s}
.teaser-card:hover{border-color:var(--gold-l);transform:translateY(-2px)}
.teaser-card h3{font-size:21px;margin:0 0 8px;line-height:1.15;color:var(--ink)}
.teaser-card p{font-size:14.5px;color:var(--muted);line-height:1.55;margin:0}