/* =================================================================
 * c-modal — モーダルウィンドウ
 * Figma: スタイルガイド 5824:94440 / 項目 30（PC）, 46（SP）「モーダルウィンドウ」
 *
 *   <dialog class="c-modal" id="modal-1">
 *     <div class="c-modal__inner">
 *       <button class="c-modal__close-x" data-modal-close>...</button>  (任意・右上×)
 *       <div class="c-modal__media">
 *         <img class="c-modal__img" src="..." alt="...">
 *       </div>
 *       <div class="c-modal__body">
 *         <p class="c-modal__text">本文テキスト</p>
 *       </div>
 *       <button class="c-modal__close" data-modal-close>
 *         <span class="c-modal__close-icon" aria-hidden="true"></span>
 *         <span class="c-modal__close-text">閉じる</span>
 *       </button>
 *     </div>
 *   </dialog>
 *
 * 開閉: <button data-modal-open="modal-1">開く</button> でトリガ
 *   JS は modal.blade.php 内 @push('scripts') で 1回だけ出力（自己完結）
 * a11y: <dialog> showModal() で ESC 閉じ・フォーカストラップ・背景操作不可がブラウザ標準で動作
 * =================================================================*/

.c-modal {
  /* dialog のデフォルト枠を解除し、自前スタイルへ */
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-default);
  /* 中央配置（dialog 要素は showModal() で margin: auto に自動配置されるが、
     念のため明示） */
  margin: auto;
  max-width: min(1180rem, calc(100vw - 32rem));
  max-height: calc(100vh - 64rem);
  overflow: visible;
}
.c-modal::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

/* 開いた瞬間の演出（任意） */
.c-modal[open] {
  animation: c-modal-in var(--duration-base) var(--easing-default);
}
.c-modal[open]::backdrop {
  animation: c-modal-backdrop-in var(--duration-base) var(--easing-default);
}
@keyframes c-modal-in {
  from { opacity: 0; transform: translateY(8rem); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes c-modal-backdrop-in {
  from { background-color: rgba(0, 0, 0, 0); }
  to   { background-color: rgba(0, 0, 0, 0.5); }
}

/* ---------- 内側コンテナ（白角丸） ---------- */
.c-modal__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);                          /* 24px */
  padding: var(--space-6);                      /* 32px */
  background: var(--color-white);
  border-radius: var(--radius-xl);              /* 32px */
  max-height: calc(100vh - 64rem);
  overflow-y: auto;
}

/* ---------- 右上の × 単独閉じる（任意） ---------- */
.c-modal__close-x {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 32rem;
  height: 32rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  border-radius: var(--radius-pill);
  transition: background-color var(--duration-fast) var(--easing-default);
}
.c-modal__close-x:hover {
  background: var(--color-bg-02);
}
.c-modal__close-x::before {
  content: "";
  width: 16rem;
  height: 16rem;
  background-color: var(--color-key);
  -webkit-mask: url("/img/common/icons/close.svg") no-repeat center / contain;
          mask: url("/img/common/icons/close.svg") no-repeat center / contain;
}

/* ---------- メディア（16:9 既定） ---------- */
.c-modal__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--color-bg-02);
  border-radius: var(--radius-lg);              /* 16px */
  overflow: hidden;
}
.c-modal__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- メディア free（Lightbox 風 / 元画像の比率のまま・トリミングなし） ----------
 * 既定の 16:9 cover ではなく、画像比率に応じて枠の最大サイズ内で可変。
 * c-figure--free と同方針（aspect-ratio:auto ＋ object-fit:contain）。
 * 本文(__body)・閉じる(__close)と併存可。blade: 'mediaRatio' => 'free'。 */
.c-modal--free .c-modal__media {
  aspect-ratio: auto;              /* 16:9 固定を解除＝メディア高さは画像なり */
  background: transparent;
  display: flex;
  justify-content: center;
}
.c-modal--free .c-modal__img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 80vh;                /* 大きい画像は枠内に収め、本文・閉じるは __inner のスクロールで吸収 */
  object-fit: contain;
  border-radius: var(--radius-lg); /* 16px（メディア枠と同じ角丸を画像自身にも） */
}

/* ---------- 本文 ---------- */
.c-modal__body {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--color-text-default);
}
.c-modal__text {
  margin: 0;
}

/* ---------- 下部「閉じる」テキストリンク ---------- */
.c-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);                          /* 8px */
  align-self: center;
  background: transparent;
  border: 0;
  padding: var(--space-2) var(--space-4);
  color: var(--color-text-default);
  font-size: var(--fs-body);
  cursor: pointer;
  transition: opacity var(--duration-fast) var(--easing-default);
}
.c-modal__close:hover {
  opacity: 0.7;
}
.c-modal__close-icon {
  width: 14rem;
  height: 14rem;
  background-color: var(--color-key);
  -webkit-mask: url("/img/common/icons/close.svg") no-repeat center / contain;
          mask: url("/img/common/icons/close.svg") no-repeat center / contain;
}

/* =================================================================
 * SP（≤1023.98px）— Figma 項目46 準拠
 * =================================================================*/
@media (max-width: 1023.98px) {
  .c-modal {
    max-width: calc(100vw - 32rem);
    max-height: calc(100vh - 32rem);
  }
  .c-modal__inner {
    gap: var(--space-4);
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    max-height: calc(100vh - 32rem);
  }
}