/**
 * HTPLaw Callout Band widget ("Start with a provisional application").
 *
 * Measured from the 4x Figma export of the Patents frame (design px, band
 * top = 0 at y2720, height 345): #0f2a3f. Text block inset 50px from the
 * container's left edge, max ~625px: eyebrow cap top 64.75; heading 43/50
 * white at ink top 105; text Inter 16/23 white from ink top 166.75. Button
 * flush right, ~8px above centre: 246×47, Inter 600 15px.
 *
 * Copper on navy: Figma's #b87333 eyebrow is 3.9:1, so it uses
 * --htplaw-color-accent-on-dark (4.5:1); the button uses the AA copper
 * like every other copper button. Below 900px the button moves under the
 * text and the inset is dropped (not in Figma).
 */

.htplaw-callout {
	--_bg: var(--htplaw-callout-bg, var(--htplaw-color-secondary));
	--_text: var(--htplaw-callout-text, #ffffff);
	--htplaw-heading-color: #ffffff;
	--htplaw-eyebrow-color: var(--htplaw-color-accent-on-dark);

	padding-top: var(--htplaw-callout-pad-top, 60px);
	padding-bottom: var(--htplaw-callout-pad-bottom, 68px);
	background: var(--_bg);
	color: var(--_text);
}

.htplaw-callout__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
}

.htplaw-callout__content {
	flex: 0 1 675px;
	min-width: 0;
	padding-left: 50px;
}

.htplaw-callout__eyebrow {
	text-transform: uppercase;
}

.htplaw-callout .htplaw-callout__title {
	margin-top: 16.5px;
}

.htplaw-callout__text {
	margin: 14.5px 0 0;
	color: var(--_text);
	font-family: var(--htplaw-font-body);
	font-size: 16px;
	line-height: 23px;
}

.htplaw-callout__actions {
	display: flex;
	flex: none;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: -16px; /* Figma sits the button ~8px above centre */
}

.htplaw-callout__actions .htplaw-btn {
	min-height: 47px;
	padding-inline: 25px;
	font-weight: 600;
}

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

/* The accent button's hover is navy, which would vanish on this band. */
.htplaw-callout .htplaw-btn--accent:hover {
	border-color: #ffffff;
	background: #ffffff;
	color: var(--htplaw-color-secondary);
}

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

	.htplaw-callout__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 28px;
	}

	.htplaw-callout__content {
		flex-basis: auto;
		padding-left: 0;
	}

	.htplaw-callout .htplaw-callout__title {
		margin-top: 14px;
	}

	.htplaw-callout__text {
		margin-top: 12px;
	}

	.htplaw-callout__actions {
		margin-top: 0;
	}
}

@media (max-width: 480px) {
	.htplaw-callout__actions,
	.htplaw-callout__actions .htplaw-btn {
		width: 100%;
		white-space: normal;
	}
}

/* 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-callout {
		padding-top: min(var(--htplaw-callout-pad-top, var(--htplaw-space-section)), var(--htplaw-space-section));
		padding-bottom: min(var(--htplaw-callout-pad-bottom, var(--htplaw-space-section)), var(--htplaw-space-section));
	}
}