/*
 * Contact enquiry (.bb-contact) and Location (.bb-location) sections —
 * Figma 11217:4466 (Contact) and 11131:752 (Home).
 *
 * .bb-contact lays the details card beside the Contact Form 7 form and turns the form's
 * .bb-form__* wrappers into the two-column grid from the design. .bb-location has the
 * full-width map band used on Home and the pink card used at the bottom of Contact, so
 * both live here rather than in a page file.
 *
 * Sizes, colours and borders are the values from the Figma nodes named in the comments.
 * The mockup's greys and off-whites are a shade away from the theme.json palette, so
 * they are kept as their own variables.
 */

/*
 * The off-palette colours these frames use (#4d2330 / #7a626a / #5f122a text, #fffdfc
 * and #fffdfb fills, #d9bc9e hairlines, #f3ddde card) resolve onto the canonical
 * palette; see docs/design-system.md.
 */

/* ------------------------------------------------------------- contact ---- */

.bb-contact {
	padding: var( --bb-space-band ) var( --bb-bar-gutter ) 0;
}

/* Core's constrained layout centres every child; the section is left-aligned inside the
   shared content column instead. */
.bb-contact > * {
	max-width: var( --bb-container );
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Node 11217:4471 is 32px in Figma; it converges on the shared H2 role. */
.bb-contact__title.wp-block-heading {
	margin: 0;
}

/* Node 11217:4470 is 14/16 in Figma; it converges on the shared lead role. */
.bb-contact .bb-contact__intro {
	margin: var( --bb-space-head ) auto 0;
}

/* The shared 12-column grid (theme.css) with the design's 58px gutter; the exact Figma
   tracks take over at 1280px and up. */
.bb-contact__layout.bb-grid {
	--bb-grid-gap: 58px;
	--bb-grid-row-gap: 32px;
	margin-top: var( --bb-space-intro );
}

/* details card */

/* 11217:4473 — 300px wide; the card chrome is the shared card role in theme.css.
   The extra classes beat core's `:root :where(.is-layout-flow) > :first-child` reset. */
.bb-contact .bb-contact__layout .bb-contact__card {
	margin-top: 19px;
	padding: var( --bb-card-pad );
}

/* The rows sit on a 100px rhythm (11217:4416 → 4420 → 4422 → 4424). */
.bb-contact__row {
	min-height: 100px;
}

.bb-contact__row:last-child {
	min-height: 0;
}

/* Type: the shared label role (node 11217:4416 is 11px). */
.bb-contact__label {
	margin: 0 0 14px;
}

/* Type: the shared small role (node 11217:4417 is 12/20). */
.bb-contact__value {
	margin: 0;
}

/* The 18px line box is well under a usable touch target, so the link takes padding and
   gives it straight back as margin: a 34px target, the card's layout unchanged. */
.bb-contact__value a {
	display: inline-block;
	margin-block: -8px;
	padding-block: 8px;
	color: inherit;
	text-decoration: none;
}

.bb-contact__value a:hover {
	color: var( --bb-accent );
	text-decoration: underline;
}

/* form */

/* 11217:4491 — the form column is 725px wide (two 350px fields, 25px apart), not the
   full width of the row. */
.bb-contact__form {
	min-width: 0;
	max-width: 725px;
}

/* Type: the shared card-heading role (node 11217:4492), 25px above the first field. */
.bb-contact__form-title.wp-block-heading {
	margin: 0 0 25px;
}

/* The design shows placeholders only, so the labels stay for screen readers alone. */
.bb-contact__form .wpcf7 label {
	position: absolute;
	clip-path: inset( 50% );
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
}

/* 11217:4593 — two 350px columns, 25px apart, rows 22px apart. */
.bb-form__grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 22px 25px;
}

.bb-form__field {
	margin: 0;
}

.bb-form__field--wide {
	grid-column: 1 / -1;
}

.bb-contact__form .wpcf7 .wpcf7-form-control-wrap {
	display: block;
}

/* The field chrome is the shared form role in theme.css (11217:4427 / 11217:4428). */
.bb-contact__form .wpcf7 :is( input[type="text"], input[type="email"], input[type="tel"], select ) {
	height: 48px;
	padding-block: 0;
}

/* 11217:4435 — 150px tall. */
.bb-contact__form .wpcf7 textarea {
	height: 150px;
	min-height: 150px;
}

.bb-contact__form .wpcf7 select {
	color: var( --bb-ink-muted );
}

/* Node 11217:4594 is the shared compact control button (theme.css), 36px below the
   message field. */
.bb-form__submit {
	margin: 36px 0 0;
}

.bb-main .bb-contact__form .wpcf7 input[type="submit"] {
	min-width: 165px;
}

/* ------------------------------------------------------------ location ---- */

.bb-location > * {
	max-width: var( --bb-container );
	margin-left: auto !important;
	margin-right: auto !important;
}

.bb-location__map {
	overflow: hidden;
	background: var( --bb-bg-alt );
	line-height: 0;
}

.bb-location__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.bb-location__heading.wp-block-heading {
	margin: 0;
}

.bb-location__text {
	margin: 0;
}

/* full-width map band (Home) — 11131:752: 120px padding, 52px between the row and the
   map, 32px between the heading and the text. */

.bb-location--wide {
	padding: var( --bb-space-band ) var( --bb-bar-gutter );
}

.bb-location--wide .bb-location__head.bb-grid {
	--bb-grid-gap: 32px;
	--bb-grid-row-gap: 16px;
}

/* Type: the shared H2 role in theme.css (node 11131:755). */

/* 11131:756 — the body role at 60% opacity. */
.bb-location--wide .bb-location__head .bb-location__text {
	opacity: 0.6;
}

.bb-location--wide .bb-location__text + .bb-location__text {
	margin-top: 8px;
}

/* 11131:757 puts the whole wide band on a 1200px column at x120, not the 1240 default. */
.bb-location--wide > * {
	max-width: 1200px;
}

/* 11131:757 — 596px tall, 30px corners, 52px below the row. */
.bb-location--wide .bb-location__map {
	margin-top: 52px;
	height: 596px;
	border-radius: var( --bb-radius-lg );
}

.bb-location--wide .bb-location__buttons {
	margin-top: 40px;
}

/* pink card (Contact) — 11217:4525: 1260 × 220, #f3ddde, 1px #dda6a3, square corners;
   the 775 × 195 map sits 21px in and 25px down (11217:4596). */

.bb-location--card {
	padding: var( --bb-space-lg ) var( --bb-bar-gutter ) var( --bb-space-band );
}

.bb-location__card.bb-grid {
	--bb-grid-gap: 43px;
	--bb-grid-row-gap: 20px;

	min-height: 220px;
	padding: 25px 21px; /* equal inset all round; the map fills the row */
	border: var( --bb-border-w ) solid var( --bb-border-soft );
	border-radius: var( --bb-radius-md );
	background: var( --bb-bg-alt );
}

.bb-location--card .bb-location__map {
	min-height: 195px;
	align-self: stretch; /* as tall as the text column, never shorter than the Figma 195 */
	border: var( --bb-border-w ) solid var( --bb-border-soft );
	border-radius: var( --bb-radius-sm );
}

/* The text column starts 7px above the map (11217:4527 at y 1032). */
.bb-location--card .bb-location__body {
	padding-top: 7px;
}

/* Type: the shared card-heading role (node 11217:4527 is 31px). */

/* Node 11217:4528 is 14/16; the body role, 16px under the heading. */
.bb-location--card .bb-location__text {
	margin-top: 16px;
}

/* Nodes 11217:4529 / 11220:409 are the shared compact control button (theme.css),
   150px wide, 22px apart, 30px under the text. */
/* The extra class keeps the design's 22px gap against the shared 27px pill gap. */
.bb-main .bb-location--card .bb-location__buttons.wp-block-buttons {
	margin-top: 30px;
	gap: 22px;
}

.bb-main .bb-location--card .bb-location__buttons .wp-block-button__link {
	min-width: 150px;
}

/* ---------------------------------------------------------- responsive ---- */

/* The exact Figma tracks: 11217:4473 + 11217:4491 (300px card, 725px form, 58px apart),
   11131:753 (heading column + a 524px text column) and 11217:4596 (a 775px map beside
   the text). Below 1280px the shared grid's spans take over. */
@media ( min-width: 1280px ) {
	.bb-contact__layout.bb-grid {
		grid-template-columns: 300px minmax( 0, 1fr );
	}

	.bb-location--wide .bb-location__head.bb-grid {
		grid-template-columns: minmax( 0, 1fr ) 524px;
	}

	.bb-location__card.bb-grid {
		grid-template-columns: 775px minmax( 0, 1fr );
	}

	.bb-contact__layout > .bb-col,
	.bb-location__head > .bb-col,
	.bb-location__card > .bb-col {
		grid-column: auto;
	}
}

/* Below the exact-track breakpoint the text column is narrower than the two 150px
   buttons side by side, so they size to their label instead. */
@media ( max-width: 1279px ) {
	.bb-main .bb-location--card .bb-location__buttons .wp-block-button__link {
		min-width: 0;
	}
}

@media ( max-width: 1024px ) {
	.bb-contact .bb-contact__layout .bb-contact__card {
		padding: var( --bb-card-pad-sm );
	}

	.bb-location--wide .bb-location__map {
		height: clamp( 280px, 41vw, 596px );
	}

	.bb-location__card.bb-grid {
		padding: 20px;
	}

	.bb-location--card .bb-location__map {
		height: 100%;
		min-height: 195px;
	}

	.bb-location--card .bb-location__body {
		padding-top: 0;
	}
}

@media ( max-width: 781px ) {
	.bb-contact__layout.bb-grid {
		margin-top: 40px;
	}

	.bb-contact .bb-contact__layout .bb-contact__card {
		margin-top: 0;
	}

	.bb-contact__row {
		min-height: 0;
	}

	.bb-contact__row + .bb-contact__row {
		margin-top: 28px;
	}

	.bb-form__grid {
		grid-template-columns: minmax( 0, 1fr );
		gap: 16px;
	}

	.bb-form__submit {
		margin-top: 28px;
	}

	.bb-main .bb-contact__form .wpcf7 input[type="submit"] {
		width: 100%;
	}

	.bb-location--wide .bb-location__map {
		margin-top: 32px;
		height: clamp( 240px, 70vw, 400px );
		border-radius: 16px;
	}

	.bb-location__card.bb-grid {
		padding: 16px;
	}

	.bb-location--card .bb-location__map {
		height: 195px;
		min-height: 0;
	}

	.bb-main .bb-location--card .bb-location__buttons .wp-block-button__link {
		min-width: 150px;
	}
}