/**
 * 「全記事を1つに集約した地図」ページ（Template Name: map）専用のレイアウト。
 *
 * このCSSを効かせるには、テンプレート側でタイトルと地図を次のように
 * 共通の外枠(.whm-page-map)で囲ってください:
 *
 * <?php get_header(); ?>
 * <div class="whm-page-map">
 *     <?php get_template_part('inc/page-title'); ?>
 *     <div class="world-map-full">
 *         <?php echo do_shortcode('[world_heritage_map]'); ?>
 *     </div>
 * </div>
 * <?php get_footer(); ?>
 *
 * レイアウトの考え方:
 * .whm-page-map を2列×2行のCSS Gridにし、
 * 左上=タイトル／左下=リスト／右側(1〜2行貫通)=地図、という配置にする。
 * .world-map-full と .whm-wrapper は display:contents にして
 * 自分自身は箱を作らず、中の .whm-map-area と .whm-card-strip を
 * 直接グリッドに参加させることで実現している。
 */

/* /map/ページ(PC)だけヘッダー下に50pxの余白をつける。
   スマホは元々テーマのデフォルトで余白0なので触らない。
   PCの/map/以外のページはテーマの元の余白(200px)のまま。 */
@media screen and (min-width: 768px) {
	body.page-template-map #whx7m_sticky_wrapper {
		margin-bottom: 50px !important;
	}
}

.whm-page-map {
	background: #fff;
	display: grid;
	grid-template-columns: 280px 1fr;
	grid-template-rows: auto 1fr;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	/* ヘッダー(タイトルバー+ナビ)の実測高さをJSで--whm-header-offsetにセットしている。
	   タイトル行はgrid-template-rowsのauto行が自動で高さを確保するので、
	   ここではヘッダー分だけ引けばよい（以前はタイトル分も二重に引いてしまっていた）。
	   JS実行前の一瞬のフォールバックとして110pxを指定。 */
	height: calc(100dvh - var(--whm-header-offset, 110px));
	min-height: 400px;
}

/* このラッパー自体はレイアウトに関与させず、中身を直接グリッドに参加させる */
.whm-page-map .world-map-full,
.whm-page-map .whm-wrapper {
	display: contents;
}

/* 左上：ページタイトル */
.whm-page-map .page-title {
	grid-column: 1;
	grid-row: 1;
	position: relative;
	z-index: 10;
	background: #fff;
	padding: 14px 20px 14px;
	margin: 0;
	border-bottom: 1px solid #eee;
	border-right: 1px solid #eee;
	color: #333;
	font-size: 24px;
	font-weight: 600;
	line-height: 28px;
	box-shadow: none;
}
.whm-page-map .page-title h1 {
	margin: 0;
	font-size: inherit;
}

/* 右側：地図（タイトル行〜リスト行の両方にまたがり、常にフル高さ） */
.whm-page-map .whm-map-area {
	grid-column: 2;
	grid-row: 1 / 3;
	height: 100%;
}
.whm-page-map .whm-map {
	height: 100% !important; /* グリッドセルの高さいっぱいに広げる */
}

/* 左下：リスト（地図の高さを超えて伸びず、内部スクロールにする）※PC専用レイアウト。
   スマホは下の @media (max-width: 767px) 側で、地図の下に共通デザインのカードを横スクロール表示する。 */
@media screen and (min-width: 768px) {
	.whm-page-map .whm-card-strip {
		grid-column: 1;
		grid-row: 2;
		flex-direction: column;
		overflow-y: auto;
		overflow-x: hidden;
		max-height: 100%;
		margin: 0;
		padding: 8px;
		border-right: 1px solid #eee;
	}
	.whm-page-map .whm-card {
		flex: 0 0 auto;
		width: 100%;
		flex-direction: row;
		gap: 10px;
	}
	.whm-page-map .whm-card__thumb {
		width: 64px;
		height: 64px;
		aspect-ratio: auto;
		flex: 0 0 64px;
	}
	.whm-page-map .whm-card__body {
		padding: 0;
	}
}

/* スマホでは横並びが厳しいため、上から タイトル→地図→横スクロールリスト の縦積みにする。
   ヘッダー分を引いた画面の高さの中で、Flexboxで配分する。
   地図(flex:1)が可変で残り全部を占め、タイトルとリストはコンテンツの自然な高さ(flex:0 0 auto)。
   リストのカードデザイン自体は共通デザイン(.whm-card。world-heritage-map.cssで定義)をそのまま使う。 */
@media (max-width: 767px) {
	.whm-page-map {
		display: flex;
		flex-direction: column;
		height: calc(100dvh - var(--whm-header-offset, 100px));
		min-height: 0;
	}
	.whm-page-map .page-title {
		flex: 0 0 auto;
		border-right: none;
	}
	.whm-page-map .whm-map-area {
		flex: 1 1 auto;
		min-height: 0; /* flexboxで子要素が縮まない問題の防止 */
		height: auto;
	}
	.whm-page-map .whm-map {
		height: 100% !important;
		min-height: 0;
	}
	.whm-page-map .whm-card-strip {
		flex: 0 0 auto; /* カードの自然な高さに応じて確保。固定値にして見切れさせない */
		border-right: none;
		border-top: 1px solid #eee;
	}
}