/* =========================================================
   フォト：横に流れるコラージュ
   公開サイトと管理画面のプレビューで共用する。
   写真の位置・大きさは「帯の高さ 740 を基準にした数値」で持ち、
   --u（帯の高さ / 740）を掛けて実際の大きさにする。
   ========================================================= */

.collage{
  --band: clamp(400px, 50vw, 740px);
  --u: calc(var(--band) / 740);
  position:relative; height:var(--band); overflow:hidden;
  cursor:grab; touch-action:pan-y;
  user-select:none; -webkit-user-select:none;
}
.collage.is-drag{ cursor:grabbing; }
.collage__track{ position:absolute; left:0; top:0; height:100%; display:flex; will-change:transform; }
.collage__set{ position:relative; height:100%; flex:none; }

.cph{
  position:absolute; margin:0;
  border:2px solid var(--ink); border-radius:4px; overflow:hidden;
  background:var(--paper-2);
  box-shadow:6px 6px 0 var(--ink);
  transform:rotate(var(--rot, 0deg));
  transition:transform .3s cubic-bezier(.2,.9,.2,1), box-shadow .3s;
  cursor:zoom-in;
}
.cph.acc{ box-shadow:6px 6px 0 var(--accent); }
.cph img{
  width:100%; height:100%; object-fit:cover; display:block;
  pointer-events:none; -webkit-user-drag:none;
  transition:filter .5s ease;
}
/* マウスで見る端末は白黒で、乗せた写真だけカラー。スマホは最初からカラー */
@media (hover:hover) and (pointer:fine){
  .cph img{ filter:grayscale(1); }
  .cph:hover img{ filter:none; }
  .cph:hover{ z-index:999 !important; box-shadow:10px 10px 0 var(--accent); transform:rotate(0deg) scale(1.04); }
}
.collage.is-color .cph img{ filter:none; }

.collage__hint{
  margin-top:14px; font-size:12px; letter-spacing:.06em; color:var(--ink-soft);
}

/* 拡大表示 */
.clb{
  position:fixed; inset:0; z-index:10000;
  display:grid; place-items:center; padding:18px;
  background:rgba(28,19,13,.94);
  opacity:0; pointer-events:none; transition:opacity .25s;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.clb.is-open{ opacity:1; pointer-events:auto; }
.clb img{
  max-width:100%; max-height:calc(100vh - 100px); max-height:calc(100dvh - 100px);
  border:2px solid var(--paper); border-radius:4px; box-shadow:8px 8px 0 var(--accent);
  transform:scale(.96); transition:transform .25s;
}
.clb.is-open img{ transform:none; }
.clb button{
  position:absolute; width:52px; height:52px; border-radius:50%;
  border:2px solid var(--paper); background:rgba(28,19,13,.5); color:var(--paper);
  font:inherit; font-size:22px; line-height:1; cursor:pointer;
  touch-action:manipulation;
}
.clb__x{ top:14px; right:14px; }
.clb__prev, .clb__next{ top:50%; margin-top:-26px; }
.clb__prev{ left:12px; } .clb__next{ right:12px; }
.clb__count{ position:absolute; bottom:18px; left:0; right:0; text-align:center; color:var(--paper); font-size:12px; letter-spacing:.12em; }