/* ===== СТРАНИЦЫ БЛОГА =====
   Подключается после style.css на страницах /blog/ */

/* шапка блока статьи */
.article{max-width:800px;margin:0 auto;padding:56px 0 80px}
.article-header{margin-bottom:1.8em}
.article-meta{
    display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;
    font-size:.88rem;color:var(--c-text-soft);margin-top:1em;
}
.article-meta .post-tag{margin:0}

/* типографика статьи */
.article h1{font-size:clamp(1.7rem,4.2vw,2.5rem);margin:.25em 0 .35em}
.article h2{font-size:clamp(1.3rem,3vw,1.7rem);margin:1.9em 0 .55em}
.article h3{font-size:1.18rem;margin:1.5em 0 .4em}
.article p{margin-bottom:1.05em;font-size:1.04rem}
.article ul,.article ol{margin:0 0 1.3em;padding-left:0;list-style:none}
.article ul li,.article ol li{
    position:relative;padding-left:28px;margin-bottom:.6em;
    color:var(--c-text-soft);font-size:1.02rem;
}
.article ul li::before{
    content:"";position:absolute;left:0;top:.6em;
    width:9px;height:9px;border-radius:50%;background:var(--c-accent);
}
.article ol{counter-reset:art}
.article ol li{counter-increment:art}
.article ol li::before{
    content:counter(art);
    position:absolute;left:0;top:.15em;
    width:22px;height:22px;border-radius:50%;
    background:var(--c-accent);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:.78rem;font-weight:700;
}
.article strong{color:var(--c-text)}
.article .lead{font-size:1.12rem;color:var(--c-text)}

/* таблицы с фразами */
.phrases{width:100%;border-collapse:collapse;margin:1.2em 0 1.8em;font-size:.97rem;
    background:#fff;border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow)}
.phrases th{
    text-align:left;background:var(--c-bg-alt);
    font-size:.85rem;text-transform:uppercase;letter-spacing:.03em;
}
.phrases th,.phrases td{padding:11px 14px;border-bottom:1px solid var(--c-border)}
.phrases tr:last-child td{border-bottom:none}
.phrases td:first-child{font-weight:600;color:var(--c-text);width:46%}
.phrases td:nth-child(2){color:var(--c-text-soft)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* врезки */
.article-note{
    background:var(--c-bg-alt);
    border-left:4px solid var(--c-accent);
    border-radius:var(--radius-sm);
    padding:18px 22px;margin:1.6em 0;
}
.article-note p{margin:0;font-size:.98rem}
.article-note strong{display:block;margin-bottom:.3em}

/* CTA в конце статьи */
.article-cta{
    margin-top:2.6em;
    background:
        radial-gradient(ellipse at 80% 10%, rgba(244,162,97,.28), transparent 55%),
        linear-gradient(150deg, #2A1B12 0%, #3D2317 55%, #4A2A1B 100%);
    border-radius:var(--radius);
    padding:36px 30px;
    text-align:center;
    box-shadow:var(--shadow-lg);
}
.article-cta h2{color:#FFF8F1;margin:0 0 .4em;font-size:1.5rem}
.article-cta p{color:rgba(255,248,241,.85);max-width:520px;margin:0 auto 1.4em;font-size:1rem}

/* навигация «другие статьи» */
.more-posts{margin-top:3em;padding-top:2em;border-top:1px solid var(--c-border)}
.more-posts h2{font-size:1.3rem;margin-bottom:1em}
.more-posts .post-tag{margin-bottom:10px}
.more-posts a.card{display:block;color:inherit;margin-bottom:16px}
.more-posts a.card:hover{color:inherit}

/* список статей на /blog/ */
.blog-list{max-width:800px;margin:0 auto;padding:56px 0 80px}
.blog-list .card{margin-bottom:20px}
.blog-list a.card{display:block;color:inherit}
.blog-list a.card:hover{color:inherit}
.blog-list .card p{margin-bottom:.8em}
.blog-list .card h2{font-size:clamp(1.2rem,2.6vw,1.45rem);margin-bottom:.4em}

@media (max-width:720px){
    .article,.blog-list{padding:36px 0 60px}
    .phrases{font-size:.9rem}
    .phrases th,.phrases td{padding:9px 10px}
    .article-cta{padding:28px 20px}
}

/* ===== TL;DR / Key Takeaways для статей блога ===== */
.article .tldr{
    background: linear-gradient(135deg, #FFF1E1 0%, #FCEEDF 100%);
    border: 1px solid var(--c-accent-l);
    border-left: 4px solid var(--c-primary);
    border-radius: var(--radius-sm);
    padding: 16px 20px;
    margin: 20px 0 28px;
    box-shadow: var(--shadow);
}
.article .tldr-title{
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--c-primary-d);
    margin: 0 0 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.article .tldr-list{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.article .tldr-list li{
    font-size: 0.97rem;
    line-height: 1.5;
    padding-left: 22px;
    position: relative;
    color: var(--c-text);
}
.article .tldr-list li::before{
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--c-green);
    font-weight: 700;
    font-size: 1.05rem;
}

/* ===== FAQ в статье ===== */
.article-faq{margin-top:2.8em;padding-top:1.6em;border-top:1px solid var(--c-border)}
.article-faq h2{font-size:1.4rem;margin-bottom:1em}
.article-faq details{
    background:#fff;border:1px solid var(--c-border);
    border-radius:var(--radius-sm);
    padding:14px 18px;margin-bottom:10px;
    box-shadow:var(--shadow);
}
.article-faq summary{
    cursor:pointer;font-weight:600;color:var(--c-text);
    list-style:none;position:relative;padding-right:24px;
}
.article-faq summary::-webkit-details-marker{display:none}
.article-faq summary::after{
    content:"+";position:absolute;right:0;top:0;
    color:var(--c-primary);font-size:1.4rem;font-weight:700;
    transition:transform .2s;
}
.article-faq details[open] summary::after{transform:rotate(45deg)}
.article-faq details p{margin:10px 0 0;font-size:.97rem;color:var(--c-text-soft)}