/*
 * Proportions follow the design export: equal columns, 56px gutter, and more
 * space above the section than below it. Fixed pixel values from the export are
 * expressed as clamp ceilings so the section still collapses on small screens.
 */

.section-intro {
	padding-block: clamp(3rem, 6vw, 4.875rem) clamp(2.25rem, 4.5vw, 3.5rem);
}

.section-intro__grid {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: start;

	@media (min-width: 48rem) {
		grid-template-columns: 1fr 1fr;
	}
}

.section-intro__heading {
	margin: 0;
	font-size: clamp(2rem, 1.1rem + 3.4vw, 3.375rem);
	line-height: 1.02;

	/* Overrides the global negative tracking; the italic display cut needs air. */
	letter-spacing: 0.5px;
}

.section-intro__body {
	color: var(--sk-gray-copy);
	font-size: 0.9375rem;
	line-height: 1.6;
	text-wrap: pretty;

	p {
		margin-bottom: 1.25rem;
	}

	p:last-child {
		margin-bottom: 0;
	}
}

.testimonials {
	/*
	 * The diagonal is artwork rather than a gradient, so the geometry matches the
	 * export exactly. It is a flat two-tone wash, which is why cover scaling past
	 * its native 1024px stays clean. The color underneath shows while it loads.
	 */

	background: var(--sk-gray-light) var(--sk-angle-wash) center center / cover no-repeat;
}

/* Drops the UA blockquote indent, which would knock the quote and the
	   attribution 40px off the eyebrow's rule. */

.testimonials__item {
	margin: 0;

	&[aria-hidden="true"] {
		display: none;
	}
}

.testimonials__quote {
	/* Measured in ch so the line length tracks the font size rather than
		   drifting as the clamp scales the type. */

	max-width: 68ch;
	font-family: var(--sk-font-body);
	font-size: clamp(1.25rem, 1rem + 1.15vw, 1.75rem);
	line-height: 1.45;

	&::before {
		content: "\201C";
	}

	&::after {
		content: "\201D";
	}
}

.testimonials__attribution {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	font-size: 0.8125rem;

	&::before {
		width: 1.5rem;
		height: 2px;
		background: var(--sk-black);
		content: "";
	}
}

.testimonials__cite {
	font-style: normal;
	font-weight: 700;
}

.testimonials__role,
.testimonials__company {
	color: var(--sk-gray);
}

/* One column per arrow, so the progress track can take a second row spanning
	   both of them rather than sitting alongside. */

.testimonials__controls {
	display: grid;
	grid-template-columns: auto auto;
	gap: 0.75rem;
	justify-content: end;
	margin-top: 1.5rem;

	.slider-progress {
		grid-column: 1 / -1;
		justify-self: end;
	}
}

.pillars {
	background: var(--sk-accent);
	color: var(--sk-white);

	.eyebrow {
		color: color-mix(in srgb, var(--sk-white) 85%, transparent);

		&::before {
			background: var(--sk-support);
		}
	}
}

.pillars__header {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	margin-bottom: clamp(2rem, 4vw, 3rem);

	@media (min-width: 48rem) {
		grid-template-columns: 5fr 6fr;
	}
}

.pillars__heading {
	margin: 0;
	color: var(--sk-white);
}

.pillars__grid {
	display: grid;
	gap: 1.25rem;

	@media (min-width: 48rem) {
		grid-template-columns: repeat(2, 1fr);

		/*
			 * Equal rows rather than the default, which sizes each row to its own
			 * content and leaves the two rows different heights. Only from two
			 * columns up: in a single column this would stretch the short cards to
			 * match the longest one.
			 */

		grid-auto-rows: 1fr;
	}

	/*
		 * About uses three pillars in a row. :has keeps the home page's four-card
		 * 2×2 layout without a modifier the editor has to remember.
		 */

	&:has(> :nth-child(3):last-child) {
		@media (min-width: 62rem) {
			grid-template-columns: repeat(3, 1fr);
		}
	}
}

/* A light panel on the blue band, so the copy colors are set here rather than
	   inherited from the section. */

.pillars__card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-height: 14.375rem;
	border-top: 5px solid var(--sk-support);
	background: var(--sk-gray-light) var(--sk-angle-wash) center center / cover no-repeat;
	padding: 2.125rem clamp(1.5rem, 2.9vw, 2.625rem) 2.375rem;
	color: var(--sk-gray-copy);

	/*
		 * The label reads as a card heading at this size, not as the small tracked
		 * eyebrow the section header uses, so the scale and tracking are reset.
		 */

	.eyebrow {
		gap: 0.875rem;
		margin-bottom: 0;
		color: var(--sk-black);
		font-size: 1.625rem;
		font-style: italic;
		letter-spacing: 0.046em;
		line-height: 1;

		&::before {
			width: 1.875rem;
			height: 4px;
		}
	}

	p:last-child {
		margin-bottom: 0;
	}
}

.pillars__card-body {
	font-size: 1.0313rem;
	line-height: 1.6;
	text-wrap: pretty;
}