/**
 * Contact — page-specific styles.
 *
 * Reuses global primitives from global.css wherever possible:
 *   - Hero: .ba-section--c-hero + .ba-c-hero (same as FAQ / Pricing)
 *   - Section 4 outer: .ba-section--soft (tokenised bg / padding / radius)
 *   - Banner: .ba-banner (global §21)
 *
 * All numeric values use design tokens from global.css §2 unless marked as
 * an intentional 1-1 match with an existing global primitive.
 */

/* ---------------------------------------------------------------------------
 * Eyebrows above section titles.
 * -------------------------------------------------------------------------*/
.ba-contact-details__eyebrow,
.ba-contact-form__eyebrow,
.ba-contact-book__eyebrow,
.ba-contact-options__eyebrow { display: inline-block; margin-bottom: var(--ba-space-3); }

/* ---------------------------------------------------------------------------
 * Shared contact card primitive (sections 2 + 3).
 * -------------------------------------------------------------------------*/
.ba-contact-card {
	background: var(--ba-section-bg-1);
	border: 1px solid var(--ba-border-soft);
	border-radius: var(--ba-radius-md);
	padding: var(--ba-space-7);
}

/* ---------------------------------------------------------------------------
 * Section 2 — Contact details + Send a message (two cards).
 * -------------------------------------------------------------------------*/
.ba-contact-grid {
	display: grid;
	grid-template-columns: 360fr 892fr;
	gap: var(--ba-gap-xl);
	align-items: stretch;
}

/* ---- Left card: contact details ---------------------------------------- */
.ba-contact-details { display: flex; flex-direction: column; }
/* Local medium-heading size used by both contact cards. No system token
 * matches exactly (h2=50, h3=24) so we pick a balanced 32px value. */
.ba-contact-details__title,
.ba-contact-form__title {
	font-family: var(--ba-font-heading);
	font-weight: 400;
	font-size: 32px;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--ba-text-primary);
	margin: 0;
}
.ba-contact-details__body {
	font-size: var(--ba-fs-body);
	line-height: var(--ba-lh-body);
	color: var(--ba-text-muted);
	margin: var(--ba-space-3) 0 0;
}
.ba-contact-details__list {
	list-style: none;
	margin: var(--ba-space-8) 0 0;
	padding: 0;
}
.ba-contact-details__item {
	padding: var(--ba-space-4) 0;
	border-top: 1px solid var(--ba-border-soft);
}
.ba-contact-details__item:first-child { border-top: 0; padding-top: 0; }
.ba-contact-details__item:last-child  { padding-bottom: 0; }
.ba-contact-details__row {
	display: flex;
	align-items: center;
	gap: var(--ba-gap-md);
	color: inherit;
	text-decoration: none;
}
.ba-contact-details__avatar {
	flex: 0 0 auto;
	width: var(--ba-space-8);
	height: var(--ba-space-8);
	border-radius: var(--ba-radius-pill);
	background: var(--ba-section-bg-3);
	color: var(--ba-text-secondary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.ba-contact-details__avatar svg { width: 18px; height: 18px; display: block; }
.ba-contact-details__text {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: var(--ba-space-1);
	min-width: 0;
}
.ba-contact-details__label {
	font-size: var(--ba-fs-small);
	font-weight: 500;
	color: var(--ba-text-secondary);
}
.ba-contact-details__value {
	font-size: var(--ba-fs-body);
	color: var(--ba-text-secondary);
	word-break: break-word;
}
.ba-contact-details__chev {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ba-text-muted);
	transition: transform var(--ba-transition);
}
.ba-contact-details__chev svg { width: 15px; height: 15px; display: block; }
.ba-contact-details__row:hover .ba-contact-details__chev {
	color: var(--ba-text-primary);
	transform: translateX(2px);
}

.ba-contact-details__media {
	margin-top: var(--ba-space-12);
	height: 230px;
	border-radius: var(--ba-radius-sm);
	overflow: hidden;
	background: linear-gradient(180deg, #EDE1D5, #D8CBBE);
	position: relative;
}
.ba-contact-details__media img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}

/* ---- Right card: form -------------------------------------------------- */
.ba-contact-form { display: flex; flex-direction: column; }
.ba-contact-form__body {
	font-size: var(--ba-fs-body);
	line-height: var(--ba-lh-body);
	color: var(--ba-text-muted);
	margin: var(--ba-space-3) 0 0;
}
/* Form wrapper — spacing below card title. */
.ba-contact-form__form {
	margin-top: var(--ba-space-9);
}
.ba-contact-form__disclaimer {
	margin: var(--ba-space-6) 0 0;
	font-size: var(--ba-fs-small);
	line-height: var(--ba-lh-body);
	color: var(--ba-text-muted);
}

/* ---------------------------------------------------------------------------
 * Fluent Forms — scoped to the Contact card only.
 *
 * We deliberately prefix every rule with `.ba-contact-form__form .ff-default`
 * so each selector gains one more class than Fluent's own stylesheet
 * (which uses `.ff-default .<hook>`) and wins the cascade. A handful of
 * properties also need `!important` because Fluent ships element-typed
 * selectors (e.g. `input[type="text"].ff-el-form-control`) that match our
 * specificity and load after this sheet.
 *
 * Design tokens (client-provided):
 *   - Label: Instrument Sans 400 / 13px / #453124, gap 10px below
 *   - Field: bg rgba(255,255,255,0.56), pad 18px, radius 18px,
 *            border 1px solid rgba(56,39,30,0.06)
 *   - Placeholder: #6F6258, Instrument Sans 400 / 14px
 *   - Gap between fields: 18px, 28px before checkbox
 *   - Checkbox: 20x20, radius 4, border rgba(56,39,30,0.07)
 *   - Checkbox text: Instrument Sans 400 14px #6F6258
 *   - Submit: primary button style (matches .ba-btn--primary)
 * -------------------------------------------------------------------------*/

/* Reset Fluent's fieldset chrome and form padding. */
.ba-contact-form__form .ff-default .ff-el-form-top fieldset { all: unset; display: block; }
.ba-contact-form__form .ff-default form { margin: 0; padding: 0; }

/* 1. Vertical stack — one source of truth for spacing.
 * Scope strictly to <form> (element + class). The `.ff-el-form-top` class
 * is ALSO applied by Fluent to inner `.ff-el-group` elements (e.g. inside
 * the Name field wrapper) — targeting the bare class would turn those
 * groups into flex containers and collapse their inputs to half width. */
.ba-contact-form__form .ff-default form.ff-el-form-top {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.ba-contact-form__form .ff-default form.ff-el-form-top > fieldset {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
/* Kill Fluent's own default bottom margins on rows/groups so `gap` rules. */
.ba-contact-form__form .ff-default .ff-t-container,
.ba-contact-form__form .ff-default .ff-el-group { margin: 0 !important; }
/* Neutralise Fluent's `.fluentform .ff-el-group.ff-el-form-top .ff-el-input--content { margin-left:auto }`
 * rule — it pushes Name inputs to the right half of their cell. */
.ba-contact-form__form .ff-default .ff-el-input--content {
	margin-left: 0 !important;
	width: 100%;
}

/* 2. Two-column rows use CSS grid so we control the 18px column gap.
 * (Fluent ships flex-basis inline styles; grid auto-overrides them.) */
.ba-contact-form__form .ff-default .ff-t-container.ff-column-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}
.ba-contact-form__form .ff-default .ff-t-container.ff-column-container > .ff-t-cell {
	flex-basis: auto !important;
	width: auto;
	padding: 0;
}
/* Nested single-cell container used inside the Name field wrapper. */
.ba-contact-form__form .ff-default .ff-name-field-wrapper > .ff-t-container { display: block; }
.ba-contact-form__form .ff-default .ff-name-field-wrapper .ff-t-cell { padding: 0; }

/* 3. Labels (above fields). */
.ba-contact-form__form .ff-default .ff-el-input--label {
	margin-bottom: 10px !important;
	padding: 0;
}
.ba-contact-form__form .ff-default .ff-el-input--label label {
	font-family: var(--ba-font-body) !important;
	font-weight: 400 !important;
	font-size: 13px !important;
	line-height: 1.2 !important;
	color: #453124 !important;
	margin: 0;
	padding: 0;
}
/* Hide required asterisks (no required fields per spec). */
.ba-contact-form__form .ff-default .ff-el-input--label.asterisk-right label::after,
.ba-contact-form__form .ff-default .ff-el-input--label label .ff_required { display: none !important; }
/* Hide the wrapper label above the checkbox ("Checkbox Field") — the
 * checkbox has its own self-explanatory inline label. */
.ba-contact-form__form .ff-default .ff-el-group:has(> .ff-el-input--content > .ff-el-form-check) > .ff-el-input--label {
	display: none !important;
}

/* 4. Input / select / textarea — shared field look.
 * !important is required because Fluent ships
 * `.ff-default input[type="text"].ff-el-form-control` which ties on
 * specificity and wins by cascade order. */
.ba-contact-form__form .ff-default .ff-el-form-control,
.ba-contact-form__form .ff-default input.ff-el-form-control,
.ba-contact-form__form .ff-default select.ff-el-form-control,
.ba-contact-form__form .ff-default textarea.ff-el-form-control {
	width: 100%;
	box-sizing: border-box;
	padding: 18px !important;
	background: rgba(255, 255, 255, 0.56) !important;
	border: 1px solid rgba(56, 39, 30, 0.06) !important;
	border-radius: 18px !important;
	font-family: var(--ba-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.4;
	color: var(--ba-text-primary);
	outline: none;
	box-shadow: none;
	transition: border-color var(--ba-transition), background var(--ba-transition);
	appearance: none;
	-webkit-appearance: none;
	height: auto;
	min-height: 0;
}
.ba-contact-form__form .ff-default textarea.ff-el-form-control {
	min-height: 140px;
	resize: vertical;
}
/* Native select chevron. */
.ba-contact-form__form .ff-default select.ff-el-form-control {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'><path d='M3.5 5.25L7 8.75L10.5 5.25' stroke='%236F6258' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
	background-repeat: no-repeat !important;
	background-position: right 18px center !important;
	padding-right: 44px !important;
}
/* Placeholder. */
.ba-contact-form__form .ff-default .ff-el-form-control::placeholder {
	color: #6F6258 !important;
	font-family: var(--ba-font-body);
	font-weight: 400;
	font-size: 14px;
	opacity: 1;
}
/* Focus state. */
.ba-contact-form__form .ff-default .ff-el-form-control:focus {
	border-color: rgba(56, 39, 30, 0.24) !important;
	background: rgba(255, 255, 255, 0.78) !important;
}

/* 5. 28px gap before the checkbox group (18 from flex `gap` + 10 margin-top). */
.ba-contact-form__form .ff-default .ff-el-group:has(> .ff-el-input--content > .ff-el-form-check) {
	margin-top: 10px !important;
}

/* 6. Checkbox row.
 * Text — Instrument Sans 400 14px #6F6258.
 * Box  — 20x20, radius 4, border rgba(56,39,30,0.07). */
.ba-contact-form__form .ff-default .ff-el-form-check { padding: 0; }
.ba-contact-form__form .ff-default .ff-el-form-check-label {
	display: inline-flex !important;
	align-items: flex-start;
	gap: 10px;
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--ba-font-body) !important;
	font-weight: 400 !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: #6F6258 !important;
	cursor: pointer;
}
.ba-contact-form__form .ff-default .ff-el-form-check-label > span {
	font-family: var(--ba-font-body) !important;
	font-weight: 400 !important;
	font-size: 14px !important;
	color: #6F6258 !important;
}
.ba-contact-form__form .ff-default .ff-el-form-check-input[type="checkbox"] {
	flex: 0 0 auto;
	appearance: none !important;
	-webkit-appearance: none !important;
	width: 20px !important;
	height: 20px !important;
	margin: 1px 0 0 !important;
	border: 1px solid rgba(56, 39, 30, 0.07) !important;
	border-radius: 4px !important;
	background: rgba(255, 255, 255, 0.56) !important;
	cursor: pointer;
	display: inline-grid !important;
	place-content: center;
	transition: background var(--ba-transition), border-color var(--ba-transition);
	box-shadow: none !important;
}
.ba-contact-form__form .ff-default .ff-el-form-check-input[type="checkbox"]:checked {
	background: var(--ba-text-primary) !important;
	border-color: var(--ba-text-primary) !important;
}
.ba-contact-form__form .ff-default .ff-el-form-check-input[type="checkbox"]:checked::before {
	content: "";
	width: 12px;
	height: 12px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><path d='M2.5 6.2L5 8.5L9.5 3.5' stroke='%23FBF7F2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center;
}

/* 7. Submit button — mirror .ba-btn--primary (global §6). */
.ba-contact-form__form .ff-default .ff_submit_btn_wrapper { text-align: left !important; }
.ba-contact-form__form .ff-default .ff-btn-submit,
.ba-contact-form__form .ff-default button.ff-btn-submit,
.ba-contact-form__form .ff-default .ff_btn_style {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 24px !important;
	border-radius: 12px !important;
	font-family: var(--ba-font-body) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	border: 1px solid transparent !important;
	background: var(--ba-text-primary) !important;
	background-image: none !important;
	color: var(--ba-text-on-dark) !important;
	cursor: pointer;
	text-decoration: none;
	text-transform: none;
	box-shadow: none !important;
	transition: background-color var(--ba-transition), color var(--ba-transition), border-color var(--ba-transition), transform var(--ba-transition);
}
.ba-contact-form__form .ff-default .ff-btn-submit:hover,
.ba-contact-form__form .ff-default button.ff-btn-submit:hover,
.ba-contact-form__form .ff-default .ff_btn_style:hover {
	background: var(--ba-text-secondary) !important;
	color: var(--ba-text-on-dark) !important;
}
.ba-contact-form__form .ff-default .ff-btn-submit:focus-visible {
	outline: 2px solid var(--ba-text-primary);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Section 3 — Prefer to book online?
 * -------------------------------------------------------------------------*/
.ba-contact-book {
	display: grid;
	grid-template-columns: 640fr 615fr;
	gap: var(--ba-gap-xl);
	align-items: stretch;
}
.ba-contact-book__card {
	background: var(--ba-section-bg-1);
	border-radius: var(--ba-radius-image);
	padding: var(--ba-section-pad);
	display: flex;
	flex-direction: column;
}
.ba-contact-book__title {
	font-family: var(--ba-font-heading);
	font-size: var(--ba-fs-h2);
	line-height: var(--ba-lh-heading);
	letter-spacing: -0.015em;
	color: var(--ba-text-primary);
	margin: var(--ba-space-7) 0 0;
	max-width: 18ch;
}
.ba-contact-book__card .ba-eyebrow + .ba-contact-book__title { margin-top: 0; }
.ba-contact-book__body {
	font-size: var(--ba-fs-body);
	line-height: var(--ba-lh-body);
	color: var(--ba-text-secondary);
	margin: var(--ba-space-7) 0 0;
	max-width: 48ch;
}
.ba-contact-book__cta {
	margin-top: var(--ba-space-11);
	display: flex;
	flex-wrap: wrap;
	gap: var(--ba-gap-sm);
}
.ba-contact-book__media {
	position: relative;
	border-radius: var(--ba-radius-image);
	overflow: hidden;
	background: linear-gradient(180deg, #EDE1D5, #D8CBBE);
	min-height: 400px;
}
.ba-contact-book__media img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}

/* ---------------------------------------------------------------------------
 * Section 4 — More options (3 cards inside .ba-section--soft).
 * -------------------------------------------------------------------------*/
/* Top-align title + aside link (global .ba-sec-head is bottom-aligned). */
.ba-contact-options__head { align-items: flex-start; }
/* Link is rendered as a page-scoped clone of .ba-tcard__link; the primitive
 * itself uses margin-top:auto (card-footer alignment) which we undo here. */
.ba-contact-options__link { margin-top: 0; }

.ba-contact-options__sub {
	margin: var(--ba-space-7) 0 0;
	font-size: var(--ba-fs-body);
	line-height: var(--ba-lh-body);
	color: var(--ba-text-secondary);
	max-width: 64ch;
}

.ba-contact-options__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ba-gap-lg);
	margin-top: var(--ba-space-7);
}
.ba-contact-option {
	background: var(--ba-section-bg-2);
	border-radius: var(--ba-radius-md);
	padding: var(--ba-section-pad);
	display: flex;
	flex-direction: column;
}
.ba-contact-option__icon {
	flex: 0 0 auto;
	width: var(--ba-space-9);
	height: var(--ba-space-9);
	border-radius: var(--ba-radius-sm);
	background: var(--ba-section-bg-1);
	color: var(--ba-text-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.ba-contact-option__icon svg { width: 20px; height: 20px; display: block; }
.ba-contact-option__title {
	font-family: var(--ba-font-heading);
	font-size: var(--ba-fs-h3);
	line-height: var(--ba-lh-heading);
	color: var(--ba-text-primary);
	margin: var(--ba-space-5) 0 0;
}
.ba-contact-option__text {
	font-size: var(--ba-fs-body);
	line-height: var(--ba-lh-body);
	color: var(--ba-text-muted);
	margin: var(--ba-space-6) 0 0;
}

/* ---------------------------------------------------------------------------
 * BOTTOM CTA BANNER — page-scoped wrap point for the body copy.
 * Scoped via the unique #contact-banner-title sibling so other banners on the
 * page (none today) are not affected.
 * -------------------------------------------------------------------------*/
#contact-banner-title ~ .ba-banner__text { max-width: 66ch; }

/* ---------------------------------------------------------------------------
 * FLUENT FORMS — success & error feedback messages
 * Override Fluent's default gray border + drop shadow with site card style.
 * -------------------------------------------------------------------------*/
.ba-contact-form__form .ff-message-success {
	border: 1px solid rgba(180, 150, 121, 0.30);
	box-shadow: none;
	background: rgba(237, 225, 213, 0.38);
	border-radius: var(--ba-radius-card, 20px);
	padding: 22px 26px;
	margin-top: 8px;
	font-family: var(--ba-font-body);
	font-size: 15px;
	line-height: 1.55;
	color: var(--ba-text-primary);
}

/* ---------------------------------------------------------------------------
 * RESPONSIVE
 * -------------------------------------------------------------------------*/
@media ( max-width: 1100px ) {
	.ba-contact-grid { grid-template-columns: 1fr; gap: var(--ba-gap-lg); }
	.ba-contact-book { grid-template-columns: 1fr; gap: var(--ba-gap-lg); }
	.ba-contact-book__media { min-height: 320px; }
	.ba-contact-options__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media ( max-width: 720px ) {
	.ba-contact-details__media { height: 200px; }
	.ba-contact-book__media { min-height: 260px; }
	.ba-contact-options__grid { grid-template-columns: 1fr; }

	/* Form: stack two-col rows (Full name / Email, Phone / Dropdown)
	 * into a single column. Gap stays at 18px via the grid `gap` rule. */
	.ba-contact-form__form .ff-default .ff-t-container.ff-column-container {
		grid-template-columns: 1fr;
	}
}