/* ===========================================================
   lightbox.css — 本文画像/ギャラリー共通ライトボックス
   -----------------------------------------------------------
   元: single-blog.css 内の「★ライトボックス（本文画像/ギャラリーの拡大表示）」ブロックを
   抽出して共通コンポーネント化したスタイル定義です。

   役割:
     - body.is-lightbox-open で背景スクロールを抑止
     - .lb-overlay / .lb-stage / .lb-img / .lb-caption などライトボックス関連の見た目を統一
     - Splide の有無に関わらず動作（Splide あり: スライド / なし: 単一画像）

   注意:
     - 背景色などは CSSカスタムプロパティで調整します:
         --lb-bg-color : RGB（例: 8 18 40）
         --lb-bg-alpha : 透明度（0〜1）
       ※ 未指定時は黒地・0.92 をフォールバックとして使用します。
=========================================================== */

/* ===========================================================
   ★ライトボックス（本文画像/ギャラリーの拡大表示）
   - body.is-lightbox-open で背景スクロールを抑止
   - .lb-overlay の開閉でフル画面オーバーレイを制御
   - ★今回追加：オーバーレイのフェードイン時間を0.3sに延長し、
     Splideスライドやフォールバック画像にもフェードインを付与
=========================================================== */

/* 背景スクロール抑止 */
body.is-lightbox-open {
  overflow: hidden;
  overscroll-behavior: contain;
}

/* オーバーレイ本体：色・透明度は CSS 変数で調整可能
   ▼修正点：rgba(var(...), α) ではなく **rgb(var(...) / α)** 記法に変更
             → 変数に「スペース区切りのRGB」を入れても正しく解釈される
   ▼今回調整：フェード時間を 0.3s に延長して、出現・退場をわずかにマイルドに */
.lb-overlay{
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgb(var(--lb-bg-color, 0 0 0) / var(--lb-bg-alpha, .92));
  display: grid;
  grid-template-rows: 1fr auto; /* 上=ステージ, 下=キャプション帯 */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.lb-overlay.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .3s ease;
}

/* ステージ（画像センタリング） */
.lb-stage{
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 32px);
  min-height: 0; /* iOSの収まり改善 */
}

/* 拡大画像そのもの
   - transform はドラッグ時の追従用
   - 今回：opacity もトランジション対象にしておく（フォールバック用） */
.lb-img{
  max-width: min(100%, calc(100vw - 6vw));
  max-height: calc(100vh - 180px); /* ボタン/キャプションぶんの余白 */
  object-fit: contain;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  border-radius: 0;
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity .3s ease, transform .25s ease;
}

/* ★Splide未使用時（フォールバック）の初回フェード
   - .lb-stage 直下に .lb-img が置かれるケースのみを対象にし、
     オーバーレイを開いたタイミングでふわっと表示させる */
.lb-stage > .lb-img{
  opacity: 0;
}
.lb-overlay.is-open .lb-stage > .lb-img{
  opacity: 1;
}

/* ドラッグ中の見た目 */
.lb-overlay.is-grabbing { cursor: grabbing; }
.lb-overlay.is-dragging .lb-img { transition: none; }

/* キャプション帯 */
.lb-caption{
  color: #fff;
  padding:
    clamp(8px, 2vw, 12px)
    clamp(12px, 3vw, 20px)
    calc(env(safe-area-inset-bottom, 0px) + clamp(8px, 2vw, 14px));
  line-height: 1.6;
  background: linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0));
  display: grid;
  grid-template-columns: 1fr auto; /* 左=テキスト, 右=カウンタ */
  gap: 16px;
}
.lb-caption__text{
  font-size: 14px;
  color: #eaeaea;
}
.lb-caption__counter{
  font-size: 12px;
  color: #cfcfcf;
  align-self: end;
}

/* === 独自ナビのうち、矢印のみ無効化（Splide標準を使用） ============ */
.lb-btn.lb-prev,
.lb-btn.lb-next{
  display: none !important;
}

/* 閉じるボタン（×）— 常に表示。安全に最前面へ */
.lb-close{
  position: absolute;
  top: max(12px, env(safe-area-inset-top, 0px) + 12px);
  right: max(12px, env(safe-area-inset-right, 0px) + 12px);
  z-index: 20;
  width: 42px;
  height: 42px;
  border-radius: 9999px;
  background: rgba(255,255,255,.95);
  color: #111;
  border: 1px solid rgba(0,0,0,.1);
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.lb-close .lb-icon{
  display: inline-block;
  font-weight: 700;
  line-height: 1;
  font-size: 20px; /* × の見やすさを担保 */
}

/* オーバーレイの余白クリック用に全面ヒット領域を確保（JSで判定） */
.lb-overlay::before{
  content: "";
  position: absolute;
  inset: 0;
}

/* モバイル調整（画像・キャプション・閉じるボタン） */
@media (max-width: 720px){
  .lb-img{ max-height: calc(100vh - 150px); }
  .lb-caption__text{ font-size: 13px; }
  .lb-caption__counter{ font-size: 11px; }
  .lb-close{ width: 38px; height: 38px; }
  .lb-close .lb-icon{ font-size: 18px; }
}

/* ===========================================================
   ★Splide（オーバーレイ内スライド演出を担当）
   - 矢印＝Splide標準を表示／ドット＝非表示
   - ★今回追加：アクティブスライド用のフェードイン（opacity）を付与
=========================================================== */
.lb-overlay .splide{
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
.lb-overlay .splide__track{ width: 100%; height: 100%; }
.lb-overlay .splide__list { width: 100%; height: 100%; }

/* 各スライドコンテナ
   - 画像を中央に配置
   - デフォルトは opacity:0 にしておき、アクティブスライドだけ1にする */
.lb-overlay .splide__slide{
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center; /* 画像を常に中央に */
  overflow: hidden;
  opacity: 0;
  transition: opacity .3s ease;
}

/* スライド内の拡大画像（既存 .lb-img をそのまま使用） */
.lb-overlay .splide__slide .lb-img{
  max-width: min(100%, calc(100vw - 6vw));
  max-height: calc(100vh - 180px);
  object-fit: contain;
}
@media (max-width: 720px){
  .lb-overlay .splide__slide .lb-img{
    max-height: calc(100vh - 150px);
  }
}

/* 矢印は表示、ドットは非表示 */
.lb-overlay .splide__arrows{
  display: block !important;
  z-index: 10; /* 画像より前面、閉じるボタンよりは下に */
}
.lb-overlay .splide__pagination{ display: none !important; }

/* 矢印の見た目をオーバーレイに馴染む丸ボタン風に */
.lb-overlay .splide__arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 9999px;
  background: rgba(255,255,255,.95);
  color: #111;
  border: 1px solid rgba(0,0,0,.1);
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.lb-overlay .splide__arrow--prev{
  left: max(12px, env(safe-area-inset-left, 0px) + 12px);
}
.lb-overlay .splide__arrow--next{
  right: max(12px, env(safe-area-inset-right, 0px) + 12px);
}
.lb-overlay .splide__arrow svg{ width: 20px; height: 20px; }
@media (max-width: 720px){
  .lb-overlay .splide__arrow{ width: 40px; height: 40px; }
  .lb-overlay .splide__arrow svg{ width: 18px; height: 18px; }
}
/* ドラッグ状態のカーソル */
.lb-overlay .splide.is-drag{ cursor: grabbing; }

/* フェードタイプ使用時のにじみを抑える＋アクティブ時だけ表示
   - is-active が付与されたスライドだけ opacity:1 で見せる */
.lb-overlay .splide__slide.is-active{
  opacity: 1;
  will-change: opacity, transform;
}

/* 動きを抑える環境ではライトボックスのアニメーションも最小化 */
@media (prefers-reduced-motion: reduce){
  .lb-overlay,
  .lb-overlay .splide__slide,
  .lb-stage > .lb-img{
    transition: none !important;
  }
}