/* ==========================================================================
   column-list.css — コラム一覧（投稿ページ home.php）専用スタイル
   詳細記事は column.css。本ファイルは一覧（カード・hero・パンくず・ページ送り）。
   slug 'column' のとき functions.php で enqueue。News の視覚言語を踏襲。
   ========================================================================== */

/* ---------- HERO ---------- */
.column-page-hero {
  padding: 88px 0 28px;
  text-align: center;
  background: linear-gradient(180deg, rgba(87, 195, 194, 0.06), rgba(255, 255, 255, 0));
}
.column-page-hero .container { max-width: 760px; }
.column-page-hero h1 {
  font-size: clamp(26px, 4.4vw, 36px);
  color: var(--c-text-sumi, #333);
  letter-spacing: 0.04em;
  margin: 6px 0 12px;
}
.column-page-hero .lead {
  font-size: 15px; line-height: 1.9;
  color: var(--muted, #555);
}

/* ---------- パンくず ---------- */
.column-list-breadcrumb {
  font-size: 12px; color: var(--muted, #555);
  padding: 6px 0 0;
}
.column-list-breadcrumb a { color: var(--ocean-500, #2F5D62); text-decoration: none; }
.column-list-breadcrumb a:hover { text-decoration: underline; }
.column-list-breadcrumb .sep { margin: 0 6px; color: #c0c4c5; }

/* ---------- 一覧セクション ---------- */
.column-list-section { padding: 28px 0 72px; }

.column-card-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.column-card { margin: 0; }
.column-card-link {
  display: flex; flex-direction: column; height: 100%;
  background: var(--c-brand-white, #FAFAFA);
  border: 1px solid var(--section-border, #e8eced);
  border-radius: 12px; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.column-card-link:hover {
  border-color: var(--turquoise-400, #57C3C2);
  box-shadow: 0 6px 18px rgba(47, 93, 98, 0.08);
  transform: translateY(-2px);
}

.column-card-thumb { display: block; aspect-ratio: 16 / 9; background: var(--c-brand-white, #FAFAFA); overflow: hidden; }
.column-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.column-card-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 20px; flex: 1; }
.column-card-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.column-card-date { font-size: 12px; color: var(--muted, #555); letter-spacing: 0.04em; }
.column-card-cat {
  font-size: 11px; color: var(--ocean-500, #2F5D62);
  background: rgba(87, 195, 194, 0.12);
  border-radius: 999px; padding: 2px 10px; letter-spacing: 0.02em;
}
.column-card-title {
  font-size: 16px; line-height: 1.6; font-weight: 600;
  color: var(--c-text-sumi, #333); margin: 2px 0 0;
}
.column-card-excerpt {
  font-size: 13px; line-height: 1.8; color: var(--muted, #555);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- 準備中（投稿ゼロ） ---------- */
.column-empty {
  text-align: center; color: var(--muted, #555);
  font-size: 15px; padding: 48px 0;
}

/* ---------- ページ送り（the_posts_pagination） ---------- */
.column-pagination { margin-top: 36px; }
.column-pagination .nav-links {
  display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap;
}
.column-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 12px;
  border: 1px solid var(--section-border, #d4dadb); border-radius: 8px;
  color: var(--ocean-500, #2F5D62); text-decoration: none; font-size: 14px;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.column-pagination .page-numbers:hover { background: rgba(87, 195, 194, 0.08); border-color: var(--turquoise-400, #57C3C2); }
.column-pagination .page-numbers.current {
  background: var(--turquoise-400, #57C3C2); border-color: var(--turquoise-400, #57C3C2); color: #fff;
}
.column-pagination .page-numbers.dots { border: none; }

/* ---------- レスポンシブ ---------- */
@media (max-width: 1023px) {
  .column-card-list { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 767px) {
  .column-page-hero { padding: 68px 0 22px; }
  .column-card-list { grid-template-columns: 1fr; gap: 16px; }
  .column-list-section { padding: 22px 0 56px; }
}