/**
 * HTPLaw Media List widget ("What to know about your trademark rights").
 *
 * Measured from the 4x Figma export of the Trademarks page (design px,
 * section top = 0 at y1425): #f5f7f9 band. Left 383px: eyebrow cap top
 * 77, 43/50 heading, image 383×410 (5px radius) 81px below the heading.
 * Right 617px, 100px to the right: 2px #24597f rule level with the
 * eyebrow, items Inter 600 20px title and Inter 16/24 text, separated by
 * 1px #898989 rules with ~24px either side. Figma's item text is #000;
 * here it is navy. Below 900px the columns stack.
 */

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

	padding-top: var(--htplaw-ml-pad-top, 73px);
	padding-bottom: var(--htplaw-ml-pad-bottom, 70px);
	background: var(--_bg);
	color: var(--htplaw-color-primary);
}

.htplaw-ml__inner {
	display: grid;
	grid-template-columns: minmax(0, 383fr) minmax(0, 617fr);
	align-items: start;
	column-gap: 100px;
}

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

.htplaw-ml .htplaw-ml__title {
	margin-top: 28px;
}

.htplaw-ml__image {
	aspect-ratio: 383 / 410;
	margin-top: 82px;
	overflow: hidden;
	border-radius: 5px;
	background: var(--htplaw-color-border);
}

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

.htplaw-ml__list {
	margin: 4px 0 0;
	padding: 0;
	border-top: 2px solid var(--htplaw-color-blue);
	list-style: none;
}

.htplaw-ml__item {
	padding: 22px 0 23px;
	border-bottom: 1px solid var(--htplaw-color-rule);
}

.htplaw-ml__item:first-child {
	padding-top: 30px;
}

.htplaw-ml__item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

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

.htplaw-ml__text {
	margin: 17px 0 0;
	font-family: var(--htplaw-font-body);
	font-size: 16px;
	line-height: 24px;
}

@media (max-width: 1024px) {
	.htplaw-ml__inner {
		column-gap: 48px;
	}
}

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

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

	.htplaw-ml__image {
		max-width: 383px;
		margin-top: 28px;
	}

	.htplaw-ml__text {
		margin-top: 10px;
	}
}

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