.hero {
	position: relative;
	width: 100%;
	padding-bottom: 28px;
}
.hero img {
	width: 100%;
	display: block;
	height: auto;
}

.heading-title {
	--min-size: 18.9333;
	--max-size: 36;
	--font-size: calc(
		(var(--min-size) * 1px) + 
		(var(--max-size) - var(--min-size)) * 
		((100cqw - 320px) / (1200 - 320))
	);
	font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
	font-weight: 700;
	
	padding-bottom: 8px;
	text-align: center;
}

.heading-subtitle {
	--min-size: 14.39999;
	--max-size: 24;
	--font-size: calc(
		(var(--min-size) * 1px) + 
		(var(--max-size) - var(--min-size)) * 
		((100cqw - 320px) / (1200 - 320))
	);
	font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
	font-weight: 500;
	
	padding-bottom: 8px;
	text-align: center;
}

.alert-box {
	background-color: rgba(104, 178, 97, 0.1);
	color: #333;
	
	--min-margin-bottom: 23.1999;
	--max-margin-bottom: 36;
	--margin-bottom: calc(
		(var(--min-margin-bottom) * 1px) + 
		(var(--max-margin-bottom) - var(--min-margin-bottom)) * 
		((100cqw - 320px) / (1200 - 320))
	);
	margin: 0 auto clamp(var(--min-margin-bottom) * 1px, var(--margin-bottom), var(--max-margin-bottom) * 1px);
	
	padding: 8px 16px;
	border-radius: 8px;

	display: flex;
	width: fit-content;
	justify-content: center;
	align-items: center;
	
	--min-size: 14.39999;
	--max-size: 24
	--font-size: calc(
		(var(--min-size) * 1px) + 
		(var(--max-size) - var(--min-size)) * 
		((100cqw - 320px) / (1200 - 320))
	);
	font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
	font-weight: 400;
	
	text-align: center;
}

.alert-box img {
	--min-width: 27.475;
	--max-width: 36;
	--width: calc(
		(var(--min-width) * 1px) + 
		(var(--max-width) - var(--min-width)) * 
		((100cqw - 320px) / (1200 - 320))
	);
	width: clamp(var(--min-width) * 1px, var(--width), var(--max-width) * 1px);
	height: clamp(var(--min-width) * 1px, var(--width), var(--max-width) * 1px);
}

.alert-box span { padding-left: 5px; }

.slots-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	width: 100%;
	margin: 0 auto;
}
/* Slot Card */
.slot-card {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid rgba(51, 51, 51, 0.1);
	
	border-radius: 12px;
	padding: 16px;
	background: #fff;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	text-align: center;
	
	max-width: 400px;
}

.slot-body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 5px;
}

.slot-header {
	display: flex;
	align-items: center;
	gap: 10px;
	text-align: left;
}

.slot-title {
	font-size: 18px;
	font-weight: 600;
}

.slot-title span:nth-child(2) {
	display: block;
	font-size: 14px;
	font-weight: 400;
	color: rgba(51, 51, 51, 0.8);
	text-align: center;
}

.slot-times {
	list-style: none;
	text-align: right;
	color: #333;
	font-weight: 400;
	width: 160px;
	padding-left: 16px;
}

.slot-times li {
	padding: 4px 0;
	border-bottom: 1px solid rgba(51, 51, 51, 0.1);
	text-align: center;
	font-size: 14px;
}

.slot-times li:last-child { border-bottom: none; }

.slot-footer {
	background: rgba(51, 51, 51, 0.08);
	border-radius: 16px;
	text-align: center;
	padding: 6px 10px;
	color: #333;
	font-size: 14px;
	font-weight: 400;
	width: 100%;
}

.topics {
	background: rgba(104, 178, 97, 0.2);
	
	--min-padding: 23.1999;
	--max-padding: 48;
	--padding: calc(
		(var(--min-padding) * 1px) + 
		(var(--max-padding) - var(--min-padding)) * 
		((100cqw - 320px) / (1200 - 320))
	);
	padding: clamp(var(--min-padding) * 1px, var(--padding), var(--max-padding) * 1px);
	
	margin-top: 48px;	
}
.topics  > .container {
	padding: 0;
}

.topics .heading-subtitle { 
	font-weight: 400; 
	--min-padding: 19.1999;
	--max-padding: 32;
	--padding: calc(
		(var(--min-padding) * 1px) + 
		(var(--max-padding) - var(--min-padding)) * 
		((100cqw - 320px) / (1200 - 320))
	);
	padding-bottom: clamp(var(--min-padding) * 1px, var(--padding), var(--max-padding) * 1px);
}
.topics .heading-subtitle > span:nth-child(1) { display: block; }
.topics .heading-subtitle > span:nth-child(2) { display: none; }

.flex-1 { flex: 1 1 0%; }

/* Card Container - Default Mobile (< 640px) Native Horizontal Scroll */
.cards-container {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	gap: 20px; /* 20px gap between cards in mobile slider */
	padding: 10px 0 25px 0;
	/* Hide scrollbars */
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none;  /* IE and Edge */
}

.cards-container::-webkit-scrollbar {
	display: none; /* Chrome, Safari, Opera */
}

/* Mobile Card Item */
.card-item {
	flex: 0 0 272px; /* Fixed width 272px on mobile */
	max-width: 272px;
	scroll-snap-align: center; /* Center snap point when scrolling */
	display: flex;
}

/* Course Card Structure & Equal Height */
.course-card {
	width: 100%;
	height: 100%;
	background: #FFF;
	border-radius: 20px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}


.card-body {
	display: flex;
	flex-direction: column;
	flex: 1; /* Stretch body to fill available height for equal card heights */
	padding: 20px;
}


.card-body h3 {
	font-weight: 700;
	font-size: 17.5px;
}

.card-body div {
	font-weight: 400;
	font-size: 14px;
}

.btn-reservation {
	width: 300px;
	border-radius: 30px;
	border: 0;
	padding: 16px 24px;

	font-weight: 600;
	font-size: 20px;
	text-align: center;

	background: #68B261;
	color: #FFF;
	
	display: block;
	margin: 36px auto 8px;
}

@media screen and (min-width: 640px) {
	.topics .heading-subtitle > span:nth-child(2) { display: block; }
	.topics .heading-subtitle > span:nth-child(1) { display: none; }
	
	 .cards-container {
		overflow-x: visible;
		scroll-snap-type: none;
		flex-wrap: wrap;
		justify-content: center;
		gap: 24px;
		padding: 10px 0;
		max-width: 568px;
		margin: 0 auto;
	}

	.card-item {
		flex: 0 0 calc(50% - 12px);
		max-width: 272px;
		scroll-snap-align: none;
	}
}

@media screen and (min-width: 768px) {
	.hero {
		width: 75%;
		margin: 0 auto;
		padding-top: 36px;
		padding-bottom: 44px;
		max-width: 1041px;
	}
	
	.alert-box { 
		border-radius: 25px; 
		
		--min-size: 18;
		--max-size: 24;
		--font-size: calc(
			(var(--min-size) * 1px) + 
			(var(--max-size) - var(--min-size)) * 
			((100cqw - 768px) / (1200 - 768))
		);
		font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
		
	}
	
	.slots-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}
	.slot-card:nth-child(3) {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc(50% - 12px);
	}
	
	.slot-title { font-size: 20px; }
	.slot-title span:nth-child(2) { font-size: 14px; }
	
	.slot-times { width: 160px; }
	.slot-times li { font-size: 16px;}
}

@media screen and (min-width: 992px) {
	.hero { padding-top: 40px; padding-bottom: 48px; }
	
	.slot-title { font-size: 23px; }
	.slot-title span:nth-child(2) { font-size: 16px; }
}


@media screen and (min-width: 1200px) {
	.hero { 
		width: 82%;
		padding-top: 44px; 
		padding-bottom: 52px; 
	}
	
	.heading-title { font-size: 36px; }
	.heading-subtitle { font-size: 24px; }
	
	.slots-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 28px;
	}
	.slot-card { padding: 24px 20px; }
	
	.slot-card:nth-child(3) {
		grid-column: auto;
		justify-self: stretch;
		width: 100%;
	}
	
	
	.cards-container { max-width: 864px; }
	/* 每列 3 欄，且限定最大寬度 272px */
	.card-item {
		flex: 0 0 calc(33.333% - 16px);
		max-width: 272px;
	}
}

@media screen and (min-width: 1400px) {
	.hero {
		width: 100%;
		padding-top: 48px; 
		padding-bottom: 56px; 
	}
}