/**
 * 個別課程頁共用樣式（六個學習主題頁共用一份）。
 *
 * 頁面內容本身是自訂 HTML 區塊，只放 markup；樣式集中在這裡，
 * 由外掛在「內容含 smcp-page」的頁面條件載入，避免同一份 CSS 複製六次。
 *
 * 設計語彙對齊首頁實查值：卡片圓角 8px、陰影 0 15px 30px rgba(119,123,146,.1)、
 * 按鈕圓角 8px、區塊標題 26px/600 ls .08em、卡片標題 20px、小標籤 12px、內文 15px。
 */

.smcp-page {
	--smcp-ink: var(--theme-palette-color-4, #122B32);
	--smcp-body: var(--theme-palette-color-3, #314B52);
	--smcp-muted: var(--theme-palette-color-2, #85A0A8);
	--smcp-accent: var(--theme-palette-color-1, #536D74);
	--smcp-line: var(--theme-palette-color-5, #EAEDF1);
	--smcp-tint: var(--theme-palette-color-7, #FAFBFC);
	--smcp-surface: var(--theme-palette-color-8, #ffffff);
	--smcp-orange: var(--theme-palette-color-10, #FA9138);
	--smcp-shadow: 0 15px 30px 0 rgba(119, 123, 146, .10);
	--smcp-radius: 8px;
	--smcp-radius-lg: 12px;
}

/* 佈景與 WP core 會對 h1–h6 / p / ul 注入預設 margin（.entry-content h2 是 0,0,1,1），
   同 class 寫兩次把 reset 提到 0,0,2,1 壓過去。
   ⚠️ reset 涵蓋的標籤上不要再用 margin 排版（會被這條蓋掉），一律用 gap 或 flex-grow。 */
.smcp-page.smcp-page :is(h1, h2, h3, h4, h5, h6, p, ol, ul, li, dl, dt, dd, figure, figcaption, blockquote) {
	margin: 0;
}
.smcp-page.smcp-page :is(ol, ul) {
	list-style: none;
	padding-inline-start: 0;
}

.smcp-page {
	color: var(--smcp-body);
	display: flex;
	flex-direction: column;
	gap: 72px;
}

.smcp-page .smcp-sec {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.smcp-page .smcp-h2 {
	color: var(--smcp-ink);
	font-size: 26px;
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 1.6;
}

/* 區塊標題前的 logo 圖示（對齊首頁：32×32、flex、gap 12px） */
.smcp-page .smcp-h2 {
	align-items: center;
	display: flex;
	gap: 12px;
}

.smcp-page .smcp-h2::before {
	background: url("https://4samantha.cc/wp-content/uploads/2025/03/scimgLgOebI.webp") center / contain no-repeat;
	content: "";
	flex-shrink: 0;
	height: 32px;
	width: 32px;
}

.smcp-page .smcp-h3 {
	color: var(--smcp-ink);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: .06em;
	line-height: 1.6;
}

.smcp-page .smcp-sub {
	font-size: 16px;
	line-height: 1.9;
	margin-top: -10px;
}

/* 條列補充（例如調色修圖課的「需明確標示」） */
.smcp-page .smcp-notes {
	background: var(--smcp-tint);
	border: 1px solid var(--smcp-line);
	border-radius: var(--smcp-radius-lg);
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px 26px 24px;
}

.smcp-page .smcp-note {
	font-size: 15px;
	line-height: 1.85;
	padding-left: 16px;
	position: relative;
}

.smcp-page .smcp-note::before {
	background: var(--smcp-muted);
	border-radius: 50%;
	content: "";
	height: 5px;
	left: 2px;
	position: absolute;
	top: 11px;
	width: 5px;
}

/* 兩組流程並列時（調色修圖課：線上團體班／實體一對一） */
.smcp-page .smcp-flow-group {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.smcp-page .smcp-btn {
	align-self: flex-start;
	background: var(--smcp-accent);
	border-radius: var(--smcp-radius);
	color: var(--smcp-surface);
	display: inline-block;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .04em;
	line-height: 1.6;
	padding: 12px 30px;
	text-decoration: none;
}

.smcp-page .smcp-btn:hover {
	background: var(--smcp-ink);
	color: var(--smcp-surface);
}

/* 共用圖示外框 */
.smcp-page .smcp-icon {
	align-items: center;
	background: rgba(250, 145, 56, .12);
	border-radius: 10px;
	color: var(--smcp-orange);
	display: inline-flex;
	flex-shrink: 0;
	height: 42px;
	justify-content: center;
	width: 42px;
}

.smcp-page .smcp-icon svg {
	display: block;
	height: 23px;
	width: 23px;
}

/* ---------- Block 1：課程成果主視覺（圖左、文字右） ---------- */

.smcp-page .smcp-hero {
	align-items: center;
	display: grid;
	gap: 100px;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
}

.smcp-page .smcp-hero__media {
	border-radius: var(--smcp-radius);
	overflow: hidden;
}

.smcp-page .smcp-hero__img {
	aspect-ratio: 1 / 1;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/* 不能裁切的主視覺（例如修圖前後對比：切掉兩側就看不出對照）改用 4:3，與原圖比例一致。 */
.smcp-page .smcp-hero--wide .smcp-hero__img {
	aspect-ratio: 4 / 3;
}

.smcp-page .smcp-hero__text {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.smcp-page .smcp-eyebrow {
	color: var(--smcp-muted);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .14em;
	line-height: 1.6;
}

.smcp-page .smcp-hero__title {
	color: var(--smcp-ink);
	font-size: 38px;
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 1.45;
}

.smcp-page .smcp-hero__t {
	color: var(--smcp-ink);
	font-size: 21px;
	font-weight: 600;
	letter-spacing: .04em;
	line-height: 1.7;
}

.smcp-page .smcp-hero__points {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.smcp-page .smcp-hero__point {
	font-size: 15px;
	line-height: 1.9;
	padding-left: 18px;
	position: relative;
}

.smcp-page .smcp-hero__point::before {
	background: var(--smcp-orange);
	border-radius: 50%;
	content: "";
	height: 6px;
	left: 0;
	position: absolute;
	top: 11px;
	width: 6px;
}

.smcp-page .smcp-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* 按鈕與上方標籤拉開距離（<a> 不在 margin reset 名單內，margin-top 有效） */
.smcp-page .smcp-hero__text .smcp-btn {
	margin-top: 14px;
}

/* 還沒有課程照片的頁面：主視覺改成整寬文字面板，不要放不相干的照片充數。
   之後補到照片，把 smcp-hero--text 換回 smcp-hero 並加上 <img> 即可。 */
.smcp-page .smcp-hero--text {
	background: var(--smcp-tint);
	border: 1px solid var(--smcp-line);
	border-radius: var(--smcp-radius-lg);
	display: block;
	padding: 40px 40px 44px;
}

.smcp-page .smcp-hero--text .smcp-hero__text {
	max-width: 760px;
}

.smcp-page .smcp-tag {
	background: var(--smcp-line);
	border-radius: var(--smcp-radius);
	color: var(--smcp-body);
	font-size: 14px;
	line-height: 1.6;
	padding: 6px 13px;
}

/* ---------- Block 2：適合哪些學生（圖示卡片） ---------- */

.smcp-page .smcp-fit {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.smcp-page .smcp-fit__item {
	background: var(--smcp-surface);
	border-radius: var(--smcp-radius);
	box-shadow: var(--smcp-shadow);
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 22px 22px 24px;
}

.smcp-page .smcp-fit__d {
	font-size: 15px;
	line-height: 1.9;
}

/* ---------- Block 3：你會學到什麼 ---------- */

.smcp-page .smcp-learn {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.smcp-page .smcp-learn__item {
	align-items: flex-start;
	background: var(--smcp-surface);
	border-radius: var(--smcp-radius);
	box-shadow: var(--smcp-shadow);
	display: flex;
	gap: 16px;
	padding: 20px 22px 22px;
}

.smcp-page .smcp-learn__n {
	background: rgba(250, 145, 56, .12);
	border-radius: var(--smcp-radius);
	color: var(--smcp-orange);
	flex-shrink: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 32px;
	text-align: center;
	width: 32px;
}

.smcp-page .smcp-learn__d {
	font-size: 15px;
	line-height: 1.9;
}

/* ---------- Block 4：課程流程（圖示卡片） ---------- */

.smcp-page .smcp-flow {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.smcp-page .smcp-step {
	background: var(--smcp-surface);
	border-radius: var(--smcp-radius);
	box-shadow: var(--smcp-shadow);
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 22px 20px 24px;
}

.smcp-page .smcp-step__head {
	align-items: center;
	display: flex;
	gap: 12px;
}

.smcp-page .smcp-step__n {
	color: var(--smcp-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1.5;
}

.smcp-page .smcp-step__t {
	color: var(--smcp-ink);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: .04em;
	line-height: 1.6;
}

.smcp-page .smcp-step__list {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.smcp-page .smcp-step__li {
	font-size: 14px;
	line-height: 1.8;
	padding-left: 14px;
	position: relative;
}

.smcp-page .smcp-step__li::before {
	background: var(--smcp-muted);
	border-radius: 50%;
	content: "";
	height: 4px;
	left: 0;
	position: absolute;
	top: 11px;
	width: 4px;
}

/* ---------- 實用資訊 ---------- */

.smcp-page .smcp-info {
	background: var(--smcp-tint);
	border: 1px solid var(--smcp-line);
	border-radius: var(--smcp-radius-lg);
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	overflow: hidden;
	padding: 0;
}

.smcp-page .smcp-info__cell {
	background: var(--smcp-surface);
	box-shadow: 1px 0 0 0 var(--smcp-line), 0 1px 0 0 var(--smcp-line);
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px 22px 22px;
}

.smcp-page .smcp-info__k {
	color: var(--smcp-muted);
	font-size: 12px;
	letter-spacing: .1em;
	line-height: 1.6;
}

.smcp-page .smcp-info__v {
	color: var(--smcp-ink);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.7;
}

/* ---------- 響應式 ---------- */

@media (max-width: 1100px) {
	.smcp-page .smcp-flow {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 980px) {
	.smcp-page .smcp-fit {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.smcp-page .smcp-learn {
		grid-template-columns: minmax(0, 1fr);
	}

	.smcp-page .smcp-flow {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 782px) {
	.smcp-page {
		gap: 56px;
	}

	.smcp-page .smcp-hero {
		gap: 42px;
		grid-template-columns: minmax(0, 1fr);
	}

	.smcp-page .smcp-hero__title {
		font-size: 28px;
	}

	.smcp-page .smcp-hero__t {
		font-size: 18px;
	}

	.smcp-page .smcp-h2 {
		font-size: 22px;
	}

	.smcp-page .smcp-h2::before {
		height: 26px;
		width: 26px;
	}


	.smcp-page .smcp-fit,
	.smcp-page .smcp-flow,
	.smcp-page .smcp-info {
		grid-template-columns: minmax(0, 1fr);
	}

	.smcp-page .smcp-hero--text {
		padding: 26px 20px 28px;
	}

	.smcp-page .smcp-notes {
		padding: 20px 18px 22px;
	}
}