/**
 * Content Blocks —— 可在页面任意位置自由增删的文本 / 图片 / 图文 / 按钮模块。
 *
 * 前台排版样式。编辑态样式在 visual-edit.css。
 */

/* ---- 宽度档位 ---------------------------------------------------------- */

.tc-block--width-narrow > .tc-container {
	max-width: 760px;
}

.tc-block--width-wide > .tc-container {
	max-width: 1520px;
}

.tc-block--width-full > .tc-container {
	max-width: none;
	padding-inline: 0;
}

/* ---- 富文本正文 -------------------------------------------------------- */

.tc-prose {
	color: var(--tc-text-primary);
	font-size: var(--tc-fs-md);
	line-height: 1.8;
}

.tc-prose > * + * {
	margin-top: var(--tc-space-4);
}

.tc-prose > :first-child {
	margin-top: 0;
}

.tc-prose h2 {
	margin-top: var(--tc-space-7);
	margin-bottom: 0;
	font-size: var(--tc-fs-2xl);
	line-height: 1.3;
	color: var(--tc-navy-900);
}

.tc-prose h3 {
	margin-top: var(--tc-space-6);
	margin-bottom: 0;
	font-size: var(--tc-fs-xl);
	line-height: 1.35;
	color: var(--tc-navy-900);
}

.tc-prose h4 {
	margin-top: var(--tc-space-5);
	margin-bottom: 0;
	font-size: var(--tc-fs-lg);
}

.tc-prose ul,
.tc-prose ol {
	padding-left: 1.4em;
}

.tc-prose ul {
	list-style: disc;
}

.tc-prose ol {
	list-style: decimal;
}

.tc-prose li + li {
	margin-top: var(--tc-space-2);
}

.tc-prose a {
	color: var(--tc-navy-700);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tc-prose a:hover {
	color: var(--tc-navy-900);
}

.tc-prose strong,
.tc-prose b {
	font-weight: 700;
}

.tc-prose blockquote {
	margin: var(--tc-space-5) 0;
	padding: var(--tc-space-4) var(--tc-space-5);
	border-left: 3px solid var(--tc-gold-500);
	background: var(--tc-gray-050);
	color: var(--tc-text-secondary);
}

.tc-prose blockquote > :first-child {
	margin-top: 0;
}

.tc-prose hr {
	margin: var(--tc-space-7) 0;
	border: 0;
	border-top: 1px solid var(--tc-gray-200);
}

/* ---- 正文插图（文字环绕） --------------------------------------------- */

/*
 * 需求：在正文里插图，文字能像 Word 一样「环绕」它。
 *
 * 三件事必须同时成立，缺一个就会显得"做了一半"：
 *   1. **位置语义全由 class 决定**（四周型 / 紧密型 / 上下型 / 浮于文字上方 / 下方），
 *      尺寸与偏移用 CSS 变量；变量值由服务端从 `data-tcimg` 派生 ⇒ 前台**不依赖 JS**，
 *      首屏不会先画错再跳一下。
 *   2. **`position: relative` + `isolation: isolate`**：让 `.tc-prose` 自己成为一个
 *      层叠上下文。否则「衬于文字下方」的 `z-index: -1` 会一路沉到区块背景之后，
 *      图片整张消失（看着像图没上传成功）。
 *   3. **窄屏必须强制回退**：手机上没有 40% 宽的浮动位，硬保留会让每行只剩几个字。
 *      见文件末尾的 `@media (max-width: 767px)`。
 */

.tc-prose {
	position: relative;
	isolation: isolate;
}

.tc-prose .tcimg {
	max-width: 100%;
	height: auto;
}

/*
 * 正文插图的「看原图」链接。
 *
 * 刻意用**行内**（默认 display）而不是 inline-block：浮动发生在里面的 `<img>` 上，
 * 外层若变成 inline-block 就会形成一个把浮动包死的盒子，文字再也绕不过去
 * —— 环绕会静默失效，只剩图旁边一大块空白。
 * 行内元素不生成盒子，浮动照常相对于 `<p>` 定位（WordPress 核心的 alignleft 也是这么做的）。
 */
.tcimg-zoom {
	cursor: zoom-in;
}

.tcimg-zoom:focus-visible {
	outline: 2px solid var(--tc-accent-500, #2f7fd0);
	outline-offset: 3px;
}

/* 浮动图与上一段之间的默认间距由「图自己」承担，别叠加兄弟间距。 */
.tc-prose > .tcimg {
	margin-top: 0;
}

/* —— 四周型：文字绕开图片矩形 —— */
.tcimg--wrap-square {
	width: var(--tcimg-w, 40%);
	margin: 0 0 var(--tc-space-4);
}

.tcimg--wrap-square.tcimg--side-left {
	float: left;
	margin-right: var(--tc-space-6);
}

.tcimg--wrap-square.tcimg--side-right {
	float: right;
	margin-left: var(--tc-space-6);
}

/* —— 紧密型：文字贴合图片轮廓（圆形 / 椭圆时最明显）—— */
.tcimg--wrap-tight {
	width: var(--tcimg-w, 40%);
	margin: 0 0 var(--tc-space-4);
	shape-margin: 0.5em;
}

.tcimg--wrap-tight.tcimg--side-left {
	float: left;
	margin-right: var(--tc-space-6);
	shape-outside: circle(50%);
}

.tcimg--wrap-tight.tcimg--side-right {
	float: right;
	margin-left: var(--tc-space-6);
	shape-outside: circle(50%);
}

/* 方形图用 inset 更贴轮廓；圆形图自然用 circle。 */
.tcimg--wrap-tight.tcimg--round-none {
	shape-outside: inset(0 round 0);
}

.tcimg--wrap-tight.tcimg--round-soft {
	shape-outside: inset(0 round 14px);
}

/* —— 上下型：图片独占一行 —— */
.tcimg--wrap-block {
	display: block;
	clear: both;
	width: var(--tcimg-w, 100%);
	margin: var(--tc-space-5) auto;
}

/* —— 浮于文字上方 / 衬于文字下方：脱离文字流，位置可自由拖动 —— */
.tcimg--wrap-above,
.tcimg--wrap-below {
	position: absolute;
	left: 50%;
	/*
	 * 基准放在**垂直居中**，而不是顶部。
	 * 顶部基准的后果是：一选「浮于文字上方」，图就正好压住这一段的第一行，
	 * 用户第一眼看到的是「字被挡住了」——这是模式本身没被理解，不是用法错。
	 * 居中基准下图上文字也压得住，但压的是中间，随时可以拖走。
	 * `--tcimg-y` 是相对居中位置的偏移。
	 */
	top: 50%;
	width: var(--tcimg-w, 40%);
	margin: 0;
	transform: translate(-50%, -50%) translate(var(--tcimg-x, 0%), var(--tcimg-y, 0%));
}

.tcimg--wrap-above {
	z-index: 2;
}

.tcimg--wrap-below {
	z-index: -1;
}

/* —— 圆角档位 —— */
.tcimg--round-soft {
	border-radius: 14px;
}

.tcimg--round-circle {
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	object-fit: cover;
}

/*
 * 手机 / 窄屏回退：把所有浮动与绝对定位收成「独占一行」。
 *
 * ⚠️ 这里**必须用 `!important`**：环绕是行内 style 变量 + class 共同作用的结果，
 * 且 `.tcimg--wrap-square.tcimg--side-left` 这类双类选择器权重已经不低；
 * 窄屏是「一律回退」的兜底规则，任何漏网都会在手机上变成每行几个字。
 * 坐标（--tcimg-x/y）一并忽略 —— 手机上拖拽本来就不该发生。
 */
@media (max-width: 767px) {
	.tc-prose .tcimg {
		float: none !important;
		position: static !important;
		display: block !important;
		width: min(100%, var(--tcimg-w, 100%)) !important;
		margin: var(--tc-space-4) auto !important;
		transform: none !important;
		shape-outside: none !important;
		z-index: auto !important;
	}
}

/*
 * 被拦下的图片（来源不可信，保存时已摘掉 src）。
 *
 * 🔴 写成**三个类** 且**放在上面那条媒体查询之后** —— 窄屏回退规则是
 * `.tc-prose .tcimg { display: block !important }`（两个类 + !important），
 * 若这里只用两个类，手机上会反过来把「已拦下的图」显示出来（alt 文字或破图框）。
 * 三个类权重更高，且位置在后，两条规则谁都不会意外胜出。
 */
.tc-prose .tcimg.tcimg--dropped {
	display: none !important;
}

/* ---- 图片模块 ---------------------------------------------------------- */

/*
 * 图片大小用 CSS 变量控制（后台可拖拽 / 可选档位）。
 *
 * 变量缺失时回落到 100% —— 与升级前的渲染**逐像素一致**，所以老内容
 * 不需要迁移。用「两个类」选择器写对齐规则，而不是单类：单类规则会被
 * 同权重、后加载的 `margin: 0` 简写静默压死，两个类则与文件顺序无关。
 */

.tc-block__figure {
	margin: 0;
	width: var(--tc-block-img-scale, 100%);
	max-width: 100%;
}

.tc-block__figure.tc-block__figure--align-center {
	margin-inline: auto;
}

.tc-block__figure.tc-block__figure--align-right {
	margin-left: auto;
	margin-right: 0;
}

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

.tc-block__figure--plain img {
	box-shadow: none;
}

.tc-block__figure--rounded img {
	border-radius: calc(var(--tc-radius) * 2);
}

.tc-block__figure--card {
	padding: var(--tc-space-4);
	background: #fff;
	border: 1px solid var(--tc-gray-200);
	border-radius: var(--tc-radius);
}

.tc-block__figure--card img {
	box-shadow: none;
}

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

/* ---- 点击看原图 / 播放原视频 ------------------------------------------- */

/*
 * 触发器本身是一个 `<a href="原文件">`：
 * 未启用 JS、或脚本加载失败时，点一下仍然会直接打开原图 / 原视频，
 * 与资质图片墙用的是同一套渐进增强（见 assets/js/lightbox.js）。
 */
.tc-block__zoom {
	position: relative;
	display: block;
	line-height: 0;
	cursor: zoom-in;
}

.tc-block__zoom--video {
	cursor: pointer;
}

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

.tc-block__video {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--tc-radius);
	box-shadow: var(--tc-shadow-1);
	background: #0b1728;
}

/*
 * 视频上的居中播放按钮。
 *
 * 前台播放器默认**不带 controls**（见 theme/inc/blocks.php 的说明）：
 * 画面内点一下统一是「打开灯箱播放原视频」，不再和浏览器自带控件抢事件。
 */
.tc-block__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 68px;
	height: 68px;
	margin: -34px 0 0 -34px;
	background: rgba(9, 20, 36, 0.55);
	border: 2px solid rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
	pointer-events: none;
}

.tc-block__play::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -11px 0 0 -6px;
	border-style: solid;
	border-width: 11px 0 11px 18px;
	border-color: transparent transparent transparent #ffffff;
}

/* 角标提示：悬停 / 聚焦时出现。 */
.tc-block__zoom-hint {
	position: absolute;
	right: 10px;
	bottom: 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;
	transition: opacity var(--tc-dur) var(--tc-ease);
	pointer-events: none;
}

.tc-block__zoom:hover .tc-block__zoom-hint,
.tc-block__zoom:focus-visible .tc-block__zoom-hint {
	opacity: 1;
}

/* 触屏设备没有 hover：提示直接常显，否则用户不知道这里能点。 */
@media (hover: none) {
	.tc-block__zoom-hint {
		opacity: 1;
	}
}

/* 图片下方的跳转按钮（替代原先把整块图包进 <a> 的做法）。 */
.tc-block__more {
	margin-top: var(--tc-space-4);
	text-align: center;
}

.tc-block__more-link {
	display: inline-block;
	padding: 9px 22px;
	background: var(--tc-navy-900);
	border-radius: 999px;
	font-size: var(--tc-fs-sm);
	font-weight: 600;
	color: #ffffff;
	text-decoration: none;
}

.tc-block__more-link:hover {
	background: var(--tc-navy-700);
	color: #ffffff;
}

.tc-block--width-full .tc-block__figure .tc-block__zoom,
.tc-block--width-full .tc-block__figure img,
.tc-block--width-full .tc-block__figure .tc-block__video {
	border-radius: 0;
}

/* ---- 图文模块 ---------------------------------------------------------- */

/*
 * 这里刻意用「两个类」选择器：layout.css 里还有一条 `.tc-split__media img`
 * 同为 0-1-1 权重，只靠加载顺序压它是脆的（换加载顺序就失效），
 * 提到 0-2-1 后与顺序无关。
 */
.tc-split__media.tc-block__media img {
	display: block;
	width: var(--tc-block-img-scale, 100%);
	height: auto;
	border-radius: var(--tc-radius);
	box-shadow: var(--tc-shadow-1);
}

.tc-block__media.tc-block__media--align-center img {
	margin-inline: auto;
}

.tc-block__media.tc-block__media--align-right img {
	margin-left: auto;
	margin-right: 0;
}

/* 图文模块里的媒体同样支持视频与左右对齐。 */
.tc-split__media.tc-block__media .tc-block__video {
	display: block;
	width: var(--tc-block-img-scale, 100%);
	height: auto;
}

.tc-block__media.tc-block__media--align-center .tc-block__video {
	margin-inline: auto;
}

.tc-block__media.tc-block__media--align-right .tc-block__video {
	margin-left: auto;
	margin-right: 0;
}

.tc-block__body .tc-prose {
	font-size: var(--tc-fs-base);
}

@media (min-width: 900px) {
	/* 图在右：把图片列推到第二列。 */
	.tc-block--media-right .tc-block__media {
		order: 2;
	}
}

/* ---- 按钮模块 ---------------------------------------------------------- */

.tc-block__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--tc-space-6);
	padding: clamp(var(--tc-space-5), 4vw, var(--tc-space-7));
	background: var(--tc-gray-050);
	border-radius: var(--tc-radius);
}

.tc-block__cta-body {
	flex: 1 1 320px;
	min-width: 0;
}

.tc-block__cta-body .tc-prose {
	font-size: var(--tc-fs-md);
}

.tc-block__cta-actions {
	flex: 0 0 auto;
}

.tc-block--align-center .tc-block__cta {
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

.tc-block--align-center .tc-block__cta-body {
	flex-basis: auto;
}

/* ---- 窄屏 -------------------------------------------------------------- */

@media (max-width: 599px) {
	.tc-block__cta {
		padding: var(--tc-space-5);
	}

	.tc-block__cta-actions .tc-btn {
		width: 100%;
		text-align: center;
	}
}