/* =========================================================
   the Sanctuary — blog (Journal) styles
   既存パレット/変数（style.css）に依存
   ========================================================= */

/* 一覧グリッド */
.blog-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3vw,38px);
}
.blog-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.blog-card a{text-decoration:none;color:inherit;display:flex;flex-direction:column;height:100%}
.blog-thumb{aspect-ratio:3/2;overflow:hidden;background:var(--bg-subtle);
  display:flex;align-items:center;justify-content:center}
.blog-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.blog-card:hover .blog-thumb img{transform:scale(1.05)}
.blog-thumb__ph{font-family:var(--font-en);letter-spacing:.16em;color:#b9a88f;font-size:.85rem}
.blog-card__body{padding:1.2em 1.3em 1.5em;display:flex;flex-direction:column;gap:.5em}
.blog-card__body time{font-family:var(--font-en);font-size:.78rem;letter-spacing:.1em;color:var(--accent)}
.blog-card__title{font-family:var(--font-jp);font-size:1.12rem;line-height:1.5;color:var(--dark);margin:0}
.blog-card__excerpt{font-size:.86rem;line-height:1.85;color:#6d5b4c;margin:0}

/* ページネーション */
.blog-pager{margin-top:clamp(36px,5vw,60px)}
.blog-pager .nav-links{display:flex;justify-content:center;gap:.5em;flex-wrap:wrap}
.blog-pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;height:42px;padding:0 .6em;border:1px solid var(--line);border-radius:12px;
  text-decoration:none;color:var(--dark);font-family:var(--font-en);transition:.3s}
.blog-pager .page-numbers.current{background:var(--accent);color:#fff;border-color:var(--accent)}
.blog-pager .page-numbers:hover:not(.current){background:var(--bg-section)}

/* 記事本文 */
.single-thumb{border-radius:var(--r-lg);overflow:hidden;margin-bottom:clamp(24px,4vw,44px);box-shadow:var(--shadow)}
.single-thumb img{width:100%;height:auto;display:block}
.blog-content{font-size:1rem;line-height:2;color:var(--text)}
.blog-content > *{margin-bottom:1.3em}
.blog-content h2{font-family:var(--font-jp);font-size:1.4rem;color:var(--heading);
  margin:2em 0 .8em;padding-bottom:.4em;border-bottom:1px solid var(--line)}
.blog-content h3{font-family:var(--font-jp);font-size:1.18rem;color:var(--dark);margin:1.8em 0 .6em}
.blog-content a{color:var(--accent);text-decoration:underline}
.blog-content img{max-width:100%;height:auto;border-radius:var(--r)}
.blog-content blockquote{border-left:3px solid var(--accent);padding-left:1.2em;color:#6d5b4c;font-style:italic}
.blog-content ul,.blog-content ol{padding-left:1.4em}
.blog-content li{margin-bottom:.5em}

/* 前後記事ナビ */
.single-nav{display:flex;justify-content:space-between;gap:1em;margin-top:clamp(32px,4.5vw,52px);
  padding-top:1.6em;border-top:1px solid var(--line);font-size:.88rem}
.single-nav a{color:var(--dark);text-decoration:none;transition:color .3s}
.single-nav a:hover{color:var(--accent)}
.single-nav__next{margin-left:auto;text-align:right}

.blog-empty{text-align:center;color:#6d5b4c;padding:3em 0}

@media (max-width:900px){ .blog-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .blog-grid{grid-template-columns:1fr} }

/* ---- カテゴリタブ（一覧上部） ---- */
.blog-cats{display:flex;flex-wrap:wrap;gap:.5em;justify-content:center;margin-bottom:clamp(28px,4vw,48px)}
.blog-cats__item{padding:.5em 1.1em;border:1px solid var(--line);border-radius:999px;
  font-size:.84rem;color:var(--dark);text-decoration:none;transition:.3s;font-family:var(--font-body)}
.blog-cats__item:hover{background:var(--bg-section)}
.blog-cats__item.is-active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ---- カテゴリバッジ（カード・記事メタ） ---- */
.blog-cat-badge{display:inline-block;font-family:var(--font-en);font-size:.72rem;letter-spacing:.08em;
  padding:.25em .8em;border-radius:999px;background:var(--bg-subtle);color:var(--dark);
  text-decoration:none;line-height:1.6}
a.blog-cat-badge:hover{background:var(--accent);color:#fff}
.blog-card__meta{display:flex;align-items:center;gap:.7em;flex-wrap:wrap}
.blog-card__meta time{font-family:var(--font-en);font-size:.78rem;letter-spacing:.1em;color:var(--accent)}
.single-meta{display:flex;align-items:center;gap:.8em;flex-wrap:wrap}

/* ---- 記事タグ ---- */
.single-tags{margin-top:2em;display:flex;flex-wrap:wrap;gap:.5em}
.single-tags a{font-size:.8rem;color:#6d5b4c;background:var(--bg-section);padding:.3em .9em;
  border-radius:999px;text-decoration:none;transition:.3s}
.single-tags a:hover{background:var(--bg-subtle)}

/* ---- 記事末CTA（送客動線） ---- */
.post-cta{margin-top:clamp(40px,5.5vw,72px);padding:clamp(28px,4.5vw,52px);
  background:var(--bg-section);border-radius:var(--r-lg);text-align:center}
.post-cta__eyebrow{font-family:var(--font-en);font-size:.74rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.6em}
.post-cta__title{font-family:var(--font-jp);font-size:clamp(1.3rem,2.6vw,1.8rem);color:var(--dark);margin:0 0 .6em}
.post-cta__lead{font-size:.92rem;line-height:1.95;color:#6d5b4c;max-width:34em;margin:0 auto 1.6em}