/* ibonus — стили блога (/blog/*). Подключается после styles.css, только на страницах блога;
   токены палитры и компоненты (.btn, .card-подобные блоки) — из styles.css. */

/* ---------- хлебные крошки ---------- */

.crumbs { margin-bottom: 24px; font-size: .9375rem; color: var(--muted); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0; }
.crumbs li + li::before { content: "›"; margin-right: 8px; color: var(--control-border); }
.crumbs a { color: var(--muted); }
.crumbs [aria-current] { color: var(--text); }
/* текущая страница — длинный заголовок поста: в одну строку с многоточием */
.crumbs li[aria-current] { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- список постов ---------- */

.blog-page-n { display: block; margin-top: 8px; color: var(--muted); font-size: .5em; }

.post-list { list-style: none; display: grid; gap: 16px; }
@media (min-width: 640px) { .post-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .post-list { grid-template-columns: repeat(3, 1fr); } }

.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color .15s;
}
.post-card:hover { border-color: var(--control-border); }
.post-card article { display: flex; flex-direction: column; height: 100%; }
.post-card p { color: var(--muted); }
.post-card-media { margin: -24px -24px 20px; overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.post-card-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.post-card-title { margin: 0 0 8px; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.3; }
.post-card-title a { color: var(--text); text-decoration: none; }
/* вся карточка кликабельна, но в доступном дереве одна ссылка — заголовок */
.post-card-title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); }
.post-card-title a:focus-visible { outline: none; }
.post-card-title a:focus-visible::after { outline: 3px solid var(--accent-2); outline-offset: 2px; }
.post-card .post-tags { margin-top: auto; }

.post-meta { margin: 0 0 12px; color: var(--muted); font-size: .875rem; }

.post-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.post-tags li {
  padding: 4px 10px;
  background: var(--accent-bg);
  border-radius: 999px;
  color: var(--text);
  font-size: .8125rem;
}

/* ---------- пагинация ---------- */

.pager { margin-top: 40px; }
.pager ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.pager a {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}
.pager a:hover { border-color: var(--text); }
.pager a[aria-current] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ---------- пост ---------- */

.post { max-width: calc(780px + 2 * var(--gutter)); }
.post-head { margin-bottom: 28px; }
.post-head h1 { font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.5rem); margin-bottom: 16px; }
.post-head .lead { margin-bottom: 16px; }

.post-cover { margin: 0 0 32px; }
.post-cover img, .post-figure img { width: 100%; border-radius: var(--radius); }

.toc {
  margin-bottom: 32px;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.toc-title { margin-bottom: 8px; font-family: var(--font-head); font-weight: 600; }
.toc ol { margin: 0; padding-left: 1.25em; }
.toc li { padding-block: 4px; }

.post-body { font-size: 1.0625rem; line-height: 1.65; }
.post-body h2 { margin: 2em 0 .6em; font-size: clamp(1.25rem, 1.1rem + .8vw, 1.625rem); }
.post-body h3 { margin: 1.6em 0 .5em; }
.post-body ul, .post-body ol { margin: 0 0 1em; padding-left: 1.25em; }
.post-body li { margin-bottom: .5em; }
.post-body li > p { margin-bottom: .5em; }
.post-body blockquote {
  margin: 0 0 1em;
  padding: 12px 20px;
  border-left: 4px solid var(--accent);
  background: var(--surface);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.post-body blockquote p:last-child { margin-bottom: 0; }
.post-body code { font-size: .9em; }
.post-body table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.post-body th, .post-body td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.post-body th { color: var(--muted); font-weight: 600; }
.post-figure { margin: 1.5em 0; }
.post-figure figcaption { margin-top: 8px; color: var(--muted); font-size: .875rem; }

/* ---------- призыв к заявке ---------- */

.post-cta {
  margin: 32px 0;
  padding: 24px;
  background: var(--accent-bg);
  border-radius: var(--radius-lg);
}
.post-cta-title { margin-bottom: 8px; font-family: var(--font-head); font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
.post-cta .btn-row .btn { flex: 1 1 240px; }

/* ---------- соседние и похожие посты ---------- */

.post-nav { display: grid; gap: 12px; margin-top: 40px; }
@media (min-width: 640px) { .post-nav { grid-template-columns: 1fr 1fr; } .post-nav-next { grid-column: 2; text-align: right; } }
.post-nav a {
  display: block;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}
.post-nav a:hover { border-color: var(--control-border); }
.post-nav span { display: block; margin-bottom: 4px; color: var(--muted); font-size: .875rem; font-weight: 400; }

.post-related { margin-top: 56px; }
.post-related h2 { margin-bottom: 20px; font-size: clamp(1.25rem, 1.1rem + .8vw, 1.625rem); }
.post-related .post-list { grid-template-columns: 1fr; }
@media (min-width: 640px) { .post-related .post-list { grid-template-columns: repeat(2, 1fr); } }