/*
 * Vaste onderdelen van de modelpagina. De specificaties staan ook op de pagina van
 * een occasion; de veelgestelde vragen staan in faq.css.
 */

/* Specificaties */

.model-specs {
	color: var(--sm-text-on-brand);
}

.model-specs__inner {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	max-width: var(--band-max);
	margin-inline: auto;
	padding: 2.5rem 1.5rem;
}

.model-specs__header {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}

.model-specs__title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
	margin: 0;
	font: inherit;
}

.model-specs__label {
	color: var(--sm-petrol-tint-3);
}

.model-specs__wordmark {
	width: 11.6875rem;
	height: auto;
	color: var(--sm-koper-tint-3);
}

.model-specs__name {
	color: var(--sm-koper-tint-3);
}

.model-specs__type {
	margin: 0;
	color: var(--sm-oranje);
}

/* Kernmaten: groot, tussen twee haarlijnen */

.model-specs__key {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem 1.75rem;
	margin: 0;
	padding-block: 1.5rem;
	border-block: 1px solid var(--sm-petrol-tint-1);
}

.model-specs__figure {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	color: var(--sm-petrol-tint-3);
}

.model-specs__figure dd {
	margin: 0;
}

.model-specs__value {
	color: var(--sm-koper-tint-2);
	font-size: var(--sm-kop-l-size);
	font-weight: 300;
	line-height: var(--sm-kop-l-line-height);
	letter-spacing: var(--sm-kop-l-letter-spacing);
	text-transform: uppercase;
}

.model-specs__unit {
	color: var(--sm-petrol-tint-3);
	font-size: var(--sm-knop-size);
	letter-spacing: var(--sm-knop-letter-spacing);
}

/* Gegevens per groep: op mobiel en tablet het label boven de waarde */

.model-specs__groups {
	display: grid;
	gap: 2rem;
}

.model-specs__group {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.model-specs__group-title {
	color: var(--sm-oranje);
}

.model-specs__list {
	margin: 0;
}

.model-specs__row {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding-block: 0.875rem;
	border-top: 1px solid var(--sm-petrol-tint-1);
}

.model-specs__row dt {
	color: var(--sm-petrol-tint-3);
}

.model-specs__row dd {
	margin: 0;
}

.model-specs__row-note {
	display: block;
	margin-top: 0.125rem;
	color: var(--sm-petrol-tint-3);
}

@media (min-width: 48rem) {
	.model-specs__inner {
		gap: 2.5rem;
		padding: 3.125rem var(--band-pad-x);
	}

	.model-specs__header {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 1.5rem;
	}

	.model-specs__wordmark {
		width: 18.125rem;
	}

	.model-specs__type {
		text-align: right;
	}

	.model-specs__key {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.5rem 1.75rem;
	}

	.model-specs__groups {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2.5rem 2rem;
	}
}

@media (min-width: 64rem) {
	.model-specs__inner {
		padding-block: 6.25rem;
	}

	.model-specs__title {
		gap: 1.5rem;
	}

	.model-specs__wordmark {
		width: 20.75rem;
	}

	.model-specs__key {
		display: flex;
		gap: 2rem;
		padding-block: 1.75rem;
	}

	.model-specs__figure {
		flex: 1;
	}

	.model-specs__groups {
		gap: 2.5rem 4rem;
	}

	.model-specs__row {
		flex-direction: row;
		gap: 1.25rem;
		padding-block: 0.75rem;
	}

	.model-specs__row dt {
		flex: none;
		width: 12rem;
	}
}

/*
 * Onderdelen zonder ontwerp in Figma. Ze staan niet meer op de modelpagina; de
 * uitnodiging staat nog op de pagina van een occasion.
 */

.drive-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: var(--space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.drive-list__item {
	padding: var(--space-lg);
	background: var(--color-surface);
}

.drive-list__title {
	margin-bottom: var(--space-xs);
}

.drive-list__item p {
	margin: 0;
}

.model-equipment__lists {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: var(--space-xl);
}

.model-custom {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	align-items: center;
	gap: var(--space-xl);
	margin-top: var(--space-xl);
	padding: var(--space-xl);
	background: var(--color-surface);
}

.model-custom__image {
	width: 100%;
	object-fit: cover;
}

.reviews__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: var(--space-xl);
}

.review {
	margin: 0;
	padding: var(--space-lg);
	border-left: 3px solid var(--color-border);
}

.review blockquote {
	margin: 0 0 var(--space-sm);
	font-family: var(--font-heading);
	font-size: var(--text-lg);
}

.review figcaption {
	color: var(--color-text-muted);
}

.invitation {
	padding-block: var(--space-xl);
	border-top: 1px solid var(--color-border);
}

.invitation p {
	max-width: var(--content-max);
}