/* ============================================================
   page-visit.css — Visit 専用追加スタイル (地図と grid 上書き)

   共有 info-page スタイル (.page-notice / .info / .side-photo /
   .page-content base grid) は page.css 側に統合済み。
   ここには Visit 固有の地図セクションと、地図行を含む grid 上書きだけ。

   依存: tokens.css → base.css → header.css → footer.css → page.css →
         page-cta.css → page-visit.css

   読み込み条件 (inc/enqueue.php):
     is_page( 'visit' )
   ============================================================ */

/* =========================================================
   MAP  ─ Google Maps embed (アスペクト 16:9)
   ========================================================= */
.page-map{
	padding: 0 1.625rem 3.75rem;
	background: var(--paper);
}
.page-map .map{
	margin: 0;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--paper-soft);
	overflow: hidden;
	border-radius: 0.5rem;
}
.page-map .map iframe,
.page-map .map img{
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* ============================================================
   Tablet (>= 33.75rem / 540px)
   ============================================================ */
@media (min-width: 33.75rem){
	.page-map{ padding: 0 2rem 5rem; }
}

/* ============================================================
   PC (>= 48rem / 768px) — grid に map 行を追加挿入
   page.css の Contact 型 (notice/body/cta) に "map map" 行を入れる。
   ============================================================ */
@media (min-width: 48rem){
	.page-content{
		grid-template-areas:
			"notice photo"
			"body   photo"
			"map    map"
			"cta    cta";
	}
	.page-content > .page-map{
		grid-area: map;
		max-width: none;
		margin-left: 0;
		margin-right: 0;
		padding: 0 0 5rem;
	}
	.page-content > .page-map .map{ width: 100%; }
	/* 地図との距離を詰めるため body 下を 0 に */
	.page-content > .page-body{ padding-bottom: 0; }
}