/* ============================================================
   Teamflows — блог (список статей и статья).
   Надстройка над site.css: те же токены, шрифты и сетка фона.
   ============================================================ */

.crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted)
}

.crumbs a:hover {
    color: var(--text)
}

.crumbs span {
    opacity: .5
}

/* ---------- список ---------- */
.blog-hero {
    padding: 56px 0 10px
}

.blog-hero h1 {
    margin-top: 18px;
    font-size: clamp(36px, 6vw, 68px)
}

.blog-hero .sub {
    margin-top: 18px;
    max-width: 60ch;
    font-size: clamp(16px, 2vw, 19px);
    color: var(--muted)
}

.blog-hero .count {
    margin-top: 16px;
    display: inline-block
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 30px 0 22px
}

.chip {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .04em;
    padding: 8px 13px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    transition: .15s
}

.chip:hover {
    color: var(--text);
    border-color: var(--text)
}

.chip[aria-pressed="true"] {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff
}

.chip:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px
}

.posts-grid,
.related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding-bottom: 80px
}

.related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-bottom: 0
}

.post-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    transition: border-color .18s, transform .18s, box-shadow .18s
}

.post-card[hidden] {
    display: none
}

.post-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 18px 36px -28px rgba(79, 70, 229, .55)
}

.post-card h3 {
    font-size: 20px;
    line-height: 1.2
}

.post-card p {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.55;
    flex: 1
}

.pc-tag {
    align-self: flex-start;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--primary-dark);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    padding: 5px 9px;
    border-radius: 6px
}

.pc-meta {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted)
}

@media(max-width:960px) {
    .posts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(max-width:620px) {

    .posts-grid,
    .related-grid {
        grid-template-columns: 1fr
    }
}

/* ---------- статья ---------- */
.post-wrap {
    max-width: 820px;
    padding-top: 44px;
    padding-bottom: 90px
}

.post h1 {
    margin-top: 18px;
    font-size: clamp(32px, 5vw, 52px);
    line-height: 1.06
}

.post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-top: 20px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--muted)
}

.post-meta .other-lang {
    color: var(--primary-dark);
    font-weight: 600
}

.post-body {
    margin-top: 28px;
    font-size: 18px;
    line-height: 1.72
}

.post-body>*+* {
    margin-top: 1.05em
}

.post-body .lead {
    font-size: 20px;
    line-height: 1.6
}

.post-body h2 {
    margin-top: 2.1em;
    font-size: clamp(25px, 3.4vw, 34px);
    line-height: 1.12;
    scroll-margin-top: 90px
}

.post-body h3 {
    margin-top: 1.6em;
    font-size: 21px;
    line-height: 1.25;
    scroll-margin-top: 90px
}

.post-body a {
    color: var(--primary-dark);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px
}

.post-body ul,
.post-body ol {
    padding-left: 1.3em
}

.post-body li+li {
    margin-top: .4em
}

.post-body strong {
    font-weight: 600
}

.post-body blockquote {
    margin-left: 0;
    padding: 4px 0 4px 18px;
    border-left: 3px solid var(--primary);
    color: var(--muted)
}

.post-body code {
    font-family: var(--mono);
    font-size: .88em;
    background: var(--surface-alt);
    padding: 2px 6px;
    border-radius: 5px
}

.post-body hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 2em 0
}

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface)
}

.post-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.5
}

.post-body th,
.post-body td {
    text-align: left;
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
    vertical-align: top
}

.post-body thead th {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--surface-alt)
}

.post-body tr:last-child td {
    border-bottom: 0
}

/* «Коротко», оглавление, заметки */
.tldr,
.toc,
.note {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 20px 22px
}

.tldr {
    border-left: 4px solid var(--accent)
}

.note {
    border-left: 4px solid var(--primary);
    font-size: 16.5px
}

.tldr-title,
.toc-title {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px
}

.tldr ul,
.toc ol {
    margin: 0;
    font-size: 16.5px
}

.toc a {
    color: var(--text);
    text-decoration: none
}

.toc a:hover {
    color: var(--primary-dark)
}

/* CTA внутри статьи */
.post-cta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px 18px;
    align-items: center;
    padding: 22px;
    border-radius: 16px;
    background: linear-gradient(135deg, #EEF2FF, #F0FDFA);
    border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent)
}

.post-cta .pc-ic img {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: block
}

.post-cta .pc-h {
    font-family: var(--display);
    font-weight: 700;
    font-size: 21px;
    letter-spacing: -.01em
}

.post-cta p {
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--muted);
    margin-top: 4px
}

.post-cta .pc-acts {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.post-body .post-cta a.btn {
    text-decoration: none
}

.post-body .post-cta a.btn-solid {
    color: #fff
}

.post-body .post-cta a.btn-line {
    color: var(--text)
}

/* FAQ */
.faq-list {
    display: grid;
    gap: 10px
}

.faq-item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0 18px
}

.faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: 16px 28px 16px 0;
    font-weight: 600;
    font-size: 17px;
    line-height: 1.4;
    position: relative
}

.faq-item summary::-webkit-details-marker {
    display: none
}

.faq-item summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 13px;
    font-family: var(--mono);
    font-size: 20px;
    color: var(--muted)
}

.faq-item[open] summary::after {
    content: "–"
}

.faq-a {
    padding-bottom: 16px;
    font-size: 16.5px;
    color: #334155
}

.faq-a>*+* {
    margin-top: .7em
}

/* автор и «читайте также» */
.author-box {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-top: 48px;
    padding: 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px
}

.author-ava {
    flex: none
}

.author-ava img {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: block
}

.author-name {
    font-family: var(--display);
    font-weight: 700;
    font-size: 18px
}

.author-box p {
    margin-top: 4px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--muted)
}

.author-box a {
    color: var(--primary-dark);
    font-weight: 600
}

.related {
    margin-top: 48px
}

.related h2 {
    font-size: 28px;
    margin-bottom: 18px
}

@media(max-width:560px) {
    .post-wrap {
        padding-top: 28px
    }

    .post-body {
        font-size: 17px
    }

    .post-body .lead {
        font-size: 18.5px
    }

    .post-cta {
        grid-template-columns: 1fr
    }

    .post-cta .pc-acts .btn {
        width: 100%;
        justify-content: center
    }

    .author-box {
        flex-direction: column
    }
}

.post-body pre {
    overflow-x: auto;
    padding: 16px 18px;
    background: var(--text);
    color: #E2E8F0;
    border-radius: 12px;
    font-size: 14.5px;
    line-height: 1.6
}

.post-body pre code {
    background: none;
    padding: 0;
    color: inherit;
    font-size: inherit
}