/**
 * Pages — 通用页面与服务详情页样式
 */

/* ---- 页面头 ----------------------------------------------------------------- */

.tc-page__header {
	padding: clamp(var(--tc-space-7), 7vw, var(--tc-space-9)) 0 var(--tc-space-6);
	background: var(--tc-navy-900);
	color: var(--tc-text-inverse);
}

.tc-page__title {
	margin: 0;
	color: var(--tc-white);
	font-size: clamp(var(--tc-fs-2xl), 4vw, var(--tc-fs-3xl));
}

/*
 * 页头副标题（10-12 新增，数智化管理页「数字驱动运营 · 智能协同运输」）。
 *
 * 深蓝页头上，副标题用次级反白色（0.78 alpha 白）而不是金色：眉标已经是金色，
 * 再来一行金字会丢掉「标签 → 标题 → 副标题」的层次。
 */
.tc-page__subtitle {
	margin: var(--tc-space-4) 0 0;
	font-size: var(--tc-fs-lg);
	font-weight: 600;
	line-height: 1.5;
	color: var(--tc-text-inverse-soft);
}

.tc-page__header .tc-eyebrow {
	color: var(--tc-gold-300);
}

/* ---- 安全页 Hero（W2.5 重构） ------------------------------------------------ */

.tc-page-hero {
	padding: clamp(var(--tc-space-8), 9vw, var(--tc-space-9)) 0 clamp(var(--tc-space-7), 7vw, var(--tc-space-8));
	background: var(--tc-navy-900);
	color: var(--tc-text-inverse);
}

.tc-page-hero__title {
	margin: 0 0 var(--tc-space-4);
	color: var(--tc-white);
	font-size: clamp(var(--tc-fs-2xl), 4.4vw, var(--tc-fs-3xl));
}

.tc-page-hero__lede {
	margin: 0;
	font-size: var(--tc-fs-lg);
	font-weight: 600;
	color: var(--tc-gold-300);
}

.tc-eyebrow--inverse {
	color: var(--tc-gold-300);
}

/* ---- 安全页：三大核心管理体系（交错左右） ------------------------------------- */

.tc-sys__list {
	display: grid;
	gap: clamp(var(--tc-space-7), 6vw, var(--tc-space-8));
}

.tc-sys__item {
	display: grid;
	gap: clamp(var(--tc-space-5), 4vw, var(--tc-space-7));
	align-items: center;
	grid-template-columns: 1fr;
}

@media (min-width: 860px) {
	.tc-sys__item {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	}

	/* 交错左右：偶数项图右文左 */
	.tc-sys__item--reverse .tc-sys__media {
		order: 2;
	}
}

.tc-sys__media {
	margin: 0;
}

.tc-sys__media img {
	width: 100%;
	height: auto;
	border-radius: var(--tc-radius);
	box-shadow: var(--tc-shadow-2);
}

.tc-sys__body {
	position: relative;
	padding-top: var(--tc-space-4);
}

/* 大编号：视觉锚点，金色描边感 */
.tc-sys__num {
	display: block;
	margin-bottom: var(--tc-space-2);
	font-family: var(--tc-font-mono);
	font-size: clamp(var(--tc-fs-3xl), 4vw, 3.25rem);
	font-weight: 700;
	line-height: 1;
	color: var(--tc-gold-500);
}

.tc-sys__title {
	margin: 0 0 var(--tc-space-3);
	font-size: var(--tc-fs-xl);
}

.tc-sys__desc {
	margin: 0;
	max-width: 34rem;
	color: var(--tc-text-secondary);
}

/* ---- 安全页：六项安全体系网格（3×2 → 2×3 → 单列） ---------------------------- */

.tc-safety-grid6__grid {
	display: grid;
	gap: var(--tc-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: 1fr;
	counter-reset: tc-sg6;
}

@media (min-width: 640px) {
	.tc-safety-grid6__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.tc-safety-grid6__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.tc-safety-grid6__item {
	padding: var(--tc-space-5);
	background: var(--tc-white);
	border: 1px solid var(--tc-gray-200);
	border-top: 2px solid var(--tc-gold-500);
}

.tc-safety-grid6__num {
	display: block;
	margin-bottom: var(--tc-space-3);
	font-family: var(--tc-font-mono);
	font-size: var(--tc-fs-md);
	font-weight: 700;
	color: var(--tc-gold-500);
}

.tc-safety-grid6__title {
	margin: 0 0 var(--tc-space-2);
	font-size: var(--tc-fs-base);
}

.tc-safety-grid6__text {
	margin: 0;
	font-size: var(--tc-fs-sm);
	color: var(--tc-text-secondary);
}

/* ---- 安全页：信任段 ---------------------------------------------------------- */

.tc-trust {
	background: var(--tc-gray-050);
}

.tc-trust__grid {
	display: grid;
	gap: var(--tc-space-5);
	margin: 0;
	grid-template-columns: 1fr;
}

@media (min-width: 720px) {
	.tc-trust__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.tc-trust__item {
	display: flex;
	flex-direction: column-reverse;   /* 视觉：数值在上，说明贴近 */
	align-items: baseline;
	text-align: center;
	justify-content: center;
	padding: var(--tc-space-5);
	background: var(--tc-white);
	border: 1px solid var(--tc-gray-200);
	border-radius: var(--tc-radius);
}

.tc-trust__value {
	margin: 0;
	font-size: var(--tc-fs-2xl);
	font-weight: 700;
	color: var(--tc-navy-900);
}

.tc-trust__label {
	margin: var(--tc-space-1) 0 0;
	font-size: var(--tc-fs-sm);
	color: var(--tc-text-secondary);
}

.tc-page__content {
	padding-block: var(--tc-space-7);
}

/* ---- 服务详情 Hero ---------------------------------------------------------- */

.tc-service-hero {
	position: relative;
	display: grid;
	align-items: end;
	min-height: clamp(16rem, 40vh, 24rem);
	overflow: hidden;
	background: var(--tc-navy-900);
	isolation: isolate;
}

.tc-service-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	margin: 0;
}

.tc-service-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tc-service-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		180deg,
		rgba(12, 44, 74, 0.35) 0%,
		rgba(12, 44, 74, 0.85) 100%
	);
}

.tc-service-hero__inner {
	padding-block: var(--tc-space-7) var(--tc-space-6);
	color: var(--tc-text-inverse);
}

.tc-service-hero__inner .tc-eyebrow {
	color: var(--tc-gold-300);
}

.tc-service-hero__title {
	margin: 0 0 var(--tc-space-3);
	color: var(--tc-white);
	font-size: clamp(var(--tc-fs-2xl), 4vw, var(--tc-fs-3xl));
}

.tc-service-hero__summary {
	margin: 0;
	max-width: 40rem;
	font-size: var(--tc-fs-md);
	color: var(--tc-text-inverse-soft);
}

/* 无横幅时保留纯色头 */
.tc-service-hero:not(:has(.tc-service-hero__media)) {
	background: var(--tc-navy-800);
}

/* ---- 服务详情正文块 ---------------------------------------------------------- */

.tc-service__body {
	padding-top: var(--tc-space-7);
}

.tc-service__block {
	padding-block: var(--tc-space-7);
}

/*
 * 服务详情页的「安全保障」走浅底版本 —— 本页是白底，**不能**套用首页深色区的反白配色
 * （home.css 里 .tc-safety__item* 已收进 .tc-safety 作用域，此处是它在本页的对应样式）。
 * 沿用品牌的金色左边框，文字用正文色，白底上对比度 14.2:1。
 */
.tc-service__block .tc-safety__item {
	padding: var(--tc-space-4) var(--tc-space-5);
	background: var(--tc-gray-050);
	border-left: 3px solid var(--tc-gold-500);
	border-radius: 0 var(--tc-radius) var(--tc-radius) 0;
}

.tc-service__block .tc-safety__item-text {
	margin: 0;
	font-size: var(--tc-fs-sm);
	color: var(--tc-text-primary);
}

.tc-points--auto {
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

/* ---- FAQ（details/summary） ------------------------------------------------- */

.tc-faq {
	display: grid;
	gap: var(--tc-space-3);
}

.tc-faq__item {
	background: var(--tc-gray-050);
	border: 1px solid var(--tc-gray-200);
	border-radius: var(--tc-radius);
}

.tc-faq__q {
	padding: var(--tc-space-4) var(--tc-space-5);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.tc-faq__q::-webkit-details-marker {
	display: none;
}

.tc-faq__q::after {
	content: '+';
	float: right;
	font-weight: 700;
	color: var(--tc-gold-500);
}

.tc-faq__item[open] .tc-faq__q::after {
	content: '–';
}

.tc-faq__a {
	margin: 0;
	padding: 0 var(--tc-space-5) var(--tc-space-4);
	color: var(--tc-text-secondary);
}

/* ---- 资质与认证页（/qualifications/） ---------------------------------------
 * 图片墙直接复用首页 `.tc-quals__*` 的结构与观感（后台同一份数据源），
 * 这里只补「图片下方显示证书名称」一处，并加上 .tc-qual-page 父级限定 ——
 * 首页图片墙不带这个父级，因此本规则对首页零影响。
 */

.tc-qual-page .tc-qual-wall__name {
	margin: var(--tc-space-3) 0 0;
	font-size: var(--tc-fs-sm);
	font-weight: 600;
	line-height: 1.45;
	color: var(--tc-text-primary);
	text-align: center;
	overflow-wrap: anywhere;
}