/**
 * Shared responsive typography and spacing for single blog and newsletter articles.
 */
:root {
	--ep-article-h1: clamp(1.5rem, 1.1rem + 1.3vw, 2rem);
	--ep-article-body: clamp(0.9375rem, 0.88rem + 0.25vw, 1rem);
	--ep-article-h2: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
	--ep-article-h3: clamp(1.125rem, 0.98rem + 0.55vw, 1.375rem);
	--ep-article-h4: clamp(1rem, 0.92rem + 0.35vw, 1.1875rem);
	--ep-article-h5: clamp(0.9375rem, 0.88rem + 0.25vw, 1.0625rem);
	--ep-article-quote: clamp(1rem, 0.92rem + 0.35vw, 1.125rem);

	--ep-article-h1-space-below: clamp(0.75rem, 0.68rem + 0.25vw, 1rem);
	--ep-article-h2-space-above: clamp(1.125rem, 0.95rem + 0.7vw, 1.5rem);
	--ep-article-h3-space-above: clamp(1rem, 0.88rem + 0.5vw, 1.25rem);
	--ep-article-h4-space-above: clamp(0.9375rem, 0.85rem + 0.35vw, 1.125rem);
	--ep-article-h5-space-above: clamp(0.875rem, 0.8rem + 0.3vw, 1.125rem);
	--ep-article-h6-space-above: clamp(0.875rem, 0.8rem + 0.3vw, 1.125rem);
	--ep-article-h2-space-below: clamp(0.5rem, 0.42rem + 0.25vw, 0.625rem);
	--ep-article-h3-space-below: clamp(0.4375rem, 0.38rem + 0.2vw, 0.5rem);
	--ep-article-h4-space-below: clamp(0.375rem, 0.34rem + 0.15vw, 0.5rem);
	--ep-article-h5-space-below: clamp(0.3125rem, 0.28rem + 0.12vw, 0.375rem);
	--ep-article-h6-space-below: clamp(0.3125rem, 0.28rem + 0.12vw, 0.375rem);
	--ep-article-body-space-below: clamp(0.75rem, 0.7rem + 0.2vw, 1rem);
	--ep-article-heading-stack-space: clamp(0.625rem, 0.55rem + 0.25vw, 0.75rem);
	--ep-article-header-space-below: clamp(1rem, 0.88rem + 0.45vw, 1.5rem);
	--ep-article-header-pad-below: clamp(0.875rem, 0.8rem + 0.3vw, 1.25rem);
	--ep-article-content-space-below: clamp(1.5rem, 1.2rem + 0.9vw, 2.5rem);
	--ep-article-featured-space-below: clamp(1.25rem, 1rem + 0.9vw, 2.5rem);
	--ep-article-list-pad-left: clamp(1.25rem, 1.1rem + 0.5vw, 1.875rem);
	--ep-article-list-item-space: clamp(0.375rem, 0.32rem + 0.2vw, 0.625rem);
	--ep-article-blockquote-space: clamp(1rem, 0.85rem + 0.6vw, 1.875rem);
	--ep-article-blockquote-pad-left: clamp(0.875rem, 0.8rem + 0.3vw, 1.25rem);
	--ep-article-media-space: clamp(1rem, 0.85rem + 0.6vw, 1.875rem);
	--ep-article-container-pad-block-start: clamp(0.5rem, 0.35rem + 0.5vw, 0.75rem);
	--ep-article-container-pad-inline: clamp(0.75rem, 0.55rem + 0.7vw, 1.5rem);
	--ep-article-container-pad-block-end: clamp(1.75rem, 1.4rem + 1vw, 3rem);
	--ep-article-container-row-gap: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	--ep-article-container-col-gap: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.blog-single-container,
.newsletter-single-container {
	padding-block: var(--ep-article-container-pad-block-start) var(--ep-article-container-pad-block-end);
	padding-inline: var(--ep-article-container-pad-inline);
	row-gap: var(--ep-article-container-row-gap);
	column-gap: var(--ep-article-container-col-gap);
}

.blog-single-header,
.newsletter-single-header {
	margin-bottom: var(--ep-article-header-space-below);
	padding-bottom: var(--ep-article-header-pad-below);
}

.blog-single-title,
.newsletter-single-title {
	font-size: var(--ep-article-h1);
	margin-bottom: var(--ep-article-h1-space-below);
}

.blog-single-featured-image,
.newsletter-single-featured-image {
	margin-bottom: var(--ep-article-featured-space-below);
}

.blog-single-content,
.newsletter-single-content {
	font-size: var(--ep-article-body);
	margin-bottom: var(--ep-article-content-space-below);
}

.blog-single-content p,
.newsletter-single-content p {
	font-size: var(--ep-article-body);
	margin-top: 0;
	margin-bottom: var(--ep-article-body-space-below);
}

.blog-single-content h2,
.newsletter-single-content h2 {
	font-size: var(--ep-article-h2);
	margin-top: var(--ep-article-h2-space-above);
	margin-bottom: var(--ep-article-h2-space-below);
}

.blog-single-content h3,
.newsletter-single-content h3 {
	font-size: var(--ep-article-h3);
	margin-top: var(--ep-article-h3-space-above);
	margin-bottom: var(--ep-article-h3-space-below);
}

.blog-single-content h4,
.newsletter-single-content h4 {
	font-size: var(--ep-article-h4);
	margin-top: var(--ep-article-h4-space-above);
	margin-bottom: var(--ep-article-h4-space-below);
}

.blog-single-content h5,
.newsletter-single-content h5 {
	font-size: var(--ep-article-h5);
	margin-top: var(--ep-article-h5-space-above);
	margin-bottom: var(--ep-article-h5-space-below);
}

.blog-single-content h6,
.newsletter-single-content h6 {
	font-size: var(--ep-article-body);
	margin-top: var(--ep-article-h6-space-above);
	margin-bottom: var(--ep-article-h6-space-below);
}

.blog-single-content ul,
.blog-single-content ol,
.newsletter-single-content ul,
.newsletter-single-content ol {
	margin-top: 0;
	margin-bottom: var(--ep-article-body-space-below);
	padding-left: var(--ep-article-list-pad-left);
}

.blog-single-content li,
.newsletter-single-content li {
	margin-bottom: var(--ep-article-list-item-space);
}

.blog-single-content blockquote,
.newsletter-single-content blockquote {
	margin-top: var(--ep-article-blockquote-space);
	margin-bottom: var(--ep-article-blockquote-space);
	padding-left: var(--ep-article-blockquote-pad-left);
	font-size: var(--ep-article-quote);
}

.blog-single-content video,
.blog-single-content iframe,
.blog-single-content .wp-video,
.blog-single-content .wp-block-embed,
.newsletter-single-content video,
.newsletter-single-content iframe,
.newsletter-single-content .wp-video,
.newsletter-single-content .wp-block-embed {
	margin-top: var(--ep-article-media-space);
	margin-bottom: var(--ep-article-media-space);
}

/* First in-content heading should not add extra top gap. */
.blog-single-content > :is(h2, h3, h4, h5, h6):first-child,
.newsletter-single-content > :is(h2, h3, h4, h5, h6):first-child {
	margin-top: 0;
}

/* Back-to-back headings keep a tighter stack. */
.blog-single-content :is(h2, h3, h4, h5, h6) + :is(h2, h3, h4, h5, h6),
.newsletter-single-content :is(h2, h3, h4, h5, h6) + :is(h2, h3, h4, h5, h6) {
	margin-top: var(--ep-article-heading-stack-space);
}

/* In-content related blog link cards (Custom HTML / editor embed) */
.blog-single-content .ep-link-cards,
.newsletter-single-content .ep-link-cards,
.blog-single-content > div:has(> div > div > p a img),
.newsletter-single-content > div:has(> div > div > p a img),
.blog-single-content .wp-block-html > div:has(> div > div > p a img),
.newsletter-single-content .wp-block-html > div:has(> div > div > p a img) {
	max-width: 950px;
	margin: 50px auto;
	width: 100%;
	box-sizing: border-box;
	font-family: 'Segoe UI', Arial, sans-serif;
}

.blog-single-content .ep-link-cards__grid,
.newsletter-single-content .ep-link-cards__grid,
.blog-single-content > div:has(> div > div > p a img) > div:first-child,
.newsletter-single-content > div:has(> div > div > p a img) > div:first-child,
.blog-single-content .wp-block-html > div:has(> div > div > p a img) > div:first-child,
.newsletter-single-content .wp-block-html > div:has(> div > div > p a img) > div:first-child {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
	margin: 30px 0;
}

.blog-single-content .ep-link-cards__item,
.newsletter-single-content .ep-link-cards__item,
.blog-single-content > div:has(> div > div > p a img) > div:first-child > div,
.newsletter-single-content > div:has(> div > div > p a img) > div:first-child > div,
.blog-single-content .wp-block-html > div:has(> div > div > p a img) > div:first-child > div,
.newsletter-single-content .wp-block-html > div:has(> div > div > p a img) > div:first-child > div {
	flex: 1 1 200px;
	max-width: 300px;
	text-align: center;
}

.blog-single-content .ep-link-cards__item p,
.newsletter-single-content .ep-link-cards__item p,
.blog-single-content > div:has(> div > div > p a img) p,
.newsletter-single-content > div:has(> div > div > p a img) p,
.blog-single-content .wp-block-html > div:has(> div > div > p a img) p,
.newsletter-single-content .wp-block-html > div:has(> div > div > p a img) p {
	margin-top: 0;
	margin-bottom: 0;
}

.blog-single-content .ep-link-cards__item p + p,
.newsletter-single-content .ep-link-cards__item p + p,
.blog-single-content > div:has(> div > div > p a img) > div:first-child > div > p + p,
.newsletter-single-content > div:has(> div > div > p a img) > div:first-child > div > p + p,
.blog-single-content .wp-block-html > div:has(> div > div > p a img) > div:first-child > div > p + p,
.newsletter-single-content .wp-block-html > div:has(> div > div > p a img) > div:first-child > div > p + p {
	margin-top: 10px;
}

.blog-single-content .ep-link-cards__item img,
.newsletter-single-content .ep-link-cards__item img,
.blog-single-content > div:has(> div > div > p a img) img,
.newsletter-single-content > div:has(> div > div > p a img) img,
.blog-single-content .wp-block-html > div:has(> div > div > p a img) img,
.newsletter-single-content .wp-block-html > div:has(> div > div > p a img) img {
	display: block;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	border-radius: 8px;
	float: none !important;
	margin: 0 !important;
	object-fit: cover;
}

.blog-single-content .ep-link-cards__item a,
.newsletter-single-content .ep-link-cards__item a,
.blog-single-content > div:has(> div > div > p a img) a,
.newsletter-single-content > div:has(> div > div > p a img) a,
.blog-single-content .wp-block-html > div:has(> div > div > p a img) a,
.newsletter-single-content .wp-block-html > div:has(> div > div > p a img) a {
	color: inherit;
	text-decoration: none;
}

.blog-single-content .ep-link-cards__item span,
.newsletter-single-content .ep-link-cards__item span,
.blog-single-content > div:has(> div > div > p a img) span,
.newsletter-single-content > div:has(> div > div > p a img) span,
.blog-single-content .wp-block-html > div:has(> div > div > p a img) span,
.newsletter-single-content .wp-block-html > div:has(> div > div > p a img) span {
	color: #1472ba;
}

.blog-single-content .ep-link-cards__cta,
.newsletter-single-content .ep-link-cards__cta,
.blog-single-content > div:has(> div > div > p a img) > div:last-child:not(:only-child),
.newsletter-single-content > div:has(> div > div > p a img) > div:last-child:not(:only-child),
.blog-single-content .wp-block-html > div:has(> div > div > p a img) > div:last-child:not(:only-child),
.newsletter-single-content .wp-block-html > div:has(> div > div > p a img) > div:last-child:not(:only-child) {
	margin-top: 45px;
	padding: 30px 20px;
	border-radius: 14px;
	text-align: center;
	background: #f5f8fb;
}

.blog-single-content .ep-link-cards__cta h3,
.newsletter-single-content .ep-link-cards__cta h3,
.blog-single-content > div:has(> div > div > p a img) > div:last-child:not(:only-child) h3,
.newsletter-single-content > div:has(> div > div > p a img) > div:last-child:not(:only-child) h3,
.blog-single-content .wp-block-html > div:has(> div > div > p a img) > div:last-child:not(:only-child) h3,
.newsletter-single-content .wp-block-html > div:has(> div > div > p a img) > div:last-child:not(:only-child) h3 {
	font-size: 18px;
	color: #222;
	margin-top: 0;
	margin-bottom: 10px;
}

.blog-single-content .ep-link-cards__cta > p,
.newsletter-single-content .ep-link-cards__cta > p,
.blog-single-content > div:has(> div > div > p a img) > div:last-child:not(:only-child) > p,
.newsletter-single-content > div:has(> div > div > p a img) > div:last-child:not(:only-child) > p,
.blog-single-content .wp-block-html > div:has(> div > div > p a img) > div:last-child:not(:only-child) > p,
.newsletter-single-content .wp-block-html > div:has(> div > div > p a img) > div:last-child:not(:only-child) > p {
	font-size: 14px;
	color: #555;
	margin-bottom: 18px;
}

.blog-single-content .ep-link-cards__btn,
.newsletter-single-content .ep-link-cards__btn,
.blog-single-content > div:has(> div > div > p a img) > div:last-child:not(:only-child) a[style*="background"],
.newsletter-single-content > div:has(> div > div > p a img) > div:last-child:not(:only-child) a[style*="background"],
.blog-single-content .wp-block-html > div:has(> div > div > p a img) > div:last-child:not(:only-child) a[style*="background"],
.newsletter-single-content .wp-block-html > div:has(> div > div > p a img) > div:last-child:not(:only-child) a[style*="background"] {
	display: inline-block;
	padding: 12px 22px;
	background: #111 !important;
	color: #fff !important;
	text-decoration: none;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
}

.blog-single-content .ep-link-cards__btn:hover,
.newsletter-single-content .ep-link-cards__btn:hover {
	color: #fff !important;
	opacity: 0.92;
}
