/**
 * HTPLaw Split Content widget ("About our patent services").
 *
 * Measured from the 4x Figma export of the Patents frame (design px,
 * section top = 0 at y1647, the end of the cards above): white band.
 * Left: eyebrow cap top 141; heading 43/50 at ink top 189, wrapping within
 * ~400px. Right: text column 682px wide, flush right, Inter 16/29 #0e1b2c,
 * one blank line between paragraphs; its first line aligns with the
 * eyebrow. About 105px below the last line.
 *
 * The text column keeps Figma's 682px measure at wider containers; the
 * left column takes the rest. Below 900px the columns stack.
 *
 * Practice-area pages (2026-10-23) vary the text column (602-682px) and
 * justify the text: both are controls. Their mock-ups also add disc-bullet
 * lists (Inter 16/29, text indented 24px) and, on Trade Secrets, a copper
 * Inter 600 16px uppercase sub-heading over a ruled list: 1px #cfcfcf rules,
 * 50px rows, a 5px navy bullet 10px in. Optional 1px #cfcfcf divider below.
 */

.htplaw-split {
	--_bg: var(--htplaw-split-bg, var(--htplaw-color-surface));
	--_text: var(--htplaw-split-text, var(--htplaw-color-text));

	padding-top: var(--htplaw-split-pad-top, 70px);
	padding-bottom: var(--htplaw-split-pad-bottom, 100px);
	background: var(--_bg);
}

.htplaw-split__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, var(--htplaw-split-content-width, 682px));
	align-items: start;
	column-gap: 24px; /* leaves the heading Figma's ~394px at the 1100px design width */
}

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

.htplaw-split .htplaw-split__title {
	max-width: var(--htplaw-split-title-width, 400px);
	margin-top: 24px;
}

.htplaw-split__content {
	margin-top: -3px;
	color: var(--_text);
	font-family: var(--htplaw-font-body);
	font-size: 16px;
	line-height: 29px;
	text-align: var(--htplaw-split-align, left);
}

.htplaw-split--divider {
	border-bottom: 1px solid #cfcfcf;
}

.htplaw-split__content p,
.htplaw-split__content ul,
.htplaw-split__content ol {
	margin: 0 0 29px;
}

.htplaw-split__content > :last-child {
	margin-bottom: 0;
}

.htplaw-split__content a {
	color: var(--htplaw-color-accent-strong);
	text-underline-offset: 3px;
}

.htplaw-split__content ul:not(.htplaw-split__list) {
	padding-left: 24px;
	list-style: disc;
}

.htplaw-split__content li {
	margin: 0;
}

.htplaw-split__content li::marker {
	color: var(--htplaw-color-primary);
}

/* Ruled list (Trade Secrets "Confidential relationships"). */
.htplaw-split__content .htplaw-split__list-title {
	margin: 41px 0 53px; /* collapses with the paragraph margin above */
	color: var(--htplaw-color-accent-strong);
	font-weight: 600;
	line-height: 24px;
	text-align: left;
	text-transform: uppercase;
}

.htplaw-split__content .htplaw-split__list {
	padding: 0;
	border-top: 1px solid #cfcfcf;
	list-style: none;
	text-align: left;
}

.htplaw-split__list li {
	position: relative;
	padding: 13px 0 13px 25px;
	border-bottom: 1px solid #cfcfcf;
	line-height: 24px;
}

.htplaw-split__list li::before {
	content: "";
	position: absolute;
	top: 23px;
	left: 10px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--htplaw-color-primary);
}

/* Optional link under the text (not in Figma; client mock-up 2026-10-22). */
.htplaw-split__content .htplaw-split__action {
	margin: -4px 0 0;
	font-size: 15px;
	line-height: 24px;
}

.htplaw-split__content .htplaw-split__link {
	color: var(--htplaw-color-secondary);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.htplaw-split__content .htplaw-split__link::after {
	content: " →";
	content: " →" / "";
}

.htplaw-split__content .htplaw-split__link:hover {
	color: var(--htplaw-color-accent-strong);
}

/* Copper link (About Teddy: "Schedule a consultation with Teddy →"). */
.htplaw-split__content .htplaw-split__link.is-copper {
	color: var(--htplaw-color-accent-strong);
}

.htplaw-split__content .htplaw-split__link.is-copper:hover {
	color: var(--htplaw-color-primary);
}

/* Image under the heading (About Teddy): 406×435, 5px radius, 68px below
   the heading ink. */
.htplaw-split__image {
	max-width: 406px;
	aspect-ratio: 406 / 435;
	margin-top: 69px;
	overflow: hidden;
	border-radius: 5px;
	background: var(--htplaw-color-border);
}

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

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

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

	.htplaw-split .htplaw-split__title {
		max-width: 560px;
	}

	.htplaw-split__content {
		margin-top: 0;
		line-height: 27px;
	}

	.htplaw-split__content p,
	.htplaw-split__content ul,
	.htplaw-split__content ol {
		margin-bottom: 20px;
	}

	.htplaw-split__content .htplaw-split__list-title {
		margin-bottom: 20px;
	}
}

/* Justified text leaves wide gaps in narrow columns. */
@media (max-width: 600px) {
	.htplaw-split__content {
		text-align: left;
	}
}

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