/* Blog styling — extends styles.css, reuses the site design tokens. */

/* ---- Blog index ---- */
.blog-list {
  display: grid;
  gap: clamp(18px, 2.5vw, 28px);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .blog-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
.blog-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  padding: clamp(20px, 2.4vw, 30px);
  box-shadow: var(--shadow);
}
.blog-card h2 {
  margin: 0 0 12px;
  font-size: clamp(21px, 2.1vw, 27px);
  line-height: 1.25;
}
.blog-card h2 a {
  color: var(--navy);
  text-decoration: none;
}
.blog-card h2 a:hover {
  text-decoration: underline;
}
.blog-card p {
  font-size: clamp(15.5px, 1vw, 17px);
  line-height: 1.6;
}
.blog-readmore {
  color: var(--blue);
  font-family: var(--ui-font);
  font-weight: 650;
  font-size: 15px;
  text-decoration: none;
}
.blog-readmore:hover {
  text-decoration: underline;
}

/* ---- Heading UTC timestamp (sits next to the heading) ---- */
.blog-utc {
  display: inline-block;
  font-family: "Cascadia Code", "Consolas", "SFMono-Regular", Menlo, monospace;
  font-size: .54em;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--muted);
  vertical-align: middle;
  white-space: nowrap;
}

/* ---- Meta + tags ---- */
.blog-meta {
  color: var(--muted);
  font-family: var(--ui-font);
  font-size: 14px;
  letter-spacing: .02em;
  margin: 0 0 4px;
}
.blog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
}
.blog-tag {
  display: inline-block;
  font-family: var(--ui-font);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .03em;
  color: var(--navy);
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 12px;
}

/* ---- Classifications (controlled vocabulary) ---- */
.blog-classes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
}
.blog-classes-label {
  font-family: var(--ui-font);
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.blog-class {
  display: inline-block;
  font-family: var(--ui-font);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .02em;
  color: #fff;
  background: var(--blue);
  border: 1px solid var(--blue);
  border-radius: 999px;
  padding: 3px 12px;
  text-decoration: none;
}
a.blog-class:hover { background: var(--navy); border-color: var(--navy); }

/* ---- Browse by topic (blog index) ---- */
.blog-browse {
  margin: 0 0 clamp(18px, 2.5vw, 28px);
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--soft);
}
.blog-browse-label {
  font-family: var(--ui-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}
.blog-filter-count {
  display: inline-block;
  min-width: 1.4em;
  margin-left: 4px;
  padding: 0 6px;
  font-size: .82em;
  line-height: 1.5;
  color: var(--muted);
  background: rgba(0, 32, 96, .06);
  border-radius: 999px;
}
.blog-filter-btn.is-active .blog-filter-count { color: #fff; background: rgba(255, 255, 255, .22); }
.blog-topic-heading {
  font-size: clamp(20px, 2.2vw, 26px);
  color: var(--navy);
  margin: 0 0 clamp(14px, 2vw, 22px);
  padding-bottom: .3em;
  border-bottom: 1px solid var(--line);
}

/* ---- Classification filter bar (blog index) ---- */
.blog-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
.blog-filter-btn {
  font-family: var(--ui-font);
  font-size: 13px;
  font-weight: 650;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 15px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.blog-filter-btn:hover { border-color: var(--blue); color: var(--blue); }
.blog-filter-btn.is-active {
  color: #fff;
  background: var(--navy);
  border-color: var(--navy);
}

/* ---- Article ---- */
.blog-article {
  max-width: 760px;
  margin-inline: auto;
}
.blog-article-head h1 {
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.blog-article-head .lead {
  font-size: clamp(18px, 1.3vw, 21px);
  line-height: 1.55;
  color: var(--ink);
}
.blog-content {
  font-size: clamp(17.5px, 1.05vw, 19px);
  line-height: 1.75;
}
.blog-content h2 {
  margin-top: 1.9em;
  font-size: clamp(23px, 2.2vw, 31px);
  line-height: 1.2;
  border-bottom: 1px solid var(--line);
  padding-bottom: .25em;
}
.blog-content h3 {
  margin-top: 1.5em;
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.25;
}
.blog-content h4 {
  margin-top: 1.3em;
  font-size: clamp(16.5px, 1.2vw, 18px);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.blog-content p,
.blog-content ul,
.blog-content ol {
  margin: 1em 0;
}
.blog-content a {
  color: var(--blue);
}
.blog-content blockquote {
  margin: 1.4em 0;
  padding: .4em 1.2em;
  border-left: 4px solid var(--blue);
  background: var(--soft);
  color: var(--ink);
  border-radius: 0 8px 8px 0;
  font-size: 1.02em;
}
.blog-content img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: var(--shadow);
  margin: 1.2em 0;
}
.blog-content figure {
  margin: 1.6em 0;
  text-align: center;
}
.blog-content figcaption {
  color: var(--muted);
  font-family: var(--ui-font);
  font-size: 14px;
  margin-top: .6em;
}
.blog-content hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.2em 0;
}

/* ---- Code ---- */
.blog-content code {
  font-family: "Cascadia Code", "Consolas", "SFMono-Regular", Menlo, monospace;
  font-size: .9em;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: .1em .4em;
}
.blog-content pre {
  background: #0d1b2a;
  color: #e8eef5;
  border-radius: 10px;
  padding: 18px 20px;
  overflow-x: auto;
  line-height: 1.55;
  margin: 1.4em 0;
}
.blog-content pre code {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font-size: .88em;
}

/* ---- Tables ---- */
.blog-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4em 0;
  font-size: .95em;
}
.blog-content th,
.blog-content td {
  border: 1px solid var(--line);
  padding: 8px 12px;
  text-align: left;
}
.blog-content thead th {
  background: var(--soft);
  font-family: var(--ui-font);
}

/* ---- Math (KaTeX) ---- */
.blog-content .katex {
  font-size: 1.05em;
}
.blog-content .katex-display {
  margin: 1.4em 0;
  padding: 4px 0;
  overflow-x: auto;
  overflow-y: hidden;
}
.math-block {
  display: block;
}

/* ---- Real-LaTeX math/figures (compiled to inline SVG) ---- */
.tex-inline {
  display: inline-block;
  line-height: 0;
}
.tex-inline .tex-svg,
.tex-inline svg { display: inline-block; width: 100%; height: 100%; }
.tex-display {
  display: block;
  margin: 1.5em 0;
  text-align: center;
  overflow-x: auto;
  overflow-y: hidden;
}
.tex-display .tex-svg { display: inline-block; }
.tex-display .tex-svg svg { height: 100%; width: auto; max-width: 100%; }
.tex-block {
  display: block;
  margin: 1.6em 0;
  text-align: center;
  overflow-x: auto;
}
.tex-block svg { max-width: 100%; height: auto; }
.tex-error {
  display: inline-block;
  font-family: var(--ui-font);
  font-size: .85em;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 5px;
  padding: 1px 7px;
}

.blog-article-foot {
  margin-top: 2.6em;
  padding-top: 1.4em;
  border-top: 1px solid var(--line);
}