/* =========================================================
   拠点・アクセス CSS（汎用・ポータブル）
   配置: assets/css/core/33-location.css

   構成：
     1. 地図埋め込み（location_map_embed が出力する .lr-location-map）
     2. 拠点情報（定義リスト型：ラベル左・値右）
     3. 営業時間リスト / アクセス経路リスト
     4. 地図アプリ選択リンク（.lr-map-links）※al/42-exhibition.css から移設

   ・色・余白はトークン（00-tokens.css）参照に統一（生値・生 hex 禁止）。
   ・min-width モバイルファースト（ベース＝スマホ縦積み → 広い画面で拡張）。
   ========================================================= */


/* =========================================================
   1. 地図埋め込み
   location_map_embed() が <div class="lr-location-map"><iframe>…</div> を返す。
   iframe を 16:9 の枠に収め、レスポンシブに全幅表示する。
   ========================================================= */
.lr-location-map {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--lr-radius);
	border: 1px solid var(--lr-border);
}
.lr-location-map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}


/* =========================================================
   2. 拠点情報（定義リスト型）
   ベース（スマホ）＝ラベル上・値下の縦積み。
   min-width: 600px でラベル左・値右の 2 カラムへ。
   ========================================================= */
.lr-access-info {
	margin: var(--lr-space-lg) 0 0;
	border-top: 1px solid var(--lr-border);
}

.lr-access-info__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--lr-space-2xs);
	padding: var(--lr-space-md) 0;
	border-bottom: 1px solid var(--lr-border);
}

.lr-access-info__label {
	margin: 0;
	font-size: var(--lr-font-sm);
	font-weight: var(--lr-weight-bold);
	color: var(--lr-text-muted);
	letter-spacing: 0.04em;
}

.lr-access-info__value {
	margin: 0;
	font-size: var(--lr-font-base);
	line-height: var(--lr-leading-body);
	color: var(--lr-text);
}

/* 値に添える補助行（ヨミガナなど）。値の下に小さく。 */
.lr-access-info__sub {
	display: block;
	margin-top: var(--lr-space-2xs);
	font-size: var(--lr-font-sm);
	color: var(--lr-text-muted);
}

/* 電話などのリンク */
.lr-access-info__value a {
	color: var(--lr-link);
	text-decoration: none;
	transition: color var(--lr-ease);
}
.lr-access-info__value a:hover {
	color: var(--lr-accent-ink);
}

/* ---- タブレット以上：ラベル左固定・値右 ---- */
@media (min-width: 600px) {
	.lr-access-info__row {
		grid-template-columns: 7em 1fr;
		gap: var(--lr-space-md);
		align-items: baseline;
		padding: var(--lr-space-sm) 0;
	}
}


/* =========================================================
   3. 営業時間リスト / アクセス経路リスト
   location_hours_label() の整形結果（days / time / note）と
   location_access（道順）の描画。素朴な縦リスト。
   ========================================================= */

/* ---- 営業時間 ---- */
.lr-access-hours {
	margin: 0;
	padding: 0;
	list-style: none;
}
.lr-access-hours__item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--lr-space-xs);
}
.lr-access-hours__item + .lr-access-hours__item {
	margin-top: var(--lr-space-2xs);
}
.lr-access-hours__days {
	min-width: 5em;
	color: var(--lr-text-muted);
}
.lr-access-hours__time {
	font-variant-numeric: tabular-nums;
}
.lr-access-hours__note {
	font-size: var(--lr-font-sm);
	color: var(--lr-text-muted);
}

/* ---- アクセス経路（道順）---- */
.lr-access-routes {
	margin: 0;
	padding: 0;
	list-style: none;
}
.lr-access-routes__item {
	position: relative;
	padding-left: var(--lr-space-sm);
	line-height: var(--lr-leading-body);
}
.lr-access-routes__item + .lr-access-routes__item {
	margin-top: var(--lr-space-2xs);
}
/* 行頭の小さなマーカー（アクセント差し色）*/
.lr-access-routes__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.7em;
	width: var(--lr-space-2xs);
	height: var(--lr-space-2xs);
	border-radius: 50%;
	background: var(--lr-accent);
}


/* =========================================================
   4. 地図アプリ選択リンク
   location_map_urls() の Google/Apple 外部リンク（<a href>）用。
   拠点なら業種を問わず使う汎用UIのため core に置く。
   （al/42-exhibition.css から移設。展示会 single も同クラスを流用）
   ========================================================= */
.lr-map-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lr-space-xs);
	margin-top: var(--lr-space-xs);
}
.lr-map-links__item {
	font-size: var(--lr-font-sm);
	padding: .2em .8em;
	border: 1px solid var(--lr-border);
	border-radius: var(--lr-radius);
	color: var(--lr-text);
	text-decoration: none;
	transition: border-color var(--lr-ease), color var(--lr-ease);
}
.lr-map-links__item:hover {
	color: var(--lr-link);
	border-color: var(--lr-link);
}