/**
 * Meridian Sections — Project Explorer
 *
 * The selector from Figma 21:11410. The market sections below it are styled by
 * market-projects.css, declared as a dependency so the standalone widget and
 * this one cannot drift apart.
 */

.md-section.md-explorer {
	padding-block: var(--md-section-pt, 3rem) var(--md-section-pb, 0);
	background-color: var(--md-white, #fff);
}

/* --- Selector ------------------------------------------------------------ */
.md-filter__rows {
	display: flex;
	flex-direction: column;
	gap: var(--md-space-xs, 0.75rem); /* 12px between rows */
	padding-block-end: var(--md-space-xl, 3rem);
}

.md-filter__row {
	display: flex;
	align-items: flex-start;
	gap: var(--md-space-xs, 0.75rem);
}

.md-filter__label {
	flex: none;
	width: 7rem; /* 112px — the comp's label column */
	margin: 0;
	padding-block-start: 0.375rem; /* 6px, to sit on the pills' text baseline */
	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.14em; /* 1.54px on 11px */
	text-transform: uppercase;
}

.md-filter__pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--md-space-2xs, 0.5rem); /* 8px */
}

.md-filter__pill {
	padding: 0.3125rem 0.8125rem; /* 5 / 13 */
	border: var(--md-border-width, 1px) solid #ccc;
	border-radius: var(--md-radius-pill, 999px);
	background-color: var(--md-white, #fff);
	color: var(--md-color-text-body, #364153);
	font-size: 0.75rem; /* 12px */
	font-weight: var(--md-weight-semibold, 600);
	line-height: 1.5; /* 18px */
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--md-transition, 200ms ease),
		border-color var(--md-transition, 200ms ease),
		background-color var(--md-transition, 200ms ease);
}

.md-filter__pill:hover,
.md-filter__pill:focus-visible {
	border-color: var(--md-blue, #006bb6);
	color: var(--md-blue, #006bb6);
}

/*
 * The comp only draws the resting state, so the selected treatment follows the
 * markets nav — solid brand blue — to stay consistent with the other pill row
 * on the site.
 */
.md-filter__pill.is-active {
	border-color: var(--md-blue, #006bb6);
	background-color: var(--md-blue, #006bb6);
	color: var(--md-white, #fff);
}

.md-filter__pill.is-active:hover,
.md-filter__pill.is-active:focus-visible {
	border-color: var(--md-blue-dark, #005893);
	background-color: var(--md-blue-dark, #005893);
	color: var(--md-white, #fff);
}

/* --- Reset --------------------------------------------------------------- */
/*
 * Not in the comp. Deliberately not a pill: it does not select anything, and
 * dressing it as one would put a fifth thing in a row of things that toggle.
 * A text link reads as the action it is.
 */
.md-filter__row--actions {
	/*
	 * Aligns with the pills rather than the labels — 112px label column plus the
	 * row's own 12px gap. A padding rather than an empty label element, because an
	 * element that exists only to occupy a grid slot is markup for layout.
	 */
	padding-inline-start: 7.75rem; /* 7rem + 0.75rem */
}

/*
 * Scoped through the row, at (0,2,0), rather than styled on the class alone.
 * Elementor's frontend.min.css ships `.elementor a { text-decoration: none }` at
 * (0,1,1), which beat a bare `.md-filter__clear` at (0,1,0) and silently dropped
 * the underline — the same trap `.elementor img` sets for image rules. Measured,
 * not assumed: the underline computed as `none` in the browser while the served
 * stylesheet plainly asked for it.
 */
.md-filter__row--actions .md-filter__clear {
	/*
	 * The negative inline margin cancels the padding for layout, so the link's
	 * text still starts flush with the pills above it while its hit area covers a
	 * comfortable box: 13px text on 18px leading is a 18px target, under WCAG
	 * 2.2's 24px floor, and the padding takes it to 34px.
	 */
	margin-inline: -0.5rem;
	padding: 0.5rem;
	color: var(--md-blue, #006bb6);
	font-size: 0.8125rem; /* 13px */
	font-weight: var(--md-weight-semibold, 600);
	line-height: 1.385; /* 18px */
	/*
	 * Underlined at rest, not only on hover. It is the one control in this block
	 * that is not a pill, so its affordance cannot come from a border the way the
	 * pills' does — and colour alone would fail WCAG 1.4.1.
	 */
	text-decoration: underline;
	text-underline-offset: 0.2em;
	transition: color var(--md-transition, 200ms ease);
}

.md-filter__row--actions .md-filter__clear:hover,
.md-filter__row--actions .md-filter__clear:focus-visible {
	color: var(--md-blue-dark, #005893);
}

/* --- Intro statement ----------------------------------------------------- */
/*
 * Figma 21:11494, nested here. Typography comes from intro-statement.css; this
 * is only the chrome the explorer owns.
 *
 * The rule spans the content column rather than the viewport: in the comp each
 * band is its own full-width section, but nested inside the explorer's container
 * a full-bleed border is not reachable without a 100vw trick that breaks on a
 * scrollbar. Content width is also the better line — it aligns with the pills
 * above and the market cards below.
 *
 * 16px on top lands the heading 64px under the pills, as drawn:
 * .md-filter__rows already contributes 48px of its own. 64px below matches the
 * comp's band, and the first market block adds its own top padding beneath it.
 */
.md-explorer__intro {
	padding-block: var(--md-space-sm, 1rem) var(--md-space-2xl, 4rem);
	border-block-end: var(--md-border-width, 1px) solid
		var(--md-color-rule, #ebebeb);
}

/* --- Results ------------------------------------------------------------- */
.md-filter__empty {
	margin: 0;
	padding-block: var(--md-space-2xl, 4rem);
	color: var(--md-color-text-muted, rgba(10, 22, 40, 0.7));
	font-size: var(--md-text-lead, 1.25rem);
	text-align: center;
}

/* Dim the grid while a fetch is in flight so a slow response is visible
 * without the layout moving. */
.md-filter__results[aria-busy="true"] {
	opacity: 0.55;
	transition: opacity var(--md-transition, 200ms ease);
}

.md-filter__notice {
	margin: 0;
	padding: var(--md-space-md, 1.5rem);
	border: var(--md-border-width, 1px) dashed var(--md-color-border, #d9dde3);
	border-radius: var(--md-radius-md, 0.5rem);
	color: var(--md-color-text-muted, rgba(10, 22, 40, 0.7));
	text-align: center;
}

/* --- Stacked ------------------------------------------------------------- */
/*
 * Without this the `hidden` attribute does nothing. The UA sheet's
 * `[hidden] { display: none }` loses to any author `display` — priority, not
 * specificity — and .md-filter__pills sets `display: flex` above, so the
 * accordion would toggle an attribute that changed nothing at all.
 */
.md-filter__pills[hidden] {
	display: none;
}

@media (max-width: 47.9375em) {
	/*
	 * Figma 143:61527 (closed) and 145:23 (open). The 112px label column leaves
	 * too little room for pills on a phone, so each row becomes a band: the label
	 * on its own line above its pills, with a rule beneath it.
	 */
	.md-filter__row {
		flex-direction: column;
		gap: var(--md-space-xs, 0.75rem); /* 12px in the comp */
		padding-block: 1.25rem; /* 20px in the comp */
		border-block-end: var(--md-border-width, 1px) solid
			var(--md-color-rule, #ebebeb);
	}

	/*
	 * The rows are their own bands now, so the gap between them would double the
	 * rule's breathing room. The last rule is dropped because the selector as a
	 * whole already closes with one.
	 */
	.md-filter__rows {
		gap: 0;
	}

	.md-filter__row:last-child {
		border-block-end: 0;
	}

	.md-filter__label {
		width: auto;
		padding-block-start: 0;
		/* 2.42px on 11px, wider than the desktop row's 1.54px. */
		letter-spacing: 0.22em;
	}

	/*
	 * The label becomes the accordion's button, added by the script. Stripped back
	 * to look exactly like the <p> it replaced, but full width so the whole row is
	 * the tap target rather than just the words.
	 */
	/*
	 * Resets the button chrome and nothing else. It deliberately does NOT set
	 * color, letter-spacing or `font` — the button carries .md-filter__label too,
	 * both rules weigh (0,1,0), and this one comes later, so `inherit` here beat
	 * the label's own green and 0.22em and the row rendered in body colour at
	 * normal tracking. Only font-family is inherited, because that is the one
	 * property the label does not state and a button would otherwise take from the
	 * UA.
	 */
	.md-filter__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		border: 0;
		background: none;
		font-family: inherit;
		text-align: start;
		cursor: pointer;
		/*
		 * The label is a 17px line, which is far too small a target for a thumb —
		 * under the 24px WCAG 2.2 minimum, never mind comfortable. The negative
		 * margin cancels the padding for layout purposes, so the row still measures
		 * and sits exactly as the comp draws it while the button's hit area covers
		 * the row's full 20px padding: 57px tall, edge to edge.
		 */
		margin-block: -1.25rem;
		padding-block: 1.25rem;
		padding-inline: 0;
	}

	/*
	 * The comp draws no open/closed indicator at all. One is added because a row
	 * that collapses with nothing to say so is not discoverable — it is the
	 * theme's own chevron, rotated when open, and hidden from assistive tech since
	 * aria-expanded already carries the state.
	 */
	.md-filter__toggle::after {
		content: "";
		flex: none;
		width: 0.5rem;
		height: 0.5rem;
		margin-inline-start: var(--md-space-2xs, 0.5rem);
		border-inline-end: 1.5px solid currentColor;
		border-block-end: 1.5px solid currentColor;
		transform: rotate(45deg) translateY(-0.0625rem);
		transition: transform var(--md-transition, 200ms ease);
	}

	.md-filter__row.is-open .md-filter__toggle::after {
		transform: rotate(225deg) translateY(-0.0625rem);
	}

	/*
	 * The label sits above its pills in a band here rather than in a 112px
	 * column, so there is no column to clear.
	 */
	.md-filter__row--actions {
		padding-inline-start: 0;
	}

	/* The mobile comp draws slightly larger pills than the desktop row. */
	.md-filter__pill {
		padding: 0.375rem 0.875rem; /* 6 / 14 */
		font-size: 0.8125rem; /* 13px */
	}
}

/* --- Market sections ----------------------------------------------------- */
/*
 * Each market block sits directly on the explorer's own ground, so the section
 * chrome market-projects.css gives a standalone instance is dropped here.
 */
.md-explorer__market {
	padding-block: var(--md-space-xl, 3rem);
	/* Same tinted, dotted ground the standalone section carries: white fading
	 * over the project list, tint and dots behind the market card. */
	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-explorer__market + .md-explorer__market {
	border-top: var(--md-border-width, 1px) solid var(--md-color-rule, #f0f0f0);
}

@media (min-width: 62em) {
	/* Zig-zag is opt-in; the comp keeps every market card on the left. */
	.md-explorer--alternate .md-explorer__market:nth-of-type(even) .md-mp__feature {
		grid-column: 2;
		grid-row: 1;
	}

	/* When the card moves right, the white wash has to move with it or the
	 * tint would sit behind the copy instead of behind the image. */
	.md-explorer--alternate .md-explorer__market:nth-of-type(even) {
		background-image: linear-gradient(
				to left,
				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
			);
	}
}