/* ==========================================================================
   Header mega-menu (Solutions) + thumbnail dropdowns (Industries & other parents)
   Consumed by RisingStar_Nav_Walker. Faithfully mirrors the xunruiCMS reference
   (template/pc/default/home/header.html + public/static/css/global.css):
   - Solutions  -> full-width split panel: left sidebar of L2 + right panels
                   with L3 sublinks + a thumbnail.
   - Industries / other parents -> thumbnail + name card dropdown.
   ========================================================================== */

/* The mega <li> must be static so its full-width panel positions against the
   (relative) header, not the narrow <li>. Thumb <li> keeps the default
   position:relative so its panel drops under the item. */
.rs-header-nav-list li.rs-nav-mega {
	position: static;
}

/* ---------- Full-width mega panel (Solutions) ----------
   Use position:fixed (NOT absolute) so the panel spans the FULL viewport
   width regardless of ancestor positioning. No ancestor of the header uses
   transform/filter, so fixed resolves to the viewport as intended.

   Background split (mirrors xunruiCMS .mega-menu > .shadow-2xl):
   a linear-gradient paints the left column WHITE and the right column #F4F4F6,
   split at the 30/70 boundary of the centered 1440px container.
   calc(50vw - 288px) == (left edge of the centered 1440 container) + 432px
   (432px = 30% of 1440), so the color edge lines up with the column edge at
   any viewport width. Without this, the gray right panel never bled to the
   viewport edges and left white strips (the "gray + white" bug). */
.rs-mega {
	position: fixed;
	top: 80px; /* desktop header height (.rs-header-row = 80px @ >=1024px) */
	left: 0;
	right: 0;
	z-index: 100;
	background: linear-gradient(to right, #ffffff calc(50vw - 288px), #F4F4F6 calc(50vw - 288px));
	box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, visibility 0.15s ease;
}

/* Transparent bridge above the panel: closes the gap between the top-level
   nav item and the (fixed) panel so the dropdown no longer flickers / disappears
   while the cursor travels from the item down into the panel. */
.rs-mega::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: -24px;
	height: 24px;
}

/* Logged-in admin bar pushes the header down 32px; keep the panel flush. */
body.admin-bar .rs-mega {
	top: 112px;
}

@media (min-width: 1024px) {
	.rs-header-nav-list li.rs-nav-mega:hover > .rs-mega,
	.rs-header-nav-list li.rs-nav-mega > .rs-mega:hover,
	.rs-header-nav-list li.rs-nav-mega.is-open > .rs-mega {
		opacity: 1;
		visibility: visible;
	}
}

.rs-mega-inner {
	max-width: 1440px;
	margin: 0 auto;
	/* No horizontal padding: the 30/70 columns must span the full 1440 so the
	   split aligns with the gradient above (calc(50vw - 288px)). */
	padding: 0;
	display: flex;
	min-height: 420px;
}

/* ---------- Left sidebar (30%) — L2 list + follow indicator + CTA ---------- */
.rs-mega-side {
	box-sizing: border-box;
	width: 30%;
	background: #ffffff;
	padding: 2rem 1.5rem;
	display: flex;
	flex-direction: column;
}

.rs-mega-side-label {
	margin: 0 0 1.25rem;
	padding-left: 0.75rem;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #6b7280;
}

.rs-mega-side-list {
	position: relative; /* containing block for .rs-mega-indicator */
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	flex: 1;
}

/* The gray highlight that follows the active L2 link (xunruiCMS .sidebar-indicator).
   JS moves its top/height to match the hovered link. */
.rs-mega-indicator {
	position: absolute;
	left: -1.5rem;
	right: -1.5rem;
	top: 0;
	height: 0;
	background: linear-gradient(to right, transparent 0%, #F4F4F6 60%, #F4F4F6 100%);
	transition: top 0.45s ease, height 0.45s ease;
	z-index: 0;
}

.rs-mega-side-link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.95rem 1.25rem;
	font-size: 1.125rem;
	font-weight: 600;
	color: #1f2937;
	border-radius: 0.5rem;
	position: relative;
	z-index: 1;
	background-color: transparent;
	transition: color 0.15s;
}

.rs-mega-chevron {
	width: 1rem;
	height: 1rem;
	margin-left: auto;
	color: #2563eb;
	opacity: 0;
	transition: opacity 0.15s;
	flex-shrink: 0;
}

.rs-mega-side-link:hover,
.rs-mega-side-link.is-active {
	color: #2563eb;
}

.rs-mega-side-link.is-active .rs-mega-chevron {
	opacity: 1;
}

/* Left sidebar CTA — gray-gradient pill + dark round arrow (xunruiCMS .quote-group-blue) */
.rs-mega-side-cta {
	margin-top: 1.5rem;
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	text-decoration: none;
}

.rs-mega-side-cta-btn {
	padding: 0.625rem 1.25rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: #111827;
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #f3f4f6 35%, #e5e7eb 100%);
	border-radius: 0.5rem;
	white-space: nowrap;
	transition: background 0.3s;
}

.rs-mega-side-cta:hover .rs-mega-side-cta-btn {
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #e5e7eb 35%, #d1d5db 100%);
}

.rs-mega-side-cta-arrow {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: #111827;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s, background 0.3s;
	flex-shrink: 0;
}

.rs-mega-side-cta-arrow svg {
	width: 0.5rem;
	height: 0.5rem;
	color: #fff;
}

.rs-mega-side-cta:hover .rs-mega-side-cta-arrow {
	background: #2563eb;
	transform: translateX(4px);
}

/* ---------- Right content (70%) — panels ---------- */
.rs-mega-content {
	box-sizing: border-box;
	width: 70%;
	background: #F4F4F6;
	padding: 2rem 2.5rem;
}

.rs-mega-panel {
	display: none;
}

.rs-mega-panel.is-active {
	display: block;
}

.rs-mega-panel-inner {
	display: flex;
	gap: 2.5rem;
	align-items: flex-start;
}

.rs-mega-panel-text {
	flex: 1;
	min-width: 0;
}

.rs-mega-panel-text h3 {
	margin: 0 0 1rem;
	font-size: 1.875rem;
	font-weight: 700;
	color: #111827;
}

.rs-mega-panel-text p {
	margin: 0 0 1.25rem;
	font-size: 0.875rem;
	line-height: 1.6;
	color: #6b7280;
	max-width: 38rem;
}

/* Right "Discover" CTA — gray-gradient pill + dark round arrow (xunruiCMS .quote-group) */
.rs-mega-discover {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	margin-bottom: 1.5rem;
	text-decoration: none;
}

.rs-mega-discover-btn {
	padding: 0.625rem 1.25rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: #111827;
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #f3f4f6 35%, #e5e7eb 100%);
	border-radius: 9999px;
	white-space: nowrap;
	transition: background 0.3s;
}

.rs-mega-discover:hover .rs-mega-discover-btn {
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #e5e7eb 35%, #d1d5db 100%);
}

.rs-mega-discover-arrow {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: #111827;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s, background 0.3s;
	flex-shrink: 0;
}

.rs-mega-discover-arrow svg {
	width: 0.5rem;
	height: 0.5rem;
	color: #fff;
}

.rs-mega-discover:hover .rs-mega-discover-arrow {
	background: #2563eb;
	transform: translateX(4px);
}

.rs-mega-sublinks {
	border-top: 1px solid #e5e7eb;
	padding-top: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.rs-mega-sublinks a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	font-size: 1.0625rem;
	font-weight: 500;
	color: #374151;
	text-decoration: none;
	transition: color 0.15s ease, padding-left 0.15s ease;
}

.rs-mega-sub-arrow {
	width: 0.625rem;
	height: 0.625rem;
	color: #2563eb;
	opacity: 0.35;
	flex-shrink: 0;
	transition: transform 0.25s, opacity 0.25s;
}

.rs-mega-sublinks a:hover {
	color: #2563eb;
}

.rs-mega-sublinks a:hover .rs-mega-sub-arrow {
	opacity: 1;
	transform: translateX(6px);
}

.rs-mega-panel-thumb {
	width: 18rem;
	flex-shrink: 0;
}

.rs-mega-panel-thumb img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 0.75rem;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* ---------- Thumbnail + name dropdown — industrial 1x4 mega row ----------
   Reworked per expert review: the old 2x2 rounded card floating like a
   consumer-app bubble is replaced by a wide, hard-edged 1x4 module that
   reads like a metal panel extending down from the nav bar. */
.rs-header-nav-list li.rs-nav-thumb {
	position: relative;
}

.rs-thumb-drop {
	position: absolute;
	top: calc(100% + 14px);     /* 挂在一级栏目下方 14px */
	left: 50%;                  /* 水平居中：面板中线对齐一级栏目中线 */
	z-index: 100;
	width: 880px;               /* 1x4 横向一字排开（专家建议 800–1000px） */
	background: #ffffff;
	border: 1px solid #E5E7EB;  /* 极细浅灰边框，金属模块感 */
	border-radius: 2px;         /* 极小微圆角（硬朗工业风） */
	/* 硬朗的垂直阴影：一条 0 模糊的实色偏移 + 一层克制投影 */
	box-shadow: 0 12px 0 rgba(15, 23, 42, 0.04), 0 18px 36px rgba(15, 23, 42, 0.12);
	padding: 1.25rem;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%); /* 水平居中 */
}

/* Transparent bridge above the panel (same gap fix as .rs-mega). */
.rs-thumb-drop::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: -36px;
	height: 36px;
}

@media (min-width: 1024px) {
	.rs-header-nav-list li.rs-nav-thumb:hover > .rs-thumb-drop,
	.rs-header-nav-list li.rs-nav-thumb > .rs-thumb-drop:hover,
	.rs-header-nav-list li.rs-nav-thumb.is-open > .rs-thumb-drop {
		opacity: 1;
		visibility: visible;
		transform: translateX(-50%);
	}
}

/* Panel header — uppercase label + hairline rule for editorial structure. */
.rs-thumb-head {
	display: flex;
	align-items: center;
	margin-bottom: 0.875rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid #E5E7EB;
}

.rs-thumb-head-label {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #6b7280;
}

.rs-thumb-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr)); /* 1x4 一字排开 */
	gap: 1rem;
	width: 100%;
}

.rs-thumb-card {
	position: relative;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	background: #ffffff;
	border: 1px solid #E5E7EB;  /* 细边框，平时中性 */
	border-radius: 2px;
	overflow: hidden;
	box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.rs-thumb-card:hover {
	/* Hover: keep a neutral border (no blue) and lift with a soft shadow only.
	   Per review: drop the blue border, blue title and right-arrow; the card
	   just gets a shadow on hover. */
	border-color: #D1D5DB;
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

.rs-thumb-card-img {
	aspect-ratio: 4 / 3;        /* 更方正的工业比例 */
	overflow: hidden;
	background: #f4f4f6;
}

.rs-thumb-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: grayscale(100%);            /* 默认黑白 */
	transition: filter 0.4s ease;       /* 悬停转彩色，不放大（尊重"别放大"偏好） */
}

.rs-thumb-card:hover .rs-thumb-card-img img {
	filter: grayscale(0%);
}

.rs-thumb-card-name {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.5rem;
	padding: 0.75rem 0.875rem 0.25rem;
	font-size: 0.9375rem;
	font-weight: 700;
	color: #111827;            /* 深黑主标题 */
	transition: color 0.15s ease;
}

.rs-thumb-card-sub {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	padding: 0 0.875rem 0.75rem;
	font-size: 0.75rem;
	line-height: 1.4;
	color: #4B5563;            /* 中灰副标题 */
}