/*
 * Layout: Search form.
 *
 * The form itself is the plugin's Vue app and brings its own styles — this
 * file only gives it a place to sit, mirroring the booking layout: on an
 * image the section is the hero and the white search card sits on the lower
 * edge of the photo. Do not restyle the plugin's internals from here.
 */

/*
 * The date field opens a calendar popover that can reach past the section's
 * lower edge. `.section--bg-image` isolates its stacking context (base.css),
 * so without a z-index here the NEXT section would sit above the overhanging
 * popover — visible but not clickable: every click on a day landed on the
 * hero section below. Lifting the whole section keeps the popover on top;
 * nothing else overlaps between sections.
 */
.section--search {
	position: relative;
	z-index: 4;
}

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

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

/*
 * The Vue app mounts into #pedalmondo-search. Before the bundle runs the div
 * is empty; reserve roughly the card's height so the hero does not jump when
 * it appears.
 */
.search__form #pedalmondo-search:empty {
	min-height: 24rem;
}

/*
 * On an image the section is the hero: tall, with the search card sitting on
 * the lower edge of the photo. The card paints its own white surface, so no
 * section card here.
 */
.section--bg-image.section--search {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: clamp(30rem, 72vh, 46rem);
}

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

.section--bg-image.section--search .search__form {
	color: var(--color-text);
}

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