/* =========================================================
   優惠活動 — 桃紅漸層區塊（radius 20、粉色陰影）→ 白色面板：品牌分頁膠囊 → 21:9 大圖 + 說明 + 膠囊 + 期間 + CTA
   依賴：kd-pages.css
   ========================================================= */

.kd-pages-scope.kd-pages-scope.kd-pages-campaigns {
	display: flex;
	flex-direction: column;
	gap: 18px;
	background: var(--kd-grad-deep);
	border-radius: var(--kd-radius-block);
	padding: clamp(18px, 2.6vw, 30px);
	box-shadow: var(--kd-shadow-pink);
	width: 100%;
	min-width: 0;
}

/* 置中標題 */
.kd-pages-scope.kd-pages-scope .kd-pages-campaigns__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
}

.kd-pages-scope.kd-pages-scope .kd-pages-campaigns__eyebrow {
	padding: 5px 14px;
	border-radius: var(--kd-radius-pill);
	background: var(--kd-yellow);
	color: var(--kd-dark);
	font-size: 12.5px;
	font-weight: 900;
	letter-spacing: .16em;
}

.kd-pages-scope.kd-pages-scope .kd-pages-campaigns__title {
	display: inline-block;
	font-family: var(--kd-font-serif);
	font-weight: 600;
	font-size: clamp(28px, 3.4vw, 40px);
	line-height: 1.3;
	letter-spacing: .06em;
	color: var(--kd-white);
	padding-bottom: 12px;
	background: linear-gradient(var(--kd-yellow), var(--kd-yellow)) center bottom / 56px 2px no-repeat;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}

.kd-pages-scope.kd-pages-scope .kd-pages-campaigns__lead {
	max-width: 40em;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.8;
	color: var(--kd-white);
}

.kd-pages-scope.kd-pages-scope .kd-pages-campaigns__lead-accent {
	color: var(--kd-yellow);
}

/* 白色面板 */
.kd-pages-scope.kd-pages-scope .kd-pages-campaigns__panel {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-top: 6px;
	padding: clamp(18px, 2.5vw, 28px);
	background: var(--kd-white);
	border: 1px solid var(--kd-line);
	border-radius: var(--kd-radius-card);
	color: var(--kd-dark);
	min-width: 0;
}

.kd-pages-scope.kd-pages-scope .kd-pages-campaigns__panel-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.kd-pages-scope.kd-pages-scope .kd-pages-campaigns__panel-title {
	font-family: var(--kd-font-serif);
	font-weight: 500;
	font-size: 22px;
	line-height: 1.3;
}

.kd-pages-scope.kd-pages-scope .kd-pages-campaigns__hint {
	font-size: 13px;
	color: var(--kd-weak);
}

/* 品牌分頁膠囊 */
.kd-pages-scope.kd-pages-scope .kd-pages-campaigns__tabs {
	display: flex;
	gap: 8px;
	padding-bottom: 6px;
}

.kd-pages-scope.kd-pages-scope .kd-pages-campaigns__tab {
	flex: 0 0 auto;
	padding: 8px 16px;
	border: 1px solid #ECDFE5; /* 設計稿膠囊框色，無對應 token */
	border-radius: var(--kd-radius-pill);
	background: var(--kd-white);
	color: var(--kd-text-2);
	font-size: 13.5px;
	white-space: nowrap;
	transition: background-color .2s, color .2s, border-color .2s;
}

.kd-pages-scope.kd-pages-scope .kd-pages-campaigns__tab:hover {
	border-color: var(--kd-pink);
	color: var(--kd-pink);
}

.kd-pages-scope.kd-pages-scope .kd-pages-campaigns__tab.is-active,
.kd-pages-scope.kd-pages-scope .kd-pages-campaigns__tab[aria-selected="true"] {
	border-color: var(--kd-pink);
	background: var(--kd-pink);
	color: var(--kd-white);
	font-weight: 700;
}

/* 各品牌內容 */
.kd-pages-scope.kd-pages-scope .kd-pages-campaigns__panels {
	border-top: 1px solid var(--kd-line);
	padding-top: 20px;
}

.kd-pages-scope.kd-pages-scope .kd-pages-campaigns__tabpanel {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.kd-pages-scope.kd-pages-scope .kd-pages-campaigns__banner {
	position: relative;
	display: block;
	aspect-ratio: 21 / 9;
	border-radius: var(--kd-radius-card);
	overflow: hidden;
	background: var(--kd-bg-pink-2);
	box-shadow: var(--kd-shadow);
}

.kd-pages-scope.kd-pages-scope a.kd-pages-campaigns__banner:hover {
	filter: brightness(1.04);
}

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

.kd-pages-scope.kd-pages-scope .kd-pages-campaigns__banner--logo {
	background: var(--kd-grad-pale);
}

.kd-pages-scope.kd-pages-scope .kd-pages-campaigns__banner--logo .kd-pages-campaigns__img {
	object-fit: contain;
	padding: 6% 20%;
}

.kd-pages-scope.kd-pages-scope .kd-pages-campaigns__banner-cta {
	position: absolute;
	right: 14px;
	bottom: 14px;
	padding: 7px 14px;
	border-radius: var(--kd-radius-pill);
	background: var(--kd-yellow);
	color: var(--kd-dark);
	font-size: 13px;
	font-weight: 900;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}

.kd-pages-scope.kd-pages-scope .kd-pages-campaigns__brand-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.kd-pages-scope.kd-pages-scope .kd-pages-campaigns__badge {
	padding: 5px 12px;
	border-radius: var(--kd-radius-pill);
	background: var(--kd-pink);
	color: var(--kd-white);
	font-size: 12px;
	font-weight: 700;
}

.kd-pages-scope.kd-pages-scope .kd-pages-campaigns__brand {
	font-size: 20px;
	font-weight: 900;
	color: var(--kd-dark);
}

.kd-pages-scope.kd-pages-scope .kd-pages-campaigns__notes {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13.5px;
	line-height: 1.8;
	color: var(--kd-muted);
}

.kd-pages-scope.kd-pages-scope .kd-pages-campaigns__sec {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.kd-pages-scope.kd-pages-scope .kd-pages-campaigns__sec-h {
	font-size: 15px;
	font-weight: 900;
	color: var(--kd-pink);
}

.kd-pages-scope.kd-pages-scope .kd-pages-campaigns__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.kd-pages-scope.kd-pages-scope .kd-pages-campaigns__pill {
	padding: 6px 12px;
	border-radius: var(--kd-radius-pill);
	background: var(--kd-bg-pink);
	border: 1px solid rgba(229, 143, 166, .35); /* 設計稿膠囊框，比 --kd-line-pink 更淡 */
	color: var(--kd-text-2);
	font-size: 13px;
}

/* 底列：期間 + CTA */
.kd-pages-scope.kd-pages-scope .kd-pages-campaigns__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding: 14px 16px;
	background: var(--kd-bg);
	border-radius: var(--kd-radius-card);
}

.kd-pages-scope.kd-pages-scope .kd-pages-campaigns__period {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--kd-dark);
}

.kd-pages-scope.kd-pages-scope .kd-pages-campaigns__actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.kd-pages-scope.kd-pages-scope .kd-pages-campaigns__actions .kd-pages__btn {
	padding: 10px 22px;
	font-size: 14px;
	box-shadow: none;
}