/**
 * TAXSCO Ceilings — 前端样式
 * 复刻原型（Tailwind）视觉：Manrope / Inter，#142B3D / #D12920 / #F4F5F6。
 */

.txc-detail,
.txc-archive,
.txc-list-section {
	--txc-navy: #142B3D;
	--txc-red: #D12920;
	--txc-red-dark: #b82218;
	--txc-charcoal: #20252A;
	--txc-gray: #777777;
	--txc-light: #F4F5F6;
	--txc-offwhite: #FAFAF8;
	--txc-border: #E8E9EA;

	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--txc-charcoal);
	background: var(--txc-offwhite);
}

/* ---------- 布局基元 ---------- */
.txc-detail .txc-container,
.txc-archive .txc-container,
.txc-list-section .txc-container {
	max-width: 1280px;
	margin: 0 auto;
	padding-left: 24px;
	padding-right: 24px;
}
.txc-container-narrow { max-width: 900px !important; }

.txc-section { padding-top: 96px; padding-bottom: 96px; }
.txc-bg-white { background: #fff; }
.txc-bg-lightgray { background: var(--txc-light); }
.txc-bg-offwhite { background: var(--txc-offwhite); }
.txc-bg-navy { background: var(--txc-navy); }

.txc-detail h1, .txc-detail h2, .txc-detail h3,
.txc-archive h1, .txc-archive h2, .txc-archive h3,
.txc-list-section h1, .txc-list-section h2, .txc-list-section h3 {
	font-family: 'Manrope', 'Inter', sans-serif;
	font-weight: 800;
	color: var(--txc-navy);
}

.txc-h1 { font-size: 2.6rem; line-height: 1.15; margin: 0 0 16px; }
.txc-h2 { font-size: 2rem; line-height: 1.2; margin: 0 0 20px; }
.txc-h3 { font-size: 1.5rem; margin: 0 0 20px; }
.txc-h2-white { color: #fff; }

.txc-eyebrow {
	display: inline-block;
	color: var(--txc-red);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	margin-bottom: 16px;
}
.txc-mini-title {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	color: var(--txc-navy);
	margin: 0 0 16px;
}
.txc-red-bar { display: block; width: 40px; height: 3px; background: var(--txc-red); margin-bottom: 24px; }
.txc-red-bar-sm { width: 32px; margin-bottom: 20px; }

.txc-text { color: var(--txc-gray); line-height: 1.7; font-size: 15px; margin: 0 0 20px; }
.txc-lead { color: var(--txc-gray); line-height: 1.7; font-size: 15px; margin: 0 0 32px; }
.txc-mt-sm { margin-top: 12px; }
.txc-mt-md { margin-top: 16px; }
.txc-mt-lg { margin-top: 40px; }
.txc-mb-lg { margin-bottom: 32px; }
.txc-mb-xl { margin-bottom: 56px; }
.txc-max-w { max-width: 640px; }
.txc-center { text-align: center; }

.txc-center-head { text-align: center; margin-bottom: 56px; }
.txc-flex-head {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 24px; margin-bottom: 40px;
}

/* ---------- 按钮 / 链接 ---------- */
.txc-btn {
	display: inline-block;
	padding: 16px 32px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	transition: all .2s ease;
	line-height: 1.4;
}
.txc-btn-red { background: var(--txc-red); color: #fff; }
.txc-btn-red:hover { background: var(--txc-red-dark); }
.txc-btn-outline { border-color: var(--txc-navy); color: var(--txc-navy); background: transparent; }
.txc-btn-outline:hover { background: var(--txc-navy); color: #fff; }

.txc-link-underline {
	display: inline-flex;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--txc-navy);
	text-decoration: none;
	border-bottom: 2px solid var(--txc-red);
	padding-bottom: 2px;
}
.txc-link-underline:hover { color: var(--txc-red); }

/* ---------- 面包屑 ---------- */
.txc-breadcrumb-wrap {
	background: var(--txc-light);
	border-bottom: 1px solid var(--txc-border);
	padding: 16px 0;
}
.txc-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; margin: 0; }
.txc-breadcrumb a { color: var(--txc-gray); text-decoration: none; font-weight: 500; }
.txc-breadcrumb a:hover { color: var(--txc-red); }
.txc-bc-sep { color: #ccc; }
.txc-bc-current { color: var(--txc-navy); font-weight: 700; }

/* ---------- Hero ---------- */
.txc-hero-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: start;
}
.txc-hero-info { padding-top: 8px; }
.txc-badge {
	display: inline-block;
	padding: 4px 12px;
	background: rgba(209, 41, 32, 0.1);
	color: var(--txc-red);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	margin-bottom: 16px;
}

/* 图库 */
.txc-gallery-main {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--txc-light);
	margin-bottom: 12px;
}
.txc-gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.txc-gallery-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.txc-gallery-thumb {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--txc-light);
	border: 2px solid transparent;
	padding: 0;
	cursor: pointer;
	transition: border-color .2s ease;
}
.txc-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.txc-gallery-thumb:hover { border-color: #aaa; }
.txc-gallery-thumb.is-active { border-color: var(--txc-red); }

/* Key Highlights */
.txc-highlights { background: var(--txc-light); padding: 24px; margin-bottom: 32px; }
.txc-highlights ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.txc-highlights li { display: flex; align-items: flex-start; gap: 12px; }
.txc-dash { flex-shrink: 0; width: 20px; height: 2px; background: var(--txc-red); margin-top: 9px; }
.txc-highlights li > span:last-child { font-size: 14px; color: var(--txc-navy); line-height: 1.4; }

.txc-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- 左右分栏 ---------- */
.txc-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
	margin-bottom: 80px;
}
.txc-split:last-child { margin-bottom: 0; }
.txc-split-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--txc-border); }
.txc-split-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.txc-detail-row.is-flipped .txc-split-img { order: 2; }
.txc-detail-row.is-flipped .txc-split-body { order: 1; }

.txc-app-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.txc-app-tags span {
	padding: 4px 10px;
	background: #fff;
	border: 1px solid var(--txc-border);
	border-radius: 2px;
	color: var(--txc-navy);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* ---------- 规格表 ---------- */
.txc-table-wrap { overflow-x: auto; }
.txc-spec-table { width: 100%; min-width: 540px; border-collapse: collapse; }
.txc-spec-table thead tr { background: var(--txc-navy); }
.txc-spec-table th {
	text-align: left;
	padding: 16px 24px;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-family: 'Manrope', sans-serif;
}
.txc-spec-table .txc-col-2of5 { width: 40%; }
.txc-spec-table td {
	padding: 16px 24px;
	font-size: 14px;
	color: #555;
	border-bottom: 1px solid var(--txc-border);
}
.txc-spec-table td.txc-spec-label { font-weight: 700; color: var(--txc-navy); }
.txc-spec-table tbody tr.is-alt { background: var(--txc-light); }

/* ---------- 表面处理 ---------- */
.txc-finish-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 32px;
	margin-bottom: 40px;
}
.txc-finish { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.txc-finish-circle {
	width: 80px; height: 80px;
	border-radius: 50%;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 1px 4px rgba(20, 43, 61, 0.12);
	border: 2px solid transparent;
	display: flex; align-items: center; justify-content: center;
	transition: border-color .2s ease;
}
.txc-finish:hover .txc-finish-circle { border-color: var(--txc-red); }
.txc-finish-circle img { width: 100%; height: 100%; object-fit: cover; display: block; }
.txc-finish-name {
	font-size: 11px; font-weight: 700; color: var(--txc-navy);
	text-align: center; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.3;
}

/* ---------- Key Benefits ---------- */
.txc-benefit-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.txc-benefit-card {
	padding: 32px;
	background: var(--txc-offwhite);
	border: 1px solid var(--txc-border);
	transition: all .2s ease;
}
.txc-benefit-card:hover { border-color: rgba(209, 41, 32, 0.3); box-shadow: 0 10px 24px rgba(20, 43, 61, 0.08); }
.txc-benefit-card svg { width: 40px; height: 40px; color: var(--txc-red); margin-bottom: 20px; }
.txc-benefit-card h3 { font-size: 16px; margin: 0 0 8px; }
.txc-benefit-card:hover h3 { color: var(--txc-red); }
.txc-benefit-card p { color: var(--txc-gray); font-size: 14px; line-height: 1.6; margin: 0; }

/* ---------- Why Choose（深蓝区） ---------- */
.txc-why-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-bottom: 64px;
}
.txc-why-card { border: 1px solid rgba(255, 255, 255, 0.1); padding: 28px; transition: background .2s ease; }
.txc-why-card:hover { background: rgba(255, 255, 255, 0.05); }
.txc-why-card h3 { color: #fff; font-size: 16px; margin: 0 0 12px; }
.txc-why-card p { color: #8fa5b5; font-size: 14px; line-height: 1.6; margin: 0; }

.txc-stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-top: 48px;
	text-align: center;
}
.txc-stat-num {
	font-family: 'Manrope', sans-serif;
	font-weight: 800;
	font-size: 2.25rem;
	color: var(--txc-red);
	margin-bottom: 8px;
}
.txc-stat-label { color: rgba(255, 255, 255, 0.6); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; }

/* ---------- Advantage 清单 ---------- */
.txc-check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.txc-check-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--txc-navy); }
.txc-check-dot {
	flex-shrink: 0;
	width: 20px; height: 20px;
	border-radius: 50%;
	background: var(--txc-red);
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	margin-top: 1px;
}
.txc-check-dot svg { width: 10px; height: 8px; }

/* ---------- 询盘区（接口） ---------- */
.txc-inquiry-box { background: #fff; padding: 48px; }
.txc-inquiry-product {
	display: flex; align-items: center; gap: 12px;
	background: var(--txc-offwhite);
	border-left: 4px solid var(--txc-red);
	padding: 14px 20px;
	margin-bottom: 32px;
}
.txc-inquiry-product-label { font-size: 10px; font-weight: 700; color: var(--txc-gray); text-transform: uppercase; letter-spacing: 0.15em; }
.txc-inquiry-product-name { font-size: 14px; font-weight: 700; color: var(--txc-navy); }
.txc-inquiry-placeholder {
	border: 2px dashed #ccc;
	padding: 40px 24px;
	text-align: center;
	color: var(--txc-gray);
	font-size: 14px;
	background: var(--txc-offwhite);
}

/* ---------- 博客 ---------- */
.txc-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.txc-blog-card { background: var(--txc-offwhite); border: 1px solid var(--txc-border); overflow: hidden; transition: box-shadow .2s ease; }
.txc-blog-card:hover { box-shadow: 0 10px 24px rgba(20, 43, 61, 0.1); }
.txc-blog-card-link { text-decoration: none; display: block; }
.txc-blog-card-img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--txc-border); }
.txc-blog-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.txc-blog-card:hover .txc-blog-card-img img { transform: scale(1.05); }
.txc-blog-card-body { padding: 20px; }
.txc-blog-card-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.txc-blog-cat { padding: 2px 8px; background: var(--txc-light); color: var(--txc-red); font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; }
.txc-blog-date { font-size: 11px; color: #aaa; }
.txc-blog-card h3 { font-size: 14px; line-height: 1.4; margin: 0; }
.txc-blog-card:hover h3 { color: var(--txc-red); }
.txc-blog-more { margin-top: 12px; font-size: 11px; font-weight: 700; color: var(--txc-red); text-transform: uppercase; letter-spacing: 0.15em; }

/* ---------- 产品列表卡片 ---------- */
.txc-product-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.txc-card { background: #fff; border: 1px solid var(--txc-border); overflow: hidden; transition: box-shadow .2s ease; }
.txc-card:hover { box-shadow: 0 16px 32px rgba(20, 43, 61, 0.12); }
.txc-card-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--txc-light); }
.txc-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.txc-card:hover .txc-card-img img { transform: scale(1.05); }
.txc-card-body { padding: 20px; }
.txc-card-title { font-size: 14px; line-height: 1.4; margin: 0 0 8px; }
.txc-card-title a { color: var(--txc-navy); text-decoration: none; }
.txc-card-title a:hover { color: var(--txc-red); }
.txc-card-desc { font-size: 12px; color: var(--txc-gray); line-height: 1.5; margin: 0 0 16px;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.txc-card-foot { padding-top: 12px; border-top: 1px solid var(--txc-light); }
.txc-card-more { font-size: 11px; font-weight: 700; color: var(--txc-navy); letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; }
.txc-card-more:hover { color: var(--txc-red); }

.txc-card-hidden { display: none; }
.txc-card-hidden.is-visible { display: block; }
.txc-loadmore-wrap { text-align: center; margin-top: 48px; }

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
	.txc-section { padding-top: 72px; padding-bottom: 72px; }
	.txc-hero-grid { grid-template-columns: 1fr; gap: 40px; }
	.txc-split { grid-template-columns: 1fr; gap: 32px; margin-bottom: 56px; }
	.txc-detail-row.is-flipped .txc-split-img { order: 0; }
	.txc-detail-row.is-flipped .txc-split-body { order: 0; }
	.txc-benefit-grid { grid-template-columns: repeat(2, 1fr); }
	.txc-why-grid { grid-template-columns: repeat(2, 1fr); }
	.txc-stats-grid { grid-template-columns: repeat(2, 1fr); }
	.txc-product-grid { grid-template-columns: repeat(2, 1fr); }
	.txc-finish-grid { grid-template-columns: repeat(4, 1fr); }
	.txc-blog-grid { grid-template-columns: 1fr; }
	.txc-h1 { font-size: 2rem; }
	.txc-h2 { font-size: 1.6rem; }
}
@media (max-width: 640px) {
	.txc-section { padding-top: 56px; padding-bottom: 56px; }
	.txc-container { padding-left: 16px; padding-right: 16px; }
	.txc-benefit-grid, .txc-why-grid, .txc-product-grid { grid-template-columns: 1fr; }
	.txc-finish-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
	.txc-flex-head { flex-direction: column; align-items: flex-start; }
	.txc-inquiry-box { padding: 24px; }
	.txc-hide-sm { display: none; }
	.txc-hero-actions .txc-btn { width: 100%; text-align: center; }
}