/**
 * HTPLaw Service Cards widget ("What we handle").
 *
 * Measured from the 4x Figma export of the Patents frame (design px,
 * section top = 0 at y692): white band. Eyebrow cap top 42; heading 43/50
 * at ink top 88 (max 2 lines in ~500px). Cards from 223: #f5f7f9, 1px
 * #d9d9d9 border, 6px radius, 40px column / 43px row gaps, padding 36/39.
 * Label tag: #0f2a3f, 27px tall, min 101px wide, Inter 500 11px uppercase
 * white. Title Source Serif 4 600 24/27, +5% tracking, kept two lines tall
 * so the descriptions line up across a row (as in Figma). Text Inter 16/23.
 *
 * Variants from the practice-area mock-ups (2026-10-23):
 * - 4 columns (Trademarks): ~253px cards, ~29px side padding.
 * - 2 columns (Licensing): 519px cards, 60px gap, ~51px side padding,
 *   one-line titles (no two-line minimum).
 * - Copper text labels instead of tags (Licensing "LARGER COMPANIES",
 *   Copyright "01"): Inter 600 16px, AA copper.
 * - Dark card (Licensing card 2): #0f2a3f with white title and text.
 * - Optional card link (Trademarks "TTAB matters →"): Inter 16px, underlined,
 *   one blank line below the text.
 */

.htplaw-sc {
	--_bg: var(--htplaw-sc-bg, var(--htplaw-color-surface));
	--_card-bg: var(--htplaw-sc-card-bg, var(--htplaw-color-muted));
	--_card-border: var(--htplaw-sc-card-border, #d9d9d9);
	--_tag-bg: var(--htplaw-sc-tag-bg, var(--htplaw-color-secondary));

	padding-top: var(--htplaw-sc-pad-top, 36px);
	padding-bottom: var(--htplaw-sc-pad-bottom, 66px);
	background: var(--_bg);
}

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

.htplaw-sc .htplaw-sc__title {
	max-width: 500px;
	margin-top: 23px;
}

.htplaw-sc__cards {
	display: grid;
	grid-template-columns: repeat(var(--htplaw-sc-columns, 3), minmax(0, 1fr));
	gap: 43px 40px;
	margin: 43px 0 0;
	padding: 0;
	list-style: none;
}

.htplaw-sc__card {
	min-height: var(--htplaw-sc-card-min, 0);
	padding: 36px 39px;
	border: 1px solid var(--_card-border);
	border-radius: var(--htplaw-radius);
	background: var(--_card-bg);
	color: var(--htplaw-color-primary);
}

.htplaw-sc__tag {
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	min-width: 101px;
	min-height: 27px;
	margin: 0;
	padding: 4px 10px;
	border-radius: 5px;
	background: var(--_tag-bg);
	color: #ffffff;
	font-family: var(--htplaw-font-body);
	font-size: 13px; /* Figma 11px; 13px per client update 2026-10-23. */
	font-weight: 500;
	line-height: 1.2;
	text-transform: uppercase;
}

/* (0,2,0) beats the Elementor kit's .elementor-kit-N h3 rule. */
.htplaw-sc .htplaw-sc__card-title {
	min-height: 54px;
	margin: 56px 0 0;
	color: inherit;
	font-family: var(--htplaw-font-heading);
	font-size: 24px;
	font-weight: 600;
	letter-spacing: .05em;
	line-height: 27px;
}

.htplaw-sc__text {
	margin: 19px 0 0;
	font-family: var(--htplaw-font-body);
	font-size: 16px;
	line-height: 23px;
}

/* Copper text label instead of a tag. */
.htplaw-sc--label-text .htplaw-sc__card {
	padding-top: 47px;
}

.htplaw-sc--label-text .htplaw-sc__tag {
	display: block;
	width: auto;
	min-width: 0;
	min-height: 0;
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--htplaw-color-accent-strong);
	font-size: 13px; /* All label styles 13px (client update 2026-10-23). */
	font-weight: 600;
	line-height: 20px;
}

.htplaw-sc.htplaw-sc--label-text .htplaw-sc__card-title {
	margin-top: 16px;
}

/*
 * Copper serif label (Practice Areas "1"–"8"): the eyebrow style, label
 * ink 41px below the card top, title +86, text +124; one-line titles.
 */
.htplaw-sc--label-serif .htplaw-sc__tag {
	display: block;
	width: auto;
	min-width: 0;
	min-height: 0;
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--htplaw-color-accent-strong);
	font-family: var(--htplaw-font-heading);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .13em;
	line-height: 21px;
}

.htplaw-sc.htplaw-sc--label-serif .htplaw-sc__card-title {
	min-height: 0;
	margin-top: 21px;
}

.htplaw-sc--label-serif .htplaw-sc__text {
	margin-top: 13px;
}

/*
 * Copper plain label (Patents, client update 2026-10-23): the tag's text
 * and position without the navy box, in the AA copper.
 */
.htplaw-sc--label-plain .htplaw-sc__tag {
	justify-content: flex-start;
	min-width: 0;
	padding: 0;
	background: none;
	color: var(--htplaw-color-accent-strong);
	font-weight: 600;
}

/* Card links aligned to the card bottom (Practice Areas). */
.htplaw-sc--pin-links .htplaw-sc__card {
	display: flex;
	flex-direction: column;
}

.htplaw-sc--pin-links .htplaw-sc__action {
	margin-top: auto;
	padding-top: 23px;
}

/* Column-count spacing. */
.htplaw-sc--cols-4 .htplaw-sc__cards {
	column-gap: 30px;
}

.htplaw-sc--cols-4 .htplaw-sc__card {
	padding-inline: 29px;
}

/* Figma spaces the 4-column cards out more (Trademarks). */
@media (min-width: 1025px) {
	.htplaw-sc--cols-4 .htplaw-sc__cards {
		margin-top: 27px;
	}

	.htplaw-sc--cols-4 .htplaw-sc__card {
		padding-top: 46px;
	}

	.htplaw-sc.htplaw-sc--cols-4 .htplaw-sc__card-title {
		margin-top: 75px;
	}

	.htplaw-sc--cols-4 .htplaw-sc__text {
		margin-top: 39px;
	}
}

.htplaw-sc--cols-2 .htplaw-sc__cards {
	column-gap: 60px;
}

.htplaw-sc--cols-2 .htplaw-sc__card {
	padding: 50px 51px 58px;
}

.htplaw-sc.htplaw-sc--cols-2 .htplaw-sc__card-title,
.htplaw-sc.htplaw-sc--cols-1 .htplaw-sc__card-title {
	min-height: 0;
}

/* Dark card. */
.htplaw-sc__card.is-dark {
	background: var(--htplaw-color-secondary);
	color: #ffffff;
}

.htplaw-sc--label-text .is-dark .htplaw-sc__tag {
	color: var(--htplaw-color-accent-on-dark);
}

.htplaw-sc__card.is-dark :focus-visible {
	outline-color: #ffffff;
}

/* Optional card link; (0,2,0) beats Elementor's `.elementor a`. */
.htplaw-sc__action {
	margin: 23px 0 0;
	font-family: var(--htplaw-font-body);
	font-size: 16px;
	line-height: 23px;
}

.htplaw-sc .htplaw-sc__link {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.htplaw-sc .htplaw-sc__link::after {
	content: " →";
	content: " →" / "";
}

.htplaw-sc .htplaw-sc__link:hover {
	color: var(--htplaw-color-accent-strong);
}

.htplaw-sc .is-dark .htplaw-sc__link:hover {
	color: var(--htplaw-color-accent-on-dark);
}

/*
 * Experience style (About Teddy "Prior to becoming an attorney"): white
 * cards, 24px gaps, ~306px tall; label in the serif eyebrow style (ink 47
 * below the card top); title Inter 600 20/29 #24597f 61px below the label;
 * text Inter 16/26. Figma's text-to-title spacing differs per card (17-46px),
 * so it is a uniform 24px here.
 */
.htplaw-sc--experience {
	--_card-bg: var(--htplaw-sc-card-bg, var(--htplaw-color-surface));
}

.htplaw-sc.htplaw-sc--experience .htplaw-sc__title {
	max-width: 760px;
}

.htplaw-sc--experience .htplaw-sc__cards {
	column-gap: 24px;
	margin-top: 60px;
}

.htplaw-sc--experience .htplaw-sc__card {
	min-height: var(--htplaw-sc-card-min, 306px);
	padding: 41px 29px 40px;
}

.htplaw-sc.htplaw-sc--experience .htplaw-sc__tag {
	font-family: var(--htplaw-font-heading);
	font-size: 13px;
	letter-spacing: .13em;
	line-height: 21px;
}

.htplaw-sc.htplaw-sc--experience .htplaw-sc__card-title {
	min-height: 0;
	margin-top: 40px;
	color: var(--htplaw-color-blue);
	font-family: var(--htplaw-font-body);
	font-size: 20px;
	letter-spacing: 0;
	line-height: 29px;
}

.htplaw-sc--experience .htplaw-sc__text {
	margin-top: 24px;
	line-height: 26px;
}

@media (max-width: 1024px) {
	.htplaw-sc__cards {
		gap: 24px;
	}

	.htplaw-sc__card,
	.htplaw-sc--cols-2 .htplaw-sc__card,
	.htplaw-sc--cols-4 .htplaw-sc__card,
	.htplaw-sc--label-text .htplaw-sc__card {
		padding: 32px 28px;
	}

	/* Desktop minimum heights (e.g. Trademarks 431px) leave empty space once
	   cards narrow or stack; grid rows still equalise side-by-side cards. */
	.htplaw-sc .htplaw-sc__card {
		min-height: 0;
	}

	.htplaw-sc .htplaw-sc__card-title {
		margin-top: 32px;
	}
}

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

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

@media (max-width: 767px) {
	/* One column: the titles no longer need to line up. */
	.htplaw-sc .htplaw-sc__card-title {
		min-height: 0;
		margin-top: 20px;
		font-size: 22px;
	}

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

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