/**
 * HTPLaw CTA Band widget.
 *
 * Measured from the 4x Figma export (design px, band top = 0 at y5521,
 * height 367): centred heading Source Serif 4 600 31/40 (+2%) at 89; text
 * Inter 16/25 (max 683px) 9px below; buttons and secondary link 44px below
 * the text, 28px apart; 93px bottom padding. White text, copper button
 * (AA tone), underlined white link.
 *
 * The design's background photo couldn't be exported, so without a photo
 * the band uses its sampled average tone (#1d3344). With a photo, the
 * overlay defaults to #0f2a3f at 85%, consistent with the darkest areas of
 * the design (#0e2638).
 */

.htplaw-cta {
	--_bg: var(--htplaw-cta-bg, #1d3344);
	--_overlay: var(--htplaw-cta-overlay, var(--htplaw-color-secondary));
	--_overlay-opacity: var(--htplaw-cta-overlay-opacity, .85);
	--_text: var(--htplaw-cta-text, #ffffff);

	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-top: var(--htplaw-cta-pad-top, 89px);
	padding-bottom: var(--htplaw-cta-pad-bottom, 93px);
	background: var(--_bg);
	color: var(--_text);
	text-align: center;
}

/* The practice-area mock-ups keep the band 367px tall with one-line text too. */
@media (min-width: 901px) {
	.htplaw-cta {
		min-height: 367px;
	}
}

/* (0,2,0) beats `.elementor img { height: auto }` (see page-banner.css). */
.htplaw-cta .htplaw-cta__photo {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.htplaw-cta__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--_overlay);
	opacity: var(--_overlay-opacity);
}

/* (0,2,0) beats the Elementor kit's .elementor-kit-N h2 rule. */
.htplaw-cta .htplaw-cta__title {
	margin: 0;
	color: inherit;
	font-family: var(--htplaw-font-heading);
	font-size: clamp(1.5rem, 1.1rem + 1.2vw, 1.9375rem);
	font-weight: 600;
	letter-spacing: .02em;
	line-height: 40px;
}

.htplaw-cta__text {
	max-width: var(--htplaw-cta-text-width, 683px);
	margin: 9px auto 0;
	color: inherit;
	font-family: var(--htplaw-font-body);
	font-size: 16px;
	line-height: 25px;
}

.htplaw-cta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px 28px;
	margin-top: 44px;
}

.htplaw-cta__buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.htplaw-cta__link {
	color: inherit;
	font-family: var(--htplaw-font-body);
	font-size: 16px;
	letter-spacing: .01em;
	line-height: 25px;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.htplaw-cta__link:hover,
.htplaw-cta__link:focus {
	color: inherit;
	text-decoration-thickness: 2px;
}

/* White focus ring on the dark band (the copper ring is too low-contrast here). */
.htplaw-cta :focus-visible {
	outline-color: #ffffff;
}

@media (max-width: 900px) {
	.htplaw-cta {
		padding-top: var(--htplaw-cta-pad-top, 56px);
		padding-bottom: var(--htplaw-cta-pad-bottom, 56px);
	}

	.htplaw-cta .htplaw-cta__title {
		line-height: 1.25;
	}

	.htplaw-cta__actions {
		margin-top: 28px;
	}
}

/* Mobile spacing: section padding is capped at the shared mobile token
   (variables.css), so large desktop values set in Elementor don't carry
   over to tablets and phones; smaller custom values are kept. */
@media (max-width: 900px) {
	.htplaw-cta {
		padding-top: min(var(--htplaw-cta-pad-top, var(--htplaw-space-section)), var(--htplaw-space-section));
		padding-bottom: min(var(--htplaw-cta-pad-bottom, var(--htplaw-space-section)), var(--htplaw-space-section));
	}
}