/* ===================================================
   Blog — shared styles for blog/index.php and blog/article.php
   =================================================== */

.blog-main { flex: 1; padding: var(--sp-xl) 0 calc(var(--sp-xl) * 1.5); }

/* ---------- Header ---------- */
.blog-header { margin-bottom: var(--sp-xl); }
.blog-tag {
  display: inline-flex; align-items: center;
  border: 1px solid var(--cyan); background: rgba(0,242,255,0.06);
  padding: var(--sp-xs) var(--sp-md); border-radius: var(--radius-full);
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  color: var(--cyan); text-transform: uppercase;
  margin-bottom: var(--sp-md);
}
.blog-header p { color: var(--on-muted); font-size: 18px; max-width: 640px; margin-top: var(--sp-sm); }

/* ---------- Index: divided list of posts ---------- */
.blog-list { display: flex; flex-direction: column; }
.blog-list-item {
  padding: var(--sp-lg) 0;
  border-bottom: 1px solid var(--outline-var);
}
.blog-list-item:first-child { padding-top: 0; }
.blog-list-item a.blog-list-title {
  font-size: 24px; font-weight: 600; color: var(--on-surface);
  display: inline-block; margin-bottom: var(--sp-sm);
  transition: color 0.2s;
}
.blog-list-item a.blog-list-title:hover { color: var(--cyan); }
.blog-list-item p { color: var(--on-muted); max-width: 65ch; }
.blog-list-read-more {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  color: var(--cyan); text-transform: uppercase; margin-top: var(--sp-sm);
}

/* ---------- Article ---------- */
.blog-article-wrap { max-width: 760px; }
.blog-back-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 14px; color: var(--on-muted);
  margin-bottom: var(--sp-lg); transition: color 0.2s;
}
.blog-back-link:hover { color: var(--cyan); }

.blog-body p {
  color: var(--on-muted); font-size: 17px; line-height: 1.75;
  max-width: 70ch; margin-bottom: var(--sp-md);
}
.blog-body strong { color: var(--on-surface); font-weight: 600; }
.blog-body a { color: var(--cyan); text-decoration: underline; }

/* ---------- Closing CTA ---------- */
.blog-cta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-lg);
  background: var(--surface-low);
  border: 1px solid var(--outline-var);
  border-top: 1px solid rgba(0,242,255,0.25);
  border-radius: var(--radius-xl);
  padding: var(--sp-lg);
  margin: var(--sp-xl) 0;
}
.blog-cta-title { font-size: 18px; font-weight: 600; color: var(--on-surface); margin-bottom: 2px; }
.blog-cta-sub { font-size: 14px; color: var(--on-muted); }
@media (max-width: 560px) {
  .blog-cta { flex-direction: column; align-items: flex-start; }
}

/* ---------- Related articles ---------- */
.blog-related { border-top: 1px solid var(--outline-var); padding-top: var(--sp-lg); }
.blog-related-title { font-size: 14px; font-weight: 600; color: var(--on-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--sp-md); }
.blog-related-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-sm); }
.blog-related-list a { color: var(--cyan); font-size: 15px; }
.blog-related-list a:hover { text-decoration: underline; }