/**
 * HTPLaw Firm Overview widget.
 *
 * Measured from the 4x Figma export (design px, section top = 0):
 * eyebrow centre 114.5; heading 43/50 (same style as the hero) at 148;
 * intro Inter 16/27, max 821px, at 267; columns 430–818 with 1px #cfcfcf
 * rules; icon 32px at +11; label Inter 15px uppercase (−1%) at +72 (lh 25);
 * title Source Serif 600 20/27 at +109; text Inter 16/25 at +175, 304px
 * wide; link Inter 16px, 1px underline 3px below, at the column foot with
 * 30px below it; section height 908.
 *
 * Deviations: columns are equal thirds (Figma's rules sit at x512/x918,
 * ~25px from equal thirds); Figma's paragraph text is #000, here the navy
 * text token; link copper uses the AA-compliant tone.
 * Below 900px the columns stack with horizontal rules (not in Figma).
 */

.htplaw-firm {
	--_bg: var(--htplaw-firm-bg, var(--htplaw-color-surface));
	--_rule: var(--htplaw-firm-rule, #cfcfcf);
	--_icon: var(--htplaw-firm-icon, var(--htplaw-color-accent));
	--_link: var(--htplaw-firm-link, var(--htplaw-color-accent-strong));

	padding-top: var(--htplaw-firm-pad-top, 104px);
	padding-bottom: var(--htplaw-firm-pad-bottom, 90px);
	background: var(--_bg);
}

.htplaw-firm__eyebrow {
	margin-bottom: 23px;
	text-transform: uppercase;
}

.htplaw-firm__title {
	max-width: 683px;
	margin-bottom: 19px;
}

.htplaw-firm__text {
	max-width: 821px;
	color: var(--htplaw-color-text);
	font-family: var(--htplaw-font-body);
	font-size: 16px;
	line-height: 27px;
}

.htplaw-firm__text > :first-child { margin-top: 0; }
.htplaw-firm__text > :last-child { margin-bottom: 0; }

.htplaw-firm__columns {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 55px 0 0;
	padding: 0;
	list-style: none;
}

.htplaw-firm__column {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 11px 0 30px;
}

.htplaw-firm__column + .htplaw-firm__column {
	padding-left: 48px;
	border-left: 1px solid var(--_rule);
}

.htplaw-firm__column > * {
	max-width: 304px;
}

.htplaw-firm__icon {
	display: inline-flex;
	color: var(--_icon);
	font-size: 32px;
	line-height: 1;
}

.htplaw-firm__icon img,
.htplaw-firm__icon svg {
	display: block;
	width: 32px;
	height: 32px;
}

.htplaw-firm__icon svg {
	fill: currentColor;
}

.htplaw-firm__label {
	margin: 29px 0 0;
	color: var(--htplaw-color-text);
	font-family: var(--htplaw-font-body);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: -.01em;
	line-height: 25px;
	text-transform: uppercase;
}

/* (0,2,0) beats the Elementor kit's .elementor-kit-N h3 rule. */
.htplaw-firm .htplaw-firm__col-title {
	margin: 12px 0 0;
	color: var(--htplaw-color-primary);
	font-family: var(--htplaw-font-heading);
	font-size: 20px;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 27px;
}

.htplaw-firm__col-text {
	margin: 12px 0 0;
	color: var(--htplaw-color-text);
	font-family: var(--htplaw-font-body);
	font-size: 16px;
	line-height: 25px;
}

.htplaw-firm__link {
	margin-top: auto;
	padding-top: 33px;
	color: var(--_link);
	font-family: var(--htplaw-font-body);
	font-size: 16px;
	line-height: 25px;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* Decorative arrow: hidden from screen readers where alt text is supported. */
.htplaw-firm__link::after {
	content: " →";
	content: " →" / "";
}

.htplaw-firm__link:hover {
	color: var(--htplaw-color-primary);
}

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

	.htplaw-firm__columns {
		grid-template-columns: minmax(0, 1fr);
		margin-top: 40px;
	}

	.htplaw-firm__column,
	.htplaw-firm__column + .htplaw-firm__column {
		padding: 32px 0;
		border-left: 0;
		border-top: 1px solid var(--_rule);
	}

	.htplaw-firm__column:last-child {
		padding-bottom: 0;
	}

	.htplaw-firm__column > * {
		max-width: 560px;
	}

	.htplaw-firm__label {
		margin-top: 20px;
	}

	.htplaw-firm__link {
		padding-top: 20px;
	}
}

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