/* =========================================================
   archive-gallery.css — GALLERY 一覧（フルブリード4カラム）
   ポリシー：
     - パンくず → 中央見出し → カテゴリ並び → カードグリッド → ページネーション
     - 画像グリッドは“端から端まで”に広げる（フルブリード）
     - 4 → 3 → 2 カラム（レスポンシブ）。隙間は 0、アイキャッチは object-fit: cover
     - ホバー：#333オーバーレイ + メタ群フェードイン + 右下の正方形CTAが下から出現
     - ページネーションは“〇で囲む”。ホバーで下から#333スライド塗り。

   今回の修正：
     1) サムネ比率（--thumbRatio）を 4/3 に（正方形の縛りなし）
        → 4カラム時も高さが出すぎず、写真の見栄えと一覧性のバランスが良い
     2) PCで左右に余白が残る問題を解消
        → .gal-grid-wrap を「ビューポート幅(100vw)の箱」にして
           left/right:50% + margin ±50vw で“画面端まで”フルブリード化
        → さらに、スクロールバー幅を含まない 100dvw/100svw をサポートで上書き
     3) 初期表示エフェクト：タイトル/サブタイトル=下からスライド、カテゴリ=フェード、画像=フェード
     4) ★NEW：カードのテキストメタ（タイトル等）は「その場フェードイン」に変更

   追加（BLOG整合）：
     A) パンくず直下に出すタグチップ（解除リンク）の黒ピル型UIを追加（.gal-tagchip.ba-tagchips / .ba-chip）
     B) ページネーションの BLOG マークアップ（.ba-pagination …）にも対応（既存 .gal- はそのまま維持）
   ========================================================= */

:root{
  --thumbRatio: 4/3;      /* ★比率を 4:3 に。必要に応じ 3/2, 16/9 などへ変更OK */
  --overlayBg: #333;
  --accent: #fff;

  /* ★追加（今回の見切れ対策）：
     CTAの“下マージン”を変数化。translateY の計算と bottom で同じ値を使う。 */
  --galCtaGap: min(3vw, 24px);
}

/* ========== ① ギャラリーページだけ html のガター挙動を変更 ========== */
/* ページ内に .gal-archive が存在するとき “だけ” 適用（他ページへ波及しない） */
html:has(.gal-archive){
  /* 右ガターの“常時確保”をやめる → 右の空白が消える */
  scrollbar-gutter: auto;
}

.gal-archive{
  /* 固定ヘッダー（--stickyTop）分を避けつつ上に少し余白 */
  padding-top: calc(var(--stickyTop, 0px) + 24px);
  padding-bottom: 64px;
}
.gal-archive__inner{
  /* 通常のページ左右余白を持つ器。
     見出し・カテゴリ帯などはこの幅に収める。
     グリッドだけは下の .gal-grid-wrap で“画面端まで”広げる。 */
  padding-inline: var(--pageSide, 24px);
  max-width: var(--pageMax, 1400px);
  margin-inline: auto;
}

/* ========================
   パンくず
   ======================== */
.gal-breadcrumbs{
  margin-bottom: 16px;
  font-size: clamp(12px, 1.2vw, 14px);
}
.gal-bc__list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; gap: .5em; flex-wrap: wrap;
}
.gal-bc__item{
  color: #666;
}
.gal-bc__item a{
  color: inherit; text-decoration: none; border-bottom: 1px dotted #aaa;
}
.gal-bc__item.is-current{
  color: #999;
}

/* --- パンくずの区切り「 > 」をCSSだけで差し込み（先頭以外） --- */
.gal-bc__item + .gal-bc__item::before{
  content: ">";
  color: #aaa;
  opacity: .9;
  font-size: .9em;
  line-height: 1;
  display: inline-block;
  margin-right: .5em;
}
.gal-bc__item.is-current::before{
  color: #bbb;
  opacity: .8;
}

/* ========================
   タグチップ（BLOGと同等の黒ピル型）
   - パンくず直下に 1個だけ表示（#タグ名 ×）
   - PHP側で .gal-tagchip と .ba-tagchips / .ba-chip を併記して出力
   - ここでは BLOG 側CSSが未読込でも黒系で表示されるよう最低限を定義
   ======================== */
.gal-tagchip.ba-tagchips{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 6px 0 14px; /* パンくずとの間隔を少しだけ */
}
.ba-tagchips .ba-chip{
  display: inline-flex;
  align-items: center;
  gap: .25em;
  padding: .5em 1em;
  border-radius: 999px;
  border: 1px solid #333;
  color: #333;
  background: transparent;
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
  transition: background-color .25s ease, color .25s ease, transform .2s ease;
}
.ba-tagchips .ba-chip:hover{
  background: #333;
  color: #fff;
  transform: translateY(-1px);
}
.gal-chip__hash{ margin-right: .05em; }
.gal-chip__close{ margin-left: .25em; }

/* ========================
   見出し（中央揃え）
   ======================== */
.gal-archive-head{
  text-align: center;
  margin-bottom: 24px;
}
.gal-ttl{
  font-size: clamp(24px, 4.2vw, 40px);
  letter-spacing: .04em;
  margin: 0 0 .4em;
}
.gal-subttl{
  color: #555;
  font-size: clamp(14px, 1.8vw, 16px);
  line-height: 1.9;
  margin: 0;
}
.gal-subttl--term p{ margin: .4em 0; }

/* ========================
   カテゴリ並び（横並び）
   ======================== */
.gal-catrow{
  margin-block: 20px 24px;
}
.gal-catrow__list{
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.gal-chip{
  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;
}
.gal-chip:hover{ background: #333; color: #fff; transform: translateY(-1px); }

/* ========================
   グリッド（フルブリード）
   ======================== */
.gal-grid-wrap{
  width: 100vw;            /* 画面幅いっぱいの箱にする（親の max-width を無視できる） */
  position: relative;
  left: 50%; right: 50%;
  margin-left: -50vw;      /* 片側を画面半分ぶん外へ押し出す */
  margin-right: -50vw;     /* 反対側も同様 → 結果=左右端までピッタリ */
}
@supports (width: 100dvw){
  .gal-grid-wrap{ width: 100dvw; margin-left: -50dvw; margin-right: -50dvw; }
}
@supports (width: 100svw){
  .gal-grid-wrap{ width: 100svw; margin-left: -50svw; margin-right: -50svw; }
}

.gal-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);  /* PC：4カラム */
  gap: 0;                                  /* 隙間ゼロ（タイル密着） */
}
@media (max-width: 1199px){
  .gal-grid{ grid-template-columns: repeat(3, 1fr); } /* TB：3カラム */
}
@media (max-width: 699px){
  .gal-grid{ grid-template-columns: repeat(2, 1fr); } /* SP：2カラム */
}

/* ========================
   カード（画像は比率固定でクロップ）
   ======================== */
.gal-card{
  position: relative;
  overflow: hidden;        /* 子のはみ出しを隠す（CTAスライド用） */
  isolation: isolate;      /* オーバーレイ合成の安定化（z-index文脈を分離） */
}
.gal-card__link{
  display: block; color: inherit; text-decoration: none;
}
.gal-card__media{
  position: relative;
  aspect-ratio: var(--thumbRatio); /* ★ここで比率を一括制御（現状 4/3） */
  background: #f0f0f0;             /* サムネ無しの下地 */
}
.gal-card__img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transform: scale(1.001); /* 1px のスキ隠し（アンチエイリアス対策） */
}

/* NO IMAGE 時の簡易表示 */
.gal-card__media:has(img[alt="NO IMAGE"])::after{
  content: "NO IMAGE";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: #999; letter-spacing: .2em;
  font-size: clamp(14px, 2vw, 18px);
}

/* --- ホバーオーバーレイ --- */
.gal-card__overlay{
  position: absolute; inset: 0;
  background: var(--overlayBg);
  opacity: 0;
  transition: opacity .3s ease;
  z-index: 1;
}
.gal-card:hover .gal-card__overlay{ opacity: .9; }

/* --- メタ情報（ホバーでフェード） --- */
/* ▼★変更：下からの移動をやめて“その場フェードイン”。
      - 初期は opacity のみ 0（位置は不動）
      - transition から transform を外し、負担を軽減 */
.gal-card__meta{
  position: absolute; inset: 0;
  padding: min(3vw, 24px);
  display: grid;
  align-content: end;
  gap: .35em;
  color: var(--accent);
  z-index: 2;
  opacity: 0;                 /* 透明 → 不透明 のみで表示 */
  transform: none;            /* ★固定（移動しない） */
  transition: opacity .32s ease;
  /* will-change は opacity のみ。余計なレイヤー昇格を避ける */
  will-change: opacity;
}
.gal-card:hover .gal-card__meta{
  opacity: 1;                 /* ★フェードインのみ */
  /* transform の指定は不要（その場のまま） */
}

.gal-card__cats{ font-size: clamp(12px, 1.4vw, 13px); opacity: .9; letter-spacing: .06em; }
.gal-card__title{ font-size: clamp(14px, 2.2vw, 18px); line-height: 1.4; margin: .1em 0 .1em; }
/* ▼タイポ修正：fontサイズ → font-size（見た目の変更はありません） */
.gal-card__tags{ font-size: clamp(11px, 1.3vw, 12px); opacity: .85; }
.gal-card__date{ font-size: clamp(11px, 1.3vw, 12px); opacity: .9; }

/* --- 右下の正方形CTA --- */
.gal-card__cta{
  position: absolute;
  right: min(3vw, 24px);
  /* ★変更：下マージンを変数化し、bottom と translateY の両方で参照 */
  bottom: var(--galCtaGap);
  width: 40px; height: 40px;
  border: 2px solid var(--accent);
  border-radius: 6px;
  color: var(--accent);
  display: grid; place-items: center;
  z-index: 3;

  /* ★重要（見切れ完全解消）：
     初期は “自分の高さ100% + 下マージン + 4px(境界/サブピクセル対策)” だけ
     さらに下げて、カード外に**完全に隠す**。 */
  transform: translateY(calc(100% + var(--galCtaGap) + 4px)) translateZ(0);
  transition: transform .35s cubic-bezier(.2,.8,.2,1) .05s;
  will-change: transform;
  background: transparent;
}
.gal-card__cta-icon{ width: 22px; height: 22px; }
.gal-card:hover .gal-card__cta{ transform: translateY(0) translateZ(0); }

/* --- 既存の in-view アニメ土台（JSが .has-io を付与する前提のフェールセーフ） --- */
.fx-item{ opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }
.has-io .fx-item{ opacity: 0; transform: translateY(10px); }
.has-io .fx-item.is-inview{ opacity: 1; transform: none; }

/* ========================
   ページネーション（旧・互換用）
   ※ PHP は .ba-pagination マークアップに切替済みだが、
     既存の .gal- 系を使う場面が残っても破綻しないよう残置。
   ======================== */
.gal-pagination{ margin-top: 28px; }
.gal-pager{
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap;
}

/* ------------------------------------------------------------------
   ★修正：BLOG一覧のデザインに統一（旧 .gal- 版）
   ------------------------------------------------------------------ */
:root{
  --galPagerDot: 40px;
}
.gal-pager__item .page-numbers{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  line-height: 1;
  text-decoration: none;
  border: none;
  background: none;
  color: #333;
  font-size: 14px;
  isolation: isolate;
  overflow: visible;
  transition: color .28s ease, transform .1s ease;
}
.gal-pager__item .page-numbers::before{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: var(--galPagerDot);
  height: var(--galPagerDot);
  border-radius: 999px;
  background: #333;
  transform: translate(-50%, -40%) scale(.6);
  opacity: 0;
  z-index: -1;
  transition: transform .28s ease, opacity .28s ease;
  will-change: transform, opacity;
}
.gal-pager__item a.page-numbers:hover{ color: #fff; }
.gal-pager__item a.page-numbers:hover::before{
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
.gal-pager__item .page-numbers.current{ color: #fff; }
.gal-pager__item .page-numbers.current::before{
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
.gal-pager__item .page-numbers.prev,
.gal-pager__item .page-numbers.next{
  padding-inline: 10px;
}
.gal-pager__item .page-numbers:active{ transform: translateY(1px); }
.gal-pager__item .page-numbers:focus-visible{
  outline: 2px dashed rgba(51,51,51,.6);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------
   ★追加：BLOG マークアップ（.ba-pagination）にも対応させる移植版
   - PHP を .ba-pagination に変更済みでも、archive-blog.css を読まなくてOK
   ------------------------------------------------------------------ */
.ba-pagination{ margin-top: 28px; }
.ba-pagination__list{
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap;
}
.ba-pagination__item .page-numbers{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  line-height: 1;
  text-decoration: none;
  border: none;
  background: none;
  color: #333;
  font-size: 14px;
  isolation: isolate;
  overflow: visible;
  transition: color .28s ease, transform .1s ease;
}
.ba-pagination__item .page-numbers::before{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: var(--galPagerDot, 40px);
  height: var(--galPagerDot, 40px);
  border-radius: 999px;
  background: #333;
  transform: translate(-50%, -40%) scale(.6);
  opacity: 0;
  z-index: -1;
  transition: transform .28s ease, opacity .28s ease;
  will-change: transform, opacity;
}
.ba-pagination__item a.page-numbers:hover{ color: #fff; }
.ba-pagination__item a.page-numbers:hover::before{
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
.ba-pagination__item .page-numbers.current{ color: #fff; }
.ba-pagination__item .page-numbers.current::before{
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
.ba-pagination__item .page-numbers.prev,
.ba-pagination__item .page-numbers.next{
  padding-inline: 10px;
}
.ba-pagination__item .page-numbers:active{ transform: translateY(1px); }
.ba-pagination__item .page-numbers:focus-visible{
  outline: 2px dashed rgba(51,51,51,.6);
  outline-offset: 2px;
}

/* ========================
   空表示
   ======================== */
.gal-empty{
  text-align: center; color: #666; padding: 48px 0;
  font-size: 14px;
}

/* （オプション）SPだけ比率を少し縦寄りにしたい場合の例：
@media (max-width: 699px){
  :root{ --thumbRatio: 3/2; }  /* 例：スマホでは3:2にして少し横長に */
}
*/

/* =========================================================
   ② 最終補正（この1ブロックだけ追加・上書き）
   目的：右の余白を確実に消す（安全な100vwでセンタリング）
   ========================================================= */
.gal-archive .gal-grid-wrap{
  /* “安全100vw” = 100vw - スクロールバー幅（common.css が提供） */
  width: calc(100vw - var(--sbw, var(--sbw-js, 0px)));
  max-width: none;

  /* transform 基準の中央寄せ（ズレない） */
  position: relative;
  left: 50%;
  transform: translateX(-50%);

  /* 旧式センタリングは無効化 */
  right: auto;
  margin-left: 0;
  margin-right: 0;
}

/* =========================================================
   ③ 初期表示エフェクト（CSSのみ／JS不要）
   - タイトル/サブタイトル：下からスライドイン
   - カテゴリ：フェードイン（軽い段差）
   - 画像：フェードイン（列ごとに段差）
   ※ レイアウト値は触らず opacity/transform のみ。フルブリードは維持。
   ========================================================= */

/* キーフレーム */
@keyframes gal-slideUpIn{
  from{ opacity: 0; transform: translateY(18px); }
  to  { opacity: 1; transform: none; }
}
@keyframes gal-fadeIn{
  from{ opacity: 0; }
  to  { opacity: 1; }
}

/* 見出し：下からスライド（遅延でリズム付け） */
.gal-archive-head .gal-ttl{
  will-change: transform, opacity;
  animation: gal-slideUpIn .55s cubic-bezier(.2,.8,.2,1) .02s both;
}
.gal-archive-head .gal-subttl{
  will-change: transform, opacity;
  animation: gal-slideUpIn .55s cubic-bezier(.2,.8,.2,1) .12s both;
}

/* カテゴリ：アイテムを順にフェードイン（小刻み遅延） */
.gal-catrow__item{
  opacity: 0;
  will-change: opacity;
  animation: gal-fadeIn .5s ease-out both;
}
.gal-catrow__item:nth-child(1){ animation-delay: .04s; }
.gal-catrow__item:nth-child(2){ animation-delay: .08s; }
.gal-catrow__item:nth-child(3){ animation-delay: .12s; }
.gal-catrow__item:nth-child(4){ animation-delay: .16s; }
.gal-catrow__item:nth-child(5){ animation-delay: .20s; }
.gal-catrow__item:nth-child(6){ animation-delay: .24s; }
.gal-catrow__item:nth-child(7){ animation-delay: .28s; }
.gal-catrow__item:nth-child(8){ animation-delay: .32s; }

/* 画像：各列で少しずつ遅らせてフェードイン（4列想定の周期） */
.gal-card__img{
  opacity: 0;
  will-change: opacity;
  animation: gal-fadeIn .6s ease-out both;
}
/* 1列目 → 2列目 → 3列目 → 4列目 の順にほんの少し遅延 */
.gal-grid > .gal-card:nth-child(4n+1) .gal-card__img{ animation-delay: .05s; }
.gal-grid > .gal-card:nth-child(4n+2) .gal-card__img{ animation-delay: .10s; }
.gal-grid > .gal-card:nth-child(4n+3) .gal-card__img{ animation-delay: .15s; }
.gal-grid > .gal-card:nth-child(4n)   .gal-card__img{ animation-delay: .20s; }

/* モーション配慮：ユーザーが軽減を希望している場合は即時表示 */
@media (prefers-reduced-motion: reduce){
  .gal-archive-head .gal-ttl,
  .gal-archive-head .gal-subttl,
  .gal-catrow__item,
  .gal-card__img{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* ★ページネーションのアニメも最小化（円の出現を即時切替） */
  .gal-pager__item .page-numbers,
  .gal-pager__item .page-numbers::before,
  .ba-pagination__item .page-numbers,
  .ba-pagination__item .page-numbers::before{
    transition: none !important;
  }
}

/* ========================
   レスポンシブ
   ======================== */
@media (max-width: 960px){
  .gal-grid-wrap{ /* ここは既存のまま */ }
}
@media (max-width: 699px){
  .gal-grid{ grid-template-columns: repeat(2, 1fr); } /* SP：2カラム（再掲） */
}