/* ==========================================================================
   detail.css — WORKS / News 個別ページ専用スタイル
     共通：日本語メイン（Noto Serif JP）+ 英語飾り（Cormorant italic, fg-mute）
     画像は画面幅で伸縮、最大 1100px。
     読み物（本文・dl）は 800px 幅で読みやすく揃える。
   ========================================================================== */


/* ==========================================================================
   メタ情報（投稿日 + カテゴリ）
   ========================================================================== */
.detail-meta {
  font-family: var(--font-en-meta);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-fg-mute);
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0.85rem;
  max-width: 1100px;
}
.detail-meta time {
  color: var(--color-fg);
}
.detail-meta-cat::before {
  content: '／';
  font-style: normal;
  letter-spacing: 0;
  margin: 0 0.5rem;
  color: var(--color-fg-mute);
}


/* ==========================================================================
   タイトル（h1）：日本語メイン、Noto Serif JP
   ========================================================================== */
.detail-title {
  font-family: var(--font-jp);
  font-weight: normal;
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: var(--color-fg);
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem);
  max-width: 1100px;
}


/* ==========================================================================
   案件メタ情報 dl（クライアント／Client、案件／Case など）
     ── dt 内は dt-jp + ／ + dt-en の横並び 1 行
     ── 罫線（border-bottom）は画像と同じ max-width 1100px、画面幅で伸縮
   ========================================================================== */
.detail-info {
  list-style: none;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  display: grid;
  gap: 0.25rem;
  max-width: 1100px;
  font-family: var(--font-jp);
  font-size: 0.92rem;
  line-height: 1.95;
  letter-spacing: 0.06em;
  color: var(--color-fg);
}
.detail-info > div {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--color-line);
  align-items: baseline;
}
.detail-info dt {
  display: block;
}
.detail-info .dt-jp {
  display: inline;
  font-family: var(--font-jp);
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  color: var(--color-fg);
}
.detail-info .dt-sep {
  display: inline;
  margin: 0 0.45rem;
  font-style: normal;
  font-size: 0.85em;
  letter-spacing: 0;
  color: var(--color-fg-mute);
}
.detail-info .dt-en {
  display: inline;
  font-family: var(--font-en-meta);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-fg-mute);
}
.detail-info dd {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--color-fg);
}


/* ==========================================================================
   リード文（冒頭の説明）
   ========================================================================== */
.detail-lead {
  font-family: var(--font-jp);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 2.0;
  letter-spacing: 0.08em;
  color: var(--color-fg);
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  max-width: 800px;
}


/* ==========================================================================
   本文（複数段落）
   ========================================================================== */
.detail-body {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  max-width: 800px;
}
.detail-body p {
  font-family: var(--font-jp);
  font-size: 0.95rem;
  line-height: 2.0;
  letter-spacing: 0.07em;
  color: var(--color-fg);
  margin: 0 0 1.25rem;
}
.detail-body p:last-child {
  margin-bottom: 0;
}
.detail-body a {
  color: var(--color-fg);
  text-decoration: none;
  border-bottom: 1px solid var(--color-line);
  transition: border-color 200ms ease;
}
.detail-body a:hover {
  border-bottom-color: var(--color-fg);
}

/* WP 本文に含まれる小見出し・リスト・引用などのスタイル */
.detail-body h2,
.detail-body h3,
.detail-body h4 {
  font-family: var(--font-jp);
  font-weight: normal;
  font-size: 1.05rem;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: var(--color-fg);
  margin: clamp(2rem, 4vw, 2.75rem) 0 1rem;
  padding: 0;
}
.detail-body h2 { font-size: 1.15rem; }
.detail-body h3 { font-size: 1.1rem; }

.detail-body ul,
.detail-body ol {
  margin: 1rem 0 1.25rem;
  padding-left: 1.5rem;
}
.detail-body li {
  font-family: var(--font-jp);
  font-size: 0.95rem;
  line-height: 1.95;
  letter-spacing: 0.06em;
  margin-bottom: 0.4rem;
}

.detail-body blockquote {
  margin: 1.5rem 0;
  padding: 0.75rem 0 0.75rem 1rem;
  border-left: 2px solid var(--color-line);
  color: var(--color-fg-mute);
  font-family: var(--font-jp);
  font-size: 0.92rem;
}

/* 本文中の <br> は段落内改行として控えめに */
.detail-body p br {
  line-height: 1.5;
}


/* ==========================================================================
   画像（画面幅で伸縮、最大 1100px）
   ========================================================================== */
.detail-image {
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  background: #f4f4f4;
  overflow: hidden;
  border-radius: 2px;
  max-width: 1100px;
}
.detail-image img {
  display: block;
  width: 100%;
  height: auto;
}
/* 画像のキャプション（あれば） */
.detail-image figcaption {
  font-family: var(--font-en);
  font-style: italic;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--color-fg-mute);
  padding: 0.75rem 0 0;
  background: var(--color-bg);
}


/* ==========================================================================
   一覧に戻るリンク（一覧の time と同じ天地に揃える：小さく、Inter メタ書体）
   ========================================================================== */
.detail-back-link {
  margin-top: clamp(3rem, 6vw, 5rem);
  max-width: 800px;
}
.detail-back-link a {
  font-family: var(--font-en);
  font-style: italic;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--color-fg-mute);
  text-decoration: none;
  transition: color 200ms ease;
}
.detail-back-link a:hover {
  color: var(--color-fg);
}
.detail-back-link a::before {
  content: '← ';
  font-style: normal;
}


/* ==========================================================================
   News 個別ページ専用スコープ
     ── 画像・本文を news-list と同じ 800px 幅に統一
     ── HTML は section-label → メタ → タイトル → 本文 → 画像 → 戻る の順。
        CSS の order で表示順を「メタ → タイトル → 画像 → 本文 → 戻る」に並べ替え。
   ========================================================================== */
.news-detail-section .page-head-block {
  display: flex;
  flex-direction: column;
}
.news-detail-section .section-label    { order: 1; }
.news-detail-section .detail-meta      { order: 2; max-width: 800px; }
.news-detail-section .detail-title     { order: 3; max-width: 800px; }
.news-detail-section .detail-image     { order: 4; max-width: 800px; }
.news-detail-section .detail-body      { order: 5; max-width: 800px; }
.news-detail-section .detail-back-link { order: 6; }

/* News 個別の画像はタイトル直下に来るので、上下を本文と分離 */
.news-detail-section .detail-image {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}


/* ==========================================================================
   News pagination（一覧最下部）
     1 2 3 4 5 形式、現在ページは fg、他は fg-mute、ホバーで fg。
     Cormorant italic（フィルター UI と同じ流儀）。
   ========================================================================== */
.news-pagination {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  max-width: 800px;
}
.news-pagination-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
}
.news-pagination-link,
.news-pagination-current,
.news-pagination-next {
  font-family: var(--font-en);
  font-style: italic;
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.85;
  letter-spacing: 0.02em;
  color: var(--color-fg-mute);
  text-decoration: none;
  padding: 0.25rem 0.4rem;
  transition: color 200ms ease;
}
.news-pagination-link:hover,
.news-pagination-next:hover {
  color: var(--color-fg);
}
.news-pagination-current {
  color: var(--color-fg);
}
.news-pagination-next {
  margin-left: 0.5rem;
}


/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media (max-width: 768px) {
  .detail-info > div {
    grid-template-columns: 1fr;
    gap: 0.25rem;
    padding: 0.85rem 0;
  }
  .news-pagination-list {
    gap: 0.4rem 1rem;
  }
}