/*--------------------------------------------------------------
# Elementor widget: Icon Cards
# Figma: Wireframes > Frame 42 node 583:3691 (desktop), 583:3877 (mobile)
--------------------------------------------------------------*/
.mwc-icon-cards {
	--ic-green: #12271D; /* Secondary/Dark Green */
	--ic-text: #5B6157;  /* Secondary/Text Green */

	padding: 64px 20px;
	font-family: var(--font-sans, "Open Sans", sans-serif);
}
.mwc-icon-cards__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	max-width: 1160px;
	margin: 0 auto;
}
/* Header: alignment comes from the Text Alignment control (default center). */
.mwc-icon-cards__header {
	display: flex;
	flex-direction: column;
	gap: 12px; /* Figma 16/24px, measured on trimmed text boxes */
	width: 100%;
	text-align: center;
}
.mwc-icon-cards .mwc-icon-cards__eyebrow {
	margin: 0;
	color: #8F5F17; /* Accent/Amber on Lg Bg */
	font-family: var(--font-sans, "Open Sans", sans-serif);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}
.mwc-icon-cards .mwc-icon-cards__title {
	margin: 0;
	color: var(--ic-green);
	font-family: inherit;
	font-stretch: 75%;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2 !important;
	letter-spacing: 0;
	text-align: inherit;
	text-transform: none;
}
.mwc-icon-cards--has-intro .mwc-icon-cards__title {
	font-size: 28px; /* Desktop/H4 */
}
.mwc-icon-cards .mwc-icon-cards__intro {
	margin: 4px 0 0;
	color: var(--ic-text);
	font-family: var(--font-sans, "Open Sans", sans-serif);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
}

/* Grid */
.mwc-icon-cards__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	width: 100%;
}

/* Card */
.mwc-icon-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	padding: 24px;
	overflow: hidden;
	background: #FFFFFF;
	border: 1px solid var(--cream, #F7F4EA);
	border-radius: 8px;
	box-shadow: 0 10px 24px rgba(27, 58, 43, 0.08);
}
.mwc-icon-card__badge {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
}
.mwc-icon-card__badge--cream { background: var(--cream, #F7F4EA); }
.mwc-icon-card__badge--blue  { background: #E6F1FB; } /* Functional/Focus Background */
.mwc-icon-card__badge--amber { background: #FBEEDD; } /* Functional/Warning Background */
.mwc-icon-card__badge--green { background: #E9F7EF; } /* Functional/Success Background */
.mwc-icon-card__icon {
	display: block;
	width: 36px;
	height: 36px;
	max-width: none;
	object-fit: contain;
}

/* Figma's 16px gap is measured on trimmed text boxes; 8px matches visually. */
.mwc-icon-card__text {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}
.mwc-icon-cards .mwc-icon-card__title {
	margin: 0;
	color: var(--ic-green);
	font-family: var(--font-sans, "Open Sans", sans-serif);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3 !important;
	letter-spacing: 0;
	text-transform: none;
}
.mwc-icon-cards .mwc-icon-card__description {
	margin: 0;
	color: var(--ic-text);
	font-family: var(--font-sans, "Open Sans", sans-serif);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
}

/* Direction arrows (Figma 583:3432): cards read as steps. On desktop the
   arrow sits top-right, level with the icon; on mobile it points down in
   the gap between stacked cards. */
.mwc-icon-cards--arrows .mwc-icon-cards__grid {
	gap: 16px;
}
.mwc-icon-cards--arrows .mwc-icon-card {
	position: relative;
	overflow: visible;
	transition: box-shadow 0.25s ease;
}
/* Figma marks the hover shadow (cards aren't links). */
.mwc-icon-cards--arrows .mwc-icon-card:hover {
	box-shadow: 0 12px 20px rgba(27, 58, 43, 0.2); /* Card Shadow - Hover */
}
.mwc-icon-card__arrow {
	position: absolute;
	top: 24px;
	right: 24px;
	display: flex;
	align-items: center;
	height: 60px; /* badge height, so the arrow centres on the icon */
	padding: 0 8px;
	color: #8F5F17; /* Accent/Amber on Lg Bg; #DF8F17 is 2.6:1 on white (WCAG 1.4.11 needs 3:1) */
}
.mwc-icon-card__arrow svg {
	display: block;
	width: 24px;
	height: 24px;
}

@media (prefers-reduced-motion: reduce) {
	.mwc-icon-cards--arrows .mwc-icon-card {
		transition: none;
	}
}

@media screen and (max-width: 1024px) {
	.mwc-icon-cards__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Mobile (Figma node 583:3877): one column, icon beside the text. */
@media screen and (max-width: 600px) {
	.mwc-icon-cards {
		padding: 48px 16px;
	}
	.mwc-icon-cards .mwc-icon-cards__title {
		font-size: 22px;
	}
	.mwc-icon-cards__grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.mwc-icon-card {
		flex-direction: row;
		gap: 16px;
	}
	.mwc-icon-card__text {
		flex: 1 1 0;
	}

	/* Mobile (Figma node 583:3939) */
	.mwc-icon-cards--has-intro .mwc-icon-cards__title {
		font-size: 26px; /* Mobile/H4 */
	}
	.mwc-icon-cards--arrows .mwc-icon-cards__grid {
		gap: 44px; /* 36px arrow + 4px above and below */
	}
	.mwc-icon-card__arrow {
		top: calc(100% + 4px);
		right: auto;
		left: 50%;
		height: 36px;
		padding: 0;
		transform: translateX(-50%) rotate(90deg);
	}
}