/**
 * The single-car page header and its long-form content column.
 *
 * The cards in the right-hand column have their own files; the grid that puts
 * the two columns side by side is in layout.css.
 */

@layer components {
	.hauto-car__header {
		display: flex;
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
		align-items: center;
		justify-content: space-between;
		margin-block-end: var(--wp--preset--spacing--50);
	}

	.hauto-car__title {
		margin: 0;
		font-size: var(--wp--preset--font-size--x-large);
		line-height: 1.15;
	}

	/* Right-aligned beside the title; on a narrow screen it wraps under the
	   title instead, where end-aligning would push the price in by however much
	   wider the VAT line is. */
	.hauto-car__pricing {
		text-align: start;

		@media (width >= 64rem) {
			text-align: end;
		}
	}

	.hauto-car__price-label {
		margin: 0;
		color: var(--wp--preset--color--muted);
		font-size: var(--wp--preset--font-size--small);
	}

	.hauto-car__price {
		margin: 0;
		color: var(--wp--preset--color--primary);
		font-family: var(--wp--preset--font-family--heading);
		font-size: var(--wp--preset--font-size--x-large);
		font-weight: 700;
		line-height: 1.1;
	}

	/* Secondary to the price, and only there on a car the VAT comes off. */
	.hauto-car__price-net {
		margin: 0;
		color: var(--wp--preset--color--muted);
		font-size: var(--wp--preset--font-size--x-small);
	}

	.hauto-car__status {
		display: inline-block;
		margin-block: var(--wp--preset--spacing--20) 0;
		padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
		border-radius: var(--hauto-radius-sm);
		background-color: var(--wp--preset--color--warning);
		color: var(--wp--preset--color--base);
		font-size: var(--wp--preset--font-size--small);
		text-transform: uppercase;
	}

	/* A sold car should recede: the badge drains rather than shouting, which is
	   the status colour rule in DESIGN.md. */
	.hauto-car--sold .hauto-car__status {
		background-color: var(--wp--preset--color--muted);
	}

	/* A card like the ones beside it, so the dealer's notes read as one more
	   fact about the car rather than an article. */
	.hauto-car__description {
		padding: var(--wp--preset--spacing--50);
		border: 1px solid var(--wp--preset--color--border);
		border-radius: var(--hauto-radius-md);
		background-color: var(--wp--preset--color--base);
	}

	/* Narrow screens space it with the layout grid's gap; see layout.css. */
	@media (width >= 64rem) {
		.hauto-car__description {
			margin-block-start: var(--wp--preset--spacing--60);
		}
	}

	.hauto-car__description-title {
		font-size: var(--wp--preset--font-size--large);
	}

	.hauto-car__description-body {
		margin-block-start: var(--wp--preset--spacing--40);
		font-size: var(--wp--preset--font-size--small);
		line-height: 1.6;

		& > * + * {
			margin-block-start: var(--wp--preset--spacing--30);
		}
	}

	/* In the card column the form is one of the cards: it drops the standalone
	   section's top margin and takes the same radius as its neighbours. */
	.hauto-car__inquiry .hauto-inquiry {
		margin-block-start: 0;
		border-radius: var(--hauto-radius-md);
	}

	.hauto-car__inquiry .hauto-inquiry__title {
		font-size: var(--wp--preset--font-size--large);
	}

	.hauto-car--sold .hauto-car__price {
		color: var(--wp--preset--color--muted);
		text-decoration: line-through;
	}
}