/* =============================================================
   Blog — главная и детальная поста. По канону ДС ASUTLab v1.0.
   Зависит от: assets/site.css, assets/ds/tokens.css.
   ============================================================= */

/* ── Heading ─────────────────────────────────────────────────── */
.bl-head{padding:32px 0 24px}
.bl-head .crumbs{margin-bottom:16px;font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3,#8C93A4)}
.bl-head .crumbs a{color:inherit;text-decoration:none}
.bl-head .crumbs a:hover{color:var(--accent,#EE6A1F)}
.bl-head .crumbs .sep{margin:0 8px;color:var(--line-2,#E4E2DD)}
.bl-head h1{margin:0 0 12px;font-family:var(--f-display);font-weight:600;font-size:clamp(28px,4vw,40px);line-height:1.1;letter-spacing:-.01em;color:var(--ink,#1B2230)}
.bl-head .lede{margin:0;max-width:60ch;font-size:16px;line-height:1.55;color:var(--ink-2,#3A4255)}

/* ── Category chips ──────────────────────────────────────────── */
.bl-chips{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0}
.bl-chip{appearance:none;background:var(--surface,#fff);border:1px solid var(--line-2,#E4E2DD);font:inherit;cursor:pointer;padding:6px 14px;font-size:13px;color:var(--ink-2,#3A4255);border-radius:999px;transition:border-color .14s,background .14s}
.bl-chip:hover{border-color:var(--ink-2,#3A4255);color:var(--ink,#1B2230)}
.bl-chip.is-active{background:var(--ink,#1B2230);color:#fff;border-color:var(--ink,#1B2230)}
.bl-chip:focus-visible{outline:2px solid var(--accent,#EE6A1F);outline-offset:2px}

/* ── Meta ────────────────────────────────────────────────────── */
.bl-meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:24px 0 16px;font-size:13px;color:var(--ink-2,#3A4255)}
.bl-meta strong{color:var(--ink,#1B2230);font-weight:600}

/* ── Grid ────────────────────────────────────────────────────── */
.bl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px;margin:0 0 64px}

/* ── Card ────────────────────────────────────────────────────── */
.bl-card{display:flex;flex-direction:column;background:var(--surface,#fff);border:1px solid var(--line-2,#E4E2DD);border-radius:8px;overflow:hidden;text-decoration:none;color:inherit;transition:border-color .14s,transform .14s}
.bl-card:hover{border-color:var(--ink-2,#3A4255)}
.bl-card__cover{position:relative;aspect-ratio:16/9;background:#F8F6F2;overflow:hidden}
.bl-card__cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.bl-card__cover--ph{display:flex;align-items:center;justify-content:center;color:var(--ink-3,#8C93A4)}
.bl-card__cover--ph svg{width:42px;height:42px;opacity:.55}
.bl-card__body{padding:18px 18px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.bl-card__meta{display:flex;flex-wrap:wrap;gap:6px;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3,#8C93A4)}
.bl-card__meta .cat{color:var(--accent,#EE6A1F);font-weight:600}
.bl-card__meta .dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6;align-self:center}
.bl-card__title{margin:0;font-family:var(--f-display);font-weight:600;font-size:18px;line-height:1.3;color:var(--ink,#1B2230);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bl-card__excerpt{margin:0;font-size:14px;line-height:1.5;color:var(--ink-2,#3A4255);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bl-card__readtime{margin-top:auto;padding-top:6px;font-family:var(--f-mono);font-size:11px;color:var(--ink-3,#8C93A4);letter-spacing:.04em}
.bl-card__cta{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:var(--ink,#1B2230);color:#fff;border-radius:6px;font-size:13px;font-weight:600;margin-top:auto;align-self:flex-start;transition:background .14s}
.bl-card:hover .bl-card__cta{background:var(--accent,#EE6A1F)}
.bl-card__cta .arrow{transition:transform .14s;display:inline-block}
.bl-card:hover .bl-card__cta .arrow{transform:translateX(3px)}

/* ── Empty state ─────────────────────────────────────────────── */
.bl-empty{padding:48px 16px;text-align:center;border:1px dashed var(--line-2,#E4E2DD);border-radius:8px;background:var(--surface,#fff);margin:0 0 64px}
.bl-empty h3{margin:0 0 8px;font-family:var(--f-display);font-weight:600;font-size:18px;color:var(--ink,#1B2230)}
.bl-empty p{margin:0;font-size:14px;color:var(--ink-2,#3A4255);max-width:50ch;margin-inline:auto}
.bl-empty a{color:var(--accent,#EE6A1F);text-decoration:none;font-weight:600}
.bl-empty a:hover{text-decoration:underline}

/* ── Post detail ─────────────────────────────────────────────── */
.bl-post{max-width:820px;margin:0 auto;padding:24px 0 48px}
.bl-post__meta{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0 0 12px;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2,#3A4255)}
.bl-post__meta .cat{color:var(--accent,#EE6A1F);font-weight:600}
.bl-post__meta .date{color:var(--ink-2,#3A4255)}
.bl-post__title{margin:0 0 24px;font-family:var(--f-display);font-weight:600;font-size:clamp(26px,3.4vw,38px);line-height:1.15;letter-spacing:-.01em;color:var(--ink,#1B2230)}
.bl-post__lede{margin:0 0 28px;font-size:18px;line-height:1.55;color:var(--ink-2,#3A4255);font-weight:500}
.bl-post__cover{aspect-ratio:16/9;background:#F8F6F2;border-radius:8px;overflow:hidden;margin:0 0 28px}
.bl-post__cover img{width:100%;height:100%;object-fit:cover;display:block}
.bl-post__body{font-size:16.5px;line-height:1.7;color:var(--ink,#1B2230)}
.bl-post__body p{margin:0 0 18px}
.bl-post__body h2{margin:36px 0 14px;font-family:var(--f-display);font-weight:600;font-size:26px;line-height:1.2;color:var(--ink,#1B2230);letter-spacing:-.005em}
.bl-post__body h3{margin:28px 0 10px;font-family:var(--f-display);font-weight:600;font-size:20px;color:var(--ink,#1B2230)}
.bl-post__body a{color:var(--accent,#EE6A1F);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2,#E4E2DD)}
.bl-post__body a:hover{text-decoration-color:var(--accent,#EE6A1F)}
.bl-post__body ul,.bl-post__body ol{margin:0 0 18px;padding-left:24px}
.bl-post__body li{margin-bottom:6px;line-height:1.6}
.bl-post__body blockquote{margin:24px 0;padding:14px 20px;border-left:3px solid var(--accent,#EE6A1F);background:#F8F6F2;border-radius:0 4px 4px 0;font-size:16px;color:var(--ink-2,#3A4255);font-style:normal}
.bl-post__body code{background:#F8F6F2;padding:2px 6px;border-radius:3px;font-family:var(--f-mono);font-size:.9em;color:var(--ink,#1B2230)}
.bl-post__body img{max-width:100%;height:auto;border-radius:8px;margin:20px 0;display:block}
.bl-post__body figure{margin:28px auto;padding:0;text-align:center}
.bl-post__body figure img{margin:0 auto;max-height:560px;width:auto}
.bl-post__body figure figcaption{margin:10px auto 0;font-size:13.5px;color:var(--ink-2,#3A4255);max-width:60ch;line-height:1.45;font-family:var(--f-text)}
.bl-post__body figure.is-portrait img{max-width:min(100%,480px)}
.bl-post__body figure.is-wide img{max-width:100%}

/* ── Post footer (author / share / back) ─────────────────────── */
.bl-post__foot{margin:48px 0 0;padding-top:28px;border-top:1px solid var(--line-2,#E4E2DD);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.bl-author{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--ink-2,#3A4255)}
.bl-author b{color:var(--ink,#1B2230);font-weight:600}
.bl-share{display:flex;gap:8px;align-items:center}
.bl-share span{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3,#8C93A4)}
.bl-share a{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:var(--surface,#fff);border:1px solid var(--line-2,#E4E2DD);border-radius:999px;font-size:13px;color:var(--ink,#1B2230);text-decoration:none;transition:border-color .14s,color .14s}
.bl-share a:hover{border-color:var(--accent,#EE6A1F);color:var(--accent,#EE6A1F)}

/* ── Related (на детальной поста) ────────────────────────────── */
.bl-related{margin:48px 0 0;padding:32px 0 0;border-top:1px solid var(--line-2,#E4E2DD)}
.bl-related h2{margin:0 0 20px;font-family:var(--f-display);font-weight:600;font-size:22px;color:var(--ink,#1B2230)}
.bl-related .bl-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}

/* ── Hidden state ────────────────────────────────────────────── */
.bl-card.is-hidden{display:none}
.bl-empty.is-hidden{display:none}