/* =====================================================================
   記事本文（.c-prose）とブロックスタイル
   表示側（記事詳細・固定ページ）と編集画面（.editor-styles-wrapper）で同じ見た目にするため、
   このファイルを両方で読み込んでいる。
   is-style-vialog-* は register_block_style() で登録したもの。
   クラス名は既存記事のHTMLに焼き付いているため変更しないこと。
   Figma detail-pc / detail-sp の本文部分に合わせている。
   ===================================================================== */

:where(.c-prose, .editor-styles-wrapper) {
  --prose-section-gap: var(--space-64); /* 見出しの上（ひとまとまりの間） */
  --prose-gap: var(--space-24);         /* 見出しと本文、段落どうし */
  --prose-heading-ls: 0.08em;
  color: var(--color-text-body);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.6; /* 本文の行間160%（オーナー指示） */
  letter-spacing: 0.08em;
  overflow-wrap: anywhere;
}

.c-prose > * + * {
  margin-top: var(--prose-gap);
}

/* ---- 見出し（Figma：H2 24 / H3 20 / H4 18 / H5 16px、行間1.5） ---- */

:where(.c-prose, .editor-styles-wrapper) :is(h2, h3, h4, h5, h6) {
  font-family: var(--font-jp);
  font-weight: 500;
  line-height: var(--lh-title);
  letter-spacing: var(--prose-heading-ls);
}

:where(.c-prose, .editor-styles-wrapper) h2 { font-size: 22px; } /* 記事タイトル24pxより一段小さく */
:where(.c-prose, .editor-styles-wrapper) h3 { font-size: var(--fs-lg); }
:where(.c-prose, .editor-styles-wrapper) h4 { font-size: var(--fs-md); }
:where(.c-prose, .editor-styles-wrapper) :is(h5, h6) { font-size: var(--fs-base); }

.c-prose > * + :is(h2, h3, h4, h5, h6) {
  margin-top: var(--prose-section-gap);
}

/* ---- 本文中の要素 ---- */

:where(.c-prose, .editor-styles-wrapper) :is(p, li) a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

:where(.c-prose, .editor-styles-wrapper) :is(ul, ol) {
  padding-left: 1.5em;
}

:where(.c-prose, .editor-styles-wrapper) ul { list-style: disc; }
:where(.c-prose, .editor-styles-wrapper) ol { list-style: decimal; }

:where(.c-prose, .editor-styles-wrapper) li + li {
  margin-top: var(--space-8);
}

:where(.c-prose, .editor-styles-wrapper) strong {
  font-weight: 700;
}

.c-prose img {
  border-radius: var(--radius);
}

.c-prose .wp-block-image img {
  width: 100%;
  height: auto;
}

:where(.c-prose, .editor-styles-wrapper) figcaption {
  margin-top: var(--space-8);
  color: var(--color-text-gray);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  text-align: center;
}

:where(.c-prose, .editor-styles-wrapper) hr {
  border: 0;
  border-top: 1px solid var(--color-line);
}

:where(.c-prose, .editor-styles-wrapper) table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

:where(.c-prose, .editor-styles-wrapper) :is(th, td) {
  padding: var(--space-8) var(--space-12);
  border: 1px solid var(--color-line);
  text-align: left;
}

:where(.c-prose, .editor-styles-wrapper) th {
  background: var(--color-bg-subtle);
  font-weight: 500;
}

/* 記事詳細で左の画像パネル用に置いた目印（高さ0。前後の間隔に影響させない） */
.c-prose > .p-article__marker {
  display: block;
  margin-top: 0;
}

/* ---- ギャラリー：2列（2枚なら横並び、4枚なら2×2）。枚数が奇数なら最後の1枚は横幅いっぱい ----
   WordPress標準のギャラリーCSSは :not(#individual-image) でIDの強さを持っているため、
   同じ書き方で上書きしている */

.c-prose .wp-block-gallery.has-nested-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
}

.c-prose .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
  width: auto;
  margin: 0;
}

.c-prose .wp-block-gallery.has-nested-images figure.wp-block-image img {
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
}

.c-prose .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image):last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* ギャラリー・カラムの gap に付けている !important は、WordPress がブロックごとに自動出力する
   間隔指定（同じ詳細度のクラス）に勝つため。外すとブロックスタイルが効かなくなる。 */

/* --- ギャラリー：密着（間隔なし） --- */
.wp-block-gallery.is-style-vialog-tight {
  --wp--style--unstable-gallery-gap: 0;
  gap: 0 !important;
}

.wp-block-gallery.is-style-vialog-tight img {
  border-radius: 0;
}

/* --- ギャラリー：広め（間隔32px） --- */
.wp-block-gallery.is-style-vialog-roomy {
  --wp--style--unstable-gallery-gap: var(--space-32);
  gap: var(--space-32) !important;
}

/* --- カラム：密着 --- */
.wp-block-columns.is-style-vialog-tight {
  gap: 0 !important;
}

.wp-block-columns.is-style-vialog-tight > .wp-block-column {
  padding: 0;
}

/* --- カラム：標準（間隔24px） --- */
.wp-block-columns.is-style-vialog-medium {
  gap: var(--space-24) !important;
}

/* --- 画像：横幅いっぱい（SPで本文の左右の余白まで広げる。PCは左のパネルに出るので対象外） --- */
.c-prose .wp-block-image.is-style-vialog-fullbleed img {
  border-radius: 0;
}

/* --- 段落：リード文 --- */
:where(.c-prose, .editor-styles-wrapper) p.is-style-vialog-lead {
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
}

/* --- 段落：キャプション（上の画像との間を詰める） --- */
:where(.c-prose, .editor-styles-wrapper) p.is-style-vialog-caption {
  color: var(--color-text-gray);
  font-size: var(--fs-2xs);
  line-height: var(--lh-body);
  text-align: center;
}

.c-prose > * + p.is-style-vialog-caption {
  margin-top: var(--space-8);
}

/* --- 引用：VIALOG引用（上下の罫線＋中央寄せ） --- */
.wp-block-quote.is-style-vialog-quote {
  padding: var(--space-32) var(--space-24);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  border-left: 0;
  font-style: normal;
}

.wp-block-quote.is-style-vialog-quote p {
  font-family: var(--font-jp);
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: var(--lh-loose);
  text-align: center;
}

.wp-block-quote.is-style-vialog-quote cite {
  display: block;
  margin-top: var(--space-16);
  color: var(--color-text-gray);
  font-size: var(--fs-2xs);
  font-style: normal;
  text-align: center;
}

/* ---- 記事紹介カード（vialog/post-card ブロック）。カード本体は layout.css の .c-card--inline ---- */

.wp-block-vialog-post-card .c-card__title a {
  text-decoration: none;
}

/* ---------------------------------------------------------------
   SP（Figma detail-sp：ひとまとまりの間40、見出しと本文16、見出しの字間0.06em）
   --------------------------------------------------------------- */

@media (max-width: 768px) {
  :where(.c-prose, .editor-styles-wrapper) {
    --prose-section-gap: var(--space-40);
    --prose-gap: var(--space-16);
    --prose-heading-ls: 0.06em;
    font-size: 15px; /* SPの本文サイズ（オーナー指示。行間160%はそのまま） */
  }

  /* SPの見出し（オーナー指示） */
  :where(.c-prose, .editor-styles-wrapper) h2 { font-size: var(--fs-lg); }
  :where(.c-prose, .editor-styles-wrapper) h3 { font-size: var(--fs-md); }
  :where(.c-prose, .editor-styles-wrapper) h4 { font-size: 17px; }
  :where(.c-prose, .editor-styles-wrapper) :is(h5, h6) { font-size: var(--fs-base); }

  /* 本文の左右の余白（記事詳細：20＋8px）まで広げる */
  .c-prose .wp-block-image.is-style-vialog-fullbleed {
    margin-inline: -28px;
  }

  .wp-block-gallery.is-style-vialog-roomy {
    --wp--style--unstable-gallery-gap: var(--space-16);
    gap: var(--space-16) !important;
  }

  :where(.c-prose, .editor-styles-wrapper) p.is-style-vialog-lead {
    font-size: var(--fs-base);
  }

  .wp-block-quote.is-style-vialog-quote {
    padding: var(--space-24) var(--space-16);
  }

  .wp-block-quote.is-style-vialog-quote p {
    font-size: var(--fs-base);
  }
}