/**
 * Meridian Sections — Market Projects
 *
 * Figma 21:11504. Sticky market card beside a scrolling project list.
 */

/*
 * The comp's ground is the mirror of the market panels: tint and dot texture on
 * the feature side, white fading in over the list. Same 20px dot pitch, so it
 * reads as one family.
 */
.md-section.md-mp {
	padding-block: var(--md-section-pt, 3rem) var(--md-section-pb, 3rem);
	border-bottom: var(--md-border-width, 1px) solid #f0f0f0;
	background-color: #fcfdfd;
	background-image: linear-gradient(
			to right,
			rgba(255, 255, 255, 0) 0%,
			var(--md-white, #fff) 100%
		),
		radial-gradient(
			circle,
			var(--md-color-dot, rgba(10, 22, 40, 0.06)) 1.5px,
			transparent 1.5px
		);
	background-size: auto, var(--md-dot-pitch, 20px) var(--md-dot-pitch, 20px);
}

.md-mp__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--md-space-md, 1.5rem); /* 24px */
}

/* --- Shared card shell --------------------------------------------------- */
.md-mp__card {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 0.625rem; /* 10px */
	background-color: #364153;
	color: var(--md-white, #fff);
	text-decoration: none;
	isolation: isolate;
}

.md-mp__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

/*
 * Anchored on the media wrapper, not on the section: `.md-mp .md-mp__img` only
 * matched when an ancestor carried .md-mp, which the Project Explorer's section
 * never does — it is .md-explorer plus .md-mp--sticky, so the cards there lost
 * their object-fit and inherited Elementor's `height: auto`. .md-mp__media wraps
 * every one of these images in both widgets, and two classes still beat
 * `.elementor img` at (0,1,1).
 */
.md-mp__media .md-mp__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Bottom-up scrim so the copy stays legible over any photograph. */
.md-mp__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.85) 0%,
		rgba(0, 0, 0, 0.25) 50%,
		rgba(0, 0, 0, 0) 100%
	);
}

.md-mp__card--feature .md-mp__scrim {
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.9) 0%,
		rgba(0, 0, 0, 0.4) 50%,
		rgba(0, 0, 0, 0) 100%
	);
}

.md-mp__card-body {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	min-height: 100%;
}

/* --- Feature card -------------------------------------------------------- */
.md-mp__card--feature {
	min-height: 20rem; /* 320px, the comp's floor */
	background-color: #6a7282;
}

.md-mp__card--feature .md-mp__card-body {
	padding: var(--md-space-lg, 2rem); /* 32px */
	min-height: 24rem;
}

.md-mp__eyebrow {
	margin: 0;
	color: var(--md-yellow, #ecdd01);
	font-size: 0.625rem; /* 10px */
	font-weight: var(--md-weight-bold, 700);
	line-height: 1.5; /* 15px */
	letter-spacing: 0.22em; /* 2.2px on 10px */
	text-transform: uppercase;
}

.md-mp__title {
	margin: 0;
	margin-block-start: var(--md-space-xs, 0.75rem); /* 12px */
	color: var(--md-white, #fff);
	font-family: var(--md-font-heading, "Cabin", sans-serif);
	font-size: 1.875rem; /* 30px */
	font-weight: var(--md-weight-bold, 700);
	line-height: 1.25; /* 37.5 / 30 */
}

.md-mp__text {
	margin: 0;
	margin-block-start: var(--md-space-xs, 0.75rem); /* 12px */
	color: var(--md-white, #fff);
	/* 16px, not the 15px drawn — the site's body-copy floor. See --md-text-small. */
	font-size: var(--md-text-small, 1rem); /* 16px */
	line-height: 1.517; /* 24.27px — the ratio is unitless, so it followed the size up from the drawn 22.75 */
}

.md-mp__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--md-space-2xs, 0.5rem); /* 8px */
	margin-block-start: var(--md-space-md, 1.5rem); /* 24px */
	color: var(--md-white, #fff);
	font-size: 0.8125rem; /* 13px */
	font-weight: var(--md-weight-bold, 700);
	line-height: 1.5;
	text-decoration: none;
}

.md-mp__cta-disc,
.md-mp__disc {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	border-radius: var(--md-radius-pill, 999px);
	background-color: var(--md-blue, #006bb6);
	color: var(--md-white, #fff);
	transition: background-color var(--md-transition, 200ms ease),
		transform var(--md-transition, 200ms ease);
}

.md-mp__cta-disc {
	width: 1.75rem; /* 28px */
	height: 1.75rem;
}

.md-mp__cta-disc svg {
	width: 0.875rem; /* 14px */
	height: 0.875rem;
	fill: none;
}

.md-mp__cta:hover .md-mp__cta-disc,
.md-mp__cta:focus-visible .md-mp__cta-disc {
	background-color: var(--md-blue-dark, #005893);
	transform: translateX(2px);
}

.md-mp__cta:hover .md-mp__cta-label,
.md-mp__cta:focus-visible .md-mp__cta-label {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* --- Project cards ------------------------------------------------------- */
.md-mp__list {
	display: flex;
	flex-direction: column;
	gap: var(--md-space-md, 1.5rem); /* 24px */
	min-width: 0;
}

.md-mp__list-head {
	padding-block-end: 0.3125rem; /* 5px */
	border-bottom: var(--md-border-width, 1px) solid var(--md-green, #5dae71);
}

.md-mp__list-label {
	margin: 0;
	padding-block-end: var(--md-space-xs, 0.75rem); /* 12px */
	color: var(--md-green, #5dae71);
	font-size: 0.6875rem; /* 11px */
	font-weight: var(--md-weight-bold, 700);
	line-height: 1.5; /* 16.5px */
	letter-spacing: 0.18em; /* 1.98px on 11px */
	text-transform: uppercase;
}

.md-mp__card--project {
	min-height: 11.25rem; /* 180px floor */
}

/*
 * Featured Projects (1:1137) draws this same card at a smaller size: 20px
 * padding, a 15px title and a 36px disc rather than 24/17/40. The four values
 * that differ are custom properties defaulting to this comp's, so the other
 * widget re-sizes the card without redeclaring it and neither can drift.
 */
.md-mp__card--project .md-mp__card-body {
	/* Right padding leaves room for the arrow disc. */
	padding: var(--md-pc-pad, var(--md-space-md, 1.5rem)) 4rem
		var(--md-pc-pad, var(--md-space-md, 1.5rem))
		var(--md-pc-pad, var(--md-space-md, 1.5rem));
	min-height: var(--md-pc-body-min, 17.9375rem); /* 287px, the comp's height */
}

.md-mp__meta {
	margin: 0;
	color: var(--md-yellow, #ecdd01);
	font-size: 0.625rem; /* 10px */
	font-weight: var(--md-weight-bold, 700);
	line-height: 1.5; /* 15px */
	letter-spacing: 0.2em; /* 2px on 10px */
	text-transform: uppercase;
}

.md-mp__project-title {
	margin: 0;
	margin-block-start: var(--md-pc-title-gap, 0.625rem); /* 10px */
	color: var(--md-white, #fff);
	font-family: var(--md-font-heading, "Cabin", sans-serif);
	font-size: var(--md-pc-title, 1.0625rem); /* 17px */
	font-weight: var(--md-weight-bold, 700);
	line-height: 1.375; /* 23.375 / 17 */
}

.md-mp__sub {
	margin: 0;
	margin-block-start: 0.375rem; /* 6px */
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.75rem; /* 12px */
	line-height: 1.5; /* 18px */
}

.md-mp__disc {
	position: absolute;
	inset-block-end: var(--md-pc-pad, var(--md-space-md, 1.5rem));
	inset-inline-end: var(--md-pc-pad, var(--md-space-md, 1.5rem));
	width: var(--md-pc-disc, 2.5rem); /* 40px */
	height: var(--md-pc-disc, 2.5rem);
}

.md-mp__disc svg {
	width: 1rem; /* 16px */
	height: 1rem;
	fill: none;
}

.md-mp__card--project:hover .md-mp__disc,
.md-mp__card--project:focus-visible .md-mp__disc {
	background-color: var(--md-blue-dark, #005893);
	transform: translateX(2px);
}

.md-mp__card--project:hover .md-mp__project-title {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.md-mp__empty {
	margin: 0;
	padding-block: var(--md-space-2xl, 4rem);
	color: var(--md-color-text-muted, rgba(10, 22, 40, 0.7));
	text-align: center;
}

/* --- Two-up and stickiness ---------------------------------------------- */
@media (min-width: 62em) {
	.md-mp__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		/*
		 * start, not the default stretch. A stretched grid item fills the whole
		 * row, which leaves a sticky element nothing to travel within — this one
		 * declaration is what makes the feature card able to stick at all. The
		 * comp specifies the same via self-start on both columns.
		 */
		align-items: start;
	}

	.md-mp--flipped .md-mp__feature {
		grid-column: 2;
		grid-row: 1;
	}

	.md-mp--sticky .md-mp__feature {
		position: sticky;
		/* Clear the fixed site header, plus a little breathing room. */
		top: calc(var(--md-header-total, 5.0625rem) + var(--md-space-md, 1.5rem));
	}
}

@media (prefers-reduced-motion: reduce) {
	.md-mp__cta-disc,
	.md-mp__disc {
		transition: none;
	}
}