/* =========================================================
   archive-news.css — NEWS一覧：行カード＋塗りスライド＋ページネーション
   ポリシー：
     - 変数は single-news.css と同一キー（--news-*）を利用
     - ページ見出しは single-news.css の .news-head を“そのまま”適用
     - 本CSSは一覧専用（.news-archive* / .news-row* / .news-pagination*）

   【今回の修正要点】
     - ホバー時の塗り（::after）が「画像より前」に来て画像が隠れる事象を解消。
     - 左サムネ側（.news-row__thumb およびその子）を「前面（z=1）」に固定。
       → .news-row__thumb, .news-row__thumb-img, .news-row__noimg に
          position:relative; z-index:1; を付与。
     - ::after は z-index:0 のまま（親 .news-row__link に isolation: isolate）。
       → テキスト右カラム（.news-row__body）は既に z=1 のため問題なし。
     - 「TOP→」の矢印だけを、hover 中に右へスライドアウト＆左からインの
       アニメーションで入れ替える（文字幅のズレ無し／可読性維持）。
     - ★ NEWS一覧のアイキャッチを hover で“その場ズーム”。
       （画像は塗りの前面にあり、ズームしても塗りに隠れない）
     - ★（追加）初期表示＆スクロール連動のリビール演出：
       JSが付与する .is-prepared で「下から・非表示」準備、
       交差時に .is-inview が付与され「上へスライド＋フェードイン」。
       ※ JS無効時は非表示にならない安全設計（.is-prepared が無い限り常時表示）

   【BLOG一覧のページネーションに合わせた微調整（今回の主目的）】
     - 現在ページ（.current）だけが“黒丸＋白文字”で常時塗り。
     - それ以外は「数値だけ」に見える（＝枠を見せない）初期状態。
       → 視覚上の枠は無し：border を transparent に、背景も無し。
       → ただし可用性のためヒットエリア（44×44）は維持。
     - ホバー時は“下から黒丸がスライドインして白文字化”。
       → ::after の描画を inset:-2px で少し大きめに（縫い目防止）。
   ========================================================= */

/* 念のためのデフォルト（single-news.css 読込済み前提。未読込環境でも破綻しない最低限） */
:root{
  --news-accent: #333;
  --news-border: #e2e2e2;
  --news-radius: 16px;
  --news-max: clamp(720px, 92vw, 1120px);
  --news-title-size: clamp(1.6rem, 1.1rem + 1.2vw, 2.1rem);
  --news-meta-size: clamp(0.95rem, 0.85rem + 0.35vw, 1.2rem);
}

/* ===========================
   レイアウト
   =========================== */
.news-archive{
  padding: 0 16px clamp(56px, 8vw, 96px);
}

/* 一覧コンテナ（中央寄せ） */
.news-archive__list{
  max-width: var(--news-max);
  margin: 0 auto;
  display: grid;
  gap: clamp(16px, 3vw, 24px);
}

/* ===========================
   行カード（1行＝1NEWS）
   構造：
     .news-row
       .news-row__link (block)
         .news-row__thumb
         .news-row__body
   =========================== */
.news-row{
  border: 1px solid var(--news-border);
  border-radius: var(--news-radius);
  overflow: hidden;                   /* 擬似要素の塗りを角丸内にクリップ */
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* ▼▼▼ リビール用（JSで .is-prepared → .is-inview を付与） ▼▼▼ */
/* ★追加：準備状態（JSが .is-prepared を付与した要素のみ“隠す”＝FOUC無し） */
.news-row.is-prepared{
  opacity: 0;
  transform: translate3d(0, 28px, 0); /* 下から */
  will-change: opacity, transform;
}

/* ★追加：表示状態（交差時に .is-inview が付与される） */
.news-row.is-inview{
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: var(--reveal-delay, 0ms); /* PHP or JS から渡す遅延 */
}
/* ▲▲▲ リビール用 ここまで ▲▲▲ */

/* 行全体をリンク化し、下から塗りのレイヤーをスライドさせる */
.news-row__link{
  position: relative;
  display: grid;
  grid-template-columns: minmax(240px, 32%) 1fr; /* 左：サムネ / 右：本文 */
  gap: 0;
  text-decoration: none;
  color: inherit;                     /* 通常時はそのまま */

  isolation: isolate;                 /* 新しいスタッキングコンテキストを生成 */
  overflow: hidden;                   /* 角丸に沿って塗りをマスク */
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

/* 下からの塗り (#333)。transformでチラつきを抑制（GPU合成） */
.news-row__link::after{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--news-accent);
  transform: translate3d(0, 100%, 0); /* 初期：完全に下へ */
  transition: transform .35s ease;
  z-index: 0;                         /* ★ 背面レイヤー（画像・本文より“後ろ”） */
}

/* ホバーで #333 が下→上へ。テキスト群は白に反転 */
.news-row__link:hover::after{
  transform: translate3d(0, 0, 0);
}
.news-row__link:hover .news-row__title,
.news-row__link:hover .news-date{
  color: #fff;
}
.news-row__link:hover .news-divider{
  background: rgba(255,255,255,.32);
}

/* ピルは“文字反転”のニュアンス重視で白地に#333へ */
.news-row__link:hover .news-chip{
  background: #fff;
  color: #333;
}

/* ===========================
   サムネイル（16:9固定）
   【重要】画像を前面に固定するため z-index:1 を付与
   =========================== */
.news-row__thumb{
  position: relative;                 /* ★ 配置要素化（z-index有効化） */
  z-index: 1;                         /* ★ ::after(z=0) より前面に固定 */
  min-height: 100%;
  background: #f5f5f5;

  /* 画像ズーム時にハミ出しを見せない（角丸クリップも担保） */
  overflow: hidden;
}
.news-row__thumb-img{
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;

  position: relative;                 /* ★ 端末差の保険：前面固定 */
  z-index: 1;
}
.news-row__noimg{
  width: 100%;
  aspect-ratio: 16/9;
  display: grid;
  place-items: center;
  color: #999;
  font-weight: 700;
  letter-spacing: .12em;
  background:
    linear-gradient(135deg, #eee 25%, transparent 25%) -8px 0/16px 16px,
    linear-gradient(225deg, #eee 25%, transparent 25%) -8px 0/16px 16px,
    linear-gradient(315deg, #eee 25%, transparent 25%) 0px 0/16px 16px,
    linear-gradient(45deg,  #eee 25%, transparent 25%) 0px 0/16px 16px,
    #f9f9f9;

  position: relative;                 /* ★ ダミー枠も前面に */
  z-index: 1;
}

/* -------------------------------------------
   ★ NEWS一覧：アイキャッチを hover 時に“その場で拡大”
   - 行全体 hover でサムネだけ scale
   - 角丸＆親 overflow で綺麗にクリップ
   ------------------------------------------- */
.news-row__thumb-img,
.news-row__noimg{
  transform: scale(1);                /* 初期は等倍 */
  transform-origin: 50% 50%;          /* 中心から拡大 */
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
  will-change: transform;             /* GPU合成で滑らかに */
}
@media (hover: hover){
  .news-row__link:hover .news-row__thumb-img,
  .news-row__link:hover .news-row__noimg{
    transform: scale(1.06);           /* お好みで 1.04–1.10 に調整 */
  }
}
/* キーボード操作（Tabフォーカス）にも同効果を付与 */
.news-row__link:focus-visible .news-row__thumb-img,
.news-row__link:focus-visible .news-row__noimg{
  transform: scale(1.06);
}

/* ===========================
   右カラム：メタ→区切り→タイトル
   ※ 既に z-index:1 のため、塗り（z=0）より前に出る
   =========================== */
.news-row__body{
  position: relative;
  z-index: 1;                         /* ::after（塗り）より上 */
  padding: clamp(14px, 2.8vw, 24px) clamp(16px, 2.8vw, 28px);
}

/* 「右上に区分と日付」：右寄せ・折返し可 */
.news-row__meta{
  display: inline-flex;
  gap: 10px 14px;
  align-items: baseline;
  justify-content: flex-end;          /* 右寄せ */
  width: 100%;
}

/* 区切り線は上品に薄く（single-news.css のニュアンス踏襲） */
.news-divider{
  border: 0;
  height: 1px;
  background: var(--news-border);
  margin: clamp(12px, 2vw, 18px) 0 clamp(10px, 1.6vw, 14px);
}

/* タイトルは本文カードと同スケール基準を共有 */
.news-row__title{
  margin: 0;
  padding: 2px 0 0;
  font-size: var(--news-title-size);
  line-height: 1.35;
  font-weight: 800;
  color: #111;
}

/* ===========================
   ページネーション（＜ 1 2 3 ＞）
   BLOG一覧の仕様に合わせるためのポイント：
   - 現在ページ（.current）のみ「黒丸＋白文字」の常時塗り。
   - それ以外は“数値だけ”に見せる（＝枠・塗りは視覚上なし）。
     → ただしヒットエリアは維持（44×44 / 円形）。
   - ホバーで黒丸の塗りが下からスライドイン（縫い目防止に inset:-2px）。
   =========================== */
.news-pagination{
  margin: clamp(22px, 4vw, 48px) auto 0;
  max-width: var(--news-max);
}
.news-pagination__list{
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

/* ▼ 初期状態（数値だけ見せる）：枠は“透明”、背景も無し
   - 可用性のためのヒットエリア（44×44）は維持
   - 円形にクリップ（ホバー塗りの丸形も自然に） */
.news-pagination__list .page-numbers{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 44px;                    /* タップ最小サイズ */
  height: 44px;
  padding: 0 14px;

  border: 1px solid transparent;      /* ← ここが BLOG との最大差分修正：枠は視覚上“無し” */
  border-radius: 999px;

  color: var(--news-accent);
  text-decoration: none;
  background: none;

  overflow: hidden;                    /* 丸内に塗りを閉じ込める */
  isolation: isolate;                  /* ::after を -1 バックへ安全に */
  transition: color .32s ease, transform .06s ease;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

/* ▼ ホバー塗り（黒の丸が“下から”入ってくる）
   - inset:-2px でわずかに大きく描画し、縫い目を防ぐ（BLOG準拠）
   - z-index:-1 でテキストは常に前面 */
.news-pagination__list .page-numbers::after{
  content: "";
  position: absolute;
  inset: -2px;                        /* ★ BLOG準拠（縫い目防止のオーバーラン） */
  background: var(--news-accent);
  transform: translate3d(0, 100%, 0);
  transition: transform .32s ease;
  z-index: -1;
}

/* ▼ 現在ページ（常時“黒丸＋白文字”） */
.news-pagination__list .page-numbers.current{
  color: #fff;
}
.news-pagination__list .page-numbers.current::after{
  transform: translate3d(0, 0, 0);    /* 常時・全面塗り */
}

/* ▼ ホバー時（数字／＜／＞ すべて同じ挙動） */
.news-pagination__list a.page-numbers:hover{
  color: #fff;
}
.news-pagination__list a.page-numbers:hover::after{
  transform: translate3d(0, 0, 0);    /* 下 → 上へスライドイン */
}

/* キーボード操作でも同じ見え方に（アクセシビリティ） */
.news-pagination__list .page-numbers:focus-visible{
  outline: 2px solid var(--news-accent);
  outline-offset: 2px;
}

/* li は a/span を直接フレックス内に並べる（DOMは維持） */
.news-pagination__item{
  display: contents;
}

/* ===========================
   TOPリンク（single-news.css の .news-toplink を流用）
   - ここではリンクの“中身”の挙動（矢印アニメ）を追加
   =========================== */
.news-archive__links{
  max-width: var(--news-max);
  margin: clamp(16px, 3.5vw, 40px) auto 0;
  text-align: center;
}

/* ▼ 矢印アニメ（hover時に右へスライドアウト＆左からイン） */
.news-toplink{
  display: inline-flex;               /* gap を安定適用／既存見た目は維持 */
  align-items: center;
  gap: 10px;                          /* 「TOP」と矢印の間隔 */
}

/* 矢印用の“窓”コンテナ：幅を1文字分に固定して中をマスク */
.news-toplink__arr{
  position: relative;
  display: inline-block;
  width: 1.1em;                       /* 矢印1文字ぶん＋少し余裕 */
  height: 1em;
  line-height: 1;
  overflow: hidden;                   /* はみ出した矢印は見せない（窓） */
}

/* 矢印は2枚重ね（::before / ::after）で入れ替え */
.news-toplink__arr::before,
.news-toplink__arr::after{
  content: attr(data-arr);            /* "→" を data 属性から取得 */
  position: absolute;
  inset: 0;                           /* コンテナいっぱいに配置 */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .32s ease;    /* 出入りの滑らかさ */
  will-change: transform;             /* ちらつき抑制（軽量） */
}

/* 初期：1枚目が中央、2枚目は左の外で待機 */
.news-toplink__arr::before{
  transform: translateX(0%);          /* 表示中 */
}
.news-toplink__arr::after{
  transform: translateX(-120%);       /* 窓の外（左） */
}

/* hover：1枚目→右へ退場、2枚目→中央へ入場 */
.news-toplink:hover .news-toplink__arr::before{
  transform: translateX(120%);        /* 窓の外（右）へスライドアウト */
}
.news-toplink:hover .news-toplink__arr::after{
  transform: translateX(0%);          /* 中央にスライドイン */
}

/* 既存の「塗りつぶしで白反転」スタイルに同期して矢印も色反転 */
.news-toplink,
.news-toplink *{
  transition: color .32s ease;        /* 文字色の反転も滑らかに */
}

/* ===========================
   動きが苦手な方向け：アニメ最小化
   - 既存の塗り／矢印アニメに加え、画像ズーム＆リビールも無効化
   =========================== */
@media (prefers-reduced-motion: reduce){
  .news-row__link::after,
  .news-pagination__list .page-numbers::after,
  .news-toplink__arr::before,
  .news-toplink__arr::after{
    transition: none;
  }
  .news-row__thumb-img,
  .news-row__noimg{
    transition: none;
    transform: none;
  }
  /* ★追加：リビールも無効化（常に表示・アニメなし） */
  .news-row.is-prepared,
  .news-row.is-inview{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ===========================
   レスポンシブ
   =========================== */
@media (max-width: 960px){
  .news-row__link{
    grid-template-columns: minmax(200px, 38%) 1fr;
  }
}
@media (max-width: 680px){
  .news-row__link{
    grid-template-columns: 1fr; /* SPは縦積み：サムネ→本文 */
  }
  .news-row__thumb-img,
  .news-row__noimg{
    aspect-ratio: 16/9; /* 画像はそのまま16:9で見せる */
  }
  .news-row__meta{
    justify-content: flex-start; /* SPは左寄せに変更（読みやすさ優先） */
  }
}