/*
 * Layout: Booking form.
 *
 * The form itself is the plugin's Vue app and brings its own styles. This file
 * only gives it a place to sit — width, background, the header above it. Do not
 * restyle the plugin's internals from here: it ships its own scoped CSS and a
 * theme override would silently break on the next plugin update.
 */

.booking__header {
	max-width: var(--container-narrow);
	margin-bottom: var(--space-l);
}

.booking__header > :last-child {
	margin-bottom: 0;
}

/*
 * The Vue app mounts into #pedalmondo-app. Before the bundle runs the div is
 * empty; reserve the height of the compact bar so the hero does not jump
 * when it appears.
 */
.booking__form #pedalmondo-app:empty {
	min-height: 4.5rem;
}

/*
 * On an image the section is the hero: tall, with the plugin's compact bar
 * sitting on the lower edge of the photo. The bar and the panel that opens
 * below it paint their own white surfaces, so there is no card here —
 * wrapping them in one would put a white box around the bar.
 */
.section--bg-image.section--booking {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: clamp(30rem, 72vh, 46rem);
}

.section--bg-image.section--booking::before {
	/* Keep the photo readable: a light fade only, the bar does the contrast work. */
	background: linear-gradient(180deg, rgb(0 0 0 / 10%), rgb(0 0 0 / 35%));
}

.section--bg-image.section--booking .booking__form {
	color: var(--color-text);
}

/* On a plain dark section the form still needs a light ground of its own. */
.section--bg-dark .booking__form {
	padding: clamp(1rem, 0.5rem + 2vw, 2rem);
	background: var(--color-bg);
	border-radius: var(--radius-l);
	color: var(--color-text);
}