/* ==========================================================================
   column.css
   超精密加工技術コラム 一覧・詳細ページ専用スタイル
   対象: column/index.html / column/article.html

   ※ .p-proposal__filter / .p-proposal__filter-title は proposal.css を流用
   ※ .c-info-list は common.css を流用
   ※ .case-pagination は case.css を流用
   ※ ブロックエディタ本文スタイルは entry-content.css を参照
   ========================================================================== */


/* ── セクション見出し（「すべて」等のカテゴリー名） ── */
.p-column__section-heading {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  margin-top: var(--sp-xl);
  margin-bottom: var(--sp-xl);
}


/* ==========================================================================
   COLUMN ARTICLE DETAIL  (column/article.html)
   ========================================================================== */

/* ── 記事ヘッダー: 日付＋タグ行 ── */
.p-column-article__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5em var(--sp-sm);
  margin-bottom: var(--sp-md);
}

.p-column-article__meta-date {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  font-family: var(--font-en);
  margin-right: 0.3em;
}

/* ── 記事タイトル (H1) ── */
.p-column-article__title {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  color: var(--color-darkblue);
  line-height: 1.35;
  margin-bottom: var(--sp-xl);
  padding-bottom: var(--sp-md);
  border-bottom: 2px solid var(--color-border);
}

/* ── 関連するコラム セクション ── */
.p-column-article__related {
  margin-top: var(--sp-3xl);
}

/* 関連見出し: ダークブルー帯 */
.p-column-article__related-heading {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  background-color: var(--color-darkblue);
  padding: var(--sp-md) var(--sp-lg);
  margin-bottom: 0;
  line-height: 1.4;
}


/* ==========================================================================
   RESPONSIVE - 768px (Tablet Portrait / Smartphone)
   ========================================================================== */
@media (max-width: 768px) {
  .p-column__section-heading {
    font-size: var(--fs-2xl);
    margin-top: var(--sp-lg);
    margin-bottom: var(--sp-lg);
  }

  .p-column-article__title {
    font-size: var(--fs-xl-mid);
  }

  .p-column-article__related-heading {
    font-size: var(--fs-lg);
    padding: var(--sp-sm-md) var(--sp-md);
  }
}