/**
 * Layout layer: page container, header, footer, and the car grid.
 * Structure only — component appearance belongs in components/.
 */

@layer layout {
	.hauto-container {
		width: 100%;
		max-width: var(--wp--style--global--wide-size);
		margin-inline: auto;
		padding-inline: var(--wp--preset--spacing--50);
	}

	.hauto-main {
		display: block;
		padding-block: var(--wp--preset--spacing--60);
	}

	/* Editor-managed pages: the content element constrains itself instead of
	   sitting in .hauto-container, so a block can leave the constraint with the
	   editor's Full width control. Grid columns rather than a 100vw negative
	   margin, which overflows by the width of the scrollbar. */
	.hauto-page__content,
	.hauto-page__content > .wp-block-group:not(.is-layout-constrained) {
		--hauto-gutter: var(--wp--preset--spacing--50);

		display: grid;
		row-gap: var(--wp--style--global--block-gap);
		grid-template-columns:
			[full-start] minmax(var(--hauto-gutter), 1fr)
			[content-start] min(100% - 2 * var(--hauto-gutter), var(--wp--style--global--wide-size))
			[content-end]
			minmax(var(--hauto-gutter), 1fr) [full-end];

		& > * {
			grid-column: content;
		}

		& > .alignfull {
			grid-column: full;
		}

		/* A hero is the first thing on the page; .hauto-main's top padding would
		   read as a gap above it. */
		& > .alignfull:first-child {
			margin-block-start: calc(-1 * var(--wp--preset--spacing--60));
		}
	}

	/* A root Group with "Inner blocks use content width" off is a wrapper, not a
	   layout. It spans the page grid and repeats it, so the blocks inside it are
	   constrained — and can leave the constraint — as if it were not there. */
	.hauto-page__content > .wp-block-group:not(.is-layout-constrained) {
		grid-column: full;
	}

	.hauto-site-header__inner {
		display: flex;
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--50);
		align-items: center;
		justify-content: space-between;
		width: 100%;
		max-width: var(--wp--style--global--wide-size);
		margin-inline: auto;
		padding: var(--wp--preset--spacing--40) 0;
	}

	.hauto-site-header__brand {
		font-size: var(--wp--preset--font-size--large);
		font-weight: 650;

		& a {
			color: inherit;
			text-decoration: none;
		}
	}

	/* .custom-logo-link/.custom-logo are core's markup, not ours to rename. */
	.hauto-site-header__brand--logo {
		display: flex;

		& .custom-logo {
			width: auto;
			max-height: var(--wp--preset--spacing--70);
		}
	}

	/* Centred because the CTA button sets a taller row than the links beside it. */
	.hauto-site-header__menu {
		display: flex;
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--40);
		align-items: center;
		margin: 0;

		& a {
			text-decoration: none;
		}
	}

	/* The header is the containing block for the mobile nav panel hanging below
	   it, and has to sit over the page content the panel covers. */
	.hauto-site-header {
		position: relative;
		z-index: 10;
		padding: 0 var(--wp--preset--spacing--50);
	}

	.hauto-site-header__burger {
		display: flex;
		padding: var(--wp--preset--spacing--20);
	}

	/* The desktop dropdown is positioned against its own item, not the header. */
	.hauto-site-header__parent {
		position: relative;
	}

	.hauto-site-header__submenu {
		display: none;
		flex-direction: column;
		margin: 0;
		padding-inline-start: var(--wp--preset--spacing--40);
	}

	.hauto-site-header__disclosure[aria-expanded='true'] + .hauto-site-header__submenu {
		display: flex;
	}

	/* Narrow: the menu is a panel under the header, and a parent item expands
	   in place rather than floating over what is below it. */
	@media (width < 64rem) {
		.hauto-site-header__nav {
			display: none;
			position: absolute;
			inset-block-start: 100%;
			inset-inline: 0;
			max-height: calc(100svh - 100%);
			overflow-y: auto;
			overscroll-behavior: contain;
			padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50)
				var(--wp--preset--spacing--50);
		}

		.hauto-site-header__nav--open {
			display: block;
		}

		/* Children line up with the root items and keep the menu's own gap, so
		   the last one is as far from the next root item as any two roots. */
		.hauto-site-header__submenu {
			gap: var(--wp--preset--spacing--40);
			padding-block-start: var(--wp--preset--spacing--40);
			padding-inline-start: 0;
		}

		/* A row per link, then the two buttons sharing the last row: the CTA on
		   the left and the phone on the right, whatever the menu's order. */
		.hauto-site-header__menu {
			align-items: stretch;
			gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);

			& > * {
				flex: 1 0 100%;
			}

			/* Flex, so a label that wraps on a small phone makes both buttons
			   taller rather than one. */
			& > :has(> .wp-element-button) {
				display: flex;
				flex: 1 1 0;
				min-width: 0;
			}

			& > :has(> .hauto-site-header__link--call) {
				order: 1;
			}

			/* Half a phone is narrow for "Mūsų automobiliai". theme.json's padding
			   is unlayered, so it is the variable it reads that changes here. */
			& .wp-element-button {
				--wp--custom--button--padding-inline: var(--wp--preset--spacing--20);

				width: 100%;
			}
		}
	}

	@media (width >= 64rem) {
		.hauto-site-header__burger {
			display: none;
		}

		/* Always laid out, so opening it costs no reflow; the gap above it is
		   crossed faster than the script's close delay. */
		.hauto-site-header__submenu {
			display: flex;
			position: absolute;
			z-index: 5;
			inset-block-start: calc(100% + var(--wp--preset--spacing--30));
			inset-inline-start: calc(var(--wp--preset--spacing--30) * -1);
			min-width: max-content;
			padding: var(--wp--preset--spacing--20);
		}

		/* 2rem between links, 1rem between the two buttons: the gap is the
		   buttons' spacing and each link adds the difference after itself. */
		.hauto-site-header__menu {
			& > :not(:has(> .wp-element-button)) {
				margin-inline-end: var(--wp--preset--spacing--40);
			}

			/* Its chevron already reads as space after the label. A px value by
			   the owner's call: no spacing token is this small. */
			& > .hauto-site-header__parent {
				margin-inline-end: 2px;
			}
		}
	}

	.hauto-site-footer {
		margin-block-start: var(--wp--preset--spacing--80);
		background-color: var(--wp--preset--color--contrast);
		color: color-mix(in srgb, var(--wp--preset--color--base) 70%, transparent);
		padding: 0 var(--wp--preset--spacing--50);
	}

	/* The widget area: each widget is a column, as many as the client adds, and
	   they stack on their own once a column would fall below 14rem. */
	.hauto-site-footer__inner {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
		gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
		width: 100%;
		max-width: var(--wp--style--global--wide-size);
		margin-inline: auto;
		padding: var(--wp--preset--spacing--70) 0;
		font-size: var(--wp--preset--font-size--small);
	}

	.hauto-site-footer__copyright-wrapper {
		border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 20%, transparent);
		width: 100%;
	}

	.hauto-site-footer__copyright {
		width: 100%;
		max-width: var(--wp--style--global--wide-size);
		padding: var(--wp--preset--spacing--50);
		margin: 0 auto;
		color: color-mix(in srgb, var(--wp--preset--color--base) 70%, transparent);
		font-size: var(--wp--preset--font-size--x-small);
	}

	/* Single car: photographs and long-form content on the left, the cards on
	   the right. One column until there is room for a 400px card column beside
	   a readable gallery. */
	.hauto-car__layout {
		display: grid;
		gap: var(--wp--preset--spacing--50);
	}

	.hauto-car__aside {
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--50);
		min-width: 0;
	}

	.hauto-car__main {
		min-width: 0;
	}

	/*
	 * Narrow: one column, and the facts follow the photos instead of waiting
	 * under the whole content column. The two column wrappers step out of the
	 * grid so their sections interleave; the source order stays the desktop
	 * reading order, which is also what a screen reader follows.
	 */
	@media (width < 64rem) {
		.hauto-car__main,
		.hauto-car__aside {
			display: contents;
		}

		/* The wrappers' min-width: 0 went with them, so the track carries it. */
		.hauto-car__layout {
			grid-template-columns: minmax(0, 1fr);

			& .hauto-car-specs {
				order: 1;
			}

			& .hauto-car__description {
				order: 2;
			}

			& .hauto-car-equipment {
				order: 3;
			}

			& .hauto-viewing {
				order: 4;
			}

			& .hauto-car-contact {
				order: 5;
			}

			& .hauto-car__inquiry {
				order: 6;
			}

			& .hauto-car-similar {
				order: 7;
			}
		}
	}

	@media (width >= 64rem) {
		.hauto-car__layout {
			grid-template-columns: minmax(0, 1fr) 400px;
			gap: var(--wp--preset--spacing--60);
		}

		/* The column stretches to the height of the left one, so the form stays
		   in view for the whole scroll. It scrolls inside itself on a short
		   viewport rather than having its top pinned out of reach. */
		.hauto-car__inquiry {
			position: sticky;
			top: var(--wp--preset--spacing--50);
			max-height: calc(100vh - 2 * var(--wp--preset--spacing--50));
			overflow-y: auto;
		}
	}

	/*
	 * Clipped sideways, visible vertically: a card's spec tooltip is allowed
	 * to hang above the grid, but never to widen the page — the two axes are
	 * independent only because it is `clip` rather than `hidden`, which would
	 * force the other axis to scroll.
	 */
	.hauto-car-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
		gap: var(--wp--preset--spacing--50);
		overflow: visible clip;
		padding: 2rem 0;
	}

	@media (width <= 64rem) {
		.hauto-car-grid {
			padding: 0;
		}
	}

	.hauto-archive__title {
		font-size: var(--wp--preset--font-size--xx-large);
	}

	/* Client-editable copy from the page set on Settings → Reading. */
	.hauto-archive__intro {
		max-width: var(--wp--style--global--content-size);
		margin-block-start: var(--wp--preset--spacing--50);
	}
}