/* 店舗カードの写真ギャラリー（写真が2枚以上のときだけ組み立てられる）。
   1枚の店舗は従来どおり <img> が1枚あるだけなので、この指定は当たらない。
   ※ このファイルは store-slider.css より後に読み込むこと。
      16:10 の指定を上書きするため、順序が逆だと効かない。 */

.store-gallery {
  position: relative;
}

.store-gallery .sg-track {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /* 親（店舗の横送り）とスワイプを取り合わないようにする。
     contain にすると、最後の写真まで来ても親側へスクロールが連鎖しない。
     写真の上で始めた指の動きは写真だけを動かす。 */
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* scroll-behavior はここで指定しない。
     「視差効果を減らす」設定の端末では CSS の smooth 指定があると
     プログラムからのスクロールが無効化されるため、JS 側で分岐する。 */
}

.store-gallery .sg-track::-webkit-scrollbar {
  display: none;
}

/* 1枚ぶんの枠（js/store-gallery.js が <div class="sg-item"><img></div> で作る） */
.store-gallery .sg-item {
  flex: 0 0 100%;
  /* center は送り先とスナップ先がずれる。start を使う */
  scroll-snap-align: start;
  /* 管理画面で拡大して見せる設定にしたとき、はみ出した分をここで切る
     （付けないと隣の写真の上に乗る） */
  overflow: hidden;
}

/* 画像の比率は 16:10 のまま。既存の指定より詳細度を高くして確実に当てる */
.store-track>.store-card .store-img-box .store-gallery img,
.store-img-box .store-gallery img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  /* 既存の <img> 用の拡大演出（transition: transform）は引き継がない */
  transition: none;
}

/* ギャラリーでは、カードにカーソルを乗せたときの拡大を止める
   （横送りの位置がずれて、隣の写真が覗いてしまうため） */
.store-card:hover .store-img-box .store-gallery img {
  transform: none;
}

/* --- 下部のドット --- */

.store-gallery .sg-shade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 54px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.store-gallery .sg-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  display: flex;
  justify-content: center;
  gap: 2px;
  /* 帯そのものは触っても反応させない（ドットだけを押せるようにする） */
  pointer-events: none;
}

.store-gallery .sg-dot {
  pointer-events: auto;
  /* 見た目は小さくても、指で押せる大きさを確保する */
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-appearance: none;
  appearance: none;
}

.store-gallery .sg-dot::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.65);
  transition: background 0.2s ease;
}

.store-gallery .sg-dot.is-active::before {
  background: #d4a574;
}

/* --- 矢印（指でなぞれない機器のため。スマホでは出さない） --- */

.store-gallery .sg-arrow {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .store-gallery .sg-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(10, 14, 26, 0.5);
    color: #fff;
    font-family: inherit;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
  }

  .store-gallery:hover .sg-arrow,
  .store-gallery .sg-arrow:focus-visible {
    opacity: 1;
  }

  .store-gallery .sg-arrow[data-dir="-1"] {
    left: 8px;
  }

  .store-gallery .sg-arrow[data-dir="1"] {
    right: 8px;
  }
}