/* BP Contact Form widget styles
 *
 * Single elegant section for the Contact page: one centered
 * 1140px band, ONE cream container split vertically by a thin
 * divider. Left side is a real functional contact form
 * (cream inputs, custom chevron selects, custom checkbox,
 * dark green submit button, inline feedback). Right side is
 * "Autres moyens de nous contacter" — a repeater-driven list
 * of contact methods (icon + title + primary + secondary)
 * with a compact resource panel at the bottom.
 *
 * All rules stay under .bp-contact-form. Logical properties
 * (margin-inline, padding-inline, inset-inline, text-align:
 * start/end) keep LTR/RTL aligned without a separate RTL file.
 * No jQuery, no third-party form library, no GSAP. Reveal
 * animation reuses the shared `bp-reveal.css` stylesheet via
 * the `data-bp-reveal` / `data-bp-stagger` attributes the
 * widget already emits.
 */

/* ================== Section root ================== */
.bp-contact-form {
	--bp-cf-max-w:          1140px;
	--bp-cf-form-basis:     67%;
	--bp-cf-right-basis:    calc(100% - var(--bp-cf-form-basis));
	--bp-cf-bg:             #FBF6EC;
	--bp-cf-border:         #E4DCCB;
	--bp-cf-radius:         10px;
	--bp-cf-pad:            28px;
	--bp-cf-col-gap:        36px;
	--bp-cf-divider:        #E4DCCB;
	--bp-cf-fg:             #1F2A1F;
	--bp-cf-muted:          #5C6A5C;
	--bp-cf-title:          #374F37;
	--bp-cf-olive:          #B8B25A;
	--bp-cf-input-bg:       #FFFFFF;
	--bp-cf-input-border:   #E5DCCB;
	--bp-cf-input-fg:       #1F2A1F;
	--bp-cf-input-radius:   7px;
	--bp-cf-input-height:   46px;
	--bp-cf-textarea-h:     132px;
	--bp-cf-field-gap:      14px;
	--bp-cf-submit-bg:      #374F37;
	--bp-cf-submit-fg:      #FFFFFF;
	--bp-cf-icon-badge-bg:  #F0E6D2;
	--bp-cf-icon-badge:     38px;
	--bp-cf-icon-size:      18px;
	--bp-cf-method-gap:     18px;
	--bp-cf-resource-bg:    #F0E6D2;
	--bp-cf-font:           var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	--bp-cf-display:        var(--bp-font-display, 'DM Serif Display', Georgia, serif);

	position: relative;
	inline-size: 100%;
	max-inline-size: 100%;
	margin-inline: auto;
	box-sizing: border-box;
	font-family: var(--bp-cf-font);
	color: var(--bp-cf-fg);
	background: transparent;
	padding-block: 32px 64px;
	padding-inline: 0;
}

.bp-contact-form *,
.bp-contact-form *::before,
.bp-contact-form *::after {
	box-sizing: border-box;
}

.bp-contact-form__inner {
	max-inline-size: var(--bp-cf-max-w);
	inline-size: 100%;
	margin-inline: auto;
	padding-inline: clamp(20px, 3vw, 32px);
}

/* ================== Container ==================
 * One elegant internal container divided vertically. Subtle
 * cream background, thin beige border, modest rounded corners,
 * no heavy shadow. */
.bp-contact-form__container {
	display: grid;
	grid-template-columns:
		minmax(0, var(--bp-cf-form-basis))
		1px
		minmax(0, 1fr);
	column-gap: var(--bp-cf-col-gap);
	align-items: start;
	background-color: var(--bp-cf-bg);
	border: 1px solid var(--bp-cf-border);
	border-radius: var(--bp-cf-radius);
	padding: var(--bp-cf-pad);
	/* overflow: visible so the custom dropdown's floating
	 * listbox can render below the field without being
	 * clipped by the container's rounded corners. */
	overflow: visible;
}

.bp-contact-form__divider {
	grid-column: 2;
	grid-row: 1;
	align-self: stretch;
	inline-size: 1px;
	block-size: 100%;
	background-color: var(--bp-cf-divider);
}

/* ================== Form side ================== */
.bp-contact-form__form {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-inline-size: 0;
}

.bp-contact-form__form-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.bp-contact-form__form-heading-icon {
	inline-size: 22px;
	block-size: 22px;
	color: var(--bp-cf-olive);
	display: inline-block;
	line-height: 1;
	font-size: 22px;
}
.bp-contact-form__form-heading-icon--leaf {
	filter: hue-rotate(0deg);
}

.bp-contact-form__form-heading {
	margin: 0;
	font-family: var(--bp-cf-display);
	font-weight: 400;
	font-size: 26px;
	line-height: 1.15;
	letter-spacing: 0.01em;
	color: var(--bp-cf-title);
}

.bp-contact-form__form-divider {
	inline-size: 44px;
	block-size: 1.5px;
	background-color: var(--bp-cf-olive);
	margin-block-start: 2px;
	border-radius: 1px;
}

/* ---- Form element ---- */
.bp-contact-form__form-element {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Honeypot: visually + a11y hidden, kept in the DOM so bots
 * that fill every input get caught server-side. */
.bp-contact-form__honeypot {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---- Field grid ----
 * Two-column grid for the form. Single fields (company, message)
 * span both columns. */
.bp-contact-form__form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--bp-cf-field-gap);
}

.bp-contact-form__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-inline-size: 0;
}

.bp-contact-form__field--full {
	grid-column: 1 / -1;
}

.bp-contact-form__label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bp-cf-title);
}

.bp-contact-form__req {
	color: var(--bp-cf-title);
	margin-inline-start: 2px;
}

/* ---- Inputs ---- */
.bp-contact-form__input {
	display: block;
	inline-size: 100%;
	min-block-size: var(--bp-cf-input-height);
	padding: 10px 14px;
	border: 1px solid var(--bp-cf-input-border);
	border-radius: var(--bp-cf-input-radius);
	background-color: var(--bp-cf-input-bg);
	color: var(--bp-cf-input-fg);
	font: inherit;
	font-size: 14px;
	line-height: 1.4;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.bp-contact-form__input::placeholder {
	color: var(--bp-cf-muted);
	opacity: 1;
}

.bp-contact-form__input:hover {
	border-color: #C9C0A9;
}

.bp-contact-form__input:focus,
.bp-contact-form__input:focus-visible {
	outline: none;
	border-color: var(--bp-cf-title);
	box-shadow: 0 0 0 3px rgba(55, 79, 55, 0.15);
}

.bp-contact-form__input--invalid,
.bp-contact-form__input--invalid:hover,
.bp-contact-form__input--invalid:focus {
	border-color: #B23A48;
	box-shadow: 0 0 0 2px rgba(178, 58, 72, 0.18);
}

.bp-contact-form__input--textarea {
	min-block-size: var(--bp-cf-textarea-h);
	resize: vertical;
	line-height: 1.5;
}

/* ---- Custom dropdown (Pays / Sujet) ----
 * WAI-ARIA listbox pattern. The native <select> is kept in
 * the DOM (it carries `name` / `required` for the form
 * submission and the PHP sanitisation) but is visually
 * hidden so the custom button + listbox can own the visible
 * experience. bp-contact-form.js syncs every user selection
 * back to the native <select>'s `.value`, so all existing
 * form / nonce / AJAX / validation logic keeps working
 * untouched. Scoped strictly under .bp-contact-form so it
 * never leaks into other widgets. Uses logical properties
 * so RTL on /ar/ mirrors automatically. */
.bp-contact-form .bp-cf-select {
	position: relative;
	inline-size: 100%;
}

/* Visually hidden native <select>. Still in the DOM so the
 * FormData() read + the required-field check + the PHP
 * sanitisation can all read .value / name. */
.bp-contact-form .bp-cf-select__native {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Trigger button (closed state) — visually identical to the
 * other inputs: same cream background, same hairline beige
 * border, same dark-green text, same 6–8px radius, same
 * 44–48px min height. The custom chevron replaces the OS
 * arrow. */
.bp-contact-form .bp-cf-select__button {
	display: flex;
	align-items: center;
	gap: 12px;
	inline-size: 100%;
	min-block-size: var(--bp-cf-input-height);
	padding: 10px 14px;
	border: 1px solid var(--bp-cf-input-border);
	border-radius: var(--bp-cf-input-radius);
	background-color: var(--bp-cf-input-bg);
	color: var(--bp-cf-input-fg);
	font: inherit;
	font-size: 14px;
	line-height: 1.4;
	text-align: start;
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.bp-contact-form .bp-cf-select__button:hover {
	border-color: #C9C0A9;
}

.bp-contact-form .bp-cf-select__button:focus,
.bp-contact-form .bp-cf-select__button:focus-visible {
	outline: none;
	border-color: var(--bp-cf-title);
	box-shadow: 0 0 0 3px rgba(55, 79, 55, 0.15);
}

.bp-contact-form .bp-cf-select__button[aria-expanded="true"] {
	border-color: var(--bp-cf-title);
	box-shadow: 0 0 0 3px rgba(55, 79, 55, 0.15);
}

/* Placeholder state: the native <select> is empty, so the
 * label shows the placeholder text in the muted token. */
.bp-contact-form .bp-cf-select__button[data-empty="true"] .bp-cf-select__label {
	color: var(--bp-cf-muted);
}

.bp-contact-form .bp-cf-select__label {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: start;
}

.bp-contact-form .bp-cf-select__chevron {
	flex: none;
	inline-size: 12px;
	block-size: 12px;
	color: var(--bp-cf-title);
	transition: transform 0.18s ease;
}

.bp-contact-form .bp-cf-select__button[aria-expanded="true"] .bp-cf-select__chevron {
	transform: rotate(180deg);
}

/* Floating listbox (open state). Cream surface, hairline
 * border, premium soft shadow, generous rounding, scrollable
 * with a soft cap on max-block-size. Sits above the form
 * panel via z-index so it never gets clipped by the
 * container's overflow: hidden. */
.bp-contact-form .bp-cf-select__listbox {
	position: absolute;
	inset-block-start: calc(100% + 6px);
	inset-inline-start: 0;
	inline-size: 100%;
	z-index: 20;
	list-style: none;
	margin: 0;
	padding: 6px;
	background-color: var(--bp-cf-input-bg);
	border: 1px solid var(--bp-cf-input-border);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(31, 42, 31, 0.12);
	max-block-size: 260px;
	overflow-y: auto;
	opacity: 0;
	transform: translateY(4px);
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.bp-contact-form .bp-cf-select__listbox:not([hidden]) {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* Option row. Reserves room for the checkmark icon at the
 * inline-start so adding the checkmark on the selected
 * option never causes a layout shift. */
.bp-contact-form .bp-cf-select__option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-radius: 7px;
	font-size: 14px;
	line-height: 1.3;
	color: var(--bp-cf-input-fg);
	cursor: pointer;
	transition: background-color 0.15s ease;
	min-block-size: 40px;
}

.bp-contact-form .bp-cf-select__option-text {
	flex: 1 1 auto;
	text-align: start;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Reserved checkmark slot. Empty by default so the slot is
 * always present (no shift when an option becomes selected);
 * filled with a small dark-green check on the selected row. */
.bp-contact-form .bp-cf-select__option::before {
	content: '';
	display: inline-block;
	inline-size: 14px;
	block-size: 14px;
	flex: none;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-image: none;
}

.bp-contact-form .bp-cf-select__option:hover,
.bp-contact-form .bp-cf-select__option.is-active {
	background-color: rgba(55, 79, 55, 0.07);
	color: var(--bp-cf-title);
}

.bp-contact-form .bp-cf-select__option[aria-selected="true"] {
	background-color: rgba(55, 79, 55, 0.10);
	font-weight: 600;
	color: var(--bp-cf-title);
}

.bp-contact-form .bp-cf-select__option[aria-selected="true"]::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23374F37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5 L6 10.5 L11 4.5'/%3E%3C/svg%3E");
}

/* Invalid state mirrors the other text inputs so the form
 * shows the same red hairline + glow when the user submits
 * without picking an option. */
.bp-contact-form .bp-cf-select__button[aria-invalid="true"] {
	border-color: #B23A48;
	box-shadow: 0 0 0 2px rgba(178, 58, 72, 0.18);
}

/* Soft scrollbar for the open listbox. Modern browsers honour
 * the colour-tinted track + thumb; older browsers fall back
 * to the OS default. */
.bp-contact-form .bp-cf-select__listbox::-webkit-scrollbar {
	inline-size: 6px;
}
.bp-contact-form .bp-cf-select__listbox::-webkit-scrollbar-thumb {
	background-color: rgba(55, 79, 55, 0.25);
	border-radius: 3px;
}
.bp-contact-form .bp-cf-select__listbox::-webkit-scrollbar-track {
	background-color: transparent;
}

/* ---- Consent ---- */
.bp-contact-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--bp-cf-muted);
	cursor: pointer;
	padding-block: 2px;
	user-select: none;
}

.bp-contact-form__consent-input {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.bp-contact-form__consent-box {
	flex: none;
	inline-size: 18px;
	block-size: 18px;
	border: 1.5px solid var(--bp-cf-input-border);
	border-radius: 4px;
	background-color: #FFFFFF;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #FFFFFF;
	transition: background-color 0.15s ease, border-color 0.15s ease;
	margin-block-start: 1px;
}

.bp-contact-form__consent-check {
	opacity: 0;
	transition: opacity 0.15s ease;
}

.bp-contact-form__consent-input:focus-visible + .bp-contact-form__consent-box {
	border-color: var(--bp-cf-title);
	box-shadow: 0 0 0 3px rgba(55, 79, 55, 0.15);
}

.bp-contact-form__consent-input:checked + .bp-contact-form__consent-box {
	background-color: var(--bp-cf-title);
	border-color: var(--bp-cf-title);
}

.bp-contact-form__consent-input:checked + .bp-contact-form__consent-box .bp-contact-form__consent-check {
	opacity: 1;
}

.bp-contact-form__consent-text {
	color: var(--bp-cf-muted);
}

.bp-contact-form__consent-link {
	color: var(--bp-cf-title);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.bp-contact-form__consent--invalid .bp-contact-form__consent-box {
	border-color: #B23A48;
	box-shadow: 0 0 0 2px rgba(178, 58, 72, 0.18);
}

/* ---- Actions / submit ---- */
.bp-contact-form__actions {
	margin-block-start: 4px;
}

.bp-contact-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-block-size: var(--bp-cf-input-height);
	padding: 12px 22px;
	border: 0;
	border-radius: var(--bp-cf-input-radius);
	background-color: var(--bp-cf-submit-bg);
	color: var(--bp-cf-submit-fg);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.bp-contact-form__submit:hover,
.bp-contact-form__submit:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(55, 79, 55, 0.25);
	outline: none;
}

.bp-contact-form__submit[disabled] {
	opacity: 0.6;
	cursor: progress;
	transform: none;
	box-shadow: none;
}

.bp-contact-form__submit-icon {
	flex: none;
}

.bp-contact-form__feedback {
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	min-block-size: 1.2em;
}

.bp-contact-form__feedback[data-state="success"] {
	color: #2E7D32;
}

.bp-contact-form__feedback[data-state="error"] {
	color: #B23A48;
}

.bp-contact-form__feedback[data-state="pending"] {
	color: var(--bp-cf-muted);
}

/* ================== Right column ================== */
.bp-contact-form__right {
	grid-column: 3;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-inline-size: 0;
}

.bp-contact-form__right-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.bp-contact-form__right-heading {
	margin: 0;
	font-family: var(--bp-cf-display);
	font-weight: 400;
	font-size: 26px;
	line-height: 1.15;
	letter-spacing: 0.01em;
	color: var(--bp-cf-title);
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bp-contact-form__right-divider {
	inline-size: 44px;
	block-size: 1.5px;
	background-color: var(--bp-cf-olive);
	margin-block-start: 2px;
	border-radius: 1px;
}

/* ---- Contact methods ----
 * Text goes BESIDE the icon, not underneath. The grid uses
 * `auto minmax(0, 1fr)` so the icon column is intrinsically
 * sized and the text column gets the rest. */
.bp-contact-form__methods {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	row-gap: var(--bp-cf-method-gap);
}

.bp-contact-form__method {
	display: block;
	min-inline-size: 0;
}

.bp-contact-form__method-link {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 14px;
	text-decoration: none;
	color: inherit;
	padding: 4px 0;
	border-radius: 6px;
	transition: background-color 0.15s ease;
}

a.bp-contact-form__method-link:hover,
a.bp-contact-form__method-link:focus-visible {
	background-color: rgba(55, 79, 55, 0.05);
	outline: none;
}

.bp-contact-form__method-link--static {
	cursor: default;
}

.bp-contact-form__method-icon-wrap {
	flex: none;
	inline-size: var(--bp-cf-icon-badge);
	block-size: var(--bp-cf-icon-badge);
	border-radius: 50%;
	background-color: var(--bp-cf-icon-badge-bg);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--bp-cf-title);
}

.bp-contact-form__method-icon {
	inline-size: var(--bp-cf-icon-size);
	block-size: var(--bp-cf-icon-size);
	object-fit: contain;
}

.bp-contact-form__method-icon--placeholder {
	inline-size: calc(var(--bp-cf-icon-size) * 0.55);
	block-size: calc(var(--bp-cf-icon-size) * 0.55);
	background-color: var(--bp-cf-title);
	border-radius: 2px;
	opacity: 0.6;
}

.bp-contact-form__method-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-inline-size: 0;
}

.bp-contact-form__method-title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--bp-cf-title);
	text-transform: uppercase;
}

.bp-contact-form__method-primary {
	font-size: 14px;
	font-weight: 600;
	color: var(--bp-cf-fg);
	word-break: break-word;
}

.bp-contact-form__method-secondary {
	font-size: 12.5px;
	color: var(--bp-cf-muted);
	line-height: 1.4;
}

/* ---- Resource panel ----
 * Soft beige/cream fill, no heavy border/shadow. Compact. */
.bp-contact-form__resource {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 12px;
	align-items: flex-start;
	background-color: var(--bp-cf-resource-bg);
	border-radius: 10px;
	padding: 16px 18px;
}

.bp-contact-form__resource-icon {
	inline-size: 20px;
	block-size: 20px;
	object-fit: contain;
	color: var(--bp-cf-title);
	margin-block-start: 2px;
}

.bp-contact-form__resource-icon--placeholder {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: var(--bp-cf-title);
}

.bp-contact-form__resource-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-inline-size: 0;
}

.bp-contact-form__resource-intro {
	margin: 0;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--bp-cf-title);
	line-height: 1.4;
}

.bp-contact-form__resource-description {
	margin: 0;
	font-size: 12.5px;
	color: var(--bp-cf-muted);
	line-height: 1.5;
}

.bp-contact-form__resource-cta {
	margin-block-start: 4px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bp-cf-title);
	text-decoration: none;
	transition: color 0.15s ease, gap 0.15s ease;
}

.bp-contact-form__resource-cta:hover,
.bp-contact-form__resource-cta:focus-visible {
	color: var(--bp-cf-fg);
	gap: 10px;
	outline: none;
}

/* ================== Tablet ==================
 * Keep the two-column layout, tighten spacing. ~60/40 reads
 * better than 67/33 on smaller screens. */
@media (max-width: 960px) {
	.bp-contact-form {
		--bp-cf-form-basis: 60%;
		--bp-cf-pad: 22px;
		--bp-cf-col-gap: 24px;
	}
}

/* ================== Mobile ==================
 * Stack the two columns. One field per row, full-width
 * textarea, full-width submit. The vertical divider is
 * removed when stacked. */
@media (max-width: 720px) {
	.bp-contact-form {
		--bp-cf-pad: 20px;
		--bp-cf-col-gap: 18px;
		padding-block: 20px 48px;
	}

	.bp-contact-form__container {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 28px;
	}

	.bp-contact-form__divider {
		display: none;
	}

	.bp-contact-form__form,
	.bp-contact-form__right {
		grid-column: 1;
	}

	.bp-contact-form__form-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.bp-contact-form__field--full {
		grid-column: auto;
	}

	.bp-contact-form__submit {
		inline-size: 100%;
	}
}

/* ================== ≤480px ==================
 * Extra defenses to guarantee a true one-column layout on the
 * smallest phones. Forces the container to a single grid track,
 * explicitly places the contact-info column on row 1 and the
 * form column on row 2, unsticks every direct child from any
 * desktop absolute / offset / transform / min-width rules, and
 * ensures inputs and content blocks fill their column with no
 * overlap. */
@media ( max-width: 480px ) {
	.bp-contact-form__container {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		grid-template-rows: auto auto !important;
		grid-auto-flow: row !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		min-inline-size: 0 !important;
		gap: 24px !important;
		align-items: start !important;
	}

	/* Contact info block (.bp-contact-form__right) — row 1. */
	.bp-contact-form__right {
		grid-column: 1 !important;
		grid-row: 1 !important;
		position: relative !important;
		inset: auto !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		bottom: auto !important;
		transform: none !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		min-inline-size: 0 !important;
		margin: 0 !important;
		box-sizing: border-box !important;
	}

	/* Form block (.bp-contact-form__form) — row 2. */
	.bp-contact-form__form {
		grid-column: 1 !important;
		grid-row: 2 !important;
		position: relative !important;
		inset: auto !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		bottom: auto !important;
		transform: none !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		min-inline-size: 0 !important;
		margin: 0 !important;
		box-sizing: border-box !important;
	}

	/* Divider is hidden on mobile (already at 720px, reinforced here). */
	.bp-contact-form__divider {
		display: none !important;
	}

	/* Internal field grid must collapse to a single column. */
	.bp-contact-form__form-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	/* Every field and card spans the full single column. */
	.bp-contact-form__field,
	.bp-contact-form__field--half,
	.bp-contact-form__field--full,
	.bp-contact-form__method,
	.bp-contact-form__resource {
		grid-column: 1 / -1 !important;
		width: 100% !important;
		min-width: 0 !important;
		min-inline-size: 0 !important;
	}

	.bp-contact-form__input,
	.bp-contact-form .bp-cf-select,
	.bp-contact-form .bp-cf-select__button {
		width: 100% !important;
		min-inline-size: 0 !important;
	}
}