/* =========================================================
   css/blog/archive-blog.css — BLOG アーカイブ
   スコープ：.blog-archive 以下のみ（他ページに非干渉）

   構成：
     1) 余白とタイポ（読みやすさ最優先）
     2) パンくず（Galleryと同デザインへ統一）  ← ★今回の主目的
     3) 見出し（中央揃え）
     4) カテゴリーバー（横並びボタン）
        └ 初期表示＆ホバーは Gallery カテゴリと同等
     5) カードグリッド（3×3 / 最大9件）
        - ホバー時：テキスト側だけ下から#333でスライドイン
        - 画像はズームのみ（塗りつぶしは無し）
     6) ページネーション（丸番号 / 下からスライドで塗り）★要望対応
     7) 入場エフェクト（下からスライドイン）

   直近の調整（維持）：
     - コンテナ最大幅 1120px → 1280px
     - セクション左右パディング min(5vw,24px) → min(3vw,18px)
     - グリッドgap 28px → 22px
     - カテゴリ“低め”の背・枠常時表示・角丸ではない直線エッジの塗り

   ★今回の変更点（パンくずを Gallery と完全同型・同装飾に）：
     - 行高・フォントサイズ・下余白：Galleryに合わせて
       .ba-breadcrumb { margin-bottom:16px; font-size:clamp(12px,1.2vw,14px) }
     - リスト表示：gap=.5em、折返し、list-style無効
     - セパレータ：li + li::before に ">" をCSSで挿入（Galleryと同）
     - 色とリンク装飾：項目色#666、リンクは下線なし＋点線ボーダー
     - 既存の「固定ヘッダー押し下げ」は維持（--stickyTop 使用）

   ★今回の不具合修正（PCでカテゴリ“枠”高さが不揃い）：
     - 原因：.blog-card__cat に line-height 未指定 → ブラウザ/フォント差で計算高さが揺れる
     - 対策：高さを変数 --ba-cat-h で固定、inline-grid + place-items:center で縦中央
       （SPは元々揃って見えるため副作用なし）
   ========================================================= */

.blog-archive {
  /* セクション間の基本余白（上下広め） */
  --ba-section-gap: 72px;
  --ba-inner-pad:  24px;   /* カード内パディング */

  /* カード間隔（相対拡大のため微小） */
  --ba-grid-gap:   22px;

  --ba-title-fs:   clamp(28px, 3.2vw, 40px);
  --ba-sub-fs:     clamp(14px, 1.8vw, 18px);
  --ba-text:       #333;
  --ba-accent:     #333;   /* ★重要：ページ番号ホバー時の塗り色＝#333 */

  /* 他ページと統一：共通ページ背景変数に追従（無ければ #fff） */
  --ba-bg:         var(--pageBg, #fff);

  --ba-muted:      #777;
  --ba-border:     #e5e5e5;
  --ba-shade:      rgba(51,51,51,.80);

  /* コンテナ幅と左右パディング（既定維持） */
  --ba-container:  1280px;                /* 1120px → 1280px に拡張済み */
  --ba-side-pad:   min(3vw, 18px);        /* min(5vw,24px) → min(3vw,18px) */

  /* ★追加：カテゴリカプセルの“高さ”を固定（PCの不揃い解消） */
  --ba-cat-h:      28px;

  color: var(--ba-text);
  background: var(--ba-bg);
}

/* コンテナ（左右のパディング・最大幅） */
.blog-archive .ba-breadcrumb,
.blog-archive .ba-head,
.blog-archive .ba-catbar,
.blog-archive .ba-grid,
.blog-archive .ba-pagination {
  max-width: var(--ba-container);
  margin-inline: auto;
  padding-inline: var(--ba-side-pad);
}

/* -----------------------------
   1) セクション余白
----------------------------- */

/* ★維持：固定ヘッダー押し下げ。★変更：下余白と文字サイズをGallery準拠に */
.blog-archive .ba-breadcrumb {
  margin-top: calc(var(--stickyTop, 0px) + 24px); /* ヘッダー分の押し下げ（既存維持） */
  margin-bottom: 16px;                             /* ★変更：Galleryと同じ */
  font-size: clamp(12px, 1.2vw, 14px);            /* ★変更：Galleryと同じ */
}

.blog-archive .ba-head       { margin-top: 0;    margin-bottom: 28px; text-align: center; }
.blog-archive .ba-catbar     { margin-top: 0;    margin-bottom: var(--ba-section-gap); }
.blog-archive .ba-grid       { margin-top: 0;    margin-bottom: var(--ba-section-gap); }
.blog-archive .ba-pagination { margin-top: 0;    margin-bottom: calc(var(--ba-section-gap) + 24px); }

/* -----------------------------
   2) パンくず（Galleryと同デザイン）
   - .gal-breadcrumbs / .gal-bc__list / .gal-bc__item の意匠をBlog側クラスへ移植
----------------------------- */

/* ★変更：list表示・折返し・間隔（Galleryと同値） */
.ba-breadcrumb__list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: .5em;
  flex-wrap: wrap;
}

/* ★変更：項目色（Galleryと同値） */
.ba-breadcrumb__item{
  color: #666;
}

/* ★変更：リンク装飾（Galleryと同値：文字色継承＋点線ボーダー下線） */
.ba-breadcrumb__link{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted #aaa;
}

/* 既存クラスは存続（色の差分がある場合は上書き不要） */
.ba-breadcrumb__current{
  /* Galleryではcurrent専用クラスは無いが、互換のため残す */
  color: inherit;
}

/* ★変更：区切り“>”をCSSで差し込み（Galleryと同ロジック） */
.ba-breadcrumb__item + .ba-breadcrumb__item::before{
  content: ">";
  color: #aaa;
  opacity: .9;
  font-size: .9em;
  line-height: 1;
  display: inline-block;
  margin-right: .5em;
}

/* -----------------------------
   3) 見出し
----------------------------- */
.ba-head__title {
  font-size: var(--ba-title-fs);
  letter-spacing: .04em;
  line-height: 1.25;
  font-weight: 700;
  margin: 0 0 8px;
}
.ba-head__subtitle {
  font-size: var(--ba-sub-fs);
  line-height: 1.9;
  color: var(--ba-muted);
  margin: 0;
}

/* -----------------------------
   4) カテゴリーバー（横並び）
   ※ 初期表示＆ホバーは Gallery のカテゴリ（.gal-chip）と同等へ統一
----------------------------- */
.ba-catbar__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;                /* Gallery に合わせて 10px */
  justify-content: center;
}

/* 初期表示：アイテム順次フェード（軽量） */
.ba-catbar__item{
  opacity: 0;
  will-change: opacity;
  animation: baFadeIn .5s ease-out both;
}
.ba-catbar__item:nth-child(1){ animation-delay: .04s; }
.ba-catbar__item:nth-child(2){ animation-delay: .08s; }
.ba-catbar__item:nth-child(3){ animation-delay: .12s; }
.ba-catbar__item:nth-child(4){ animation-delay: .16s; }
.ba-catbar__item:nth-child(5){ animation-delay: .20s; }
.ba-catbar__item:nth-child(6){ animation-delay: .24s; }
.ba-catbar__item:nth-child(7){ animation-delay: .28s; }
.ba-catbar__item:nth-child(8){ animation-delay: .32s; }

/* ホバー：背景#333 / 文字#fff / わずかに浮く（-1px）
   → Galleryの .gal-chip と同仕様／::afterの幕スライドは使用しない */
.ba-catbar__link {
  display: inline-block;
  padding: .5em 1em;        /* Gallery と同寸法（低めの背） */
  border: 1px solid #333;   /* 常時表示の枠（Galleryと同じ #333） */
  border-radius: 999px;
  text-decoration: none;
  color: #333;
  font-size: 14px;
  line-height: 1;
  transition:
    background-color .25s ease,
    color .25s ease,
    transform .2s ease;
}
.ba-catbar__link:hover,
.ba-catbar__link:focus-visible{
  background: #333;
  color: #fff;
  transform: translateY(-1px);
}
.ba-catbar__link.is-active{
  background: #333;
  color: #fff;
}

/* -----------------------------
   5) カードグリッド（3列／レスポンシブ）
----------------------------- */
.ba-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ba-grid-gap);
}
@media (max-width: 768px){
  .ba-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
  .ba-grid { grid-template-columns: 1fr; }
}

/* カード本体 */
.blog-card {
  background: #fff;
  border: 1px solid var(--ba-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,.04);
  transition: transform .25s ease, box-shadow .25s ease;
}
.blog-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

/* クリック領域 */
.blog-card__link {
  display: grid;
  grid-template-rows: auto 1fr;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

/* 画像領域（ズームのみ） */
.blog-card__figure {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f4f4f4;
}
.blog-card__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform .5s ease;
  will-change: transform;
}
.blog-card__noimg {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  font-size: 12px;
  color: #aaa;
  background: #fafafa;
}

/* 画像の塗りは使わない */
.blog-card__shade { display: none !important; }

/* 本文領域（内側余白）＋ 背景スライド（scaleY） */
.blog-card__body {
  position: relative;
  z-index: 0;
  overflow: hidden;
  padding: var(--ba-inner-pad);
  display: grid;
  gap: 8px;
}
.blog-card__body::after{
  content:"";
  position:absolute; left:0; right:0; top:0; bottom:-1px;
  background: var(--ba-accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .35s ease;
  border-radius: 0 0 14px 14px;
  z-index: 0;
  will-change: transform;
  backface-visibility: hidden;
}
.blog-card__body > *{ position: relative; z-index: 1; }

/* カテゴリ・タイトル・日付 */
/* ---------------------------------------------------------
   ★修正：カテゴリ“カプセル”の高さを固定して完全一致させる
   - これまで：inline-block + padding + line-height:normal（未指定）→ 実測高さが環境で揺れる
   - これから：inline-grid + 固定height(--ba-cat-h) + 中央寄せ + line-height:1
   - 視覚は従来どおり（フォントサイズ/角丸/枠色）を維持
   --------------------------------------------------------- */
.blog-card__cat {
  /* 既存指定（色/枠/角丸/フォント）を維持 */
  font-size: 12px;
  color: var(--ba-muted);
  border: 1px solid var(--ba-border);
  border-radius: 999px;

  /* ★高さを固定し、縦中央に配置（環境差を排除） */
  display: inline-grid;                 /* インラインのままグリッド化 */
  height: var(--ba-cat-h);              /* ← カプセルの総高さを固定 */
  padding: 0 10px;                      /* ← 横だけパディング。縦は固定高で管理 */
  place-items: center;                  /* ← 水平・垂直とも中央揃え */
  line-height: 1;                       /* ← フォントに依存しない基準行高 */
  box-sizing: border-box;               /* ← 枠線分を含めて安定化（念のため） */
}

.blog-card__title {
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.6;
  font-weight: 700;
  color: var(--ba-text);
}
.blog-card__date {
  font-size: 12px;
  color: var(--ba-muted);
}

/* ホバー時：本文だけ塗り＋画像ズーム＋テキスト反転 */
.blog-card:hover .blog-card__body::after { transform: scaleY(1); }
.blog-card:hover .blog-card__img        { transform: scale(1.06); }
.blog-card:hover .blog-card__title,
.blog-card:hover .blog-card__date,
.blog-card:hover .blog-card__cat        { color: #fff; border-color: rgba(255,255,255,.6); }

/* 空表示 */
.ba-empty {
  grid-column: 1/-1;
  text-align: center;
  color: var(--ba-muted);
  padding: 48px 0;
  border: 1px dashed var(--ba-border);
  border-radius: 12px;
}

/* ---------------------------------------------------------
   6) ページネーション（丸番号）★要望対応
   - 各番号を正円で常時囲む（数字/‹›とも）
   - hover：下から #333 の“矩形（四角）”をスライド → 円の器でクリップ
     ※ 円の内側に完全にフィットし、縁のスキ・にじみを無くす
   - WPの <a class="page-numbers"> と <span class="page-numbers"> の両方対応
   - UL/LI の行頭記号（・）は確実に無効化
---------------------------------------------------------- */

/* ★行頭記号（・）を確実に消す：UL/LI/::marker をリセット */
.ba-pagination__list{
  list-style: none;   /* UL の箇条書き記号を無効化 */
  padding: 0;         /* 既定の左インデントを打ち消し */
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
}
.ba-pagination__list > li{ list-style: none; }      /* 念のため LI 側も無効化 */
.ba-pagination__list > li::marker{ content: none; } /* ブラウザによっては ::marker が必要 */

/* ★コア：番号丸の“器”。::after は大きな四角で塗り、円の器でクリップする */
.ba-pagination__item a,
.ba-pagination__item span {
  position: relative;       /* 疑似要素の基準 */
  z-index: 0;               /* テキスト前面／塗り背面 */
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--ba-border); /* ← 枠は常時表示（“常時丸で囲う”要件） */
  border-radius: 999px;               /* ← 器は円形 */
  isolation: isolate;                 /* ← 重なり順を安定化（塗りを背面に閉じ込める） */
  text-decoration: none;
  color: var(--ba-text);
  font-size: 14px;
  line-height: 1;
  overflow: hidden;                   /* ← 四角の塗りを円の内側にクリップ */
  transition: border-color .25s ease, transform .18s ease;
}
.ba-pagination__item a:hover,
.ba-pagination__item a:focus-visible{
  transform: translateY(-1px); /* ほんの少しだけ浮かせる */
}

/* ★塗り（下からスライド）— “四角” を使うのがポイント
   - inset: -2px で器より一回り大きく → 円周のにじみ/白スジ対策
   - border-radius: 0 で完全な矩形
   - 親の overflow:hidden + border-radius:999px で円形に見える */
.ba-pagination__item a::after,
.ba-pagination__item span::after{
  content:"";
  position:absolute;
  inset: -2px;                  /* ← 器より少し大きくして縁のスキを消す（-3pxでも可） */
  border-radius: 0;             /* ← あえて“四角”にする */
  background: var(--ba-accent); /* = #333 */
  transform: translateY(110%);  /* ← 円の外まで確実に隠す */
  transition: transform .35s ease;
  z-index: -1;                  /* ← テキストの背面で塗る（親が isolation を持つため安全） */
  will-change: transform;
}

/* ★hover/focus：塗り上げ＋文字反転＋枠色を#333に */
.ba-pagination__item a:hover,
.ba-pagination__item a:focus-visible{
  color: #fff;
  border-color: var(--ba-accent);
}
.ba-pagination__item a:hover::after,
.ba-pagination__item a:focus-visible::after{ transform: translateY(0); }

/* ★現在ページ：常に“塗り済み”状態（span.current を想定） */
.ba-pagination__item .current{
  color: #fff;
  border-color: var(--ba-accent);
}
.ba-pagination__item .current::after { transform: translateY(0); }

/* Prev / Next は太字のみ（円自体と動きは他と同じ） */
.ba-pagination__item a[aria-label*="Prev"],
.ba-pagination__item a[aria-label*="Next"]{ font-weight: 700; }

/* ★WPの省略記号 …（.dots）を自然に見せる：丸囲いにしない */
.ba-pagination__item .dots{
  width: auto; height: auto;
  padding: 0 6px;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--ba-muted);
}
.ba-pagination__item .dots::after{ display: none; }

/* ★無効化された Prev/Next（a→span になるケース）を薄く（丸枠は維持） */
.ba-pagination__item span.prev,
.ba-pagination__item span.next{
  color: #bbb;
  border-color: var(--ba-border);
}

/* -----------------------------
   7) 入場エフェクト
----------------------------- */
.blog-archive .js-reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.blog-archive .js-reveal.is-inview{
  opacity: 1;
  transform: none;
}
.blog-archive .ba-grid.js-reveal.is-inview .blog-card{
  animation: baCardFade .6s both;
}
@keyframes baCardFade{
  from{ opacity: 0; transform: translateY(16px); }
  to  { opacity: 1; transform: none; }
}

/* ========== 付録：カテゴリ初期表示用のフェードキーフレーム ========== */
@keyframes baFadeIn{
  from{ opacity: 0; }
  to  { opacity: 1; }
}

/* モーション軽減設定 */
@media (prefers-reduced-motion: reduce){
  .ba-catbar__item{
    animation: none !important;
    opacity: 1 !important;
  }
  .ba-catbar__link:hover,
  .ba-catbar__link:focus-visible{
    transform: none !important;
  }
}

/* =========================================================
   互換フォールバック（保険）
   - もし PHP 側の整形が未反映で、純正の .page-numbers のみが出力されても
     ほぼ同じ見た目になるように軽く上書き。
   - 既存指定と競合しないよう、.blog-archive .ba-pagination を親にして限定。
   - ★今回：こちらも“円の器＋四角い塗り”に統一（縁のスキ対策）
   ========================================================= */
.blog-archive .ba-pagination .page-numbers{
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--ba-border);
  border-radius: 999px;     /* ← 器は円形（常時丸で囲う） */
  text-decoration: none;
  color: var(--ba-text);
  font-size: 14px;
  line-height: 1;
  overflow: hidden;         /* ← 四角の塗りを円でクリップ */
  isolation: isolate;
  transition: border-color .25s ease, transform .18s ease;
}
.blog-archive .ba-pagination .page-numbers:hover,
.blog-archive .ba-pagination .page-numbers:focus-visible{
  transform: translateY(-1px);
  color:#fff; border-color: var(--ba-accent);
}
.blog-archive .ba-pagination .page-numbers::after{
  content:"";
  position:absolute;
  inset:-2px;               /* ← 器より少し大きい四角 */
  border-radius:0;          /* ← 四角い塗り（にじみ防止） */
  background: var(--ba-accent);
  transform: translateY(110%);
  transition: transform .35s ease;
  z-index:-1;
  will-change: transform;
}
.blog-archive .ba-pagination .page-numbers:hover::after,
.blog-archive .ba-pagination .page-numbers:focus-visible::after{ transform: translateY(0); }
.blog-archive .ba-pagination .page-numbers.current{
  color:#fff; border-color: var(--ba-accent);
}
.blog-archive .ba-pagination .page-numbers.current::after{ transform: translateY(0); }
/* 省略記号 … は丸にしない */
.blog-archive .ba-pagination .page-numbers.dots{
  width:auto; height:auto; padding:0 6px;
  border:none; border-radius:0; background:none; color:var(--ba-muted);
}
.blog-archive .ba-pagination .page-numbers.dots::after{ display:none; }