/** * 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}