/* ===== TB Appeal Grid：「レンガの魅力」12枠レンガ柱ギャラリー本体のみ =====
   タイトル・サブタイトル・下部ボタンはWordPress側（Swellネイティブブロック）が担当するため、
   ここでは .piers 本体のインタラクティブ部分のみを扱う。
   .tb-grid 配下にすべて閉じ込め、サイト全体のCSSに影響しないようスコープしている。

   2026-10-09 変更：3列→4列（レンガウォールを追加）。各列の中段の縦タイトルと半透明の帯を廃止し、
   写真3段の下に横組みのタイトル行を追加（タイトル行は列と一緒に横方向だけ伸び縮みする）。

   ・外側：4列共有のグリッド。ホバー列＝他の列の2倍（40% / 20% / 20% / 20%）。タテ境界線は連続して動く
   ・各列の中：写真3段の独立グリッド（.pier-cells）。（タイトル行は 2026-10-22 に廃止）
     写真3段はホバーしたセルの行位置に応じてリサイズ。
     中段ホバー=25/50/25、端ホバー=ホバー行50%・隣接中段17%・反対端33%
   ・ホバーしていない列の内部（横線）は常に33%/33%/33%のまま。列をまたいで横線は連動しない。
   ・タテ方向：写真3段の高さ（--tb-grid-h）は従来どおり。タイトル行の分だけ全体が高くなる。

   2026-10-22 変更：写真の下のタイトル行（4段目）を廃止し、写真3段のみにした。
   ホバー時の動きを、ややゆっくり（0.45秒→0.9秒）・滑らかな加減速に変更。
===== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap');

.tb-grid{
  /* 写真の読み込み前に見える地色（白系の淡い面） */
  --card: var(--tb-card, #eeece8);
  /* 写真3段の高さ（従来と同じ） */
  --tb-grid-h: 640px;
  /* 親コンテナ（Gutenbergのショートコードブロックはwide/full非対応で、
     テーマの標準コンテンツ幅に収まってしまうため）から強制的に抜け出し、
     ビューポート幅いっぱいに広げる。
     ※ 幅のクラス（tb-w-wide など）を付けたグループの中では、base.css がこの指定を解除する */
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
.tb-grid, .tb-grid *{ box-sizing:border-box; }
.tb-grid img{ max-width:100%; display:block; }

.tb-grid .piers{
  max-width:1680px;margin:0 auto;padding:0 4vw;
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr;
  gap:3px; position:relative; /* 列の間（タテの隙間）も、段の間と同じ3px（2026-10-10） */
  transition:grid-template-columns .9s cubic-bezier(.33,0,.15,1);
}

/* 1列＝写真3段 */
.tb-grid .pier-col{
  position:relative; min-width:0; overflow:hidden; border-radius:0;
  display:flex; flex-direction:column;
}
.tb-grid .pier-cells{
  height:var(--tb-grid-h);
  display:grid;
  grid-template-rows:1fr 1fr 1fr; /* fr指定：隙間3pxを除いた高さを分けるので、下の写真が切れない */
  gap:3px;
  transition:grid-template-rows .9s cubic-bezier(.33,0,.15,1);
}

.tb-grid .cell{ position:relative; overflow:hidden; border-radius:0; cursor:default; background:var(--card); } /* 写真はリンクではないので矢印のまま（2026-10-20） */
.tb-grid .cell img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.85) brightness(.82); transition:filter .7s ease; opacity:1;
}
.tb-grid .cell.is-hover img{ filter:none; }

/* ホバー中の写真そのものの中に出る、横組みの説明コピー */
.tb-grid .cell-cap{
  position:absolute; inset:auto 0 0 0; z-index:3; pointer-events:none;
  padding:18px 20px; opacity:0; transform:translateY(8px);
  transition:opacity .6s ease .15s, transform .7s cubic-bezier(.33,0,.15,1) .15s;
  background:linear-gradient(0deg, rgba(13,9,6,.86), transparent 68%);
}
.tb-grid .cell.is-hover .cell-cap{ opacity:1; transform:translateY(0); }
.tb-grid .cell-cap p{
  margin:0; color:#fff; font-weight:700;
  font-family:'Zen Kaku Gothic New',sans-serif; font-size:15.2px; line-height:1.55; /* 2026-10-10 19px→80% */
}
.tb-grid .cell-cap .en{
  display:block; font-family:'Cormorant Garamond',serif; letter-spacing:.2em; font-size:12px;
  color:#fff; margin-bottom:6px; text-transform:uppercase; font-weight:700;
}

@media(max-width:820px){
  .tb-grid .piers{
    grid-template-columns:1fr !important;
    gap:20px; padding:0 6vw;
  }
  .tb-grid .pier-cells{
    grid-template-rows:none !important;
    height:auto; gap:4px;
  }
  .tb-grid .cell{ aspect-ratio:16/10; }
  .tb-grid .cell-cap p{ font-size:12.8px; } /* 16px→80% */
}

@media(max-width:560px){
  .tb-grid .piers{ padding:0 5vw; gap:18px; }
  .tb-grid .cell{ aspect-ratio:4/3; }
  .tb-grid .cell-cap{ padding:14px 16px; }
  .tb-grid .cell-cap p{ font-size:11.6px; line-height:1.5; } /* 14.5px→80% */
  .tb-grid .cell-cap .en{ font-size:11px; }
}

/* タッチ端末（マウスホバーができない）では、詳細コピーをホバー待ちにせず
   常に読める状態にしておく（タップでの一時的な表示に依存しない） */
@media (hover:none){
  .tb-grid .cell-cap{ opacity:1; transform:none; }
}

@media (prefers-reduced-motion:reduce){
  .tb-grid .piers, .tb-grid .pier-cells{ transition:none; }
}