/* ===== FAQ component & page-specific styles =====
   FAQ class set 同時被兩個 view 使用：
   - application/views/faq.php           （/faq 常見問答頁，使用 .faq-top / .faq-c / 容器）
   - application/views/course-detail.php （課程詳情頁底部 FAQ 區塊，僅用 .faq-item / .faq-question / .faq-answer）

   通用屬性（display / flex / font-size / font-weight / overflow / border-radius / width）
   已搬到 markup 的 BS5 utility class（utilities.css）。
   此檔保留 module-specific 的色值、寫死數值、@media 響應式 override。
   ============================================================ */

/* ----- FAQ page top hero banner ----- */
.faq-top {
	background: url("/upload/index-topbg.jpg?v=20260225") no-repeat center center;
	background-size: cover;
	height: 656px;
}
@media (max-width: 567px) {
	.faq-top {
		background: none;
		height: auto;
		display: block;          /* override d-flex utility on mobile */
		text-align: left;        /* override text-center utility on mobile */
		padding: 20px;
	}
}

.faq-top .txtbox h1 {
	font-size: 56px;
	margin: 0 0 20px 0;
}
@media (max-width: 567px) {
	.faq-top .txtbox h1 { font-size: 20px; }
}

/* ----- Category tabs ----- */
.faq-c .item a {
	background: #FFFFFF;
	color: #333333;
	padding: 0 10px;
	margin: 0 10px;
	height: 38px;
	line-height: 34px;
	border: 1px solid #D4D2E3;
}
@media (max-width: 567px) {
	.faq-c .item a {
		margin: 0 4px 8px;
		font-size: 14px;
		height: 30px;
		line-height: 28px;
	}
}
.faq-c .item a:hover {
	background: #F3B94B;
}
.faq-c .item a.active {
	background: #F3B94B;
}

/* faq.php 內 .faq-cat 是 tab 群組外層 */
.faq-cat {
	cursor: pointer;
}

/* ----- FAQ item (component, reused in course-detail.php) ----- */
.faq-item {
	border-bottom: 1px solid #ddd;
	margin-bottom: 10px;
}
/* faq.php 專用：tab 切換控制 .faq-item 顯隱
   用 .container.faq 限制 scope，避免影響 course-detail.php 的 FAQ 區塊
   （course-detail 的 .faq-item 沒有 .container.faq 祖先） */
.container.faq .faq-item { display: none; }
.container.faq .faq-item.active2 { display: block; }

.faq-question {
	cursor: pointer;
	padding: 10px;
	line-height: 1.8;
}
@media (max-width: 767px) {
	.faq-question { font-size: 16px; padding: 0 10px; }
}

/* CSS Grid trick：用 grid-template-rows 0fr↔1fr 取代 max-height magic number。
   無寫死高度 cap，自然對齊內容真實高度。 */
.faq-answer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease, padding 0.3s ease;
	padding: 0 10px;
}
.faq-answer__inner {
	overflow: hidden;
	min-height: 0;
}
.faq-item.active .faq-answer {
	grid-template-rows: 1fr;
	padding: 10px;
}