/*--------------------------------------------------------------
# Elementor widget: Info Section Cards
# Figma: Wireframes > Section node 583:3654
# Card 1 = default state, cards 2-4 = hover state.
--------------------------------------------------------------*/
.mwc-info-cards {
	--info-amber: #8F5F17; /* Accent/Amber on Lg Bg */
	--info-green: #12271D; /* Secondary/Dark Green */
	--info-text: #5B6157;  /* Secondary/Text Green */
	--info-ease: cubic-bezier(0.22, 1, 0.36, 1);

	padding: 80px 20px 100px;
	background: var(--cream, #F7F4EA);
	font-family: var(--font-sans, "Open Sans", sans-serif);
}
.mwc-info-cards__inner {
	display: flex;
	flex-direction: column;
	gap: 44px;
	max-width: 1160px;
	margin: 0 auto;
}

/* Header */
.mwc-info-cards__header {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 1096px;
	margin: 0 auto;
	text-align: center;
}
.mwc-info-cards .mwc-info-cards__eyebrow {
	margin: 0;
	color: var(--info-amber);
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}
.mwc-info-cards .mwc-info-cards__title {
	margin: 0;
	color: var(--info-green);
	font-family: inherit;
	font-stretch: 75%;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.1 !important;
	letter-spacing: 0;
	text-transform: none;
}
.mwc-info-cards .mwc-info-cards__intro {
	margin: 0;
	color: var(--info-text);
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
}

/* Grid */
.mwc-info-cards__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

/* Card */
.mwc-info-card {
	position: relative;
	display: flex;
	align-items: flex-end;
	height: 280px;
	padding: 24px;
	overflow: hidden;
	border-radius: 8px;
	box-shadow: 0 10px 24px rgba(27, 58, 43, 0.08);
	color: #FFFFFF;
	text-decoration: none;
	isolation: isolate;
}
/* Linked cards render as <a>: neutralise the theme's global a {} rule and
   Elementor's ".elementor-kit-### a" link styles so they match unlinked cards. */
.mwc-info-cards a.mwc-info-card,
.mwc-info-cards a.mwc-info-card:link,
.mwc-info-cards a.mwc-info-card:visited,
.mwc-info-cards a.mwc-info-card:hover,
.mwc-info-cards a.mwc-info-card:focus,
.mwc-info-cards a.mwc-info-card:active {
	color: #FFFFFF;
	font-family: var(--font-sans, "Open Sans", sans-serif);
	font-weight: 400;
	letter-spacing: 0;
	text-decoration: none;
}
.mwc-info-cards a.mwc-info-card:focus-visible {
	outline: 3px solid #1B3A2B; /* amber was 2.4-2.6:1 on the light background; WCAG needs 3:1 */
	outline-offset: 3px;
}
/* Elementor's ".elementor a { box-shadow: none }" would strip the shadow
   from linked cards. */
.mwc-info-cards a.mwc-info-card {
	box-shadow: 0 10px 24px rgba(27, 58, 43, 0.08);
}
.mwc-info-cards a.mwc-info-card:hover,
.mwc-info-cards a.mwc-info-card:focus-visible {
	box-shadow: 0 10px 12px rgba(27, 58, 43, 0.08);
}
/* Scoped to beat Elementor's ".elementor img { height: auto }" so the photo
   always fills the card. (object-position comes from the Image Position control.) */
.mwc-info-cards .mwc-info-card img.mwc-info-card__image {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
}
.mwc-info-card__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(18, 39, 29, 0) 0%, rgba(18, 39, 29, 0.3) 75.224%, rgba(18, 39, 29, 0.9) 100%);
	transition: opacity 0.35s ease;
}
.mwc-info-card__overlay--hover {
	opacity: 0;
	background: linear-gradient(180deg, rgba(18, 39, 29, 0.25) 25.468%, rgba(18, 39, 29, 0.9) 59.835%, rgba(18, 39, 29, 0.95) 100%);
}

.mwc-info-card__content {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
}
.mwc-info-cards .mwc-info-card__title {
	margin: 0;
	color: #FFFFFF;
	font-family: var(--font-sans, "Open Sans", sans-serif);
	font-stretch: 75%;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.1 !important;
	letter-spacing: 0;
	text-transform: none;
}

/* Revealed on hover: description + call to action */
.mwc-info-card__reveal {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows 0.35s var(--info-ease), opacity 0.25s ease;
}
.mwc-info-card__reveal-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	min-height: 0;
	overflow: hidden;
}
/* Spacer for the 16px title gap, collapsed with the rest. */
.mwc-info-card__reveal-inner::before {
	content: "";
	display: block;
	height: 0;
	margin-bottom: -16px;
	margin-top: 16px;
}
.mwc-info-cards .mwc-info-card__description {
	margin: 0;
	color: rgba(255, 255, 255, 0.82);
	font-family: var(--font-sans, "Open Sans", sans-serif);
	letter-spacing: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
}
.mwc-info-cards .mwc-info-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 0 5px;
	border-radius: 4px;
	color: #FFFFFF;
	font-family: var(--font-sans, "Open Sans", sans-serif);
	font-stretch: 75%;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.5px;
	white-space: nowrap;
}
.mwc-info-card__cta img {
	display: block;
	width: 24px;
	height: 24px;
	transition: transform 0.25s ease;
}

/* Hover / keyboard focus state */
.mwc-info-card:hover,
.mwc-info-card:focus-visible {
	box-shadow: 0 10px 12px rgba(27, 58, 43, 0.08);
}
.mwc-info-card:hover .mwc-info-card__overlay--hover,
.mwc-info-card:focus-visible .mwc-info-card__overlay--hover {
	opacity: 1;
}
.mwc-info-card:hover .mwc-info-card__reveal,
.mwc-info-card:focus-visible .mwc-info-card__reveal {
	grid-template-rows: 1fr;
	opacity: 1;
}
.mwc-info-card:hover .mwc-info-card__cta img,
.mwc-info-card:focus-visible .mwc-info-card__cta img {
	transform: translateX(3px);
}

/* Unlinked cards can't receive keyboard focus, so hover-only content would be
   unreachable for keyboard users (WCAG 2.1.1 / 1.4.13): always show it. */
.mwc-info-card--static .mwc-info-card__overlay--hover {
	opacity: 1;
}
.mwc-info-card--static .mwc-info-card__reveal {
	grid-template-rows: 1fr;
	opacity: 1;
}

/* Touch screens have no hover: always show the revealed state. */
@media (hover: none) {
	.mwc-info-card .mwc-info-card__overlay--hover {
		opacity: 1;
	}
	.mwc-info-card .mwc-info-card__reveal {
		grid-template-rows: 1fr;
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mwc-info-card__overlay,
	.mwc-info-card__reveal,
	.mwc-info-card__cta img {
		transition: none;
	}
}

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

@media screen and (max-width: 768px) {
	.mwc-info-cards {
		padding: 56px 16px 64px;
	}
	.mwc-info-cards__inner {
		gap: 32px;
	}
	.mwc-info-cards .mwc-info-cards__title {
		font-size: 28px;
	}
}

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