/**
 * Single blog post + whitepaper article template (Figma: post - adjustments)
 *
 * Header offset model (do not stack extra paddings on top of this):
 * - Rest of site: `.fixed-header { min-height: var(--ies-header-height) }`
 *   is the in-flow spacer; `.site-content { padding-top: 20px }` is extra gap.
 * - Blog (no ticker): spacer is 0 so the header overlays. Hero `padding`
 *   is the visible inset (matched top/bottom). `margin-top` is header +
 *   pre-header clearance so DevTools padding values stay equal.
 * - Legacy `.post-page .content-width { padding-top: 80px !important }` and
 *   Storefront `.hentry .wp-post-image { margin-bottom: 1.618em }` are reset
 *   below so they cannot leak onto this template.
 */

/* Solid white header above light hero */
body.ies-article-single .site-header {
	position: relative;
	width: 100%;
	background: #fff;
}

body.ies-article-single .header-wrapper,
body.ies-article-single .fixed-header {
	background: #fff;
}

body.ies-article-single:not(.has-ticker-bar) .fixed-header {
	min-height: 0;
}

/* Hero owns top offset — drop the global 20px so it does not sit under the nav.
 * flow-root keeps the hero's margin-top from collapsing into this wrapper. */
body.ies-article-single .site-content {
	padding-top: 0;
	display: flow-root;
}

body.ies-article-single:not(.scroll-header) .header-wrapper .main-navigation .menu-main-menu-container .primary-menu > li > a {
	color: var(--ies-navy, #11294b);
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.ies-blog-hero {
	--ies-blog-hero-inset: 80px;
	position: relative;
	overflow: hidden;
	background: var(--ies-light-purple-gray, #f7f7fd);
	color: var(--ies-navy-text, #11294b);
	/* Visible inset — same top and bottom. Chrome clearance is margin-top. */
	padding: var(--ies-blog-hero-inset) 0;
}

/*
 * No-ticker: header overlays the hero. Push the purple box below the bar
 * with margin so padding-top stays equal to padding-bottom.
 */
body.ies-article-single:not(.has-ticker-bar) .ies-blog-hero {
	margin-top: calc(
		var(--ies-header-height, 110px) +
		var(--ies-preheader-height, 33px)
	);
}

/* Kill leftover `.post-page .content-width { padding-top: 80px !important }` */
.ies-blog-single .content-width {
	padding-top: 0 !important;
}

/*
 * Site gutter for the article template: 30px desktop, 20px mobile.
 * Same 1280 column + gutter used by footer / homepage modules.
 */
body.ies-article-single {
	--ies-blog-gutter: var(--ies-site-gutter, 30px);
}

@media (max-width: 767px) {
	body.ies-article-single {
		--ies-blog-gutter: 20px;
	}
}

body.ies-article-single .ies-blog-hero__inner.content-width,
body.ies-article-single .ies-blog-layout.content-width,
body.ies-article-single .ies-blog-related > .content-width {
	max-width: calc(var(--ies-site-max-width, 1280px) + 2 * var(--ies-blog-gutter)) !important;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--ies-blog-gutter) !important;
	padding-right: var(--ies-blog-gutter) !important;
	box-sizing: border-box;
}

.ies-blog-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
}

.ies-blog-hero__title {
	margin: 0 0 28px;
}

.ies-blog-hero--no-meta .ies-blog-hero__title {
	margin-bottom: 0;
}

.ies-blog-hero--no-meta .ies-blog-hero__title + .ies-blog-hero__intro {
	margin-top: 20px;
	margin-bottom: 0;
}

.ies-blog-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 28px;
}

@media (max-width: 767px) {
	.ies-blog-hero__meta-item--author {
		flex: 1 1 100%;
	}
}

.ies-blog-hero__meta-item {
	display: flex;
	align-items: center;
	gap: 12px;
}

.ies-blog-hero__meta-item--author {
	align-items: center;
}

.ies-blog-hero__avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	flex-shrink: 0;
}

.ies-blog-hero__author {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ies-blog-hero__author-title {
	display: block;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--ies-navy-text, #11294b);
	opacity: 0.75;
}

.ies-blog-hero__meta-label {
	display: block;
	font-size: 12px;
	line-height: 1.3;
	opacity: 0.75;
	margin-bottom: 2px;
	color: var(--ies-navy-text, #11294b);
}

.ies-blog-hero__meta-value {
	display: block;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ies-navy-text, #11294b);
}

.ies-blog-hero__image-wrap {
	margin: 0;
}

.ies-blog-hero__image,
.ies-blog-hero__image.wp-post-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 20px;
	box-shadow: 0 16px 40px color-mix(in srgb, var(--ies-navy, #11294B) 12%, transparent);
	/* Storefront `.hentry .wp-post-image { margin-bottom: 1.618em }` */
	margin: 0;
}

/* ── Whitepaper hero (Deel-style form card) ───────────────────────────── */

.ies-blog-hero--whitepaper {
	background: var(--ies-card-hover-bg, #EFECFC);
}

.ies-blog-hero--whitepaper .ies-blog-hero__inner {
	width: 100%;
	box-sizing: border-box;
}

.ies-blog-hero--whitepaper .ies-blog-hero__image,
.ies-blog-hero--whitepaper .ies-blog-hero__image.wp-post-image {
	aspect-ratio: auto;
	object-fit: contain;
	box-shadow: none;
}

.ies-blog-hero--whitepaper.ies-blog-hero--has-form .ies-blog-hero__inner {
	align-items: start;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
}

/*
 * Desktop two-column: form keeps equal inset above/below; the featured image
 * fills the leftover copy column and sits flush on the section bottom.
 */
@media (min-width: 1025px) {
	.ies-blog-hero--whitepaper.ies-blog-hero--has-form {
		padding-bottom: 0;
	}

	.ies-blog-hero--whitepaper.ies-blog-hero--has-form .ies-blog-hero__inner {
		align-items: stretch;
	}

	.ies-blog-hero--whitepaper.ies-blog-hero--has-form .ies-blog-hero__copy {
		display: flex;
		flex-direction: column;
		min-height: 0;
	}

	.ies-blog-hero--whitepaper.ies-blog-hero--has-form .ies-blog-hero__form-wrap {
		padding-bottom: var(--ies-blog-hero-inset);
	}

	.ies-blog-hero--whitepaper.ies-blog-hero--has-form .ies-blog-hero__image-wrap--below-meta {
		flex: 1 1 auto;
		display: flex;
		align-items: stretch;
		min-height: 0;
		margin-top: 32px;
		overflow: hidden;
	}

	.ies-blog-hero--whitepaper.ies-blog-hero--has-form .ies-blog-hero__image,
	.ies-blog-hero--whitepaper.ies-blog-hero--has-form .ies-blog-hero__image.wp-post-image {
		width: 100%;
		height: 100%;
		min-height: 0;
		aspect-ratio: auto;
		object-fit: contain;
		object-position: center bottom;
		border-radius: 20px 20px 0 0;
	}
}

.ies-blog-hero--copy-only .ies-blog-hero__inner {
	grid-template-columns: minmax(0, 1fr);
}

.ies-blog-hero__eyebrow {
	margin: 0 0 12px;
	font-family: var(--ies-font-body, Onest, sans-serif);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ies-eyebrow-color, var(--ies-primary, #5D43DE));
}

.ies-blog-hero__intro {
	margin: 0 0 28px;
	max-width: 36em;
	font-size: 18px;
	line-height: 1.6;
	color: var(--ies-navy-text, #11294b);
}

.ies-blog-hero--whitepaper .ies-blog-hero__title {
	margin-bottom: 20px;
}

.ies-blog-hero--whitepaper .ies-blog-hero__image-wrap--below-meta {
	margin-top: 32px;
}

.ies-blog-hero--whitepaper .ies-blog-hero__form-wrap {
	min-width: 0;
}

/*
 * Whitepaper download card uses shared .ies-hs-form--landing styles from
 * ies-hubspot-form.css (same as the IES HubSpot Form Elementor widget).
 */

/* ── Layout ───────────────────────────────────────────────────────────── */

/* The element is <main class="site-main ies-blog-main">, so Storefront's
 * .site-main { margin-bottom: 2.617924em } lands here too. On these templates the
 * article is not the last thing on the page — the related-resources and CTA
 * sections follow it — so that margin only opened a gap mid-page. Same
 * specificity as .site-main, won on order because this file loads later. */
.ies-blog-main {
	padding: 56px 0 72px;
	background: #fff;
	margin-bottom: 0;
}

.ies-blog-layout {
	display: grid;
	grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

.ies-blog-layout:not(:has(.ies-blog-sidebar)) {
	grid-template-columns: minmax(0, 1fr);
}

.ies-blog-layout--sidebar-end {
	grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
}

.ies-blog-sidebar {
	--ies-blog-sticky-gap: 10px;
	position: sticky;
	/* Scrolled down: ticker + pre-header are off-screen; sit below the header bar. */
	top: calc(var(--ies-header-height, 110px) + var(--ies-blog-sticky-gap));
	display: flex;
	flex-direction: column;
	gap: 24px;
	transition: top 0.3s ease;
}

/* Scroll up: pre-header returns */
html.scrolled-up .ies-blog-sidebar {
	top: calc(var(--ies-preheader-height, 33px) + var(--ies-header-height, 110px) + var(--ies-blog-sticky-gap));
}

/* Scroll up + ticker: ticker and pre-header both return */
html.scrolled-up body.has-ticker-bar .ies-blog-sidebar {
	top: calc(var(--ies-chrome-offset, 67px) + var(--ies-header-height, 110px) + var(--ies-blog-sticky-gap));
}

.ies-blog-content {
	min-width: 0;
}

/* ── TOC dropdown ─────────────────────────────────────────────────────── */

.ies-blog-toc {
	position: relative;
}

.ies-blog-toc__toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	border: 1px solid var(--ies-neutral-gray, #D8D8E0);
	border-radius: 12px;
	background: #fff;
	color: var(--ies-navy, #11294b);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	text-align: left;
}

.ies-blog-toc__chevron {
	width: 10px;
	height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
	flex-shrink: 0;
	margin-top: -4px;
}

.ies-blog-toc.is-open .ies-blog-toc__chevron {
	transform: rotate(-135deg);
	margin-top: 4px;
}

.ies-blog-toc__menu {
	list-style: none;
	margin: 8px 0 0;
	padding: 8px 0;
	border: 1px solid var(--ies-neutral-gray, #D8D8E0);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 8px 24px color-mix(in srgb, var(--ies-navy, #11294B) 10%, transparent);
	max-height: 320px;
	overflow: auto;
}

.ies-blog-toc__menu a {
	display: block;
	padding: 10px 18px;
	color: var(--ies-navy, #11294b);
	text-decoration: none;
	font-size: 15px;
	line-height: 1.4;
}

.ies-blog-toc__menu a:hover,
.ies-blog-toc__menu a:focus-visible {
	background: var(--ies-light-purple-gray, #F7F7FD);
	color: var(--ies-primary, #5D43DE);
}

/* ── Subscribe callout ────────────────────────────────────────────────── */

.ies-blog-subscribe {
	position: relative;
	overflow: hidden;
	border-radius: 20px;
	padding: 28px 30px 30px;
	color: #fff;
	background: var(--purples-grad, linear-gradient(89deg, #4D4285 0%, #5D43DE 70%, #A4A2E6 100%));
}

.ies-blog-subscribe::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse 80% 70% at 100% 0%, rgba(109, 202, 195, 0.35) 0%, transparent 55%),
		radial-gradient(ellipse 60% 50% at 0% 100%, color-mix(in srgb, var(--ies-primary-mid, #A4A2E6) 40%, transparent) 0%, transparent 55%);
}

.ies-blog-subscribe > * {
	position: relative;
	z-index: 1;
}

/* Sidebar card chrome — not a page heading; keep compact type + white on purple. */
.ies-blog-subscribe__heading {
	margin: 0 0 10px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.15;
	color: #fff;
}

.ies-blog-subscribe__description {
	margin: 0 0 22px;
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.95);
}

.ies-blog-subscribe__actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ies-blog-subscribe__input {
	width: 100%;
	height: 53px;
	border-radius: 50px;
	border: 1px solid var(--ies-primary-lighter, #D2D1F1);
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
	padding: 0 22px;
	font-size: 16px;
}

.ies-blog-subscribe__input::placeholder {
	color: rgba(255, 255, 255, 0.85);
}

.ies-blog-subscribe__button,
.ies-blog-subscribe__button--static {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	padding: 12px 24px;
	border-radius: 50px;
	background: #fff;
	color: var(--ies-primary, #5D43DE);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid #fff;
	transition: background 0.2s ease, color 0.2s ease;
}

.ies-blog-subscribe__button:hover,
.ies-blog-subscribe__button:focus-visible {
	background: var(--ies-light-purple-gray, #F7F7FD);
	color: var(--ies-primary-dark, #4D4285);
}

/* HubSpot raw HTML form (css: '') inside purple sidebar */
.ies-blog-subscribe__form .hs-form,
.ies-blog-subscribe__form form,
.ies-blog-subscribe__form .hs-form-html {
	margin: 0;
	width: 100%;
}

.ies-blog-subscribe__form fieldset {
	max-width: none;
	border: 0;
	margin: 0;
	padding: 0;
}

.ies-blog-subscribe__form .hs-form-field {
	margin: 0 0 12px;
}

.ies-blog-subscribe__form .hs-form-field > label,
.ies-blog-subscribe__form label {
	display: block;
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 500;
	color: #fff;
}

.ies-blog-subscribe__form .hs-form-required {
	color: #fff;
}

.ies-blog-subscribe__form .hs-form-field .hs-input,
.ies-blog-subscribe__form .hs-form-field input.hs-input,
.ies-blog-subscribe__form .hs-form-field input[type="email"],
.ies-blog-subscribe__form .hs-form-field input[type="text"],
.ies-blog-subscribe__form .hs-input,
.ies-blog-subscribe__form input.hs-input,
.ies-blog-subscribe__form input[type="email"],
.ies-blog-subscribe__form input[type="text"] {
	width: 100%;
	height: 53px;
	border-radius: 50px !important;
	border: 1px solid var(--ies-primary-lighter, #D2D1F1);
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
	padding: 0 22px;
	font-size: 16px;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.ies-blog-subscribe__form .hs-input::placeholder,
.ies-blog-subscribe__form input::placeholder {
	color: rgba(255, 255, 255, 0.85);
}

.ies-blog-subscribe__form .hs-button,
.ies-blog-subscribe__form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	padding: 12px 24px;
	border-radius: 50px !important;
	background: #fff !important;
	color: var(--ies-primary, #5D43DE) !important;
	border: 1px solid #fff !important;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: none;
}

.ies-blog-subscribe__form .hs-button:hover,
.ies-blog-subscribe__form input[type="submit"]:hover {
	background: var(--ies-light-purple-gray, #F7F7FD) !important;
	color: var(--ies-primary-dark, #4D4285) !important;
}

.ies-blog-subscribe__form .hs-error-msgs,
.ies-blog-subscribe__form .hs-error-msgs label {
	color: #ffe3e3;
	font-size: 13px;
}

/* ── Key takeaways + content ──────────────────────────────────────────── */

.ies-blog-takeaways {
	background: var(--ies-light-purple-gray, #F7F7FD);
	border-radius: 20px;
	padding: 40px 48px;
	margin-bottom: 48px;
}

.ies-blog-takeaways__title {
	margin: 0 0 20px;
}

.ies-blog-takeaways__body > *:first-child {
	margin-top: 0;
}

.ies-blog-takeaways__body > *:last-child {
	margin-bottom: 0;
}

.ies-blog-takeaways__body ul {
	list-style: none;
	margin: 0;
	margin-left: 0;
	padding: 0;
	padding-left: 0;
}

.ies-blog-takeaways__body ul li {
	position: relative;
	margin: 0 0 12px;
	padding-left: 28px;
}

.ies-blog-takeaways__body ul li:last-child {
	margin-bottom: 0;
}

.ies-blog-takeaways__body ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 16px;
	height: 12px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12' fill='none'%3E%3Cpath d='M5.3345 11.3038L0 5.96925L1.069 4.9L5.3345 9.1655L14.5 0L15.569 1.06925L5.3345 11.3038Z' fill='%235D43DE'/%3E%3C/svg%3E") no-repeat center / contain;
}

.ies-blog-takeaways__body ul ul {
	margin-top: 8px;
	padding-left: 0;
}

.ies-blog-entry {
	color: var(--ies-navy, #11294b);
	font-size: 18px;
	line-height: 1.7;
}

.ies-blog-entry a {
	color: var(--ies-primary, #5D43DE);
}

.ies-blog-entry > *:first-child {
	margin-top: 0;
}

/* ── FAQ accordion ────────────────────────────────────────────────────── */

.ies-blog-faq {
	margin-top: 56px;
	padding-top: 48px;
	border-top: 1px solid color-mix(in srgb, var(--ies-navy, #11294B) 10%, transparent);
}

.ies-blog-faq__title {
	margin: 0 0 24px;
}

.ies-blog-faq__list {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/*
 * Closed items sit flush with the column; the open card's background bleeds out to
 * the column edges while question/answer text stays aligned across both states.
 * The transparent border reserves the open state's 1px so nothing shifts on toggle.
 */
.ies-blog-faq__item {
	border: 1px solid transparent;
	border-radius: 20px;
	transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.ies-blog-faq__item.is-open {
	background: var(--ies-card-hover-bg, #EFECFC);
	border-color: var(--ies-light-purple, #A4A2E6);
	box-shadow:
		0 20px 24px -4px rgba(0, 0, 0, 0.08),
		0 8px 8px -4px rgba(0, 0, 0, 0.03);
}

/* Storefront styles all buttons on hover/focus; keep this one chromeless in every state. */
.ies-blog-faq__question,
.ies-blog-faq__question:hover,
.ies-blog-faq__question:focus,
.ies-blog-faq__question:active {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	margin: 0;
	padding: 0 30px;
	background: none;
	border: 0;
	border-radius: 20px;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.ies-blog-faq__item.is-open .ies-blog-faq__question {
	padding-top: 30px;
}

.ies-blog-faq__question-text {
	font-family: var(--ies-font-body, Onest, sans-serif);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--ies-navy-text, #11294B);
}

.ies-blog-faq__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50px;
	background: var(--ies-card-hover-bg, #EFECFC);
	transition: background-color 0.2s ease;
}

.ies-blog-faq__icon svg {
	display: block;
	width: 17.45px;
	height: 9.7px;
	transition: transform 0.2s ease;
}

.ies-blog-faq__icon svg path {
	fill: var(--ies-navy-text, #11294B);
}

.ies-blog-faq__item.is-open .ies-blog-faq__icon {
	background: var(--ies-primary, #5D43DE);
}

.ies-blog-faq__item.is-open .ies-blog-faq__icon svg {
	transform: rotate(180deg);
}

.ies-blog-faq__item.is-open .ies-blog-faq__icon svg path {
	fill: #fff;
}

/* Hover affects the chevron circle only; the chevron goes white to stay legible on it. */
.ies-blog-faq__question:hover .ies-blog-faq__icon,
.ies-blog-faq__question:focus-visible .ies-blog-faq__icon {
	background: var(--ies-primary-dark, #4D4285);
}

.ies-blog-faq__question:hover .ies-blog-faq__icon svg path,
.ies-blog-faq__question:focus-visible .ies-blog-faq__icon svg path {
	fill: #fff;
}

.ies-blog-faq__answer {
	padding: 20px 30px 30px;
	font-family: var(--ies-font-body, Onest, sans-serif);
	font-size: 16px;
	line-height: 1.6;
	color: var(--ies-navy-text, #11294B);
}

.ies-blog-faq__answer[hidden] {
	display: none;
}

.ies-blog-faq__answer a {
	color: var(--ies-primary, #5D43DE);
}

.ies-blog-faq__answer > *:first-child {
	margin-top: 0;
}

.ies-blog-faq__answer > *:last-child {
	margin-bottom: 0;
}

/* ── Additional callouts ──────────────────────────────────────────────── */

.ies-blog-callouts {
	margin-top: 40px;
	color: var(--ies-navy, #11294b);
	font-size: 18px;
	line-height: 1.7;
}

.ies-blog-callouts a {
	color: var(--ies-primary, #5D43DE);
}

.ies-blog-callouts > *:first-child {
	margin-top: 0;
}

.ies-blog-callouts > *:last-child {
	margin-bottom: 0;
}

/* ── About the author ─────────────────────────────────────────────────── */

.ies-blog-author {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	margin-top: 48px;
	padding-top: 40px;
	border-top: 1px solid color-mix(in srgb, var(--ies-navy, #11294B) 10%, transparent);
}

.ies-blog-author__avatar {
	display: block;
	flex-shrink: 0;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
}

.ies-blog-author__bio {
	margin: 0;
	font-family: var(--ies-font-body, Onest, sans-serif);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--ies-navy-text, #11294B);
}

.ies-blog-author__name {
	font-weight: 700;
}

/* ── Related resources ────────────────────────────────────────────────── */

.ies-blog-related {
	background: var(--ies-light-purple-gray, #F7F7FD);
	padding: 72px 0;
}

.ies-blog-related > .content-width {
	padding-top: 0 !important;
	padding-bottom: 0;
}

.ies-blog-related__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 40px;
}

.ies-blog-related__title {
	margin: 0;
}

.ies-blog-related__view-all {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border-radius: 50px;
	border: 2px solid var(--ies-primary, #5D43DE);
	color: var(--ies-primary, #5D43DE);
	font-weight: 600;
	font-size: 16px;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s ease, color 0.2s ease;
}

.ies-blog-related__view-all:hover,
.ies-blog-related__view-all:focus-visible {
	background: var(--ies-primary, #5D43DE);
	color: #fff;
}

.ies-blog-related__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
	/* stretch = equal card heights based on tallest content */
	align-items: stretch;
}

.ies-blog-related-card {
	display: flex;
	flex-direction: column;
	/* Let grid stretch handle equal height — do not set height:100% */
	background: #fff;
	border: 1px solid color-mix(in srgb, var(--ies-navy, #11294B) 8%, transparent);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ies-blog-related-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
}

.ies-blog-related-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--ies-light-purple-gray, #F7F7FD);
}

.ies-blog-related-card__image,
.ies-blog-related-card .wp-post-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
	margin: 0;
}

.ies-blog-related-card:hover .ies-blog-related-card__image {
	transform: scale(1.05);
}

.ies-blog-related-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	/* Figma card text inset ~30px; vertical rhythm from mockup nodes */
	padding: 30px;
	gap: 0;
}

.ies-blog-related-card__eyebrow {
	display: block;
	margin: 0 0 10px;
	font-family: "Onest", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.16px;
	text-transform: none;
	color: var(--ies-primary-dark, #4D4285);
}

.ies-blog-related-card__title {
	margin: 0 0 20px;
	font-family: Onest, sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: 120%; /* 24px */
	color: var(--ies-navy-text, #11294B);
}

/* Storefront sets `h3 a { font-weight: 300 }` — re-assert full heading styles on the link */
.ies-blog-related-card__title a {
	font-family: Onest, sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: 120%;
	color: var(--ies-navy-text, #11294B);
	text-decoration: none;
}

.ies-blog-related-card__title a:hover,
.ies-blog-related-card__title a:focus-visible {
	color: var(--ies-primary, #5D43DE);
}

.ies-blog-related-card__date {
	display: block;
	margin: 0;
	font-family: "Onest", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--ies-navy, #11294b);
}

/* Link chrome from ies-buttons.css; keep layout spacing for card footer */
.ies-blog-related-card__link {
	margin-top: auto;
	padding-top: 30px;
}

/* ── CTA band ─────────────────────────────────────────────────────────── */

.ies-blog-cta {
	margin: 0;
}

.ies-blog-cta .ies-cta-banner--full-width {
	left: 0;
	margin-left: 0;
	width: 100%;
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
	.ies-blog-hero__inner,
	.ies-blog-layout,
	.ies-blog-related__grid {
		grid-template-columns: 1fr;
	}

	.ies-blog-hero--whitepaper.ies-blog-hero--has-form .ies-blog-hero__inner {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.ies-blog-hero--whitepaper.ies-blog-hero--has-form .ies-blog-hero__image,
	.ies-blog-hero--whitepaper.ies-blog-hero--has-form .ies-blog-hero__image.wp-post-image {
		border-radius: 20px 20px 0 0;
	}

	.ies-blog-sidebar {
		position: static;
	}

	.ies-blog-hero {
		--ies-blog-hero-inset: 48px;
	}

	.ies-blog-takeaways {
		padding: 28px 24px;
	}

	.ies-blog-related__header {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 640px) {
	.ies-blog-main {
		padding: 36px 0 48px;
	}

	.ies-blog-related {
		padding: 48px 0;
	}

	.ies-blog-faq__list {
		gap: 28px;
	}

	.ies-blog-faq__question {
		gap: 16px;
		padding: 0 20px;
	}

	.ies-blog-faq__item.is-open .ies-blog-faq__question {
		padding-top: 20px;
	}

	.ies-blog-faq__question-text {
		font-size: 18px;
	}

	.ies-blog-faq__answer {
		padding: 16px 20px 20px;
	}

	.ies-blog-author {
		gap: 16px;
		margin-top: 36px;
		padding-top: 28px;
	}

	.ies-blog-author__avatar {
		width: 64px;
		height: 64px;
	}
}