/* ============================================================
   page-work.css
   Work: 淡々としたグリッド(Instagramのプロフィールのような並び)。
   クリックでポップアップ表示。
   ============================================================ */

.work-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}
@media (max-width: 900px) { .work-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }

.work-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-bg-alt);
  cursor: pointer;
  border: none;
  padding: 0;
  display: block;
  width: 100%;
  /* ★ 新しい作品(配列の先頭)から順に表示。遅延は js/main.js が transition-delay で指定 */
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--duration-slow) var(--ease-smooth),
              transform var(--duration-slow) var(--ease-smooth);
}
.work-grid.is-revealed .work-cell {
  opacity: 1;
  transform: none;
}
.work-cell img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--duration-mid) var(--ease), opacity var(--duration-mid) var(--ease);
}
.work-cell:hover img { transform: scale(1.04); opacity: 0.9; }

.work-cell .caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--space-3xs) var(--space-2xs);
  font-size: var(--text-xs);
  background: color-mix(in srgb, var(--color-bg) 78%, transparent);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
}
.work-cell:hover .caption { opacity: 1; transform: translateY(0); }

/* ------------------------------------------------------------
   ポップアップ(クリックで拡大表示)
------------------------------------------------------------ */
.work-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--color-ink) 88%, transparent);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md);
}
.work-modal.is-open { display: flex; }

.work-modal-inner {
  position: relative;
  background: var(--color-bg);
  max-width: min(1200px, 96vw); /* ★ ポップアップの大きさはここで調整 */
  max-height: 92vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
}
@media (max-width: 700px) {
  .work-modal-inner { grid-template-columns: 1fr; }
}

.work-modal-inner img { width: 100%; height: 100%; object-fit: cover; }

.work-modal-body {
  padding: 3px;
  font-size: var(--text-sm);
  display: flex;
  flex-direction: column;
  justify-content: center; /* 縦方向中央が基準 */
}
.work-modal-body .title { font-size: var(--text-lg); font-weight: bold; margin-bottom: var(--space-3xs); }
.work-modal-body .meta { color: var(--color-ink-soft); margin-bottom: 1px; } /* ★ descとの間隔はここ */
.work-modal-body .desc {
  color: var(--color-ink-soft);
  line-height: 1.9;
  /*margin-bottom: var(--space-lg); /* ★ 中央より少し上に見せるための余白。大きくするほど上に寄る */
}

/* ------------------------------------------------------------
   デスクトップ限定の見せ方(スマホは上の基本スタイルのまま)
   ★ 画像に文章を重ね、ホバー中だけ表示。外すと右にスライドしながら消える。
------------------------------------------------------------ */
@media (min-width: 701px) and (hover: hover) and (pointer: fine) {
  .work-modal-inner {
    /* ★ grid のままだと暗黙の行が箱の高さまで伸びず、画像のheight:100%が
       正しく解決できないまま欠けてしまうため、画像1枚だけのデスクトップでは
       display を grid から flex に変更している */
    display: flex;
    overflow: hidden;
    /* ★ 固定の箱にせず、画像のサイズに合わせて縮む(余白=レターボックスが出ない) */
    width: auto;
    height: auto;
    max-width: min(1200px, 96vw);
    max-height: min(900px, 92vh);
  }
  .work-modal-inner img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: min(900px, 92vh); /* コンテナのmax-heightと同じ値を指定(%だと解決できないため) */
  }

  .work-modal-body {
    position: absolute;
    right: -28px; /* ★ transformではなくrightの値でスライドさせる(理由は下記) */
    bottom: 0;
    max-width: 100%;
    background: none;
    text-align: right; /* ★ 文字を右寄せに */
    padding-bottom: 0px; /* ★ 下側の余白を減らして、少し下に見せる */
    visibility: hidden;
    transition: right var(--duration-mid) var(--ease-smooth),
                visibility 0s linear var(--duration-mid);
    pointer-events: none; /* ホバー判定は下の画像に譲る */
  }
  .work-modal-inner:hover .work-modal-body {
    right: 0;
    visibility: visible;
    transition: right var(--duration-mid) var(--ease-smooth), visibility 0s;
  }

  /* ★ ドロップシャドウの代わりに、文字だけを覆う白背景(マーカーのような見た目)を敷く。
       複数行になるdescは box-decoration-break: clone で行ごとに背景がつく */
  .work-modal-body [data-modal-title],
  .work-modal-body [data-modal-meta],
  .work-modal-body [data-modal-desc] {
    display: inline;
    background: #fff;
    color: var(--color-ink);
    padding: 0.15em 0.4em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
}

/* ポップアップの中央下に置く「close」テキストリンク(枠なし) */
.work-modal-close {
  background: none;
  border: none;
  color: var(--color-bg);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.05em;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: var(--space-2xs);
}
.work-modal-close:hover { opacity: 0.7; }

/* 前後の作品に切り替える矢印(デスクトップのみ。スマホでは表示しない) */
.work-modal-nav {
  display: none;
}
@media (min-width: 701px) and (hover: hover) and (pointer: fine) {
  .work-modal-nav {
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-bg);
    font-family: var(--font-mono);
    font-size: 2rem;
    line-height: 1;
    padding: var(--space-2xs) var(--space-sm);
    cursor: pointer;
  }
  .work-modal-nav:hover { opacity: 0.7; }
  .work-modal-nav:disabled {
    opacity: 0.25;
    cursor: default;
  }
  .work-modal-nav:disabled:hover { opacity: 0.25; }
  .work-modal-prev { left: var(--space-md); }
  .work-modal-next { right: var(--space-md); }
}