/*
Theme Name: ハミール訪問歯科 コラム
Theme URI: https://hamille-houmon-tokyo.com/column/
Description: 訪問歯科サイト（hamille-houmon-tokyo.com）と同じ見た目のコラム用テーマ。配色・文字サイズ・折り返しの規則は本体の subpage.css と site-premium.css をそのまま読み、ここには差分だけを書く。
Author: Tokiwa
Version: 0.1.0
Requires PHP: 8.0
License: 制作受託（医療法人 歯科ハミール）
Text Domain: hamille-column
*/

/* ──────────────────────────────────────────────────────────
   ここに書くのはコラム専用の差分だけ。
   色・文字サイズはトークン（--text-body 等）を使い、px を直に書かない。
   本文 19px / 注記 17px は本体と同じ（2026-09-20 に引き上げ済み）。
   ────────────────────────────────────────────────────────── */

/* ── 一覧 ───────────────────────────────────────────────── */
.column-list {
  display: grid;
  gap: 16px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.column-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: 0 4px 16px rgba(9, 17, 60, 0.05);
  overflow: hidden;
}

/* 行全体を押せるようにする（押せる範囲は 44px 以上・WCAG 2.2）。
   トップの 5 院一覧と同じ考え方。 */
.column-card__link {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 18px;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
}
.column-card__link:hover .column-card__title,
.column-card__link:focus-visible .column-card__title {
  text-decoration: underline;
}

.column-card__thumb img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--radius-card) - 6px);
  margin-bottom: 14px;
}

.column-card__date {
  display: block;
  font-size: var(--text-note);
  color: var(--ink-soft);
}

.column-card__title {
  display: block;
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: var(--text-sub-sm);
  font-weight: 700;
  line-height: 1.5;
  color: var(--navy-deep);
}

.column-card__excerpt {
  display: block;
  margin-top: 8px;
  font-size: var(--text-body);
  line-height: 1.8;
  color: var(--ink);
}

@media (min-width: 720px) {
  .column-card__link {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 0 20px;
    align-items: start;
    padding: 22px;
  }
  .column-card__thumb img { margin-bottom: 0; }
}

/* ── 記事 ───────────────────────────────────────────────── */
.column-article__crumb {
  margin: 0 0 12px;
  font-size: var(--text-note);
  color: var(--ink-soft);
}

.column-article__head { margin-bottom: 20px; }

.column-article__date {
  margin: 0 0 6px;
  font-size: var(--text-note);
  color: var(--ink-soft);
}

.column-article__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-head);
  font-weight: 700;
  line-height: 1.45;
  color: var(--navy-deep);
}

.column-article__hero img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  margin: 0 0 24px;
}

/* 本文。職員が管理画面で書くので .jp-keep は付かない。
   折り返しは本体の :lang(ja) の規則に任せ、ここでは
   1 行が長くなりすぎないよう幅の上限だけ置く（1 行 40 字前後）。 */
.column-article__body {
  max-width: 38em;
  font-size: var(--text-body);
  line-height: 1.9;
  color: var(--ink);
}
.column-article__body > * + * { margin-top: 1.2em; }
.column-article__body h2 {
  margin-top: 2em;
  font-family: var(--font-display);
  font-size: var(--text-sub);
  line-height: 1.5;
  color: var(--navy-deep);
}
.column-article__body h3 {
  margin-top: 1.6em;
  font-family: var(--font-display);
  font-size: var(--text-sub-sm);
  line-height: 1.5;
  color: var(--navy-deep);
}
.column-article__body ul,
.column-article__body ol { padding-left: 1.4em; }
.column-article__body li + li { margin-top: 0.5em; }
.column-article__body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}
.column-article__body blockquote {
  margin: 1.6em 0;
  padding: 12px 18px;
  border-left: 4px solid var(--navy);
  background: var(--paper);
}
.column-article__body a { color: var(--navy); }

.column-article__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: var(--text-note);
}
/* 前後の記事のリンク。見出しを丸ごと出すので、最終行に 1 字だけ
   残りやすい。短い要素と同じ扱い（text-wrap: balance）で行を揃える。 */
.column-article__nav a {
  color: var(--navy);
  text-wrap: balance;
}
.column-article__nav span { max-width: 32em; }

.column-article__back { margin-top: 28px; }

/* ── 最後の相談への導線 ─────────────────────────────────── */
.column-cta__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

/* ── ページ送り ─────────────────────────────────────────── */
.pagination {
  margin-top: 28px;
  font-size: var(--text-body);
}
.pagination .page-numbers {
  display: inline-block;
  min-width: 44px;
  min-height: 44px;
  padding: 10px 14px;
  margin: 0 4px 8px 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  text-align: center;
  text-decoration: none;
  color: var(--navy);
  background: var(--white);
}
.pagination .page-numbers.current {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

/* 記事がまだ無いときの一文。本体の「長い地の文は両端揃え」の規則が効くと
   1 行の字数が少ないぶん字間が大きく開く（実機で「こ れ か ら 記 事 を」と
   なるのを確認）。短い一文なので左揃えに戻す。 */
/* 本体側の :lang(ja) .section > .container > p（両端揃え）より詳しく書く。
   !important は使わない（本体では 2 層目の規則にだけ許している）。 */
:lang(ja) .section > .container > p.column-empty,
.column-empty {
  text-align: start;
  font-size: var(--text-body);
}