/**
 * HTPLaw Symbol Cards widget (Trademarks: TM / SM / ®).
 *
 * Measured from the 4x Figma export of the Trademarks page (design px; the
 * cards continue the #f5f7f9 band of the Media List above): 43/50 heading,
 * cards 61px below it: three columns 30px apart, 311px tall, white with a
 * 1px #cfcfcf border and 6px radius, padding ~29px. Symbol Inter 700 21px
 * at ink top 50; title Inter 600 20px at ink top 126.5; text Inter 16/22
 * 41px below the title. Dark card #0f2a3f with white title and text; its
 * ® is a 33px copper outline circle. Figma's symbols and text are #000:
 * here they are navy. Below 767px the cards stack.
 */

.htplaw-syc {
	--_bg: var(--htplaw-syc-bg, var(--htplaw-color-muted));

	padding-top: var(--htplaw-syc-pad-top, 64px);
	padding-bottom: var(--htplaw-syc-pad-bottom, 127px);
	background: var(--_bg);
	color: var(--htplaw-color-primary);
}

.htplaw-syc__eyebrow {
	margin-bottom: 24px;
	text-transform: uppercase;
}

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

.htplaw-syc__card {
	min-height: 311px;
	padding: 43px 29px 30px;
	border: 1px solid #cfcfcf;
	border-radius: var(--htplaw-radius);
	background: var(--htplaw-color-surface);
}

.htplaw-syc__card.is-dark {
	background: var(--htplaw-color-secondary);
	color: #ffffff;
}

.htplaw-syc__symbol {
	margin: 0;
	font-family: var(--htplaw-font-body);
	font-size: 21px;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 28px;
}

/* Copper outline circle, e.g. ®; copper on navy uses the AA tone. */
.htplaw-syc__symbol.is-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 33px;
	height: 33px;
	margin: -6px 0 1px;
	border: 2px solid var(--htplaw-color-accent);
	border-radius: 50%;
	color: var(--htplaw-color-accent);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1;
}

.is-dark .htplaw-syc__symbol.is-circle {
	border-color: var(--htplaw-color-accent-on-dark);
	color: var(--htplaw-color-accent-on-dark);
}

/* (0,2,0) beats the Elementor kit's .elementor-kit-N h3 rule. */
.htplaw-syc .htplaw-syc__card-title {
	margin: 48px 0 0;
	color: inherit;
	font-family: var(--htplaw-font-body);
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 28px;
}

.htplaw-syc__text {
	margin: 15px 0 0;
	font-family: var(--htplaw-font-body);
	font-size: 16px;
	line-height: 22px;
}

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

	.htplaw-syc__card {
		min-height: 260px;
		padding-inline: 24px;
	}
}

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

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

	.htplaw-syc__card {
		min-height: 0;
		padding: 28px 24px;
	}

	.htplaw-syc .htplaw-syc__card-title {
		margin-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-syc {
		padding-top: min(var(--htplaw-syc-pad-top, var(--htplaw-space-section)), var(--htplaw-space-section));
		padding-bottom: min(var(--htplaw-syc-pad-bottom, var(--htplaw-space-section)), var(--htplaw-space-section));
	}
}