/**
 * Longleyun restrained glass visual layer.
 *
 * Scope: header, homepage presentation and toolbox visual refinements.
 *
 * Rollback: delete this file + its single wp_enqueue_style line in
 *          includes/class-longleyun-global-header.php.
 *
 * Loaded after visual-foundation.css. CSS-only: no markup, no JS.
 */

/* ==================================================================
 * 1. Header — restrained white glass (macOS-toolbar feel, no glow)
 * ================================================================== */
.ly-global-header {
	background: rgba(255, 255, 255, 0.78);
	border-bottom: 1px solid rgba(15, 23, 42, 0.06);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.72),
		0 8px 24px rgba(15, 23, 42, 0.05);
	-webkit-backdrop-filter: blur(20px) saturate(140%);
	backdrop-filter: blur(20px) saturate(140%);
}

/* Popovers share the same material, slightly more opaque for legibility. */
.ly-global-header .ly-header-menu__dropdown,
.ly-global-header .ly-header-qq__card,
.ly-global-header .ly-header-account-menu__dropdown {
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(15, 23, 42, 0.07);
	-webkit-backdrop-filter: blur(22px) saturate(140%);
	backdrop-filter: blur(22px) saturate(140%);
}

/* Mobile panel: higher opacity, lower blur — readability first. */
@media (max-width: 1199px) {
	.ly-global-header .ly-global-header__panel {
		background: rgba(255, 255, 255, 0.94);
		-webkit-backdrop-filter: blur(16px) saturate(130%);
		backdrop-filter: blur(16px) saturate(130%);
	}
}

/* ==================================================================
 * 2. Homepage hero — near-white base + faint brand-blue ambience
 * ================================================================== */
.ly-header-hero-shell .ly-hero {
	border-color: rgba(9, 15, 31, 0.06);
	background:
		radial-gradient(circle at 88% 8%, rgba(76, 111, 255, 0.1), transparent 30%),
		radial-gradient(circle at 4% 92%, rgba(76, 111, 255, 0.05), transparent 26%),
		linear-gradient(150deg, #ffffff 0%, #fbfcff 56%, #f8faff 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		0 24px 60px rgba(15, 23, 42, 0.06);
}

/* Grid almost invisible; ring barely there. */
.ly-header-hero-shell .ly-hero::before { opacity: 0.16; }
.ly-header-hero-shell .ly-hero::after {
	border-color: rgba(49, 94, 251, 0.06);
	box-shadow: none;
}

/* Title second line: brand blue -> light blue only (no rainbow). */
.ly-header-hero-shell .ly-hero h1 > span:last-child {
	background: linear-gradient(100deg, #1c3fbf 0%, #315efb 52%, #7aa2ff 100%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* Glass accents: eyebrow, search, secondary button, popular pills. */
.ly-header-hero-shell .ly-eyebrow {
	background: rgba(255, 255, 255, 0.62);
	border-color: rgba(255, 255, 255, 0.85);
	box-shadow:
		0 6px 18px rgba(15, 23, 42, 0.05),
		inset 0 1px 0 rgba(255, 255, 255, 0.8);
	-webkit-backdrop-filter: blur(12px) saturate(140%);
	backdrop-filter: blur(12px) saturate(140%);
}

.ly-header-hero-shell .ly-smart-search {
	background: rgba(255, 255, 255, 0.82);
	border-color: rgba(208, 215, 226, 0.85);
	box-shadow:
		0 18px 44px rgba(18, 31, 53, 0.09),
		inset 0 1px 0 rgba(255, 255, 255, 0.7);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
}

.ly-header-hero-shell .ly-hero .ly-button--secondary {
	background: rgba(255, 255, 255, 0.72);
	border-color: rgba(207, 214, 225, 0.9);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
	-webkit-backdrop-filter: blur(12px) saturate(140%);
	backdrop-filter: blur(12px) saturate(140%);
}

.ly-header-hero-shell .ly-popular-searches a {
	background: rgba(255, 255, 255, 0.6);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	backdrop-filter: blur(10px) saturate(140%);
}

/* Keep the primary CTA solid brand blue (never transparent). */

/* ==================================================================
 * 3. Toolbox /tools/ — light glass cards (no over-transparency)
 * ================================================================== */
.ly-business--tools .ly-tool-card,
.ly-business--tools .ly-toolcat,
.ly-business--tools .ly-toolitem {
	border: 1px solid rgba(15, 23, 42, 0.06);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.8));
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.82),
		0 8px 22px rgba(15, 23, 42, 0.045);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	backdrop-filter: blur(10px) saturate(140%);
}

/* Hover: keep it quiet (max -1px, edge slightly brighter). */
.ly-business--tools .ly-tool-card:hover,
.ly-business--tools .ly-tool-card:focus-visible {
	border-color: #cdd8f2;
	background: rgba(255, 255, 255, 0.92);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		0 10px 26px rgba(15, 23, 42, 0.06);
	transform: translateY(-1px);
}

.ly-business--tools .ly-toolcat:hover,
.ly-business--tools .ly-toolcat:focus-visible {
	border-color: #cdd8f2;
	background: rgba(255, 255, 255, 0.92);
}

/* planned rows stay matte/quiet — not glass. */
.ly-business--tools .ly-toolitem.is-planned {
	border-color: rgba(15, 23, 42, 0.07);
	background: rgba(248, 250, 252, 0.72);
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.ly-business--tools .ly-toolitem.is-planned .ly-toolitem__badge {
	background: #eef1f6;
	color: #5d697b;
}

/* ==================================================================
 * 4. Six category icon tiles (container only; SVG unchanged)
 * ================================================================== */
.ly-business--tools .ly-toolcat__icon,
.ly-business--tools .ly-tool-card__icon {
	border: 1px solid rgba(255, 255, 255, 0.85);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(238, 243, 255, 0.78));
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.92),
		0 4px 12px rgba(15, 23, 42, 0.05);
}

/* Shared stroke weight stays at the existing 1.6 (set on the SVG). */
.ly-business--tools .ly-toolcat__icon { width: 44px; height: 44px; border-radius: 12px; }

/* Per-category tint: computer / ai / image / video / file / network. */
.ly-business--tools .ly-toolcat-grid > .ly-toolcat:nth-child(1) .ly-toolcat__icon { color: #315efb; }
.ly-business--tools .ly-toolcat-grid > .ly-toolcat:nth-child(2) .ly-toolcat__icon { color: #5b6bf0; }
.ly-business--tools .ly-toolcat-grid > .ly-toolcat:nth-child(3) .ly-toolcat__icon { color: #2f80ed; }
.ly-business--tools .ly-toolcat-grid > .ly-toolcat:nth-child(4) .ly-toolcat__icon { color: #315efb; }
.ly-business--tools .ly-toolcat-grid > .ly-toolcat:nth-child(5) .ly-toolcat__icon { color: #4b5c78; }
.ly-business--tools .ly-toolcat-grid > .ly-toolcat:nth-child(6) .ly-toolcat__icon { color: #2f9e8f; }

/* ==================================================================
 * 5. Fallbacks & accessibility
 * ================================================================== */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.ly-global-header { background: #ffffff; }
	.ly-global-header .ly-header-menu__dropdown,
	.ly-global-header .ly-header-qq__card,
	.ly-global-header .ly-header-account-menu__dropdown { background: #ffffff; }
	.ly-header-hero-shell .ly-eyebrow,
	.ly-header-hero-shell .ly-smart-search,
	.ly-header-hero-shell .ly-hero .ly-button--secondary,
	.ly-header-hero-shell .ly-popular-searches a,
	.ly-business--tools .ly-tool-card,
	.ly-business--tools .ly-toolcat,
	.ly-business--tools .ly-toolitem { background: #ffffff; }
}

@media (prefers-reduced-transparency: reduce) {
	.ly-global-header { background: #ffffff; -webkit-backdrop-filter: none; backdrop-filter: none; }
	.ly-header-hero-shell .ly-eyebrow,
	.ly-header-hero-shell .ly-smart-search,
	.ly-header-hero-shell .ly-hero .ly-button--secondary,
	.ly-business--tools .ly-tool-card,
	.ly-business--tools .ly-toolcat,
	.ly-business--tools .ly-toolitem { background: #ffffff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ==================================================================
 * 6. Homepage "AI 帮你重新设计" + "为什么选择隆乐云"
 *    CSS-only: DOM, copy, links and section order are unchanged.
 * ================================================================== */

/* Tighter, aligned section rhythm (base was 104px top + bottom).
   The AI showcase is intentionally a touch more compact than the trust section. */
.ly-home-section--image-showcase { padding: 34px 0; }
.ly-home-section--trust { padding: 44px 0; }

/* One complete rounded section container. */
.ly-home-section--image-showcase > .ly-home-section__inner,
.ly-home-section--trust > .ly-home-section__inner {
	position: relative;
	padding: clamp(26px, 3.2vw, 44px);
	border: 1px solid rgba(15, 23, 42, 0.07);
	border-radius: 28px;
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(76, 111, 255, 0.08), transparent 42%),
		linear-gradient(180deg, #ffffff 0%, #fdfeff 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		0 18px 44px rgba(15, 23, 42, 0.05);
}

/* Trust: quieter than the AI showcase — near-white, half the ambient, lighter shadow. */
.ly-home-section--trust > .ly-home-section__inner {
	border-color: rgba(15, 23, 42, 0.06);
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(76, 111, 255, 0.04), transparent 40%),
		linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		0 12px 30px rgba(15, 23, 42, 0.035);
}

/* Image-showcase: keep the CTA in clear relation to the copy. */
.ly-home-section--image-showcase .ly-section-heading { display: block; margin-bottom: 18px; }
.ly-home-section--image-showcase .ly-section-heading__copy { max-width: 780px; }
.ly-home-section--image-showcase .ly-section-heading__actions { margin-top: 14px; }

/* Slightly lighter secondary CTA (same border-button language, no icon). */
.ly-home-section--image-showcase .ly-section-heading__actions .ly-button--secondary {
	min-height: 42px;
	padding: 0 15px;
	border-radius: 12px;
	font-size: 13px;
}

/* Steps become cards: 2x2 (4 steps) and 3-up (3 steps).
   business.css is not loaded on the homepage, so the base list layout is
   declared here (display/grid/reset) instead of relying on .ly-biz-flow. */
.ly-home-section--image-showcase .ly-biz-flow,
.ly-home-section--trust .ly-biz-flow {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	gap: 14px;
}
.ly-home-section--image-showcase .ly-biz-flow {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0 0 12px;
}
.ly-home-section--trust .ly-biz-flow {
	position: relative;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Very faint connector line behind the trust flow cards (no arrows). */
.ly-home-section--trust .ly-biz-flow::before {
	position: absolute;
	top: 45px;
	right: 6%;
	left: 6%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(49, 94, 251, 0.16) 20%, rgba(49, 94, 251, 0.16) 80%, transparent);
	content: "";
	pointer-events: none;
	z-index: 0;
}

/* Card body for both flows (replaces the plain document list look). */
.ly-home-section--image-showcase .ly-biz-flow li,
.ly-home-section--trust .ly-biz-flow li {
	position: relative;
	z-index: 1;
	padding: 20px 20px 18px;
	border: 1px solid rgba(15, 23, 42, 0.07);
	border-radius: 17px;
	background: rgba(255, 255, 255, 0.9);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.85),
		0 8px 20px rgba(15, 23, 42, 0.04);
	-webkit-backdrop-filter: blur(8px) saturate(140%);
	backdrop-filter: blur(8px) saturate(140%);
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.ly-home-section--image-showcase .ly-biz-flow li:hover,
.ly-home-section--trust .ly-biz-flow li:hover {
	border-color: #cdd8f2;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		0 10px 24px rgba(15, 23, 42, 0.055);
}

/* Quiet number chip (was a bare blue number). */
.ly-home-section--image-showcase .ly-biz-flow li span,
.ly-home-section--trust .ly-biz-flow li span {
	display: inline-flex;
	min-width: 30px;
	height: 28px;
	align-items: center;
	justify-content: center;
	padding: 0 8px;
	border-radius: 9px;
	background: #eef3ff;
	color: #315efb;
	font-size: 12.5px;
	font-weight: 700;
}

.ly-home-section--image-showcase .ly-biz-flow li strong,
.ly-home-section--trust .ly-biz-flow li strong { margin: 10px 0 6px; font-size: 15.5px; }
.ly-home-section--image-showcase .ly-biz-flow li p,
.ly-home-section--trust .ly-biz-flow li p { color: #46536a; font-size: 14px; line-height: 1.7; }

/* Trust points read as quiet pills inside the card. */
.ly-home-section--trust .ly-trust-points { margin-top: 18px; gap: 10px; }
.ly-home-section--trust .ly-trust-points li {
	justify-content: center;
	padding: 10px 14px;
	border: 1px solid rgba(15, 23, 42, 0.06);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.72);
	font-size: 13.5px;
}

/* Trailing reassurance line stays close to the flow. */
.ly-home-section--image-showcase .ly-section-heading__description:last-child { margin-top: 12px; }

@media (max-width: 900px) {
	.ly-home-section--image-showcase .ly-biz-flow,
	.ly-home-section--trust .ly-biz-flow { grid-template-columns: 1fr; }
	.ly-home-section--trust .ly-biz-flow::before { display: none; }
}

/* Mobile: trust points become a tidy 2x2 grid (no horizontal scroll). */
@media (max-width: 640px) {
	.ly-home-section--trust .ly-trust-points {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 9px;
	}
	.ly-home-section--trust .ly-trust-points li {
		padding: 10px 10px;
		font-size: 12.5px;
	}
}

@media (max-width: 760px) {
	.ly-home-section--image-showcase,
	.ly-home-section--trust { padding: 36px 0; }
	.ly-home-section--image-showcase > .ly-home-section__inner,
	.ly-home-section--trust > .ly-home-section__inner { border-radius: 22px; }
}