/* =========================================================
   占いコラム 一覧／アーカイブ（index.php・archive.php）
   ・本文＝トップと同じ .column__* カード（top.css・全ページ読込）を再利用
   ・右カラム＝人気記事ランキング＋カテゴリー
   ・SPは1カラム（サイドバーは下に回り込む）
   ========================================================= */
.column-archive {
	padding: 32px 0 72px;
	/* トップの占いコラムと同じ方眼紙背景 */
	background-color: var(--color-bg-sub);
	background-image:
		linear-gradient(rgba(31, 44, 77, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(31, 44, 77, 0.04) 1px, transparent 1px);
	background-size: 40px 40px;
}

.column-archive__inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 20px;
}

.column-archive__breadcrumbs {
	margin-bottom: 16px;
	color: var(--color-text-sub);
	font-size: 13px;
}

.column-archive__header {
	margin-bottom: 32px;
}

.column-archive__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
}

.column-archive__main {
	min-width: 0; /* グリッド内で横カードがはみ出さないように */
}

/* 抜粋は最大3行に抑えてカード高さを揃える（画像の縦長化も抑える） */
.column-archive .column__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* 横カードの画像：トップと同じ「塗り(cover)」でカード高さいっぱいに表示し、
   上下に白い余白を作らない。サイドバー付きで主枠が狭いぶん、画像列は 32%。 */
@media (min-width: 735px) {
	.column-archive .column__card {
		grid-template-columns: 32% 1fr;
	}
}

/* --- ページャー ---
   親テーマは .nav-links .page-numbers.next/.prev を 2.4rem（大きめ・ピル型）で出すため、
   詳細度を上げて（a/span を付与）16px・角丸に上書きする。 */
.column-archive__pager {
	margin-top: 48px;
}

.column-archive__pager .nav-links {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
}

.column-archive__pager .nav-links a.page-numbers,
.column-archive__pager .nav-links span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	height: auto;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--color-bg-sub);
	border-radius: 6px;
	color: var(--color-main);
	font-family: var(--font-en);
	font-size: 16px;
	line-height: 1;
	letter-spacing: 0;
	text-decoration: none;
}

.column-archive__pager .nav-links a.page-numbers.current,
.column-archive__pager .nav-links span.page-numbers.current {
	background-color: var(--color-main);
	border-color: var(--color-main);
	color: var(--color-white);
}

.column-archive__pager .nav-links .page-numbers.dots {
	border-color: transparent;
}

@media (hover: hover) {
	.column-archive__pager .nav-links a.page-numbers:hover {
		background-color: var(--color-bg-sub);
	}
}

/* --- 右カラム（サイドウィジェット） --- */
.column-archive__side {
	display: grid;
	gap: 32px;
	align-content: start;
}

.side-widget__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--color-main);
	color: var(--color-main);
	font-family: var(--font-ja-heading);
	font-weight: 700;
	font-size: 18px;
}

/* 王冠アイコン（人気記事）：1位バッジと同じゴールド */
.side-widget__icon {
	flex: none;
	color: var(--color-gold);
}

/* 人気記事ランキング */
.ranking {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;
}

.ranking__link {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 12px;
	align-items: center;
	color: inherit;
	text-decoration: none;
}

.ranking__thumb {
	position: relative;
	display: block;
}

.ranking__img {
	display: block;
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: 4px;
}

.ranking__img--empty {
	background-color: var(--color-bg-sub);
}

.ranking__num {
	position: absolute;
	top: -6px;
	left: -6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	background-color: var(--color-main);
	color: var(--color-white);
	font-family: var(--font-en);
	font-size: 12px;
	border-radius: 50%;
}

/* 上位3位を強調（任意） */
.ranking__item:nth-child(1) .ranking__num { background-color: var(--color-gold); }
.ranking__item:nth-child(2) .ranking__num { background-color: #9AA3B0; }
.ranking__item:nth-child(3) .ranking__num { background-color: #B08153; }

.ranking__title {
	font-family: var(--font-ja-body);
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-text-main);
}

/* カテゴリー一覧
   ※親テーマの記事内カテゴリも <ul class="catList cat-list"> と同名クラスを持つため、
     必ず .side-widget 配下に限定する（記事側のチップを壊さないため） */
.side-widget .cat-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.side-widget .cat-list li {
	border-bottom: 1px solid var(--color-bg-sub);
}

.side-widget .cat-list a {
	display: block;
	padding: 10px 4px;
	color: var(--color-text-main);
	font-family: var(--font-ja-body);
	font-size: 14px;
	text-decoration: none;
}

@media (hover: hover) {
	.ranking__link:hover .ranking__title,
	.side-widget .cat-list a:hover {
		opacity: 0.65;
	}
}

/* --- PC（900px以上）：本文＋右サイドバーの2カラム --- */
@media (min-width: 900px) {
	.column-archive {
		padding: 40px 0 80px;
	}

	.column-archive__layout {
		grid-template-columns: minmax(0, 1fr) 260px;
		gap: 48px;
		align-items: start;
	}
}

/* --- PC（735px以上）：記事上のラベルは20px --- */
@media (min-width: 735px) {
	.column-single__label {
		font-size: 20px;
	}
}

/* =========================================================
   コラム記事 詳細（single.php）
   ・右カラムは一覧と同じ「人気記事＋カテゴリー」
   ・「この記事を書いた人」「SNSシェア」は非表示（関連記事は残す）
   ========================================================= */
.single-post .articleFooter__author,
.single-post .articleFooter__sns,
.single-post .snsShare {
	display: none;
}

/* 右カラム（親テーマの .side の中に置く） */
.column-single__side {
	display: grid;
	gap: 32px;
	align-content: start;
}

/* --- 記事上の「占いコラム」ラベル（SP16px / PC20px・ミディアム） --- */
.column-single__label {
	margin: 0 0 12px;
	color: var(--color-main);
	font-family: var(--font-ja-body);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.4;
}

/* --- カテゴリのチップ：一覧の .column__category と同じ体裁に ---
   チップの実体は <a>（親テーマの .catList a が --point-color＝茶系で塗っている）。
   .list-label は素の入れ物に戻し、<a> を紺のチップにする。
   記事上部（articleHeader）と記事下部（articleFooter）の両方に効く。 */
.single-post .article-category .list-label {
	display: inline-block;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
}

.single-post .article-category .catList a {
	display: inline-block;
	padding: 4px 16px;
	background-color: var(--color-main);
	border: none;
	border-radius: 0;
	color: var(--color-white);
	font-family: var(--font-ja-body);
	font-size: 13px;
	letter-spacing: 0;
	text-decoration: none;
}

@media (hover: hover) {
	.single-post .article-category .catList a:hover {
		opacity: 0.85;
	}
}

/* --- 本文内のCTAボタン（例：武蔵野算命塾への鑑定のご依頼はこちらから） ---
   インラインstyleとプリセット色クラスは functions.php の render_block で除去済み。
   ここでサイト共通のボタン体裁（紺・角丸6px）を当てる。 */
.articleBody .wp-block-button__link.xw-post-cta {
	display: block;
	max-width: 400px;
	margin: 0 auto;
	padding: 18px 24px;
	background-color: var(--color-main);
	border: 1px solid var(--color-main);
	border-radius: 6px;
	color: var(--color-btn-text);
	font-family: var(--font-ja-body);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	transition: opacity 0.2s;
}

/* ボタン内の span（xwb-fs-14 等）のサイズ・色指定を打ち消す */
.articleBody .wp-block-button__link.xw-post-cta span {
	font-size: inherit;
	color: inherit;
}

@media (hover: hover) {
	.articleBody .wp-block-button__link.xw-post-cta:hover {
		opacity: 0.85;
	}
}

/* functions.php が本文末尾に自動で追加するCTAの余白（xw_column_append_cta） */
.articleBody .xw-post-cta-wrap {
	margin: 48px auto 8px;
}