/* ============================================================
   KABUKI blog.css（ブログ一覧 home.php 専用 + 詳細と共用のコンポーネント）
   Figma: node 478:3024（PC）/ 478:3078（SP）
   色・フォント値は必ず tokens.css の var() を参照する。

   ⚠️ single.css はこのファイルを @import して c-blog-masthead /
   p-blog__card* / p-blog__section-heading 等を再利用する
   （inc/enqueue.php の仕組み上ページ別 CSS は1枚しか読み込まれないため）。
   ============================================================ */

:root {
  /* Figma のフォントサイズトークンに 28px/40px が無いため、ブログ詳細の
     記事タイトル（PC 40px / SP 28px）用にページスコープの補助トークンを追加する。
     tokens.css への追加候補として完了報告に明記。 */
  --fs-28: 1.75rem;
  --fs-40: 2.5rem;

  /* 本文の行間190%（Figma: 本文 / 18px・行間190%）。2026-07-29: tokens.css にグローバル
     --lh-body(1.8) を追加したが、記事本文はこのページ固有の1.9が正しい実測値のため、
     ローカル :root で意図的に上書きして据え置く（グローバル値と衝突させない）。 */
  --lh-body: 1.9;

  /* Figma 実測のキャプション色 #727272 は tokens.css に無いため、
     直書きを避けて既存トークンからの color-mix() で近似導出する。
     表罫線色 #CCCCCC は 2026-07-29 に tokens.css へグローバル --color-table-border として
     昇格したため、ここでのローカル定義（color-mix近似）は廃止しグローバル値を使う。 */
  --color-caption-gray: color-mix(in srgb, var(--color-black) 58%, var(--color-white) 42%);
}

/* ================================================
   c-blog-masthead（ブログ共通マスト、黒帯）
   Figma: 一覧 478:3024 / 詳細 483:3557 内 Frame 17（共通）
   確定版構成（2026-07-29 get_design_context 実測）: eyebrow「カブキブログ」+
   見出し「Blog」を縦積みした heading-block と、リード文を横並びに配置
   （採用 Hero / 会社概要 Hero と同じ「eyebrow+英字大見出し＋タグライン右」パターン）。
   PCでの heading-block 右端(343)→リード左端(393)の実測ギャップ=50pxを採用。
   ================================================ */
.c-blog-masthead {
  background-color: var(--color-black);
  color: var(--color-white);
}

.c-blog-masthead__inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-block: 32px 24px;
}

@media (min-width: 768px) {
  .c-blog-masthead__inner {
    flex-direction: row;
    align-items: center;
    gap: 50px; /* Figma実測: heading-block右端343→リード左端393（node 478:3024、2026-07-29 QA） */
    padding-block: 56px 40px;
  }
}

.c-blog-masthead__heading-block {
  /* 2026-08-03 SOTA決定（Hero見出しブロックのカノニカル型統一）: DOM順を
     Blog→カブキブログに変更、align-items:flex-start を明示（他ページと共通の
     ブロック構造）。 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

@media (min-width: 768px) {
  .c-blog-masthead__heading-block {
    flex-shrink: 0;
  }
}

.c-blog-masthead__sub {
  /* 2026-08-03 SOTA決定: 全ページ共通の日本語ラベルサイズ（SP=fs-14 / PC=fs-18）に統一
     （旧実装はブレークポイント共通18pxだった。Figma実測 18px-Bold は node 478:3028、
     2026-07-29 QA、PC側の値として引き続き有効）。 */
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
}

@media (min-width: 768px) {
  .c-blog-masthead__sub {
    font-size: var(--fs-18);
  }
}

.c-blog-masthead__heading {
  /* 採用Hero（p-recruit__hero-title）と同じ推定スケールを踏襲（SP: fs-32*1.5=48px） */
  font-size: calc(var(--fs-32) * 1.5);
  color: var(--color-white);
}

@media (min-width: 768px) {
  .c-blog-masthead__heading {
    /* Figma実測 96px = fs-48*2（node 478:3027、2026-07-29 QA。旧48px固定から修正） */
    font-size: calc(var(--fs-48) * 2);
  }
}

.c-blog-masthead__lead {
  font-size: var(--fs-14);
  line-height: var(--lh-jp);
  color: var(--color-white);
  max-width: 640px;
}

@media (min-width: 768px) {
  .c-blog-masthead__lead {
    font-size: var(--fs-22); /* Figma実測 22px-Bold（node 478:3030、2026-07-29 QA。旧16pxから修正） */
    font-weight: var(--fw-bold); /* Figma実測 Bold（旧: 太字指定なし） */
    max-width: 829px; /* Figma実測 w829px（node 478:3030、2026-07-29 QA。旧640pxから修正） */
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* ================================================
   セクション見出し（新着記事一覧 / おすすめ記事一覧 / 関連する記事一覧）
   ================================================ */
.p-blog__section-heading {
  font-size: var(--fs-22);
  font-weight: var(--fw-bold);
  color: var(--color-black);
  margin-bottom: 16px;
}

/* SP: 新着記事一覧・おすすめ記事一覧の見出しはセンター揃え（田中さん指摘、2026-07-31）。
   関連する記事一覧・この記事を書いた人（single.php 専用）はこの指摘の対象外のため、
   クラス全体ではなく .p-blog__list / .p-blog__recommended にスコープして適用する。 */
.p-blog__list .p-blog__section-heading,
.p-blog__recommended .p-blog__section-heading {
  text-align: center;
}

@media (min-width: 768px) {
  .p-blog__section-heading {
    font-size: var(--fs-32); /* Figma実測 32px-Bold（node 478:3039、2026-07-29 QA。旧24pxから修正） */
    margin-bottom: 24px;
  }

  /* 見出し→カード間の実測ギャップはセクションごとに異なる
     （新着記事一覧: 81-51=30px / おすすめ記事一覧: 91-51=40px、2026-07-29 QA） */
  .p-blog__list .p-blog__section-heading {
    margin-bottom: 30px;
  }

  .p-blog__recommended .p-blog__section-heading {
    margin-bottom: 40px;
  }

  /* PC は既存の左揃えを維持（SP専用のセンター揃えを打ち消す）。 */
  .p-blog__list .p-blog__section-heading,
  .p-blog__recommended .p-blog__section-heading {
    text-align: left;
  }
}

.p-blog__list,
.p-blog__recommended,
.p-blog__related {
  padding-block: 32px;
}

@media (min-width: 768px) {

  .p-blog__list,
  .p-blog__recommended,
  .p-blog__related {
    padding-block: 40px;
  }

  /* Figma実測: 新着/おすすめ/関連記事一覧はいずれも実効コンテンツ幅900px・中央寄せ
     （一覧 478:3024 Frame 592・597 / 詳細 483:3557 Frame 574・573、x=270,w=900、
     2026-07-29 QA。現行の共通 .l-container は実効1120px=1200-40*2）。
     box-sizing: border-box のため、実効900pxにするには
     max-width に padding-inline 分（40px×2）を足し戻す必要がある
     （base.css の .l-container 定義自体は変更しない・スコープを絞った上書き）。 */
  .p-blog__list .l-container,
  .p-blog__recommended .l-container,
  .p-blog__related .l-container {
    max-width: calc(900px + var(--space-container-pc) * 2);
  }
}

.p-blog__empty {
  font-size: var(--fs-16);
  color: var(--color-gray-text);
}

/* ================================================
   p-blog__card（横長カード。new/related は default、recommended は compact）
   Figma: Group 146（default, 900x171）/ Frame 567（compact, 900x128）
   ================================================ */
.p-blog__card-list {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Figma実測（カード間隔、新着/おすすめ共に20px、SP 478:3078 Frame 588も同値、2026-07-30 QA。旧16pxから修正） */
}

.p-blog__card-link {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--color-black);
}

/* default バリアント（新着記事/関連する記事一覧）は罫線区切りではなく
   個別カード（背景+枠+角丸）。SP 478:3078 Frame 588（Component 12〜14）でも
   同一の背景+枠+角丸+15px paddingを確認（2026-07-30 QA）。旧実装はPCのみ適用で
   SPは無地のままだった。 */
.p-blog__card--default .p-blog__card-link {
  padding: 15px;
  border: 1px solid var(--color-table-border);
  border-radius: 8px;
  background-color: var(--color-bg-section);
}

/* compact バリアント（おすすめ記事一覧・関連する記事一覧）はSPでも横並びの
   罫線区切りリスト行（Figma SP 478:3078 Component 15、サムネ108x61＋テキスト、
   罫線下線）。旧実装は768px未満でdefaultと同じ縦積みになっていた（2026-07-30 QA）。 */
.p-blog__card--compact .p-blog__card-link {
  flex-direction: row;
  align-items: center;
  gap: 15px; /* Figma実測 SP: thumb右端108→テキスト左端123 */
  padding-block: 12px;
  border-bottom: 1px solid var(--color-table-border);
}

@media (min-width: 768px) {
  .p-blog__card-link {
    flex-direction: row;
    align-items: center;
    gap: 24px;
    padding-block: 16px;
    border-bottom: 1px solid var(--color-table-border); /* Figma実測 #CCCCCC（divider Vector 92、2026-07-29 QA。旧--color-grayから修正） */
  }

  .p-blog__card--compact .p-blog__card-link {
    gap: 24px;
    padding-block: 16px;
  }
}

.p-blog__card-thumb {
  display: block;
  aspect-ratio: 16 / 9; /* Figma実測 210x119(default)/160x90(compact) ≒16:9（2026-07-29 QA。旧3:2から修正） */
  border-radius: 5px; /* Figma実測 rounded-5px（2026-07-29 QA。旧8pxから修正） */
  overflow: hidden;
  background-color: var(--color-gray);
  flex-shrink: 0;
}

.p-blog__card--compact .p-blog__card-thumb {
  width: 108px; /* Figma実測 SP 478:3078 Component 15 Rectangle 90（108x61、2026-07-30 QA） */
}

@media (min-width: 768px) {
  .p-blog__card--default .p-blog__card-thumb {
    width: 210px;
  }

  .p-blog__card--compact .p-blog__card-thumb {
    width: 160px;
  }

  .p-blog__card--default .p-blog__card-body {
    gap: 34px; /* Figma実測（node 486:4372 内 body column、2026-07-29 QA。旧8pxから修正） */
  }
}

.p-blog__card-thumb-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.p-blog__card-thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-blog__card-thumb-placeholder-image {
  width: 32%;
  height: auto;
  opacity: 0.25;
}

.p-blog__card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

.p-blog__card-title {
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  line-height: var(--lh-jp);
}

@media (min-width: 768px) {
  .p-blog__card--default .p-blog__card-title {
    font-size: var(--fs-18);
  }
}

.p-blog__card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

@media (min-width: 768px) {
  .p-blog__card-meta {
    gap: 20px; /* Figma実測(2026-07-29 QA。旧12pxから修正) */
  }
}

.p-blog__card-date {
  font-family: var(--font-en);
  font-size: var(--fs-12);
  color: var(--color-gray-text);
}

@media (min-width: 768px) {
  .p-blog__card-date {
    font-size: var(--fs-18); /* Figma実測 18px-Bold（2026-07-29 QA。旧12pxから修正） */
    font-weight: var(--fw-bold);
    color: var(--color-black); /* Figma実測 黒文字（旧: gray-textから修正） */
  }
}

.p-blog__card-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-black); /* Figma実測: 塗りなし・黒枠（2026-07-29 QA。旧: 塗りgrayから修正） */
  font-size: var(--fs-10); /* Figma実測 10px-Regular（旧12pxから修正） */
  font-weight: var(--fw-regular); /* 旧boldから修正 */
  color: var(--color-black);
}

.p-blog__card-button {
  /* Figma実測: SP 478:3078 の新着記事カード（Component 12〜14）にはボタン要素が
     存在しない（「記事を読む」導線はPCのみ。2026-07-30 QA）。旧実装はSPでも
     表示されていた。 */
  display: none;
}

@media (min-width: 768px) {
  .p-blog__card-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    padding: 10px 20px;
    border-radius: var(--radius-pill);
    background-color: var(--color-black);
    color: var(--color-white);
    font-size: var(--fs-14);
    font-weight: var(--fw-bold);
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* compact バリアント（おすすめ記事一覧）: 日付・ボタン無し、タイトルは2行程度を想定 */
.p-blog__card--compact .p-blog__card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 初期表示件数（3件）を超える分は hidden 属性で隠しておき、
   assets/js/pages/blog.js の「もっと見る」クリックで解除する。 */
.p-blog__card[hidden] {
  display: none;
}

/* ================================================
   おすすめ記事一覧「もっと見る」ボタン
   Figma: おすすめ記事一覧の直下・中央配置の黒ピルボタン（234x51）
   遷移先アーカイブが無いため、hidden 解除のトリガーボタンとして実装（home.php のみ）。
   ================================================ */
.p-blog__recommended-more {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

@media (min-width: 768px) {
  .p-blog__recommended-more {
    margin-top: 50px; /* Figma実測（node 478:3432 位置、2026-07-29 QA。旧24pxから修正） */
  }
}

/* このボタンは凍結済み components.css の .c-btn（display: inline-flex）を継承しており、
   その author-level 指定がブラウザ既定の [hidden]{display:none} より優先されて
   hidden 属性だけでは実際に隠れない。明示的に上書きする。 */
.p-blog__recommended-more-button[hidden] {
  display: none;
}

.p-blog__recommended-more-button {
  width: 234px;
  height: 51px;
  background-color: var(--color-black);
  color: var(--color-white);
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
}

@media (min-width: 768px) {
  .p-blog__recommended-more-button {
    height: 54px; /* Figma実測（旧51pxから修正） */
  }
}

/* ================================================
   ページネーション（the_posts_pagination() 出力のコアクラスをスタイリング）
   Figma: Frame 515「01 02 03 04 … 14」
   ================================================ */
/* Figma実測（一覧 PC 478:3024 / SP 478:3078 とも同一 Frame 515「01 02 03 04 … 14」、
   2026-07-29〜30 QA）: 数字は枠なしテキスト（非アクティブ=gray-text/現在ページ=黒文字、
   共にBold）、矢印ボタンのみ白地グレー枠40x40角丸5px。旧実装はSPのみ数字が36x36の円形、
   現在ページ=黒塗り反転、矢印ボタンも黒塗りのままだった（PCのみ2026-07-29に修正済みで
   SP側が取り残されていた）。 */
.p-blog__list .pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px; /* Figma実測（PC/SPとも20px。Figma上は矢印-数字間31px/数字間20pxの二重構造だが
                flat な page-numbers 構造のため単一値に簡略化・判断。旧8pxから修正） */
  margin-top: 40px; /* 旧32pxから修正 */
}

.p-blog__list .pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-en);
  font-size: var(--fs-18); /* 旧14pxから修正 */
  font-weight: var(--fw-bold);
  color: var(--color-gray-text); /* 非アクティブ数字。旧: 黒文字固定だった */
}

.p-blog__list .pagination .page-numbers.current {
  background-color: transparent; /* 旧: 黒塗り反転だった */
  color: var(--color-black);
}

.p-blog__list .pagination .page-numbers.dots {
  color: var(--color-gray-text);
}

.p-blog__list .pagination .prev,
.p-blog__list .pagination .next {
  min-width: 40px; /* 旧36pxから修正 */
  height: 40px;
  border-radius: 5px; /* 旧: 円形(50%)だった */
  border: 1px solid var(--color-gray);
  background-color: rgb(255 255 255 / 90%); /* 旧: 黒塗りだった */
  color: var(--color-black);
}

.p-blog__pagination-arrow {
  display: inline-flex;
  width: 14px;
  height: 10px;
}

.p-blog__pagination-arrow svg {
  width: 100%;
  height: 100%;
}

.p-blog__pagination-arrow--prev svg {
  transform: scaleX(-1);
}