/**
 * Home — 首页各模块视觉
 *
 * 视觉原则：专业 / 稳重 / 克制。
 * 禁止：大面积亮蓝渐变、霓虹效果、玻璃拟态堆砌、大量阴影、自动轮播。
 */

/* ---- Hero -------------------------------------------------------------- */

/* W2.5：沉浸式首屏。移动 600-680px，桌面 620-720px，最低不低于 560px。 */
.tc-hero {
	position: relative;
	display: grid;
	align-items: center;
	min-height: clamp(37.5rem, 92vh, 42.5rem);
	overflow: hidden;
	background: var(--tc-navy-900);
	isolation: isolate;
}

@media (min-width: 1024px) {
	.tc-hero {
		min-height: clamp(38.75rem, 80vh, 45rem);
	}
}

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

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

/* <picture> 是行内元素，需撑满 figure 才能让 img 的 100% 生效 */
.tc-hero__media picture {
	display: block;
	width: 100%;
	height: 100%;
}

/*
 * W2.5 蒙层：由「整图同等压暗」改为「左侧局部深色覆盖」。
 * 左侧文字区保持 AA 对比度，右侧让红色车头、车队规模与停车场环境清晰可见，
 * 避免车辆变成一片深黑。单一方向线性渐变，不做复杂多层渐变。
 */
.tc-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		90deg,
		rgba(12, 44, 74, 0.86) 0%,
		rgba(12, 44, 74, 0.66) 42%,
		rgba(12, 44, 74, 0.28) 70%,
		rgba(12, 44, 74, 0.08) 100%
	);
}

.tc-hero__inner {
	padding-block: var(--tc-space-8);
}

/* W2.5：文案区最大宽 600-680px，避免整行铺满导致阅读吃力 */
.tc-hero__content {
	max-width: 42.5rem;
	color: var(--tc-text-inverse);
}

/* Eyebrow：公司品牌名（中文名 + 拉丁字标），小体量金色引导 */
.tc-hero__kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--tc-space-2) var(--tc-space-3);
	margin: 0 0 var(--tc-space-4);
}

.tc-hero__kicker-name {
	font-size: var(--tc-fs-base);
	font-weight: 700;
	letter-spacing: 0.2em;
	color: var(--tc-gold-300);
}

.tc-hero__kicker-latin {
	font-size: var(--tc-fs-xs);
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--tc-text-inverse-soft);
}

/* H1：核心定位（「危险品港口运输源头车队」）——第一眼识别的核心信息 */
.tc-hero__title {
	margin: 0 0 var(--tc-space-4);
	font-size: var(--tc-fs-hero);
	letter-spacing: 0.01em;
	color: var(--tc-white);
	text-wrap: balance;   /* 中文长标题两行均衡断行，避免单字落行 */
}

/* 主品牌语：难办的事，交给我。 */
.tc-hero__tagline {
	margin: 0 0 var(--tc-space-3);
	font-size: var(--tc-fs-xl);
	font-weight: 700;
	line-height: var(--tc-lh-snug);
	color: var(--tc-gold-300);
}

/* 品牌辅助表达 */
.tc-hero__desc {
	margin: 0 0 var(--tc-space-6);
	max-width: 34rem;
	font-size: var(--tc-fs-md);
	line-height: var(--tc-lh-snug);
	color: var(--tc-text-inverse-soft);
}

.tc-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tc-space-4);   /* CTA 间距 16px */
}

/* ---- Section 节奏（W2.5） ----------------------------------------------
 * Hero 深 → Stats 深延续 → About 白 → Services 浅灰 → Why 白 → Safety 深
 * → Qualifications 白 → Digital 浅灰 → Fleet 白 → Process 浅灰 → News 白
 * → CTA 深蓝。避免整页全白或全卡片化。
 * ------------------------------------------------------------------------ */

.tc-services,
.tc-process,
.tc-digital {
	background: var(--tc-gray-050);
}

.tc-safety {
	background: var(--tc-navy-900);
	color: var(--tc-text-inverse);
}

/* 深色区块内的文字反白适配 */
.tc-safety .tc-section__title {
	color: var(--tc-white);
}

.tc-safety .tc-section__desc {
	color: var(--tc-text-inverse-soft);
}

/*
 * 眉标同样要反白 —— 深蓝底上若沿用浅底用的次级色（#3d5a73）会几乎看不见
 * （浏览器实测对比度 1.97）。改用金色，与 pages.css 的 .tc-eyebrow--inverse 一致
 * （gold-300 在 navy-900 上 8.3:1）。2026-10-09 全站可见性扫描发现并修复。
 */
.tc-safety .tc-eyebrow {
	color: var(--tc-gold-300);
}

/* ---- About ------------------------------------------------------------- */

.tc-about__text p {
	color: var(--tc-text-secondary);
}

.tc-about__more {
	margin-top: var(--tc-space-5);
}

/* ---- Safety（首页模块，深色底） ------------------------------------------ */

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

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

.tc-safety__img {
	width: 100%;
	height: auto;
	border-radius: var(--tc-radius);
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.tc-safety__list {
	display: grid;
	gap: var(--tc-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * 注意：下面三条是「首页深色安全保障区」专用（反白配色），
 * 必须带 `.tc-safety` 父级限定。
 *
 * 早先它们是裸类名，于是任何**白底**页面只要复用同名类，文字就会被染成
 * rgba(255,255,255,.78) 画在白底上 —— 浏览器实测对比度 = 1.0，完全看不见。
 * 2026-10-09「服务详情页安全保障内容不显示」就是这样来的。
 * 服务详情页的浅底版本见 pages.css。
 */
.tc-safety .tc-safety__item {
	padding: var(--tc-space-4) var(--tc-space-5);
	background: rgba(255, 255, 255, 0.06);
	border-left: 3px solid var(--tc-gold-500);
	border-radius: 0 var(--tc-radius) var(--tc-radius) 0;
}

.tc-safety .tc-safety__item-title {
	margin: 0 0 2px;
	font-size: var(--tc-fs-base);
	color: var(--tc-white);
}

.tc-safety .tc-safety__item-text {
	margin: 0;
	font-size: var(--tc-fs-sm);
	color: var(--tc-text-inverse-soft);
}

/* ---- Qualifications ---------------------------------------------------- */

.tc-quals__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tc-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tc-quals__item {
	position: relative;
}

.tc-quals__link {
	display: inline-block;
	padding: var(--tc-space-3) var(--tc-space-5);
	background: var(--tc-white);
	border: 1px solid var(--tc-gray-200);
	border-radius: var(--tc-radius);
	font-size: var(--tc-fs-sm);
	font-weight: 600;
	color: var(--tc-text-primary);
	text-decoration: none;
	transition: border-color var(--tc-dur) var(--tc-ease);
}

.tc-quals__item:hover .tc-quals__link {
	border-color: var(--tc-gold-500);
}

.tc-quals__item .tc-badge--test {
	position: absolute;
	top: -0.6rem;
	right: 0.4rem;
}

/* 资质图片墙（首页·资质与认证）。最多 8 张，点击查看高清原图。 */

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

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

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

.tc-quals__cell {
	margin: 0;
}

.tc-quals__thumb {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--tc-white);
	border: 1px solid var(--tc-gray-200);
	border-radius: var(--tc-radius);
	text-decoration: none;
	transition:
		border-color var(--tc-dur) var(--tc-ease),
		box-shadow var(--tc-dur) var(--tc-ease);
}

/* 用内边距撑出 4:3 比例，图片未加载完也不会出现高度跳动。 */
.tc-quals__thumb::before {
	content: "";
	display: block;
	padding-top: 75%;
}

.tc-quals__img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain; /* 证照 / 证书不裁切，编号与公章完整可见 */
}

.tc-quals__thumb:hover,
.tc-quals__thumb:focus-visible {
	border-color: var(--tc-gold-500);
	box-shadow: var(--tc-shadow-1);
}

.tc-quals__zoom {
	position: absolute;
	right: var(--tc-space-2);
	bottom: var(--tc-space-2);
	padding: 4px 10px;
	background: rgba(15, 32, 56, 0.82);
	border-radius: 999px;
	font-size: var(--tc-fs-xs);
	color: var(--tc-white);
	opacity: 0;
	transform: translateY(4px);
	pointer-events: none;
	transition:
		opacity var(--tc-dur) var(--tc-ease),
		transform var(--tc-dur) var(--tc-ease);
}

.tc-quals__thumb:hover .tc-quals__zoom,
.tc-quals__thumb:focus-visible .tc-quals__zoom {
	opacity: 1;
	transform: translateY(0);
}

/* 触摸设备没有 hover：角标常显，否则用户不知道图片可以点开。 */
@media (hover: none) {
	.tc-quals__zoom {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ---- Digital Operation ------------------------------------------------- */

/*
 * 🔴 这套 `.tc-digital__grid` / `.tc-digital__item` 是**共用**的：
 * 首页「数智化管理」模块（template-parts/home/digital_operation.php）与
 * 数智化管理页（page-digital-operation.php）都输出同样的类名。
 *
 * 所以这里的规则服务**首页模块**（≥1080px 一行四列）；
 * 数智化管理页的「两行两列 + 金色细杆」在文件下方另有一组
 * **限定在 `.tc-page__content` 内**的覆盖规则 —— 动一边不会连带改另一边。
 */
.tc-digital__grid {
	display: grid;
	gap: var(--tc-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: 1fr;
}

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

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

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

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

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

/* ---- Fleet & Network 示意图 -------------------------------------------- */

.tc-network__grid {
	display: grid;
	gap: var(--tc-space-5);
	grid-template-columns: 1fr;
	align-items: end;
}

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

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

.tc-network__map svg {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
}

.tc-net-land {
	fill: #eef2f5;
	stroke: var(--tc-gray-200);
	stroke-width: 0.4;
}

.tc-net-sea {
	fill: #e3edf5;
}

.tc-net-node {
	fill: var(--tc-navy-800);
	stroke: var(--tc-white);
	stroke-width: 0.6;
}

.tc-net-node--port {
	fill: var(--tc-red-600);
}

.tc-net-node--hq {
	fill: var(--tc-gold-500);
}

.tc-net-label {
	font-size: 2.6px;
	font-weight: 600;
	fill: var(--tc-text-secondary);
}

.tc-net-label--port {
	fill: var(--tc-navy-900);
	font-weight: 700;
}

.tc-network__legend {
	display: flex;
	flex-direction: column;
	gap: var(--tc-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--tc-fs-sm);
	color: var(--tc-text-secondary);
}

.tc-legend-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: var(--tc-space-2);
	border-radius: 50%;
}

.tc-legend-dot--port { background: var(--tc-red-600); }
.tc-legend-dot--hq { background: var(--tc-gold-500); }
.tc-legend-dot--office { background: var(--tc-navy-800); }

/* ---- News -------------------------------------------------------------- */

.tc-posts {
	display: grid;
	gap: var(--tc-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: 1fr;
}

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

.tc-post {
	border-top: 2px solid var(--tc-gray-200);
	padding-top: var(--tc-space-4);
}

.tc-post__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.tc-post__date {
	display: flex;
	align-items: center;
	gap: var(--tc-space-2);
	margin: 0 0 var(--tc-space-2);
	font-size: var(--tc-fs-xs);
	color: var(--tc-text-secondary);
}

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

.tc-post__link:hover .tc-post__title {
	text-decoration: underline;
	text-decoration-color: var(--tc-gold-500);
}

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

/* ---- Final CTA --------------------------------------------------------- */

.tc-cta {
	background: var(--tc-navy-800);
	color: var(--tc-text-inverse);
}

.tc-cta__inner {
	display: grid;
	gap: var(--tc-space-6);
	align-items: center;
	grid-template-columns: 1fr;
}

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

.tc-cta__title {
	margin: 0 0 var(--tc-space-3);
	color: var(--tc-white);
}

.tc-cta__desc {
	margin: 0;
	color: var(--tc-text-inverse-soft);
}

.tc-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tc-space-4);
	justify-content: flex-start;
}

@media (min-width: 860px) {
	.tc-cta__actions {
		justify-content: flex-end;
	}
}

/* ---- 深色区次级按钮（必须带父级限定） ---------------------------------- */
/*
 * components.css 里的 `.tc-btn--outline` 是「白底深字」按钮（深蓝字 + 深蓝描边）。
 * 它直接落在 `.tc-cta`（navy-800 #102f50）上时，文字与底色的对比度只有约
 * 1.05:1 —— 等于肉眼看不见（与首页深色区「白字画白底」属同一类问题）。
 * 因此按「深色底专用配色一律带父级限定」的规则，在这里做深色区专用覆盖；
 * 白底页面上的 `.tc-btn--outline` 不受影响。
 */
.tc-cta .tc-btn--outline {
	background: transparent;
	color: var(--tc-white);
	border-color: rgba(255, 255, 255, 0.55);
}

.tc-cta .tc-btn--outline:hover,
.tc-cta .tc-btn--outline:focus-visible {
	background: var(--tc-white);
	color: var(--tc-navy-900);
	border-color: var(--tc-white);
}

/* ---- 询盘转化区（服务详情页底部，中/英各 11 页统一） ------------------- */

/* 布局：按钮成行，小字单独占一行放在按钮下方。 */
.tc-cta--inquiry .tc-cta__actions {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--tc-space-3);
}

.tc-cta--inquiry .tc-cta__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tc-space-4);
}

/* 消顾虑小字：深色区专用配色，父级限定（不留裸类名）。 */
.tc-cta .tc-cta__note {
	margin: 0;
	max-width: 42ch;
	font-size: var(--tc-fs-xs);
	line-height: 1.7;
	color: var(--tc-text-inverse-soft);
}

@media (min-width: 860px) {
	.tc-cta--inquiry .tc-cta__actions {
		align-items: flex-end;
	}

	.tc-cta--inquiry .tc-cta__note {
		text-align: right;
	}
}

/*
 * 中文站：≥860px 时描述句与「消顾虑小字」**各占一行、不折行**。
 *
 * 改法的依据（1440/1280/1024/860 实测）：描述句单行需 665px、小字需 351px。
 * 原来文字区只占左列（`minmax(0,1.4fr)`，1440px 下仅 639px）⇒ 必然折成 2 行；
 * 小字另被 `max-width: 42ch`（=320px）卡死。
 * 把文字区改为占满整行后，860px 视口的可用文字宽 722px ⇒ 两条都放得下（余量 57px）。
 * 🔴 顺序不能反：**先让文字区跨整行，再开 `nowrap`** —— 反了就是溢出。
 *
 * 🔴 只在 `:lang(zh)` 下生效。英文同一句约 2 倍宽（28 字符 vs 45 汉字），
 *    本轮「英文版留到统一处理」，不能让英文页跟着开 nowrap 而撑破版式。
 * 🔴 860px 以下不开 nowrap：390px 视口文字宽仅 358px，硬单行需把字号压到
 *    ≈9px（不可读）或产生横向滚动条，属物理限制而非取舍。
 */
@media (min-width: 860px) {
	:lang(zh) .tc-cta--inquiry .tc-cta__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	:lang(zh) .tc-cta--inquiry .tc-cta__actions {
		align-items: flex-start;
	}

	:lang(zh) .tc-cta--inquiry .tc-cta__desc,
	:lang(zh) .tc-cta--inquiry .tc-cta__note {
		max-width: none;
		white-space: nowrap;
	}

	:lang(zh) .tc-cta--inquiry .tc-cta__note {
		text-align: left;
	}
}

/* =========================================================================
 * MEDIA-CMS-01 — 首页槽位图片
 * ====================================================================== */

/* ---- CTA 背景图（§6） -------------------------------------------------- */

/*
 * 首页专用：底部询盘区与内页「内嵌」观感一致（内页的 section 天然在
 * .tc-container 里，首页没有父容器）。
 *
 * 🔴 用 CSS 而不是「外面套一个 .tc-container」：套 div 会让这个 section
 *    不再是 .tc-main 的直接子元素 ⇒ inc/blocks.php 的插入位置清单里
 *    `before:tc-cta` 消失（该清单只取最外层 section）。详见 cta-inquiry.php。
 *
 * 几何：可用宽 = min(视口 - 两侧留白, 容器最大宽 - 两侧留白)
 *   ⇒ 1440px：1320 - 2×48 = 1224（与内页一致，x = 108）
 *   ⇒ 1024px：1024 - 2×41 = 942（与内页一致，x = 41）
 *   ⇒ 390px ：390 - 2×16 = 358（与内页一致，x = 16）
 */
.tc-cta--inset {
	width: calc(100% - 2 * var(--tc-container-pad));
	max-width: calc(var(--tc-container-max) - 2 * var(--tc-container-pad));
	margin-inline: auto;
}

.tc-cta--has-bg {
	position: relative;
	isolation: isolate;
	background-image:
		linear-gradient(rgba(12, 44, 74, 0.72), rgba(12, 44, 74, 0.84)),
		var(--tc-bg-image);
	background-size: cover, cover;
	background-position: center, var(--tc-bg-pos, center);
	background-repeat: no-repeat;
}

.tc-cta--has-bg .tc-cta__inner {
	position: relative;
	z-index: 1;
}

.tc-cta__scrim {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: rgba(12, 44, 74, 0.16);
	pointer-events: none;
}

/* ---- 数智化管理配图（可选） -------------------------------------------- */

.tc-digital__media {
	margin: 0 0 clamp(var(--tc-space-5), 4vw, var(--tc-space-7));
	border-radius: var(--tc-radius);
	overflow: hidden;
}

.tc-digital__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 21 / 9;
	object-fit: cover;
}

/* ---- 运力与网络配图（替换示意图） -------------------------------------- */

.tc-network__map--photo {
	padding: 0;
	overflow: hidden;
}

.tc-network__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* ---- 数智化管理页（page-digital-operation.php）------------------------- */

/*
 * 下面这组规则**只作用于「数智化管理」页**（选择器一律带 `.tc-page__content` 前缀）。
 *
 * 为什么必须限定：`.tc-digital__grid` / `.tc-digital__item` 是首页「数智化管理」
 * 模块（template-parts/home/digital_operation.php）与这一页**共用**的类名 ——
 * 两边输出的标签完全一样。直接改 `.tc-digital__grid` 会把首页那一段从「一行四列」
 * 一起改成两列，而这次要改的只是这一页的版式。
 * 带前缀后权重升到 (0,2,0)，也稳定压过 responsive.css 里的同名基础规则；
 * 那里 <480px 的 `!important` 单列仍然生效（手机上本来就该单列）。
 *
 * 断点取 768：480–767 用两列时每张卡只有约 230px，装不下 18px 标题 + 说明；
 * 宁可纵向排四张，也不要挤成小字。
 */

/* 四个核心能力：**两行两列**（原为 ≥1080px 一行四列）。
 * 一行四列时每张卡只有约 270px 宽，标题下的说明被挤成两三行小字，整块看上去
 * 像「分散的项目符号列表」；两列后每张约 580px，标题与说明都能成句读完。 */
.tc-page__content .tc-digital__grid {
	grid-template-columns: 1fr;
}

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

.tc-page__content .tc-digital__item {
	position: relative;
	padding: var(--tc-space-6) var(--tc-space-6) var(--tc-space-6) calc(var(--tc-space-6) + var(--tc-space-3));
}

/*
 * 左侧一道金色细杆：与企业色同一套（navy + gold）。
 * 用伪元素而不是加图标 / 序号：既保持「简洁卡片」，也不新增文字节点。
 */
.tc-page__content .tc-digital__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: var(--tc-space-6);
	bottom: var(--tc-space-6);
	width: 2px;
	background: var(--tc-gold-500);
}

.tc-page__content .tc-digital__item-title {
	font-size: var(--tc-fs-md);
}

/* ---- 数智化管理页「数字化能力」配图（槽位驱动） ------------------------ */

/*
 * 数智化管理页「数字化能力」配图（槽位驱动）。
 *
 * 这块原本是「内容模块（图片控件）」渲染出的一个 `.tc-section`，
 * 10-12 改为图片槽位驱动（见 page-digital-operation.php）。
 *
 * 同日版式改版：① 从能力卡片**上方**移到**下方**，作为整页的视觉收束；
 * ② 上下留白从 clamp(48px, 8vw, 96px) 收到 clamp(24px, 4vw, 48px)
 *    —— 卡片区自带 96px 下内边距，配图再压 96px 就成了两段空白。
 *
 * 宽幅：图片固定 16/9 展示（`object-fit: cover` 由槽位的内联样式给出，
 * 服从后台设的焦点）。这样**换任何比例的原图，版面高度都不变**；
 * 配图槽位用的 `tuchang-wide` 规格本身也是横版硬裁，两者方向一致。
 */
.tc-digital__visual {
	margin: 0;
	padding-block: clamp(var(--tc-space-5), 4vw, var(--tc-space-7));
}

.tc-digital__visual img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--tc-radius);
}

/*
 * 「显示大小」百分比缩放：与运力页配图、首页数智化配图同一套变量
 * （--tc-img-scale 桌面 / --tc-img-scale-mobile 手机），由 PHP 写在容器
 * 的 style 上；未调过的槽位不输出 `.tc-scale`，所以下面几条对现状零影响。
 *
 * 同上一节：这里必须用 width 而不是 max-width —— 百分比 max-width 在
 * 定宽 / 网格容器里的基准不可靠（实测踩过，见上方注释）。
 */
.tc-digital__visual.tc-scale {
	width: var(--tc-img-scale, 100%);
	margin-inline: auto;
}

@media (max-width: 767px) {
	.tc-digital__visual.tc-scale {
		width: var(--tc-img-scale-mobile, var(--tc-img-scale, 100%));
	}
}

/* ---- 首页「服务客户」入口（§6/§27） ------------------------------------ */

.tc-clients {
	background: var(--tc-white);
}

.tc-clients__more {
	margin-top: var(--tc-space-5);
}

.tc-clients__img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: var(--tc-radius);
}

.tc-clients .tc-split__media {
	border-radius: var(--tc-radius);
	overflow: hidden;
}

/* ---- 分栏配图的「显示大小」（后台可调百分比缩放） ---------------------- */

/*
 * 后台「媒体管理 → 页面图片」里，关于途畅 / 安全与合规 / 服务客户 三处配图
 * 可以调显示大小（桌面与手机分别设）。这里把百分比落成宽度：
 *   --tc-img-scale         桌面
 *   --tc-img-scale-mobile  手机（未设时回落到桌面值，再回落到 100%）
 * 两个变量都由 PHP 写在图片容器的 style 上，未调过的槽位不输出。
 *
 * 用「父容器 + .tc-scale」两层选择器（权重 0,2,1）而不是单类：
 * 单类修饰类会被同权重、后加载的基类简写（`.tc-split__media img{width:100%}`）
 * 静默压死 —— 这类"改了 CSS 却不生效"的坑在本项目出现过，必须免疫加载顺序。
 */
.tc-split > .tc-scale img,
.tc-safety__grid > .tc-scale img {
	display: block;
	width: var(--tc-img-scale, 100%);
	height: auto;
	margin-inline: auto;
}

/*
 * 视频槽位共用同一套百分比，但**缩放加在承载灯箱的那个 <a> 上**，不是 <video>：
 * <video> 缩了、<a> 仍满栏宽的话，「点我看原尺寸」角标会飘到画面外面的空白处。
 * 未调过大小的槽位这两个变量都不生效（.tc-scale 只在真的调过时才输出）。
 */
.tc-split > .tc-scale .tc-slot-video {
	width: var(--tc-img-scale, 100%);
	margin-inline: auto;
}

/*
 * 手机断点用 767px，与「移动端专用图」的切换点一致（同一处配置两种含义分家会很费解）。
 */
@media (max-width: 767px) {
	.tc-split > .tc-scale img,
	.tc-safety__grid > .tc-scale img {
		width: var(--tc-img-scale-mobile, var(--tc-img-scale, 100%));
	}

	.tc-split > .tc-scale .tc-slot-video {
		width: var(--tc-img-scale-mobile, var(--tc-img-scale, 100%));
	}
}

/*
 * 运力与网络配图 / 数智化管理配图 —— 同一套百分比，改的是外层容器。
 *
 * 🔴 这里必须用 width，**不能用 max-width**（实测踩过）：
 *   在**网格子项**上，百分比的 max-width 并不按网格区域（1126px）折算 ——
 *   实测 70% 只得到 350px（而不是 788px），且 auto 边距不生效、图贴在左边。
 *   max-width 只影响元素自身的收缩、不参与轨道定尺这一点是对的（实测轨道恒为
 *   `1126px 74px` 未变），但它的百分比基准在网格里不可靠，所以改用 width。
 *   用 width 是安全的：运力那处落在 `minmax(0, 1fr)` 轨道上（宽度已定），
 *   窄屏与数智化那处同样是有确定宽度的容器。
 *
 * 配 `margin-inline: auto` 让缩小的图居中而不是靠左。
 * 未调过的槽位不输出 .tc-scale，所以这两条规则对现状零影响。
 */
.tc-network__grid > .tc-scale,
.tc-digital__media.tc-scale {
	width: var(--tc-img-scale, 100%);
	margin-inline: auto;
}

@media (max-width: 767px) {
	.tc-network__grid > .tc-scale,
	.tc-digital__media.tc-scale {
		width: var(--tc-img-scale-mobile, var(--tc-img-scale, 100%));
	}
}