/* MCW Service Preview — isolated under .mcw-srv-wrapper */

.mcw-srv-wrapper .mcw-srv__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	width: 100%;
}

.mcw-srv-wrapper .mcw-srv__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 16px;
	padding: 40px 32px;
	background: #FFFFFF;
	border: 1px solid var(--mcw-border);
	border-radius: var(--mcw-radius-lg);
	text-decoration: none !important;
	color: inherit !important;
	cursor: default;
	transition: transform var(--mcw-base), border-color var(--mcw-base), box-shadow var(--mcw-base), background-color var(--mcw-base);
	will-change: transform;
	position: relative;
	overflow: hidden;
}

a.mcw-srv-wrapper .mcw-srv__card,
.mcw-srv-wrapper a.mcw-srv__card { cursor: pointer; }

/* Subtle top accent line on hover */
.mcw-srv-wrapper .mcw-srv__card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--mcw-primary);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--mcw-base);
}

.mcw-srv-wrapper .mcw-srv__card:hover::before { transform: scaleX(1); }

.mcw-srv-wrapper .mcw-srv__card:hover {
	transform: translateY(-6px);
	border-color: var(--mcw-primary);
	box-shadow: var(--mcw-shadow-lg);
}

.mcw-srv-wrapper .mcw-srv__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	color: var(--mcw-primary);
	background: var(--mcw-primary-soft);
	border-radius: 50%;
	transition: transform var(--mcw-base), background-color var(--mcw-base);
}

.mcw-srv-wrapper .mcw-srv__icon i,
.mcw-srv-wrapper .mcw-srv__icon svg { font-size: 32px; width: 32px; height: 32px; }

.mcw-srv-wrapper .mcw-srv__grid .mcw-srv__card:hover .mcw-srv__icon {
	transform: scale(1.08) rotate(-4deg);
	background: var(--mcw-primary) !important;
	color: #FFFFFF !important;
}

/* =====================================================================
   AGGRESSIVE icon white-on-hover override.
   Some SVG icons ship with a hard-coded fill="#000" / fill="#212121"
   that ignores CSS color. We force fill on every drawable SVG element
   while preserving fill="none" outlines.
   ===================================================================== */
.mcw-srv-wrapper .mcw-srv__grid .mcw-srv__card:hover .mcw-srv__icon,
.mcw-srv-wrapper .mcw-srv__grid .mcw-srv__card:hover .mcw-srv__icon * {
	color: #FFFFFF !important;
}

.mcw-srv-wrapper .mcw-srv__grid .mcw-srv__card:hover .mcw-srv__icon svg,
.mcw-srv-wrapper .mcw-srv__grid .mcw-srv__card:hover .mcw-srv__icon svg path,
.mcw-srv-wrapper .mcw-srv__grid .mcw-srv__card:hover .mcw-srv__icon svg circle,
.mcw-srv-wrapper .mcw-srv__grid .mcw-srv__card:hover .mcw-srv__icon svg rect,
.mcw-srv-wrapper .mcw-srv__grid .mcw-srv__card:hover .mcw-srv__icon svg polygon,
.mcw-srv-wrapper .mcw-srv__grid .mcw-srv__card:hover .mcw-srv__icon svg ellipse,
.mcw-srv-wrapper .mcw-srv__grid .mcw-srv__card:hover .mcw-srv__icon svg g,
.mcw-srv-wrapper .mcw-srv__grid .mcw-srv__card:hover .mcw-srv__icon svg use {
	fill: #FFFFFF !important;
}

/* Preserve "no fill" outlines; only swap their stroke */
.mcw-srv-wrapper .mcw-srv__grid .mcw-srv__card:hover .mcw-srv__icon svg [fill="none"] {
	fill: none !important;
	stroke: #FFFFFF !important;
}

.mcw-srv-wrapper .mcw-srv__grid .mcw-srv__card:hover .mcw-srv__icon svg [stroke]:not([stroke="none"]) {
	stroke: #FFFFFF !important;
}

/* Font Awesome <i> icons */
.mcw-srv-wrapper .mcw-srv__grid .mcw-srv__card:hover .mcw-srv__icon i,
.mcw-srv-wrapper .mcw-srv__grid .mcw-srv__card:hover .mcw-srv__icon i::before {
	color: #FFFFFF !important;
}

.mcw-srv-wrapper .mcw-srv__title {
	margin: 4px 0 0 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--mcw-text) !important;
	letter-spacing: -0.01em;
}

.mcw-srv-wrapper .mcw-srv__desc {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--mcw-text-muted) !important;
}

.mcw-srv-wrapper .mcw-srv__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--mcw-primary) !important;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity var(--mcw-base), transform var(--mcw-base);
}

.mcw-srv-wrapper .mcw-srv__card:hover .mcw-srv__more {
	opacity: 1;
	transform: translateY(0);
}

.mcw-srv-wrapper .mcw-srv__more svg {
	transition: transform var(--mcw-base);
}

.mcw-srv-wrapper .mcw-srv__card:hover .mcw-srv__more svg { transform: translateX(4px); }

@media (max-width: 1024px) {
	.mcw-srv-wrapper .mcw-srv__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.mcw-srv-wrapper .mcw-srv__grid { grid-template-columns: 1fr; gap: 16px; }
	.mcw-srv-wrapper .mcw-srv__card { padding: 32px 24px; }
}

@media (prefers-reduced-motion: reduce) {
	.mcw-srv-wrapper .mcw-srv__card,
	.mcw-srv-wrapper .mcw-srv__icon { transition: none !important; transform: none !important; }
}