/*
  首頁專用：主視覺、吉祥物、任務辦法卡片、常見問題。

  設計稿的桌機版首頁是一張 1440×900 的合成 PNG 加透明熱區，這裡整段重建成真實 HTML：
  文字可選取、可縮放、讀屏軟體讀得到，錨點也才有東西可以指。
*/

/* ---- 主視覺 ------------------------------------------------------------ */

.hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(16px, 4vw, 48px);
	padding-bottom: 24px;
}

.hero-headline { margin: 0 0 18px; }
.hero-headline img {
	display: block;
	/*
	  上限刻意設成 560px，與雙欄版型的欄寬上限一致：
	  shell 上限 1200 - 左右 padding 32 - gap 48，兩欄平分正好是 560。

	  主標是「文字燒進圖片」，只能整體縮放、不能重新斷行，所以單欄切雙欄的瞬間
	  它會直接改變大小。原本單欄允許長到 610px，跨過斷點卻只剩 390px——
	  視窗變寬、標題反而縮小 36%，看起來像故障。兩邊上限對齊之後落差為零。
	  這個值也正是改版前桌機實際顯示的寬度，因此桌機外觀不變。
	*/
	width: min(100%, 560px);
}

.tagline {
	margin: 0 0 26px;
	font-size: clamp(17px, 1.9vw, 22px);
	font-weight: 800;
	line-height: 1.6;
}

.cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}
.entry-opening-note {
	margin: 10px 0 0;
	/* 此為首頁停用入口的開放時間，固定使用深紅色，不隨其他元件主題色改變。 */
	color: #b3261e !important;
	font-size: 16px;
	font-weight: 800;
}

.mascot { justify-self: center; }
.mascot img {
	display: block;
	width: min(100%, 620px);
}

/*
  主視覺的斷點是 1199，比站上其他元件（導覽列、獎勵卡的 860）晚——這是刻意的，
  兩者不要一起調整：
  - 1200 以上：雙欄，欄寬正好 560，與上面主標的上限相同，切換時大小不變
  - 1199 以下：單欄置中。這個區間若硬排雙欄，主標與吉祥物各只剩 390～550px，
    本來就過於侷促
*/
@media (max-width: 1199px) {
	.hero {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.hero-headline img { margin-inline: auto; }
	.cta-row { justify-content: center; }
	.cta-row .btn { width: min(100%, 360px); }
	/* 吉祥物放到文字下方，但視覺上仍緊接著主標 */
	.mascot { order: 2; margin-top: -8px; }
	.hero-copy { order: 1; }
}

/* ---- 區段 -------------------------------------------------------------- */

.section {
	margin-top: 56px;
	scroll-margin-top: 96px;
}
.section > h2 {
	text-align: center;
	margin-bottom: 28px;
}

/* ---- 任務辦法（三張卡） ------------------------------------------------- */

.benefits {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	background: rgba(255, 255, 255, .94);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	padding: 12px;
}
.benefit {
	display: grid;
	grid-template-columns: 88px 1fr;
	align-items: center;
	gap: 14px;
	padding: 22px 18px;
}
.benefit + .benefit { border-left: 1px solid var(--line); }
.benefit img {
	width: 82px; height: 82px;
	object-fit: contain;
	border-radius: 50%;
	background: var(--orange-soft);
}
.benefit h3 { margin: 0 0 4px; font-size: 1.15rem; }
.benefit p { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--muted); }

@media (max-width: 860px) {
	.benefits { grid-template-columns: 1fr; }
	.benefit + .benefit {
		border-left: 0;
		border-top: 1px solid var(--line);
	}
}
@media (max-width: 380px) {
	.benefit { grid-template-columns: 64px 1fr; gap: 10px; padding: 18px 10px; }
	.benefit img { width: 60px; height: 60px; }
}

/* ---- 常見問題 ---------------------------------------------------------- */

.faq-list {
	max-width: 820px;
	margin-inline: auto;
	background: rgba(255, 255, 255, .94);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	padding: 8px 20px;
}
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 0; }
.faq-item summary {
	padding: 18px 4px;
	font-weight: 800;
	color: var(--ink);
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
	content: "＋";
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 28px; height: 28px;
	border-radius: 50%;
	background: var(--orange-soft);
	color: var(--orange-text);
	font-size: 18px;
	line-height: 1;
}
.faq-item[open] summary::before { content: "－"; }
.faq-item > div {
	padding: 0 4px 18px 44px;
	color: var(--muted);
}