/* ==========================================================================
   HI Voice — Article Content Style
   --------------------------------------------------------------------------
   記事本文（.entry-header / .entry-content / .hivoice-* ブロック）専用スタイル。

   このシートは「記事コンテンツの見た目」を作る CSS の単一ソースであり、
   下記の複数コンテキストから共有して読み込まれる:

     - フロント single 記事 / page_id=2（子テーマ functions.php で常時 enqueue）
     - ゲスト校正プラグインのゲストプレビュー（/guest-review/{token}/）
     - ゲスト校正プラグインの管理レビュー画面（wp-admin）

   ゲスト校正のプレビューはスナップショット HTML を .entry-content 内に描画するため、
   ここで定義されるセレクタ（.entry-content p.wp-block-paragraph 等）に依存する。
   セレクタ名・構造を変える場合は includes/class-preview.php / class-admin-ui.php への
   影響に注意すること。

   トークン（:root）は style.css の Article Style 層と同値を複製している
   （style.css 側は .fb-* レイアウトが同トークンを使うため残す）。値を変える際は両方を更新。
   ========================================================================== */


/* ==========================================================================
   Design Tokens（style.css と同値の複製。値変更時は両方を更新すること）
   ========================================================================== */

:root {
  /* ----- color ----- */
  --paper:    #ffffff;   /* 純白 */
  --paper-2:  #f3f5f7;   /* カード地 / ニュートラル */
  --ink:      #14171c;
  --ink-2:    #2a2e35;
  --mute:     #6b7280;
  --rule:     #e5e7eb;
  --rule-2:   #9ca3af;
  --accent:   #1f3a5c;

  /* ----- typography ----- */
  --ff-sans:  "Noto Sans JP", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --ff-serif: "Noto Serif JP", serif;

  /* ----- layout ----- */
  --container:  1200px;
  --article:    880px;
  --pad-x:      40px;
  --pad-x-sm:   24px;
}


/* ==========================================================================
   Entry Header — entry-header / entry-title
   ========================================================================== */

.entry-header {
  margin: 0;
}
/* セレクタを .entry-header .entry-title としているのは、ゲスト校正の管理レビュー画面
   （wp-admin）で common.css の `.wrap h1`(0,1,1) に負けないようにするため（(0,2,0) で勝つ）。
   padding はショートハンドで四辺明示（wp-admin 側の padding-top 9px を打ち消す）。 */
.entry-header .entry-title {
  margin: 0 0 48px;
  padding: 0 0 28px;
  border-bottom: 1px solid var(--ink);
  font-family: var(--ff-serif);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-wrap: pretty;
  overflow-wrap: anywhere;
  position: relative;
}
.entry-header .entry-title::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 96px; height: 3px;
  background: var(--accent);
}


/* ==========================================================================
   Entry Content
   ========================================================================== */

.entry-content {
  margin: 0;
}
.entry-content > * + * {
  /* WP のブロック間は標準で 24px 程度。各ブロックの margin を尊重するので
     ここでは何もしない。 */
}


/* ----- Figure ─ wp-block-image ----------------------------------------
   WP は二通りの構造を吐く:
     (a) <div class="wp-block-image"><figure>...<img/><figcaption/></figure></div>
     (b) <figure class="wp-block-image"><img/><figcaption/></figure>
   どちらにも当たる selectors を書く。
   先頭の (a) は hero として横にはみ出させる。
   ----------------------------------------------------------------------- */

.entry-content .wp-block-image {
  margin: 56px 0;
}
.entry-content .wp-block-image figure { margin: 0; }

/* 画像本体 */
.entry-content .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background:
    linear-gradient(135deg, rgba(31, 58, 92, 0.04), rgba(20, 23, 28, 0.06)),
    repeating-linear-gradient(45deg, #eef0f3 0 22px, #e1e4e9 22px 44px);
}

/* キャプション : WP は <figcaption class="wp-element-caption"> を出力 */
.entry-content .wp-block-image figcaption,
.entry-content .wp-element-caption {
  margin-top: 12px;
  font-family: var(--ff-sans);
  font-size: 12px;
  color: var(--mute);
  letter-spacing: 0.04em;
  text-align: right;
}

/* hero — entry-content の先頭画像 (div.wp-block-image) を横にはみ出させる */
.entry-content > div.wp-block-image:first-child {
  margin-top: 0;
  margin-left: calc(-1 * var(--pad-x));
  margin-right: calc(-1 * var(--pad-x));
  margin-bottom: 56px;
}


/* ----- Lead ─ hivoice-lead --------------------------------------------- */

.hivoice-lead {
  margin: 0 0 56px;
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 2.05;
  letter-spacing: 0.01em;
  color: var(--ink);
}


/* ----- Guest Card ─ hivoice-guest-card* -------------------------------- */

.hivoice-guest-card {
  margin: 0 0 40px;
  padding: 32px 32px 30px;
  background: var(--paper-2);
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}
.hivoice-guest-card__label {
  margin: 0 0 18px;
  padding-left: 14px;
  border-left: 2px solid var(--accent);
  font-family: var(--ff-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: var(--accent);
}
.hivoice-guest-card__name {
  margin: 0 0 6px;
  font-family: var(--ff-serif);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.hivoice-guest-card__attribute {
  margin: 0 0 18px;
  font-family: var(--ff-sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--mute);
}
.hivoice-guest-card__bio {
  margin: 0;
  font-family: var(--ff-serif);
  font-size: 14px;
  line-height: 1.95;
  color: var(--ink-2);
}


/* ----- Summary ─ hivoice-summary* -------------------------------------- */

/* 「この記事のポイント」は記事の要なので強めに。
   黒は重すぎるが、淡すぎても印象が弱まる。
   →紺(--accent)を地色に使う。色相がある分、黒より柔らかい強さが出る。 */
.hivoice-summary {
  margin: 0 0 80px;
  padding: 28px 32px 30px;
  background: var(--accent);          /* 紺地 */
  color: var(--paper);
  border-top: none;
}
.hivoice-summary__label {
  margin: 0 0 18px;
  padding-left: 14px;
  border-left: 2px solid var(--paper);  /* 縦罫も白へ */
  font-family: var(--ff-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: var(--paper);
  opacity: 0.85;
}
.hivoice-summary__list { margin: 0; padding: 0; list-style: none; }
.hivoice-summary__list li {
  padding: 14px 0 14px 1.2em;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--paper);
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.85;
  text-indent: -1.2em;
}
.hivoice-summary__list li:first-child { border-top: none; }
.hivoice-summary__list li::before {
  content: "—\00a0";
  color: var(--paper);
  opacity: 0.7;
}


/* ----- Heading (H2) ─ wp-block-heading --------------------------------- */

.entry-content h2.wp-block-heading {
  margin: 88px 0 28px;
  padding-top: 28px;
  padding-bottom: 0;
  border-top: 1px solid var(--ink);
  border-bottom: none;
  font-family: var(--ff-sans);
  font-weight: 900;
  font-size: 28px;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-wrap: pretty;
  position: relative;
}
.entry-content h2.wp-block-heading::before {
  content: "";
  position: absolute;
  left: 0; top: -1px;
  width: 64px; height: 3px;
  background: var(--accent);
}


/* ----- Paragraph ─ wp-block-paragraph ---------------------------------- */

.entry-content p.wp-block-paragraph {
  margin: 0 0 26px;
  font-family: var(--ff-serif);
  font-size: 17px;
  font-weight: 400;
  line-height: 2.1;
  letter-spacing: 0.015em;
  color: var(--ink);
}

/* インタビュー質問(聞き手の発言): ブロックスタイル「質問(インタビュー)」
   ※ 直前の p.wp-block-paragraph と同詳細度のため、必ずこの位置(後方)に置くこと */
.entry-content p.is-style-hivoice-interview-question {
  font-weight: 700;
  margin: 2.5em 0 26px;
}
.entry-content p.is-style-hivoice-interview-question::before {
  content: "\2500\2500"; /* ── */
  margin-right: 0.5em;
  font-weight: 400;
}


/* ----- Separator ─ wp-block-separator ---------------------------------- */

.entry-content hr.wp-block-separator {
  width: 64px;
  height: 0;
  margin: 80px auto;
  border: none;
  border-top: 2px solid var(--accent);
  overflow: visible;
  background: none;
}


/* ----- Postscript ─ hivoice-postscript* -------------------------------- */

.hivoice-postscript {
  margin: 0;
  padding: 32px;
  background: var(--paper-2);
  border-left: 3px solid var(--accent);
}
.hivoice-postscript__label {
  margin: 0 0 16px;
  font-family: var(--ff-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: var(--accent);
}
.hivoice-postscript__content {
  font-family: var(--ff-serif);
  font-size: 15px;
  line-height: 2;
  color: var(--ink-2);
}


/* ==========================================================================
   Responsive — 720px 以下（記事コンテンツ関連のみ）
   ========================================================================== */

@media (max-width: 720px) {
  .entry-header .entry-title     { font-size: 22px;
                                   margin-bottom: 36px;
                                   padding-bottom: 22px; }

  .entry-content > div.wp-block-image:first-child {
    margin-left: calc(-1 * var(--pad-x-sm));
    margin-right: calc(-1 * var(--pad-x-sm));
  }

  .hivoice-lead                  { font-size: 17px; line-height: 1.95; }
  .entry-content h2.wp-block-heading { font-size: 22px; margin-top: 64px; }
  .entry-content p.wp-block-paragraph { font-size: 16px; line-height: 2; }

  .hivoice-guest-card,
  .hivoice-summary,
  .hivoice-postscript            { padding: 24px 22px; }
  .hivoice-guest-card__name      { font-size: 22px; }
}


/* ==========================================================================
   Single post spacing — ヘッダー/パンくず/H1 の縦間隔調整
   （article-content.css は全フロントで読み込まれるためレイアウト系は body.single に限定）
   ========================================================================== */

/* ヘッダー下罫線 → パンくず = 36px（PC）。
   .fb-layout(top 40px) + .fb-layout__content(top 72px) の二重 padding を content 側へ一本化する。 */
body.single .fb-layout {
  padding-top: 0;              /* padding-bottom:40px は維持（top のみ上書き） */
}
body.single .fb-layout__content {
  padding-top: 36px;           /* padding-bottom:96px は維持 */
}

/* パンくず → H1 = 18px（PC）。margin-bottom(48px) は維持し top のみ付与。 */
body.single .entry-header .entry-title {
  margin-top: 18px;
}

@media (max-width: 720px) {
  /* ヘッダー下罫線 → パンくず = 24px（モバイル） */
  body.single .fb-layout__content {
    padding-top: 24px;
  }
  /* パンくず → H1 = 14px（モバイル）。margin-bottom(36px) は維持 */
  body.single .entry-header .entry-title {
    margin-top: 14px;
  }
}