/* =========================================================
   開箱頻道 — 淺灰底面板；每頻道一列影片卡（桌機 min(影片數,4) 欄、窄版 2 欄）
   依賴：kd-pages.css（__head、__btn--outline、__play--dark）
   ========================================================= */

.kd-pages-scope.kd-pages-scope.kd-pages-video-channels {
	padding: 0 0 48px;
}

.kd-pages-scope.kd-pages-scope .kd-pages-video-channels__panel {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: clamp(18px, 2.6vw, 30px);
	border-radius: var(--kd-radius-block);
	background: var(--kd-bg-grey);
}

.kd-pages-scope.kd-pages-scope .kd-pages-video-channels__panel .kd-pages__head {
	align-items: flex-start;
}

.kd-pages-scope.kd-pages-scope .kd-pages-video-channels__group {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.kd-pages-scope.kd-pages-scope .kd-pages-video-channels__group-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding-top: 16px;
	border-top: 1px solid var(--kd-line-strong);
}

/* 群組標題：17/900 + 左側 6×18 粉條 */
.kd-pages-scope.kd-pages-scope .kd-pages-video-channels__group-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 17px;
	font-weight: 900;
	line-height: 1.4;
	color: var(--kd-dark);
}

.kd-pages-scope.kd-pages-scope .kd-pages-video-channels__group-title::before {
	content: "";
	display: block;
	width: 6px;
	height: 18px;
	border-radius: 3px;
	background: var(--kd-pink);
}

.kd-pages-scope.kd-pages-scope .kd-pages-video-channels__channel {
	font-size: 14px;
	font-weight: 700;
	color: var(--kd-dark);
}

.kd-pages-scope.kd-pages-scope .kd-pages-video-channels__channel:hover {
	color: var(--kd-pink);
}

.kd-pages-scope.kd-pages-scope .kd-pages-video-channels__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.kd-pages-scope.kd-pages-scope .kd-pages-video-channels__card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	border-radius: var(--kd-radius-card);
	overflow: hidden;
	background: var(--kd-white);
	color: var(--kd-dark);
	box-shadow: var(--kd-shadow);
}

.kd-pages-scope.kd-pages-scope .kd-pages-video-channels__card:hover {
	color: var(--kd-dark);
	box-shadow: 0 0 0 2px var(--kd-pink);
}

.kd-pages-scope.kd-pages-scope .kd-pages-video-channels__thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--kd-dark);
}

.kd-pages-scope.kd-pages-scope .kd-pages-video-channels__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kd-pages-scope.kd-pages-scope .kd-pages-video-channels__play {
	width: 56px;
	height: 56px;
}

.kd-pages-scope.kd-pages-scope .kd-pages-video-channels__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 16px 16px;
}

.kd-pages-scope.kd-pages-scope .kd-pages-video-channels__title {
	font-size: 15.5px;
	font-weight: 900;
	line-height: 1.5;
}

.kd-pages-scope.kd-pages-scope .kd-pages-video-channels__ch {
	font-size: 12.5px;
	color: var(--kd-weak);
}

@media (min-width: 960px) {
	.kd-pages-scope.kd-pages-scope .kd-pages-video-channels__grid {
		grid-template-columns: repeat(var(--kd-vc-cols, 4), minmax(0, 1fr));
	}
}