@layer pages {
	/* Extend orange to body so fixed transparent header area is also orange */
	body:has(.grill-page) {
		background-color: var(--color-grill-bg);
	}

	.grill-page {
		background-color: var(--color-grill-bg);
		min-height: 100vh;
		padding-block-end: var(--space-section);
	}

	/* Top spacing goes on content below the hero (or on the first element when no hero) */
	.grill-page > *:first-child:not(.hero-section),
	.grill-page > .hero-section + * {
		margin-block-start: clamp(5rem, 8vw, 8rem);
	}

	/* ── Illustration ── */
	.grill-illustration {
		display: flex;
		justify-content: center;
		padding-inline: var(--site-padding);
		margin-block-end: var(--space-3xl);
	}

	.grill-illustration__img {
		max-width: min(720px, 100%);
		max-height: clamp(360px, 52vh, 640px);
		width: auto;
		height: auto;
		object-fit: contain;
	}

	/* ── Menu heading ── */
	.grill-menu__heading {
		text-align: center;
		font-size: var(--text-2xl);
		font-weight: 900;
		text-transform: uppercase;
		letter-spacing: normal;
		color: var(--color-text);
		margin-block: 0 var(--space-3xl);
		padding-inline: var(--site-padding);
	}

	/* ── Menu images ── */
	.grill-menu__images {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-xl);
		justify-content: center;
		padding-inline: var(--site-padding);
		max-width: var(--wide-width);
		margin-inline: auto;
	}

	.grill-menu__img-item {
		flex: 0 1 560px;
		min-width: 0;
	}

	/* 1 image — wider, centered */
	.grill-menu__images[data-count="1"] .grill-menu__img-item {
		flex-basis: min(760px, 100%);
	}

	.grill-menu__img {
		width: 100%;
		height: auto;
		display: block;
	}
}