/* =============================================================================
 * Tier A 阅读模板样式
 *
 * 只在 single-tier-a.php (post_meta _tier_a=1) 启用。
 * 目标: 18px / 1.8 / 920px 容器, 大屏不空, 中文一行 ~50 字。
 * 命名空间: .tier-a / .tier-a-* — 与主题原 .article-content 隔离,避免污染。
 * ========================================================================== */

/* 覆盖 dux 默认两列布局(.content-wrap 浮动 + sidebar),
 * Tier A 走全宽单栏: content-wrap 占满 container, 内容居中收窄到 920px */
.tier-a-container .content-wrap {
	width: 100%;
	max-width: none;
	float: none;
}
.tier-a-container .content-wrap .content.tier-a {
	max-width: 920px;
	margin: 0 auto;
	padding: 24px 24px 48px;
	float: none;
	width: auto;
}

/* ---- Hero ---- */
.tier-a-hero {
	margin: 0 0 28px;
	border-radius: 4px;
	overflow: hidden;
	background: #f4f4f2;
	aspect-ratio: 16 / 9;
}
.tier-a-hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---- Header / meta ---- */
.tier-a-header {
	margin: 0 0 24px;
	padding: 0;
	border: none;
}
.tier-a-title {
	font-size: 32px;
	line-height: 1.3;
	font-weight: 700;
	margin: 0 0 14px;
	letter-spacing: -0.01em;
	color: #1a1a1a;
}
.tier-a-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #666;
	line-height: 1.6;
}
.tier-a-meta-item { color: #666; text-decoration: none; }
.tier-a-meta-item.tier-a-topic:hover { color: #d97757; }
.tier-a-meta-sep { color: #ccc; }

/* ---- TOC ---- */
.tier-a-toc {
	margin: 0 0 32px;
	padding: 16px 20px;
	background: #fafaf7;
	border-left: 3px solid #d97757;
	border-radius: 2px;
}
.tier-a-toc-summary {
	font-size: 13px;
	font-weight: 600;
	color: #1a1a1a;
	cursor: pointer;
	list-style: none;
	user-select: none;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.tier-a-toc-summary::-webkit-details-marker { display: none; }
.tier-a-toc-summary::before {
	content: "▸";
	display: inline-block;
	margin-right: 6px;
	transition: transform 0.15s ease;
	color: #999;
}
.tier-a-toc[open] .tier-a-toc-summary::before { transform: rotate(90deg); }
.tier-a-toc-nav { margin-top: 12px; }
.tier-a-toc-list { list-style: none; margin: 0; padding: 0; }
.tier-a-toc-item { margin: 4px 0; font-size: 14px; line-height: 1.6; }
.tier-a-toc-item a { color: #444; text-decoration: none; }
.tier-a-toc-item a:hover { color: #d97757; text-decoration: underline; }
.tier-a-toc-l3 { padding-left: 18px; font-size: 13px; }

/* ---- Content ---- */
.tier-a-content {
	font-size: 18px;
	line-height: 1.8;
	color: #1f1f1f;
	word-wrap: break-word;
}
.tier-a-content p { margin: 0 0 1.5em; }
.tier-a-content h2 {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.35;
	margin: 2em 0 0.6em;
	padding-top: 0.2em;
	color: #111;
	scroll-margin-top: 24px;
}
.tier-a-content h3 {
	font-size: 21px;
	font-weight: 600;
	line-height: 1.4;
	margin: 1.8em 0 0.5em;
	color: #222;
	scroll-margin-top: 24px;
}
.tier-a-content ul, .tier-a-content ol { margin: 0 0 1.5em; padding-left: 1.6em; }
.tier-a-content li { margin: 0.4em 0; }
.tier-a-content blockquote {
	margin: 1.5em 0;
	padding: 0.2em 1.2em;
	border-left: 3px solid #d97757;
	color: #555;
	font-style: normal;
	background: transparent;
}
.tier-a-content blockquote p:last-child { margin-bottom: 0; }
.tier-a-content code {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
	font-size: 0.92em;
	padding: 0.15em 0.4em;
	background: #f3f1ec;
	border-radius: 3px;
	color: #b34433;
}
.tier-a-content pre {
	margin: 1.5em 0;
	padding: 16px 18px;
	background: #1a1a1a;
	color: #f5f5f0;
	border-radius: 4px;
	overflow-x: auto;
	font-size: 14px;
	line-height: 1.6;
}
.tier-a-content pre code { background: transparent; color: inherit; padding: 0; }
.tier-a-content img { max-width: 100%; height: auto; display: block; margin: 1.5em auto; border-radius: 3px; }
.tier-a-content a { color: #b34433; text-decoration: underline; text-underline-offset: 2px; }
.tier-a-content a:hover { color: #d97757; }

/* ---- Nav (prev/next) ---- */
.tier-a-nav {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	margin: 40px 0 32px;
	padding: 20px 0;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
	font-size: 14px;
}
.tier-a-nav-prev, .tier-a-nav-next { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.tier-a-nav-next { text-align: right; align-items: flex-end; }
.tier-a-nav small { color: #888; font-size: 12px; }
.tier-a-nav a { color: #1a1a1a; text-decoration: none; font-weight: 500; }
.tier-a-nav a:hover { color: #d97757; }

/* ---- Dark mode ---- */
@media (prefers-color-scheme: dark) {
	.tier-a-title { color: #f5f5f0; }
	.tier-a-meta, .tier-a-meta-item { color: #999; }
	.tier-a-meta-sep { color: #444; }
	.tier-a-hero { background: #1c1c1c; }
	.tier-a-toc { background: #1a1a1a; border-left-color: #d97757; }
	.tier-a-toc-summary { color: #f5f5f0; }
	.tier-a-toc-item a { color: #bbb; }
	.tier-a-content { color: #d4d4d0; }
	.tier-a-content h2, .tier-a-content h3 { color: #f5f5f0; }
	.tier-a-content blockquote { color: #aaa; border-left-color: #d97757; }
	.tier-a-content code { background: #2a2a2a; color: #ff9b7a; }
	.tier-a-content pre { background: #0d0d0d; color: #e8e8e0; }
	.tier-a-nav { border-color: #2a2a2a; }
	.tier-a-nav a { color: #f5f5f0; }
}

/* ---- Mobile ---- */
@media (max-width: 768px) {
	.tier-a-container .content-wrap .content.tier-a { padding: 16px 16px 32px; }
	.tier-a-title { font-size: 26px; }
	.tier-a-content { font-size: 16px; line-height: 1.75; }
	.tier-a-content h2 { font-size: 21px; }
	.tier-a-content h3 { font-size: 18px; }
	.tier-a-nav { flex-direction: column; gap: 16px; }
	.tier-a-nav-next { text-align: left; align-items: flex-start; }
}