/* Yellow Picnic — layout shell for the custom Customizable Meal Plans template.
   Replaces the Elementor two-column section. The form's own styling lives in
   the shortcode output (step2.php); this file only handles the page shell:
   a full-height sticky hero photo on the left, the form on the right. */

/* Salient sets body{overflow:hidden}, which disables position:sticky.
   overflow-x:clip still clips horizontally without establishing a scroll
   container, so the hero image can stick. */
body.cmp-page {
	overflow-x: clip;
	overflow-y: visible;
	background: #fff;
}

.cmp-main {
	width: 100%;
}

.cmp-hero {
	display: flex;
	align-items: flex-start;
	width: 100%;
}

/* Left: full-height photo, pinned below the 80px sticky nav while the form scrolls */
.cmp-hero__media {
	flex: 0 0 46%;
	max-width: 46%;
	position: sticky;
	top: 80px;
	align-self: flex-start;
	height: calc(100vh - 80px);
}
.cmp-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Right: the customizer form */
.cmp-hero__form {
	flex: 1 1 54%;
	max-width: 54%;
	box-sizing: border-box;
	padding: 56px 80px 96px 56px;
}

/* The form wrapper handled its own gutter under Elementor; the template owns
   spacing now, so zero that out to avoid a double gutter. */
.cmp-page .meals-section-step {
	padding-left: 0 !important;
}

@media (max-width: 1100px) {
	.cmp-hero__form {
		padding: 48px 40px 72px 40px;
	}
}

@media (max-width: 767px) {
	.cmp-hero {
		flex-direction: column;
	}
	.cmp-hero__media {
		position: static;
		height: 56vh;
		flex: none;
		width: 100%;
		max-width: 100%;
	}
	.cmp-hero__form {
		flex: none;
		width: 100%;
		max-width: 100%;
		padding: 32px 24px 56px;
	}
}