/* ============================================================
   実績の詳細ページ（2026-10-15 本人「LARGOで」）
   LARGO の作品ページの実物と同じ並べ方: 横長の写真は全部同じ大きさ、変えるのは縦長の置き方だけ。
   1枚目（表紙）だけ画面の端から端まで（ヘッダーの役）。その下は12列の格子で、横長は2〜11列（左右に1列ずつ空ける）、縦長は半分（2〜6列か7〜11列）。
   縦長が続けば2枚を横に並べ、1枚だけなら左・右と交互に寄せる。写真の間は48px（スマホは24px）。
   並べ方は写真の順番と向きだけで決まる（scripts/build_work_pages.py の layout_rows）。
   ============================================================ */

/* ---------- 地の色: 温かいグレー（紙白より一段濃い。暗い画面では黒でなく炭色）。<html data-ground="gray"> の時だけ ---------- */
:root[data-ground="gray"] {
  --paper: #e3e0d9;      /* 墨 13.85:1・本文 8.59:1・注記 4.98:1 */
  --paper-2: #dbd8d0;
  --accent: #076c74;     /* 灰の地でも 4.5:1 を割らないよう一段濃く（4.68:1） */
}
@media (prefers-color-scheme: dark) {
  :root[data-ground="gray"]:not([data-theme="light"]) {
    --paper: #2a2825;    /* 炭色（見出し 12.58:1・本文 9.46:1・注記 4.74:1） */
    --paper-2: #34322f;
    --accent: #62cbd1;
    --field: #33312e;
  }
}
:root[data-ground="gray"][data-theme="dark"] {
  --paper: #2a2825;
  --paper-2: #34322f;
  --accent: #62cbd1;
  --field: #33312e;
}

/* ---------- 現場名と担当（写真には重ねない） ---------- */
.work-head { padding-block: 8px 48px; min-width: 0; }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin-bottom: 8px; font-size: 13px; color: var(--note); }
.breadcrumbs a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.breadcrumbs a:hover { text-decoration-color: currentColor; }
.work-head h1 { font-size: clamp(28px, 3.6vw, 44px); font-weight: 700; line-height: 1.4; letter-spacing: .02em; color: var(--ink); text-wrap: balance; }
/* 現場名は「地域」と「種類」のまとまりで折り返す（ダ／ンスのような途中の折り返しを防ぐ） */
.work-head h1 { word-break: keep-all; }
.work-head h1 .seg { display: inline-block; }
.work-meta { display: flex; flex-wrap: wrap; gap: 4px 32px; margin-top: 16px; font-size: 16px; line-height: 1.8; }
.work-meta > div { display: flex; gap: 12px; align-items: baseline; }
.work-meta dt { font-size: 13px; letter-spacing: .06em; color: var(--note); }
.work-meta dd { color: var(--text); }
.work-meta .num { font-family: var(--num); letter-spacing: .04em; font-feature-settings: "tnum" 1; }

/* ---------- 写真 ---------- */
.detail-gallery { display: grid; row-gap: 48px; min-width: 0; }
.detail-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
.detail-photo { margin: 0; min-width: 0; transition: opacity .9s cubic-bezier(.22, .94, .44, 1), transform .9s cubic-bezier(.22, .94, .44, 1); }
.detail-photo-link { display: block; overflow: hidden; border-radius: var(--radius); background: var(--paper-2); cursor: zoom-in; }
.detail-photo-link img { width: 100%; height: auto; transition: transform .6s ease; }
@media (hover: hover) { .detail-photo-link:hover img { transform: scale(1.02); } }
.detail-photo-link:focus-visible { outline-offset: 4px; }
/* 出てくる動き: 開いた時に見えている写真は最初から見せ、下の写真だけ画面に入った時にゆっくり出す（detail.js が wait を付け外し） */
.detail-photo.wait { opacity: 0; transform: translateY(24px); transition: none; }

/* 行の型（この5つだけ） */
.row-cover > * { grid-column: 1 / 13; }                             /* 1枚目: 全部の幅（下の「表紙」で画面の端から端まで広げる） */
.row-wide > * { grid-column: 2 / 12; }                              /* 横長: 全部同じ大きさ */
.row-tall-l > * { grid-column: 2 / 7; }                             /* 縦長1枚: 左に寄せる */
.row-tall-r > * { grid-column: 7 / 12; }                            /* 縦長1枚: 右に寄せる */
.row-tall-pair > :nth-child(1) { grid-column: 2 / 7; }             /* 縦長2枚: 横に並べる */
.row-tall-pair > :nth-child(2) { grid-column: 7 / 12; }

/* ---------- 前後の実績 ---------- */
.work-navigation { padding-block: var(--sec); }
.work-neighbors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-bottom: 48px; border-top: 1px solid var(--line); padding-top: 32px; }
.work-neighbor { display: grid; grid-template-columns: minmax(80px, 40%) minmax(0, 1fr); align-items: center; gap: 24px; text-decoration: none; }
.neighbor-image { overflow: hidden; border-radius: var(--radius); }
.neighbor-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.work-neighbor small { display: block; margin-bottom: 8px; font-size: 13px; color: var(--note); }
.work-neighbor b { color: var(--ink); font-size: 16px; }
.work-neighbor:hover b { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- 拡大表示 ---------- */
body.detail-viewer-open { overflow: hidden; }
.detail-viewer { margin: auto; padding: 0; border: 0; width: min(1400px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); background: var(--dark); color: var(--on-dark); border-radius: var(--radius); }
.detail-viewer::backdrop { background: rgb(0 0 0 / .85); }
.viewer-content { position: relative; padding: 64px 16px 16px; }
.detail-viewer button { min-width: 48px; min-height: 48px; border: 0; border-radius: var(--radius); background: var(--dark); color: var(--on-dark); font: inherit; cursor: pointer; }
.detail-viewer button:hover { color: var(--accent-on-dark); }
.detail-viewer button:focus-visible { outline-color: var(--accent-on-dark); }
.detail-viewer button:disabled { visibility: hidden; }
.viewer-close { position: absolute; right: 16px; top: 8px; padding-inline: 8px; font-size: 14px; }
.viewer-position { position: absolute; left: 24px; top: 16px; font-family: var(--num); }
.viewer-stage { position: relative; touch-action: pan-y pinch-zoom; }
.viewer-stage img { width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 128px); margin-inline: auto; object-fit: contain; }
.viewer-prev, .viewer-next { position: absolute; top: 50%; transform: translateY(-50%); font-size: 32px; }
.viewer-prev { left: 8px; }
.viewer-next { right: 8px; }

/* ---------- 幅ごと ---------- */
@media (max-width: 720px) {
  .work-head { padding-block: 0 32px; }
  /* スマホ: 6列。1枚目と横長は全部の幅、縦長1枚は3分の2の幅で左右交互、縦長2枚は半分ずつ */
  .detail-gallery { row-gap: 24px; }
  .detail-row { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 8px; }
  .row-cover > *, .row-wide > * { grid-column: 1 / 7; }
  .row-tall-l > * { grid-column: 1 / 5; }
  .row-tall-r > * { grid-column: 3 / 7; }
  .row-tall-pair > :nth-child(1) { grid-column: 1 / 4; }
  .row-tall-pair > :nth-child(2) { grid-column: 4 / 7; }
  .work-neighbors { grid-template-columns: minmax(0, 1fr); }
  .neighbor-empty { display: none; }
  .work-neighbor { gap: 16px; }
  .detail-viewer { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .viewer-content { padding: 64px 8px 8px; }
  .viewer-position { left: 16px; }
  .viewer-close { right: 8px; }
}
/* ---------- 表紙: 1枚目は画面の端から端まで（ヘッダーの役） ----------
   2026-10-15 本人「ヘッダーみたいな感じってことね。それに対して左右が開く隙間がある」（LARGO の作品ページの表紙と同じく、左右に余白を作らない）。
   縦は写真の比のまま。画面の高さを超える時（4:3 の写真など）だけ上下を切って画面の高さに収める。どの幅でも同じ */
.detail-row.row-cover { margin-inline: calc(50% - 50vw); grid-template-columns: minmax(0, 1fr); column-gap: 0; }
.detail-row.row-cover > * { grid-column: 1 / -1; }
.row-cover .detail-photo-link { border-radius: 0; }
.row-cover .detail-photo-link img { max-height: 100vh; max-height: 100svh; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
  .work-detail *, .work-detail *::before, .work-detail *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .detail-photo.wait { opacity: 1; transform: none; }
  .detail-photo-link:hover img { transform: none; }
}