/**
 * Base — 重置与基础元素样式
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* 页头 Sticky 后收缩，避免锚点被遮挡 */
	scroll-padding-top: calc(var(--tc-header-h) + var(--tc-space-4));
}

body {
	margin: 0;
	font-family: var(--tc-font-sans);
	font-size: var(--tc-fs-base);
	line-height: var(--tc-lh-body);
	color: var(--tc-text-primary);
	background-color: var(--tc-white);
	-webkit-font-smoothing: antialiased;
}

img,
picture,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

/* 统一可见焦点（可访问性要求） */
:focus-visible {
	outline: 3px solid var(--tc-gold-500);
	outline-offset: 2px;
	border-radius: var(--tc-radius-sm);
}

/* 屏幕阅读器专用 */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Skip to content */
.tc-skip-link {
	position: absolute;
	top: auto;
	left: var(--tc-space-4);
	transform: translateY(-200%);
	z-index: var(--tc-z-drawer);
	padding: var(--tc-space-3) var(--tc-space-5);
	background: var(--tc-navy-900);
	color: var(--tc-white);
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 var(--tc-radius) var(--tc-radius);
	transition: transform var(--tc-dur) var(--tc-ease);
}

.tc-skip-link:focus {
	transform: translateY(0);
}

/* 键盘用户跳过焦点 */
.tc-main:focus {
	outline: none;
}

/* 媒体占位（无图时的统一视觉） */
.tc-media-placeholder {
	display: grid;
	place-items: center;
	aspect-ratio: 3 / 2;
	background: repeating-linear-gradient(
		45deg,
		var(--tc-gray-050),
		var(--tc-gray-050) 10px,
		var(--tc-gray-100) 10px,
		var(--tc-gray-100) 20px
	);
	color: var(--tc-text-secondary);
	font-size: var(--tc-fs-sm);
	border: 1px solid var(--tc-gray-200);
	border-radius: var(--tc-radius);
}

.tc-media-placeholder > span {
	padding: var(--tc-space-4);
	text-align: center;
}

/* 用户偏好：减少动画 */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* =========================================================================
 * MEDIA-CMS-01 — 全站图片可视化管理
 *
 * 约定：
 *   - 后台未设置图片时，模板**不输出容器**；下面所有规则都不会凭空产生空白区块；
 *   - 图片一律 object-fit:contain / cover，禁止拉伸变形；
 *   - 尺寸由后台「显示尺寸」预设通过 CSS 变量下发，编辑人员不写 CSS。
 * ====================================================================== */

/* ---- 响应式图片包裹 ---------------------------------------------------- */

.tc-picture {
	display: block;
}

.tc-picture img {
	display: block;
}

/* ---- 品牌 Logo（后台图片版，§3/§4） ------------------------------------ */

.tc-logo--image {
	--tc-logo-h: 44px;
	--tc-logo-h-mobile: 34px;
	--tc-logo-max-w: 220px;
	align-items: center;
}

.tc-logo--image img {
	display: block;
	width: auto;
	height: var(--tc-logo-h);
	max-width: var(--tc-logo-max-w);
	object-fit: contain; /* 保持原始比例：不拉伸、不裁切、不改变宽高比 */
}

@media (max-width: 767px) {
	.tc-logo--image img {
		height: var(--tc-logo-h-mobile);
	}
}

/* ---- 编辑态「无图」提示（浏览态不会出现） ------------------------------ */

.tc-media-empty-slot {
	display: grid;
	place-items: center;
	min-height: 160px;
	padding: var(--tc-space-6);
	background: repeating-linear-gradient(
		45deg,
		var(--tc-gray-050),
		var(--tc-gray-050) 10px,
		var(--tc-gray-100) 10px,
		var(--tc-gray-100) 20px
	);
	border: 1px dashed var(--tc-gray-400);
	border-radius: var(--tc-radius);
	color: var(--tc-text-secondary);
}

.tc-media-empty-slot__hint {
	font-size: var(--tc-fs-sm);
	font-weight: 600;
}

/* ---- 客户 Logo 墙（§13/§27） ------------------------------------------- */

.tc-clients__wall {
	width: 100%;
}

.tc-logo-wall {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--tc-space-5) var(--tc-space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

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

@media (min-width: 1200px) {
	.tc-logo-wall {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

.tc-logo-wall__item {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 88px;
	padding: var(--tc-space-3);
	background: var(--tc-white);
	border: 1px solid var(--tc-gray-200);
	border-radius: var(--tc-radius);
}

.tc-logo-wall__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 56px;
	object-fit: contain; /* 客户 Logo 一律保持原比例，不改色、不裁切 */
}

.tc-logo-wall__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

/* ---- 资质证照（§11） --------------------------------------------------- */

.tc-certs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: clamp(var(--tc-space-4), 3vw, var(--tc-space-6));
	margin: 0;
	padding: 0;
	list-style: none;
}

.tc-cert {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--tc-white);
	border: 1px solid var(--tc-gray-200);
	border-radius: var(--tc-radius);
	box-shadow: var(--tc-shadow-1);
}

.tc-cert__media {
	margin: 0;
	padding: var(--tc-space-4);
	background: var(--tc-gray-050);
}

.tc-cert__img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain; /* 证照必须完整可读，不裁切 */
}

.tc-cert__body {
	padding: var(--tc-space-4);
}

.tc-cert__title {
	margin: 0;
	font-size: var(--tc-fs-md);
}

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

/* ---- 营业执照（§12，默认不公开） --------------------------------------- */

.tc-license {
	margin: 0;
	padding: var(--tc-space-5);
	background: var(--tc-white);
	border: 1px solid var(--tc-gray-200);
	border-radius: var(--tc-radius);
}

.tc-license__img {
	display: block;
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

.tc-license__caption {
	margin-top: var(--tc-space-3);
	font-size: var(--tc-fs-sm);
	color: var(--tc-text-secondary);
}

/* ---- 内页首图背景（§7） ------------------------------------------------ */

/*
 * 选择器写成「两个类」而不是单个修饰类：
 * pages.css 里的 `.tc-page__header { background: … }` / `.tc-page-hero { … }`
 * 与本文件权重相同、但加载在后，会把这里的 background-image 覆盖成 none
 * —— 结果是槽位里明明有图、页头却始终纯色。
 * 提高一级权重后，无论 CSS 加载顺序如何，有图时都能生效。
 */
.tc-page__header.tc-page__header--has-bg,
.tc-page-hero.tc-page-hero--has-bg {
	position: relative;
	background-image:
		linear-gradient(rgba(12, 44, 74, 0.78), rgba(12, 44, 74, 0.86)),
		var(--tc-bg-image);
	background-size: cover, cover;
	background-position: center, var(--tc-bg-pos, center);
	background-repeat: no-repeat;
}

@media (max-width: 767px) {
	.tc-page__header.tc-page__header--has-bg,
	.tc-page-hero.tc-page-hero--has-bg {
		background-image:
			linear-gradient(rgba(12, 44, 74, 0.78), rgba(12, 44, 74, 0.86)),
			var(--tc-bg-image-mobile, var(--tc-bg-image));
	}
}

.tc-page__header.tc-page__header--has-bg > *,
.tc-page-hero.tc-page-hero--has-bg > * {
	position: relative;
	z-index: 1;
}