/*
 * Knowledge Center and FAQ presentation.
 *
 * Layout proportions, information hierarchy, responsive behaviour and the
 * mobile card-track interaction are reused from the DAYI-validated Resource and
 * FAQ pages. Nothing visual is copied from DAYI: colours, spacing, typography,
 * buttons and links all come from the existing siluzhihang design tokens and
 * component conventions.
 *
 * Every rule is scoped to the Knowledge/FAQ wrappers, so no accepted page
 * outside those two entities is affected.
 *
 * The Knowledge Center Hub deliberately contributes no header/hero declarations
 * here: its header uses the shared page-header presentation, so only the hub's
 * cards, grid and FAQ module are styled below.
 */

.siluzhihang-knowledge,
.siluzhihang-faq {
	--silz-card-surface: #ffffff;
	--silz-card-border: 1px solid #dce5ee;
	--silz-card-radius: 0.625rem;
	--silz-card-shadow: 0 2px 10px rgb(15 43 70 / 4%);
	--silz-muted: #5b6b7f;
	--silz-eyebrow: #0b6bb6;
	--silz-tint: var(--siluzhihang-color-secondary-surface);
	padding-bottom: var(--siluzhihang-section-space);
}

.siluzhihang-faq {
	--siluzhihang-section-space: 3.5rem;
}

/* Knowledge Hub only: retain the section system, at half its site-wide gap. */
.siluzhihang-knowledge {
	--siluzhihang-section-space: 3rem;
}

/* Match Product sections: full-width alternating bands by rendered order. */
.siluzhihang-knowledge > .siluzhihang-section {
	margin-inline: calc(50% - 50vw);
	padding-inline: calc(50vw - 50%);
	background: #fff;
}

.siluzhihang-knowledge > .siluzhihang-section:nth-of-type(odd) {
	background: #f7fafc;
}

/* --- Knowledge Hub header ------------------------------------------------ */

/*
 * The Knowledge Center Hub header intentionally carries no visual declarations.
 * It renders the shared siluzhihang page-header presentation exactly like every
 * other fixed Page: the public breadcrumb, one H1 and the optional Page body,
 * all inside the public .siluzhihang-main container, with no extra divider,
 * background image or page-local type scale.
 *
 * Keeping the wrapper free of declarations is what keeps the hub inside the
 * existing visual system instead of giving it a second, page-specific one. The
 * class remains a semantic landmark and a styling hook only.
 */

/* --- Knowledge Hub ------------------------------------------------------- */
.siluzhihang-knowledge-quote-hero { background: #052342; overflow: hidden; position: relative; }
.siluzhihang-knowledge-quote-hero::after { background: linear-gradient(90deg, rgb(5 35 66 / 82%) 0%, rgb(5 35 66 / 54%) 48%, rgb(5 35 66 / 16%) 100%); content: ""; inset: 0; position: absolute; }
.siluzhihang-knowledge-quote-hero__media { inset: 0; margin: 0; position: absolute; }.siluzhihang-knowledge-quote-hero__media img { display: block; height: 100%; object-fit: cover; width: 100%; }
.siluzhihang-knowledge-quote-hero .siluzhihang-quote-hero__inner { position: relative; z-index: 1; }.siluzhihang-knowledge-quote-hero .siluzhihang-knowledge__eyebrow { color: rgb(255 255 255 / 74%); margin-bottom: .8rem; }.siluzhihang-knowledge-quote-hero .siluzhihang-knowledge__intro { color: rgb(255 255 255 / 92%); margin-top: 0; }.siluzhihang-knowledge-quote-hero .siluzhihang-knowledge-search { margin-top: 1.5rem; }.siluzhihang-knowledge-quote-hero .siluzhihang-knowledge-search input { border-color: rgb(255 255 255 / 45%); }.siluzhihang-knowledge-quote-hero .siluzhihang-breadcrumb { margin-bottom: 1rem; }
.siluzhihang-knowledge-quote-hero--detail { height: auto; min-height: 25rem; padding-block: 3rem; }
.siluzhihang-knowledge__hero { align-items: center; background: #f1f7fb; border: 1px solid #dce5ee; border-radius: 1rem; display: grid; gap: clamp(2rem,5vw,5rem); grid-template-columns: minmax(0,1.05fr) minmax(18rem,.95fr); margin: 2rem 0 1.5rem; overflow: hidden; padding: clamp(2rem,5vw,4.5rem); }
.siluzhihang-knowledge__eyebrow { color: var(--silz-eyebrow); font-size: 12px; font-weight: 800; letter-spacing: .14em; margin: 0 0 .75rem; }
.siluzhihang-knowledge__hero h1 { color: #102e4a; font-size: clamp(2.25rem,4.4vw,4.1rem); letter-spacing: -.045em; line-height: 1.05; margin: 0; }
.siluzhihang-knowledge__intro { color: var(--silz-muted); font-size: 1.05rem; line-height: 1.7; margin-top: 1.25rem; max-width: 39rem; }
.siluzhihang-knowledge-search { display:flex; gap:.75rem; margin-top:1.75rem; max-width:37rem; }
.siluzhihang-knowledge-search input { background:#fff; border:1px solid #bfceda; border-radius:.45rem; flex:1; font:inherit; min-width:0; padding:.8rem 1rem; }
.siluzhihang-knowledge__hero-media { aspect-ratio:4/3; background:#dbeaf3; border-radius:.75rem; margin:0; overflow:hidden; }.siluzhihang-knowledge__hero-media img { display:block; height:100%; object-fit:cover; width:100%; }
.siluzhihang-knowledge-filter { align-items:center; border-bottom:1px solid #dce5ee; display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; margin-bottom:clamp(2.5rem,5vw,4rem); padding:.5rem 0 1rem; }.siluzhihang-knowledge-filter>a { border-radius:999px; color:#36516a; font-size:.9rem; font-weight:700; padding:.55rem .9rem; text-decoration:none; }.siluzhihang-knowledge-filter>a:hover,.siluzhihang-knowledge-filter>a.is-active { background:#e4f1fb; color:var(--siluzhihang-color-primary-blue); }.siluzhihang-knowledge-filter form { align-items:center; display:flex; gap:.5rem; margin-left:auto; }.siluzhihang-knowledge-filter label { color:var(--silz-muted); font-size:.85rem; font-weight:700; }.siluzhihang-knowledge-filter select { border:1px solid #bfceda; border-radius:.35rem; font:inherit; padding:.5rem; }
.siluzhihang-knowledge__featured { padding-top:0; }.siluzhihang-knowledge-featured-card { background:#fff; border:var(--silz-card-border); border-radius:var(--silz-card-radius); box-shadow:var(--silz-card-shadow); display:grid; grid-template-columns:minmax(0,1.05fr) minmax(18rem,.95fr); overflow:hidden; }.siluzhihang-knowledge-featured-card__media { aspect-ratio:16/10; background:var(--silz-tint); display:block; }.siluzhihang-knowledge-featured-card__media img { display:block; height:100%; object-fit:cover; width:100%; }.siluzhihang-knowledge-featured-card__body { align-items:flex-start; display:flex; flex-direction:column; justify-content:center; padding:clamp(1.5rem,4vw,3.5rem); }.siluzhihang-knowledge-featured-card__body h2 { font-size:clamp(1.55rem,2.8vw,2.35rem); line-height:1.16; margin:.7rem 0 0; }.siluzhihang-knowledge-featured-card__body h2 a { color:#102e4a; text-decoration:none; }.siluzhihang-knowledge-featured-card__body h2 a:hover { color:var(--siluzhihang-color-primary-blue); }.siluzhihang-knowledge-featured-card__body>p:not(.siluzhihang-knowledge-card__label) { color:var(--silz-muted); line-height:1.7; margin:1rem 0 0; }.siluzhihang-knowledge-featured-card__body .siluzhihang-text-link { margin-top:1.25rem; }
.siluzhihang-knowledge-guide-grid { display:grid; gap:1.5rem; grid-template-columns:repeat(2,minmax(0,1fr)); }.siluzhihang-knowledge-guide-grid .siluzhihang-knowledge-card { display:grid; grid-template-columns:minmax(10rem,.85fr) minmax(0,1.15fr); }.siluzhihang-knowledge-guide-grid .siluzhihang-knowledge-card__media { aspect-ratio:auto; }
.siluzhihang-knowledge-faq-cta { align-items:center; background:#f1f7fb; border:1px solid #dce5ee; border-radius:.75rem; display:flex; gap:1.5rem; justify-content:space-between; margin:clamp(3rem,6vw,5rem) 0 2rem; padding:clamp(1.5rem,4vw,2.5rem); }.siluzhihang-knowledge-faq-cta p { color:var(--silz-eyebrow); font-size:.75rem; font-weight:800; letter-spacing:.13em; margin:0 0 .5rem; }.siluzhihang-knowledge-faq-cta h2 { color:#102e4a; font-size:clamp(1.35rem,2.2vw,1.9rem); margin:0; }.siluzhihang-knowledge-faq-cta span { color:var(--silz-muted); display:block; line-height:1.6; margin-top:.5rem; }

.siluzhihang-faq__library {
	background: #f7fafc;
	margin-inline: calc(50% - 50vw);
	padding-inline: calc(50vw - 50%);
}

/* --- Shared section heading --------------------------------------------- */

.siluzhihang-section-heading {
	margin-bottom: 1.75rem;
}

.siluzhihang-section-heading__eyebrow {
	color: var(--silz-eyebrow);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.13em;
	margin: 0 0 0.5rem;
	text-transform: uppercase;
}

.siluzhihang-section-heading h2 {
	color: #102e4a;
	font-size: clamp(24px, 2.4vw, 32px);
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin: 0;
}

.siluzhihang-section-heading__intro {
	color: var(--silz-muted);
	font-size: 1rem;
	line-height: 1.65;
	margin: 0.625rem 0 0;
	max-width: 48rem;
}

/* --- Knowledge card grid ------------------------------------------------- */

.siluzhihang-knowledge-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.siluzhihang-knowledge-card {
	background: var(--silz-card-surface);
	border: var(--silz-card-border);
	border-radius: var(--silz-card-radius);
	box-shadow: var(--silz-card-shadow);
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
}

.siluzhihang-knowledge-card__media {
	background: var(--silz-tint);
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.siluzhihang-knowledge-card__media img,
.siluzhihang-knowledge-card__placeholder {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.siluzhihang-knowledge-card__body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 1.25rem;
}

.siluzhihang-knowledge-card__meta {
	color: var(--silz-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 13px;
	gap: 0.5rem 1rem;
	justify-content: space-between;
	line-height: 1.5;
}

.siluzhihang-knowledge-card__label {
	color: var(--siluzhihang-color-primary-blue);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.siluzhihang-knowledge-card h3 {
	font-size: 19px;
	line-height: 1.35;
	margin: 0.75rem 0 0;
}

.siluzhihang-knowledge-card h3 a {
	color: #102e4a;
	text-decoration: none;
}

.siluzhihang-knowledge-card h3 a:hover {
	color: var(--siluzhihang-color-primary-blue);
	text-decoration: underline;
}

.siluzhihang-knowledge-card__body > p {
	color: var(--silz-muted);
	font-size: 15px;
	line-height: 1.65;
	margin: 0.625rem 0 0;
}

.siluzhihang-knowledge-card .siluzhihang-text-link {
	font-size: 14px;
	margin-top: auto;
	padding-top: 1rem;
}

/* --- FAQ accordion (native details/summary, no JavaScript) --------------- */

.siluzhihang-faq-accordion {
	align-items: start;
	display: grid;
	gap: 1rem 1.25rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.siluzhihang-faq-item {
	background: var(--silz-card-surface);
	border: var(--silz-card-border);
	border-radius: var(--silz-card-radius);
	min-width: 0;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.siluzhihang-faq-item:hover,
.siluzhihang-faq-item:focus-within {
	border-color: #b9d3e7;
	box-shadow: var(--silz-card-shadow);
}

.siluzhihang-faq-item summary {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-size: 17px;
	font-weight: 600;
	gap: 1rem;
	justify-content: space-between;
	line-height: 1.45;
	min-height: 5.5rem;
	padding: 1.25rem 1.375rem;
}

.siluzhihang-faq-item summary::-webkit-details-marker {
	display: none;
}

.siluzhihang-faq-item summary:hover .siluzhihang-faq-item__question {
	color: var(--siluzhihang-color-primary-blue);
}

.siluzhihang-faq-item__question {
	color: #102e4a;
}

.siluzhihang-faq-item__icon {
	color: var(--siluzhihang-color-primary-blue);
	flex: 0 0 auto;
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	transition: transform 160ms ease;
}

.siluzhihang-faq-item[open] .siluzhihang-faq-item__icon {
	transform: rotate(45deg);
}

.siluzhihang-faq-item__answer {
	color: var(--silz-muted);
	font-size: 15px;
	line-height: 1.7;
	padding: 0 1.375rem 1.375rem;
}

.siluzhihang-faq-item__answer > :last-child {
	margin-bottom: 0;
}

.siluzhihang-faq-module__action {
	display: flex;
	justify-content: center;
	margin: 2rem 0 0;
}

/* --- Detail layout ------------------------------------------------------- */

.siluzhihang-knowledge__layout {
	display: grid;
	gap: 3rem;
	grid-template-columns: minmax(0, 1fr) 20rem;
	padding-block: 2.5rem 1rem;
}

.siluzhihang-knowledge-article {
	min-width: 0;
}

.siluzhihang-knowledge-article__header {
	margin-bottom: 2rem;
}

.siluzhihang-knowledge-article__eyebrow {
	color: var(--silz-eyebrow);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.13em;
	margin: 0 0 0.625rem;
	text-transform: uppercase;
}

.siluzhihang-knowledge-article__header h1 {
	color: #102e4a;
	font-size: clamp(30px, 3.2vw, 42px);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.15;
	margin: 0;
}

.siluzhihang-knowledge-article__excerpt {
	color: var(--silz-muted);
	font-size: 18px;
	line-height: 1.7;
	margin: 1rem 0 0;
}

.siluzhihang-knowledge-article__audience {
	color: var(--silz-muted);
	font-size: 14px;
	line-height: 1.65;
	margin: 0.875rem 0 0;
}

.siluzhihang-knowledge-article__dates {
	color: var(--silz-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 14px;
	gap: 0.5rem 1.25rem;
	margin: 1rem 0 0;
}

.siluzhihang-knowledge-article__featured {
	background: var(--silz-tint);
	border-radius: var(--silz-card-radius);
	margin: 0 0 2rem;
	overflow: hidden;
}

.siluzhihang-knowledge-article__featured img {
	display: block;
	height: auto;
	width: 100%;
}

.siluzhihang-knowledge-article__content {
	font-size: 17px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}

.siluzhihang-knowledge-article__content > * + * {
	margin-top: 1.25rem;
}

.siluzhihang-knowledge-article__content h2 {
	font-size: 28px;
	line-height: 1.25;
	margin-top: 2.5rem;
}

.siluzhihang-knowledge-article__content h3 {
	font-size: 21px;
	line-height: 1.3;
	margin-top: 2rem;
}

.siluzhihang-knowledge-article__content ul,
.siluzhihang-knowledge-article__content ol {
	padding-left: 1.375rem;
}

.siluzhihang-knowledge-article__content img {
	height: auto;
	max-width: 100%;
}

.siluzhihang-knowledge-article__content .wp-block-table {
	max-width: 100%;
	overflow-x: auto;
}

.siluzhihang-knowledge-article__content table {
	border-collapse: collapse;
	font-size: 15px;
	width: 100%;
}

.siluzhihang-knowledge-article__content th,
.siluzhihang-knowledge-article__content td {
	border: 1px solid #dce5ee;
	padding: 0.625rem 0.875rem;
	text-align: left;
	vertical-align: top;
}

/* --- Related sidebar ---------------------------------------------------- */

.siluzhihang-knowledge__sidebar {
	align-self: start;
	display: grid;
	gap: 2rem;
	min-width: 0;
}

.siluzhihang-related-module {
	border-top: 3px solid var(--siluzhihang-color-primary-blue);
	padding-top: 1rem;
}

.siluzhihang-related-module__title {
	color: #102e4a;
	font-size: 17px;
	letter-spacing: -0.01em;
	margin: 0 0 1rem;
}

.siluzhihang-related-list {
	display: grid;
	gap: 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.siluzhihang-related-item a {
	color: #102e4a;
	text-decoration: none;
}

.siluzhihang-related-item a:hover .siluzhihang-related-item__title {
	color: var(--siluzhihang-color-primary-blue);
	text-decoration: underline;
}

.siluzhihang-related-item__title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.45;
}

.siluzhihang-related-item time {
	color: var(--silz-muted);
	display: block;
	font-size: 13px;
	font-weight: 400;
	margin-top: 0.25rem;
}

.siluzhihang-related-item--product a {
	align-items: center;
	display: grid;
	gap: 0.75rem;
	grid-template-columns: 4.5rem minmax(0, 1fr);
}

.siluzhihang-related-item--product img {
	aspect-ratio: 4 / 3;
	background: var(--silz-tint);
	border-radius: 0.375rem;
	display: block;
	height: auto;
	object-fit: contain;
	width: 100%;
}

/* The sidebar accordion is the compact form: no card, only a hairline rule. */
.siluzhihang-knowledge__sidebar .siluzhihang-faq-accordion {
	display: grid;
	gap: 0;
	grid-template-columns: minmax(0, 1fr);
}

.siluzhihang-knowledge__sidebar .siluzhihang-faq-item {
	background: transparent;
	border: 0;
	border-bottom: 1px solid #dce5ee;
	border-radius: 0;
}

.siluzhihang-knowledge__sidebar .siluzhihang-faq-item summary {
	font-size: 15px;
	min-height: 0;
	padding: 0.75rem 0;
}

.siluzhihang-knowledge__sidebar .siluzhihang-faq-item__answer {
	font-size: 14px;
	padding: 0 0 1rem;
}

/* --- Pagination --------------------------------------------------------- */

.siluzhihang-pagination {
	display: flex;
	justify-content: center;
	margin-top: 2.25rem;
}

.siluzhihang-pagination ul {
	align-items: center;
	background: #ffffff;
	border: 1px solid #dce5ee;
	border-radius: 0.625rem;
	display: inline-flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap;
	gap: 0.375rem;
	list-style: none;
	margin: 0;
	padding: 0.375rem;
}

.siluzhihang-pagination li {
	flex: 0 0 auto !important;
	margin: 0 !important;
	width: auto !important;
}

.siluzhihang-pagination .page-numbers {
	border: 1px solid transparent;
	border-radius: 0.375rem;
	color: #102e4a;
	display: inline-grid;
	min-height: 2.75rem;
	min-width: 2.75rem;
	padding: 0.5rem 0.875rem;
	place-items: center;
	text-decoration: none;
}

.siluzhihang-pagination a.page-numbers:hover {
	background: #eaf3fa;
	border-color: #c7ddeb;
	color: var(--siluzhihang-color-primary-blue);
}

.siluzhihang-pagination .page-numbers.current {
	background: var(--siluzhihang-color-primary-blue);
	border-color: var(--siluzhihang-color-primary-blue);
	color: var(--siluzhihang-color-footer-text);
	font-weight: 600;
}

/* --- Empty state -------------------------------------------------------- */

.siluzhihang-empty-state {
	background: var(--silz-tint);
	border: var(--silz-card-border);
	border-radius: var(--silz-card-radius);
	color: var(--silz-muted);
	margin: 0;
	padding: 2.5rem 1.25rem;
	text-align: center;
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 1024px) {
	.siluzhihang-knowledge__hero,
	.siluzhihang-knowledge-featured-card { grid-template-columns: minmax(0, 1fr); }

	.siluzhihang-knowledge__hero-media { max-height: 24rem; }

	.siluzhihang-knowledge-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.siluzhihang-faq-accordion {
		grid-template-columns: minmax(0, 1fr);
	}

	.siluzhihang-knowledge__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.5rem;
	}

	.siluzhihang-knowledge__sidebar {
		gap: 1.75rem;
	}
}

/*
 * Mobile keeps the DAYI card-track interaction: one horizontally scrollable
 * rail instead of a stacked column. Unlike the DAYI source rule, a single card
 * keeps its normal card width and is never stretched to full width.
 */
@media (max-width: 767px) {
	.siluzhihang-knowledge { --siluzhihang-section-space: 1.5rem; }
	.siluzhihang-knowledge-quote-hero--detail { min-height: 20rem; padding-block: 2.5rem; }

	.siluzhihang-knowledge__hero { gap: 1.5rem; margin-top: 1rem; padding: 1.5rem; }

	.siluzhihang-knowledge-search { flex-direction: column; }

	.siluzhihang-knowledge-search .siluzhihang-button { width: 100%; }

	.siluzhihang-knowledge-filter { align-items: stretch; gap: .5rem; }

	.siluzhihang-knowledge-filter form { justify-content: space-between; margin-left: 0; width: 100%; }

	.siluzhihang-knowledge-guide-grid { display: grid; grid-template-columns: minmax(0, 1fr); }

	.siluzhihang-knowledge-guide-grid .siluzhihang-knowledge-card { display: flex; }

	.siluzhihang-knowledge-guide-grid .siluzhihang-knowledge-card__media { aspect-ratio: 16 / 9; }

	.siluzhihang-knowledge-faq-cta { align-items: flex-start; flex-direction: column; }

	.siluzhihang-knowledge-grid {
		display: flex;
		gap: 1rem;
		max-width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		padding-bottom: 0.5rem;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.siluzhihang-knowledge-grid::-webkit-scrollbar {
		display: none;
	}

	.siluzhihang-knowledge-grid > * {
		flex: 0 0 min(82vw, 20rem);
		max-width: min(82vw, 20rem);
		scroll-snap-align: start;
		width: auto;
	}

	.siluzhihang-faq-item summary {
		font-size: 16px;
		min-height: 4.75rem;
		padding: 1rem 1.125rem;
	}

	.siluzhihang-faq-item__answer {
		padding: 0 1.125rem 1.125rem;
	}

	.siluzhihang-knowledge-article__header h1 {
		font-size: 28px;
	}

	.siluzhihang-knowledge-article__excerpt {
		font-size: 16px;
	}

	.siluzhihang-knowledge-article__content {
		font-size: 16px;
	}

	.siluzhihang-knowledge-article__content h2 {
		font-size: 24px;
		margin-top: 2rem;
	}

	.siluzhihang-knowledge-article__content h3 {
		font-size: 19px;
		margin-top: 1.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.siluzhihang-faq-item__icon {
		transition: none;
	}
}