/* B3 — blog, changelog, about. Layout specifics only; tokens from app.css. Mobile first. */

/* First section under a compact hero: the same 40 px gap at every breakpoint (as docs, FAQ and legal pages). */
.section.cnt-after-hero { padding-top: var(--s-10); }

/* ── Category / year chip rows ─────────────────────────────────────────── */
.cat-nav { margin-bottom: var(--s-8); }
.year-nav__item.is-empty { opacity: 0.45; cursor: default; }
.year-nav--vertical .year-nav__item.is-empty:hover { background: transparent; }

/* ── Blog index layout ─────────────────────────────────────────────────── */
.blog-layout { display: grid; gap: var(--s-10); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  .blog-layout { grid-template-columns: minmax(0, 1fr) 260px; gap: var(--s-12); }
  .blog-aside { position: sticky; top: calc(var(--header-h) + var(--s-6)); align-self: start; }
}
.blog-main { min-width: 0; }
.blog-main__title { font-size: var(--fs-xl); font-weight: 650; letter-spacing: -0.015em; margin-bottom: var(--s-5); }

.post-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
@media (min-width: 1024px) { .post-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* whole card clickable through the title link (keeps one link per card for screen readers) */
.post-card--linked { position: relative; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.post-card--linked:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.post-card--linked:focus-within { border-color: var(--brand); }
.post-card__link { color: inherit; }
.post-card__link:hover { text-decoration: none; color: var(--brand-text); }
.post-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.post-card__link:focus-visible { outline: none; }
.post-card__cat {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-text);
}
.post-card__meta time, .post-card__meta span { display: inline-flex; align-items: center; gap: 5px; }
.post-card__title { overflow-wrap: anywhere; }

/* Featured post */
.post-featured {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  margin-bottom: var(--s-12);
}
.post-featured:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.post-featured:focus-within { border-color: var(--brand); }
.post-featured__body { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-6); min-width: 0; }
.post-featured__label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.post-featured__title { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; overflow-wrap: anywhere; }
.post-featured__excerpt { color: var(--text-muted); font-size: var(--fs-md); line-height: 1.6; max-width: 62ch; }
.post-featured__visual {
  display: none;
  position: relative;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-8);
  background: var(--ink);
  color: var(--ink-text);
  background-image: url("/img/pattern-network.svg");
  background-size: cover;
  background-position: center;
}
.post-featured__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: var(--radius-lg);
  border: 1px solid var(--ink-border-strong); background: rgba(255, 255, 255, 0.06); color: #FFFFFF;
}
.post-featured__toc { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: ftoc; }
.post-featured__toc li {
  counter-increment: ftoc;
  display: flex; gap: 10px; font-size: var(--fs-sm); color: var(--ink-muted); line-height: 1.4;
}
.post-featured__toc li::before {
  content: counter(ftoc, decimal-leading-zero);
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-text); opacity: 0.7; padding-top: 1px;
}
@media (min-width: 768px) {
  .post-featured { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .post-featured__body { padding: var(--s-10); }
  .post-featured__title { font-size: var(--fs-3xl); }
  .post-featured__visual { display: flex; }
}

/* Sidebar */
.blog-aside { display: grid; gap: var(--s-8); align-content: start; min-width: 0; }
@media (min-width: 640px) and (max-width: 1023px) { .blog-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.blog-aside__block { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.blog-aside__card { padding: var(--s-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); align-items: flex-start; }
.blog-aside__title { font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wide, 0.06em); color: var(--text-muted); }
.blog-aside__cats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.blog-aside__cat {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius);
  color: var(--text); font-size: var(--fs-sm);
}
.blog-aside__cat span { flex: 1; min-width: 0; }
.blog-aside__cat small { color: var(--text-muted); font-size: var(--fs-xs); }
.blog-aside__cat .icon { color: var(--text-muted); flex: none; }
.blog-aside__cat:hover { background: var(--surface-2); text-decoration: none; }
.blog-aside__cat[aria-current="page"] { background: var(--brand-soft); color: var(--brand-text); }
.blog-aside__cat[aria-current="page"] .icon { color: var(--brand-text); }

/* ── Year archive ──────────────────────────────────────────────────────── */
.month-group + .month-group { margin-top: var(--s-10); }
.month-group__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-4);
  padding-bottom: var(--s-3); border-bottom: 1px solid var(--border); margin-bottom: var(--s-2);
}
.month-group__title { font-size: var(--fs-xl); font-weight: 650; letter-spacing: -0.015em; }
.archive-list { list-style: none; margin: 0; padding: 0; }
.archive-list__item {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-1) var(--s-6);
  padding: var(--s-5) 0; border-bottom: 1px solid var(--border);
}
@media (min-width: 640px) { .archive-list__item { grid-template-columns: 88px minmax(0, 1fr); } }
.archive-list__date { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; padding-top: 2px; }
.archive-list__main { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.archive-list__title { font-size: var(--fs-lg); font-weight: 650; letter-spacing: -0.015em; line-height: 1.3; }
.archive-list__title a { color: var(--text); }
.archive-list__title a:hover { color: var(--brand-text); }
.archive-list__excerpt { font-size: var(--fs-sm); color: var(--text-muted); max-width: 70ch; }
.archive-list__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); font-size: var(--fs-xs); color: var(--text-muted); }

.year-pager, .post-pager {
  margin-top: var(--s-12); padding-top: var(--s-6); border-top: 1px solid var(--border);
  display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

/* ── Article ───────────────────────────────────────────────────────────── */
.post-shell { padding-block: var(--s-10) var(--s-16); }
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-10); }
@media (min-width: 1080px) {
  .post-layout { grid-template-columns: minmax(0, 760px) 240px; justify-content: space-between; gap: var(--s-12); }
  .post-aside { position: sticky; top: calc(var(--header-h) + var(--s-6)); align-self: start; max-height: calc(100vh - var(--header-h) - 48px); overflow-y: auto; }
}
.post { min-width: 0; }
.post__header { display: flex; flex-direction: column; gap: var(--s-4); padding-bottom: var(--s-6); margin-bottom: var(--s-8); border-bottom: 1px solid var(--border); }
.post__category {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-text);
}
.post__title { font-size: var(--fs-4xl); font-weight: 700; letter-spacing: -0.03em; line-height: 1.12; overflow-wrap: anywhere; }
@media (max-width: 640px) { .post__title { font-size: var(--fs-3xl); } }
.post__lead { font-size: var(--fs-lg); color: var(--text-muted); line-height: 1.6; max-width: 65ch; }
.post__disclaimer { margin-bottom: var(--s-8); }
.post__body { max-width: 72ch; }
.post__body pre { max-width: 100%; }

.post-toc-mobile {
  margin-bottom: var(--s-8); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  padding: var(--s-3) var(--s-4);
}
.post-toc-mobile summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); cursor: pointer; list-style: none;
  font-size: var(--fs-sm); font-weight: 600;
}
.post-toc-mobile summary::-webkit-details-marker { display: none; }
.post-toc-mobile[open] summary .icon { transform: rotate(180deg); }
.post-toc-mobile .toc__list { margin-top: var(--s-3); }
@media (min-width: 1080px) { .post-toc-mobile { display: none; } }
.post-aside { display: none; flex-direction: column; gap: var(--s-8); }
@media (min-width: 1080px) { .post-aside { display: flex; } }
.post-aside__facts { display: flex; flex-direction: column; gap: var(--s-3); padding-top: var(--s-6); border-top: 1px solid var(--border); font-size: var(--fs-sm); }
.post-aside__facts dt { font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.post-aside__facts dd { margin: 2px 0 0; }

.post-cta {
  display: flex; flex-direction: column; gap: var(--s-4);
  margin-top: var(--s-12); padding: var(--s-6);
  border: 1px solid var(--brand-soft-border, var(--border)); border-radius: var(--radius-lg); background: var(--brand-soft);
}
@media (min-width: 640px) { .post-cta { flex-direction: row; align-items: flex-start; } }
.post-cta__body { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.post-cta__title { font-size: var(--fs-xl); font-weight: 650; letter-spacing: -0.015em; }
.post-cta__text { color: var(--text-muted); font-size: var(--fs-sm); max-width: 60ch; margin-bottom: var(--s-2); }
.post-cta .icon-tile { flex: none; }

/* ── Changelog ─────────────────────────────────────────────────────────── */
.changelog-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-10); }
@media (min-width: 1024px) {
  .changelog-layout { grid-template-columns: 240px minmax(0, 1fr); gap: var(--s-12); }
  .changelog-aside__inner { position: sticky; top: calc(var(--header-h) + var(--s-6)); max-height: calc(100vh - var(--header-h) - 48px); overflow-y: auto; }
}
.changelog-aside { min-width: 0; }
.changelog-aside .blog-aside__title { margin-bottom: var(--s-3); }
@media (max-width: 1023px) {
  .changelog-aside .year-nav--vertical { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .changelog-aside .year-nav--vertical .year-nav__item { border-color: var(--border); }
}
/* Filters + related links: collapsible on phones/tablets so the first release is reached quickly; plain on desktop. */
.cl-more { margin-top: var(--s-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.cl-more__summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: 10px 14px; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; list-style: none;
}
.cl-more__summary::-webkit-details-marker { display: none; }
.cl-more__summary > span { display: inline-flex; align-items: center; gap: 8px; }
.cl-more__summary > .icon { flex: none; transition: transform var(--dur, 0.15s) ease; }
.cl-more[open] > .cl-more__summary { border-bottom: 1px solid var(--border); }
.cl-more[open] > .cl-more__summary > .icon { transform: rotate(180deg); }
.cl-more__body { padding: var(--s-4) 14px; }
.cl-more__first { margin-top: 0; }
@media (max-width: 1023px) {
  /* year chips as one horizontal strip */
  .changelog-aside .year-nav--vertical { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
  .changelog-aside .year-nav--vertical .year-nav__item { flex: none; white-space: nowrap; }
}
@media (min-width: 1024px) {
  .cl-more { margin-top: var(--s-6); border: 0; background: transparent; }
  .cl-more__summary { display: none; }
  .cl-more__body { padding: 0; }
}
.changelog-aside__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--fs-sm); }
.changelog-aside__links a { display: inline-flex; align-items: flex-start; gap: 8px; color: var(--text-muted); }
.changelog-aside__links a .icon { margin-top: 2px; flex: none; }
.changelog-aside__links a:hover { color: var(--text); }

.cl-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-filter__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  font: inherit; font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); cursor: pointer;
}
.cl-filter__btn:hover { border-color: var(--border-strong); color: var(--text); }
.cl-filter__btn[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.cl-filter__btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.cl-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-subtle); flex: none; }
.cl-dot--new { background: var(--brand); }
.cl-dot--improved { background: var(--signal); }
.cl-dot--fixed { background: var(--text-subtle); }
.cl-dot--security { background: var(--warn); }
.cl-dot--api { background: var(--chart-3, var(--brand)); }

.changelog-main { min-width: 0; }
.cl-year + .cl-year { margin-top: var(--s-12); }
.cl-year[hidden], .release[hidden], .release__change[hidden] { display: none; }
.cl-year__title {
  display: flex; align-items: baseline; gap: var(--s-3);
  font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  padding-bottom: var(--s-3); border-bottom: 1px solid var(--border);
}
.cl-year__title small { font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); letter-spacing: 0; }

.release {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3);
  padding: var(--s-6) 0; border-bottom: 1px solid var(--border);
  scroll-margin-top: calc(var(--header-h) + 16px);
}
@media (min-width: 768px) { .release { grid-template-columns: 150px minmax(0, 1fr); gap: var(--s-8); } }
.release__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); align-content: flex-start; }
@media (min-width: 768px) { .release__head { flex-direction: column; align-items: flex-start; gap: var(--s-1); } }
.release__version { font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-md); color: var(--text); }
.release__version:hover { color: var(--brand-text); text-decoration: none; }
.release__date { font-size: var(--fs-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.release--major .release__version { color: var(--brand-text); }
.release__head .badge { margin-top: 2px; }
.release__body { min-width: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.release__title { font-size: var(--fs-lg); font-weight: 650; letter-spacing: -0.015em; line-height: 1.35; }
.release__summary { color: var(--text-muted); font-size: var(--fs-sm); max-width: 70ch; }
.release__changes { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.release__change { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--s-3); align-items: start; font-size: var(--fs-sm); line-height: 1.55; }
.release__type { justify-content: center; margin-top: 1px; }
@media (max-width: 479px) { .release__change { grid-template-columns: minmax(0, 1fr); gap: 4px; } .release__type { justify-self: start; } }

/* ── About ─────────────────────────────────────────────────────────────── */
.about-figures-band { border-bottom: 1px solid var(--border); }
.about-story p { color: var(--text); }
.about-glance .spec-list__value a { overflow-wrap: anywhere; }
.about-flags { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px var(--s-3); font-size: var(--fs-sm); }
.about-flags a { display: inline-flex; align-items: center; gap: 8px; color: var(--text); min-width: 0; }
.about-flags a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.about-flags a:hover { color: var(--brand-text); text-decoration: none; }
.about-network .check-list { font-size: var(--fs-sm); }
.about-timeline { max-width: 820px; }
.about-contact { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--fs-sm); }
.about-contact li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.about-contact .icon { color: var(--text-muted); flex: none; }
.about-commitments .check-list { columns: 1; }
@media (min-width: 900px) { .about-commitments .check-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-8); } }