/**
 * HTPLaw Numbered List widget.
 *
 * Rows (Licensing, design px from the 4x export, section top = 0 at y1280):
 * #f5f7f9 band, eyebrow cap top 66, 43/50 heading, then a 2px #0f2a3f
 * rule 16px below the heading. Each row: number Inter 600 28px (118px
 * column), title Inter 600 24px, text Inter 16/30 justified in a 540px
 * column, 1px #d9d9d9 divider below; text level with the title, ~40px
 * above each title and ~30px below the text. Figma colours row 04's number
 * copper and the text #000: here numbers turn copper on hover and text is
 * navy.
 *
 * Grid (IP Litigation Support, section top = 0 at y692): white band, a
 * 2px #0e1b2c rule ~31px below the one-line heading, then rows of three
 * items under full-width 1px #cfcfcf dividers: number Source Serif 4 600
 * 15px +13% copper, text Inter 16/29 73px to its right (max ~240px),
 * ~30px above and below.
 *
 * Below 900px rows stack (number, title, text) and the grid becomes one
 * item per line.
 */

.htplaw-nl {
	--_bg: var(--htplaw-nl-bg, var(--htplaw-color-surface));

	padding-top: var(--htplaw-nl-pad-top, 62px);
	padding-bottom: var(--htplaw-nl-pad-bottom, 66px);
	background: var(--_bg);
	color: var(--htplaw-color-primary);
}

.htplaw-nl--rows {
	--_bg: var(--htplaw-nl-bg, var(--htplaw-color-muted));
}

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

.htplaw-nl .htplaw-nl__title {
	max-width: 640px;
	margin-top: 24px;
}

.htplaw-nl__row {
	margin: 0;
	padding: 0;
	list-style: none;
}

.htplaw-nl__text {
	margin: 0;
	font-family: var(--htplaw-font-body);
	font-size: 16px;
}

/* Rows layout */
.htplaw-nl--rows .htplaw-nl__list {
	margin-top: 15px;
	border-top: 2px solid var(--htplaw-color-secondary);
}

.htplaw-nl--rows .htplaw-nl__item {
	display: grid;
	grid-template-columns: 118px minmax(0, 1fr) minmax(0, 540px);
	align-items: start;
	padding: 35px 0 25px;
	border-bottom: 1px solid #d9d9d9;
}

.htplaw-nl--rows .htplaw-nl__item:first-child {
	padding-top: 30px;
}

.htplaw-nl--rows .htplaw-nl__number {
	font-family: var(--htplaw-font-body);
	font-size: 28px;
	font-weight: 600;
	line-height: 36px;
	transition: color var(--htplaw-duration) var(--htplaw-ease);
}

.htplaw-nl--rows .htplaw-nl__item:hover .htplaw-nl__number {
	color: var(--htplaw-color-accent);
}

/* (0,2,0) beats the Elementor kit's .elementor-kit-N h3 rule. */
.htplaw-nl .htplaw-nl__item-title {
	margin: 0;
	padding-right: 30px;
	color: inherit;
	font-family: var(--htplaw-font-body);
	font-size: 24px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 32px;
}

.htplaw-nl--rows .htplaw-nl__text {
	margin-top: -2px;
	line-height: 30px;
	text-align: justify;
}

/* Grid layout */
.htplaw-nl--grid .htplaw-nl__list {
	margin-top: 32px;
	border-top: 2px solid var(--htplaw-color-primary);
}

.htplaw-nl--grid .htplaw-nl__row {
	display: grid;
	grid-template-columns: repeat(var(--htplaw-nl-columns, 3), minmax(0, 1fr));
	border-bottom: 1px solid #cfcfcf;
}

.htplaw-nl--grid .htplaw-nl__item {
	display: grid;
	grid-template-columns: 73px minmax(0, 1fr);
	align-items: baseline;
	padding: 30px 30px 30px 0;
}

.htplaw-nl--grid .htplaw-nl__number {
	color: var(--htplaw-color-accent-strong);
	font-family: var(--htplaw-font-heading);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .13em;
}

.htplaw-nl--grid .htplaw-nl__text {
	max-width: 260px;
	letter-spacing: .01em;
	line-height: 29px;
}

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

	.htplaw-nl--rows .htplaw-nl__item {
		grid-template-columns: 56px minmax(0, 1fr);
		row-gap: 8px;
		padding: 24px 0;
	}

	.htplaw-nl--rows .htplaw-nl__number {
		grid-row: span 2;
		font-size: 22px;
		line-height: 30px;
	}

	.htplaw-nl .htplaw-nl__item-title {
		padding-right: 0;
		font-size: 20px;
		line-height: 30px;
	}

	.htplaw-nl--rows .htplaw-nl__text {
		text-align: left;
	}

	.htplaw-nl--grid .htplaw-nl__row {
		display: block;
		border-bottom: 0;
	}

	.htplaw-nl--grid .htplaw-nl__item {
		grid-template-columns: 48px minmax(0, 1fr);
		padding: 20px 0;
		border-bottom: 1px solid #cfcfcf;
	}

	.htplaw-nl--grid .htplaw-nl__text {
		max-width: none;
	}
}

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