/* =============================================================
   PINE GROVE - City Builder Widget スタイル
   既存 style.css とは独立。クラス名は cb- で隔離。
   ============================================================= */

/* --- ウィジェット本体(共通) ---------------------------------- */
.city-builder {
  position: relative;
  touch-action: pan-y;  /* 縦スクロールはブラウザに任せる。タップは下のJSで判定 */
  /* mask-image で四辺をフェード。背景色に依存せず、どんな背景でも馴染む */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 18%, #000 86%, transparent 100%),
    linear-gradient(to right,  transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0%, #000 18%, #000 86%, transparent 100%),
    linear-gradient(to right,  transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-composite: intersect;
}
.city-builder canvas { display: block; }

/* --- 1. ヒーロー背景フルワイド型 ------------------------------
   「私たちは…」セクションの背景いっぱいに敷く             */
.cb-bg-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: auto;   /* 余白クリックを受ける */
}
.cb-bg-section {
  position: relative;     /* 子の絶対配置の基準 */
}
.cb-bg-section > .container {
  position: relative;
  z-index: 1;             /* テキストはウィジェットより前面 */
  pointer-events: none;   /* テキスト部はクリックを透過 → 背後の街に届く */
}
.cb-bg-section > .container a {
  pointer-events: auto;   /* リンクだけは普通に押せる */
}

/* --- 2. 見出し横型 -------------------------------------------
   セクション見出しの背後にグリッドを横長に敷く。タイトルの
   fade-inアニメから独立させるためグリッドはabsolute配置。
   タイトル領域もクリック可(pointer-eventsで透過)。           */
.cb-head-row {
  position: relative;
}
.cb-head-row .cb-head-title {
  position: relative;
  z-index: 2;
  pointer-events: none;          /* 背後のグリッドにクリックを通す */
}
.cb-head-row .cb-head-title .en-part {
  pointer-events: auto;          /* テキストシャッフルのhover効果は残す */
  width: fit-content;            /* テキスト幅だけブロックし、横の余白はグリッドに通す */
}
.cb-head-row .city-builder {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  height: 300px;
  z-index: 1;
  pointer-events: auto;
}

/* スマホ: グリッドは見出しの下に縦並びで通常配置 */
@media (max-width: 768px) {
  .cb-head-row .city-builder {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    width: 100%;
    height: 170px;
    margin-top: 16px;
  }
}