/**
 * File: archive-column.css
 * Usage: archive-post.php / category.php（コラムアーカイブ）のスタイル。
 * Design: figma「まーける様 / 6_コラム一覧」281-4379
 *
 * 絞り込みチップ（.bl_archFilter）とページャー（.bl_archPager）は subp.css に定義（実績と共通）。
 * カード（.bl_columnCard_*）は main.css に定義（トップページのCOLUMNスライダーと共通）。
*/

.ly_columnArchive {
  padding-block: 48px 80px;
}
.ly_columnArchive .el_subpTitle {
  margin-bottom: 40px;
}
.ly_columnArchive .bl_archFilter {
  margin-bottom: 40px;
}

/* ================================================
  カード一覧
================================================ */
.bl_columnGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
/* 一覧ではタイトルを3行まで表示（トップのスライダーは2行） */
.ly_columnArchive .bl_columnCard_ttl {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.bl_columnEmpty {
  margin-top: 24px;
  color: var(--c-muted);
}

/* ================================================
  タブレット / PC
================================================ */
@media screen and (min-width: 768px) {
  .ly_columnArchive {
    padding-block: 80px 120px;
  }
  .ly_columnArchive .el_subpTitle {
    margin-bottom: 80px;
  }
  .ly_columnArchive .bl_archFilter {
    margin-bottom: 60px;
  }
  .bl_columnGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 40px;
  }
}
@media screen and (min-width: 1024px) {
  .bl_columnGrid {
    grid-template-columns: repeat(3, 1fr);
    gap: 60px 50px; /* デザイン実寸：横50px / 縦60px */
  }
}