/**
 * blog.css — XiADEN ブログ一覧・記事ページCSS
 * 対象テンプレート: archive.php / single.php
 */

/* =============================================================
   ARCHIVE PAGE
   ============================================================= */
.s-blog-hero { background:var(--n); padding:var(--sp64) 0 var(--sp48); }
.blog-hero-inner { max-width:var(--max-w); margin:0 auto; padding:0 var(--sp48); text-align:center; }
.blog-hero-eyebrow { display:block; font-size:var(--f-xs); font-weight:700; letter-spacing:.18em; color:rgba(255,255,255,.56); margin-bottom:var(--sp12); }
.blog-hero-h1 { font-size:clamp(22px,3.5vw,34px); font-weight:900; color:var(--w); margin-bottom:var(--sp12); }
.blog-hero-desc { font-size:var(--f-sm); color:rgba(255,255,255,.62); line-height:1.78; }

/* Category nav */
.s-blog-cat { background:var(--bs); border-bottom:1px solid var(--bm); padding:var(--sp16) 0; }
.blog-cat-nav { display:flex; flex-wrap:wrap; gap:var(--sp8); justify-content:center; }
.blog-cat-link {
  display:inline-flex; align-items:center;
  background:var(--w); border:1px solid var(--bm);
  color:var(--txm); font-size:13px; font-weight:600;
  padding:7px 20px; border-radius:var(--rf);
  transition:background .15s, border-color .15s, color .15s;
}
.blog-cat-link:hover    { background:var(--b); border-color:var(--nm); color:var(--n); }
.blog-cat-link.is-active { background:var(--n); border-color:var(--n); color:var(--w); }

/* Blog grid */
.s-blog-list { background:var(--w); }
.blog-posts-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:var(--sp24); margin-bottom:var(--sp48);
}
.blog-post-card {
  background:var(--w); border:1px solid var(--bm); border-radius:var(--r2);
  overflow:hidden; display:flex; flex-direction:column;
  transition:box-shadow .18s, transform .18s; text-decoration:none;
}
.blog-post-card:hover { box-shadow:var(--s2); transform:translateY(-2px); }
.blog-post-thumb {
  aspect-ratio:16/9; overflow:hidden;
  background:linear-gradient(135deg,var(--b) 0%,var(--bm) 100%);
}
.blog-post-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s; }
.blog-post-card:hover .blog-post-thumb img { transform:scale(1.03); }
.blog-post-body { padding:var(--sp20) var(--sp24); flex:1; display:flex; flex-direction:column; gap:var(--sp8); }
.blog-post-meta { display:flex; align-items:center; gap:var(--sp8); flex-wrap:wrap; }
.blog-post-cat {
  display:inline-block; font-size:10px; font-weight:700; letter-spacing:.08em;
  padding:2px 10px; border-radius:var(--rf);
  background:rgba(29,58,90,.08); color:var(--n);
}
.blog-post-date { font-size:11px; color:var(--txl); }
.blog-post-title { font-size:14px; font-weight:700; color:var(--n); line-height:1.65; flex:1; }
.blog-post-excerpt { font-size:12px; color:var(--txm); line-height:1.7; }

/* Featured / sticky */
.blog-featured-card {
  grid-column:1 / -1;
  background:var(--w); border:1px solid var(--bm); border-radius:var(--r3);
  overflow:hidden; display:grid; grid-template-columns:1fr 1fr;
  text-decoration:none; transition:box-shadow .18s;
}
.blog-featured-card:hover { box-shadow:var(--s2); }
.blog-featured-thumb { aspect-ratio:16/9; overflow:hidden; background:var(--bs); }
.blog-featured-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.blog-featured-body { padding:var(--sp40) var(--sp48); display:flex; flex-direction:column; justify-content:center; gap:var(--sp16); }
.blog-featured-label { display:inline-block; background:var(--or); color:var(--w); font-size:10px; font-weight:700; padding:3px 12px; border-radius:var(--rf); align-self:flex-start; }
.blog-featured-title { font-size:clamp(17px,2vw,22px); font-weight:900; color:var(--n); line-height:1.48; }
.blog-featured-excerpt { font-size:14px; color:var(--txm); line-height:1.8; }

/* Pagination */
.blog-pagination {
  display:flex; justify-content:center; gap:var(--sp8); flex-wrap:wrap;
  margin-top:var(--sp32);
}
.blog-pagination .page-numbers {
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:var(--r1);
  border:1.5px solid var(--bm); color:var(--txm); font-size:14px; font-weight:600;
  transition:background .15s, border-color .15s, color .15s;
}
.blog-pagination .page-numbers:hover { background:var(--b); border-color:var(--nm); color:var(--n); }
.blog-pagination .page-numbers.current { background:var(--n); border-color:var(--n); color:var(--w); }
.blog-pagination .page-numbers.dots { border:none; background:transparent; cursor:default; }
.blog-no-posts { text-align:center; padding:var(--sp64); color:var(--txl); font-size:var(--f-body); }

/* =============================================================
   SINGLE POST
   ============================================================= */
.s-single { background:var(--w); }
.single-hero { background:var(--bs); border-bottom:1px solid var(--bm); padding:var(--sp48) 0; margin-bottom:var(--sp48); }
.single-breadcrumb {
  font-size:12px; color:var(--txl); margin-bottom:var(--sp16);
  display:flex; flex-wrap:wrap; gap:4px;
}
.single-breadcrumb a { color:var(--or); transition:opacity .15s; }
.single-breadcrumb a:hover { opacity:.78; }
.single-hero-meta { display:flex; align-items:center; gap:var(--sp8); margin-bottom:var(--sp16); }
.cat-badge {
  display:inline-block; font-size:10px; font-weight:700; letter-spacing:.08em;
  padding:3px 10px; border-radius:var(--rf);
  background:rgba(29,58,90,.08); color:var(--n);
}
.single-date { font-size:12px; color:var(--txl); }
.single-title { font-size:clamp(20px,3vw,30px); font-weight:900; color:var(--n); line-height:1.42; }
.single-thumb { margin-top:var(--sp24); border-radius:var(--r3); overflow:hidden; box-shadow:var(--s1); }
.single-thumb img { width:100%; height:auto; display:block; }

.single-body { display:grid; grid-template-columns:1fr; max-width:860px; margin:0 auto; padding-bottom:var(--sp64); }
.single-content {
  font-size:var(--f-body); color:var(--txm); line-height:1.92;
  margin-bottom:var(--sp48);
}
.single-content h2 { font-size:clamp(18px,2.5vw,24px); font-weight:700; color:var(--n); margin:var(--sp40) 0 var(--sp16); padding-bottom:var(--sp12); border-bottom:2px solid var(--bm); }
.single-content h3 { font-size:var(--f-h3); font-weight:700; color:var(--n); margin:var(--sp32) 0 var(--sp12); }
.single-content p  { margin-bottom:var(--sp20); }
.single-content ul, .single-content ol { padding-left:1.5em; margin-bottom:var(--sp20); }
.single-content li { margin-bottom:var(--sp8); }
.single-content img { border-radius:var(--r2); box-shadow:var(--s1); margin:var(--sp24) 0; }
.single-content a { color:var(--or); text-decoration:underline; }

.single-post-nav {
  display:flex; justify-content:space-between; gap:var(--sp16);
  padding:var(--sp32) 0; border-top:1px solid var(--bm); border-bottom:1px solid var(--bm);
  margin-bottom:var(--sp32);
}
.post-nav-prev, .post-nav-next {
  display:inline-flex; align-items:center; gap:var(--sp8);
  font-size:var(--f-sm); font-weight:600; color:var(--txm);
  max-width:44%; transition:color .15s;
}
.post-nav-prev:hover, .post-nav-next:hover { color:var(--or); }
.post-nav-next { margin-left:auto; }
.single-back-row { text-align:center; margin-top:var(--sp24); }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width:1024px) {
  .blog-posts-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  .blog-hero-inner { padding:0 20px; }
  .blog-posts-grid { grid-template-columns:1fr; }
  .blog-featured-card { grid-template-columns:1fr; }
  .blog-featured-body { padding:var(--sp24) 20px; }
  .single-hero { padding:var(--sp32) 0; }
}