/*
 * Blog redesign (2026) — standalone, namespaced, NOT PurgeCSS'd.
 *
 * Loaded by inc/blog-perf.php (blog_perf_enqueue_redesign_css), render-blocking,
 * after the blog bundle. Self-contained: literal colours/fonts (no CSS vars), so
 * it never depends on the base sheets the consolidation dequeues, and its classes
 * can never be purged.
 *
 * Palette mirrors the webinars sheet:
 *   navy #0A1E4D · primary #1690D3 · body #5A6B8C · muted #8792A8
 *   stroke #E5E7EB · soft stroke #EEF1F6 · radius 20px · Montserrat
 *
 * Components:
 *   1. List card grid        .blog-grid / .blog-card
 *   2. Filter bar            .blog-filter / .blog-chip
 *   3. Single top byline     .ll-byline
 *   4. Single author card    .ll-authorcard
 *   5. Subscribe band        .blog-subscribe
 */

/* ============================ 1. LIST CARD GRID ======================== */

.blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.blog-card {
	display: flex;
	flex-direction: column;
	margin: 0;
	background: #fff;
	border: 1px solid #E5E7EB;
	border-radius: 20px;
	overflow: hidden;
	transition: box-shadow .2s ease, transform .2s ease;
}

.blog-card:hover {
	box-shadow: 0 18px 40px rgba(10, 30, 77, .12);
	transform: translateY(-3px);
}

.blog-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #0A1E4D;
}

.blog-card__picture {
	display: block;
	width: 100%;
	height: 100%;
}

.blog-card__media img,
.blog-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.blog-card__badge {
	position: absolute;
	top: 14px;
	right: 14px;
	max-width: calc(100% - 28px);
	padding: 7px 14px;
	background: #fff;
	color: #0A1E4D;
	font: 600 12px/1 'Montserrat', -apple-system, Arial, sans-serif;
	border-radius: 999px;
	box-shadow: 0 2px 8px rgba(10, 30, 77, .10);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.blog-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 10px;
	padding: 22px 24px 16px;
}

.blog-card__date {
	color: #8792A8;
	font: 400 13px/1.2 'Montserrat', -apple-system, Arial, sans-serif;
}

.blog-card__title {
	margin: 0;
	font: 700 19px/1.32 'Montserrat', -apple-system, Arial, sans-serif;
}

.blog-card__title a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: #0A1E4D;
	text-decoration: none;
}

.blog-card__title a:hover {
	color: #1690D3;
}

.blog-card__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: #5A6B8C;
	font: 400 15px/1.55 'Montserrat', -apple-system, Arial, sans-serif;
}

.blog-card__excerpt p {
	display: inline;
	margin: 0;
}

.blog-card__footer {
	margin-top: auto;
	padding: 16px 24px 22px;
	border-top: 1px solid #EEF1F6;
}

.blog-card__author {
	display: flex;
	align-items: center;
	gap: 12px;
}

.blog-card__author-avatar {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	overflow: hidden;
	background: #E5E7EB;
}

.blog-card__author-avatar img,
.blog-card__author-avatar picture {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.blog-card__author-meta {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.blog-card__author-name {
	color: #0A1E4D;
	font: 600 14px/1.3 'Montserrat', -apple-system, Arial, sans-serif;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.blog-card__author-role {
	color: #8792A8;
	font: 400 12px/1.35 'Montserrat', -apple-system, Arial, sans-serif;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 991px) {
	.blog-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
}

@media (max-width: 767px) {
	.blog-grid {
		grid-template-columns: 1fr;
	}
}

/* ============================== 2. FILTER BAR ========================== */

.blog-filter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	margin: 0 0 32px;
}

.blog-filter__cats {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	min-width: 0;
}

.blog-filter__label {
	color: #8792A8;
	font: 600 12px/1 'Montserrat', -apple-system, Arial, sans-serif;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.blog-filter__chips {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.blog-filter__chips > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.blog-chip {
	display: inline-block;
	padding: 9px 18px;
	border: 1px solid #E5E7EB;
	border-radius: 999px;
	background: #fff;
	color: #0A1E4D;
	font: 500 14px/1 'Montserrat', -apple-system, Arial, sans-serif;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.blog-chip:hover {
	border-color: #D8DEE8;
	background: #F6F8FB;
	color: #0A1E4D;
}

.blog-chip.is-active {
	background: #1690D3;
	border-color: #1690D3;
	color: #fff;
}

/* "More categories" native <details> dropdown (no JS) */
.blog-filter__more {
	position: relative;
}

.blog-filter__more summary {
	list-style: none;
}

.blog-filter__more summary::-webkit-details-marker {
	display: none;
}

.blog-chip--more::after {
	content: '';
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-left: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	vertical-align: middle;
}

.blog-filter__more details[open] .blog-chip--more {
	border-color: #1690D3;
	color: #1690D3;
}

.blog-filter__dropdown {
	position: absolute;
	z-index: 30;
	top: calc(100% + 8px);
	left: 0;
	min-width: 230px;
	max-height: 340px;
	overflow: auto;
	margin: 0;
	padding: 8px;
	background: #fff;
	border: 1px solid #E5E7EB;
	border-radius: 14px;
	box-shadow: 0 18px 40px rgba(10, 30, 77, .14);
	list-style: none;
}

.blog-filter__dropdown li {
	margin: 0;
	list-style: none;
}

.blog-filter__dropdown a {
	display: block;
	padding: 9px 12px;
	border-radius: 8px;
	color: #0A1E4D;
	font: 500 14px/1.3 'Montserrat', -apple-system, Arial, sans-serif;
	text-decoration: none;
}

.blog-filter__dropdown a:hover {
	background: #F2F6FB;
	color: #1690D3;
}

.blog-filter__dropdown a.is-active {
	color: #1690D3;
}

.blog-filter__search {
	flex: 0 0 auto;
}

.blog-filter__search form {
	margin: 0;
}

.blog-filter__search .input-group {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 280px;
	max-width: 100%;
	padding: 7px 16px;
	background: #fff;
	border: 1px solid #E5E7EB;
	border-radius: 999px;
}

.blog-filter__search .search-icon {
	display: flex;
	align-items: center;
	padding: 0;
	background: transparent;
	border: 0;
}

.blog-filter__search .search-icon svg {
	width: 18px;
	height: 18px;
	fill: #8792A8;
}

.blog-filter__search input {
	width: 100%;
	border: 0;
	outline: 0;
	background: transparent;
	color: #0A1E4D;
	font: 400 14px/1.4 'Montserrat', -apple-system, Arial, sans-serif;
}

.blog-filter__search input::placeholder {
	color: #9AA3B2;
}

/* Kill the theme's global input-focus box (a hard blue border was drawn INSIDE
   the pill on focus — the "search field looks ugly when active" the review
   flagged). Keep the input borderless; move the focus cue to the pill as a soft
   ring, so the rounded search bar stays clean. */
.blog-filter__search input:focus,
.blog-filter__search input:focus-visible {
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
}

.blog-filter__search .input-group:focus-within {
	border-color: #C7D0DE;
	box-shadow: 0 0 0 3px rgba(22, 144, 211, .10);
}

@media (max-width: 767px) {
	.blog-filter {
		flex-direction: column;
		align-items: stretch;
	}

	.blog-filter__search,
	.blog-filter__search .input-group {
		width: 100%;
	}

	/* Category chips become a single horizontally-scrolling row (Figma mobile).
	   Label sits above; the "More categories" dropdown is a sibling of the
	   scrolling <ul> so overflow-x never clips it. */
	.blog-filter__cats {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		width: 100%;
		min-width: 0;
	}

	.blog-filter__chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		margin: 0 -4px;
		padding: 2px 4px;
		/* Explicit width + min-width:0 bound the nowrap row to the column width so
		   overflow-x scrolls INSIDE the bar instead of widening the page
		   (min-width:auto floored it at content width → horizontal page overflow). */
		width: 100%;
		min-width: 0;
		max-width: 100%;
	}

	.blog-filter__chips::-webkit-scrollbar {
		display: none;
	}

	.blog-filter__chips > li {
		flex: 0 0 auto;
	}

	.blog-filter__more {
		align-self: flex-start;
	}
}

/* ========================= 3. SINGLE TOP BYLINE ======================= */

.ll-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 40px;
	margin: 0 0 28px;
	padding: 16px 22px;
	background: #fff;
	border: 1px solid #E5E7EB;
	border-radius: 16px;
}

.ll-byline__person {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.ll-byline__avatar {
	flex: 0 0 auto;
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	background: #E5E7EB;
}

.ll-byline__avatar img,
.ll-byline__avatar picture {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Avatars must FILL their round frame. The article bundle forces
   `.article .container img { height:auto !important }` (specificity 0,2,1), which
   beat the avatar's height:100% and left the photo a short rectangle inside the
   circle ("square in a circle"). Match its reach (0,3,1) + !important so the
   byline AND author-card avatars cover their frame. */
.article .container .ll-byline__avatar img,
.article .container .ll-byline__avatar picture,
.article .container .ll-authorcard__avatar img,
.article .container .ll-authorcard__avatar picture {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block;
}

.ll-byline__text {
	color: #5A6B8C;
	font: 400 15px/1.4 'Montserrat', -apple-system, Arial, sans-serif;
}

.ll-byline__name {
	color: #0A1E4D;
	font-weight: 700;
	text-decoration: underline;
}

.ll-byline__name:hover {
	color: #1690D3;
}

.ll-byline__role {
	color: #8792A8;
}

.ll-byline__role::before {
	content: '(';
}

.ll-byline__role::after {
	content: ')';
}

/* Author + reviewer side by side on desktop (like the mockup): a 2-col grid so a
   long "Written by … (position)" wraps inside its own half instead of pushing the
   reviewer onto a second row. */
.ll-byline--dual {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 12px 32px;
}

/* Stack the byline from tablet down — the single content column is narrow
   (~480px on tablet), so two persons side-by-side would cramp/wrap. */
@media (max-width: 991px) {
	.ll-byline {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	.ll-byline--dual {
		grid-template-columns: 1fr;
		align-items: flex-start;
		gap: 14px;
	}

	.ll-byline__role {
		display: block;
	}

	.ll-byline__role::before,
	.ll-byline__role::after {
		content: '';
	}
}

/* ======================= 4. SINGLE AUTHOR CARD ======================== */

.ll-authorcard {
	display: grid;
	grid-template-columns: 1fr;
	margin: 32px 0 8px;
	background: #fff;
	border: 1px solid #E5E7EB;
	border-radius: 20px;
	overflow: hidden;
}

.ll-authorcard--dual {
	grid-template-columns: 1fr 1fr;
}

.ll-authorcard__col {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 28px 30px;
}

/* Single text column beside the avatar: name, role, socials, bio and expertise
   all share one left edge (fixes the head-indented-past-the-bio misalignment). */
.ll-authorcard__main {
	flex: 1 1 auto;
	min-width: 0;
}

.ll-authorcard__main > :first-child {
	margin-top: 0;
}

.ll-authorcard--dual .ll-authorcard__col:first-child {
	border-right: 1px solid #EEF1F6;
}

.ll-authorcard__head {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 14px;
}

.ll-authorcard__avatar {
	flex: 0 0 auto;
	display: block;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	overflow: hidden;
	background: #E5E7EB;
}

.ll-authorcard__avatar img,
.ll-authorcard__avatar picture {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ll-authorcard__id {
	min-width: 0;
}

.ll-authorcard__label {
	margin: 0 0 2px;
	color: #5A6B8C;
	font: 400 15px/1.35 'Montserrat', -apple-system, Arial, sans-serif;
}

.ll-authorcard__name {
	color: #0A1E4D;
	font-weight: 700;
	text-decoration: none;
}

.ll-authorcard__name:hover {
	color: #1690D3;
	text-decoration: underline;
}

.ll-authorcard__role {
	margin: 0 0 10px;
	color: #8792A8;
	font: 400 14px/1.35 'Montserrat', -apple-system, Arial, sans-serif;
}

.ll-authorcard__socials {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 10px 0 16px;
	padding: 0;
	list-style: none;
}

.ll-authorcard__socials li {
	margin: 0;
	line-height: 0;
	list-style: none;
}

.ll-authorcard__socials a {
	display: flex;
	align-items: center;
	justify-content: center;
}

.ll-authorcard__socials img {
	width: 18px;
	height: 18px;
	object-fit: contain;
	display: block;
	opacity: .85;
	transition: opacity .15s ease;
}

.ll-authorcard__socials a:hover img {
	opacity: 1;
}

.ll-authorcard__bio {
	margin: 0 0 16px;
	color: #5A6B8C;
	font: 400 15px/1.55 'Montserrat', -apple-system, Arial, sans-serif;
}

.ll-authorcard__expertise-label {
	display: block;
	margin: 0 0 10px;
	color: #8792A8;
	font: 600 12px/1 'Montserrat', -apple-system, Arial, sans-serif;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.ll-authorcard__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ll-authorcard__tags li {
	margin: 0;
	padding: 8px 16px;
	border: 1px solid #D8DEE8;
	border-radius: 999px;
	color: #0A1E4D;
	font: 500 13px/1 'Montserrat', -apple-system, Arial, sans-serif;
	list-style: none;
}

/* Collapse the author/reviewer card to one column from tablet down — the single
   content column is ~480px on tablet, so a 2-col card cramps names/chips. */
@media (max-width: 991px) {
	.ll-authorcard--dual {
		grid-template-columns: 1fr;
	}

	.ll-authorcard--dual .ll-authorcard__col:first-child {
		border-right: 0;
		border-bottom: 1px solid #EEF1F6;
	}
}

/* --- Article rating, moved into the author card as a full-width footer (and a
   standalone block on posts with no author card). The bottom "Share" block was
   removed. The container keeps the `article_raiting_container` class so
   js/blog.js can swap it after a vote; the "Rate this article" label is a CSS
   ::before so it survives that swap. --- */
.ll-authorcard__footer {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 16px;
	padding: 18px 30px;
	border-top: 1px solid #EEF1F6;
}

.ll-rating-standalone {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin: 24px 0 8px;
	padding: 18px 24px;
	background: #fff;
	border: 1px solid #E5E7EB;
	border-radius: 16px;
}

.ll-authorcard__footer::before,
.ll-rating-standalone::before {
	content: 'Rate this article';
	color: #0A1E4D;
	font: 600 14px/1.4 'Montserrat', -apple-system, Arial, sans-serif;
}

.ll-authorcard__footer .rating-stars,
.ll-rating-standalone .rating-stars {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin: 0;
}

/* Stars first, score text after (source order is the reverse). */
.ll-authorcard__footer .rating-stars ul,
.ll-rating-standalone .rating-stars ul {
	order: 1;
	display: flex;
	align-items: center;
	gap: 3px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ll-authorcard__footer .rating-stars .star,
.ll-rating-standalone .rating-stars .star {
	margin: 0;
	line-height: 0;
	cursor: pointer;
}

.ll-authorcard__footer .rating-stars .star svg,
.ll-rating-standalone .rating-stars .star svg {
	width: 18px;
	height: 18px;
	display: block;
}

.ll-authorcard__footer .rating-stars .article-text-content,
.ll-rating-standalone .rating-stars .article-text-content {
	order: 2;
	margin: 0;
	color: #8792A8;
	font: 400 13px/1.4 'Montserrat', -apple-system, Arial, sans-serif;
}

@media (max-width: 575px) {
	.ll-authorcard__footer {
		padding: 16px 20px;
	}
}

/* ============================== 5. HERO =============================== */
/* Figma: intro(584) + gap 90 + AI Map card(526) = 1200 container. */

.blog-hero__inner {
	display: flex;
	align-items: center;
	gap: 90px;
	/* Vertical breathing room now the H1's 70px bundle padding is removed. */
	padding: 40px 0 48px;
}

.blog-hero__intro {
	min-width: 0;
}

/* Intro fills the left; the AI Map card keeps its fixed 526 and hugs the right
   (our theme container is wider than the Figma 1200, so a fixed 584 would leave
   the card floating off the right edge). On exactly 1200 this yields 584+90+526. */
.blog-hero__inner--split .blog-hero__intro {
	flex: 1 1 auto;
}

.blog-hero .blog-hero__title {
	/* !important: the bundle's `.blog-hero h1` adds padding-top:70px + margins. */
	margin: 0 !important;
	padding: 0 !important;
	color: #F9FAFC;
	font: 600 56px/1.08 'Montserrat', -apple-system, Arial, sans-serif;
}

.blog-hero .blog-hero__subtitle {
	margin: 24px 0 0;
	max-width: 584px;
	color: #fff;
	font: 400 18px/28px 'Montserrat', -apple-system, Arial, sans-serif;
}

.blog-hero__promo {
	flex: 0 0 526px;
	max-width: 526px;
}

.blog-promo {
	display: flex;
	align-items: stretch;
	/* min-height (not fixed) so richer content never gets clipped by overflow. */
	min-height: 174px;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
}

.blog-promo__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 8px;
	justify-content: center;
	/* Left-weighted padding so the description gets ~345px (Figma) → 2 lines. */
	padding: 22px 12px 22px 24px;
}

/* .blog-hero prefix + !important: the bundle's `.blog-hero p`/`.blog-hero h2`
   set larger sizes (the desc was rendering at ~18px → 3 lines → clipped). */
.blog-hero .blog-promo__title {
	margin: 0;
	color: #010005;
	font-size: 28px !important;
	line-height: 1.1 !important;
	font-weight: 600 !important;
	font-family: 'Montserrat', -apple-system, Arial, sans-serif;
}

.blog-hero .blog-promo__desc {
	margin: 0;
	color: #010005;
	font-size: 14px !important;
	line-height: 1.4 !important;
	font-weight: 500 !important;
	font-family: 'Montserrat', -apple-system, Arial, sans-serif;
}

.blog-hero .blog-promo__btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	width: 240px;
	max-width: 100%;
	/* body gap is 8; +8 here = the Figma 16px desc→button gap. */
	margin-top: 8px;
	min-height: 44px !important;
	padding: 12px 16px !important;
	border-radius: 40px;
	background: #1690D3;
	color: #fff;
	font: 600 14px/20px 'Montserrat', -apple-system, Arial, sans-serif;
	text-decoration: none;
	transition: background .15s ease;
}

.blog-promo__btn:hover {
	background: #1178B0;
	color: #fff;
}

.blog-promo__media {
	flex: 0 0 156px;
	position: relative;
	background: #EAF3FB;
}

.blog-promo__media img,
.blog-promo__media picture {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 1199px) {
	.blog-hero__inner {
		gap: 40px;
	}

	.blog-hero__inner--split .blog-hero__intro {
		flex: 1 1 auto;
	}

	.blog-hero__promo {
		flex: 0 1 480px;
	}
}

@media (max-width: 991px) {
	.blog-hero__inner {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 28px;
	}

	.blog-hero__intro,
	.blog-hero__inner--split .blog-hero__intro {
		flex: 1 1 auto;
		max-width: none;
		align-items: center;
	}

	/* Centre the max-width subtitle block under the centred title. */
	.blog-hero .blog-hero__subtitle {
		margin-left: auto;
		margin-right: auto;
	}

	.blog-hero__promo {
		flex: 1 1 auto;
		width: 100%;
		max-width: none;
	}

	/* The AI Map card is full-width but its inner content stays left-aligned. */
	.blog-promo__body {
		text-align: left;
	}

	.blog-hero .blog-hero__title {
		font-size: 40px;
	}
}

@media (max-width: 575px) {
	.blog-hero .blog-hero__title {
		font-size: 32px;
	}

	.blog-hero .blog-hero__subtitle {
		font-size: 15px;
	}

	.blog-promo {
		flex-direction: column;
		height: auto;
	}

	/* Symmetric padding once the card stacks (the 12px right pad was tuned for the
	   side-by-side image layout). DOM order keeps body above the image. */
	.blog-promo__body {
		padding: 22px 24px;
	}

	.blog-promo__media {
		flex-basis: auto;
		height: 150px;
	}
}

/* =========================== 6. LOAD MORE ============================= */

.blog-page .more-btn {
	margin: 36px 0 0;
	text-align: center;
}

.blog-page .more-btn .load-more-news,
.blog-page .load-more-news {
	display: inline-block;
	padding: 13px 34px;
	border: 1px solid #1690D3;
	border-radius: 999px;
	background: #fff;
	color: #1690D3;
	font: 600 15px/1 'Montserrat', -apple-system, Arial, sans-serif;
	text-decoration: none;
	cursor: pointer;
	/* No transition: bg and text fully invert on hover, so any fade crosses a
	   frame where text ≈ background (looked "empty" on hover-out). Instant swap
	   keeps the label readable at all times. !important beats the bundle's
	   `.btn { transition: all }`. */
	transition: none !important;
}

/* Filled on hover AND while focused/active — after a click the button keeps
   focus, and without this it fell back to the white/outline default the moment
   the cursor left (the "white with border after clicking" the review flagged). */
.blog-page .more-btn .load-more-news:hover,
.blog-page .load-more-news:hover,
.blog-page .more-btn .load-more-news:focus,
.blog-page .load-more-news:focus,
.blog-page .more-btn .load-more-news:focus-visible,
.blog-page .load-more-news:focus-visible,
.blog-page .more-btn .load-more-news:active,
.blog-page .load-more-news:active {
	background: #1690D3;
	color: #fff;
	outline: none;
}

/* ===================== NO SEARCH RESULTS (empty state) =============== */
/* Injected by js/blog.js into the grid when a search returns nothing, so the
   list area shows a message instead of blank space. Spans all grid columns. */
.blog-noresults {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	padding: 48px 20px;
}

.blog-noresults__title {
	margin: 0;
	color: #0A1E4D;
	font: 700 22px/1.3 'Montserrat', -apple-system, Arial, sans-serif;
}

.blog-noresults__text {
	margin: 0;
	color: #5A6B8C;
	font: 400 15px/1.5 'Montserrat', -apple-system, Arial, sans-serif;
}

/* ========================== 7. SUBSCRIBE BAND ======================== */
/* Figma: band radius 28, linear-gradient(148.82deg,#0A1E4D,#1E5CFF) + two
   blurred blobs; form 557 wide, input radius 20 (frosted), white submit. */

/* The section itself sits on the WHITE page in the Figma — the theme's default
   dark (#2D3043) band showed as dark strips beside the container-width band. */
.blog-subscribe.subscription {
	background: #fff !important;
	padding: 24px 0 56px !important;
}

.blog-subscribe__inner {
	position: relative;
	overflow: hidden;
	/* !important: the bundle's `.subscription .section-inner` sets 80px padding. */
	padding: 40px 24px !important;
	border-radius: 28px;
	background: linear-gradient(148.82deg, #0A1E4D 0%, #1E5CFF 100%);
	text-align: center;
}

.blog-subscribe__inner::before,
.blog-subscribe__inner::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	filter: blur(32px);
	pointer-events: none;
}

.blog-subscribe__inner::before {
	top: -79px;
	right: -91px;
	width: 158px;
	height: 158px;
	background: rgba(255, 255, 255, .1);
}

.blog-subscribe__inner::after {
	bottom: -128px;
	left: -64px;
	width: 288px;
	height: 288px;
	background: rgba(30, 92, 255, .4);
}

.blog-subscribe__title {
	position: relative;
	/* !important: the bundle's `.subscription h3` forces 25px + margin-bottom 30px. */
	margin: 0 !important;
	color: #fff;
	font-size: 28px !important;
	line-height: 30px !important;
	font-weight: 600 !important;
	font-family: 'Montserrat', -apple-system, Arial, sans-serif;
}

.blog-subscribe__subtitle {
	position: relative;
	margin: 4px 0 24px;
	color: rgba(255, 255, 255, .75);
	font: 400 14px/20px 'Montserrat', -apple-system, Arial, sans-serif;
}

/* --- LL_Forms subscribe (blog_subscribe): inline variant mirroring webinars,
   matching the Figma — frosted email input (radius 20) + white submit on one
   row; Turnstile / error / status each on their own full-width line below. --- */
/* The engine renders its own [data-ll-form-shell] (.ll-form-shell) wrapping the
   form + a [data-ll-success] panel. Keep it transparent so the engine's default
   card styling never paints over the gradient band. */
.blog-subscribe .ll-form-shell {
	position: relative;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}

/* Hide the intro (title + subtitle) once the success panel is revealed, so the
   band shows only the "You're subscribed!" state (Figma 6133:32033). */
.blog-subscribe__inner:has([data-ll-success]:not([hidden])) .blog-subscribe__intro {
	display: none;
}

.blog-subscribe .ll-form {
	margin: 0;
}

.blog-subscribe .ll-form--inline {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-start;
	justify-content: center;
	max-width: 557px;
	margin: 0 auto;
	/* !important: the blog bundle's `.subscription form` paints a 1px #1690D3 box
	   (radius 30) around the form — override so there's no wrapping box (matches
	   the webinars inline form: bare row + error/captcha on their own lines). */
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.blog-subscribe .ll-form--inline .ll-form__fields {
	order: 1;
	flex: 1 1 320px;
	min-width: 0;
	margin: 0;
	display: block;
}

.blog-subscribe .ll-form--inline .ll-form__row {
	position: static;
}

.blog-subscribe .ll-form__control {
	width: 100%;
	height: 49px;
	margin: 0;
	padding: 15px 17px;
	/* !important beats the theme's global input{border-radius:0!important}. */
	border: 1px solid rgba(255, 255, 255, .2) !important;
	border-radius: 20px !important;
	background: rgba(255, 255, 255, .1) !important;
	color: #fff !important;
	font: 400 14px/1 'Montserrat', -apple-system, Arial, sans-serif;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.blog-subscribe .ll-form__control::placeholder {
	color: rgba(255, 255, 255, .6);
}

.blog-subscribe .ll-form__control:focus {
	outline: none;
	border-color: rgba(255, 255, 255, .5) !important;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .18) !important;
	background: rgba(255, 255, 255, .16) !important;
}

.blog-subscribe .ll-form--inline .ll-form__submit {
	order: 2;
	flex: 0 0 auto;
	width: auto;
	height: 49px;
	margin: 0;
	padding: 14px 22px;
	border: 0;
	border-radius: 20px;
	background: #fff;
	color: #0A1E4D;
	font: 600 14px/20px 'Montserrat', -apple-system, Arial, sans-serif;
	letter-spacing: .35px;
	text-transform: uppercase;
	cursor: pointer;
	transition: opacity .15s ease;
}

.blog-subscribe .ll-form--inline .ll-form__submit:hover {
	opacity: .9;
	background: #fff;
}

/* Figma button is plain "SUBSCRIBE" — hide the engine's default arrow icon. */
.blog-subscribe .ll-form__submit-icon {
	display: none;
}

.blog-subscribe .ll-form__submit:disabled {
	opacity: .7;
	cursor: default;
}

.blog-subscribe .ll-form__spinner {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(10, 30, 77, .4);
	border-top-color: #0A1E4D;
	border-radius: 50%;
	animation: blog-spin .7s linear infinite;
}

.blog-subscribe .ll-form.is-loading .ll-form__spinner {
	display: inline-block;
}

@keyframes blog-spin {
	to {
		transform: rotate(360deg);
	}
}

.blog-subscribe .ll-form--inline .ll-form__turnstile {
	order: 3;
	flex: 1 0 100%;
	margin: 0;
	display: flex;
	justify-content: center;
}

.blog-subscribe .ll-form--inline .ll-form__error {
	position: static;
	margin-top: 8px;
	color: #E5484D;
	font: 400 12.5px/1.4 'Montserrat', -apple-system, Arial, sans-serif;
	text-align: left;
}

/* On error the field input gets a red ring (mirrors webinars .has-error). */
.blog-subscribe .ll-form__row.has-error .ll-form__control {
	border-color: #E5484D !important;
	box-shadow: 0 0 0 3px rgba(229, 72, 77, .18) !important;
}

.blog-subscribe .ll-form--inline .ll-form__message {
	order: 4;
	flex: 1 0 100%;
	margin-top: 4px;
	color: #fff;
	font: 400 14px/1.5 'Montserrat', -apple-system, Arial, sans-serif;
}

.blog-subscribe .ll-form__message.is-error,
.blog-subscribe .ll-form__message.is-success {
	color: #fff;
}

.blog-subscribe .ll-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.blog-subscribe .ll-form--leaving {
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
	transition: opacity .3s ease, transform .3s ease;
}

/* --- Success panel (engine [data-ll-success]; definition success_mode=panel) —
   Figma 6133:32033. The engine emits `.ll-form__success` with a single
   `.ll-form__success-text` line, so the check badge and the subline are drawn
   here around it. --- */
.blog-subscribe .ll-form__success {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	padding: 8px 0;
}

.blog-subscribe .ll-form__success[hidden] {
	display: none;
}

/* 64px white rounded-square check badge inside a frosted halo (the Figma's nested
   72→44 squares, expressed as one badge + soft ring). */
.blog-subscribe .ll-form__success::before {
	content: '';
	width: 64px;
	height: 64px;
	margin-bottom: 8px;
	border-radius: 18px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 6 9 17l-5-5' stroke='%230A1E4D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 26px 26px no-repeat;
	box-shadow: 0 0 0 8px rgba(255, 255, 255, .12), 0 10px 24px rgba(0, 0, 0, .15);
}

.blog-subscribe .ll-form__success-text {
	margin: 0;
	color: #fff;
	font: 700 30px/36px 'Montserrat', -apple-system, Arial, sans-serif;
}

/* The engine's panel carries only the title line, so the mockup's second line is
   drawn here. */
.blog-subscribe .ll-form__success::after {
	content: 'Check your inbox for the next blog update.';
	max-width: 360px;
	color: rgba(255, 255, 255, .8);
	font: 500 15px/22px 'Montserrat', -apple-system, Arial, sans-serif;
}

@media (max-width: 575px) {
	.blog-subscribe__inner {
		padding: 36px 18px !important;
	}

	.blog-subscribe__title {
		font-size: 24px;
		line-height: 1.2;
	}

	.blog-subscribe .ll-form--inline {
		flex-direction: column;
		align-items: stretch;
	}

	.blog-subscribe .ll-form--inline .ll-form__fields,
	.blog-subscribe .ll-form--inline .ll-form__submit {
		flex: 1 1 auto;
		width: 100%;
	}

	.blog-subscribe .ll-form__success-text {
		font-size: 26px;
		line-height: 1.25;
	}
}

/* ============== 8. SINGLE-POST CONTENT CONTAINER + ALL-POSTS ========== */

/* The article content column (.col-xl-9.post-container). The bundle gives it only
   a 4px `.rounded` corner and tight padding; the mockup is a rounded, roomier
   card. */
.single-post .post-container {
	padding: 40px 44px 44px !important;
	border-radius: 16px !important;
}

@media (max-width: 991px) {
	.single-post .post-container {
		padding: 28px 22px 32px !important;
	}
}

/* "All posts" button (related-articles). The theme's `.btn` base paints it green
   (#29C300); the mockup is the brand blue. */
.all-posts a,
.all-posts a.btn {
	background-color: #1690D3 !important;
	border-color: #1690D3 !important;
	color: #fff !important;
}

.all-posts a:hover,
.all-posts a.btn:hover {
	background-color: #1279b0 !important;
	border-color: #1279b0 !important;
	color: #fff !important;
}