/* =====================================================================
   lisas atelier ― #works 作品の3列の一覧（gallery/works）
   写真担当。読み込む順：tokens.css → base.css → ../lightbox/style.css → この style.css
   - ふつうのマスは base.css の .ph .ph--3x4 .ph--flat（縦 3:4・角なし。切る位置は --pos）。ここには並べ方だけを書く。
   - Instagram と同じ3列。すき間 --grid-gap（iPhone 3px／PC 6px）。iPhone では画面の端まで。
   - 分けた1枚写真（.works-split）：3列の幅いっぱいに1枚を全体のまま置き、上に一覧のすき間と同じ色（--color-bg）・
     太さ（--grid-gap）の線を重ねる。まとまりの高さは、縦 3:4 のマスを split の数だけ並べた高さ（ふつうの段とそろう）。
     写真は加工しない（線を重ねるだけ。filter なし）。
   ===================================================================== */

.works-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin-inline: calc(var(--gutter) * -1); /* iPhone：.wrap の左右の余白をこえて、画面の端まで */
}
@media (min-width: 768px) {
  .works-grid { margin-inline: 0; }
}
.works-item { min-width: 0; }

/* ---------- 分けた1枚写真（split：3x2＝6マス・3x3＝9マス） ---------- */
.works-split { grid-column: 1 / -1; }

.works-split-frame {                       /* 押せる枠（写真がないときは無地の枠） */
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--color-mat);
}
button.works-split-frame { cursor: zoom-in; }
.works-split-frame > img {                 /* 1枚の写真を全体に（切れるのは上下のわずかな所だけ） */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}
.works-split-cells {                       /* 線：一覧と同じ3列・同じすき間のマスを、写真の上に重ねる */
  position: relative;                      /* 写真（absolute）より上に出す */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  pointer-events: none;
}
.works-split-cell {
  aspect-ratio: var(--ratio-3x4);
  box-shadow: 0 0 0 var(--grid-gap) var(--color-bg); /* すき間ぶんだけ地の色を広げる＝一覧のすき間と同じ線。外側は枠で切れる */
}
.works-split-note {                        /* 写真の下の一言（copy.md） */
  padding: var(--space-2) var(--gutter) var(--space-3);
  text-align: center;
}