/**
 * Archive & Search Page Styles
 *
 * アーカイブページ（カテゴリー、タグ、著者、日付）・検索結果ページ共通スタイル
 *
 * 構成:
 * 1. ページヘッダー（オレンジ背景）
 * 2. 記事一覧グリッド（2列、罫線なし）
 * 3. ページネーション
 * 4. 検索結果なしメッセージ
 *
 * カードコンポーネント:
 * - post-card.phpのlistレイアウトを使用
 * - 共通スタイルはstyle.cssに定義
 * - ここではArchive/Search固有の差分のみ定義
 *
 * @package SMC_Japan_Astra_Child
 */

/* ==========================================================================
   Archive/Search Page - Base
   ========================================================================== */

/* アーカイブページ・検索結果ページの親要素の背景色を統一 */
body.archive #content.site-content,
body.search #content.site-content,
body.search-no-results #content.site-content {
	background-color: var(--d1-col-bg);
}

.archive-page {
	background-color: var(--d1-col-bg);
}

/* Astraテーマの.site-mainマージン・パディングを打ち消し */
main#primary.archive-page {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
}

/* ==========================================================================
   Archive Header
   ========================================================================== */

/* 上部（スクロールで消える背景部分）176px */
.archive-header-top {
	background-color: var(--d1-col-main);
	height: 176px;
}

/* Sticky部分（高さはJSで制御、初期256px→最小80px） */
.archive-header {
	background-color: var(--d1-col-main);
	height: 256px;
	box-sizing: border-box;
	position: sticky;
	top: 104px;
	z-index: 999;
	display: flex;
	align-items: center;
	margin-top: -176px;
}

.archive-header .container {
	width: 100%;
	max-width: var(--d1-container-max-width);
	margin: 0 auto;
	padding: 0 72px;
	box-sizing: border-box;
}

.archive-header .archive-header__title {
	color: white;
	font-size: 40px;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	line-height: 1.2;
	margin: 0;
	margin-left: 52px;
}


/* ==========================================================================
   Archive Content
   ========================================================================== */
.archive-content {
	padding: 128px 0 80px;
}

/* ==========================================================================
   Archive Grid - 差分スタイル（共通スタイルはstyle.cssに定義）
   ========================================================================== */
.archive-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	background-color: var(--d1-col-bg);
	margin-left: 32px;
	margin-right: 32px;
}

/* 罫線なし、下マージンで記事間を区切る（Expert Reactionとの差分） */
.archive-grid .post-card-list {
	border-top: none;
	border-bottom: none;
	margin-bottom: 40px;
}

/* PC版: min-height（padding込み、box-sizing: border-boxはstyle.cssで定義） */
.archive-grid .post-card-list__link {
	min-height: 248px;
	box-sizing: border-box;
}

/* --- 画像なしの場合: タイトル全幅表示（PC版） --- */
.archive-grid .post-card-list--no-thumbnail .post-card-list__link {
	grid-template-columns: 1fr;
}

.archive-grid .post-card-list--no-thumbnail .post-card-list__title {
	grid-column: 1;
}

/* ==========================================================================
   Archive Pagination
   ========================================================================== */
.archive-pagination {
	height: 300px;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* ページネーションナビ */
.archive-pagination .pagination-nav {
	display: flex;
	align-items: center;
	gap: 16px;
}

/* 分数表示 */
.archive-pagination .pagination-fraction {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 32px;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	color: var(--d1-col-text);
}

.archive-pagination .pagination-separator {
	font-size: 36px;
}

/* 矢印ボタン共通 */
.archive-pagination .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 9999px;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

/* 次へボタン */
.archive-pagination .next {
	background-color: var(--d1-col-bg2);
}

.archive-pagination .next:hover {
	background-color: var(--d1-col-main);
	opacity: 0.9;
}

.archive-pagination .next:hover .pagination-arrow {
	background-color: var(--d1-col-bg);
}

/* 矢印アイコン */
.archive-pagination .pagination-arrow {
	display: block;
	width: 20px;
	height: 20px;
	background-color: var(--d2-col-main-deep);
	-webkit-mask-image: url('../images/icons/Arrow.svg');
	mask-image: url('../images/icons/Arrow.svg');
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

/* 前へ矢印（左向きに回転） */
.archive-pagination .pagination-arrow--prev {
	transform: rotate(180deg);
}

/* 前へボタン */
.archive-pagination .prev {
	background-color: var(--d1-col-bg2);
}

.archive-pagination .prev:hover {
	background-color: var(--d1-col-main);
	opacity: 0.9;
}

.archive-pagination .prev:hover .pagination-arrow {
	background-color: var(--d1-col-bg);
}

/* ==========================================================================
   Archive - Tablet (921px以下)
   カードスタイルはstyle.cssで共通化、ここではページ固有スタイルのみ
   ========================================================================== */
@media (max-width: 921px) {
	/* タブレット・スマホでは上部背景を非表示、Stickyヘッダーのみ */
	.archive-header-top {
		display: none;
	}

	.archive-header {
		position: static;
		height: 256px !important;
		margin-top: 0;
		display: flex;
		align-items: center;
	}

	.archive-header .container {
		width: 100%;
		padding: 0 16px;
	}

	.archive-header .archive-header__title {
		font-size: 32px !important;
		margin-left: 0;
		text-align: left;
	}

	.archive-content {
		padding: 36px 0 60px;
	}

	/* 1列に変更、左右マージン無効 */
	.archive-grid {
		grid-template-columns: 1fr;
		margin-left: 0;
		margin-right: 0;
	}

	/* 罫線を表示、マージン無効（最後の記事も含めて全てに下線） */
	.archive-grid .post-card-list {
		border-bottom: 1px solid var(--d1-col-main);
		margin-bottom: 0;
	}

	/* ページネーション */
	.archive-pagination {
		height: 260px;
	}

	.archive-pagination .page-numbers {
		width: 50px;
		height: 50px;
		font-size: 28px;
	}
}

/* ==========================================================================
   Archive - Mobile (544px以下)
   カードスタイルはstyle.cssで共通化、ここではページ固有スタイルのみ
   ========================================================================== */
@media (max-width: 544px) {
	/* PC版のmin-height: 240pxをリセット */
	.archive-grid .post-card-list__link {
		min-height: auto;
	}

	.archive-header {
		padding: 40px 0 30px;
	}

	.archive-header__title {
		font-size: 32px;
	}

	.archive-content {
		padding: 24px 0 48px;
	}

	/* ページネーション */
	.archive-pagination {
		height: 220px;
	}

	.archive-pagination .page-numbers {
		width: 44px;
		height: 44px;
		font-size: 24px;
	}
}

/* ==========================================================================
   No Posts Message
   ========================================================================== */
.no-posts-message {
	text-align: center;
	padding: 80px 0;
	font-size: 18px;
	color: var(--d1-col-text-light);
}

/* ==========================================================================
   Search Results - No Results
   ========================================================================== */
/* Astraテーマの.ast-separate-container .no-resultsを上書き */
.ast-separate-container .no-results,
.no-results {
	text-align: center;
	padding: 80px 0;
	background-color: var(--d1-col-bg);
}

.no-results__message {
	font-size: 18px;
	color: var(--d1-col-text);
	margin: 0 0 16px;
}

.no-results__suggestion {
	font-size: 16px;
	color: var(--d1-col-text-light);
	margin: 0;
}