/* =====================================================================
   lisas atelier ― 小部屋の写真（gallery/room）
   写真担当。読み込む順：tokens.css → base.css → ../lightbox/style.css → この style.css
   - slot（data-slot="room-gallery"）は、小部屋の幅いっぱい（左右の余白なし）に置く前提。
     文字・チップ・サムネイルの左右の余白（--gutter）はこの部品が付け、大きな写真は画面の端まで（角なし）。
   - PC（1024px〜）は小部屋の左の列に置く前提。列の余白は小部屋（HERO担当）にまかせ、大きな写真に角を付ける。
   - 写真の枠は base.css の .ph（大きな写真・無地の枠は .ph--1x1 .ph--flat、サムネイルは .ph--1x1、.ph--empty）。
     ここには並べ方・入れかえ・参考番号の行だけを書く。
   ===================================================================== */

.room-gallery {
  --room-gallery-pad: var(--gutter);
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}
@media (min-width: 1024px) {
  .room-gallery { --room-gallery-pad: 0px; }
}
.room-gallery-title,
.room-gallery-question,
.room-gallery-notes,
.room-gallery-done,
.room-gallery-code {
  padding-inline: var(--room-gallery-pad);
}

/* ---------- 好みの選び方（photos.json の styles があるジャンル）：すべて／好み1／好み2 ---------- */
.room-gallery-styles {
  display: grid;
  min-width: 0;
}
.room-gallery-chips {
  flex-wrap: nowrap;                       /* 入らないときは横に流す */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  contain: inline-size;                    /* 中身の幅で小部屋を広げない（横にはみ出さない） */
  padding: var(--space-2) var(--room-gallery-pad); /* 上下はフォーカスの線が切れないように */
  scrollbar-width: none;
}
.room-gallery-chips::-webkit-scrollbar { display: none; }
.room-gallery-chips > .chip { flex: none; }
.room-gallery-done {
  min-height: calc(var(--fs-xs) * var(--lh-snug)); /* 選んだあとの一言が出ても、写真が下に動かないように */
  margin-top: var(--space-1);
}

/* ---------- 大きな写真：正方形 1:1（写真はどれも正方形なので、切らずに全部。台紙も出ない） ---------- */
.room-gallery-stage { overflow: hidden; } /* iPhone：画面の端まで・角なし */
.room-gallery-stage > [hidden] { display: none; } /* 写真の枠と無地の枠の出し分け（.ph の display より強く） */
@media (min-width: 1024px) {
  .room-gallery-stage { border-radius: var(--radius-photo); }
}
.room-gallery-layer {                     /* 2枚を重ねて、薄く入れかえる（opacity・--dur-base） */
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.room-gallery-layer.is-front { opacity: 1; }
.room-gallery-layer:not([src]) { visibility: hidden; }

/* ---------- 参考番号・作品番号（大きな写真のすぐ下に小さく。例：参考番号 HF03） ----------
   言葉は補足の色、番号は文字の色の太字。写真との間は --space-2（.room-gallery の gap --space-3 から --space-1 詰める） */
.room-gallery-code {
  margin-top: calc(var(--space-1) * -1);
  min-height: calc(var(--fs-sm) * var(--lh-tight));
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-body);
  color: var(--color-text-sub);
}
.room-gallery-code[hidden] { display: none; }
.room-gallery-code.is-blank { visibility: hidden; } /* その写真に番号がないとき：場所だけ空ける */
.room-gallery-code-num {
  color: var(--color-text);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

/* ---------- サムネイルの帯：正方形 --thumb・すき間 --space-2・選んだものは 2px の輪 ---------- */
.room-gallery-thumbs {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  contain: inline-size;                    /* 8枚あっても小部屋を広げない（帯の中で横に流す） */
  padding: var(--space-1) var(--room-gallery-pad); /* 上下は選んだ輪が切れないように */
  scroll-padding-inline: var(--room-gallery-pad);
  scrollbar-width: none;
}
.room-gallery-thumbs[hidden] { display: none; }
.room-gallery-thumbs::-webkit-scrollbar { display: none; }
.room-gallery-thumbs > li {
  flex: none;
  width: var(--thumb);
}
button.room-gallery-thumb {
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.room-gallery-thumb[aria-current="true"] {
  box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-text);
}

@media (hover: hover) and (pointer: fine) {
  /* マウスでは横に流しにくいので、折り返して全部を見せる */
  .room-gallery-chips,
  .room-gallery-thumbs {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

@media (min-width: 1024px) {
  /* 列の端にそろえたまま、輪とフォーカスの線が切れないように少しだけ外へ広げる */
  .room-gallery-chips,
  .room-gallery-thumbs {
    margin-inline: calc(var(--space-1) * -1);
    padding-inline: var(--space-1);
    scroll-padding-inline: var(--space-1);
  }
}