/* ---------- Blog / articles ---------- */

.blog-breadcrumb {
  font-size: 13px;
  color: var(--text-mute);
  margin-bottom: 20px;
}
.blog-breadcrumb a {
  color: var(--text-mute);
  text-decoration: none;
  transition: color 0.2s ease;
}
.blog-breadcrumb a:hover { color: var(--accent); }

.blog-article .container { max-width: 780px; }
.blog-byline {
  font-size: 14px;
  color: var(--text-dim);
  margin-bottom: 20px;
  text-transform: none;
  letter-spacing: normal;
}
.blog-intro {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 36px;
}

.blog-related { padding-top: 0; }
.blog-related-heading {
  font-size: 22px;
  margin: 0 0 24px;
  color: var(--text);
}
.blog-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.blog-card {
  display: block;
  padding: 24px 26px;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background:
    radial-gradient(circle at 0% 0%, rgba(232, 135, 61, 0.12), transparent 55%),
    linear-gradient(180deg, var(--bg-3), var(--bg-2));
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.blog-card:hover {
  border-color: rgba(232, 135, 61, 0.5);
  transform: translateY(-2px);
}
.blog-card-date {
  display: block;
  font-size: 13px;
  color: var(--text-mute);
  margin-bottom: 10px;
}
.blog-card h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.3;
}
.blog-card p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-dim);
  margin: 0;
}
.blog-card:hover h3 { color: var(--accent); }

@media (min-width: 720px) {
  .blog-card-grid { grid-template-columns: 1fr 1fr; }
}

/* Resources pages - editorial links without underline */
.blog-index a,
.blog-article a,
.blog-related a {
  text-decoration: none;
}
.blog-article a:hover,
.blog-index a:hover {
  color: var(--accent-bright);
}

/* Light mode */
body.light .blog-card {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(0, 0, 0, 0.08);
}

/* ---- Reading progress bar ---- */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), #FF6B35);
  transform-origin: left;
  transform: scaleX(0);
  z-index: 200;
  pointer-events: none;
}

/* ---- Article-end navigation ---- */
.article-end-nav {
  padding: 32px 0 40px;
  border-top: 1px solid var(--line);
  margin-top: 40px;
}
.article-end-nav-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}
.article-end-nav a {
  display: block;
  padding: 14px 16px;
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid var(--line);
  background: var(--bg-card);
  transition: border-color 0.2s ease;
}
.article-end-nav a:hover { border-color: var(--accent); }
.article-end-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.article-end-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
}
.article-end-next { text-align: right; }
/* Single-link nav (first or last guide): one centered button */
.article-end-nav--single .article-end-nav-row {
  grid-template-columns: 1fr;
}
.article-end-nav--single .article-end-next,
.article-end-nav--single .article-end-prev { text-align: center; }
.article-end-links { text-align: center; }
.article-end-links a {
  display: inline-block;
  margin: 0 10px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-dim);
  font-size: 14px;
}
.article-end-links a:hover { color: var(--accent); border: none; background: none; }
.article-end-cta {
  padding: 6px 16px !important;
  border-radius: 8px !important;
  background: rgba(232,135,61,0.08) !important;
  border: 1px solid rgba(232,135,61,0.25) !important;
  color: var(--accent) !important;
  font-weight: 600;
}
.article-end-cta:hover { background: rgba(232,135,61,0.15) !important; }
body.light .article-end-nav a { background: rgba(255,255,255,0.6); border-color: rgba(0,0,0,0.08); }
body.light .article-end-cta { background: rgba(232,135,61,0.06) !important; border-color: rgba(232,135,61,0.2) !important; }

/* ---- Mobile reading polish (≤640px) ---- */
@media (max-width: 640px) {
  .blog-article .container { padding-left: 20px; padding-right: 20px; }
  .blog-article h1 { font-size: clamp(24px, 7vw, 32px); line-height: 1.15; }
  .blog-breadcrumb { font-size: 12px; margin-bottom: 10px; }
  .blog-byline { font-size: 13px; margin-bottom: 14px; }
  .blog-intro { font-size: 16px; line-height: 1.7; margin-bottom: 24px; }
  .blog-article p, .blog-article li { font-size: 15.5px; line-height: 1.75; margin-bottom: 16px; }
  .blog-article h2 { font-size: 20px; margin: 32px 0 12px; }
  .blog-article .container { max-width: 100%; }
  .article-end-nav-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .article-end-nav--single .article-end-nav-row { grid-template-columns: 1fr; }
  .article-end-prev, .article-end-next { padding: 12px 10px; }
  .article-end-title { font-size: 12.5px; }
  .nav-scrolled .logo-mark { width: 26px; height: 26px; transition: width .25s ease, height .25s ease, transform .4s cubic-bezier(.4,0,.2,1); }
  .nav-scrolled .logo-text { font-size: 13px; transition: font-size .25s ease; }
}