/* seika-lightbox.css — 成果物カード/成果物イメージ画像の拡大表示ライトボックス
   使用箇所: 人材研修 FEATURE（seika-card）・業務改善診断 比較表の成果物イメージ。
   開閉・ギャラリー送りは assets/js/seika-lightbox.js。kenshu.css から分離。 */

/* --- 成果物拡大ライトボックス --------------------------------------------
   開閉は seika-lightbox.js が .is-open / .is-closing / hidden を切り替える
   （開閉アニメーションの方式は download-modal.css の .dl-modal と同じ） */
.seika-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-24);
}

.seika-lightbox.is-open,
.seika-lightbox.is-closing {
  display: flex;
}

@keyframes ic-seika-lightbox-overlay-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes ic-seika-lightbox-panel-in {
  from {
    opacity: 0;
    transform: translateY(var(--motion-shift));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ic-seika-lightbox-overlay-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes ic-seika-lightbox-panel-out {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translateY(var(--motion-shift));
  }
}

/* 閉じるボタンは位置固定のままオーバーレイと同じフェードだけ適用する */
.seika-lightbox.is-open .seika-lightbox__overlay,
.seika-lightbox.is-open .seika-lightbox__close {
  animation: ic-seika-lightbox-overlay-in 0.3s var(--motion-ease-out);
}

.seika-lightbox.is-open .seika-lightbox__panel {
  animation: ic-seika-lightbox-panel-in 0.3s var(--motion-ease-out);
}

/* 閉じ切った見た目で止めるため forwards（直後に hidden が付くので残留しない）*/
.seika-lightbox.is-closing .seika-lightbox__overlay,
.seika-lightbox.is-closing .seika-lightbox__close {
  animation: ic-seika-lightbox-overlay-out 0.2s var(--motion-ease-out) forwards;
}

.seika-lightbox.is-closing .seika-lightbox__panel {
  animation: ic-seika-lightbox-panel-out 0.2s var(--motion-ease-out) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .seika-lightbox.is-open .seika-lightbox__overlay,
  .seika-lightbox.is-open .seika-lightbox__panel,
  .seika-lightbox.is-open .seika-lightbox__close,
  .seika-lightbox.is-closing .seika-lightbox__overlay,
  .seika-lightbox.is-closing .seika-lightbox__panel,
  .seika-lightbox.is-closing .seika-lightbox__close {
    animation: none;
  }
}

/* 白の半透明＋背景ぼかしのすりガラス風（スクロール追従ヘッダーと同じ方式） */
.seika-lightbox__overlay {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-white) 60%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.seika-lightbox__panel {
  position: relative;
  max-width: var(--layout-max);
  padding: var(--space-16);
  /* PCはピンチ拡大した画像を元の表示枠でクリップする（枠＝ビューポートとして覗く
     見せ方）。SPはフルスクリーンのためクリップしない（下のSP上書き参照）*/
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-form);
}

/* 閉じるボタン: パネルの外・画面右上に固定（PC/SP共通）。
   サイズ・位置・色はヘッダーのMENUボタン（header.css .g-nav__menu-btn:
   4rem円形・濃青。SPは上 --space-12 / 右 --space-24）に合わせ、ピッタリ重ねる。
   パネル内に置くと開閉アニメーションの transform で fixed の基準がパネルに
   変わり位置がブレるため、マークアップ上も .seika-lightbox 直下に置いている */
.seika-lightbox__close {
  position: fixed;
  z-index: 1;
  top: var(--space-12);
  right: var(--space-24);
  width: 4rem;
  height: 4rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-primary-dark);
  color: var(--color-white);
  font-size: var(--font-size-card);
  line-height: var(--line-height-none);
  cursor: pointer;
}

.seika-lightbox__image {
  display: block;
  max-width: 100%;
  /* 80px = 外側余白24×2 + パネル内余白16×2（縦にはみ出さない上限）*/
  max-height: calc(100dvh - var(--space-80));
  height: auto;
  /* ピンチ・パンは seika-lightbox.js が Pointer Events で処理する（ブラウザ既定の
     スクロール・ズームに取られないようタッチ操作を無効化。マウス操作には影響なし）*/
  touch-action: none;
  transform-origin: center;
}

/* --- ギャラリー送り（前後の画像へ）----------------------------------------
   ギャラリー（[data-seika-gallery] 内のトリガー）で開いたときだけ JS が
   hidden を外す。PCは矢印ボタン、SPは非表示にして左右スワイプで送る */
.seika-lightbox__nav {
  position: absolute;
  z-index: 1;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-white);
  box-shadow: var(--shadow-drop-sm);
  transform: translateY(-50%);
  cursor: pointer;
}

.seika-lightbox__nav--prev {
  left: var(--space-24);
}

.seika-lightbox__nav--next {
  right: var(--space-24);
}

/* 矢印（シェブロン）はボーダー2辺を45度回転して描く */
.seika-lightbox__nav::before {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  border-top: 0.125rem solid var(--color-primary);
  border-right: 0.125rem solid var(--color-primary);
}

.seika-lightbox__nav--prev::before {
  margin-left: var(--space-4);
  transform: rotate(-135deg);
}

.seika-lightbox__nav--next::before {
  margin-right: var(--space-4);
  transform: rotate(45deg);
}

@media (hover: hover) {
  .seika-lightbox__nav {
    transition: opacity 0.3s var(--motion-ease-out);
  }
  .seika-lightbox__nav:hover {
    opacity: 0.7;
  }
}


/* --- SP ------------------------------------------------------------------ */
@media (max-width: 767px) {
  /* 成果物拡大ライトボックス: SPは白パネルをやめ、画面幅いっぱいの
     フルスクリーン表示にする（ピンチで拡大縮小・ドラッグで移動）*/
  .seika-lightbox {
    padding: 0;
  }
  .seika-lightbox__panel {
    width: 100%;
    max-width: 100%;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    /* ピンチ拡大した画像をパネル枠でクリップしない。フルスクリーン表示なので
       画像自体が画面いっぱいに広がり、拡大中はドラッグで見たい位置へ動かせる */
    overflow: visible;
  }
  .seika-lightbox__image {
    width: 100%;
    max-height: 100dvh;
  }
  /* SPの画像送りは左右スワイプ（seika-lightbox.js）。矢印は出さない */
  .seika-lightbox__nav {
    display: none;
  }
}