/* CSS Document */

#booking{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	margin: clamp(32px, calc(64 / 1200 * 100vw), 64px) 0 clamp(64px, calc(128 / 1200 * 100vw), 128px) 0;
	& h2{
		justify-self: center;
		display: grid;
		grid-template-columns: 1fr auto 0;
		justify-content: center;
		column-gap: 16px;
		padding-bottom: 4px;
		border-bottom: 4px dotted currentColor;
		font-weight: 900;
		font-size: clamp(22px, calc(28 / 768 * 100vw), 28px);
		letter-spacing: 0.1em;
		text-align: center;
		&:before,
		&:after{
			content: "";
			grid-column: 1;
			grid-row: 1;
			height: 1em;
			background: currentColor;
		}
		&:before{
			aspect-ratio: 1;
			transform: translateY(calc(0.325em - 50%));
			-webkit-mask: var(--icon-point) no-repeat left top / contain;
		}
		&:after{
			grid-column: 1;
			aspect-ratio: 20 / 16;
			margin-left: 0.75em;
			transform: translateY(0.325em);
			-webkit-mask: var(--icon-booking) no-repeat right bottom / contain;
		}
	}
	& h2+div{
		margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
		letter-spacing: 0.06em;
		& ul{
			display: grid;
			grid-row-gap: 4px;
			margin-top: 9px;
		}
		& li{
			padding-left: 0.9em;
			text-indent: -0.9em;
			&:lang(zh-TW){
				padding-left: 1.05em;
				text-indent: -1.05em;
			}
		}
	}
	#bookingList{
		margin-top: clamp(32px, calc(64 / 1200 * 100vw), 64px);
	}
}

#bookingList{
	& ul{
		display: grid;
		grid-gap: 16px 24px;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	}
	& a{
		display: inline-grid;
		grid-template-columns: auto 1fr;
		align-items: baseline;
		column-gap: 4px;
		letter-spacing: 0.06em;
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 16px;
			background: currentColor;
			transform: translateY(0.2em);
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><polyline points="2 6 2 14 12 14"/><rect x="6" y="2" width="8" height="8"/></svg>') no-repeat center / contain;
		}
	}
}

#transport{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	margin: clamp(32px, calc(64 / 1200 * 100vw), 64px) 0 clamp(64px, calc(128 / 1200 * 100vw), 128px) 0;
	& h2{
		justify-self: center;
		display: grid;
		grid-template-columns: 1fr auto 0;
		justify-content: center;
		column-gap: 16px;
		padding-bottom: 4px;
		border-bottom: 4px dotted currentColor;
		font-weight: 900;
		font-size: clamp(22px, calc(28 / 768 * 100vw), 28px);
		letter-spacing: 0.1em;
		text-align: center;
		&:before,
		&:after{
			content: "";
			grid-column: 1;
			grid-row: 1;
			height: 1em;
			background: currentColor;
		}
		&:before{
			aspect-ratio: 1;
			transform: translateY(calc(0.325em - 50%));
			-webkit-mask: var(--icon-point) no-repeat left top / contain;
		}
		&:after{
			grid-column: 1;
			aspect-ratio: 20 / 16;
			margin-left: 0.75em;
			transform: translateY(0.325em);
			-webkit-mask: var(--icon-access) no-repeat right bottom / contain;
		}
	}
	& h2+div{
		margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
		letter-spacing: 0.06em;
		& ul{
			display: grid;
			grid-row-gap: 4px;
			margin-top: 9px;
		}
		& li{
			padding-left: 0.9em;
			text-indent: -0.9em;
			&:lang(zh-TW){
				padding-left: 1.05em;
				text-indent: -1.05em;
			}
		}
	}
	& section{
		margin-top: clamp(32px, calc(64 / 1200 * 100vw), 64px);
		& ul{
			display: grid;
			grid-gap: 16px 24px;
		}
		& a{
			display: inline-grid;
			grid-template-columns: auto 1fr;
			align-items: baseline;
			column-gap: 4px;
			letter-spacing: 0.06em;
			&:before{
				content: "";
				aspect-ratio: 1;
				width: 16px;
				background: currentColor;
				transform: translateY(0.2em);
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><polyline points="2 6 2 14 12 14"/><rect x="6" y="2" width="8" height="8"/></svg>') no-repeat center / contain;
			}
		}
	}
	& h3{
		display: grid;
		grid-template-columns: auto 1fr;
		justify-content: center;
		align-items: baseline;
		column-gap: clamp(8px, calc(16 / 768 * 100vw), 16px);
		font-weight: 900;
		font-size: clamp(20px, calc(24 / 768 * 100vw), 24px);
		letter-spacing: 0.1em;
		&:before{
			content: "";
			width: clamp(4px, calc(6 / 768 * 100vw), 6px);
			height: 1em;
			background: var(--color-theme);
			border-radius: 3px;
			transform: translateY(0.15em);
		}
	}
	& h3+div{
		margin-top: 16px;
	}
}