/* ============================================================
   GameCG Replica — 首页主内容区组件样式（W3）
   数值移植自目标站 Tailwind 构建（03-homepage-app-tailwind-index-BrWHqNwt.css），
   按 1.15 倍（目标站 html zoom）换算为等效 px。
   仅作用于 .gc-home 容器，不影响主题其他页面。
   ============================================================ */

.gc-home {
	--gc-cream: #f6f5f1;      /* 目标站 --black，页面奶油底 */
	--gc-cream-2: #efeee9;    /* top-ten 区块底 */
	--gc-paper: #f8f7f3;      /* light-section 底 */
	--gc-ink: #111113;
	--gc-muted: #8b8983;
	--gc-line: #e1dfd8;
	--gc-line-2: #e3e1db;
	--gc-accent: #b8ff69;     /* 荧光绿 */
	background: var(--gc-cream);
	color: var(--gc-ink);
	overflow-x: clip;
}

.gc-home a {
	text-decoration: none;
	color: inherit;
}

/* 点阵纹理（目标站 --page-dots，22px 网格） */
.gc-sec-dots {
	background-image: radial-gradient(circle, #1111131c 0.9px, transparent 1px);
	background-size: 22px 22px;
	background-position: 0 0;
}

/* 版心：目标站 shell min(1200px,100%-120px) × 1.15 */
.gc-shell {
	width: min(1380px, 100% - 138px);
	margin-inline: auto;
}

/* ---------------- 1. Hero 促销大卡 ---------------- */

.gc-hero {
	padding: 28px 0 0;
}

.gc-hero-wrap {
	position: relative;
	overflow: hidden;
	background: #111114;
	color: #fff;
	border: 1px solid #11111314;
	border-radius: 14px;
	min-height: 414px;
	box-shadow: 0 12px 34px #29231b12;
}

/* 右侧宣传图占位：深色渐变 + 排版文字（不热链目标站图片） */
.gc-hero-art {
	position: absolute;
	inset: 0 0 0 44%;
	overflow: hidden;
}

.gc-hero-art-bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 95% at 82% 80%, #ff7b5233 0%, #ff7b5208 45%, transparent 62%),
		radial-gradient(80% 60% at 64% 96%, #b8ff6917 0%, transparent 58%),
		radial-gradient(70% 55% at 96% 18%, #55c7ff1c 0%, transparent 55%),
		linear-gradient(158deg, #232833 0%, #131721 48%, #0a0c12 100%);
}

.gc-hero-art-copy {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 0 9%;
}

.gc-hero-art-copy b {
	color: #ffffff2b;
	font-size: clamp(30px, 3.1vw, 46px);
	font-weight: 850;
	line-height: 1.22;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.gc-hero-art-foot {
	position: absolute;
	left: 9%;
	right: 8%;
	bottom: 9%;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.gc-hero-art-logo {
	color: #ffffff52;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.22em;
}

.gc-hero-art-tags {
	display: flex;
	gap: 8px;
}

.gc-hero-art-tags i {
	font-style: normal;
	color: #ffffff8c;
	font-size: 9.5px;
	font-weight: 600;
	padding: 4px 9px;
	border-radius: 999px;
	background: #ffffff14;
	box-shadow: inset 0 0 0 1px #ffffff1f;
}

.gc-hero-art-veil {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(90deg, #111114 0%, #111114f5 15%, #1111141a 62%, #11111408 100%);
}

/* 左侧文案 */
.gc-hero-copy {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
	width: 49%;
	padding: 48px 4vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	pointer-events: none;
}

.gc-hero-kicker {
	margin: 0 0 20px;
	font-size: 10.5px;
	font-weight: 750;
	letter-spacing: 0.13em;
}

.gc-hero-title {
	margin: 0;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	font-size: clamp(39px, 3.74vw, 55px);
	font-weight: 850;
	line-height: 1.08;
	letter-spacing: -0.055em;
}

.gc-hero-desc {
	margin-top: 21px;
	display: flex;
	flex-direction: column;
	color: #ffffff9e;
	font-size: 12.5px;
	line-height: 1.65;
}

.gc-hero-btn {
	pointer-events: auto;
	margin-top: 25px;
	min-width: 193px;
	min-height: 52px;
	padding: 0 17px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	background: #fff;
	border-radius: 8px;
	font-size: 11.5px;
	font-weight: 750;
	transition: transform 0.2s;
}

/* .gc-home a (0-1-1) 会覆盖单类选择器，故这里用复合选择器压回 */
.gc-home a.gc-hero-btn,
.gc-home .gc-hero-btn {
	color: #171718;
}

.gc-hero-btn:hover {
	transform: translateY(-2px);
}

/* 右上角会员标识 */
.gc-hero-side {
	position: absolute;
	top: 28px;
	right: 30px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	color: #ffffffe6;
	font-size: 10px;
	font-weight: 750;
	letter-spacing: 0.08em;
	line-height: 1.5;
}

/* 右下角翻页圆钮（装饰） */
.gc-hero-controls {
	position: absolute;
	bottom: 24px;
	right: 26px;
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 15px;
	min-height: 42px;
	padding: 0 10px;
	border-radius: 24px;
	background: #0000008f;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.gc-hero-controls button {
	cursor: pointer;
	background: transparent;
	border: 0;
	border-radius: 50%;
	width: 33px;
	height: 33px;
	color: #fff;
	font-size: 14px;
	line-height: 1;
}

.gc-hero-controls button:hover {
	background: #ffffff21;
}

.gc-hero-controls span {
	color: #ffffffbd;
	font-size: 10px;
	font-variant-numeric: tabular-nums;
}

/* ---------------- 2 + 3. 特性条 + 圆形分类图标行 ---------------- */

.gc-panel-sec {
	padding: 0 0 0;
}

.gc-panel {
	margin-top: 18px;
	margin-bottom: 53px;
	background: #ffffffb8;
	border: 1px solid var(--gc-line);
	border-radius: 11px;
	overflow: hidden;
}

/* 四栏特性条 */
.gc-proof {
	padding: 8px;
}

.gc-entries {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gc-entry {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 15px 18px;
	border-right: 1px solid var(--gc-line);
	text-decoration: none;
	color: inherit;
	position: relative;
	transition:
		box-shadow .35s ease,
		transform .35s var(--ease-out),
		border-color .3s ease,
		border-radius .3s ease;
}

.gc-entry:last-child { border-right: 0; }

.gc-entry:hover {
	border-color: transparent;
	border-radius: 14px;
	transform: translateY(-2px);
	box-shadow: 0 2px 4px rgba(23, 23, 25, .06), 0 18px 44px rgba(23, 23, 25, .16);
	z-index: 2;
}

.gc-entry-badge {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	flex: none;
	display: grid;
	place-items: center;
	font-size: 18px;
	font-weight: 900;
	letter-spacing: -0.02em;
	user-select: none;
}

.gc-e-dark { background: #171719; color: #fff; }
.gc-e-light { background: #fff; color: #171719; box-shadow: inset 0 0 0 1.5px #171719; }

.gc-entry-text { flex: 1; min-width: 0; }

.gc-entry-title {
	display: inline-block;
	font-size: 16px;
	font-weight: 900;
	letter-spacing: -0.01em;
	line-height: 1.3;
	color: inherit;
	padding-bottom: 2px;
	background-image: linear-gradient(#b8ff69, #b8ff69);
	background-repeat: no-repeat;
	background-size: 0% 6px;
	background-position: 0 100%;
	transition: background-size .4s var(--ease-out);
}

.gc-entry:hover .gc-entry-title { background-size: 100% 6px; }

.gc-entry-desc {
	margin-top: 3px;
	font-size: 12px;
	line-height: 1.5;
	color: rgba(17, 17, 19, .55);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gc-entry-go {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	flex: none;
	display: grid;
	place-items: center;
	color: #171719;
	border: 1px solid rgba(17, 17, 19, .14);
	transition: background .3s ease, border-color .3s ease;
}

.gc-entry:hover .gc-entry-go { background: #b8ff69; border-color: #b8ff69; }

.gc-entry-arrow {
	position: relative;
	display: block;
	width: 15px;
	height: 10px;
	transition: transform .3s var(--ease-out);
}

.gc-entry-arrow::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 11px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

.gc-entry-arrow::after {
	content: "";
	position: absolute;
	right: 1px;
	top: 1px;
	width: 7px;
	height: 7px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
}

.gc-entry-arrow-ext { transform: rotate(-45deg); }
.gc-entry:hover .gc-entry-arrow { transform: translateX(3px); }
.gc-entry:hover .gc-entry-arrow-ext { transform: rotate(-45deg) translateX(3px); }

/* /courses 课程中心学科入口 */
.gc-course-cats {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 26px;
}

.gc-course-cat {
	display: block;
	padding: 18px 20px;
	background: #fff;
	border: 1px solid rgba(17, 17, 19, .08);
	border-radius: 16px;
	text-decoration: none;
	color: inherit;
	position: relative;
	overflow: hidden;
	transition: box-shadow .3s ease, transform .3s var(--ease-out);
}

.gc-course-cat:hover {
	box-shadow: 0 2px 4px rgba(23, 23, 25, .06), 0 18px 44px rgba(23, 23, 25, .16);
	transform: translateY(-3px);
}

.gc-course-cat::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: #b8ff69;
}

.gc-course-cat strong { display: block; font-size: 16px; font-weight: 900; letter-spacing: -0.01em; }
.gc-course-cat span { display: block; margin-top: 4px; font-size: 12px; color: rgba(17, 17, 19, .55); }

.gc-course-head { margin: 0 0 22px; }
.gc-course-head .gc-kicker {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .16em;
	color: rgba(17, 17, 19, .45);
}

.gc-course-head h1 {
	margin: 8px 0 6px;
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 900;
	letter-spacing: -0.03em;
}

.gc-course-head p { font-size: 13px; color: rgba(17, 17, 19, .55); }

.gc-courses-row {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 18px;
}

/* 圆形分类图标行 */
.gc-quick {
	padding: 26px 28px 30px;
}

.gc-quick-grid {
	display: grid;
	grid-template-columns: repeat(9, 1fr);
	gap: 16px;
}

.gc-quick-grid a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 11px;
	min-width: 0;
}

.gc-quick-icon {
	width: 66px;
	max-width: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: #fff;
	background: #252528;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -0.04em;
	transition: transform 0.2s;
}

.gc-quick-grid a:hover .gc-quick-icon {
	transform: translateY(-4px);
}

.gc-quick-grid strong {
	width: 100%;
	overflow: hidden;
	text-align: center;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 11.5px;
	font-weight: 600;
	color: #4f4e4a;
}

/* 图标配色占位 */
.gc-qi-white-orange { color: #ff4713; background: #fff; box-shadow: inset 0 0 0 1px #dedbd4; }
.gc-qi-white-dark   { color: #111; background: #fff; box-shadow: inset 0 0 0 1px #dedbd4; }
.gc-qi-accent       { color: #17220d; background: #b8ff69; }

/* ---------------- 4. 课程卡片区 ---------------- */

.gc-sec {
	padding: 32px 0 60px;
}

.gc-sec-trending {
	background-color: var(--gc-cream-2);
	border-top: 1px solid var(--gc-line);
}

.gc-sec-recent {
	background-color: var(--gc-paper);
	border-top: 1px solid var(--gc-line-2);
}

/* 区块标题：kicker + 大标题 + 查看更多 */
.gc-sechead {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 34px;
	margin-bottom: 28px;
}

.gc-sechead-t {
	position: relative;
}

.gc-sechead-t::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 2px;
	left: -18px;
	width: 4px;
	border-radius: 4px;
	background: var(--gc-sec-accent, #111);
}

.gc-sechead-kicker {
	display: block;
	color: #85837d;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.13em;
}

.gc-sechead h2 {
	margin: 7px 0 0;
	font-size: 29px;
	font-weight: 780;
	letter-spacing: -0.045em;
	line-height: 1.2;
}

.gc-sechead-more {
	display: flex;
	align-items: center;
	gap: 9px;
	padding-bottom: 5px;
	font-size: 10px;
	font-weight: 600;
	color: #77756f;
	border-bottom: 1px solid currentColor;
	white-space: nowrap;
}

.gc-home .gc-sechead-more {
	color: #77756f;
}

.gc-home .gc-sechead-more:hover {
	color: var(--gc-ink);
}

/* 卡片栅格：fixed-five-grid × 1.15 */
.gc-cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.gc-c17 {
	min-width: 0;
}

.gc-c17-link {
	position: relative;
	display: block;
	height: 100%;
	background: #fff;
	border: 1px solid rgba(23, 23, 25, .10);
	border-radius: 16px;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(23, 23, 25, .05), 0 10px 28px rgba(23, 23, 25, .08);
	transition: box-shadow .5s cubic-bezier(.22, .61, .36, 1);
}

.gc-c17:hover .gc-c17-link,
.gc-c17:focus-within .gc-c17-link {
	box-shadow: 0 2px 4px rgba(23, 23, 25, .06), 0 18px 44px rgba(23, 23, 25, .16);
}

.gc-c17-link:focus-visible {
	outline: 2px solid #6F5EE0;
	outline-offset: 2px;
}

.gc-c17-cover {
	position: relative;
	margin: 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #171719;
}

.gc-c17-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

.gc-c17-ph {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	color: rgba(255, 255, 255, .4);
	font-size: 18px;
	font-weight: 800;
	letter-spacing: .04em;
	text-align: center;
}

.gc-c17-scrim {
	position: absolute;
	inset: 0;
	display: block;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(17, 17, 20, 0) 30%, rgba(17, 17, 20, .28) 60%, rgba(17, 17, 20, .72) 100%);
	opacity: .64;
	transition: opacity .5s ease;
}

.gc-c17:hover .gc-c17-img,
.gc-c17:focus-within .gc-c17-img {
	transform: scale(1.04);
}

.gc-c17:hover .gc-c17-scrim,
.gc-c17:focus-within .gc-c17-scrim {
	opacity: 1;
}

.gc-c17-badge {
	position: absolute;
	z-index: 2;
	left: 12px;
	top: 12px;
	display: inline-flex;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 10px;
	line-height: 1;
	font-weight: 800;
	letter-spacing: .06em;
	box-shadow: 0 4px 14px rgba(17, 17, 20, .24);
}

.gc-c17-badge-new {
	background: #B5E853;
	color: #171719;
}

.gc-c17-badge-hot {
	background: rgba(17, 17, 20, .72);
	color: #B5E853;
}

.gc-c17-info {
	padding: 14px 16px 16px;
	background: #fff;
}

.gc-c17-kicker {
	margin: 0;
	color: #6F5EE0;
	font-size: 11px;
	line-height: 1.4;
	font-weight: 600;
	letter-spacing: .05em;
}

.gc-c17-title {
	margin: 6px 0 0;
	font-size: 14px;
	line-height: 1.5;
	font-weight: 600;
	color: #171719;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.gc-c17-meta {
	margin: 6px 0 0;
	font-size: 11px;
	line-height: 1.5;
	color: rgba(23, 23, 25, .55);
}

.gc-c17-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid rgba(23, 23, 25, .08);
}

.gc-c17-price {
	font-size: 16px;
	line-height: 1.2;
	font-weight: 700;
	color: #171719;
}

.gc-c17-price-free {
	color: #78C828;
}

.gc-c17-cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding-bottom: 3px;
	font-size: 12px;
	line-height: 1.3;
	font-weight: 600;
	white-space: nowrap;
	color: #6F5EE0;
}

.gc-c17-arrow {
	display: inline-block;
	margin-left: 3px;
	transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

.gc-c17-cta::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	border-radius: 1px;
	background: #B5E853;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

.gc-c17:hover .gc-c17-cta::after,
.gc-c17:focus-within .gc-c17-cta::after {
	transform: scaleX(1);
}

.gc-c17:hover .gc-c17-arrow,
.gc-c17:focus-within .gc-c17-arrow {
	transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
	.gc-c17-img, .gc-c17-scrim, .gc-c17-cta::after, .gc-c17-arrow, .gc-c17-link {
		transition: none !important;
	}
}

/* ---------------- 响应式（对照目标站断点 1100 / 850 / 560） ---------------- */

@media (max-width: 1100px) {
	.gc-shell {
		width: calc(100% - 64px);
	}
	.gc-hero-wrap {
		min-height: 368px;
	}
	.gc-hero-art {
		inset: 0 0 0 38%;
	}
	.gc-hero-copy {
		width: 66%;
		padding: 34px;
	}
	.gc-hero-title {
		font-size: clamp(38px, 4.4vw, 48px);
	}
	.gc-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 22px 16px;
	}
	.gc-quick-grid {
		grid-template-columns: repeat(9, 1fr);
		gap: 12px;
	}
	.gc-quick-icon {
		width: 60px;
	}
}

@media (max-width: 850px) {
	.gc-shell {
		width: calc(100% - 36px);
	}
	.gc-hero-wrap {
		min-height: 340px;
	}
	.gc-hero-art {
		inset: 0 0 0 32%;
	}
	.gc-hero-copy {
		width: 72%;
		padding: 28px 23px;
	}
	.gc-entries {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.gc-entry {
		border-right: 1px solid var(--gc-line);
		border-bottom: 1px solid var(--gc-line);
		padding: 14px 14px;
		gap: 11px;
	}
	.gc-entry:nth-child(even) { border-right: 0; }
	.gc-entry:nth-child(n+3) { border-bottom: 0; }
	.gc-entry-badge { width: 40px; height: 40px; font-size: 15px; }
	.gc-entry-title { font-size: 14.5px; }
	.gc-entry-desc { font-size: 11px; }
	.gc-entry-go { width: 28px; height: 28px; }
	.gc-course-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.gc-courses-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.gc-quick {
		padding: 24px 14px 28px;
	}
	.gc-quick-grid {
		grid-template-columns: repeat(5, 1fr);
		gap: 26px 14px;
	}
	.gc-quick-icon {
		width: 64px;
		font-size: 15px;
	}
	.gc-quick-grid strong {
		font-size: 9.5px;
	}
	.gc-panel {
		margin-bottom: 44px;
	}
	.gc-sechead h2 {
		font-size: 26px;
	}
}

@media (max-width: 560px) {
	.gc-hero {
		padding-top: 14px;
	}
	.gc-hero-wrap {
		border-radius: 12px;
		min-height: 322px;
	}
	.gc-hero-copy {
		width: 78%;
		padding: 28px 20px;
	}
	.gc-hero-kicker {
		margin-bottom: 18px;
		font-size: 10px;
	}
	.gc-hero-title {
		font-size: 34px;
	}
	.gc-hero-desc {
		display: none;
	}
	.gc-hero-btn {
		min-width: 167px;
		min-height: 47px;
		margin-top: 21px;
	}
	.gc-hero-side {
		display: none;
	}
	.gc-hero-controls {
		bottom: 18px;
		right: 17px;
	}
	.gc-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 30px 14px;
	}
	.gc-sechead h2 {
		font-size: 24px;
	}
}