/**
 * Meridian Sections — Row List
 *
 * Figma 12:8289. Rule-separated rows, each a title and a meta line on the left
 * with a disc-and-label action on the right, closed by a note.
 *
 * Drawn as "Open Positions"; nothing here is about hiring.
 */

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

.md-rlist--ruled {
	border-block-end: var(--md-border-width, 1px) solid
		var(--md-color-rule, #ebebeb);
}

/* --- Rows ---------------------------------------------------------------- */
/*
 * The comp rules the top of the list and the bottom of every row, which comes to
 * a rule above and below each row with no doubling — so the last row keeps its
 * border rather than losing it as in most lists.
 */
.md-rlist__items {
	margin-block-start: 2.5rem; /* 40px */
	border-block-start: var(--md-border-width, 1px) solid
		var(--md-color-rule, #ebebeb);
}

.md-rlist__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--md-space-md, 1.5rem);
	padding-block: var(--md-space-md, 1.5rem) 1.5625rem; /* 24 / 25 */
	border-block-end: var(--md-border-width, 1px) solid
		var(--md-color-rule, #ebebeb);
}

.md-rlist__item:last-child {
	padding-block-end: var(--md-space-md, 1.5rem); /* the comp evens up the last */
}

.md-rlist__body {
	min-width: 0;
}

.md-rlist__title {
	margin: 0;
	color: var(--md-color-heading, #0a1628);
	font-family: var(--md-font-heading, "Cabin", sans-serif);
	font-size: 1rem; /* 16px */
	font-weight: var(--md-weight-bold, 700);
	line-height: 1.5; /* 24 / 16 */
}

.md-rlist__meta {
	margin: 0;
	margin-block-start: var(--md-space-3xs, 0.25rem); /* 4px */
	color: var(--md-color-text-muted, #6a7282);
	font-size: 0.8125rem; /* 13px */
	line-height: 1.5; /* 19.5 / 13 */
}

/* --- Action -------------------------------------------------------------- */
.md-rlist__action {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: var(--md-space-sm, 1rem); /* 16px */
	color: var(--md-blue, #006bb6);
	font-size: 0.8125rem; /* 13px */
	font-weight: var(--md-weight-semibold, 600);
	line-height: 1.5; /* 19.5 / 13 */
	text-decoration: none;
}

/* The disc geometry is .md-disc in sections.css; 34px with a 14px glyph here. */
.md-rlist__action .md-disc {
	--md-disc-size: 2.125rem; /* 34px */
	--md-disc-glyph: 0.875rem; /* 14px */
}

.md-rlist__action:hover .md-disc,
.md-rlist__action:focus-visible .md-disc {
	background-color: var(--md-blue-dark, #005893);
}

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

/* --- Note ---------------------------------------------------------------- */
.md-rlist__note {
	margin: 0;
	margin-block-start: var(--md-space-lg, 2rem); /* 32px */
	color: var(--md-color-text-muted, #6a7282);
	font-size: 0.875rem; /* 14px */
	line-height: 1.5; /* 21 / 14 */
}

.md-rlist__note-link {
	color: var(--md-blue, #006bb6);
	font-weight: var(--md-weight-semibold, 600);
	text-decoration: none;
}

.md-rlist__note-link:hover,
.md-rlist__note-link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

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

/* --- Stacked ------------------------------------------------------------- */
/* Side by side, a long title and the action fight for the same line, so below
 * the breakpoint the action drops under the copy. */
@media (max-width: 35.9375em) {
	.md-rlist__item {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--md-space-xs, 0.75rem);
	}
}

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