/**
 * コラム一覧（/column/）・カテゴリー一覧
 * グリッド: components/post-cards-grid.css（トップ新着と共通・最大4列）
 */

/*
 * ページ全体の背景:
 *   - body は gray-100 単色（コンテンツ長や viewport 高さに関係なく一定）
 *   - フェード帯は footer の上に `::before` で absolute 配置
 *     → DOM 順や SP の order 並べ替えに関係なく、必ず「footer の直前」に出る
 *     → SP 時は breadcrumbs がフェード領域の中に乗るので z-index で前面に出す
 *
 * 旧実装メモ:
 *   - body に linear-gradient 直当て: body 高さに対する % 指定でコンテンツ依存
 *   - `.minolink-articles-page::after`: main 内に閉じるため、SP で main 外に出る
 *     breadcrumbs がフェードから外れて gray-100 帯に取り残される
 */
body:has(.minolink-articles-page) {
	background-color: var(--wp--preset--color--gray-100);
}

body:has(.minolink-articles-page) > .wp-site-blocks > footer {
	position: relative;
}

body:has(.minolink-articles-page) > .wp-site-blocks > footer::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: clamp(200px, 30vh, 360px);
	background: linear-gradient(
		to bottom,
		var(--wp--preset--color--gray-100) 0%,
		var(--wp--preset--color--base) 100%
	);
	pointer-events: none;
}

/* SP 時、breadcrumbs はフェード領域に重なるのでテキストを前面に出す */
body:has(.minolink-articles-page) > .wp-site-blocks > .minolink-breadcrumbs-wrap {
	position: relative;
	z-index: 1;
}

.minolink-articles-page {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--50);
	padding-block-end: var(--wp--preset--spacing--section);
}

/* ページ見出し: パターン h2-underline（H1 でも同じ下線）+ 上下余白 spacing-50 */
.minolink-articles-page__header .minolink-articles-page__title-wrap {
	margin-block: 0;
	padding-block: var(--wp--preset--spacing--50);
}

.minolink-articles-page__header .minolink-articles-page__title-wrap .wp-block-heading {
	margin: 0;
}

.minolink-articles-page__query .minolink-articles-list {
	--minolink-post-cards-grid-gap: var(--wp--preset--spacing--40, 16px);
}

.minolink-articles-page__pagination {
	margin-block-start: clamp(2rem, 5vw, 3rem);
}

.minolink-articles-page__empty {
	margin-block: 2rem;
}