/* ===================================================================
   NEWS 詳細（single）ページ（Figma PC 141:10675 / SP 424:17190）
   ※ 見出し帯（.news-archive__head 等）とパンくず（.breadcrumb*）は
     common.css に集約（一覧と共通）。ここは記事本文と記事ナビのみ。
=================================================================== */

/* パンくず3階層目（記事タイトル：和文・金・省略表示） */
.breadcrumb__post {
  min-width: 0;
  max-width: 24rem;
  overflow: hidden;
  font-family: var(--font-ja);
  font-weight: 600;
  font-size: 0.875rem; /* 14px */
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* -------------------------------------------------------------------
   記事本体（本文幅 960/1728 = 55.56% センタリング）
------------------------------------------------------------------- */
.single-post__inner {
  width: 55.56%; /* 960/1728 */
  margin-top: 3.125rem;
  margin-inline: auto;
}

/* 見出し（日付 + タイトル） */
.single-post__date {
  display: block;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 2rem; /* 32px */
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-accent);
}

.single-post__title {
  margin-top: 1rem; /* 16px */
  font-family: var(--font-ja);
  font-weight: 600;
  font-size: 2rem; /* 32px */
  line-height: 1.6;
  color: var(--color-text-main);
}

/* -------------------------------------------------------------------
   本文（the_content）
------------------------------------------------------------------- */
.single-post__body {
  margin-top: 2.5rem; /* 40px */
  font-family: var(--font-ja);
  font-weight: 500;
  font-size: 1rem; /* 16px */
  line-height: 1.6;
  color: var(--color-text-main);
}

@media (max-width: 1023px) {
  .single-post__body {
    margin-top: 1.25rem;
  }
}
.single-post__body > * + * {
  margin-top: 1.5rem;
}

.single-post__body a {
  color: var(--color-gold);
  text-decoration: underline;
}

@media (min-width: 1024px) {
  .single-post__body a:hover {
    opacity: 0.75;
  }
}

.single-post__body strong,
.single-post__body b {
  font-weight: 700;
}

.single-post__body h2,
.single-post__body h3,
.single-post__body h4 {
  font-weight: 700;
  line-height: 1.5;
}

.single-post__body h2 {
  font-size: 1.375rem;
}

.single-post__body h3 {
  font-size: 1.1875rem;
}

.single-post__body ul,
.single-post__body ol {
  padding-left: 1.5em;
}

.single-post__body ul {
  list-style: disc;
}

.single-post__body ol {
  list-style: decimal;
}

.single-post__body li {
  line-height: 1.6;
}

.single-post__body li + li {
  margin-top: 0.25rem;
}

.single-post__body img {
  max-width: 100%;
  width: 100%;
  height: auto;
}

/* ギャラリー（html5 テーマはコアの float CSS が出ないため grid で整列） */
.single-post__body .gallery {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

.single-post__body .gallery-columns-1 {
  grid-template-columns: minmax(0, 1fr);
}

.single-post__body .gallery-columns-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.single-post__body .gallery-columns-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.single-post__body .gallery-columns-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.single-post__body .gallery-columns-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.single-post__body .gallery-columns-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.single-post__body .gallery-columns-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.single-post__body .gallery-columns-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.single-post__body .gallery-columns-9 {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}

.single-post__body .gallery-item {
  margin: 0;
}

.single-post__body .gallery-icon img {
  display: block;
  width: 100%;
  height: auto;
}

.single-post__body .gallery-caption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  text-align: center;
}

/* 罫線囲みのボックス（Figma の Rectangle 71 を blockquote に対応） */
.single-post__body blockquote {
  padding: 1.5rem;
  border: 1px solid var(--color-gold);
  border-radius: 0.3125rem;
}

.single-post__body blockquote > * + * {
  margin-top: 1rem;
}

/* -------------------------------------------------------------------
   記事ナビ（previous / BACK TO LIST / next）
------------------------------------------------------------------- */
.post-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem; /* 24px */
  margin-top: 5rem;
}

/* previous / next：矢印を上、テキストを下に縦積み（金） */
.post-nav__link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1.25rem; /* 20px */
  line-height: 1;
  color: var(--color-gold);
  text-transform: lowercase;
}

@media (min-width: 1024px) {
  a.post-nav__link:hover {
    opacity: 0.7;
  }
}

/* 無効状態（前後の記事が無い）：淡いベージュ・クリック不可 */
.post-nav__link.is-disabled {
  color: var(--color-beige);
  opacity: 0.6;
  pointer-events: none;
  cursor: default;
}

/* 矢印（テキスト上）は文字色に追従 */
.post-nav__link::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
}

.post-nav__link--prev::before {
  border-width: 6px 9px 6px 0;
  border-color: transparent currentColor transparent transparent;
}

.post-nav__link--next::before {
  border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent currentColor;
}

/* -------------------------------------------------------------------
   レスポンシブ（SP: ≤1023px）
------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .breadcrumb__post {
    max-width: 6.875rem; /* 110px */
    font-size: 0.75rem; /* 12px */
  }

  /* 大「NEWS」見出しを一覧ページ（news.css）と同寸に揃える。
     Figma SP は幅 165px・高さ約41px（SVG 411:103 を 41px に縮小すると幅 ≒164px）。
     common.css SP は 56px のため、詳細ページでも 41px・上揃えに上書きする。 */
  .news-archive__title-en {
    top: 0;
    bottom: auto;
    height: 2.5625rem; /* 41px → 幅約164px（Figma 165px） */
  }

  /* 見出し帯（新着情報）・パンくずを本文ガター（28px）に統一。
     Figma SP（424:18988 / 424:18994）は左右 28px（= 390 − 334 を 2 等分）。
     ※ news.css の 28px 上書きは一覧専用のため、詳細ページでは common.css の
       SP 既定（20px）を、詳細専用に読み込む single.css 側で 28px に上書きする。
     bottom も一覧（0.4rem）に合わせ、NEWS の字面下端に重ねる。 */
  .news-archive__title-ja {
    left: 1.75rem; /* 28px */
    bottom: 0.4rem;
  }

  .breadcrumb {
    padding-right: 1.75rem; /* 28px（本文右端に合わせる） */
  }

  .single-post {
    margin-top: 1.5rem;
  }

  /* 本文ガター：Figma SP は左右 28px（本文幅 334/390）。NEWS 一覧 SP と統一。 */
  .single-post__inner {
    width: auto;
    padding-inline: 1.75rem;
    margin-top: 1.5rem;
  }

  .single-post__date {
    font-size: 1.125rem; /* 18px */
  }

  .single-post__title {
    font-size: 1.25rem; /* 20px */
    margin-top: 0.5rem;
  }

  /* 本文ブロック間の余白：Figma SP は 20px（PC の 24px から縮小） */
  .single-post__body > * + * {
    margin-top: 1.25rem; /* 20px */
  }

  /* 囲みボックス（blockquote = Figma Rectangle 71）内パディング：Figma SP は 16px */
  .single-post__body blockquote {
    padding: 1rem; /* 16px */
  }

  .post-nav {
    justify-content: space-between;
    gap: 0;
    padding-inline: 1.6rem;
    margin-top: 3.5rem;
  }

  .post-nav__link {
    font-size: 0.875rem; /* 14px */
  }

  /* BACK TO LIST は SP では 240px 相当 */
  .post-nav .btn-diamond {
    width: 15rem;
  }

  .single-post__body .gallery-columns-3,
  .single-post__body .gallery-columns-4,
  .single-post__body .gallery-columns-5,
  .single-post__body .gallery-columns-6,
  .single-post__body .gallery-columns-7,
  .single-post__body .gallery-columns-8,
  .single-post__body .gallery-columns-9 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}