/*
 * Insights List module styles.
 *
 * Ported from the site's two existing static "Insights" list sections
 * (the service/expertise-page variant: title + date; the lawyer-page
 * variant: title + practice-area tag + date), namespaced under .bl-inslist
 * so this can never collide with the static sections' .artrows / .svc-page
 * / .profile classes.
 */

.bl-inslist {
	background: var(--ds-color-white);
}

/* Beaver Builder's own .fl-row-content-wrap bakes in a 20px side padding
   regardless of the row's own padding setting. Both static "Insights" list
   sections are ds-blocks and bypass the row/column structure entirely, so
   they never have this — without this override .bl-inslist-in ends up
   narrower than the static section at the same viewport width. Neutralize
   it specifically around this module's output. Confirmed against the live
   /insights/ page's Insights Feed module, which has the identical issue. */
.fl-row-content-wrap:has(.bl-inslist) {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.bl-inslist-in {
	max-width: 1440px;
	margin: 0 auto;
	padding: 88px 4%;
}

/* The site's global design-system "page floor" stylesheet auto-tightens
   padding on every known ds-block .xxx-in container at these breakpoints
   (via !important) — confirmed identical values (64px / 44px / 20px) across
   both static "Insights" list host sections (.svc-page .band-in and
   .profile .profile-in). .bl-inslist-in isn't a ds-block so it's not in
   that auto-generated selector list — replicated manually here. */
@media (max-width: 1024px) {
	.bl-inslist-in {
		padding-top: 64px !important;
		padding-bottom: 64px !important;
	}
}

@media (max-width: 767px) {
	.bl-inslist-in {
		padding-top: 44px !important;
		padding-bottom: 44px !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}

.bl-inslist-head {
	/* !important: the theme's own heading rules otherwise win this margin.
	   44px matches the expertise-page static section's own heading spacing;
	   the lawyer-page static section actually uses a smaller 20px (see the
	   --tagged override below) — the two originals aren't the same. */
	margin: 0 0 44px !important;
	font-family: var(--ds-font-brand);
	font-weight: var(--ds-weight-semibold);
	font-size: var(--ds-text-h3);
	color: var(--ds-color-text-heading);
}

.bl-inslist--tagged .bl-inslist-head {
	margin-bottom: 20px !important;
}

.bl-inslist-rows {
	display: grid;
	gap: 0;
}

.bl-inslist-row {
	display: grid;
	align-items: center;
	padding: 22px 14px;
	/* !important on both border declarations: the theme's own link/anchor
	   rules otherwise win against this module's single-class selector and
	   the border ends up a different (darker) color than the static
	   section, whose compound selectors (.svc-page .artrows a etc.) have
	   enough specificity to not need this. Pinning here keeps both the
	   resting and hover border color identical to the static section. */
	border-bottom: 1px solid var(--ds-color-border-subtle) !important;
	text-decoration: none !important;
}

.bl-inslist-row:first-child {
	border-top: 1px solid var(--ds-color-border-subtle) !important;
}

.bl-inslist-row:hover {
	background: var(--ds-color-orange-050);
	border-bottom-color: var(--ds-color-border-subtle) !important;
}

.bl-inslist-row:first-child:hover {
	border-top-color: var(--ds-color-border-subtle) !important;
}

.bl-inslist-title {
	margin: 0;
	font-family: var(--ds-font-brand);
	font-weight: var(--ds-weight-semibold);
	font-size: var(--ds-text-h4);
	color: var(--ds-color-text-heading);
}

.bl-inslist-tag,
.bl-inslist-date {
	font-size: var(--ds-text-caption);
	color: var(--ds-color-text-muted);
}

/* Simple layout: title + date (service/expertise pages). */
.bl-inslist-rows--simple .bl-inslist-row {
	grid-template-columns: 1fr 140px;
	gap: 32px;
}

/* Tagged layout: title + practice area + date (lawyer profile pages). */
.bl-inslist-rows--tagged .bl-inslist-row {
	grid-template-columns: 1fr 200px 120px;
	gap: 24px;
}

.bl-inslist-rows--tagged .bl-inslist-title {
	font-size: var(--ds-text-h5);
}

@media (max-width: 1100px) {
	.bl-inslist-rows--simple .bl-inslist-row {
		grid-template-columns: 1fr;
		gap: 8px;
	}
}

@media (max-width: 900px) {
	.bl-inslist-rows--tagged .bl-inslist-row {
		grid-template-columns: 1fr;
		gap: 6px;
	}
}