/**
 * 跨頁共用的海島交通指南。
 *
 * 由 [seascape_resort_map_transport] 獨立載入，目的地主題頁不需載入 Leaflet 與地圖主資源。
 */

/* ---------- 地圖頁交通指南 ---------- */

.ss-route-guide {
	background: #F4F7F8;
	border-block: 1px solid rgba(12, 37, 68, 0.08);
}

.ss-route-guide__head {
	max-width: 820px;
	margin-inline: auto;
}

.ss-route-guide__layout {
	display: grid;
	grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.65fr);
	gap: var(--sp-40, 1.5rem);
	align-items: stretch;
	margin-top: var(--sp-60, 4rem);
}

.ss-route-guide__gateway {
	position: relative;
	overflow: hidden;
	padding: var(--sp-50, 2.5rem);
	border-radius: var(--r-card, 18px);
	background: var(--c-accent-700, #0C2544);
	color: #fff;
}

.ss-route-guide__gateway::after {
	content: "";
	position: absolute;
	right: -72px;
	bottom: -72px;
	width: 190px;
	height: 190px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 50%;
	box-shadow: 0 0 0 28px rgba(255, 255, 255, 0.035), 0 0 0 56px rgba(255, 255, 255, 0.025);
	pointer-events: none;
}

.ss-route-guide__gateway-label {
	margin: 0;
	color: rgba(255, 255, 255, 0.72);
	font-size: var(--fs-xs, 0.75rem);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.ss-route-guide__gateway-code {
	display: block;
	margin-top: var(--sp-30, 1rem);
	color: var(--c-secondary, #D5B05E);
	font-family: var(--f-display, serif);
	font-size: clamp(4rem, 8vw, 6.5rem);
	font-weight: 600;
	line-height: 0.92;
	letter-spacing: -0.04em;
}

.ss-route-guide__gateway h3 {
	position: relative;
	z-index: 1;
	margin-top: var(--sp-40, 1.5rem);
	color: #fff;
	font-size: var(--fs-xl, 1.5rem);
}

.ss-route-guide__gateway-en,
.ss-route-guide__gateway-copy {
	position: relative;
	z-index: 1;
}

.ss-route-guide__gateway-en {
	margin-top: 0.4rem;
	color: rgba(255, 255, 255, 0.66);
	font-size: var(--fs-xs, 0.75rem);
	letter-spacing: 0.04em;
}

.ss-route-guide__gateway-copy {
	margin-top: var(--sp-40, 1.5rem);
	color: rgba(255, 255, 255, 0.86);
	font-size: var(--fs-sm, 0.875rem);
	line-height: 1.85;
}

.ss-route-guide__routes {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ss-route-guide__route {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr);
	gap: var(--sp-30, 1rem);
	padding: var(--sp-30, 1rem) var(--sp-40, 1.5rem);
	border: 1px solid rgba(12, 37, 68, 0.12);
	border-radius: var(--r-sm, 12px);
	background: #fff;
}

.ss-route-guide__route-index {
	display: grid;
	place-items: center;
	align-self: start;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(22, 60, 99, 0.25);
	border-radius: 50%;
	color: var(--c-accent-700, #0C2544);
	font-size: var(--fs-xs, 0.75rem);
	font-weight: 700;
	letter-spacing: 0.08em;
}

.ss-route-guide__route-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-30, 1rem);
}

.ss-route-guide__mode,
.ss-route-guide__duration {
	margin: 0;
	font-size: var(--fs-xs, 0.75rem);
	font-weight: 700;
}

.ss-route-guide__mode {
	color: var(--c-accent, #163C63);
	letter-spacing: 0.08em;
}

.ss-route-guide__duration {
	color: #8A681C;
	white-space: nowrap;
}

.ss-route-guide__route h3 {
	margin-top: 0.35rem;
	color: var(--c-accent-700, #0C2544);
	font-size: var(--fs-lg, 1.125rem);
}

.ss-route-guide__route h3 span {
	margin-left: 0.35rem;
	color: var(--c-gray, #5A6672);
	font-family: var(--f-body, sans-serif);
	font-size: var(--fs-xs, 0.75rem);
	font-weight: 500;
}

.ss-route-guide__path {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin-top: 0.65rem;
	color: var(--c-accent-700, #0C2544);
	font-size: var(--fs-sm, 0.875rem);
	font-weight: 650;
}

.ss-route-guide__path i {
	position: relative;
	flex: 1 1 44px;
	min-width: 32px;
	height: 1px;
	border-top: 1px dashed rgba(22, 60, 99, 0.45);
}

.ss-route-guide__path i::after {
	content: "";
	position: absolute;
	top: -4px;
	right: 0;
	width: 7px;
	height: 7px;
	border-top: 1px solid rgba(22, 60, 99, 0.65);
	border-right: 1px solid rgba(22, 60, 99, 0.65);
	transform: rotate(45deg);
}

.ss-route-guide__copy {
	margin-top: 0.55rem;
	color: var(--c-gray, #5A6672);
	font-size: var(--fs-sm, 0.875rem);
	line-height: 1.75;
}

.ss-route-guide__note {
	display: flex;
	gap: 0.7rem;
	margin: var(--sp-40, 1.5rem) 0 0;
	padding-top: var(--sp-30, 1rem);
	border-top: 1px solid rgba(12, 37, 68, 0.12);
	color: var(--c-gray, #5A6672);
	font-size: var(--fs-sm, 0.875rem);
	line-height: 1.7;
}

.ss-route-guide__note strong {
	flex: 0 0 auto;
	color: var(--c-accent-700, #0C2544);
}

@media (max-width: 760px) {
	.ss-route-guide__layout {
		grid-template-columns: 1fr;
		margin-top: var(--sp-50, 2.5rem);
	}

	.ss-route-guide__gateway {
		padding: var(--sp-40, 1.5rem);
	}

	.ss-route-guide__gateway-code {
		font-size: 4.5rem;
	}

	.ss-route-guide__route {
		grid-template-columns: 40px minmax(0, 1fr);
		padding: var(--sp-30, 1rem);
	}
}

@media (max-width: 480px) {
	.ss-route-guide__route-heading {
		align-items: flex-start;
		flex-direction: column;
		gap: 0.2rem;
	}

	.ss-route-guide__path {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
		font-size: 0.78rem;
	}

	.ss-route-guide__path span:last-child {
		text-align: right;
	}

	.ss-route-guide__note {
		display: block;
	}

	.ss-route-guide__note strong {
		display: block;
		margin-bottom: 0.3rem;
	}
}