/* ==========================================================================
   gallery.css
   配置: public/assets/gallery.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. サムネイル一覧（グリッド）
   -------------------------------------------------------------------------- */
.gallery {
  /* 見た目を変えたいときはここの値だけ触ればOK */
  --gallery-min: 140px;
  /* サムネイルの最小幅（列数はこれで自動決定） */
  --gallery-gap-x: 24px;
  --gallery-gap-y: 20px;
  --gallery-ratio: 5 / 4;
  --gallery-radius: 4px;
  --fx-distance: 80px;
  /* 飛んでくる距離 */
  --fx-duration: 600ms;
  /* data-duration が無いときの既定値 */

  list-style: none;
  margin: 0;
  padding: 4px 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--gallery-min), 1fr));
  gap: var(--gallery-gap-y) var(--gallery-gap-x);
  /* 左右から飛んでくる最中に横スクロールバーが出ないようにする */
  overflow-x: clip;
}

.gallery__item {
  margin: 0;
  padding: 0;
  aspect-ratio: var(--gallery-ratio);
}

.gallery__thumb {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--gallery-radius);
  background: #e5e7eb;
  /* 画像読み込み前のプレースホルダ色 */
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}

.gallery__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

@media (hover: hover) {
  .gallery__thumb:hover img {
    transform: scale(1.05);
  }
}

.gallery__thumb:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 3px;
}

@media screen and (max-width: 640px) {
  .gallery {
    --gallery-min: 100px;
    --gallery-gap-x: 16px;
    --gallery-gap-y: 20px;
    --fx-distance: 48px;
    padding: 8px;
  }

  .gallery__thumb {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  }
}

/* 480px以上640px未満 */
@media screen and (min-width: 480px) and (max-width: 640px) {
  .gallery {
    --gallery-min: 105px;
    --gallery-gap-x: 12px;
    --gallery-gap-y: 16px;
    padding: 6px;
  }
}

/* 430px以上479px未満（iPhone Plus/Max系など） */
@media screen and (min-width: 430px) and (max-width: 479px) {
  .gallery {
    --gallery-min: 96px;
    --gallery-gap-x: 10px;
    --gallery-gap-y: 14px;
    padding: 6px;
  }
}

/* 390px以上429px未満（iPhone 12/13/14/15/16 Pro系など）: 3列維持 */
@media screen and (min-width: 390px) and (max-width: 429px) {
  .gallery {
    --gallery-min: 88px;
    --gallery-gap-x: 8px;
    --gallery-gap-y: 12px;
    padding: 5px;
  }
}

/* 375px以上389px未満（iPhone SE/7/8系など）: 3列維持 */
@media screen and (min-width: 375px) and (max-width: 389px) {
  .gallery {
    --gallery-min: 82px;
    --gallery-gap-x: 7px;
    --gallery-gap-y: 10px;
    padding: 4px;
  }
}

/* 360px以上374px未満（Android標準端末など）: 3列維持 */
@media screen and (min-width: 360px) and (max-width: 374px) {
  .gallery {
    --gallery-min: 76px;
    --gallery-gap-x: 6px;
    --gallery-gap-y: 10px;
    padding: 4px;
  }
}

/* 359px以下（超小型端末） */
@media screen and (max-width: 359px) {
  .gallery {
    --gallery-min: 70px;
    --gallery-gap-x: 5px;
    --gallery-gap-y: 8px;
    padding: 3px;
  }
}

/* --------------------------------------------------------------------------
   2. スクロール連動の「飛んでくる」演出
   JS が .is-enhanced を付けたときだけ初期状態を隠す
   → JS が動かない環境でも画像は普通に表示される
   -------------------------------------------------------------------------- */
.gallery.is-enhanced .gallery__item[data-fx] .gallery__thumb {
  opacity: 0;
  transition:
    opacity 400ms ease-out,
    transform var(--fx-duration) cubic-bezier(0.22, 0.8, 0.3, 1);
}

.gallery.is-enhanced .gallery__item[data-fx="fly-in-left"] .gallery__thumb {
  transform: translateX(calc(var(--fx-distance) * -1));
}

.gallery.is-enhanced .gallery__item[data-fx="fly-in-right"] .gallery__thumb {
  transform: translateX(var(--fx-distance));
}

.gallery.is-enhanced .gallery__item[data-fx="fly-in-bottom"] .gallery__thumb {
  transform: translateY(var(--fx-distance));
}

.gallery.is-enhanced .gallery__item[data-fx="fly-in-top"] .gallery__thumb {
  transform: translateY(calc(var(--fx-distance) * -1));
}

.gallery.is-enhanced .gallery__item[data-fx].is-visible .gallery__thumb {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   3. ライトボックス
   <dialog> を使うので Esc・フォーカストラップ・背面の操作無効化はブラウザ任せ
   -------------------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(14, 15, 17, 0.97);
  color: #fff;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.lightbox.is-open {
  opacity: 1;
}

.lightbox::backdrop {
  background: transparent;
}

/* display を指定しているボタン等でも hidden 属性を効かせる */
.lightbox [hidden] {
  display: none !important;
}

.lightbox__stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 16px 76px;
  /* 横スワイプは JS で処理し、縦スクロールとピンチズームはブラウザに任せる */
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
}

.lightbox__img {
  display: block;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  -webkit-user-drag: none;
}

.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.lightbox__btn:hover {
  background: rgba(255, 255, 255, 0.24);
}

.lightbox__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.lightbox__btn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lightbox__close {
  top: max(12px, env(safe-area-inset-top));
  right: 12px;
}

.lightbox__prev,
.lightbox__next {
  top: 50%;
  margin-top: -22px;
}

.lightbox__prev {
  left: 12px;
}

.lightbox__next {
  right: 12px;
}

.lightbox__meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 72px calc(14px + env(safe-area-inset-bottom));
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.5;
  pointer-events: none;
}

.lightbox__caption {
  margin: 0;
}

.lightbox__count {
  margin: 0;
  color: rgba(255, 255, 255, 0.65);
  font-variant-numeric: tabular-nums;
}

@media screen and (max-width: 640px) {
  .lightbox__stage {
    padding: 56px 8px 72px;
  }

  .lightbox__btn {
    width: 40px;
    height: 40px;
  }

  .lightbox__prev,
  .lightbox__next {
    margin-top: -20px;
    background: rgba(0, 0, 0, 0.35);
  }

  .lightbox__prev {
    left: 6px;
  }

  .lightbox__next {
    right: 6px;
  }

  .lightbox__meta {
    padding-left: 56px;
    padding-right: 56px;
  }
}

/* --------------------------------------------------------------------------
   4. 視差・動きを減らす設定の人には演出を切る
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

  .gallery__thumb img,
  .lightbox {
    transition: none;
  }
}