/**
 * About #about-brands — production-safe (文字字标 + hover 彩标).
 * Matches Elementor custom CSS from _rebuild_about_brands.php.
 * Do NOT use style.css badge/shield WIP here.
 */

.elementor-3127 #about-brands > .e-con-inner {
	--padding-top: 0px !important;
	--padding-right: 0px !important;
	--padding-bottom: 0px !important;
	--padding-left: 0px !important;
}

#about-brands {
	border-top: 1px solid rgba(27, 50, 96, 0.08);
	border-bottom: 1px solid rgba(27, 50, 96, 0.08);
	background: #ffffff;
}

#about-brands .about-brands-head {
	padding-left: 16px !important;
	border-left: 3px solid #2777f2;
}

#about-brands .about-brand-grid {
	display: grid !important;
	grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
	gap: 12px 16px !important;
	align-items: center !important;
	justify-items: center !important;
}

#about-brands .about-brand-cell {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 52px;
	width: 100%;
	overflow: visible;
	background: transparent !important;
	clip-path: none !important;
	filter: none !important;
	cursor: default;
}

/* Compound color marks — cell-level hover scale (must load after base cell rule). */
#about-brands .about-brand-cell--supermicro,
#about-brands .about-brand-cell--huawei {
	--about-brand-scale: 1.42;
}

#about-brands .about-brand-cell--sun,
#about-brands .about-brand-cell--fujitsu,
#about-brands .about-brand-cell--cisco,
#about-brands .about-brand-cell--f5 {
	--about-brand-scale: 1.28;
}

#about-brands .about-brand-cell > .e-con-inner {
	display: contents;
}

/* Badge ribbon is local Hero WIP only — hide on live text+hover brands. */
#about-brands .about-brand-ribbon {
	display: none !important;
}

/* Default: text wordmark */
#about-brands .about-brand-word.elementor-widget {
	position: relative !important;
	z-index: 1;
	width: 136px !important;
	max-width: 100%;
	height: auto !important;
	margin: 0 auto !important;
	opacity: 0.9 !important;
	visibility: visible !important;
	filter: blur(0) !important;
	transform: none !important;
	transition:
		opacity 0.34s ease,
		filter 0.34s ease,
		transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hover: color mark */
#about-brands .about-brand-mark.elementor-widget {
	position: absolute !important;
	top: 50%;
	left: 50%;
	z-index: 2;
	width: 136px !important;
	height: 36px !important;
	margin: 0 !important;
	transform: translate(-50%, -50%) scale(calc(var(--about-brand-scale, 1) * 0.92)) rotate(-10deg) !important;
	filter: blur(2px) !important;
	opacity: 0 !important;
	visibility: visible !important;
	pointer-events: none;
	transition:
		opacity 0.34s ease,
		filter 0.34s ease,
		transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

#about-brands .about-brand-word .elementor-widget-container,
#about-brands .about-brand-mark .elementor-widget-container {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 136px !important;
	height: 36px !important;
	margin: 0 auto !important;
	line-height: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
}

#about-brands .about-brand-word img {
	width: 136px !important;
	height: 36px !important;
	max-width: 136px !important;
	max-height: 36px !important;
	margin: 0 auto !important;
	display: block !important;
	object-fit: contain !important;
	object-position: center center !important;
}

/* Hover color mark — per-slug height/scale in ss-about-brands-optical.css */
#about-brands .about-brand-mark img {
	width: auto !important;
	max-width: 136px !important;
	margin: 0 auto !important;
	display: block !important;
	object-fit: contain !important;
	object-position: center center !important;
}

#about-brands .about-brand-cell:hover .about-brand-word,
#about-brands .about-brand-cell:focus-within .about-brand-word {
	opacity: 0 !important;
	filter: blur(1.5px) !important;
	transform: scale(calc(var(--about-brand-scale, 1) * 1.02)) rotate(6deg) !important;
}

#about-brands .about-brand-cell:hover .about-brand-mark,
#about-brands .about-brand-cell:focus-within .about-brand-mark {
	opacity: 1 !important;
	filter: blur(0) !important;
	transform: translate(-50%, -50%) scale(var(--about-brand-scale, 1)) rotate(0deg) !important;
}

@media (max-width: 1024px) {
	#about-brands .about-brand-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 767px) {
	#about-brands .about-brand-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	#about-brands .about-brand-word,
	#about-brands .about-brand-mark {
		transition: opacity 0.15s ease;
		filter: none !important;
	}
	#about-brands .about-brand-word {
		transform: none !important;
	}
	#about-brands .about-brand-mark {
		transform: translate(-50%, -50%) scale(var(--about-brand-scale, 1)) !important;
	}
}