/**
 * HTPLaw Feature Grid widget ("Why HTPLaw").
 *
 * Measured from the 4x Figma export (design px, section top = 0 at y2795):
 * white band. Left (481px): eyebrow centre 117.5; heading 43/50 in a 399px
 * box at 151; text Inter 16/27 (434px) at 334; image 481×234 (#f8f9fa
 * placeholder) at 480. Right (565px, flush right, 5px below the left top):
 * 2×2 cards 276×294, gaps 13px across / 14px down, 1px #d9d9d9 border, 6px
 * radius; icon 32px at 27/31 inside the border; title Source Serif 4 600
 * 18/27 (+1%; all four title widths fit within ~1px) 54px below the icon; text Inter 16/23 10px below the title.
 * Card content is #0e1b2c.
 *
 * Titles may run up to 30px into the card's 31px right padding without wrapping, as
 * in Figma ("Domestic and international" is wider than the 212px content
 * box). Figma's left paragraph is #000; navy text token here. Bottom padding
 * (57px) splits the gap to the next section evenly; not in Figma.
 * Below 900px: intro above the cards; cards 1 column below 560px.
 */

.htplaw-fg {
	--_bg: var(--htplaw-fg-bg, var(--htplaw-color-surface));
	--_card-bg: var(--htplaw-fg-card-bg, var(--htplaw-color-surface));
	--_card-border: var(--htplaw-fg-card-border, #d9d9d9);
	--_icon: var(--htplaw-fg-icon, var(--htplaw-color-primary));

	padding-top: var(--htplaw-fg-pad-top, 107px);
	padding-bottom: var(--htplaw-fg-pad-bottom, 57px);
	background: var(--_bg);
}

.htplaw-fg__inner {
	display: grid;
	grid-template-columns: minmax(0, 481px) minmax(0, 565px);
	justify-content: space-between;
	align-items: start;
	column-gap: 54px;
}

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

.htplaw-fg__title {
	max-width: 399px;
	margin-bottom: 33px;
}

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

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

.htplaw-fg__image {
	margin-top: 38px;
	aspect-ratio: 481 / 234;
	overflow: hidden;
	border-radius: var(--htplaw-radius);
	background: #f8f9fa;
}

.htplaw-fg__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.htplaw-fg__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 276px));
	justify-content: end;
	gap: 14px 13px;
	margin: 5px 0 0;
	padding: 0;
	list-style: none;
}

.htplaw-fg__card {
	min-height: 294px;
	padding: 27px 31px;
	border: 1px solid var(--_card-border);
	border-radius: var(--htplaw-radius);
	background: var(--_card-bg);
	color: var(--htplaw-color-primary);
}

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

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

.htplaw-fg__icon svg {
	fill: currentColor;
}

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

.htplaw-fg__card-text {
	margin: 10px 0 0;
	color: var(--htplaw-color-primary);
	font-family: var(--htplaw-font-body);
	font-size: 16px;
	line-height: 23px;
}

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

	.htplaw-fg__inner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 40px;
	}

	.htplaw-fg__title,
	.htplaw-fg__text {
		max-width: 640px;
	}

	.htplaw-fg__image {
		max-width: 640px;
	}

	.htplaw-fg__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		justify-content: stretch;
		margin-top: 0;
	}

	.htplaw-fg__card {
		min-height: 0;
	}

	.htplaw-fg .htplaw-fg__card-title {
		margin: 28px 0 0;
	}
}

@media (max-width: 560px) {
	.htplaw-fg__cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.htplaw-fg__card {
		padding: 24px;
	}
}

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