/**
 * HTPLaw Practice Areas widget.
 *
 * Measured from the 4x Figma export (design px, section top = 0, height 867):
 * #f5f7f9 band. Left (497px): eyebrow centre 97.5, heading 43/50 at 137,
 * image 439×432 (#f8f9fa placeholder, 6px radius) at 335. Right (555px,
 * flush right): 2px #24597f rule at 92; rows separated by 1px #898989, 55px
 * pitch; first title centred 40px below the rule, others 30px below their
 * separator. Number Source Serif 4 14px #24597f in a 49px column; title
 * Source Serif 4 600 24px −3%; ±icon 24px #0e1b2c (Bootstrap Icons
 * plus-circle / dash-circle-fill, geometry verified against the export).
 * Open panel: text Inter 16/24 (506px) 5px below the row, link Inter 16px
 * 28px below the text, 32px to the next separator. Bottom padding 100.
 *
 * Deviations: Figma's last row is 61px (others 55) — uniform here, so the
 * list ends ~5px above the image bottom. Title/text are #000 in Figma; navy
 * text token here. Link copper uses the AA tone.
 * Below 900px: one column, image after the list (not in Figma).
 */

.htplaw-pa {
	--_bg: var(--htplaw-pa-bg, var(--htplaw-color-muted));
	--_top-rule: var(--htplaw-pa-top-rule, var(--htplaw-color-blue));
	--_rule: var(--htplaw-pa-rule, var(--htplaw-color-rule));
	--_number: var(--htplaw-pa-number, var(--htplaw-color-blue));
	--_icon: var(--htplaw-pa-icon, var(--htplaw-color-primary));
	--_link: var(--htplaw-pa-link, var(--htplaw-color-accent-strong));

	padding: 87px 0 100px;
	background: var(--_bg);
}

.htplaw-pa__inner {
	display: grid;
	grid-template-columns: minmax(0, 497px) minmax(0, 555px);
	justify-content: space-between;
	align-items: start;
	column-gap: 48px;
}

.htplaw-pa__eyebrow {
	margin-bottom: 29px;
	text-transform: uppercase;
}

.htplaw-pa__image {
	max-width: 439px;
	margin-top: 48px;
	aspect-ratio: 439 / 432;
	overflow: hidden;
	border-radius: var(--htplaw-radius);
	background: #f8f9fa;
}

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

/* Accordion */
.htplaw-pa__list {
	margin-top: 5px;
	border-top: 2px solid var(--_top-rule);
	border-bottom: 1px solid var(--_rule);
}

.htplaw-pa__item {
	padding-top: 4px;
	border-top: 1px solid var(--_rule);
}

.htplaw-pa__item:first-child {
	padding-top: 15px;
	border-top: 0;
}

/* (0,2,0)+ beats the Elementor kit's heading rules. */
.htplaw-pa .htplaw-pa__heading {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

.htplaw-pa__trigger {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 50px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--htplaw-color-primary);
	text-align: left;
	white-space: normal; /* Hello Elementor sets nowrap on all buttons */
	user-select: text;
	cursor: pointer;
}

.htplaw-pa__trigger:hover,
.htplaw-pa__trigger:focus {
	background: none;
	color: var(--htplaw-color-primary);
}

.htplaw-pa__number {
	flex: 0 0 49px;
	color: var(--_number);
	font-family: var(--htplaw-font-heading);
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
}

.htplaw-pa__name {
	flex: 1;
	min-width: 0;
	font-family: var(--htplaw-font-heading);
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -.03em;
	line-height: 1.25;
	transition: color var(--htplaw-duration) var(--htplaw-ease);
}

.htplaw-pa__trigger:hover .htplaw-pa__name {
	color: var(--htplaw-color-blue);
}

.htplaw-pa__icon {
	display: none;
	flex: 0 0 24px;
	margin-left: 16px;
	color: var(--_icon);
}

.htplaw-pa__icon svg {
	display: block;
	width: 24px;
	height: 24px;
}

.htplaw-pa__trigger[aria-expanded="false"] .htplaw-pa__icon--plus,
.htplaw-pa__trigger[aria-expanded="true"] .htplaw-pa__icon--minus {
	display: block;
}

.htplaw-pa__panel {
	padding: 5px 0 32px 49px;
}

.htplaw-pa__text {
	max-width: 506px;
	margin: 0;
	color: var(--htplaw-color-text);
	font-family: var(--htplaw-font-body);
	font-size: 16px;
	line-height: 24px;
}

.htplaw-pa__link {
	display: inline-block;
	margin-top: 28px;
	color: var(--_link);
	font-family: var(--htplaw-font-body);
	font-size: 16px;
	line-height: 25px;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.htplaw-pa__text + .htplaw-pa__link {
	margin-top: 28px;
}

.htplaw-pa__panel > .htplaw-pa__link:first-child {
	margin-top: 0;
}

/* Decorative arrow: hidden from screen readers where alt text is supported. */
.htplaw-pa__link::after {
	content: " →";
	content: " →" / "";
}

.htplaw-pa__link:hover {
	color: var(--htplaw-color-primary);
}

.htplaw-pa__notice {
	margin: 0;
	padding: 1rem;
	border: 1px dashed currentColor;
	color: var(--htplaw-color-secondary);
	font-size: .875rem;
}

@media (max-width: 900px) {
	.htplaw-pa {
		padding: var(--htplaw-space-section) 0;
	}

	.htplaw-pa__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Let intro children join the grid so the image can follow the list. */
	.htplaw-pa__intro {
		display: contents;
	}

	.htplaw-pa__eyebrow { order: 1; }
	.htplaw-pa__title { order: 2; }
	.htplaw-pa__list { order: 3; margin-top: 32px; }
	.htplaw-pa__image { order: 4; margin-top: 40px; }

	.htplaw-pa__name {
		font-size: 20px;
	}

	.htplaw-pa__number {
		flex-basis: 32px;
	}

	.htplaw-pa__panel {
		padding-left: 32px;
	}
}

/* Phones: a wide crop keeps the image (after the list) from becoming a tall box. */
@media (max-width: 600px) {
	.htplaw-pa__image {
		aspect-ratio: 16 / 9;
		margin-top: 32px;
	}
}