/* ============================================
   s-gallery-04 — 設備紹介スライダー（メイン＋サムネイル）

   ショートコード [facility_slider type="beauty|insurance"] が出力する。
   写真は保険・美容で分かれており、type で絞るため混在しない。

   【写真は全て 4:3 の横長に統一済み】元は43枚中31枚が縦撮りだったため、
   ビルド時に 4:3 へクロップしてある（被写体が下寄りの9枚はクロップ位置を下げた）。
   枠も 4:3 なので通常は cover でも切れない。比率の違う写真が混ざったときは
   余白を作らず埋める方を優先する（cover）。
   ============================================ */

/* 下は、次に来る「ご相談CTA」（alignfull の cover 帯）と密着していたため確保する。
   規約: 白セクション⇔帯は 64px（layout-quality-rules §9）。実測 2026-08-27 で間隔0pxだった。 */
.s-gallery-04 {
  margin-block: var(--space-3-xl) var(--space-8-xl);
}

/* 連続するときは、間は 7-xl・最後だけ 8-xl を効かせる */
.s-gallery-04:has(~ .s-gallery-04) {
  margin-block-end: 0;
}

/* 美容→保険と続くときだけ、区分の切れ目が分かる間隔を空ける。
   【`+` ではなく `~`】1本目の直後に初期化用の <script> が1つ入るため、
   隣接兄弟（+）では2本目に当たらない（実測 2026-08-27: 40px 指定が効かず24pxのままだった）。 */
.s-gallery-04 ~ .s-gallery-04 {
  margin-block-start: var(--space-7-xl);
}

/* 【なぜ inner が要るか】この節は alignfull の clinic-info の直後に出るため、
   幅の基準を持たないと見出しだけが画面端（left:0）に貼り付く。
   実測 2026-08-27: 見出し left=0 / スライダー left=320 で **312pxずれていた**。
   見出し・メイン・サムネの3つを同じ器に入れて左端を揃える。 */
.s-gallery-04__inner {
  inline-size: min(800px, 100% - var(--container-padding) * 2);
  margin-inline: auto;
}

/* 見出しは既存部品 c-heading-01（英字ラベル＋明朝タイトル＋リード）を使う。
   s- 側では位置・サイズの調整だけを行う（規約 §3.0: 色・形は c- のまま）。
   クリニック情報の見出しの下に入る従属セクションなので、既定の48pxは詰める。 */
.s-gallery-04 .c-heading-01 {
  margin-bottom: var(--space-3-xl);
}

/* ── メイン ── */

/* 【幅を絞る理由】本文幅(1160px)いっぱいだと 4:3 で高さ870pxになり、
   PCでファーストビューを埋め尽くす。実測して800pxへ抑えた（高さ600px）。幅は inner が持つ。 */
.s-gallery-04__main {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  background: var(--color-band-grey);
  overflow: hidden;
}

.s-gallery-04__slide {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  height: 100%;
}

.s-gallery-04__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.s-gallery-04__caption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: var(--space-md) var(--space-lg);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent);
  color: var(--color-white);
  font-size: var(--font-size-md);
  line-height: var(--line-height-compact);
}

/* ── 前後ボタン ── */

.s-gallery-04__nav {
  position: absolute;
  inset-block-start: 50%;
  translate: 0 -50%;
  z-index: 2;
  width: var(--space-4-xl);
  height: var(--space-4-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  /* 背景写真に溶けないよう、白を濃いめ＋影で浮かせる */
  background: color-mix(in srgb, var(--color-white) 94%, transparent);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.s-gallery-04__nav:hover {
  background: var(--color-white);
}

.s-gallery-04__nav::before {
  content: '';
  width: var(--space-xl);
  height: var(--space-xl);
  background-color: var(--color-primary);
  mask: var(--icon) center / contain no-repeat;
  -webkit-mask: var(--icon) center / contain no-repeat;
}

.s-gallery-04__nav--prev {
  inset-inline-start: var(--space-md);
  --icon: url('../../images/icon/icon--arrow-left-01.svg');
}

.s-gallery-04__nav--next {
  inset-inline-end: var(--space-md);
  --icon: url('../../images/icon/icon--arrow-right-01.svg');
}

/* ── サムネイル ── */

/* 【全幅にする】メイン写真は本文幅(800px)のまま、サムネ帯だけ画面いっぱいに広げる。
   body に overflow-x: hidden があるので、既存の s-gallery-03 と同じ 100vw 方式で問題ない。 */
.s-gallery-04__thumbs {
  inline-size: 100vw;
  margin-block-start: var(--space-md);
  margin-inline: calc(50% - 50vw);
}

.s-gallery-04__thumb {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  /* 非選択の減光。0.5 まで落とすと明るい室内写真（白壁が主）が白地に溶けて
     「1枚抜けている」ように見えた（実測 2026-08-27: 保険の顕微鏡室）。 */
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}

.s-gallery-04__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.s-gallery-04__thumb:hover,
.s-gallery-04__thumb.swiper-slide-active {
  opacity: 1;
}

/* 選択中の印は Swiper 標準の `swiper-slide-active` に一本化する。
   サムネは常に選択中を中央へ寄せるので「中央＝アクティブ」が一致する。
   自前クラスを併用すると Swiper 側の更新に消され、初期表示だけ枠が出なかった
   （実測 2026-08-27: PC・中間幅で再現）。 */
.s-gallery-04__thumb.swiper-slide-active {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

/* ── SP ── */

@media (max-width: 767px) {
  /* 写真を全て 4:3 の横長に揃えたので、SPの枠も 4:3 にする（1:1 だと左右に余白が出る） */

  .s-gallery-04__nav {
    width: var(--space-3-xl);
    height: var(--space-3-xl);
  }

  .s-gallery-04__caption {
    font-size: var(--font-size-sm);
    padding: var(--space-sm) var(--space-md);
  }
}

/* JavaScript 無効時: サムネイル列を出さず、メインは1枚目のみ見える */
.s-gallery-04:not(.is-ready) .s-gallery-04__nav,
.s-gallery-04:not(.is-ready) .s-gallery-04__thumbs {
  display: none;
}