/*
 * 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 header centres, on the pattern card (booking.php) as on a plain
 * colour: the plugin's form centres itself at its own width, a left-aligned
 * title would sit off its edge.
 */
.booking__header {
	margin-inline: auto;
	text-align: center;
}

/*
 * Slimmer side gutter than the shared card: the plugin's panels bring their
 * own padding, and the card's full gutter on top left the form 283px wide on
 * a 390px phone. Reaches the shared 4rem on wide screens.
 */
.booking__card {
	padding-inline: clamp(var(--space-s), -1rem + 5vw, 4rem);
}

/*
 * An anthracite frame instead of the shadow around the plugin's form. The
 * plugin reads that shadow from --pm-shadow-md (SearchForm.vue, the only rule
 * that uses it), so setting the token on the form is the one knob that leaves
 * its styles alone. A ring rather than a border: it follows the radius and
 * keeps the form's width; 1.5px like the plugin's own control borders.
 */
.section--booking .pm-search {
	--pm-shadow-md: 0 0 0 1.5px var(--pm-anthrazit);
}

/*
 * The Vue app mounts into #pedalmondo-app. Before the bundle runs the div is
 * empty; reserve a little height so the section does not jump when the form
 * appears.
 */
.booking__form #pedalmondo-app:empty {
	min-height: 4.5rem;
}

/*
 * On an image the section is the hero: tall, with the plugin's form sitting
 * on the lower edge of the photo. The search form and the step cards paint
 * their own white surfaces, so there is no card here. No booking page uses
 * an image today; this was built for the plugin's compact bar, which is gone.
 */
.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);
}