/*
 * banglao カテゴリーアーカイブ（料理 / エリア / 駅 / 特徴）専用スタイル。
 *
 * トーンは front-page.css / store-page.css と共通（紺 --bl-navy・赤 --bl-red・
 * ベージュ --bl-cream、共通フォント --bl-font のラベル、赤いマーカー下線）。
 * category.php でのみ読み込む（inc/enqueue.php / is_category）。
 * 全体を .bl-archive（= #main）配下にスコープし、他ページ・legacy CSS に影響させない。
 * 祖先の横幅制限を外す部分だけ body.category に直接当てる（カテゴリーページ限定）。
 */

/* --- 全幅レイアウト（カテゴリーページだけ、祖先の横幅制限を外す） ------------ */
body.category #content,
body.category #content-in,
body.category .content-in.wrap {
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

/* legacy Cocoon の #content{margin-top:24px} を消し、sticky バー直下にヒーローを付ける */
body.category #content {
	margin-top: 0;
}

body.category #main.bl-archive {
	padding: 0;
	background: #fff;
	overflow-x: clip;
}

/* --- トークン（front-page と同じ値） ------------------------------------ */
.bl-archive {
	--bl-red: #d7282f;
	--bl-red-dark: #a91822;
	--bl-navy: #102a43;
	--bl-cream: #f7f4ee;
	--bl-ink: #17212b;
	--bl-muted: #65717d;
	--bl-line: #e2e4e7;
	--bl-shell: min(1180px, calc(100% - 48px));

	color: var(--bl-ink);
	font-feature-settings: "palt";
	line-height: 1.7;
}

.bl-archive a {
	text-decoration: none;
}

/* --- ヒーロー（紺ベタ＋装飾リング。store-page の紺ブロックと同系） ---------- */
.bl-archive-hero {
	position: relative;
	overflow: hidden;
	background: var(--bl-navy);
	color: #fff;
}

.bl-archive-hero::after {
	content: "";
	position: absolute;
	width: 420px;
	height: 420px;
	border: 84px solid rgba(255, 255, 255, .06);
	border-radius: 50%;
	right: -170px;
	top: -200px;
	pointer-events: none;
}

.bl-archive-hero__in {
	position: relative;
	z-index: 1;
	width: var(--bl-shell);
	margin-inline: auto;
	padding: 14px 0 clamp(36px, 5vw, 58px);
}

/* ヒーロー内のパンくずは紺地なので白へ反転（通常時の色は theme.css） */
.bl-archive-hero .bl-breadcrumb {
	padding: 6px 0 0;
	color: #fff;
}

.bl-archive-hero .bl-breadcrumb a,
.bl-archive-hero .bl-breadcrumb__current {
	color: #fff;
}

.bl-archive-hero .bl-breadcrumb a {
	text-decoration-color: rgba(255, 255, 255, .5);
}

.bl-archive-hero .bl-breadcrumb a:hover,
.bl-archive-hero .bl-breadcrumb a:focus-visible {
	color: #ffd7d9;
}

.bl-archive-hero .bl-breadcrumb__sep {
	color: #ff6e73;
}

.bl-archive-hero__kicker {
	margin: clamp(20px, 3vw, 34px) 0 12px;
	font-family: var(--bl-font);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .24em;
	color: #8fa6bd;
}

.bl-archive-hero__title {
	margin: 0;
	font-size: clamp(30px, 4.4vw, 52px);
	line-height: 1.22;
	letter-spacing: -.03em;
	color: #fff;
}

/* store-page の .marker-under-red と同じ手法の下線（色は赤）。
   大きい見出しなので帯は細めにして「下線ハイライト」に寄せる。 */
.bl-archive-hero__title em {
	font-style: normal;
	padding: 0 3px;
	background: linear-gradient(transparent 74%, var(--bl-red) 74%, var(--bl-red) 92%, transparent 92%);
}

.bl-archive-hero__desc {
	margin-top: 18px;
	max-width: 660px;
	color: #c5d2dc;
	font-size: 14px;
	line-height: 1.9;
}

.bl-archive-hero__desc p {
	margin: 0 0 .8em;
}

.bl-archive-hero__desc p:last-child {
	margin-bottom: 0;
}

.bl-archive-hero__count {
	margin: 20px 0 0;
	font-size: 13px;
	color: #c5d2dc;
}

.bl-archive-hero__count strong {
	font-family: var(--bl-font);
	font-weight: 800;
	font-size: 19px;
	color: #fff;
	margin-right: 5px;
}

/* --- 本文（カードグリッド） ------------------------------------------- */
.bl-archive-body__in {
	width: var(--bl-shell);
	margin-inline: auto;
	padding: clamp(36px, 5vw, 60px) 0 clamp(56px, 8vw, 92px);
}

.bl-archive-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px 22px;
}

/* カード本体はサイト共通コンポーネント（assets/theme.css の .bl-shopcard /
   banglao_card()）。TOP「主要エリア別おすすめ居酒屋」と同じデザイン。
   ここではグリッドの子（記事ラッパー <article.bl-shopcard-cell>）が
   カードを行の高さいっぱいに伸ばすようにするだけ。 */
.bl-archive-grid > .bl-shopcard-cell {
	display: flex;
	min-width: 0;
}

/* 地図の絞り込みで隠されたカード（JS が article.hidden を立てる）。
   上の display:flex がクラス指定で UA の [hidden] を上書きしてしまうので明示的に消す。 */
.bl-archive-grid > .bl-shopcard-cell[hidden] {
	display: none;
}

/* --- 地図（[shop_map]）ブロック ------------------------------------- */
.bl-archive-map {
	width: var(--bl-shell);
	margin-inline: auto;
	padding-top: clamp(28px, 4vw, 44px);
}

/* --- 「該当なし」メッセージ ---------------------------------------- */
.bl-archive-empty {
	margin: 8px 0 0;
	padding: 28px 16px;
	text-align: center;
	color: var(--bl-muted);
	font-weight: 700;
	background: var(--bl-cream);
	border-radius: 12px;
}

/* --- カード用の番号ページャー（JS 生成 / ページ遷移なし） ------------ */
.bl-cardpager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: clamp(38px, 5vw, 58px);
}

.bl-cardpager__btn {
	min-width: 42px;
	padding: 9px 12px;
	font-family: var(--bl-font);
	font-weight: 800;
	font-size: 14px;
	line-height: 1;
	color: var(--bl-navy);
	background: #fff;
	border: 1px solid var(--bl-line);
	border-radius: 9px;
	cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s;
}

.bl-cardpager__btn:hover:not(:disabled):not(.is-current) {
	border-color: var(--bl-red);
	color: var(--bl-red);
}

.bl-cardpager__btn.is-current {
	background: var(--bl-navy);
	border-color: var(--bl-navy);
	color: #fff;
	cursor: default;
}

.bl-cardpager__btn:disabled {
	opacity: .4;
	cursor: default;
}

/* --- ページネーション（the_posts_pagination） ------------------------- */
.bl-archive-body .pagination {
	margin-top: clamp(38px, 5vw, 58px);
}

.bl-archive-body .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.bl-archive-body .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 13px;
	border: 1px solid var(--bl-line);
	border-radius: 999px;
	background: #fff;
	color: var(--bl-navy);
	font-family: var(--bl-font);
	font-weight: 700;
	font-size: 14px;
	transition: background .18s, color .18s, border-color .18s;
}

.bl-archive-body a.page-numbers:hover,
.bl-archive-body a.page-numbers:focus-visible {
	border-color: var(--bl-navy);
	background: var(--bl-navy);
	color: #fff;
}

.bl-archive-body .page-numbers.current {
	border-color: var(--bl-red);
	background: var(--bl-red);
	color: #fff;
}

.bl-archive-body .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	min-width: 24px;
}

/* 前へ / 次へ = 文言なしの左右矢印だけ（前後のページがあるときだけ WP が出力する）。
   数字ボタンと同じ 44px の正方形に、矢印だけを中央寄せ。 */
.bl-archive-body .page-numbers.prev,
.bl-archive-body .page-numbers.next {
	min-width: 44px;
	padding: 0;
}

.bl-archive-body .nav-arrow {
	font-size: 18px;
	line-height: 1;
}

/* --- 記事なし（content-none.php） ----------------------------------- */
.bl-archive-body .no-results {
	max-width: 620px;
}

.bl-archive-body .no-results .entry-title {
	font-size: clamp(20px, 2.4vw, 28px);
	color: var(--bl-navy);
	letter-spacing: -.02em;
}

/* --- レスポンシブ ----------------------------------------------------
   カード数の上限は 12（inc/setup.php の posts_per_page）。
   PC = 1 列 3 枚（3 × 4 = 12）／スマホ = 1 列 2 枚（2 × 6 = 12）で統一する。
   1 列表示にはしない。 */
@media (max-width: 900px) {
	.bl-archive {
		--bl-shell: min(100% - 32px, 720px);
	}

	.bl-archive-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px 16px;
	}
}

@media (max-width: 560px) {
	.bl-archive {
		--bl-shell: calc(100% - 24px);
	}

	.bl-archive-hero::after {
		width: 260px;
		height: 260px;
		border-width: 54px;
		right: -120px;
		top: -130px;
	}

	.bl-archive-grid {
		gap: 14px 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bl-archive * {
		transition: none !important;
	}
}