/* ============================================================
   葬儀の知恵袋（/colum）ページ固有スタイル
   共通: ../../css/{tokens,base,components}.css
   方針：ブラウン基調・サムネ無しの上品テキストカード（掛軸縦線＋控えめ番号）
   ============================================================ */

/* スクリーンリーダー専用見出し */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- 1. ページタイトル＋導入（中央・軸のあしらい） ---- */
.page-hero { position: relative; isolation: isolate; padding-block: var(--space-1600) var(--space-1200); }
/* ヒーローの淡いブラウン放射グラデ（company と統一） */
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(58% 78% at 50% 0%, rgba(155, 135, 89, .12), transparent 70%);
}
.page-hero__inner {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--space-600); padding-top: var(--space-800);
}
/* タイトル上の縦の細線（掛軸のモチーフ） */
.page-hero__inner::before { content: ""; width: 1px; height: 56px; background: var(--color-primary); }
.page-hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-200);
  font: 500 14px/1.6 var(--font-base); color: var(--color-text-soft); letter-spacing: .12em;
}
.page-hero__eyebrow .icon { font-size: 18px; color: var(--color-primary); }
.page-hero__title {
  font: 700 56px/1.3 var(--font-display); letter-spacing: .12em; color: var(--color-primary-deep);
}
.page-hero__lead { font: 500 17px/2 var(--font-base); color: var(--color-text); max-width: 720px; }

/* ---- 2. カテゴリフィルター ---- */
.colum-filter { padding-block: 0 var(--space-400); }
.colum-filter__inner {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-400);
}
.colum-filter__head {
  font: 700 16px/1.6 var(--font-base); color: var(--color-text-soft); letter-spacing: .1em;
}
.filter-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-300); }
.filter-tab {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--space-300) var(--space-600);
  border: 1px solid var(--color-secondary); border-radius: var(--radius-full);
  background: #fff; color: var(--color-text);
  font: 700 15px/1 var(--font-base); letter-spacing: .02em;
  transition: background .2s, color .2s, border-color .2s;
}
.filter-tab:hover { background: var(--color-bg-soft); border-color: var(--color-primary); color: var(--color-primary-deep); }
/* 現在表示中（一覧） */
.filter-tab[aria-current="page"] {
  background: var(--color-primary); border-color: var(--color-primary); color: #fff;
}
.filter-tab[aria-current="page"]:hover { background: var(--color-primary-dark); }

/* ---- 3. 記事一覧（コーナー矢印ボタンの記事カード） ----
   uiverse.io / satyamchaudharydev「itchy-chipmunk-95」(MIT) を
   SKKトークン（ブラウン基調・角丸・余白）に置換して採用。
   署名＝右下コーナーに収まる矢印ボタン＋ホバーでタイトル下線・矢印スライド */
.colum-list-section { gap: var(--space-800); }
.colum-list {
  display: flex; flex-direction: column; gap: var(--space-600);
  max-width: 860px;
}
.colum-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--space-400);
  background: var(--color-bg);
  border: 1px solid var(--color-secondary); border-radius: var(--radius-400);
  padding: var(--space-800);
  padding-bottom: var(--space-1200); /* コーナー矢印ボタンのための余白 */
  box-shadow: 0 8px 16px rgba(63, 63, 63, .03);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.colum-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 16px 36px rgba(63, 63, 63, .1);
  transform: translateY(-3px);
}

.colum-card__cat { align-self: flex-start; }
.colum-card__title {
  font: 700 22px/1.6 var(--font-display); letter-spacing: .03em; color: var(--color-primary-deep);
  transition: color .2s ease;
}
.colum-card:hover .colum-card__title { color: var(--color-primary); text-decoration: underline; text-underline-offset: 4px; }
.colum-card__excerpt {
  font: 400 15px/1.95 var(--font-base); color: var(--color-text-soft); flex: 1;
}
/* 「続きを読む」キャプション（矢印ボタンの手前に控えめに） */
.colum-card__more {
  font: 700 13px/1 var(--font-base); color: var(--color-primary); letter-spacing: .08em;
  transition: color .2s ease;
}
.colum-card:hover .colum-card__more { color: var(--color-primary-deep); }

/* 右下コーナーに収まる矢印ボタン（カード角丸に合わせて内側にネスト） */
.colum-card__arrow {
  position: absolute; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: var(--color-primary); color: #fff;
  border-top-left-radius: var(--radius-400);
  border-bottom-right-radius: var(--radius-400);
  font-size: 22px;
  transition: background .2s ease;
}
.colum-card__arrow svg { transition: transform .2s ease; }
.colum-card:hover .colum-card__arrow { background: var(--color-primary-deep); }
.colum-card:hover .colum-card__arrow svg { transform: translateX(3px); }

/* ---- 4. ページ送り ---- */
.colum-pager { display: flex; justify-content: center; }
.colum-pager__next .icon-arrow { transition: transform .25s ease; }
.colum-pager__next:hover .icon-arrow { transform: translateX(4px); }

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 960px) {
  .colum-card { padding: var(--space-600); padding-bottom: var(--space-1200); gap: var(--space-300); }
}
@media (max-width: 600px) {
  .page-hero__title { font-size: 40px; }
  .colum-card__title { font-size: 20px; }
  .colum-card__arrow { width: 40px; height: 40px; font-size: 20px; }
}