/* 講師陣容頁（/common/teacher）專用樣式：只作用在 .tc- 前綴，不影響全站
 * 內容區（.tc-content）由後台編輯器維護，這裡的樣式也會載入到編輯器裡，所見即所得 */

.tc-page {
	--tc-orange: #EA5F2B;        /* 品牌橘：姓名（大字，對比 3.4:1 符合大字級 AA） */
	--tc-orange-dark: #B4441B;   /* 深橘：標籤文字（白底 5.5:1） */
	--tc-orange-soft: #FDF0EA;   /* 淺橘：標籤、重點框底色 */
	--tc-blue: #036EB8;          /* 全站標題藍（白底 5.4:1） */
	--tc-text: #3F3F3F;          /* 內文（白底 10.6:1） */
	--tc-muted: #6B6B6B;         /* 次要文字（白底 5.3:1） */
	--tc-border: #ECE7E4;
	--tc-radius: 12px;
	color: var(--tc-text);
	font-size: 15px;
	line-height: 1.75;
}

.tc-page strong,
.tc-page b {
	font-weight: 700; /* 全站 reset 把粗體清掉了 */
}
.tc-page em,
.tc-page i {
	font-style: italic;
}
.tc-page u {
	text-decoration: underline;
}

html {
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* ---------- 快速導覽 ---------- */
.tc-nav {
	margin: 20px 0 0;
}
.tc-nav-label {
	margin-bottom: 8px;
	color: var(--tc-muted);
	font-size: 14px;
}
.tc-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.tc-nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--tc-border);
	border-radius: 999px;
	background: #FFF;
	color: var(--tc-text);
	font-size: 15px;
	text-decoration: none;
	cursor: pointer;
	transition: border-color .2s, background-color .2s, color .2s;
}
.tc-nav a:hover {
	border-color: var(--tc-orange);
	background: var(--tc-orange-soft);
	color: var(--tc-orange-dark);
}
.tc-nav a:focus-visible {
	outline: 2px solid var(--tc-blue);
	outline-offset: 2px;
}

/* ---------- 講師卡片（外框固定） ---------- */
.tc-list {
	display: grid;
	gap: 20px;
	margin: 24px 0;
}

.tc-card {
	display: grid;
	grid-template-columns: 104px 1fr;
	column-gap: 16px;
	row-gap: 18px;
	padding: 20px;
	border: 1px solid var(--tc-border);
	border-radius: var(--tc-radius);
	background: #FFF;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
	scroll-margin-top: 110px; /* 手機版固定 header 約 95px，跳轉時不被蓋住 */
}

.tc-photo {
	display: block;
	width: 104px;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 8px;
	background: #F4F4F4;
}

.tc-id {
	align-self: center;
	min-width: 0;
}

.tc-page .tc-name {
	margin: 0 !important; /* 蓋掉全站 h2 { margin-top: 1rem !important } */
	color: var(--tc-orange);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.35;
}
.tc-page .tc-realname { /* 蓋掉全站 .content span 的紅字 */
	margin-left: 6px;
	color: var(--tc-muted);
	font-size: 15px;
	font-weight: 400;
	white-space: nowrap;
}

.tc-body {
	grid-column: 1 / -1;
	min-width: 0;
}

.tc-empty {
	padding: 48px 16px;
	border: 1px dashed var(--tc-border);
	border-radius: var(--tc-radius);
	color: var(--tc-muted);
	text-align: center;
}

/* ---------- 內容區（後台編輯器維護） ---------- */
/* 注意：編輯器裡 .tc-page 與 .tc-content 在同一個 <body> 上，
   所以內容區規則一律以 .tc-content 開頭，不能寫成 .tc-page .tc-content（否則編輯器吃不到樣式） */
.tc-content span {
	color: inherit; /* 蓋掉全站 .content span 的紅字；行內指定的顏色仍然優先 */
}
.tc-content > :first-child {
	margin-top: 0 !important;
}
.tc-content p {
	margin: 0 0 .6em;
}
.tc-content a {
	color: var(--tc-blue);
	text-decoration: underline;
}

/* 區塊標題：藍字＋左側橘條 */
.tc-content h3,
.tc-content h2 {
	margin: 1.2em 0 .4em !important;
	padding-left: 10px;
	border-left: 3px solid var(--tc-orange);
	color: var(--tc-blue);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}
/* 小標：深灰粗體 */
.tc-content h4,
.tc-content h5 {
	margin: 1em 0 .3em !important;
	color: var(--tc-text);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
}

/* 條列：預設橘點 */
.tc-content ul {
	margin: 0 0 .6em;
}
.tc-content ul li {
	position: relative;
	padding-left: 14px;
}
.tc-content ul li::before {
	content: "";
	position: absolute;
	top: .875em;
	left: 2px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--tc-orange);
	transform: translateY(-50%);
}
.tc-content ol {
	margin: 0 0 .6em;
	padding-left: 1.6em;
	list-style: decimal;
}
.tc-content ol li {
	list-style: decimal;
}

/* 要點條列：粗體標題換行、下面接說明 */
.tc-content .tc-points li + li {
	margin-top: 12px;
}
.tc-content .tc-points strong {
	display: block;
}

/* 標籤列（專業領域）：橘色圓角標籤 */
.tc-content .tc-tags-label {
	margin: 0 0 6px;
	color: var(--tc-muted);
	font-size: 13px;
	line-height: 1.5;
}
.tc-content ul.tc-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 4px;
}
.tc-content ul.tc-tags li {
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--tc-orange-soft);
	color: var(--tc-orange-dark);
	font-size: 14px;
	line-height: 1.6;
}
.tc-content ul.tc-tags li::before {
	display: none;
}

/* 兩欄區塊：電腦版左右兩欄、手機一欄 */
.tc-content .tc-cols {
	display: grid;
	gap: 0 40px;
	margin-top: 16px;
	padding-top: 4px;
	border-top: 1px solid var(--tc-border);
}
.tc-content .tc-col {
	min-width: 0;
}

/* 引言框 */
.tc-content .tc-quote,
.tc-content blockquote {
	margin: 0 0 .8em;
	padding: 10px 14px;
	border-left: 3px solid #F3C3AE;
	border-radius: 0 8px 8px 0;
	background: #FAF7F5;
}

/* 重點框 */
.tc-content .tc-callout {
	margin: 0 0 .8em;
	padding: 12px 16px;
	border-radius: 10px;
	background: var(--tc-orange-soft);
}
.tc-content .tc-callout > :last-child {
	margin-bottom: 0;
}

/* 按鈕連結（相關課程、立即報名） */
.tc-content a.tc-btn {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	margin: 4px 6px 4px 0;
	padding: 0 16px;
	border: 1px solid var(--tc-orange);
	border-radius: 999px;
	background: #FFF;
	color: var(--tc-orange-dark);
	font-size: 14px;
	text-decoration: none;
	transition: background-color .2s, color .2s;
}
.tc-content a.tc-btn:hover {
	background: var(--tc-orange);
	color: #FFF;
}

/* 灰色小字 */
.tc-content .tc-muted {
	color: var(--tc-muted);
	font-size: 13px;
}

/* 圖片、影片、表格：手機自動縮放 */
.tc-content img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}
.tc-content .tc-video {
	position: relative;
	margin: 0 0 .8em;
	aspect-ratio: 16 / 9;
	border-radius: 8px;
	overflow: hidden;
	background: #000;
}
.tc-content .tc-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.tc-content table {
	display: block;
	max-width: 100%;
	margin: 0 0 .8em;
	overflow-x: auto;
	border-collapse: collapse;
}
.tc-content th,
.tc-content td {
	padding: 6px 10px;
	border: 1px solid var(--tc-border);
	vertical-align: top;
}
.tc-content th {
	background: #FAF7F5;
	font-weight: 700;
}
.tc-content hr {
	margin: 1em 0;
	border: 0;
	height: 1px;
	background: var(--tc-border);
}

/* 頁面上方／下方區塊 */
.tc-page-block {
	margin: 20px 0;
}
.tc-page-block:empty {
	display: none;
}

/* ---------- 後台預覽提示列 ---------- */
.tc-preview-bar {
	position: sticky;
	top: 0;
	z-index: 1000;
	padding: 10px 16px;
	background: #FFF4CC;
	color: #6B4E00;
	font-size: 14px;
	text-align: center;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}

/* ---------- 平板以上：照片放大、左圖右文 ---------- */
@media (min-width: 768px) {
	.tc-card {
		grid-template-columns: 180px 1fr;
		column-gap: 32px;
		padding: 28px 32px;
		scroll-margin-top: 130px; /* 桌機 header 約 113px */
	}
	.tc-photo {
		grid-row: 1 / span 2;
		width: 180px;
		border-radius: 10px;
	}
	.tc-id {
		align-self: start;
	}
	.tc-body {
		grid-column: 2;
	}
	.tc-page .tc-name {
		font-size: 24px;
	}
}

/* ---------- 桌機：兩欄區塊並排，控制每行長度 ---------- */
@media (min-width: 1024px) {
	.tc-content .tc-cols {
		grid-template-columns: 1fr 1fr;
	}
}