/**
 * Meridian Sections — Differentiators
 *
 * Figma 1:960. A brand-blue band of value propositions separated by vertical
 * white rules. The comp's two background gradients resolve to a flat
 * #006BB6 — there is no texture behind them.
 */

/* Two classes so this beats .md-section's own responsive padding, which steps
 * up to 120px above 768px. The comp is a flat 80px. */
.md-section.md-differentiators {
	/* Padding comes from the Padding Top/Bottom controls; the fallback is the
	 * comp's 80px and remains the default when they are untouched. */
	padding-block: var(--md-section-pt, 5rem) var(--md-section-pb, 5rem);
	background-color: var(--md-blue, #006bb6);
	color: var(--md-white, #fff);
}

.md-differentiators__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.md-differentiator__icon {
	/* .md-icon sizes itself from this, so no specificity contest. */
	--md-icon-size: 1.75rem; /* 28px */

	color: var(--md-yellow, #ecdd01);
}

.md-differentiator__icon svg {
	fill: none;
}

/* An uploaded image replaces the brand SVG. Height is the designed 28px;
 * width is auto because a user-supplied asset's ratio is unknown. */
.md-differentiator__icon--image {
	display: inline-flex;
	align-items: center;
	width: auto;
	height: 1.75rem; /* 28px */
}

.md-differentiator .md-differentiator__img {
	width: auto;
	max-width: 100%;
	height: 1.75rem; /* 28px */
	object-fit: contain;
}

.md-differentiator__title {
	margin: 0;
	margin-block-start: var(--md-space-md, 1.5rem); /* 24px */
	color: var(--md-white, #fff);
	font-family: var(--md-font-heading, "Cabin", sans-serif);
	font-size: 1.125rem; /* 18px */
	font-weight: var(--md-weight-bold, 700);
	line-height: 1.375; /* 24.75 / 18 */
}

.md-differentiator__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: normal; /* the comp's "auto" leading */
}

/* --- Stacked, below the column breakpoint ------------------------------- */
.md-differentiator + .md-differentiator {
	margin-block-start: var(--md-space-lg, 2rem);
	padding-block-start: var(--md-space-lg, 2rem);
	border-top: var(--md-border-width, 1px) solid rgba(255, 255, 255, 0.35);
}

/* --- Columns ------------------------------------------------------------ */
@media (min-width: 48em) {
	.md-differentiators__grid[data-cols="2"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.md-differentiators__grid[data-cols="3"] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.md-differentiators__grid[data-cols="4"] {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* Rows only gain space when items wrap past the first row. */
	.md-differentiators__grid {
		row-gap: var(--md-space-xl, 3rem);
	}

	.md-differentiator {
		padding-inline: var(--md-space-xl, 3rem); /* 48px each side of a rule */
		border-inline-end: var(--md-border-width, 1px) solid var(--md-white, #fff);
	}

	/* The stacked separators belong to the single-column layout only. */
	.md-differentiator + .md-differentiator {
		margin-block-start: 0;
		padding-block-start: 0;
		border-top: 0;
	}

	/*
	 * Flush the outer edges and drop the rule at the end of each row. Written
	 * per column count rather than with :first-child/:last-child so a set that
	 * wraps onto a second row still reads correctly.
	 */
	.md-differentiators__grid[data-cols="2"] .md-differentiator:nth-child(2n + 1),
	.md-differentiators__grid[data-cols="3"] .md-differentiator:nth-child(3n + 1),
	.md-differentiators__grid[data-cols="4"] .md-differentiator:nth-child(4n + 1) {
		padding-inline-start: 0;
	}

	.md-differentiators__grid[data-cols="2"] .md-differentiator:nth-child(2n),
	.md-differentiators__grid[data-cols="3"] .md-differentiator:nth-child(3n),
	.md-differentiators__grid[data-cols="4"] .md-differentiator:nth-child(4n) {
		padding-inline-end: 0;
		border-inline-end: 0;
	}

	/* A partial final row must not leave a rule dangling. */
	.md-differentiator:last-child {
		padding-inline-end: 0;
		border-inline-end: 0;
	}
}