/* =========================================================
   css/blog/archive-blog.css — BLOG アーカイブ用スタイル
   ---------------------------------------------------------
   このCSSは「BLOG 一覧（投稿アーカイブ）」ページ専用です。
   すべてのセレクタは .blog-archive を起点にスコープし、
   他のテンプレートへ意図せず影響しないようにしています。

   対象テンプレート（PHP）
     - archive-post.php（本プロジェクトのBLOGアーカイブテンプレート）

   前提DOM（主要クラス）
     - <main class="site-main blog-archive" ...>
     - .ba-breadcrumb / .ba-breadcrumb__list / .ba-breadcrumb__item ...
     - .ba-tagchips / .ba-tagchip ...
     - .ba-head（タイトル・サブタイトル）
     - .ba-catbar（カテゴリーバー）
     - .ba-grid（カードのグリッド）
       - .blog-card
         - .blog-card__link
           - .blog-card__figure（画像）
           - .blog-card__body（本文）
             - .blog-card__cat
             - .blog-card__title
             - .blog-card__meta（★日付＋閲覧数をまとめた行）
               - time.blog-card__date
               - span.blog-card__views
     - .ba-pagination（ページネーション）

   このファイルが担うこと（設計意図）
     1) “読みやすさ”優先の余白・文字サイズ・色トーンの統一
     2) パンくずを Gallery と同系統の見た目へ揃える
     3) タグ絞り込み時に「解除チップ」を自然に配置する
     4) カテゴリーバーをチップ風UIとして統一する
     5) 記事カードは
        - 画像：ズームのみ（塗りつぶし無し）
        - 本文：#333 のスライド塗り（下から）
        - メタ行：日付（左）＋閲覧数（右）を同じ位置で下揃え
     6) ページネーションを“常時丸囲い”＋“下から塗り”で統一する
     7) 画面内に入ったときの入場エフェクト（軽量）を提供する

   レイアウト要件（今回の調整点）
     - 閲覧数（累計）を日付と同じ行に置く
     - 日付は左寄せ、閲覧数は右寄せ
     - 日付＋閲覧数の行をカードの下端に揃える
       → .blog-card__body を縦方向 flex にし、
          .blog-card__meta を margin-top:auto で最下段へ押し下げる

   変更ポリシー
     - 修正対象（コメント再作成）以外のCSSルールは維持する前提。
     - 値そのものは不用意に変えず、既存見た目を保ちながら
       DOM（.blog-card__meta）追加に追従させています。
   ========================================================= */

.blog-archive {
  /* ---------------------------------------------------------
     0) ページ内共通トークン（CSS変数）
     ---------------------------------------------------------
     - 余白、幅、色、タイポの“基準値”をまとめておき、
       以降のルールで参照できるようにします。
     - 他ページと合わせたい値は、ここで統一しやすくしています。
  --------------------------------------------------------- */

  /* セクション間の基本余白（上下広め） */
  --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;

  /* ページ背景（共通変数があれば追従、無ければ白） */
  --ba-bg:         var(--pageBg, #fff);

  /* サブトーン */
  --ba-muted:      #777;

  /* 薄い罫線色 */
  --ba-border:     #e5e5e5;

  /* カードの影・暗幕トーン（必要なら使える） */
  --ba-shade:      rgba(51,51,51,.80);

  /* コンテナ幅と左右余白（既存値を維持） */
  --ba-container:  1280px;
  --ba-side-pad:   min(3vw, 18px);

  /* カテゴリ“カプセル”の高さ固定（環境差による高さ揺れを抑える） */
  --ba-cat-h:      28px;

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

/* =========================================================
   1) コンテナ（横幅・左右パディングの共通化）
   ---------------------------------------------------------
   - パンくず、見出し、カテゴリーバー、グリッド、ページネーションなど
     “同じ横幅で揃えたいブロック”をまとめて指定します。
   - ここで max-width と padding を統一することで、各ブロックの
     個別調整が不要になります。
   ========================================================= */
.blog-archive .ba-breadcrumb,
.blog-archive .ba-tagchips,    /* タグチップも同じ横幅・左右余白で揃える */
.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);
}

/* =========================================================
   2) セクション余白（縦方向のリズム）
   ---------------------------------------------------------
   - 固定ヘッダーがある前提なので、最上段（パンくず）には
     --stickyTop を加味した押し下げを入れます。
   ========================================================= */

/* パンくず：固定ヘッダー押し下げ＋Gallery準拠のサイズ感 */
.blog-archive .ba-breadcrumb {
  margin-top: calc(var(--stickyTop, 0px) + 24px);
  margin-bottom: 16px;
  font-size: clamp(12px, 1.2vw, 14px);
}

/* 各ブロックの縦間隔（既存の見た目を維持） */
.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); }

/* =========================================================
   3) パンくず（Gallery と同系統の見え方）
   ---------------------------------------------------------
   - list-style を消して flex で並べる
   - 折り返しに対応
   - セパレータ（">"）は CSS で付与
   - リンクは点線下線で“リンクだと分かるが主張しすぎない”表現
   ========================================================= */
.ba-breadcrumb__list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: .5em;
  flex-wrap: wrap;
}

.ba-breadcrumb__item{
  color: #666;
}

.ba-breadcrumb__link{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted #aaa;
}

.ba-breadcrumb__current{
  /* current 専用クラスは将来の拡張余地として残している */
  color: inherit;
}

/* 隣接要素の前に ">" を入れて階層感を作る */
.ba-breadcrumb__item + .ba-breadcrumb__item::before{
  content: ">";
  color: #aaa;
  opacity: .9;
  font-size: .9em;
  line-height: 1;
  display: inline-block;
  margin-right: .5em;
}

/* =========================================================
   4) タグ“×付きチップ”（タグ絞り込み解除UI）
   ---------------------------------------------------------
   - タグアーカイブ時に archive-post.php が出力するDOMに対応
   - チップ全体がリンク（解除）として機能する想定
   - 見た目は Gallery のチップトーン（枠あり＋ホバーで反転）に揃える
   ========================================================= */
.blog-archive .ba-tagchips{
  /* パンくず直下に控えめな余白で配置 */
  margin: 2px auto 12px;
}

.ba-tagchips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* “ボタン風”リンク */
.ba-tagchip{
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  gap: .5em;
  height: 32px;
  padding: 0 12px;
  border: 1px solid #333;
  border-radius: 999px;
  color: #333;
  background: transparent;
  text-decoration: none;
  line-height: 1;
  transition:
    background-color .25s ease,
    color .25s ease,
    transform .2s ease,
    border-color .25s ease;
}

.ba-tagchip:hover,
.ba-tagchip:focus-visible{
  background: #333;
  color: #fff;
  transform: translateY(-1px);
  border-color: #333;
}

/* 現在選択中は常に反転表示 */
.ba-tagchip--active{
  background: #333;
  color: #fff;
  border-color: #333;
}

/* 記号の主張を少し弱める */
.ba-tagchip__hash{
  opacity: .8;
}

/* × は押しやすいように視認性を少し上げる */
.ba-tagchip__remove{
  font-weight: 700;
  opacity: .9;
  margin-left: 2px;
}

/* =========================================================
   5) 見出し（タイトル / サブタイトル）
   ---------------------------------------------------------
   - タイトルは太め、行間は詰めすぎない
   - サブタイトルは muted トーンで読みやすく
   ========================================================= */
.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;
}

/* =========================================================
   6) カテゴリーバー（横並びチップ）
   ---------------------------------------------------------
   - Gallery と同系統の“枠ありチップ”
   - hover で背景反転＋少し浮かせる
   - 初期表示は軽量フェード（順次）
   ========================================================= */
.ba-catbar__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 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; }

/* チップ本体（リンク） */
.ba-catbar__link {
  display: inline-block;
  padding: .5em 1em;
  border: 1px solid #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;
}

/* =========================================================
   7) 記事カードグリッド（3列 → レスポンシブ）
   ---------------------------------------------------------
   - PC：3列
   - タブレット：2列
   - スマホ：1列
   ========================================================= */
.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; }
}

/* =========================================================
   8) 記事カード（blog-card）
   ---------------------------------------------------------
   - 外枠：薄いボーダー＋角丸＋控えめな影
   - hover：カードを少し持ち上げ、影を強くする
   ========================================================= */
.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);
}

/* カード全体クリック（figure + body の2段グリッド） */
.blog-card__link {
  display: grid;
  grid-template-rows: auto 1fr;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

/* =========================================================
   9) カード画像領域（ズームのみ）
   ---------------------------------------------------------
   - 画像は aspect-ratio を固定してレイアウト崩れを防ぐ
   - hover で img を少しズーム（本文側の塗りとは独立）
   ========================================================= */
.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;
}

/* 画像の暗幕（shade）はこのデザインでは使わない */
.blog-card__shade { display: none !important; }

/* =========================================================
   10) カード本文領域（塗りスライド＋縦レイアウト）
   ---------------------------------------------------------
   重要ポイント（今回の要件に直結）
     - .blog-card__body を flex-column にする
     - 最終行 .blog-card__meta を margin-top:auto にする
       → “日付＋閲覧数”行が常にカード下端に揃う
   ========================================================= */
.blog-card__body {
  position: relative;
  z-index: 0;
  overflow: hidden;
  padding: var(--ba-inner-pad);

  /* ★メタ行を下端に固定するための縦フレックス */
  display: flex;
  flex-direction: column;

  /* 子要素の縦間隔（既存の見た目を維持） */
  gap: 8px;
}

/* 本文だけを #333 で塗るための下からスライド幕 */
.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; }

/* =========================================================
   11) カテゴリラベル（高さ固定）
   ---------------------------------------------------------
   - line-height の環境差で高さが揺れないように、
     固定 height + inline-grid で縦中央に揃える
   ========================================================= */
.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);
  line-height: 1;
}

/* =========================================================
   12) 日付 + 閲覧数（同一行・左右寄せ・下端固定）
   ---------------------------------------------------------
   - DOM：archive-post.php が .blog-card__meta を出力する前提
   - 左：time.blog-card__date（左寄せ）
   - 右：span.blog-card__views（右寄せ）
   - .blog-card__meta を “最後の行” として扱い、margin-top:auto で下端へ
   ========================================================= */
.blog-card__meta{
  margin-top: auto;               /* ★カード下端へ固定（flex-column前提） */
  display: flex;
  justify-content: space-between; /* 左：日付 / 右：閲覧数 */
  align-items: flex-end;          /* 行の下端を揃える */
  gap: 12px;
}

/* 閲覧数（メタ右側） */
.blog-card__views{
  font-size: 12px;
  color: var(--ba-muted);
  line-height: 1;
  white-space: nowrap;            /* “xxxx views” を折り返さない */
}

/* hover：本文幕を出す＋画像ズーム＋文字色反転（メタ右側も対象に含める） */
.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__views,
.blog-card:hover .blog-card__cat        { color: #fff; border-color: rgba(255,255,255,.6); }

/* =========================================================
   13) 0件時の表示（空状態）
   ========================================================= */
.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;
}

/* =========================================================
   14) ページネーション（丸番号＋下から塗り）
   ---------------------------------------------------------
   - すべての番号を“常時丸囲い”
   - hover/focus で下から #333 がスライドして塗られる
   - current は常に塗り済み
   - dots（…）は丸囲いにしない
   ========================================================= */

/* UL/LI の行頭記号（・）を確実に無効化 */
.ba-pagination__list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
}
.ba-pagination__list > li{ list-style: none; }
.ba-pagination__list > li::marker{ content: none; }

/* クリック要素（a）と現在ページ（span）を同じ見た目の“器”にする */
.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);
}

/* 塗り（四角）を下からスライドさせ、円の器でクリップする */
.ba-pagination__item a::after,
.ba-pagination__item span::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;
}

/* hover/focus：塗り上げ＋文字反転 */
.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); }

/* 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; }

/* 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);
}

/* =========================================================
   15) 入場エフェクト（.js-reveal）
   ---------------------------------------------------------
   - JS 側で is-inview を付与する想定
   - 既存の軽量スライドインを維持
   ========================================================= */
.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;
}

/* グリッドが inview になったときカードに軽いフェード */
.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; }
}

/* =========================================================
   16) prefers-reduced-motion（モーション軽減）
   ---------------------------------------------------------
   - アニメを完全に止め、hoverの“浮き”も止める
   - 視覚的に急な動きが苦手なユーザーへの配慮
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .ba-catbar__item{
    animation: none !important;
    opacity: 1 !important;
  }
  .ba-catbar__link:hover,
  .ba-catbar__link:focus-visible,
  .ba-tagchip:hover,
  .ba-tagchip:focus-visible{
    transform: none !important;
  }
}

/* =========================================================
   17) 互換フォールバック（.page-numbers 直指定の保険）
   ---------------------------------------------------------
   - PHP側の整形（<ul>化・ba-pagination__link 付与）が未反映でも、
     .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; }