/**
 * Layout — 容器、分栏、区块间距
 */

.tc-container {
	width: 100%;
	max-width: var(--tc-container-max);
	margin-inline: auto;
	padding-inline: var(--tc-container-pad);
}

/* 宽屏容器（Hero 媒体、地图等需要更宽的场景） */
.tc-container--wide {
	max-width: 1520px;
}

.tc-main {
	display: block;
}

/* 区块统一垂直节奏 */
.tc-section {
	padding-block: clamp(var(--tc-space-7), 8vw, var(--tc-space-9));
}

.tc-section__head {
	max-width: 46rem;
	margin-bottom: var(--tc-space-7);
}

.tc-section__title {
	margin-bottom: var(--tc-space-3);
}

.tc-section__desc {
	margin: 0;
	max-width: 44rem;
	color: var(--tc-text-secondary);
	font-size: var(--tc-fs-md);
}

.tc-section__more {
	display: inline-block;
	margin-top: var(--tc-space-2);
}

/* 两栏（正文 + 媒体） */
.tc-split {
	display: grid;
	gap: clamp(var(--tc-space-6), 5vw, var(--tc-space-9));
	align-items: center;
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.tc-split {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	}

	.tc-split--reverse .tc-split__body {
		order: 2;
	}
}

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

/* ---------------------------------------------------------------------------
 * 图片槽位放「视频」时（目前仅首页·关于途畅配图）
 *
 * 由 tuchang-core 的 tc_core_slot_video_html() 输出：
 *   <a class="tc-slot-video" href="原文件" data-tc-lightbox data-tc-lb-kind="video">
 *     <video class="tc-slot-video__el" autoplay muted loop playsinline …></video>
 *     <span class="tc-slot-video__hint">点我看原尺寸</span>
 *   </a>
 *
 * 尺寸与图片**完全一致**（width:100% / height:auto，按原始比例，不裁切）：
 * 同一个位置从图换成视频时版面不能跳，否则用户会以为布局坏了。
 * 圆角 / 阴影放在 <video> 而不是外层 <a> 上 —— 外层是满栏宽的块，
 * 把装饰画在它身上，一旦调小显示大小就会出现一整条深色底。
 * ------------------------------------------------------------------------- */
.tc-slot-video {
	display: block;
	position: relative;
	max-width: 100%;
	color: inherit;
	text-decoration: none;
	border-radius: var(--tc-radius);
}

.tc-slot-video:focus-visible {
	outline: 3px solid var(--tc-gold-500);
	outline-offset: 3px;
}

.tc-slot-video__el {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--tc-radius);
	box-shadow: var(--tc-shadow-1);
	/* 起播前的底色：默认透明会在浅色页面上闪一下白框。 */
	background: #0b1728;
}

/*
 * 「点我看原尺寸」提示。
 *
 * 与内容模块的视频角标（.tc-block__zoom-hint）同一个视觉语言，但**常显**：
 * 那处是「点开才播」，用户早晚会去点；这里是「已经在自动播放」，
 * 不提示的话没人会想到还能点开看原尺寸。
 * 半透明常显 + 悬停加强，既不遮挡画面也不至于看不见。
 */
.tc-slot-video__hint {
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 3px 10px;
	background: rgba(9, 20, 36, 0.72);
	border-radius: 999px;
	font-size: var(--tc-fs-xs);
	line-height: 1.7;
	color: #ffffff;
	opacity: 0.85;
	transition: opacity var(--tc-dur) var(--tc-ease), background var(--tc-dur) var(--tc-ease);
	pointer-events: none;
}

.tc-slot-video:hover .tc-slot-video__hint,
.tc-slot-video:focus-visible .tc-slot-video__hint {
	opacity: 1;
	background: rgba(9, 20, 36, 0.92);
}

/* 空状态提示 */
.tc-empty-note {
	padding: var(--tc-space-5) var(--tc-space-6);
	background: var(--tc-gray-050);
	border: 1px dashed var(--tc-gray-200);
	border-radius: var(--tc-radius);
	color: var(--tc-text-secondary);
	text-align: center;
}