/* ===============================
   access: アクセス（option駆動）
   SP: 見出し→外観写真→アクセス/営業時間→地図→ボタン
   PC: 写真 | 見出し+テキスト+ボタン | 地図 の3カラム
   =============================== */

.access {
	padding-block: var(--space-1) var(--space-3);
}

.access__inner {
	display: grid;
	gap: var(--space-2);
}

/* ---- 飾り見出し（SPは罫線+菱形、PCはプレーン左揃え） ---- */

.access__title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	text-align: center;
	letter-spacing: 0.15em;
}

.access__title::before,
.access__title::after {
	content: "";
	flex: none;
	width: var(--space-8);
	height: 1px;
	background: var(--color-accent);
}

.access__title span {
	display: inline-flex;
	align-items: center;
	gap: var(--space-4);
}

.access__title span::before,
.access__title span::after {
	content: "";
	flex: none;
	width: var(--space-2);
	height: var(--space-2);
	border: 1px solid var(--color-accent);
	transform: rotate(45deg);
}

.access__photo img {
	width: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
}

.access__route {
	font-size: var(--fs-body);
	line-height: var(--lh-tight);
	letter-spacing: 0.05em;
}

.access__hours {
	margin-top: var(--space-2);
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body);
	letter-spacing: 0.05em;
}

/* ラベル（ランチ/ディナー）と時刻の整列 */
.access__hours-row {
	display: flex;
	gap: var(--space-4);
}

.access__hours-label {
	flex: none;
	min-width: var(--space-10);
}

/* ---- 地図プレースホルダ（本実装は後日） ---- */

.access__map {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 13 / 5;
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
}

.access__map-label {
	color: var(--color-text-muted);
	font-size: var(--fs-body-sm);
	letter-spacing: 0.2em;
}

/* ---- ボタン ---- */

.access__btn {
	position: relative;
	display: block;
	text-align: center;
	padding: var(--space-1) var(--space-8);
	border: 1px solid var(--color-accent);
	background: var(--color-bg-card);
	color: var(--color-text);
	font-size: var(--fs-body);
	line-height: var(--lh-tight);
	letter-spacing: 0.1em;
	border-radius: var(--radius-sm);
	transition: opacity var(--duration-fast);
}

.access__btn:hover {
	opacity: 0.75;
}

/* 山括弧矢印 */
.access__btn::after {
	content: "";
	position: absolute;
	top: 50%;
	right: var(--space-4);
	width: var(--space-2);
	height: var(--space-2);
	border-top: 1px solid var(--color-primary);
	border-right: 1px solid var(--color-primary);
	transform: translateY(-50%) rotate(45deg);
}

@media (min-width: 768px) {
	.access {
		padding-block: var(--space-3);
	}

	/* 参考画像の実測比 486:263:463 に合わせた3カラム */
	.access__inner {
		grid-template-columns: 1.85fr 1fr 1.76fr;
		grid-template-rows: auto auto 1fr;
		column-gap: var(--space-9);
		row-gap: var(--space-5);
	}

	/* 写真は中央カラムの高さに追従させる（縦長化を防ぐため絶対配置で切り抜く） */
	.access__photo {
		grid-column: 1;
		grid-row: 1 / 4;
		position: relative;
	}

	.access__photo img {
		position: absolute;
		inset: 0;
		height: 100%;
		aspect-ratio: auto;
	}

	.access__title {
		grid-column: 2;
		grid-row: 1;
		justify-content: flex-start;
		text-align: left;
		font-size: var(--fs-h2-mobile);
	}

	/* PCの見出しはプレーン */
	.access__title::before,
	.access__title::after,
	.access__title span::before,
	.access__title span::after {
		display: none;
	}

	.access__info {
		grid-column: 2;
		grid-row: 2;
	}

	.access__route {
		font-size: var(--fs-body-pc);
	}

	.access__hours {
		margin-top: var(--space-4);
		font-size: var(--fs-body);
	}

	.access__hours-label {
		min-width: var(--space-11);
	}

	/* 参考画像の行ピッチ約40pxに合わせる */
	.access__hours-row + .access__hours-row {
		margin-top: var(--space-3);
	}

	.access__map {
		grid-column: 3;
		grid-row: 1 / 4;
		aspect-ratio: auto;
	}

	.access__more {
		grid-column: 2;
		grid-row: 3;
		align-self: end;
	}

	/* 参考画像ではボタンが中央カラムの幅いっぱい */
	.access__btn {
		padding-block: var(--space-3);
	}
}