/**
 * The viewing booking on a car page: the card under the description, and the
 * dialog its button opens.
 *
 * The fields, notices and consent line are the contact card's
 * (inquiry-form.css); only the grid they sit in and the dialog are here.
 */

@layer components {
	/*
	 * Copy and map side by side when the column has room for both, stacked
	 * when it does not — the column's width decides, not the viewport's.
	 */
	.hauto-viewing {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
		gap: var(--wp--preset--spacing--50);
		align-items: center;
		padding: var(--wp--preset--spacing--50);
		border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 35%, transparent);
		border-radius: var(--hauto-radius-md);
		background-image: linear-gradient(
			135deg,
			var(--wp--preset--color--primary-washed),
			var(--wp--preset--color--base)
		);
	}

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

	.hauto-viewing__body {
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--20);
		align-items: flex-start;
		min-width: 0;
	}

	/* Darkened: the primary itself is too light to read as text on the wash. */
	.hauto-viewing__eyebrow {
		color: color-mix(
			in srgb,
			var(--wp--preset--color--primary) 55%,
			var(--wp--preset--color--contrast)
		);
		font-size: var(--wp--preset--font-size--x-small);
		font-weight: 600;
		text-transform: uppercase;
	}

	.hauto-viewing__title {
		font-size: var(--wp--preset--font-size--x-large);
	}

	.hauto-viewing__lead {
		color: var(--wp--preset--color--muted);
	}

	.hauto-viewing__open {
		margin-block-start: var(--wp--preset--spacing--30);
	}

	.hauto-viewing .hauto-inquiry__notice {
		margin-block-start: var(--wp--preset--spacing--20);
	}

	.hauto-viewing__map {
		overflow: hidden;
		min-width: 0;
		aspect-ratio: 4 / 3;
		border: 1px solid var(--wp--preset--color--border);
		border-radius: var(--hauto-radius-sm);
		background-color: var(--wp--preset--color--surface-light);
	}

	.hauto-viewing__map-frame {
		display: block;
		width: 100%;
		height: 100%;
		border: 0;
	}

	/*
	 * Fixed and centred even when rendered `open` without a script, which is
	 * the non-modal state the user agent would otherwise leave in the flow.
	 */
	.hauto-viewing__dialog {
		position: fixed;
		inset: 0;
		width: min(100% - 2 * var(--wp--preset--spacing--40), 36rem);
		max-height: calc(100dvh - 2 * var(--wp--preset--spacing--40));
		margin: auto;
		padding: var(--wp--preset--spacing--50);
		overflow-y: auto;
		overscroll-behavior: contain;
		border: 0;
		border-radius: var(--hauto-radius-md);
		background-color: var(--wp--preset--color--base);
		box-shadow: var(--wp--preset--shadow--raised);
		color: var(--wp--preset--color--contrast);
		opacity: 1;
		scale: 1;
		transition:
			opacity 160ms ease-out,
			scale 160ms ease-out,
			overlay 160ms ease-out allow-discrete,
			display 160ms ease-out allow-discrete;

		&::backdrop {
			background-color: color-mix(
				in srgb,
				var(--wp--preset--color--contrast) 55%,
				transparent
			);
		}
	}

	.hauto-viewing__dialog:not([open]) {
		opacity: 0;
		scale: 0.98;
	}

	@starting-style {
		.hauto-viewing__dialog[open] {
			opacity: 0;
			scale: 0.98;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.hauto-viewing__dialog {
			transition: none;
		}
	}

	/* The page behind a modal does not scroll with the dialog's own overflow. */
	:root:has(.hauto-viewing__dialog:modal) {
		overflow: hidden;
	}

	.hauto-viewing__close {
		position: absolute;
		inset-block-start: var(--wp--preset--spacing--40);
		inset-inline-end: var(--wp--preset--spacing--40);
		display: grid;
		place-items: center;
		padding: var(--wp--preset--spacing--20);
		border: 0;
		border-radius: var(--hauto-radius-sm);
		background: none;
		font-size: var(--wp--preset--font-size--large);
		cursor: pointer;

		&:hover {
			background-color: var(--wp--preset--color--surface-light);
		}
	}

	.hauto-viewing__dialog-title {
		padding-inline-end: var(--wp--preset--spacing--60);
		font-size: var(--wp--preset--font-size--large);
	}

	.hauto-viewing__dialog-lead {
		margin-block-start: var(--wp--preset--spacing--20);
		color: var(--wp--preset--color--muted);
	}

	/* Two fields to a row in the dialog; the contact card's grid would give one. */
	.hauto-viewing__form {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
		gap: var(--wp--preset--spacing--40);
		margin-block-start: var(--wp--preset--spacing--50);
	}

	/*
	 * A date input and a select each size themselves differently from a text
	 * input; pinned to the text input's height so a row of two lines up.
	 */
	.hauto-viewing__date,
	.hauto-viewing__time {
		block-size: 2.5rem;
	}

	.hauto-viewing__field--wide {
		grid-column: 1 / -1;
	}

	.hauto-viewing__submit {
		width: 100%;
	}

	.hauto-viewing__where {
		margin-block-start: var(--wp--preset--spacing--40);
		color: var(--wp--preset--color--muted);
		font-size: var(--wp--preset--font-size--x-small);
	}
}