/**
 * HTPLaw Checklist widget ("Original works of authorship").
 *
 * Measured from the 4x Figma export of the Copyrights page (design px,
 * section top = 0 at y692): white band. Left: shared eyebrow and 43/50
 * heading; pull quote Inter 600 16/24 (max ~290px) beside a 3px #b87333
 * bar, 17px gap. Right: 606px column under a 2px #0f2a3f rule, two 285px
 * sub-columns 36px apart, filled top to bottom; rows 41px with 1px #cfcfcf
 * dividers, an 18×13 copper check and Inter 16px text (+2%) 52px in.
 * Copper button 83px below the last divider.
 *
 * Text is navy (Figma's checklist and quote are #000). Below 900px the
 * columns stack; below 480px the checklist is one column.
 */

.htplaw-cl {
	--_bg: var(--htplaw-cl-bg, var(--htplaw-color-surface));
	--_check: var(--htplaw-cl-check, var(--htplaw-color-accent));

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

.htplaw-cl__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 606px);
	align-items: start;
	column-gap: 64px;
}

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

.htplaw-cl .htplaw-cl__title {
	max-width: 420px;
	margin-top: 24px;
}

.htplaw-cl__quote {
	max-width: 310px;
	margin: 20px 0 0;
	padding: 11px 0 9px 17px;
	border-left: 3px solid var(--htplaw-color-accent);
	font-family: var(--htplaw-font-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
}

.htplaw-cl__list {
	columns: 2;
	column-gap: 36px;
	margin: 1px 0 0;
	padding: 6px 0 0;
	border-top: 2px solid var(--htplaw-color-secondary);
	list-style: none;
}

.htplaw-cl__list li {
	display: flex;
	align-items: center;
	gap: 31px;
	padding: 8px 0 8px 3px;
	border-bottom: 1px solid #cfcfcf;
	font-family: var(--htplaw-font-body);
	font-size: 16px;
	letter-spacing: .02em;
	line-height: 24px;
	break-inside: avoid;
}

.htplaw-cl__check {
	flex: none;
	color: var(--_check);
}

.htplaw-cl__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 83px;
}

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

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

	.htplaw-cl__actions {
		margin-top: 32px;
	}
}

@media (max-width: 480px) {
	.htplaw-cl__list {
		columns: 1;
	}

	.htplaw-cl__list li {
		gap: 20px;
	}

	.htplaw-cl__actions .htplaw-btn {
		flex: 1 1 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-cl {
		padding-top: min(var(--htplaw-cl-pad-top, var(--htplaw-space-section)), var(--htplaw-space-section));
		padding-bottom: min(var(--htplaw-cl-pad-bottom, var(--htplaw-space-section)), var(--htplaw-space-section));
	}
}