/* ═══ 記事ページ共通スタイル（single.php / archive.php）═══ */

/* ── 記事ヘッダー ─────────────────────────────────── */
.c-article-header { margin-bottom: var(--spacing-lg); }
.c-article-header__cat {
  display: inline-block;
  margin-bottom: var(--spacing-sm);
}
.c-article-header__title {
  font-size: var(--fs-h1);
  font-weight: var(--font-weight-black);
  line-height: 1.4;
  margin-bottom: var(--spacing-sm);
}
.c-article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}
.c-article-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ── アイキャッチ ─────────────────────────────────── */
.c-article-thumb {
  margin-bottom: var(--spacing-lg);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.c-article-thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 800 / 450;
  object-fit: cover;
}

/* ── 記事カード（関連記事・一覧共通）──────────────── */
.c-article-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
}
/* スマホは1列（画像上・本文下）。1カラムのままタブレットへ入ると
   サムネイルだけが400px超に育つので、600pxで2カラムへ移す。
   3カラムはヘッダーのPC切り替えと同じ 900px から。
   768px で3カラムにすると1枚あたり約230pxになり、タイトルが3行に割れる
   （タブレット縦は2カラムのほうが読める）。 */
@media (min-width: 600px) {
  .c-article-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .c-article-grid { grid-template-columns: repeat(3, 1fr); gap: var(--spacing-lg); }
}

/* カード全体が1つのa要素。中に別のリンクを置かないので押せる範囲は明確 */
.c-article-card {
  display: block;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}
.c-article-card:hover,
.c-article-card:focus-visible {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-primary);
  transform: translateY(-4px);
  text-decoration: none;
}
.c-article-card__thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 400 / 225;
  object-fit: cover;
}
.c-article-card__thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-light);
  color: var(--color-border);
}
.c-article-card__thumb--placeholder .c-icon-svg { width: 2rem; height: 2rem; }
.c-article-card__body { padding: var(--spacing-md); }
.c-article-card__cat {
  display: inline-block;
  margin-bottom: var(--spacing-sm);
  font-size: var(--fs-caption);
}
.c-article-card__title {
  font-size: var(--fs-h3);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: var(--lh-heading);
  margin-bottom: var(--spacing-xs);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.c-article-card__excerpt {
  font-size: var(--fs-meta);
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: var(--spacing-sm);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.c-article-card__date {
  font-size: var(--fs-caption);
  color: var(--color-text-secondary);
}

/* ★ スマホを横型にする指定は置かない（2026-09-07・実測して撤去）★
   以前ここに次の3行があった。

       .c-article-card       { grid-template-columns: 120px 1fr; align-items: stretch; }
       .c-article-card__thumb{ height: 100%; aspect-ratio: auto; }

   `.c-article-card__thumb` は <img> そのもので、**高さの定まらないグリッド行**に
   `height:100%` を当て、さらに `aspect-ratio:auto` で属性由来の比率（400x225）を
   打ち消していた。その結果 img が 1500px まで伸び、`align-items:stretch` で本文も
   それに追従し、カード1枚が 1502px になっていた（本番 375/390 で実測）。

   横型そのものが原因ではないが、**縦積み1列へ戻すのが今回の方針**なので
   上書きごと外し、上の基本スタイル（画像上・本文下・aspect-ratio 400/225）に任せる。
   高さは画像の比率だけで決まり、本文の量に引きずられない。 */
@media (max-width: 599px) {
  .c-article-card__title { font-size: var(--fs-body); }
}

/* ── アーカイブ見出し ─────────────────────────────── */
.c-archive-hero__title {
  font-size: var(--fs-h1);
  font-weight: var(--font-weight-black);
  margin-bottom: var(--spacing-sm);
}
.c-archive-hero__desc {
  color: var(--color-text-secondary);
  font-size: var(--fs-body);
  line-height: 1.8;
}
.c-article-grid--archive { margin-bottom: var(--spacing-xl); }

/* ── ページネーション（WP標準 paginate_links の出力に対応）── */
.c-pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-xl);
}
.c-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--spacing-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-size: var(--fs-caption);
}
.c-pagination .page-numbers.current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}
.c-pagination a.page-numbers:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  text-decoration: none;
}

/* ── 前後記事ナビゲーション ───────────────────────── */
.c-post-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-sm);
  margin: var(--spacing-xl) 0;
}
@media (min-width: 768px) {
  .c-post-nav { grid-template-columns: 1fr 1fr; }
}
.c-post-nav__link {
  display: block;
  padding: var(--spacing-md);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.c-post-nav__link:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-card);
  text-decoration: none;
}
.c-post-nav__link--next { text-align: right; }
.c-post-nav__label {
  display: block;
  font-size: var(--fs-caption);
  color: var(--color-primary);
  margin-bottom: 4px;
}
.c-post-nav__title {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--fs-caption);
  color: var(--color-text-secondary);
}

/* ── アーカイブ系ツールバー（件数・並び順）───────── */
.c-archive-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}
.c-archive-toolbar__sort { display: flex; gap: var(--spacing-md); }
.c-archive-toolbar__sort a { color: var(--color-text-muted); }
.c-archive-toolbar__sort a.is-current { color: var(--color-primary); font-weight: var(--font-weight-bold); text-decoration: underline; }

/* ── 検索フォーム ─────────────────────────────────── */
.c-search-form {
  display: flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.c-search-form__input {
  flex: 1;
  border: none;
  padding: 10px var(--spacing-sm);
  font-size: var(--fs-caption);
  color: var(--color-text-primary);
}
.c-search-form__input:focus { outline: none; }
.c-search-form__btn {
  border: none;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: 0 var(--spacing-md);
  cursor: pointer;
  display: flex;
  align-items: center;
}
.c-search-form__btn .c-icon-svg { width: 1.1em; height: 1.1em; }

/* ── カテゴリー一覧（サイドバー）──────────────────── */
.c-archive-cat-list {
  margin-top: var(--spacing-md);
  padding: var(--spacing-md);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
}
.c-archive-cat-list__heading {
  font-size: var(--fs-caption);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-sm);
}
.c-archive-cat-list ul { list-style: none; padding: 0; margin: 0; }
.c-archive-cat-list li + li { margin-top: var(--spacing-xs); }
.c-archive-cat-list a {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-caption);
  color: var(--color-text-secondary);
  padding: 4px 0;
}
.c-archive-cat-list a:hover, .c-archive-cat-list a.is-current { color: var(--color-primary); }
.c-archive-cat-list__count { color: var(--color-text-muted); }

/* ── お問い合わせ導線（CTAブロック下の小さな注記）──── */
.c-article-contact-note {
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  margin-top: var(--spacing-sm);
}