/**
 * お役立ち資料アーカイブ 絞り込みUI（design.png準拠のベース実装）
 *
 * 本デザイン調整はデザイン工程で行う想定。
 * チップの配色は既存 .c-archive-card-document__tag（#0049af）に合わせている。
 */

/* 全体ラッパ */
.p-archive-filter {
	background-color: #f5f5f6;
	padding: 32px 60px 40px;
	margin-bottom: 48px;
}

.p-archive-filter__heading {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 20px;
}

/* グループ行（左: ラベル / 右: チップ群） */
.p-archive-filter__group {
	display: flex;
	align-items: stretch;
	background-color: #fff;
	border: 1px solid #d9d9d9;
}

.p-archive-filter__group + .p-archive-filter__group {
	margin-top: 16px;
}

.p-archive-filter__title {
	flex: 0 0 132px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(to top right, #111 30%, #4d4d4d 100%);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	padding: 16px 8px;
	text-align: center;
}

.p-archive-filter__list {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
	gap: 12px 16px;
	padding: 30px 32px;
	list-style: none;
	margin: 0;
}

/* チェックボックスは視覚的に隠す（キーボード操作は維持） */
.p-archive-filter__checkbox {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* チップ（未選択: 白地・青枠 / 選択: 青地・白文字） */
.p-archive-filter__name {
	display: inline-block;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: #0049af;
	background-color: #fff;
	border: 1px solid #0049af;
	border-radius: 2px;
	padding: 0.35em 1em;
	cursor: pointer;
	transition: background-color ease .3s, color ease .3s;
	user-select: none;
}

@media (hover: hover) {
	.p-archive-filter__label:hover .p-archive-filter__name {
		background-color: rgba(0, 73, 175, .08);
	}
}

.p-archive-filter__checkbox:checked + .p-archive-filter__name {
	background-color: #0049af;
	color: #fff;
}

.p-archive-filter__checkbox:focus-visible + .p-archive-filter__name {
	outline: 2px solid #0049af;
	outline-offset: 2px;
}

/* ---------------------------------
 * 一覧カード（design.png準拠の調整）
 * --------------------------------- */

/* サムネイル下の余白 */
.p-white-paper-archive .c-archive-card-document__link--thumb {
	display: block;
	margin-bottom: 24px;
}

/* チップ（カテゴリ・タグ）下の余白を詰める（タイトル側の margin-top:16px のみ残す） */
.p-white-paper-archive .c-archive-card-document__tag-list {
	margin-bottom: 0;
	flex-wrap: wrap;
	column-gap: 10px;
	row-gap: 8px;
}

/* おすすめポイントの行間・リスト上下余白（デザイン準拠） */
.p-white-paper-archive .c-archive-card-document__point-list {
	gap: 8px;
	margin-top: 8px;
	margin-bottom: 20px;
}

.p-white-paper-archive .c-archive-card-document__link--body .c-archive-card-document__title {
	margin-top: 0;
}

.p-white-paper-archive .c-archive-card-document__link--body {
	margin-top: 12px;
}

/* 一覧のAJAX更新中 */
.js-wp-archive-content.is-loading {
	opacity: .5;
	pointer-events: none;
	transition: opacity ease .2s;
}

/* 0件メッセージ */
.p-archive-list__empty {
	padding: 40px 0;
	text-align: center;
}

/* SP: ラベルを上に積む */
@media screen and (max-width: 767px) {
	.p-archive-filter {
		padding: 20px 16px 24px;
		margin-bottom: 32px;
	}

	.p-archive-filter__group {
		flex-direction: column;
	}

	.p-archive-filter__title {
		flex: none;
		padding: 10px 8px;
	}

	.p-archive-filter__list {
		padding: 16px;
		gap: 10px 10px;
	}
}