/**
 * HTPLaw Attorney Profile widget ("Your patent attorney").
 *
 * Measured from the 4x Figma export of the Patents frame (design px,
 * section top = 0 at y3065, height 586): #f5f7f9 band. Portrait 367×395,
 * 6px radius, 90px from the top and 101px from the bottom. Text column
 * 66px right of it, centred ~8px low, ~655px wide: eyebrow cap top 141.75;
 * name 43/50 at ink top 188.25; bio Inter 16/26 from ink top 251.75; pills
 * at 376: #24597f, 27px tall, fully rounded, Inter 11px white, 6px apart;
 * link Inter 16px #0e1b2c, underlined, with an arrow, at cap top 436.75.
 *
 * At wider containers the portrait and text column keep Figma's 367:655
 * proportion. Below 900px they stack (not in Figma).
 */

.htplaw-ap {
	--_bg: var(--htplaw-ap-bg, var(--htplaw-color-muted));
	--_pill-bg: var(--htplaw-ap-pill-bg, var(--htplaw-color-blue));

	padding-top: var(--htplaw-ap-pad-top, 90px);
	padding-bottom: var(--htplaw-ap-pad-bottom, 101px);
	background: var(--_bg);
	color: var(--htplaw-color-primary);
}

.htplaw-ap__inner {
	display: grid;
	grid-template-columns: minmax(0, 367fr) minmax(0, 655fr);
	align-items: center;
	column-gap: 66px;
}

.htplaw-ap--no-image .htplaw-ap__inner {
	grid-template-columns: minmax(0, 760px);
}

.htplaw-ap__image {
	aspect-ratio: 367 / 395;
	overflow: hidden;
	border-radius: var(--htplaw-radius);
	background: var(--htplaw-color-border);
}

.htplaw-ap__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.htplaw-ap__content {
	max-width: 680px;
	margin-top: 17px; /* Figma sits the text ~8px below centre */
}

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

.htplaw-ap .htplaw-ap__name {
	margin-top: 22.5px;
}

.htplaw-ap__bio {
	margin-top: 14.5px;
	font-family: var(--htplaw-font-body);
	font-size: 16px;
	line-height: 26px;
}

.htplaw-ap__bio > * { margin: 0 0 26px; }
.htplaw-ap__bio > :last-child { margin-bottom: 0; }

.htplaw-ap__credentials {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 27px 0 0;
	padding: 0;
	list-style: none;
}

.htplaw-ap__credentials li {
	display: flex;
	align-items: center;
	min-height: 27px;
	padding: 4px 13px;
	border-radius: 999px;
	background: var(--_pill-bg);
	color: #ffffff;
	font-family: var(--htplaw-font-body);
	font-size: 11px;
	line-height: 1.3;
}

.htplaw-ap__links {
	margin-top: 29px;
}

/* Stacked links, 26px apart (second link from the client's mock-up, 2026-10-22).
   (0,2,0) beats Elementor's `.elementor a { text-decoration: none }`. */
.htplaw-ap .htplaw-ap__link {
	display: block;
	width: fit-content;
	color: inherit;
	font-family: var(--htplaw-font-body);
	font-size: 16px;
	line-height: 24px;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.htplaw-ap__link + .htplaw-ap__link {
	margin-top: 2px;
}

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

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

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

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

	.htplaw-ap__image {
		max-width: 367px;
	}

	.htplaw-ap__content {
		margin-top: 0;
	}

	.htplaw-ap__credentials li {
		font-size: 12px;
	}
}

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

/* Keeps the stacked links 26px apart with the larger touch areas
   (shared.css adds 10px padding and -10px margin on touch screens). */
@media (pointer: coarse), (max-width: 1024px) {
	.htplaw-ap .htplaw-ap__link + .htplaw-ap__link {
		margin-top: -8px;
	}
}