/* ==========================================================================
   跃起动力 · 课程板块  (/class/)
   视觉语言对齐官网：深藏青 #102136、主色紫 #7456f1、圆角 5px、通栏首屏
   规则：不使用 emoji，全部图标为手写 SVG
   ========================================================================== */

.yqd,
.yqd-hero {
	--yqd-primary: #7456f1;
	--yqd-primary-dark: #5e3fde;
	--yqd-ink: #102136;
	--yqd-text: #4d5d6d;
	--yqd-muted: #7b8794;
	--yqd-line: #e2e7ec;
	--yqd-bg: #f3f5f7;
	--yqd-r: 5px;
	--yqd-container: 1290px;
}

.yqd__inner,
.yqd {
	/* 与 Blocksy 的 .ct-container 完全一致：min(100%, 90vw) + 1290px 上限 + 居中对齐。
	   这样正文左右边缘与头部 logo、页脚内容严格对齐。 */
	width: min(100%, 90vw);
	max-width: var(--yqd-container);
	margin-inline: auto;
}

.yqd {
	padding-top: clamp(36px, 4vw, 56px);
	padding-bottom: clamp(64px, 7vw, 96px);
	color: var(--yqd-text);
	font-size: 16px;
	line-height: 1.7;
}

.yqd *,
.yqd *::before,
.yqd *::after,
.yqd-hero *,
.yqd-hero *::before,
.yqd-hero *::after { box-sizing: border-box; }

.yqd h1,
.yqd h2,
.yqd h3,
.yqd-hero h1 { color: var(--yqd-ink); line-height: 1.25; margin: 0; }
.yqd p { margin: 0; }
.yqd a { text-decoration: none; color: inherit; }
.yqd-i { display: block; flex: none; }

/* -------------------------------------------------------------- 通栏首屏 */

.yqd-hero {
	position: relative;
	overflow: hidden;
	background: var(--yqd-ink);
	color: #fff;
	padding-top: clamp(104px, 8vw, 132px);
	padding-bottom: clamp(38px, 4vw, 54px);
}

.yqd-hero__deco {
	position: absolute;
	top: 0;
	right: 0;
	width: min(62%, 720px);
	height: 100%;
	color: rgba(255, 255, 255, .14);
	pointer-events: none;
}

.yqd-hero__inner { position: relative; z-index: 1; }

.yqd-hero h1 {
	color: #fff;
	font-size: clamp(30px, 3.4vw, 42px);
	font-weight: 700;
	letter-spacing: -.01em;
}

.yqd-hero__desc {
	margin-top: 14px !important;
	max-width: 620px;
	font-size: clamp(15px, 1.5vw, 17px);
	color: rgba(255, 255, 255, .72);
}

.yqd-hero__meta,
.yqd-crumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
	font-size: 14px;
	color: rgba(255, 255, 255, .72);
}

.yqd-crumb { margin: 0 0 16px; }
.yqd-crumb a { color: rgba(255, 255, 255, .78); }
.yqd-crumb a:hover { color: #fff; }
.yqd-crumb__sep { color: rgba(255, 255, 255, .3); }
.yqd-hero__meta .yqd-i { display: inline-block; margin-right: 2px; }
.yqd-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 255, 255, .35); }

/* ------------------------------------------------------------------ 区块 */

.yqd-sec { margin-bottom: clamp(38px, 4.5vw, 60px); }
.yqd-sec:last-child { margin-bottom: 0; }

.yqd-sec__title {
	margin: 0 0 18px;
	font-size: clamp(19px, 2vw, 24px);
	font-weight: 700;
}

/* ------------------------------------------------------------------ 赛道 */

.yqd-tracks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
}

.yqd-track {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 26px 26px 22px;
	border: 1px solid var(--yqd-line);
	border-radius: var(--yqd-r);
	background: #fff;
	transition: border-color .15s ease, background .15s ease;
}

.yqd-track:hover { border-color: var(--yqd-ink); background: #fcfcfd; }

.yqd-track__icon { color: var(--yqd-primary); }
.yqd-track:hover .yqd-track__icon { color: var(--yqd-primary-dark); }

.yqd-track__name { font-size: 19px; font-weight: 700; color: var(--yqd-ink); }
.yqd-track__desc { font-size: 15px; color: var(--yqd-text); }

.yqd-track__foot {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 16px;
	font-size: 14px;
	color: var(--yqd-muted);
}

.yqd-track__go { display: inline-flex; color: var(--yqd-primary); transition: transform .15s ease; }
.yqd-track:hover .yqd-track__go { transform: translateX(3px); }

/* -------------------------------------------------------------- 课程列表 */

.yqd-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--yqd-line);
}

.yqd-row { border-bottom: 1px solid var(--yqd-line); }

.yqd-row__link {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 17px 2px;
}

.yqd-row__no {
	flex: none;
	width: 30px;
	font-size: 14px;
	color: #a8b2bd;
	font-variant-numeric: tabular-nums;
}

.yqd-row__body { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 4px; }

.yqd-row__title { font-size: 17px; font-weight: 600; color: var(--yqd-ink); transition: color .15s ease; }
.yqd-row__link:hover .yqd-row__title { color: var(--yqd-primary); }

.yqd-row__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--yqd-muted);
}

.yqd-row__lock { display: inline-flex; align-items: center; gap: 4px; }
.yqd-row__go { display: inline-flex; color: #c6ced7; transition: color .15s ease, transform .15s ease; }
.yqd-row__link:hover .yqd-row__go { color: var(--yqd-primary); transform: translateX(3px); }

/* -------------------------------------------------------- 空状态 / 按钮 */

.yqd-empty {
	padding: 56px 24px;
	border: 1px solid var(--yqd-line);
	border-radius: var(--yqd-r);
	text-align: center;
	color: var(--yqd-muted);
}

.yqd-empty .yqd-i { margin: 0 auto 14px; color: #c6ced7; }
.yqd-empty p { margin: 0 0 8px; }
.yqd-empty p:last-child { margin-bottom: 0; }

.yqd-link { color: var(--yqd-primary); border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.yqd-link:hover { color: var(--yqd-primary-dark); }

.yqd-btn {
	display: inline-block;
	padding: 12px 30px;
	border-radius: var(--yqd-r);
	background: var(--yqd-ink);
	color: #fff !important;
	font-size: 15px;
	font-weight: 600;
	transition: background .15s ease;
}

.yqd-btn:hover { background: var(--yqd-primary-dark); color: #fff !important; }

/* ---------------------------------------------------------------- 播放器 */

.yqd-player {
	overflow: hidden;
	border-radius: var(--yqd-r);
	background: #000;
}

.yqd-player video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	background: #000;
}

.yqd-notice {
	padding: 18px 20px;
	border-left: 3px solid var(--yqd-primary);
	background: var(--yqd-bg);
	border-radius: 0 var(--yqd-r) var(--yqd-r) 0;
}

/* ------------------------------------------------------------ 课程版本切换
   多版本时课时页顶部的分段按钮组：灰底槽 + 白色按钮，选中态用主色描边 + 阴影抬起。
   点击仍是整页跳转（URL 可分享、可刷新、无 JS 依赖），只是把交互外观做成"按钮"。 */

.yqd-vers {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 22px;
	padding: 4px;
	border: 1px solid var(--yqd-line);
	border-radius: calc(var(--yqd-r) + 4px);
	background: #f3f5f7;
}

.yqd-vers__item {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 132px;
	padding: 9px 18px;
	border: 1px solid transparent;
	border-radius: var(--yqd-r);
	background: transparent;
	color: var(--yqd-muted);
	transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.yqd-vers__item:hover { background: rgba(255, 255, 255, .7); color: var(--yqd-ink); }

.yqd-vers__item.is-active {
	background: #fff;
	border-color: var(--yqd-primary);
	color: var(--yqd-ink);
	box-shadow: 0 1px 2px rgba(16, 33, 54, .08);
}
.yqd-vers__item.is-active .yqd-vers__name { color: var(--yqd-primary); }
.yqd-vers__item.is-active .yqd-vers__sub { color: var(--yqd-ink); }

.yqd-vers__name { font-size: 15px; font-weight: 600; color: var(--yqd-ink); }
.yqd-vers__item:not(.is-active) .yqd-vers__name { color: var(--yqd-muted); font-weight: 500; }

.yqd-vers__sub {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--yqd-muted);
}

.yqd-vers__sub > span { display: inline-flex; align-items: center; gap: 3px; }

/* 日期用等宽数字，多个版本纵向对齐不会忽宽忽窄 */
.yqd-vers__time { font-variant-numeric: tabular-nums; }
.yqd-vers__lock { color: var(--yqd-muted); }

/* 手机上按钮平铺铺满，别挤成两行半 */
@media (max-width: 560px) {
	.yqd-vers { display: flex; width: 100%; }
	.yqd-vers__item { flex: 1 1 0; min-width: 0; padding: 8px 10px; }
}

/* ---------------------------------------------------------------- 登录墙 */

.yqd-lock {
	padding: clamp(40px, 5vw, 64px) 24px;
	border: 1px solid var(--yqd-line);
	border-radius: var(--yqd-r);
	background: var(--yqd-bg);
	text-align: center;
}

.yqd-lock__icon { display: inline-flex; color: #a8b2bd; margin-bottom: 16px; }
.yqd-lock h2 { margin: 0 0 10px; font-size: 21px; }
.yqd-lock p { margin: 0 0 22px; color: var(--yqd-muted); }

/* ------------------------------------------------------------ 正文 / 翻页 */

.yqd-body { margin-top: clamp(28px, 3vw, 40px); font-size: 16px; }
.yqd-body > *:first-child { margin-top: 0; }
.yqd-body img { border-radius: var(--yqd-r); }

.yqd-pager {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin-top: clamp(36px, 4vw, 56px);
	padding-top: 20px;
	border-top: 1px solid var(--yqd-line);
}

.yqd-pager a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 48%;
	font-size: 15px;
	font-weight: 600;
	color: var(--yqd-ink);
}

.yqd-pager a:hover { color: var(--yqd-primary); }
.yqd-pager__next { margin-left: auto; text-align: right; }

/* ------------------------------------------------------------------ 手机 */

@media (max-width: 781px) {
	.yqd-hero { padding-top: 92px; }
	.yqd-hero__deco { width: 100%; opacity: .7; }

	.yqd-row__link { gap: 12px; padding: 15px 2px; }
	.yqd-row__no { display: none; }
	.yqd-row__title { font-size: 16px; }

	.yqd-pager { flex-direction: column; gap: 14px; }
	.yqd-pager a { max-width: 100%; }
	.yqd-pager__next { margin-left: 0; text-align: left; }
}

/* ==========================================================================
   透明头部下的 logo（浅色版置换）
   /class/ 的首屏是深藏青通栏，头部压在这块深色上 —— 官网默认 logo 是深色
   （黑字），压在深色上完全看不清。站内已有一个为深底设计的浅色版
   （跃起动力长方形logo黑暗透明底.png：白字 + 浅蓝徽标），这里按状态置换：

     · 头部处于透明态（含手机端）→ 换成浅色版
     · 吸顶后头部变回白底 ([data-sticky*="yes"]) → 还原官网默认深色版
     · 高度取主题的 --logo-max-height（桌面 70 / 手机 45 / 平板 15），
       并用 clamp 兜底 34px，避免平板断点那个 15px 让 logo 小到看不清
   ========================================================================== */
.yqd-class-page .ct-header [data-transparent-row="yes"] [data-id="logo"] .site-logo-container {
	display: block;
	width: calc(clamp(34px, var(--logo-max-height, 70px), 70px) * 3);
	height: clamp(34px, var(--logo-max-height, 70px), 70px);
	background-image: url("/wp-content/uploads/2026/08/%E8%B7%83%E8%B5%B7%E5%8A%A8%E5%8A%9B%E9%95%BF%E6%96%B9%E5%BD%A2logo%E9%BB%91%E6%9A%97%E9%80%8F%E6%98%8E%E5%BA%95.png");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
}

.yqd-class-page .ct-header [data-transparent-row="yes"] [data-id="logo"] .site-logo-container img {
	display: none !important;
}

/* 吸顶后：头部已是白底，恢复官网默认的深色 logo */
.yqd-class-page .ct-header [data-sticky*="yes"] [data-transparent-row="yes"] [data-id="logo"] .site-logo-container {
	width: auto;
	height: auto;
	background-image: none;
}

.yqd-class-page .ct-header [data-sticky*="yes"] [data-transparent-row="yes"] [data-id="logo"] .site-logo-container img {
	display: initial !important;
}


/* ------------------------------------------------------------ AI 课程摘要 */

.yqd-ai {
	margin: 0 0 28px;
	border: 1px solid var(--yqd-line);
	border-radius: var(--yqd-r);
	background: var(--yqd-bg);
}

.yqd-ai__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 15px 20px;
	cursor: pointer;
	list-style: none;
	font-weight: 600;
	color: var(--yqd-ink);
}

.yqd-ai__head::-webkit-details-marker { display: none; }

/* head 在 tab 模式下只是标题行：不可点、无手型光标，底部留出 tab 行的呼吸位 */
.yqd-ai__head--tabs { cursor: default; padding-bottom: 12px; }

/* Tab 按钮组：胶囊槽，选中态为主色实心（同站内 .yqd-tab 的克制配色） */
.yqd-ai__tabs {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	border: 1px solid var(--yqd-line);
	border-radius: 999px;
	background: var(--yqd-bg);
}
.yqd-ai__tabs button {
	margin: 0;
	padding: 6px 18px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--yqd-muted);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.yqd-ai__tabs button:hover { color: var(--yqd-ink); background: #fff; }
.yqd-ai__tabs button.is-on {
	background: var(--yqd-primary);
	color: #fff;
}
.yqd-ai__tabs button:focus-visible {
	outline: 2px solid var(--yqd-primary);
	outline-offset: 2px;
}

/* 内容面板：分隔线在这里，body 不再画线（否则两道线） */
.yqd-ai__pane { border-top: 1px solid var(--yqd-line); }
.yqd-ai__pane[hidden] { display: none; }

/* 时间节点列表 */
.yqd-chapters { margin: 0; padding: 0; list-style: none; }
.yqd-chapters li {
	display: flex;
	gap: 12px;
	align-items: baseline;
	padding: 9px 20px;
	border-bottom: 1px solid var(--yqd-line);
	cursor: pointer;
	transition: background .12s ease;
}
.yqd-chapters li:last-child { border-bottom: 0; }
.yqd-chapters li:hover { background: var(--yqd-bg); }
.yqd-chapters li.is-on { background: var(--yqd-bg); }
.yqd-chapters__t {
	flex: 0 0 auto;
	min-width: 52px;
	color: var(--yqd-primary);
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.yqd-chapters__title { color: var(--yqd-text); font-size: 14px; }
.yqd-chapters__empty { padding: 14px 20px; color: var(--yqd-muted); }

.yqd-ai__icon { display: inline-flex; color: var(--yqd-primary); }
.yqd-ai__note { font-weight: 400; font-size: 13px; color: var(--yqd-muted); margin-left: auto; }
/* 多版本课程：面板右上角标明这份 AI 内容属于哪一版 */

.yqd-ai__body {
	padding: 4px 20px 20px;
	font-size: 15px;
	color: var(--yqd-text);
}

.yqd-ai__body > *:first-child { margin-top: 14px; }
.yqd-ai__body ul,
.yqd-ai__body ol { margin: 0 0 14px; padding-left: 22px; }
.yqd-ai__body li { margin-bottom: 6px; }
.yqd-ai__body h3,
.yqd-ai__body h4 { margin: 18px 0 8px; font-size: 16px; color: var(--yqd-ink); }
.yqd-ai__body p { margin: 0 0 12px; }

@media (max-width: 689.98px) {
	/* 手机上不要把右上角提示挤到第二行独占一行（用户 1004 反馈）：
	   保持与 Tab 组同一行、靠右；宽度不够就压缩字号、必要时省略号，
	   绝不换行。flex-basis:100% 正是之前强制换行的元凶，已去掉。 */
	.yqd-ai__head { gap: 8px; padding: 12px 14px; }
	.yqd-ai__note {
		margin-left: auto;
		flex: 0 1 auto;
		min-width: 0;
		font-size: 12px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.yqd-ai__tabs { flex: 0 1 auto; }
	.yqd-ai__tabs button { padding: 5px 12px; font-size: 13px; }
}

/* -------------------------------------- 课程页：视频 + AI 摘要侧栏（桌面端） */

.yqd-lesson { display: block; }
.yqd-lesson__main { min-width: 0; }

@media (min-width: 1024px) {
	.yqd-lesson {
		display: flex;
		gap: 18px;
		align-items: stretch; /* 侧栏高度跟随主栏（视频 16:9 撑出的高度） */
		margin-bottom: 28px;
	}
	.yqd-lesson__main { flex: 1 1 auto; }
	.yqd-lesson__side {
		flex: 0 0 340px;
		position: relative; /* 高度由 stretch 撑出，面板绝对定位充满后内部滚动 */
	}
	.yqd-lesson__side .yqd-ai {
		position: absolute;
		inset: 0;
		display: flex;
		flex-direction: column;
		margin: 0;
		overflow: hidden;
	}
	.yqd-lesson__side .yqd-ai__head { flex: 0 0 auto; }
	/* 滚动容器是 .yqd-ai__pane（tab 化之后 body 被包在 pane 里）。
	   min-height:0 必须有：flex 子项默认不肯收缩到内容高度以下，
	   没有它 overflow-y 永远不生效（0909 踩过：内容被裁掉且滚不动）。 */
	.yqd-lesson__side .yqd-ai__pane {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto; /* 摘要装不下时内部滚动，不影响页面 */
		overscroll-behavior: contain;
	}
}

@media (max-width: 1023.98px) {
	.yqd-lesson__side { margin-top: 18px; }
}

/* 摘要头部已从 <summary>（可折叠）改为普通 div，光标还原 */
.yqd-ai__head { cursor: default; }

/* 多选标签筛选的提示文字 */
.yqd-tabs__hint {
	align-self: center;
	margin-left: 6px;
	font-size: 12px;
	color: var(--yqd-muted);
}

/* 标签筛选丸（与 library.css 同款，搬到这里让课程页也能用） */
.yqd-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 22px;
}

.yqd-tab {
	padding: 7px 16px;
	border: 1px solid var(--yqd-line);
	border-radius: 999px;
	font-size: 14px;
	color: var(--yqd-text);
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.yqd-tab:hover { border-color: var(--yqd-primary); color: var(--yqd-primary); }
.yqd-tab.is-active { background: var(--yqd-ink); border-color: var(--yqd-ink); color: #fff; }
.yqd-tab.is-active:hover { background: var(--yqd-ink); border-color: var(--yqd-ink); color: #fff; }


/* ------------------------------------------------- 本讲资料（版本专属） */

.yqd-files {
	margin: 0 0 28px;
	padding: 18px 20px;
	border: 1px solid var(--yqd-line);
	border-radius: var(--yqd-r);
	background: var(--yqd-bg);
}

.yqd-files__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 600;
	color: var(--yqd-ink);
}

.yqd-files__note {
	margin-left: auto;
	font-size: 13px;
	font-weight: 400;
	color: var(--yqd-muted);
}

.yqd-files__list { margin: 0; padding: 0; list-style: none; }

.yqd-files__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 0;
	border-top: 1px solid var(--yqd-line);
}

.yqd-files__item:first-child { border-top: 0; }

.yqd-files__ico { display: inline-flex; flex: none; color: var(--yqd-primary); }

.yqd-files__name {
	flex: 1;
	min-width: 0;
	color: var(--yqd-ink);
	font-weight: 500;
	text-decoration: none;
	word-break: break-all;
}

.yqd-files__name:hover { color: var(--yqd-primary); text-decoration: underline; }
.yqd-files__name.is-missing { color: var(--yqd-muted); text-decoration: line-through; }

.yqd-files__size { flex: none; font-size: 13px; color: var(--yqd-muted); }

.yqd-files__get {
	flex: none;
	padding: 5px 15px;
	border: 1px solid var(--yqd-primary);
	border-radius: 999px;
	color: var(--yqd-primary);
	font-size: 13px;
	text-decoration: none;
	transition: background .15s, color .15s;
}

.yqd-files__get:hover { background: var(--yqd-primary); color: #fff; }

@media (max-width: 689.98px) {
	.yqd-files__size { display: none; }
}