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

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

   ★今回の追加（Gallery 動画対応）:
     - .lb-video（<video>）の表示/サイズ/影/ドラッグ時の挙動を .lb-img と同等に統一
     - Splide 内の動画（.splide__slide .lb-video）にも同等の制約（max-height 等）を適用
     - フォールバック（Splide 無し）で動画表示時も「初回フェード」を自然にする

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

/* ===========================================================
   ★ライトボックス（本文画像/ギャラリーの拡大表示）
   - body.is-lightbox-open で背景スクロールを抑止
   - .lb-overlay の開閉でフル画面オーバーレイを制御
   - ★既存仕様：フェードイン時間 0.3s
   - ★今回調整ポイント：
       1) SP で画像が画面下寄りに見える問題の軽減
          → 画像の max-height を「動的ビューポート単位 (100dvh)」で再指定し、
            アドレスバーの出入りによる 100vh のズレを吸収
       2) grid 行の 1 行目に minmax(0, 1fr) を採用し、高さ計算の安定性を向上

   - ★今回追加（動画対応）：
       3) 動画（.lb-video）も画像と同等に “中央寄せ + contain + 高さ制約” を適用
          → 画像と同じ視覚/操作感で表示できるようにする
=========================================================== */

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

/* オーバーレイ本体：色・透明度は CSS 変数で調整可能
   ▼rgba(var(...), α) ではなく **rgb(var(...) / α)** 記法を使用
     → 変数に「スペース区切りのRGB」を入れても正しく解釈される
   ▼フェード時間：0.3s
   ▼今回の微調整：
     - grid-template-rows: 1fr auto → minmax(0, 1fr) auto にし、
       ステージ行の高さが過剰に広がるのを防止（SPでの縦位置の安定化）
*/
.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: minmax(0, 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;
}

/* ステージ（画像/動画センタリング）
   - grid の 1 行目に置かれ、place-items: center で中央配置
   - min-height:0 は iOS Safari での高さ計算の不具合対策
*/
.lb-stage{
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 32px);
  min-height: 0;
}

/* ===========================================================
   ▼表示メディア（画像/動画） 共通ルール
   -----------------------------------------------------------
   - 画像：.lb-img
   - 動画：.lb-video（<video>）
   - どちらも “contain” で比率維持し、ステージ内に収める
   - transform はドラッグ時追従用
   - opacity は初回フェード用
=========================================================== */

/* 拡大画像そのもの（既存） */
.lb-img{
  max-width: min(100%, calc(100vw - 6vw));
  max-height: calc(100vh - 180px);      /* フォールバック: 従来どおりの 100vh 基準 */
  max-height: calc(100dvh - 180px);     /* ★追加: 動的ビューポート基準（SP縦位置の安定化） */
  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;
}

/* ★追加：拡大動画（<video>） */
.lb-video{
  max-width: min(100%, calc(100vw - 6vw));
  max-height: calc(100vh - 180px);      /* フォールバック */
  max-height: calc(100dvh - 180px);     /* ★追加：動的ビューポート基準 */
  width: auto;                          /* ブラウザの比率計算に任せる */
  height: auto;
  object-fit: contain;                  /* video も 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 直下に img / video が置かれるケースのみを対象にし、
     オーバーレイを開いたタイミングでふわっと表示させる
*/
.lb-stage > .lb-img,
.lb-stage > .lb-video{
  opacity: 0;
}
.lb-overlay.is-open .lb-stage > .lb-img,
.lb-overlay.is-open .lb-stage > .lb-video{
  opacity: 1;
}

/* ドラッグ中の見た目 */
.lb-overlay.is-grabbing { cursor: grabbing; }
/* 画像/動画どちらでも transition 無効化（ドラッグ追従のため） */
.lb-overlay.is-dragging .lb-img,
.lb-overlay.is-dragging .lb-video{
  transition: none;
}

/* キャプション帯
   - 下側に safe-area 対応の余白を確保
   - grid-template-columns: 1fr auto で「左=テキスト / 右=カウンタ」
*/
.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;
}

/* 閉じるボタン（×）— 常に表示。安全に最前面へ
   - safe-area を考慮して四隅から一定距離を確保
*/
.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;
}

/* モバイル調整（画像/動画・キャプション・閉じるボタン）
   - メディア高さは 100dvh ベースで再指定（SP での縦位置をさらに安定化）
   - フォント/ボタンはわずかに縮小
*/
@media (max-width: 720px){
  .lb-img,
  .lb-video{
    max-height: calc(100vh - 150px);   /* フォールバック */
    max-height: calc(100dvh - 150px);  /* ★追加：SP の実表示領域に追従させる */
  }
  .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-video）も同様の制約で表示
=========================================================== */

/* Splide コンテナ全体をステージ中央に配置 */
.lb-overlay .splide{
  width: 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;
}

/* スライド内の拡大画像
   - base の .lb-img と同様、100vh → 100dvh の順で max-height を指定
*/
.lb-overlay .splide__slide .lb-img{
  max-width: min(100%, calc(100vw - 6vw));
  max-height: calc(100vh - 180px);      /* フォールバック */
  max-height: calc(100dvh - 180px);     /* ★追加：動的ビューポート基準 */
}

/* ★追加：スライド内の拡大動画 */
.lb-overlay .splide__slide .lb-video{
  max-width: min(100%, calc(100vw - 6vw));
  max-height: calc(100vh - 180px);      /* フォールバック */
  max-height: calc(100dvh - 180px);     /* ★追加：動的ビューポート基準 */
  width: auto;
  height: auto;
  object-fit: contain;
}

@media (max-width: 720px){
  .lb-overlay .splide__slide .lb-img{
    max-height: calc(100vh - 150px);   /* フォールバック */
    max-height: calc(100dvh - 150px);  /* ★追加：SP 実表示領域に追従 */
  }
  .lb-overlay .splide__slide .lb-video{
    max-height: calc(100vh - 150px);   /* フォールバック */
    max-height: calc(100dvh - 150px);  /* ★追加：SP 実表示領域に追従 */
  }
}

/* 矢印は表示、ドットは非表示 */
.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,
  .lb-stage > .lb-video{
    transition: none !important;
  }
}