/*
 * Contract Vehicles page. Sizes, colors and spacing follow the live Our
 * Companies page (Elementor post 3632), through the tokens in tokens.css.
 *
 * Selectors start with .cv so they outrank the Elementor kit's global
 * ".elementor-kit-834 a" and Hello Elementor's heading and paragraph margins.
 */

.cv {
	--gutter: var(--space-25);
	background: var(--color-white);
}

.cv h1,
.cv h2,
.cv h3,
.cv p {
	margin: 0;
}

.cv-wrap {
	width: min(100% - 2 * var(--gutter), var(--page-max));
	margin-inline: auto;
	display: flex;
	flex-direction: column;
}

/* Page heading - "Our Companies" block. */
.cv-intro {
	gap: var(--space-12);
	padding: var(--space-192) 0 var(--space-48);
}

.cv-title {
	font-family: var(--font-heading);
	font-size: var(--fs-45);
	font-weight: var(--fw-600);
	line-height: var(--lh-45);
	color: var(--color-grey-dark);
}

.cv-lede,
.cv-meta,
.cv-desc {
	font-family: var(--font-body);
	font-size: var(--fs-18);
	font-weight: var(--fw-400);
	line-height: var(--lh-24);
	color: var(--color-grey-48);
}

/* Raleway's default old-style figures make contract numbers hard to read. */
.cv-number {
	font-variant-numeric: lining-nums;
}

/* One vehicle - a company section on Our Companies. */
.cv-vehicle {
	gap: var(--space-48);
	padding: 0 0 var(--space-48);
}

.cv-vehicle + .cv-vehicle {
	padding-top: var(--space-96);
}

/* The last vehicle keeps the same gap before the footer as between vehicles. */
.cv-vehicle:last-child {
	padding-bottom: var(--space-96);
}

.cv-name {
	font-family: var(--font-heading);
	font-size: var(--fs-38);
	font-weight: var(--fw-600);
	line-height: var(--lh-34-2);
	color: var(--color-grey-35);
}

.cv-row {
	display: flex;
	gap: var(--space-48);
	align-items: flex-start;
}

.cv-logo {
	flex: 0 0 25%;
	display: flex;
	justify-content: center;
}

.cv-logo img {
	display: block;
	width: auto;
	max-width: min(100%, var(--logo-max));
	max-height: var(--logo-max-h);
	height: auto;
}

/* Visible stand-in until the vehicle's logo is supplied. */
.cv-logo-slot {
	width: 100%;
	padding: var(--space-48) var(--space-12);
	border: var(--space-2) dashed var(--color-grey-light);
	font-family: var(--font-body);
	font-size: var(--fs-16);
	line-height: var(--lh-24);
	color: var(--color-grey);
	text-align: center;
}

.cv-body {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-35);
}

.cv-contracts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--contract-min)), 1fr));
	gap: var(--space-35);
}

.cv-contract {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-10);
}

.cv-contract-name,
.cv-jv-name {
	font-family: var(--font-heading);
	font-size: var(--fs-25);
	font-weight: var(--fw-600);
	line-height: var(--lh-30);
	color: var(--color-grey-35);
}

/* Joint-venture holder - the "Joint Ventures" label and rule on Our Companies. */
.cv-jv {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

.cv-jv-label {
	padding-bottom: var(--space-4);
	border-bottom: var(--space-2) solid var(--color-grey-light);
	font-family: var(--font-heading);
	font-size: var(--fs-18);
	font-weight: var(--fw-600);
	line-height: var(--lh-18-8);
	text-transform: uppercase;
	color: var(--color-grey);
}

.cv-jv-name {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: var(--space-20);
	row-gap: var(--space-10);
}

/* "Learn More" text link on Our Companies. */
.cv a.cv-link {
	font-family: var(--font-body);
	font-size: var(--fs-16);
	font-weight: var(--fw-500);
	line-height: var(--lh-15);
	color: var(--color-teal-66);
	text-decoration: none;
	padding-block: var(--space-4);
}

.cv a.cv-link:hover,
.cv a.cv-link:focus-visible {
	color: var(--color-grey-35);
}

@media (max-width: 767px) {
	.cv-intro {
		padding: var(--space-144) 0 var(--space-64);
	}

	.cv-title {
		font-size: var(--fs-30);
		line-height: var(--lh-30);
	}

	.cv-name {
		font-size: var(--fs-25);
		line-height: var(--lh-26);
	}

	.cv-vehicle {
		gap: var(--space-24);
	}

	.cv-vehicle + .cv-vehicle {
		padding-top: var(--space-64);
	}

	.cv-vehicle:last-child {
		padding-bottom: var(--space-64);
	}

	.cv-row {
		flex-direction: column;
		gap: var(--space-24);
	}

	.cv-logo {
		flex-basis: auto;
		width: 100%;
	}

	.cv-contracts {
		gap: var(--space-24);
	}
}