.contact-form-panel {
	padding: 48px;
	background-color: var(--wp--preset--color--neutral-200);
	border-radius: 24px;
}

.contact-form-panel h2 {
	margin-bottom: 24px;
}

@media (max-width: 700px) {
	.contact-form-panel {
		padding: 24px;
	}
}

/* "Contact page panel" block style — the full-bleed panel used on the
   Contact page itself, rather than the default rounded workshop-options
   treatment used elsewhere. */
.contact-form-panel.is-style-contact-page-panel {
	padding: 160px 64px 64px;
	background-color: var(--wp--preset--color--neutral-500);
	border-radius: 0;
}

.contact-form-panel.is-style-contact-page-panel h2 {
	margin-bottom: 32px;
}

.contact-form {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 614px;
}

/* Full-width layout for forms using .form-field-row (side-by-side fields) —
   a single-column-sized max-width would leave each column cramped. Detected
   from the markup itself so no block setting is needed. */
.contact-form:has(.form-field-row) {
	max-width: none;
}

.contact-form .wp-block-button {
	position: relative;
	margin-top: 8px;
}

/* Fields placed side by side in a two-column grid. Plain fields stack down
   the first column in source order; a field marked .form-field--stretch
   (e.g. Message) is pulled into the second column and spans every row so
   its height matches the full first column. .form-field keeps its own
   margin-bottom, so zero it out here — spacing between rows comes from the
   .contact-form flex gap instead. */
.contact-form .form-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: repeat(4, auto);
	grid-auto-flow: column;
	gap: 24px;
	margin-bottom: 15px;
}

.contact-form .form-field-row .form-field {
	margin-bottom: 0;
}

/* Percentage heights won't work here — CF7 wraps the textarea in its own
   <span class="wpcf7-form-control-wrap">, which defaults to display:inline
   and so has no definite height for a child's height:100% to resolve
   against. Chain flex-grow down through every level instead, which fills
   the remaining space regardless of each ancestor's computed height. */
.contact-form .form-field-row .form-field--stretch {
	grid-row: 1 / -1;
	display: flex;
	flex-direction: column;
}

.contact-form .form-field-row .form-field--stretch .form-field__input-wrap {
	display: flex;
	flex: 1;
}

/* wpautop wraps the CF7 shortcode's output in a <p> (see the unscoped
   .form-field__input-wrap p rule below) — a plain block box that isn't a
   flex item and would otherwise break the flex-grow chain right here. */
.contact-form .form-field-row .form-field--stretch .form-field__input-wrap > p {
	display: flex;
	flex: 1;
	margin: 0;
}

.contact-form
	.form-field-row
	.form-field--stretch
	.form-field__input-wrap
	.wpcf7-form-control-wrap {
	display: flex;
	flex: 1;
}

.contact-form .form-field-row .form-field--stretch .form-field__input {
	flex: 1;
	height: auto;
}

.contact-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 4px;
	color: #d32f2f;
	font-size: var(--wp--preset--font-size--sm, 14px);
}

.contact-form .wpcf7-response-output {
	margin: 0;
	padding: 12px 16px;
	border-radius: 8px;
	border: none;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--md);
}

.contact-form form.sent .wpcf7-response-output {
	background-color: #e6f4ea;
	color: #1e7e34;
}

.contact-form form.invalid .wpcf7-response-output,
.contact-form form.failed .wpcf7-response-output,
.contact-form form.aborted .wpcf7-response-output,
.contact-form form.spam .wpcf7-response-output,
.contact-form form.unaccepted .wpcf7-response-output {
	background-color: #fdecea;
	color: #d32f2f;
}

/* position: absolute takes the spinner out of flex flow — CF7 injects it as a
   sibling of the submit button inside .wp-block-button (is-style-primary-small,
   display: inline-flex), which would otherwise push the button's ::after arrow
   circle out of place even though the spinner itself is invisible until submit. */
.contact-form .wpcf7-spinner {
	position: absolute;
	left: 100%;
	margin-left: 8px;
}

@media (max-width: 600px) {
	.contact-form-panel.is-style-contact-page-panel {
		padding: 48px 24px 64px;
	}

	.contact-form .form-field-row {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		grid-auto-flow: row;
		margin-bottom: 0;
	}

	.contact-form .form-field-row .form-field--stretch {
		grid-row: auto;
	}

	.contact-form .form-field-row .form-field--stretch .form-field__input-wrap,
	.contact-form .form-field-row .form-field--stretch .form-field__input-wrap > p,
	.contact-form
		.form-field-row
		.form-field--stretch
		.form-field__input-wrap
		.wpcf7-form-control-wrap {
		display: block;
		flex: initial;
	}

	.contact-form .form-field-row .form-field--stretch .form-field__input {
		flex: initial;
		height: 160px;
	}
}