/* ===== Blog — extends style.css, same design system ===== */

.blog-hero{ padding:170px 0 60px; text-align:center; position:relative; }
.blog-hero::before{
  content:''; position:absolute; inset:0 0 auto; height:520px; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 60% 60% at 50% 0%, rgba(20,166,171,0.14), transparent 65%);
}
.blog-hero-title{
  font-family:var(--serif); font-weight:400; line-height:1.2;
  font-size:clamp(2rem, 4.4vw, 3.4rem); max-width:820px; margin:16px auto 20px;
}
.blog-hero-sub{ color:var(--text-dim); font-size:1.1rem; max-width:640px; margin:0 auto; }

.blog-list-section{ padding-bottom:120px; }

.blog-filters{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:44px; }
.blog-filter{
  border:1px solid var(--line-strong); border-radius:999px; padding:8px 18px; font-size:.85rem;
  color:var(--text-dim); transition:all .2s;
}
.blog-filter:hover{ color:var(--text); border-color:var(--accent-bright); }
.blog-filter.is-active{ background:var(--accent); border-color:var(--accent); color:#031012; font-weight:600; }

.blog-empty{ text-align:center; color:var(--text-mute); padding:60px 0; }

.blog-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.blog-card{
  background:var(--bg-alt); border:1px solid var(--line); border-radius:18px; overflow:hidden;
  transition:border-color .25s, transform .25s;
}
.blog-card:hover{ border-color:var(--accent-dim); transform:translateY(-3px); }
.blog-card-link{ display:block; padding:26px; height:100%; }
.blog-card-tag{
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  color:var(--accent-bright); background:var(--accent-dim); padding:4px 10px; border-radius:999px; margin-bottom:14px;
}
.blog-card-title{ font-size:1.2rem; font-weight:800; line-height:1.35; margin-bottom:10px; }
.blog-card-excerpt{
  color:var(--text-dim); font-size:.92rem; line-height:1.7; margin-bottom:18px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.blog-card-meta{ display:flex; justify-content:space-between; align-items:center; font-size:.8rem; color:var(--text-mute); }
.blog-card-readmore{ color:var(--accent-bright); font-weight:600; }

.blog-pagination{ display:flex; justify-content:center; gap:8px; margin-top:52px; }
.blog-page-link{
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-strong); border-radius:10px; color:var(--text-dim); font-size:.9rem;
}
.blog-page-link.is-active{ background:var(--accent); border-color:var(--accent); color:#031012; font-weight:700; }
.blog-page-link:hover{ border-color:var(--accent-bright); color:var(--text); }

/* ---- single article ---- */
.blog-post{ padding:150px 0 40px; }
.blog-post-container{ max-width:760px; }
.blog-back{ display:inline-block; color:var(--text-mute); font-size:.9rem; }
.blog-back:hover{ color:var(--accent-bright); }

.reading-mode-toggle{
  display:inline-flex; align-items:center; gap:8px; margin-inline-start:16px;
  border:1px solid var(--line-strong); border-radius:999px; padding:7px 16px;
  background:none; color:var(--text-dim); font-size:.82rem; cursor:pointer;
  transition:color .2s, border-color .2s;
}
.reading-mode-toggle:hover{ color:var(--accent-bright); border-color:var(--accent-bright); }
.reading-mode-toggle svg{ width:15px; height:15px; }
.reading-mode-toggle.is-active{ background:var(--accent-dim); color:var(--accent-bright); border-color:var(--accent-bright); }
.blog-post-toolbar{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:36px; }

.blog-post-header{ margin-bottom:44px; }

/* ---- reading mode: wider spacing, larger type, fewer distractions ---- */
.reading-mode .blog-post-container{ max-width:680px; }
.reading-mode .blog-post-body{ font-size:1.22rem; line-height:2.05; }
.reading-mode .blog-post-body p{ margin-bottom:28px; }
.reading-mode .blog-post-body h2{ font-size:1.5rem; margin:52px 0 20px; }
.reading-mode .blog-related,
.reading-mode .blog-post-cta{ display:none; }
.blog-post-title{
  font-family:var(--serif); font-weight:400; line-height:1.25;
  font-size:clamp(1.8rem, 4vw, 2.7rem); margin:16px 0 18px;
}
.blog-post-meta{ display:flex; gap:10px; align-items:center; color:var(--text-mute); font-size:.88rem; }

.blog-post-body{
  color:var(--text-dim); font-size:1.08rem; line-height:1.9;
}
.blog-post-body h2{
  font-family:var(--serif); font-weight:400; color:var(--text); font-size:1.6rem;
  margin:44px 0 18px; line-height:1.35;
}
.blog-post-body h3{ color:var(--text); font-size:1.25rem; font-weight:700; margin:34px 0 14px; }
.blog-post-body p{ margin-bottom:22px; }
.blog-post-body ul, .blog-post-body ol{ margin:0 0 22px; padding-inline-start:24px; }
.blog-post-body li{ margin-bottom:10px; }
.blog-post-body strong{ color:var(--text); }
.blog-post-body em{ font-style:italic; color:var(--accent-bright); }
.blog-post-body blockquote{
  border-inline-start:3px solid var(--accent); margin:28px 0; padding:4px 24px;
  font-family:var(--serif); font-style:italic; font-size:1.15rem; color:var(--text);
}
.blog-post-body a{ color:var(--accent-bright); text-decoration:underline; text-underline-offset:3px; }
.blog-post-body code{
  background:var(--bg-raise); border:1px solid var(--line); border-radius:5px; padding:2px 6px;
  font-size:.9em; color:var(--accent-bright);
}
.blog-post-body hr{ border:none; border-top:1px solid var(--line); margin:40px 0; }

.blog-post-cta{
  margin-top:56px; padding:40px; border-radius:20px; background:var(--bg-alt); border:1px solid var(--line);
  text-align:center;
}
.blog-post-cta h2{ font-family:var(--serif); font-weight:400; font-size:1.5rem; margin:14px 0 12px; }
.blog-post-cta p{ color:var(--text-dim); margin-bottom:22px; max-width:480px; margin-inline:auto; }

.blog-related{ padding:20px 0 120px; }
.blog-related-title{ font-family:var(--serif); font-weight:400; font-size:1.6rem; margin-bottom:28px; text-align:center; }

@media (max-width:980px){
  .blog-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:640px){
  .blog-grid{ grid-template-columns:1fr; }
  .blog-hero{ padding:130px 0 40px; }
  .blog-post{ padding:120px 0 20px; }
  .blog-post-cta{ padding:28px 22px; }
}