/* ==========================================================================
   記事本文（the_content() の中身）

   お知らせ・コラム・施工レポート・プロジェクト事例の本文（.p-detail__text）だけに効かせる。
   本文はクライアントが管理画面のクラシックエディタで書く。そこで付けた見出し・区切り線・
   リンク・写真の寄せを、記事でも同じように見せるためのファイル（issue #4）。

   base.css は見出しの大きさと太さ、リンクの色と下線を打ち消している（テンプレートで個別に
   付けるため）。2026-10-09 まではそれが本文にも効いていて、エディタでは大きく出る見出しが
   記事では本文と同じ見た目になっていた。base.css は全ページに効くので触らず、本文の中で付け直す。

   管理画面のエディタも同じファイルを読む（inc/post-content.php）。エディタの本文の枠（body）に
   .p-detail__text を付けてあるので、同じセレクタで効く。エディタには base.css も detail.css も
   無いので、書体・大きさ・行送り・余白の打ち消しもここに持つ。

   可変値の書き方は detail.css と同じ。
     clamp(SP値, calc(SP値 + 差 * (100vw - 768px) / 672), PC値)
   ========================================================================== */

/* --------------------------------------------------------------------------
   本文の地
   -------------------------------------------------------------------------- */

.p-detail__text {
  /* 左右に寄せた写真の回り込みを、本文の中で閉じる。
     閉じないと、本文の最後に寄せた写真が「一覧に戻る」の区切り線にかぶる */
  display: flow-root;
  color: var(--c-text);
  font-family: var(--ff-sans);
  font-size: var(--fs-body); /* SP14 → PC16 */
  font-weight: var(--fw-regular);
  /* 行送りは実測px。SP 14×1.75=24.5→Figmaは25 ／ PC 16×2.0=32 */
  line-height: clamp(25px, calc(25px + 7 * (100vw - 768px) / 672), 32px);
}

/* 上下の余白は、下の「* + *」だけで決める。
   記事ページでは base.css が段落や見出しの余白を0にしているが、エディタには
   ブラウザ既定の余白が残る。詳細度0（:where）にして、以降の指定を邪魔しない。 */
:where(.p-detail__text) :where(p, h1, h2, h3, h4, h5, h6, hr, blockquote, ul, ol, figure) {
  margin: 0;
}

.p-detail__text > * + * {
  margin-top: 1em;
}

/* --------------------------------------------------------------------------
   見出し

   エディタの選択肢は「段落・見出し2〜4」だけにしてある（inc/post-content.php）。
   見出し1・5・6は既存の記事に残っているので、見た目を決めておく。
   -------------------------------------------------------------------------- */

/* 見出し1は、本番の記事・事例で節の見出しに使われている（ID 125・432・436 など。2026-10-09 確認）。
   記事の題名（ページの h1）より目立つと順番が逆になるので、見出し2と同じ見た目にする。
   寄せた写真の横には回り込ませず、節の始まりを写真の下にそろえる。 */
.p-detail__text :is(h1, h2) {
  clear: both;
  font-size: var(--fs-content-h2); /* SP18 → PC24 */
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
}

.p-detail__text h3 {
  font-size: var(--fs-content-h3); /* SP16 → PC20 */
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
}

/* 見出し4は本文と同じ大きさで、太さだけで区別する */
.p-detail__text h4 {
  font-size: inherit;
  font-weight: var(--fw-semibold);
  line-height: inherit;
}

/* 見出し5・6は、本文と同じ見た目のまま（記事ページでは base.css の打ち消しと同じ）。
   プロジェクト事例 ID 415 は、ChatGPT から貼り付けた本文の段落がほぼ全部 h5 になっている（62個）。
   h5 を見出しの見た目にすると、その事例は本文全体が見出しになってしまう。 */
.p-detail__text :is(h5, h6) {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* 見出しの前は段落の間より広く空け、節の切れ目を分かるようにする（em は見出しの文字の大きさ） */
.p-detail__text > * + :is(h1, h2, h3, h4) {
  margin-top: 1.5em;
}

/* 中身の無い見出し・段落は場所を取らせない。本番の記事に <h1></h1> <h2></h2> が残っていて
   （ID 125・436）、見出しの行の高さと余白だけが空く。
   「&nbsp;」だけの段落（エディタで空行を入れたもの）は書き手が意図した間なので残す（:empty に当たらない）。 */
.p-detail__text :is(h1, h2, h3, h4, h5, h6, p):empty {
  display: none;
}

/* 先頭が空の見出しだと、次の見出しが2つ目として上に余白を取ってしまう（ID 436 は <h1></h1> で始まる）。
   事例では本文の上端が左のスペック表の上端とずれるので、先頭と同じく0にする。 */
.p-detail__text > :empty:first-child + * {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   文字の飾り・区切り線・引用・箇条書き
   -------------------------------------------------------------------------- */

/* 太字は700にそろえる。既定の bolder は親の太さから決まるため、太さ600の見出しの中では
   900に跳ね、読み込んでいない太さになる（見出しの中に <strong> を入れた記事がある。ID 125・436） */
.p-detail__text :is(strong, b) {
  font-weight: var(--fw-bold);
}

/* 本文中のリンクは、色と下線で本文と見分けられるようにする（base.css は両方消している） */
.p-detail__text a {
  color: var(--c-primary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* 区切り線はサイトの区切りと同じ1pxの線にする（ブラウザ既定の立体的な灰色の線をやめる）。
   前後は段落の間より広く空ける。寄せた写真の横には引かない。 */
.p-detail__text hr {
  clear: both;
  height: 0;
  margin-block: 2em;
  border: 0;
  border-top: 1px solid var(--c-line);
}

/* 引用と箇条書きはエディタのボタンで入るので、字下げだけ付ける（装飾は足さない） */
.p-detail__text :is(blockquote, ul, ol) {
  padding-inline-start: 1.5em;
}

/* --------------------------------------------------------------------------
   写真

   エディタの「配置」（左・中央・右・なし）を反映する。
   WordPress が alignleft / aligncenter / alignright / alignnone のクラスを付ける。
   -------------------------------------------------------------------------- */

/* 本文の写真は行の中に置く。base.css は img を block にしている（テンプレートの写真のため）が、
   そのままだと1つの段落に並べた2枚が縦に積まれる（本番 ID 423・462）。
   行の中に置けば横に並び、幅が足りなければ折り返す。
   下の余白は、折り返して縦に積まれたときに写真どうしがくっつかないようにするため。 */
.p-detail__text img {
  display: inline-block;
  vertical-align: top;
  margin-bottom: 0.5em;
}

/* 中央：1行を占めて真ん中に置く。前に寄せた写真があれば、その下から始める */
.p-detail__text .aligncenter {
  clear: both;
  display: block;
  margin-inline: auto;
}

/* 左・右：SP は回り込ませず、写真だけで1行を使う。幅が足りず、写真の横に数文字ずつしか
   入らないため（段落の頭に写真を入れると、行の中に置いたままでも同じことが起きる）。
   エディタの既定（wp-content.css）は幅を問わず回り込ませるので、明示して外す。
   上の余白は「* + *」に、下の余白は img の指定に任せる（[caption] の figure は本文の直下に来るため）。 */
.p-detail__text :is(.alignleft, .alignright) {
  float: none;
  display: block;
  margin-inline: 0;
}

/* 説明付きの写真（[caption]）。WordPress が style="width: 300px" のように写真の幅を書くので、
   狭い画面ではそれを超えないようにする。
   説明文は記事ページでは figcaption.wp-caption-text、エディタでは dd.wp-caption-dd になる。 */
.p-detail__text .wp-caption {
  max-width: 100%;
}

/* 写真との間は img の下の余白で取る（エディタの dd は wp-content.css の padding のまま。
   エディタは写真を -1ex 引き下げていて、padding を消すと説明文に写真が重なる） */
.p-detail__text :is(.wp-caption-text, .wp-caption-dd) {
  margin: 0;
  font-size: var(--fs-small); /* SP12 → PC14 */
  line-height: var(--lh-normal);
}

/* ギャラリー（[gallery]）。エディタで選んだ「列」の数で並べる。SP は2列まで。
   WordPress 標準のギャラリーの CSS（灰色の枠線付き）は出ない。テーマが html5 の gallery に
   対応していると、WordPress が出さないため（functions.php の add_theme_support）。 */
.p-detail__text .gallery {
  --gallery-cols: 2;
  display: grid;
  grid-template-columns: repeat(var(--gallery-cols), minmax(0, 1fr));
  gap: var(--gap-photo);
}

.p-detail__text .gallery-columns-1 {
  --gallery-cols: 1;
}

/* 写真は選んだ大きさのまま、枠の中央に置く。
   幅はマス目に任せる（エディタの wp-content.css は列の数で割った幅を付けている） */
.p-detail__text .gallery-item {
  width: auto;
  margin: 0;
  text-align: center;
}

/* エディタのギャラリーの表示は、行の終わりに <br style="clear: both"> を入れる（記事ページの
   html5 の出力には無い）。grid の中ではそれが1マスを取り、写真の並びがずれるので消す */
.p-detail__text .gallery > br {
  display: none;
}

/* ==========================================================================
   768px以上
   ========================================================================== */

/* この節の指定は editor-style.css にも同じものがある（エディタでは枠の幅を問わず効かせるため）。
   値を変えるときは両方を直す。 */
@media (min-width: 768px) {

  /* 左・右：文章を回り込ませる。写真は本文の幅の半分まで（「大」を選んでも文章の場所を残す）。
     下の余白は段落の間（1em）より小さくする。大きいと、写真と同じ高さで終わる段落の次の段落に
     写真の余白がはみ出し、その1行目だけが数文字で折り返される（本番 ID 423 の「なし＋右」の並び）。 */
  .p-detail__text .alignleft {
    float: left;
    max-width: 50%;
    margin-right: var(--gap-photo);
    margin-bottom: 0.5em;
  }

  .p-detail__text .alignright {
    float: right;
    max-width: 50%;
    margin-left: var(--gap-photo);
    margin-bottom: 0.5em;
  }

  .p-detail__text .gallery-columns-3 { --gallery-cols: 3; }
  .p-detail__text .gallery-columns-4 { --gallery-cols: 4; }
  .p-detail__text .gallery-columns-5 { --gallery-cols: 5; }
  .p-detail__text .gallery-columns-6 { --gallery-cols: 6; }
  .p-detail__text .gallery-columns-7 { --gallery-cols: 7; }
  .p-detail__text .gallery-columns-8 { --gallery-cols: 8; }
  .p-detail__text .gallery-columns-9 { --gallery-cols: 9; }
}