/* ==========================================================================
   news-detail.css — NEWS詳細ページ固有スタイル

   下層共通の幅・本文組版と既存の一覧へ戻る導線を継承し、このファイルは
   投稿見出し、本文領域、WYSIWYG要素の既定スタイルだけを担当する。
   ========================================================================== */

.p-news-detail__date {
  display: block;
  padding-top: var(--space-y-8);
  font-family: var(--font-en);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: 1.5;
  letter-spacing: 0.13em;
  color: var(--color-text-muted);
  font-feature-settings: "palt" 1;
}

.p-news-detail__layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-y-120) var(--space-x-120);
}

.p-news-detail__body {
  width: 100%;
  max-width: var(--lower-content-max);
  padding-block: var(--space-y-120);
  border-block: 1px solid transparent;
  background-image: var(--line-dash-x), var(--line-dash-x);
  background-position: left top, left bottom;
  background-repeat: no-repeat;
  background-size: 100% 1px;
}

/* --------------------------------------------------------------------------
   本文（WordPressのブロックエディタの出力）

   WordPressのブロックCSS（wp-block-*-inline-css）と destyle.css はこのファイルより
   前に読み込まれる。同じ詳細度ならここが勝つので、ブロック名のクラスで当てれば足りる。
   対象ブロックと出力の形は docs/wp-block-inventory.md、確認用の記事は
   docs/wp-news-test-post.js。
   -------------------------------------------------------------------------- */

/* 回り込み画像を本文の内側で止める */
.p-news-detail__body {
  display: flow-root;
  overflow-wrap: break-word;

  /* 投稿者が選ぶ文字サイズ（.has-*-font-size）を見出しと同じトークンで縮ませる。
     テーマのプリセットは本文に対する倍率で、狭い画面ほど見出しを追い越す。
     クラス側は !important だが値は変数なので、変数を本文の中だけ差し替える。
     スラッグはテーマの editor-font-sizes と対応している */
  --wp--preset--font-size--small: var(--fs-14);
  --wp--preset--font-size--regular: var(--fs-16);
  --wp--preset--font-size--large: var(--fs-20);
  --wp--preset--font-size--xlarge: var(--fs-24);
}

/* 縦の積み方。見出しとメディアは下で個別に広げる */
.p-news-detail__body > * + * {
  margin-top: var(--space-y-24);
}

/* 投稿者がEnterを重ねて作る空の段落。余白は上の積み方で持つので、
   残すと段落の間隔が記事ごとにばらつく */
.p-news-detail__body > p:empty {
  display: none;
}

.p-news-detail__body :where(h1, h2, h3, h4, h5, h6) {
  clear: both;
  font-family: var(--font-mincho-m);
  font-weight: normal;
  line-height: 1.75;
  letter-spacing: 0.15em;
  color: var(--color-text);
}

/* 記事タイトル（.c-lower-head__detail-title）と同じ大きさ */
.p-news-detail__body h1 {
  margin-block: var(--space-y-60) var(--space-y-24);
  font-size: var(--fs-36);
}

.p-news-detail__body h2 {
  margin-block: var(--space-y-60) var(--space-y-24);
  font-size: var(--fs-28);
}

.p-news-detail__body h3 {
  margin-block: var(--space-y-48) var(--space-y-20);
  font-size: var(--fs-24);
}

.p-news-detail__body h4 {
  margin-block: var(--space-y-36) var(--space-y-16);
  font-size: var(--fs-20);
}

.p-news-detail__body h5 {
  margin-block: var(--space-y-36) var(--space-y-16);
  font-size: var(--fs-18);
}

.p-news-detail__body h6 {
  margin-block: var(--space-y-36) var(--space-y-16);
  font-size: var(--fs-16);
}

.p-news-detail__body > :is(
  figure,
  .wp-block-image,
  .wp-block-gallery,
  .gallery,
  .wp-block-table,
  .wp-block-file,
  .wp-block-embed,
  .wp-block-video,
  .wp-block-columns,
  .wp-block-separator
) {
  clear: both;
  margin-block: var(--space-y-48);
}

/* 回り込みの画像はクラシックテーマでは div.wp-block-image > figure.alignleft で出る。
   外側の div は高さを持たないので、余白は回り込む側の段落に任せる */
.p-news-detail__body > .wp-block-image:has(> :is(.alignleft, .alignright)) {
  margin-block: 0;
}

/* 先頭の上余白と末尾の下余白は、本文の padding が持つ。
   隠した空の段落を数えると、その隣の要素の余白が残る */
.p-news-detail__body > :nth-child(1 of :not(p:empty)) {
  margin-top: 0;
}

.p-news-detail__body > :nth-last-child(1 of :not(p:empty)) {
  margin-bottom: 0;
}

/* --- インライン ------------------------------------------------------------ */

.p-news-detail__body a {
  color: var(--color-brand);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* A1明朝はウエイトごとに別ファミリーで配信され、どれも font-weight 1〜1000 を
   名乗っている。太さだけ上げても Medium のまま描かれ、合成の太字も効かない */
.p-news-detail__body :where(strong, b) {
  font-family: var(--font-mincho-b);
  font-weight: normal;
}

/* インラインコードとキーボード入力。本文の字間が等幅フォントに乗ると
   文字がばらけるので、書体ごと替えて囲みで区別する */
.p-news-detail__body :where(code, kbd) {
  padding: 0.1em 0.4em;
  border-radius: 4px;
  font-family: var(--font-jp);
  font-size: 0.9em;
  letter-spacing: 0.05em;
}

.p-news-detail__body code {
  background-color: color-mix(in srgb, var(--color-text) 6%, transparent);
}

.p-news-detail__body kbd {
  border: 1px solid var(--color-text-faint);
}

/* 文中に挿入した画像（段落・リスト・表・見出し・キャプションで使える）。
   base.css の img は block なので、行の中へ戻す */
.p-news-detail__body :is(p, li, th, td, h1, h2, h3, h4, h5, h6, figcaption) img {
  display: inline-block;
  vertical-align: middle;
}

/* --- リスト ---------------------------------------------------------------- */

.p-news-detail__body :where(ul, ol) {
  padding-left: var(--space-x-24);
}

.p-news-detail__body ul {
  list-style: disc;
}

.p-news-detail__body ol {
  list-style: decimal;
}

.p-news-detail__body ul ul {
  list-style: circle;
}

.p-news-detail__body li + li,
.p-news-detail__body li > :is(ul, ol) {
  margin-top: var(--space-y-8);
}

/* --- 画像・キャプション ---------------------------------------------------- */

.p-news-detail__body :is(.wp-element-caption, .wp-caption-text) {
  margin: var(--space-y-12) 0 0;
  font-size: var(--fs-13);
  line-height: 1.75;
  color: var(--color-text-muted);
}

.p-news-detail__body :is(.alignleft, .alignright) {
  display: block;
  max-width: 50%;
  margin-top: 0;
}

.p-news-detail__body .alignleft {
  float: left;
  margin: 0 var(--space-x-40) var(--space-y-24) 0;
}

.p-news-detail__body .alignright {
  float: right;
  margin: 0 0 var(--space-y-24) var(--space-x-40);
}

.p-news-detail__body :is(.alignleft, .alignright) > figcaption {
  display: block;
}

.p-news-detail__body .aligncenter {
  margin-inline: auto;
}

/* WordPressの「角丸」は 9999px で、正方形でない画像は楕円に切り抜かれる。
   WORKSのカード画像と同じ角丸にする */
.p-news-detail__body .wp-block-image.is-style-rounded img {
  border-radius: 4px;
}

/* ショートコードの [gallery]。テーマが html5 の gallery を宣言しているため
   WordPressは列のCSSを出さない */
.p-news-detail__body .gallery {
  display: grid;
  grid-template-columns: repeat(var(--_gallery-cols, 3), minmax(0, 1fr));
  gap: var(--space-y-16) var(--space-x-16);
}

.p-news-detail__body .gallery-columns-1 { --_gallery-cols: 1; }
.p-news-detail__body .gallery-columns-2 { --_gallery-cols: 2; }
.p-news-detail__body .gallery-columns-4 { --_gallery-cols: 4; }
.p-news-detail__body .gallery-columns-5 { --_gallery-cols: 5; }
.p-news-detail__body .gallery-columns-6 { --_gallery-cols: 6; }
.p-news-detail__body .gallery-columns-7 { --_gallery-cols: 7; }
.p-news-detail__body .gallery-columns-8 { --_gallery-cols: 8; }
.p-news-detail__body .gallery-columns-9 { --_gallery-cols: 9; }

.p-news-detail__body .gallery-item img {
  width: 100%;
  height: auto;
}

/* --- 表 -------------------------------------------------------------------- */

/* 下層の .c-lower-table（ABOUTの会社概要）にそろえる。縦線と背景は持たず、
   行を破線で区切り、見出しは薄い文字色で示す。罫線はWordPressの実線を消して描き直す */
.p-news-detail__body .wp-block-table table {
  background-image: var(--line-dash-x);
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 100% 1px;
}

.p-news-detail__body .wp-block-table :is(thead, tfoot) {
  border: 0;
}

.p-news-detail__body .wp-block-table tr {
  background-image: var(--line-dash-x);
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 100% 1px;
}

.p-news-detail__body .wp-block-table :is(th, td) {
  padding: var(--space-y-20) var(--space-x-20);
  border: 0;
  line-height: 1.75;
}

.p-news-detail__body .wp-block-table :is(th, td):first-child {
  padding-left: 0;
}

.p-news-detail__body .wp-block-table :is(th, td):last-child {
  padding-right: 0;
}

.p-news-detail__body .wp-block-table th {
  font-weight: normal;
  color: var(--color-text-muted);
}

/* ストライプは地を白で塗らず、文字色をごく薄く敷く。
   色が付く分、両端のセルにも内側の余白を戻す */
.p-news-detail__body .wp-block-table.is-style-stripes {
  border-bottom: 0;
}

.p-news-detail__body .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background-color: color-mix(in srgb, var(--color-text) 4%, transparent);
}

.p-news-detail__body .wp-block-table.is-style-stripes :is(th, td) {
  padding-inline: var(--space-x-20);
}

/* --- ファイル -------------------------------------------------------------- */

.p-news-detail__body .wp-block-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-y-16) var(--space-x-24);
}

.p-news-detail__body .wp-block-file__embed {
  flex-basis: 100%;
}

.p-news-detail__body .wp-block-file__button {
  margin: 0;
  padding: var(--space-y-8) var(--space-x-24);
  border: 1px solid var(--color-text);
  border-radius: 0;
  background-color: transparent;
  font-size: var(--fs-14);
  color: var(--color-text);
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s;
}

@media (hover: hover) {
  .p-news-detail__body .wp-block-file__button:hover {
    background-color: var(--color-text);
    color: var(--color-bg);
  }
}

/* --- 区切り ---------------------------------------------------------------- */

/* 既定と幅広はサイト共通の破線にそろえる。ドットはWordPressの描画のまま */
.p-news-detail__body .wp-block-separator:not(.is-style-dots) {
  width: 100%;
  height: 1px;
  border: 0;
  background-image: var(--line-dash-x);
  background-size: 100% 1px;
  opacity: 1;
}

/* --- カラム ---------------------------------------------------------------- */

.p-news-detail__body .wp-block-column > * + * {
  margin-top: var(--space-y-24);
}

.p-news-detail__body .wp-block-column > :first-child {
  margin-top: 0;
}

/* --- 埋め込み -------------------------------------------------------------- */

/* テーマが responsive-embeds を宣言していなくても比率を保つ */
.p-news-detail__body .wp-block-embed iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

.p-news-detail__back {
  flex-shrink: 0;
}

/* ==========================================================================
   SP

   縦リズムはPC 120 の落とし先として --space-y-96 で受ける
   （docs/sp-strategy.md 決定14）。
   ========================================================================== */
@media (max-width: 767px) {
  /* 本文と「一覧へ戻る」の間。この2つしか子が無いので gap で持てる */
  .p-news-detail__layout {
    gap: var(--space-y-96) var(--space-x-96);
  }

  /* 上下の破線と本文の間 */
  .p-news-detail__body {
    padding-block: var(--space-y-96);
  }

  /* ブロックのギャラリーもWordPress側で2列に落ちる */
  .p-news-detail__body .gallery:not(.gallery-columns-1) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 回り込みは解いて、ほかの画像と同じ積み方にする */
  .p-news-detail__body :is(.alignleft, .alignright) {
    float: none;
    max-width: 100%;
    margin: var(--space-y-48) 0;
  }
}