/* components/single-detail.css — 投稿詳細の共通レイアウト（Figma: コラム詳細 / お知らせ詳細）
   本文（max 800）＋関連サイドバー（max 320）の2カラム（gap 120）。
   関連サイドバーは .c-related--card（サムネ付き／コラム）と
   .c-related--text（テキストのみ／お知らせ）の2バリアント。
   MV=.c-mv / 本文=.c-article-body(article.css) / ボタン=.c-btn / CTA=.c-cta-visit を併用。 */

/* base.css の section{margin-block:48} を打ち消す（余白は各セクションのpaddingで管理）。
   未リセットだとヘッダー直下・MV周りに48pxのbody背景余白が出て波がflushにならない。 */
.single-news section,
.single-column section { margin-block: 0; }

.c-detail {
  /* 背景：オフホワイトのテクスチャ（Figma コラム詳細 76:21205 / お知らせ詳細 76:21761。
     色を焼き込んだ紙テクスチャを 346.8×327.8px で直接フィル。multiply は使わない）。 */
  background-color: var(--color-bg-offwhite);
  background-image: url("../../images/common/tex-offwhite.webp");
  background-position: top left;
  background-size: 346.8px 327.8px;
  background-repeat: repeat;
  padding-block: var(--space-80) var(--space-160);
  margin-block: 0;
}
.c-detail__inner {
  display: flex;
  gap: var(--space-120);
  align-items: flex-start;
  max-width: var(--layout-max);
  margin-inline: auto;
  padding-inline: var(--space-24);
}

/* --- 本文カラム -------------------------------------------------------- */
.c-detail__main {
  flex: 1 1 0;
  min-width: 0;
  max-width: 50rem; /* 800px */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-80);
}
.c-detail__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  width: 100%;
}
.c-detail__date {
  margin: 0;
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-bold);
  color: var(--color-brown-text);
  text-align: right;
}
.c-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}
.c-detail__title {
  margin: 0;
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
  color: var(--color-brown-text);
}
.c-detail__hero {
  margin: 0;
  width: 100%;
  aspect-ratio: 800 / 494;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-gray-light);
}
.c-detail__hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 本文（.c-article-body）。間隔は .c-detail__main の gap に委譲。 */
.c-detail__main .c-article-body {
  width: 100%;
  font-weight: var(--font-weight-medium);
}

/* セクション見出し（H2）：黄色地のバンド（Figma: Section Title）。
   ニュース等の緑下線（article.css）を詳細ページでのみ上書き。 */
.c-detail__main .c-article-body h2 {
  margin: var(--space-40) 0 var(--space-16);
  padding: var(--space-8);
  border: 0;
  /* フッターと同じイエローのクレヨン紙テクスチャ（346.8×327.8px タイル）。 */
  background-color: var(--color-bg-yellow);
  background-image: url("../../images/common/tex-yellow-deep.webp");
  background-repeat: repeat;
  background-position: top left;
  background-size: 346.8px 327.8px;
  font-size: var(--font-size-h3-lg);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--letter-spacing-wide);
  line-height: var(--line-height-base);
  color: var(--color-brown-text);
}
.c-detail__main .c-article-body > h2:first-child { margin-top: 0; }

/* 一覧に戻る（本文下・中央寄せ。共通コンポーネント .c-morebtn を使用） */
.c-detail__back {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* =====================================================================
   関連サイドバー（RelatedList）
   ===================================================================== */
.c-related {
  flex: 0 1 20rem; /* 320px */
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.c-related__heading {
  margin: 0;
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  color: var(--color-brown-text);
}
.c-related__divider {
  display: block;
  height: 2px;
  background: var(--color-brown-text);
}
.c-related__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.c-related__date {
  margin: 0;
  color: var(--color-brown-text);
  font-size: var(--font-size-h6);
}
.c-related__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.c-related__title {
  margin: 0;
  color: var(--color-brown-text);
  line-height: var(--line-height-base);
  font-weight: var(--font-weight-bold);
}
.c-related__title a { color: inherit; text-decoration: none; }
.c-related__title a:hover { text-decoration: underline; }

/* --- card バリアント（サムネ＋本文。コラム）--------------------------
   一覧ページの注目記事（.column-featured）と同じ横並びレイアウト：
   左に銀比の写真、右に日付＋カテゴリ＋タイトル（抜粋は持たない）。 */
.c-related--card .c-related__list { gap: var(--space-24); }
.c-related--card .c-related__item {
  display: flex;
  gap: var(--space-40);
  align-items: flex-start;
}
.c-related--card .c-related__media {
  flex: 0 0 auto;
  width: 40%; /* 注目記事は 360px 固定。サイドバー幅(320px)に収めるため % 指定。 */
  aspect-ratio: var(--ratio-silver);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-gray-light);
}
.c-related--card .c-related__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.c-related--card .c-related__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.c-related--card .c-related__date { font-weight: var(--font-weight-bold); }
.c-related--card .c-related__tags { gap: var(--space-8); }
.c-related--card .c-related__title {
  font-size: var(--font-size-h3-lg);
  line-height: var(--line-height-heading);
}

/* --- text バリアント（テキストのみ。お知らせ）----------------------- */
.c-related--text .c-related__list { gap: var(--space-24); }
.c-related--text .c-related__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--color-brown-text);
}
.c-related--text .c-related__meta {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.c-related--text .c-related__tags .c-tag { padding: 0 var(--space-8); font-size: var(--font-size-h6); }
.c-related--text .c-related__title { font-size: var(--font-size-h5); font-weight: var(--font-weight-extrabold); }

/* --- レスポンシブ ----------------------------------------------------- */
@media (max-width: 900px) {
  .c-detail__inner {
    flex-direction: column;
    gap: var(--space-48);
  }
  .c-detail__main { max-width: none; gap: var(--space-48); }
  .c-related { flex-basis: auto; width: 100%; }
}

/* SP：一覧ページ（.news-list / .column-list）と同じ余白に揃える。 */
@media (max-width: 768px) {
  .c-detail { padding-block: var(--space-24) var(--space-64); }  /* 上24 / 下64 */
  .c-detail__inner { padding-inline: var(--space-16); }

  .c-detail__date {
    font-size: var(--font-size-3xs);
  }

  /* 本文カラムの文字を SP 向けに一段小さく。
     タイトル 32→25.6 / 本文 16→14.2 / 見出しH2 21.3→18.3 / H3 18.3→16。 */
  .c-detail__title { font-size: var(--font-size-h3-lg); }
  .c-detail__main .c-article-body { font-size: var(--font-size-h5); }
  .c-detail__main .c-article-body h2 { font-size: var(--font-size-h3); }
  .c-detail__main .c-article-body h3 { font-size: var(--font-size-h4); }

  /* 関連コラムも注目記事（.column-featured）の SP 指定に合わせる。 */
  .c-related {
    gap: var(--space-8);
  }
  .c-related__list {
    margin-top: var(--space-8);
  }
  .c-related--card .c-related__item { gap: var(--space-16); }
  .c-related--card .c-related__body { gap: var(--space-8); }
  .c-related--card .c-related__title { font-size: var(--font-size-sm); line-height: var(--line-height-snug); }
  .c-related--card .c-related__tags .c-tag { font-size: var(--font-size-3xs); }


  .c-related__heading {
    font-size: var(--font-size-h6);
  }
}