/*
 * ServicePro 解決方案頁面：相容層
 * 載入順序：servicepro.css → 本檔 → solutions.css
 *
 * solutions.css 原本搭配首頁設計稿 styles.css 使用，會用到 --navy、--teal 等變數，
 * 以及 .container、.button、.button-orange、.button-line 等 class。
 * 本檔提供這些變數與 class（顏色與佈景主題相同），solutions.css 原檔不需修改。
 */
:root {
	--navy: #17365D;
	--teal: #059094;
	--orange: #F9451E;
	--text: #404040;
	--white: #FFFFFF;
	--surface: #F5F7FA;
	--border: #E2E8F0;
	--teal-dark: #006F73;
}

/* 頁面本身：全寬，不使用原主題的 .wrap 寬度與上方留白 */
.servicepro.sp-solutions .site-content {
	padding: 0;
}

.servicepro.sp-solutions .sp-breadcrumb {
	margin: 0;
}

.sp-solutions-content {
	width: 100%;
}

.solution-page {
	color: var(--text);
	line-height: 1.6;
}

.solution-page .container {
	width: calc(100% - 56px);
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
}

/* 按鈕（與首頁設計稿相同） */
.servicepro .solution-page .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 12px 23px;
	border-radius: 11px;
	border: 1.5px solid transparent;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.4;
	white-space: nowrap;
	text-decoration: none;
	box-shadow: none;
	transition: filter .2s, transform .2s;
}

.servicepro .solution-page .button:hover,
.servicepro .solution-page .button:focus {
	filter: brightness(.93);
	transform: translateY(-1px);
}

.servicepro .solution-page .button-orange,
.servicepro .solution-page .button-orange:hover,
.servicepro .solution-page .button-orange:focus {
	background: var(--orange);
	border-color: var(--orange);
	color: #fff;
}

.servicepro .solution-page .button-teal,
.servicepro .solution-page .button-teal:hover,
.servicepro .solution-page .button-teal:focus {
	background: var(--teal);
	border-color: var(--teal);
	color: #fff;
}

.servicepro .solution-page .button-line,
.servicepro .solution-page .button-line:hover,
.servicepro .solution-page .button-line:focus {
	border-color: var(--navy);
	color: var(--navy);
}

.servicepro .solution-page .button-outline,
.servicepro .solution-page .button-outline:hover,
.servicepro .solution-page .button-outline:focus {
	background: transparent;
	border-color: #fff;
	color: #fff;
}

/* 避免佈景主題的一般連結樣式（底線、青綠字色）影響解決方案頁的按鈕與卡片 */
.servicepro .solution-page a {
	box-shadow: none;
	text-decoration: none;
}

.servicepro .solution-page .detail-link,
.servicepro .solution-page .detail-link:hover,
.servicepro .solution-page .detail-link:focus {
	color: #fff;
}

/* 原主題的段落、清單預設間距 */
.solution-page ul,
.solution-page ol {
	margin-left: 0;
}

.solution-page figure {
	margin: 0;
}

/* 舊版設計稿的頁尾 CTA（若頁面內容自己放了 .solution-footer） */
.solution-page .footer-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
}

@media (max-width: 700px) {
	.solution-page .container {
		width: calc(100% - 32px);
	}

	.solution-page .footer-inner {
		flex-direction: column;
		align-items: flex-start;
	}
}