/*
 * Insights module styles.
 *
 * Ported from the site's existing static "Insights Feed" Beaver Builder
 * custom module (.ins) so the dynamic version matches it visually. Classes
 * are namespaced under .bl-ins / .bl-post / .bl-chip so this can never
 * collide with the original section's .ins / .post / .chip classes — both
 * can exist on the page at once for comparison.
 *
 * Colors, type, spacing and radii reference the site's design-system CSS
 * custom properties (--ds-*), which are already output globally by the
 * active Beaver Builder AI design system, so this file intentionally does
 * not hardcode any of those values.
 */

.bl-ins {
	margin: 0;
	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. The static section (a
   ds-block) bypasses the row/column structure entirely and never has this,
   so without this override .bl-ins-in ends up ~40px narrower than .ins-in
   at the same viewport width, shrinking the whole grid slightly at every
   breakpoint. Neutralize it specifically around this module's output. */
.fl-row-content-wrap:has(.bl-ins) {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.bl-ins-in {
	max-width: 1440px !important;
	margin: 0 auto;
	padding: 72px 4% 112px;
}

/* 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). .bl-ins-in isn't a ds-block so it's not in that
   auto-generated selector list — replicated manually here so responsive
   padding matches the static .ins-in exactly at every width. */
@media (max-width: 1024px) {
	.bl-ins-in {
		padding-top: 64px !important;
		padding-bottom: 64px !important;
	}
}

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

.bl-ins-heading {
	margin: 0 0 14px;
	font-family: var(--ds-font-brand);
	font-weight: var(--ds-weight-semibold);
	font-size: var(--ds-text-h3);
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--ds-color-text-heading);
}

.bl-ins-lede {
	margin: 0 0 44px;
	max-width: 74ch;
	font-size: var(--ds-text-body-md);
	line-height: 1.55;
	color: var(--ds-color-text-body);
}

.bl-ins-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	padding-bottom: 32px;
}

.bl-chip {
	border: 1px solid var(--ds-color-orange-700);
	background: transparent;
	border-radius: var(--ds-radius-pill);
	padding: 9px 18px;
	font-family: var(--ds-font-body);
	font-weight: var(--ds-weight-medium);
	font-size: var(--ds-text-body-sm);
	color: var(--ds-color-orange-700);
	cursor: pointer;
	transition: all 120ms cubic-bezier(.2, 0, .1, 1);
}

.bl-chip:hover {
	background: var(--ds-color-orange-050);
}

.bl-chip[aria-pressed="true"] {
	background: var(--ds-color-orange-700);
	border-color: var(--ds-color-orange-700);
	color: var(--ds-color-orange-050);
}

.bl-ins-div {
	height: 1px;
	background: var(--ds-color-border-subtle);
	margin: 0 0 44px;
}

.bl-ins-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 44px 32px;
	transition: opacity 150ms cubic-bezier(.2, 0, .1, 1);
}

.bl-ins-grid[aria-busy="true"] {
	opacity: .5;
	pointer-events: none;
}

.bl-post,
.bl-post:hover,
.bl-post:visited,
.bl-post:focus {
	text-decoration: none !important;
	border-bottom: none !important;
}

.bl-post {
	display: flex;
	flex-direction: column;
	gap: 0;
	cursor: pointer;
}

.bl-post h3,
.bl-post p,
.bl-post .bl-post-more,
.bl-post .bl-post-meta,
.bl-post .bl-post-meta b,
.bl-post .bl-post-meta span {
	text-decoration: none !important;
	border-bottom: none !important;
}

.bl-post.pre {
	opacity: 0;
}

.bl-post.in {
	animation: blInsPostFade 1100ms cubic-bezier(.2, 0, .1, 1) backwards;
	animation-delay: calc(var(--c, 0) * 170ms);
}

.bl-post.in .bl-post-shot img {
	animation: blInsPostSettle 2400ms cubic-bezier(.2, 0, .1, 1) backwards;
	animation-delay: calc(var(--c, 0) * 170ms);
}

@keyframes blInsPostFade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes blInsPostSettle {
	from { transform: scale(1.16); }
	to { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.bl-post.pre,
	.bl-post.in,
	.bl-post.in .bl-post-shot img {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

/* Featured image container: clips the zoomed image, matches the original card's photo box. */
.bl-post-shot {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 2;
	border-radius: var(--ds-radius-md);
	overflow: hidden;
	background: var(--ds-color-orange-050);
	margin-bottom: 20px;
	transition: background 200ms cubic-bezier(.2, 0, .1, 1);
}

.bl-post-shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 420ms cubic-bezier(.2, 0, .1, 1);
}

.bl-post:hover .bl-post-shot {
	background: var(--ds-color-orange-100);
}

/* Hover zoom effect, matching the existing section: image scales up slightly, stays clipped by .bl-post-shot's overflow:hidden. */
.bl-post:hover .bl-post-shot img {
	transform: scale(1.04);
}

.bl-post-meta {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	padding: 14px 18px;
	background: linear-gradient(180deg, rgba(19, 39, 56, 0) 0%, rgba(19, 39, 56, .62) 100%);
	font-size: var(--ds-text-caption);
	color: var(--ds-color-orange-050);
	margin: 0;
}

.bl-post-meta b {
	font-weight: var(--ds-weight-semibold);
	color: var(--ds-color-orange-050);
}

.bl-post-title {
	/* font-size and margin-bottom pinned with !important: this is an <h3>,
	   and the site's global heading-tag size ramp otherwise wins over this
	   declaration (same class of issue as the Insights List module's
	   border/margin overrides) — confirmed the static .post h3 renders at
	   17px/12px while this was rendering at 20px/0px before the fix. */
	margin: 0 0 12px !important;
	font-family: var(--ds-font-brand);
	font-weight: var(--ds-weight-semibold);
	font-size: var(--ds-text-h5) !important;
	line-height: 1.32;
	letter-spacing: -0.01em;
	color: var(--ds-color-text-heading);
}

.bl-post:hover .bl-post-title {
	color: var(--ds-color-orange-700);
}

.bl-post-excerpt {
	margin: 0 0 16px;
	color: var(--ds-color-text-body);
	font-size: var(--ds-text-body-md);
	line-height: 1.55;
}

.bl-post-more {
	margin-top: auto;
	font-family: var(--ds-font-brand);
	font-weight: var(--ds-weight-semibold);
	font-size: var(--ds-text-body-md);
	color: var(--ds-color-orange-700);
}

.bl-ins-empty {
	font-size: var(--ds-text-body-lg);
	color: var(--ds-color-text-body);
}

@media (max-width: 1100px) {
	.bl-ins-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {
	.bl-ins-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 767px) {
	.bl-ins-grid {
		gap: var(--ds-space-7) var(--ds-space-4);
	}

	.bl-ins-lede {
		margin-bottom: var(--ds-space-6);
	}

	.bl-ins-div {
		margin-bottom: var(--ds-space-6);
	}

	.bl-ins-chips {
		gap: var(--ds-space-2);
		padding-bottom: var(--ds-space-5);
	}

	.bl-post-shot {
		margin-bottom: var(--ds-space-4);
	}
}