/*
 * Component: Gallery 帯 — thai-massage
 * Spec: DESIGN.md §6 + docs/thai-massage-structure-draft.md (HOME ギャラリー帯 3〜4枚)
 * 由来: hydrogen portfolio.css のグリッド構造を流用 (CLAUDE.md ルール7・構造のみ)
 *
 * 振る舞い:
 *   - index の「ギャラリー帯」。施術空間/雰囲気を伝える 3〜4 枚の写真帯。
 *   - PC: auto-fill グリッド (画像枚数に応じて自然に並ぶ・gap:0 full-bleed)
 *   - モバイル (≤768px): 2 列
 *   - 各マス aspect-ratio 1:1、hover で img を 1.05 倍 + 半透明オーバーレイ
 *
 * 可変枚数: gallery は 1〜6 枚 (schema)。auto-fill で枚数に追従。
 */

.gallery {
  margin: 0;
  padding: 0;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

.gallery-grid > li {
  margin: 0;
}

.gallery-item {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  text-decoration: none;
  color: var(--color-text-on-dark);
}

.gallery-item picture {
  display: block;
  width: 100%;
  height: 100%;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--easing-standard);
}

.gallery-item:hover img,
.gallery-item:focus-visible img {
  transform: scale(1.05);
}

.gallery-overlay {
  position: absolute;
  inset: 0;
  background: var(--color-overlay-strong);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-xs);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--easing-standard);
  padding: var(--gap-md);
  text-align: center;
}

.gallery-item:hover .gallery-overlay,
.gallery-item:focus-visible .gallery-overlay {
  opacity: 1;
}

.gallery-caption {
  font-family: var(--font-display);
  font-size: var(--fs-body-sm);
  letter-spacing: var(--tracking-wide);
  opacity: 0.9;
  margin: 0;
}

@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-item img {
    transition: none;
  }
  .gallery-item:hover img {
    transform: none;
  }
}