/* Feature Grid Cards archetype (Aerospace SS5, reused by later Industry pages) */

/* Markup round 2 pins 18 / 21 / 25 (2026-09-03): the two navy cards in a row
 * stay equal height when one carries more copy. The row is authored with
 * verticalAlignment:top, which core emits as align-items:flex-start in its
 * generated layout rule; stretch wins here so the shorter card fills the row. */
.cmp-feature-grid-cards .cmp-fgc-row {
	align-items: stretch !important;
}

.cmp-feature-grid-cards .cmp-fgc-card {
	display: flex;
	flex-direction: column;
}

.cmp-feature-grid-cards .cmp-fgc-card > * {
	width: 100%;
}
@media (max-width: 781px) {
	.cmp-feature-grid-cards {
		padding-top: 54px !important;
		padding-bottom: 54px !important;
		padding-left: var(--wp--preset--spacing--40) !important;
		padding-right: var(--wp--preset--spacing--40) !important;
	}

	.cmp-feature-grid-cards .cmp-fgc-row > * {
		flex-basis: 100% !important;
	}

	.cmp-feature-grid-cards .cmp-fgc-card {
		padding: 16px !important;
	}

	.cmp-feature-grid-cards .cmp-fgc-img img {
		aspect-ratio: 358 / 187 !important;
	}
}

/* External markup round pins 7 and 14 (2026-09-10) — capability card grids on
 * the homepage and the services page.
 *
 * Pin 7: "can we do all the 'learn more' on the bottom left of the box?"
 * Pin 14: "can we line up with first 2 paragraphs? maybe the icons are
 * different sizes."
 *
 * Two separate causes:
 *
 * 1. The card is a constrained group, so it lays out as a block and the
 *    "Learn More" paragraph sits wherever the copy above it ends. Cards in a
 *    row are already equal height, so the links landed anywhere from 27px to
 *    81px off the card's bottom edge. Making the card a flex column and
 *    pushing .cmp-cta down with margin-block-start:auto pins every link to the
 *    bottom-left and closes the floating gap underneath it.
 *
 * 2. Three of the six service icons ship 136px tall and were being stretched
 *    to the 160px box — a ~18% vertical distortion, which is what reads as
 *    "the icons are different sizes". The box keeps its 160px so the titles
 *    and first paragraphs stay aligned across cards; the image now scales
 *    inside it on its own aspect ratio.
 */
.cmp-home-capabilities .cmp-card,
.cmp-services-capabilities .cmp-card {
	display: flex;
	flex-direction: column;
}

.cmp-home-capabilities .cmp-card > *,
.cmp-services-capabilities .cmp-card > * {
	width: 100%;
}

.cmp-home-capabilities .cmp-card .cmp-cta,
.cmp-services-capabilities .cmp-card .cmp-cta {
	margin-block-start: auto;
	margin-block-end: 0;
}

.cmp-home-capabilities .cmp-card > figure.wp-block-image,
.cmp-services-capabilities .cmp-card > figure.wp-block-image {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	height: 160px;
}

.cmp-home-capabilities .cmp-card > figure.wp-block-image img,
.cmp-services-capabilities .cmp-card > figure.wp-block-image img {
	/* The block markup resizes each icon with an inline width/height pair, so
	 * the override needs !important to land — the same idiom the theme uses
	 * elsewhere for inline-attribute overrides. The icons are SVG, so scaling
	 * the three 136px-tall ones up to the shared 160px box is lossless. */
	width: auto !important;
	max-width: 100%;
	height: 100% !important;
	object-fit: contain;
}

/* Mobile audit 2026-09-15, M7: the card lists ("Machining Processes",
 * "Quality, Documentation & Inspection") ran their items together with no
 * gap. Same 16px rhythm as every other .cmp-cta-list on the site. */
.cmp-feature-grid-cards .cmp-fgc-list li + li {
	margin-top: 16px;
}