/* static/css/blog.css — стили под блог, работает поверх kronverk.css */

.blog-page{padding:48px 0}
.blog-hero{margin-bottom:32px}
.blog-hero__title{font:800 34px/1.15 var(--font);margin:0 0 8px}
.blog-hero__lead{color:#555;max-width:680px}

.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;margin-top:24px}

.post-card{display:flex;flex-direction:column;background:#fff;border:1px solid #ececec;border-radius:14px;overflow:hidden;transition:transform .2s,box-shadow .2s;text-decoration:none;color:inherit}
.post-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.06)}
.post-card__cover{aspect-ratio:16/9;background:#f2f2f2 center/cover no-repeat}
.post-card__body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.post-card__cat{font:600 12px/1 var(--font);text-transform:uppercase;letter-spacing:.06em;color:var(--gold)}
.post-card__title{font:700 18px/1.3 var(--font);margin:0;color:#111}
.post-card__excerpt{color:#666;font-size:14px;line-height:1.5;flex:1}
.post-card__meta{display:flex;align-items:center;gap:10px;font-size:13px;color:#888}
.post-card__author-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover}

.post-hero{position:relative;margin-bottom:32px}
.post-hero__cover{aspect-ratio:1200/630;background:#f2f2f2 center/cover no-repeat;border-radius:16px}
.post-hero__cat{display:inline-block;font:600 12px/1 var(--font);text-transform:uppercase;letter-spacing:.06em;color:var(--gold);margin-top:24px;text-decoration:none}
.post-hero__title{font:800 40px/1.15 var(--font);margin:8px 0 12px;max-width:820px}
.post-hero__meta{display:flex;gap:16px;color:#666;font-size:14px}

.post-body{max-width:760px;margin:0 auto;font:400 17px/1.7 var(--font)}
.post-body h2{font:700 28px/1.3 var(--font);margin:40px 0 12px}
.post-body h3{font:700 22px/1.3 var(--font);margin:32px 0 8px}
.post-body p{margin:0 0 16px}
.post-body ul,.post-body ol{margin:0 0 16px 24px}
.post-body table{width:100%;border-collapse:collapse;margin:16px 0}
.post-body th,.post-body td{border:1px solid #ececec;padding:10px 12px;text-align:left}
.post-body th{background:#fafafa;font-weight:600}
.post-body blockquote{margin:16px 0;padding:12px 20px;border-left:3px solid var(--gold);color:#555;font-style:italic}
.post-body code{background:#f4f4f4;padding:2px 6px;border-radius:4px;font-size:.9em}
.post-body pre{background:#f4f4f4;padding:16px;border-radius:8px;overflow-x:auto}
.post-body img{max-width:100%;height:auto;border-radius:8px}
.post-body a{color:var(--gold);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}

.post-toc{background:#fafafa;padding:16px 20px;border-radius:10px;margin:24px 0;max-width:760px;margin-left:auto;margin-right:auto}
.post-toc__title{font:700 14px/1 var(--font);text-transform:uppercase;letter-spacing:.06em;color:#666;margin:0 0 12px}
.post-toc ol{margin:0;padding-left:20px}
.post-toc a{color:#333;text-decoration:none}
.post-toc a:hover{color:var(--gold)}

.post-author{display:flex;gap:16px;padding:24px;background:#fafafa;border-radius:12px;margin:40px auto;max-width:760px}
.post-author__avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;flex-shrink:0}
.post-author__name{font:700 16px/1.2 var(--font);margin:0 0 4px}
.post-author__role{color:#666;font-size:14px;margin:0 0 8px}
.post-author__bio{color:#444;font-size:14px;line-height:1.5;margin:0 0 8px}

.post-faq{margin:40px auto;max-width:760px}
.post-faq__title{font:700 24px/1.3 var(--font);margin:0 0 16px}
.post-faq__item{border:1px solid #ececec;border-radius:10px;padding:16px 20px;margin-bottom:12px}
.post-faq__q{font-weight:600;margin:0 0 6px}
.post-faq__a{color:#555;margin:0}

.post-similar{margin:56px 0 0}
.post-similar__title{font:700 24px/1.3 var(--font);margin:0 0 20px}

@media (max-width: 720px) {
  .post-hero__title{font-size:28px}
  .post-body{font-size:16px}
  .post-body h2{font-size:24px}
  .blog-hero__title{font-size:28px}
}