/**
 * Block: firm/cta. Also the editor stylesheet (add_editor_style), so the
 * selectors don't rely on main.css.
 *
 * Mobile-first: full width, logo bar, primary-dark panel, accent button bar. From
 * laptop (64em) the Figma desktop sizes; the block is 580px wide (of the
 * 793px body), aligned left as drawn. With photo: the Firm Settings photo
 * left of the panel. While the consultation button can't be reached, the
 * button bar is a primary call button (main phone, .firm-cta__button--call).
 *
 * Background photo (.firm-cta--background-photo): the photo fills the
 * panel under a veil, behind the title and text; logo bar and button bar
 * as above. Its colors are hooks (settings.custom.cta.*, unset = the
 * fallbacks): logoBackground (surface), panel (primary-dark, behind the
 * photo while it loads), veil (overlay.heavy), text (base), button
 * (accent), buttonText (base), buttonHover (primary).
 */

.firm-cta {
	display: flex;
	flex-direction: column;
	max-inline-size: calc(var(--wp--style--global--content-size) * 580 / 1500);
	overflow: hidden;
	color: var(--wp--preset--color--base);
}

.firm-cta__logo {
	display: flex;
	justify-content: center;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	border: var(--wp--custom--border-width--thin) solid var(--wp--preset--color--surface-alt);
	border-block-start-width: 0;
	border-inline-width: 0;
	background: var(--wp--preset--color--surface);
}

.firm-cta__logo-image {
	display: block;
	inline-size: auto;
	max-inline-size: 100%;
	block-size: var(--wp--custom--logo--footer);
	object-fit: contain;
}

.firm-cta__row {
	display: flex;
	align-items: stretch;
	background: var(--wp--preset--color--primary-dark);
}

.firm-cta__photo {
	flex: 0 0 36%;
	background: var(--wp--preset--color--primary-dark);
}

.firm-cta__photo-image {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center top;
}

.firm-cta__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	text-align: center;
}

.firm-cta .firm-cta__title,
.firm-cta .firm-cta__text {
	margin: 0;
	color: var(--wp--preset--color--base);
}

.firm-cta__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--caption);
}

.firm-cta__text {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--body-xxs);
}

.firm-cta__button {
	display: block;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--accent);
	color: var(--wp--custom--text--on-accent, var(--wp--preset--color--base));
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--h-4);
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

.firm-cta__button:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--custom--text--on-primary, var(--wp--preset--color--base));
}

/* Call fallback: the primary call variant. Its hover goes darker than the
   primary-dark panel above it, so the change stays visible. */
.firm-cta__button--call {
	background: var(--wp--preset--color--primary);
	color: var(--wp--custom--text--on-primary, var(--wp--preset--color--base));
}

.firm-cta__button--call:hover {
	background: var(--wp--preset--color--primary-darkest);
}

/* Editors only: the pending consultation button, on the page background. */
.firm-cta .firm-cta__pending {
	color: var(--wp--preset--color--foreground);
	text-align: center;
}

.firm-cta__button:focus-visible {
	outline: var(--wp--custom--border-width--thick) solid var(--wp--preset--color--primary);
	outline-offset: var(--wp--custom--border-width--thick);
}

/* Editor only: core centers every block with margin: auto !important;
   the CTA is aligned left as on the front end, at its own width. */
.block-editor-block-list__layout.is-root-container > .firm-cta {
	max-inline-size: calc(var(--wp--style--global--content-size) * 580 / 1500);
	margin-inline-start: 0 !important;
}

/* Editor only: why visitors see the call button instead. */
.firm-cta__notice {
	margin: 0;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--body-xs);
	font-style: italic;
	line-height: var(--wp--custom--line-height--body-xs);
}

/* Background photo style. */
.firm-cta--background-photo .firm-cta__logo {
	background: var(--wp--custom--cta--logo-background, var(--wp--preset--color--surface));
}

.firm-cta--background-photo .firm-cta__row {
	position: relative;
	isolation: isolate;
	background: var(--wp--custom--cta--panel, var(--wp--preset--color--primary-dark));
}

.firm-cta__background {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.firm-cta__background-image,
.firm-cta__veil {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
}

.firm-cta__background-image {
	display: block;
	object-fit: cover;
}

.firm-cta__veil {
	background: var(--wp--custom--cta--veil, var(--wp--custom--overlay--heavy));
}

.firm-cta--background-photo .firm-cta__body {
	padding-block: var(--wp--preset--spacing--70);
}

.firm-cta--background-photo .firm-cta__title,
.firm-cta--background-photo .firm-cta__text {
	color: var(--wp--custom--cta--text, var(--wp--preset--color--base));
}

.firm-cta--background-photo .firm-cta__title {
	color: var(--wp--custom--cta--title, var(--wp--custom--cta--text, var(--wp--preset--color--base)));
}

.firm-cta--background-photo .firm-cta__button:not(.firm-cta__button--call) {
	background: var(--wp--custom--cta--button, var(--wp--preset--color--accent));
	color: var(--wp--custom--cta--button-text, var(--wp--custom--text--on-accent, var(--wp--preset--color--base)));
}

.firm-cta--background-photo .firm-cta__button:not(.firm-cta__button--call):hover {
	background: var(--wp--custom--cta--button-hover, var(--wp--preset--color--primary));
	color: var(--wp--custom--cta--button-hover-text, var(--wp--custom--cta--button-text, var(--wp--preset--color--base)));
}

/* laptop: the desktop sizes. */
@media (min-width: 64em) {
	.firm-cta__logo {
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	}

	.firm-cta__photo {
		flex-basis: 32%;
	}

	.firm-cta__body {
		padding: var(--wp--preset--spacing--60);
	}

	.firm-cta__text {
		font-size: var(--wp--preset--font-size--body-lg);
		line-height: var(--wp--custom--line-height--caption);
	}

	.firm-cta__button {
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
		line-height: var(--wp--custom--line-height--h-6);
	}

	.firm-cta--background-photo .firm-cta__body {
		padding-block: var(--wp--preset--spacing--80);
	}
}