/* Batı Ambalaj — blog.
   Single post (hero + article column + sticky contact rail), listing cards and
   search results. Scoped to .ba-blog-single / .ba-blog-list so nothing leaks. */

.ba-blog-single,
.ba-blog-list {
	--b-primary: #2c2f8e;
	--b-primary-dark: #1f2168;
	--b-ink: #2d3058;
	--b-deep: #002e42;
	--b-accent: #fad55b;
	--b-muted: #5b6080;
	--b-line: #e2e5f0;
	--b-surface: #f5f6fa;
	--b-radius: 14px;
	--b-wrap: 1220px;
}

.ba-blog-single *, .ba-blog-single *::before, .ba-blog-single *::after,
.ba-blog-list *, .ba-blog-list *::before, .ba-blog-list *::after { box-sizing: border-box; }

.ba-blog-wrap {
	width: 100%;
	max-width: var(--b-wrap);
	margin-inline: auto;
	padding-inline: 20px;
}

/* The theme wraps content in a Bootstrap container; release it so the hero can
   reach the edges, exactly as on the landing-page templates. */
.ba-blog-single #lqd-contents-wrap,
.ba-blog-list #lqd-contents-wrap {
	display: block;
	width: 100%;
	max-width: none;
	padding: 0;
}

/* ============================ SINGLE — HERO ============================ */

.ba-blog-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(40px, 5vw, 72px);
	background:
		radial-gradient(120% 150% at 100% 0%, rgba(44,47,142,.13) 0%, transparent 60%),
		var(--b-surface);
	font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Oversized brand mark as a banner backdrop. At 6% opacity the upscale from
   the 90px source is not visible. */
.ba-blog-hero__mark {
	position: absolute;
	inset-block: -12%;
	inset-inline-end: -4%;
	width: min(440px, 46vw);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: .06;
	pointer-events: none;
}

.ba-blog-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	align-items: center;
}

@media (min-width: 900px) {
	.ba-blog-hero__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; }
}

.ba-blog-hero__text { min-width: 0; }

.ba-blog-hero__brand {
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 24px 28px;
	border: 1px solid var(--b-line);
	border-radius: var(--b-radius);
	background: #fff;
	box-shadow: 0 18px 40px rgba(0,46,66,.10);
	text-align: center;
}

@media (min-width: 900px) { .ba-blog-hero__brand { display: flex; } }

.ba-blog-hero__brand img { width: 90px; height: 85px; }

.ba-blog-hero__brand span {
	font-size: 13px;
	line-height: 1.45;
	font-weight: 600;
	color: var(--b-muted);
}

.ba-blog-crumbs { font-size: 13.5px; }
.ba-blog-crumbs ol { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 22px; padding: 0; list-style: none; }
.ba-blog-crumbs li { color: var(--b-muted); }
.ba-blog-crumbs li + li::before { content: "›"; margin-inline-end: 7px; opacity: .5; }
.ba-blog-single .ba-blog-crumbs a { color: var(--b-muted); text-decoration: none; }
.ba-blog-single .ba-blog-crumbs a:hover { color: var(--b-primary); text-decoration: underline; }

.ba-blog-hero__cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }

.ba-blog-single .ba-blog-hero__cats a {
	padding: 5px 13px;
	border-radius: 50em;
	background: rgba(44,47,142,.09);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--b-primary);
}

.ba-blog-single .ba-blog-hero__cats a:hover { background: var(--b-primary); color: #fff; }

.ba-blog-hero__title {
	max-width: 20ch;
	margin: 0 0 .35em;
	font-size: clamp(30px, 4.4vw, 50px);
	line-height: 1.13;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--b-deep);
}

.ba-blog-hero__lead {
	max-width: 62ch;
	margin: 0 0 1.1em;
	font-size: clamp(16.5px, 1.7vw, 19px);
	line-height: 1.55;
	color: var(--b-muted);
}

.ba-blog-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	padding-bottom: clamp(28px, 4vw, 44px);
	font-size: 14.5px;
	color: var(--b-muted);
}

.ba-blog-hero__author { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--b-ink); }
.ba-blog-hero__author img { width: 36px; height: 36px; border-radius: 50em; }
.ba-blog-hero__sep { width: 4px; height: 4px; border-radius: 50em; background: currentColor; opacity: .4; }

/* The featured image opens the article instead of filling the hero. Capped by
   aspect ratio so a tall source cannot take over the screen. */
.ba-blog-article__media {
	margin: 0 0 2em;
	border-radius: var(--b-radius);
	overflow: hidden;
	background: var(--b-surface);
	aspect-ratio: 16 / 9;
	max-height: 380px;
}

.ba-blog-article__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ============================ SINGLE — BODY ============================ */

.ba-blog-body {
	padding-block: clamp(56px, 7vw, 92px) clamp(40px, 5vw, 64px);
	background: #fff;
	font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ba-blog-body__grid { display: grid; grid-template-columns: 1fr; gap: 32px; }

/* Two columns: article + contact rail */
@media (min-width: 1020px) {
	.ba-blog-body__grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; }
	.ba-blog-toc { grid-column: 1 / -1; order: -1; }
}

/* Three columns: contents · article · contact rail.
   The body gets a wider measure than the rest of the site so the article keeps
   a comfortable column once both rails are beside it. */
@media (min-width: 1280px) {
	.ba-blog-body__grid { grid-template-columns: 215px minmax(0, 1fr) 300px; gap: 40px; }
	.ba-blog-toc { grid-column: auto; order: 0; }
}

/* The article column grows in steps as the viewport allows, instead of staying
   pinned to the 1220px measure used elsewhere on the site. */
@media (min-width: 1340px) {
	.ba-blog-body > .ba-blog-wrap { max-width: 1340px; }
}

@media (min-width: 1500px) {
	.ba-blog-body > .ba-blog-wrap { max-width: 1440px; }
	.ba-blog-body__grid { grid-template-columns: 220px minmax(0, 1fr) 310px; gap: 48px; }
}

/* ---- Article typography ---- */

.ba-blog-article { min-width: 0; font-size: 17.5px; line-height: 1.72; color: var(--b-ink); }

/* Running text keeps a readable measure; media, tables and callouts use the
   full column width. */
.ba-blog-article__content > p,
.ba-blog-article__content > ul,
.ba-blog-article__content > ol,
.ba-blog-article__content > h2,
.ba-blog-article__content > h3,
.ba-blog-article__content > h4 { max-width: 74ch; }
.ba-blog-article__content > *:first-child { margin-top: 0; }
.ba-blog-article p { margin: 0 0 1.35em; }

.ba-blog-article h2 {
	margin: 2em 0 .6em;
	font-size: clamp(24px, 2.6vw, 31px);
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--b-deep);
}

.ba-blog-article h3 {
	margin: 1.7em 0 .5em;
	font-size: clamp(19px, 2vw, 23px);
	line-height: 1.3;
	font-weight: 700;
	color: var(--b-primary);
}

.ba-blog-article h4 { margin: 1.5em 0 .5em; font-size: 18px; font-weight: 700; color: var(--b-deep); }

.ba-blog-article ul, .ba-blog-article ol { margin: 0 0 1.35em; padding-inline-start: 1.3em; }
.ba-blog-article li { margin-bottom: .55em; }
.ba-blog-article li::marker { color: var(--b-primary); }

.ba-blog-single .ba-blog-article a {
	color: var(--b-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ba-blog-single .ba-blog-article a:hover { color: var(--b-primary-dark); }

.ba-blog-article img { max-width: 100%; height: auto; border-radius: var(--b-radius); }
.ba-blog-article figure { margin: 1.8em 0; }
.ba-blog-article figcaption { margin-top: 10px; font-size: 14px; color: var(--b-muted); }

.ba-blog-article blockquote {
	margin: 1.8em 0;
	padding: 22px 26px;
	border: 0;
	border-inline-start: 4px solid var(--b-accent);
	border-radius: 0 var(--b-radius) var(--b-radius) 0;
	background: var(--b-surface);
	font-size: 18px;
	font-style: normal;
	color: var(--b-deep);
}

.ba-blog-article blockquote p:last-child { margin-bottom: 0; }

.ba-blog-article table {
	width: 100%;
	margin: 1.6em 0;
	border-collapse: collapse;
	font-size: 15.5px;
}

.ba-blog-article th, .ba-blog-article td { padding: 12px 16px; border: 1px solid var(--b-line); text-align: start; }
.ba-blog-article thead th { background: var(--b-surface); font-weight: 700; color: var(--b-deep); }

/* ---- Footer, author, CTA ---- */

.ba-blog-article__footer {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 32px;
	align-items: center;
	justify-content: space-between;
	margin-top: 2.4em;
	padding-top: 1.6em;
	border-top: 1px solid var(--b-line);
}

.ba-blog-tags, .ba-blog-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.ba-blog-tags > span, .ba-blog-share > span { font-weight: 700; color: var(--b-deep); margin-inline-end: 4px; }

.ba-blog-single .ba-blog-tags a {
	padding: 5px 13px;
	border-radius: 50em;
	background: var(--b-surface);
	font-size: 13px;
	text-decoration: none;
	color: var(--b-muted);
}

.ba-blog-single .ba-blog-tags a:hover { background: var(--b-primary); color: #fff; }

.ba-blog-author {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	margin-top: 2em;
	padding: 24px;
	border: 1px solid var(--b-line);
	border-radius: var(--b-radius);
	background: var(--b-surface);
}

.ba-blog-author img { width: 60px; height: 60px; border-radius: 50em; flex: 0 0 60px; }
.ba-blog-author__name { margin: 0 0 .3em; font-size: 16.5px; font-weight: 700; color: var(--b-deep); }
.ba-blog-author__bio { margin: 0; font-size: 15px; line-height: 1.55; color: var(--b-muted); }

.ba-blog-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 18px 28px;
	align-items: center;
	justify-content: space-between;
	margin-top: 2em;
	padding: 28px;
	border-radius: var(--b-radius);
	background: linear-gradient(120deg, var(--b-deep) 0%, var(--b-primary) 100%);
	color: #fff;
}

.ba-blog-cta__title { margin: 0 0 .3em; font-size: 21px; font-weight: 700; color: #fff; }
.ba-blog-cta__text { margin: 0; max-width: 52ch; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.85); }

/* ---- Buttons ---- */

.ba-blog-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 26px;
	border: 2px solid transparent;
	border-radius: 50em;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: transform .2s ease, background-color .2s ease, color .2s ease;
}

.ba-blog-btn:hover { transform: translateY(-2px); }
.ba-blog-single .ba-blog-btn--solid, .ba-blog-list .ba-blog-btn--solid { background: var(--b-accent); color: var(--b-deep); }
.ba-blog-single .ba-blog-btn--line, .ba-blog-list .ba-blog-btn--line { border-color: var(--b-primary); color: var(--b-primary); }
.ba-blog-single .ba-blog-btn--line:hover, .ba-blog-list .ba-blog-btn--line:hover { background: var(--b-primary); color: #fff; }

/* ---- Sticky rail ---- */

.ba-blog-rail { min-width: 0; }

@media (min-width: 1020px) {
	.ba-blog-rail__inner { position: sticky; top: 24px; display: grid; gap: 16px; }
}

@media (max-width: 1019px) {
	.ba-blog-rail__inner { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

.ba-blog-card {
	padding: 22px;
	border: 1px solid var(--b-line);
	border-radius: var(--b-radius);
	background: #fff;
}

.ba-blog-card__eyebrow {
	margin: 0 0 10px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--b-primary);
}

.ba-blog-card__title { margin: 0 0 .5em; font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--b-deep); }
.ba-blog-card__text { margin: 0 0 1.1em; font-size: 14.5px; line-height: 1.55; color: var(--b-muted); }

.ba-blog-card--cta {
	border: 0;
	background: linear-gradient(120deg, var(--b-deep) 0%, var(--b-primary) 100%);
	color: #fff;
}

.ba-blog-card--cta .ba-blog-card__eyebrow { color: var(--b-accent); }
.ba-blog-card--cta .ba-blog-card__title { color: #fff; }
.ba-blog-card--cta .ba-blog-card__text { color: rgba(255,255,255,.85); }
.ba-blog-card--cta .ba-blog-btn { width: 100%; }

.ba-blog-single .ba-blog-contact {
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 10px 0;
	border-bottom: 1px solid var(--b-line);
	text-decoration: none;
}

.ba-blog-single .ba-blog-contact:last-child { border-bottom: 0; padding-bottom: 0; }
.ba-blog-single .ba-blog-contact span { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--b-muted); }
.ba-blog-single .ba-blog-contact strong { font-size: 15.5px; font-weight: 600; color: var(--b-deep); }
.ba-blog-single .ba-blog-contact:hover strong { color: var(--b-primary); }

.ba-blog-links { margin: 0; padding: 0; list-style: none; }
.ba-blog-links li { border-bottom: 1px solid var(--b-line); }
.ba-blog-links li:last-child { border-bottom: 0; }

.ba-blog-single .ba-blog-links a {
	display: block;
	padding: 10px 0;
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	color: var(--b-ink);
	transition: color .2s ease, padding-inline-start .2s ease;
}

.ba-blog-single .ba-blog-links a:hover { color: var(--b-primary); padding-inline-start: 5px; }

.ba-blog-card--facts { background: var(--b-surface); }
.ba-blog-card--facts ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.ba-blog-card--facts li { display: flex; flex-direction: column; }
.ba-blog-card--facts strong { font-size: 16px; font-weight: 700; color: var(--b-primary); }
.ba-blog-card--facts span { font-size: 13px; color: var(--b-muted); }

/* ========================= RELATED / CARD GRID ========================= */

.ba-blog-related {
	padding-block: clamp(44px, 6vw, 76px);
	background: var(--b-surface);
	font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ba-blog-related__title {
	margin: 0 0 .3em;
	font-size: clamp(26px, 3.2vw, 36px);
	font-weight: 700;
	text-align: center;
	color: var(--b-deep);
}

.ba-blog-related__lead { margin: 0 0 2em; font-size: 16.5px; text-align: center; color: var(--b-muted); }
.ba-blog-related__more { margin-top: 2em; text-align: center; }

.ba-blog-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

@media (min-width: 640px)  { .ba-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ba-blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ba-post-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--b-line);
	border-radius: var(--b-radius);
	background: #fff;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.ba-post-card:hover { transform: translateY(-4px); border-color: rgba(44,47,142,.3); box-shadow: 0 18px 38px rgba(0,46,66,.11); }

.ba-post-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--b-surface); }
.ba-post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.ba-post-card:hover .ba-post-card__media img { transform: scale(1.05); }

.ba-post-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(130deg, rgba(44,47,142,.10), rgba(0,46,66,.05));
}

.ba-post-card__body { display: flex; flex-direction: column; flex: 1; padding: 22px; }

.ba-post-card__cat {
	align-self: flex-start;
	margin-bottom: 10px;
	padding: 4px 11px;
	border-radius: 50em;
	background: rgba(44,47,142,.09);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--b-primary);
}

.ba-post-card__title { margin: 0 0 .5em; font-size: 18px; line-height: 1.32; font-weight: 700; }
.ba-blog-single .ba-post-card__title a, .ba-blog-list .ba-post-card__title a { color: var(--b-deep); text-decoration: none; }
.ba-blog-single .ba-post-card__title a:hover, .ba-blog-list .ba-post-card__title a:hover { color: var(--b-primary); }

.ba-post-card__excerpt { margin: 0 0 1.1em; font-size: 14.5px; line-height: 1.55; color: var(--b-muted); }
.ba-post-card__meta { margin-top: auto; font-size: 13px; color: var(--b-muted); }

/* ===================== LISTING · ARCHIVE · SEARCH =====================
   The blog grid, category archives and search results all render the theme's
   .lqd-lp-* card markup. Rather than replacing those templates, the existing
   markup is restyled into the same card as the related-posts row above. */

.ba-blog-list { font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

.ba-blog-list .lqd-lp-grid { padding-block: clamp(28px, 4vw, 48px); }

.ba-blog-list .lqd-lp-row {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: 22px;
	margin: 0;
}

@media (min-width: 620px)  { .ba-blog-list .lqd-lp-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ba-blog-list .lqd-lp-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Neutralise the Bootstrap column so the grid above controls the layout */
.ba-blog-list .lqd-lp-column {
	width: 100% !important;
	max-width: none !important;
	flex: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.ba-blog-list .lqd-lp {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--b-line);
	border-radius: var(--b-radius);
	background: #fff;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.ba-blog-list .lqd-lp:hover {
	transform: translateY(-4px);
	border-color: rgba(44,47,142,.3);
	box-shadow: 0 18px 38px rgba(0,46,66,.11);
}

/* Image */
.ba-blog-list .lqd-lp-img {
	margin: 0 0 0 0 !important;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--b-surface);
	border-radius: 0;
}

.ba-blog-list .lqd-lp-img figure,
.ba-blog-list .lqd-lp-img a { display: block; width: 100%; height: 100%; margin: 0; }
.ba-blog-list .lqd-lp-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.ba-blog-list .lqd-lp:hover .lqd-lp-img img { transform: scale(1.05); }

/* Everything below the image gets card padding */
.ba-blog-list .lqd-lp-meta,
.ba-blog-list .lqd-lp-header,
.ba-blog-list .lqd-lp-excerpt,
.ba-blog-list .lqd-lp-footer { padding-inline: 22px; }

.ba-blog-list .lqd-lp-meta { margin: 0 !important; padding-top: 20px; }
.ba-blog-list .lqd-lp-header { margin: 0 !important; padding-top: 10px; }
.ba-blog-list .lqd-lp-excerpt { margin: 0 !important; padding-top: 8px; padding-bottom: 18px; }
.ba-blog-list .lqd-lp-footer { padding-bottom: 20px; margin-top: auto !important; }

/* Meta row: left aligned, muted, no centring */
.ba-blog-list .lqd-lp-meta .entry-meta {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin: 0;
	font-size: 13px;
	text-align: start !important;
	color: var(--b-muted);
}

.ba-blog-list .lqd-lp-meta .entry-meta > div { margin: 0 !important; }
.ba-blog-list .lqd-lp-meta .entry-meta > div::after { content: none !important; }
.ba-blog-list .lqd-lp-meta .byline figure,
.ba-blog-list .lqd-lp-meta .byline img { display: none !important; }
.ba-blog-list .lqd-lp-meta .screen-reader-text { display: none; }
.ba-blog-list .lqd-lp-meta a { color: var(--b-muted); text-decoration: none; }
.ba-blog-list .lqd-lp-meta a:hover { color: var(--b-primary); }

/* Category chip */
.ba-blog-list .lqd-lp-meta .cat-links a {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 50em;
	background: rgba(44,47,142,.09);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--b-primary);
}

.ba-blog-list .lqd-lp-meta .cat-links a:hover { background: var(--b-primary); color: #fff; }

/* Title */
.ba-blog-list .lqd-lp-title {
	margin: 0 !important;
	font-size: 18px !important;
	line-height: 1.32;
	font-weight: 700;
}

.ba-blog-list .lqd-lp-title a { color: var(--b-deep); text-decoration: none; }
.ba-blog-list .lqd-lp-title a:hover { color: var(--b-primary); }

/* Excerpt */
.ba-blog-list .lqd-lp-excerpt,
.ba-blog-list .lqd-lp-excerpt p {
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--b-muted);
}

.ba-blog-list .lqd-lp-excerpt p:last-child { margin-bottom: 0; }

/* Read more */
.ba-blog-list .lqd-lp-footer a,
.ba-blog-list .read-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	color: var(--b-primary);
}

.ba-blog-list .lqd-lp-footer a:hover { color: var(--b-primary-dark); }

/* Pagination */
.ba-blog-list .blog-nav { margin-top: 36px; }

.ba-blog-list .pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ba-blog-list .pagination li { margin: 0; }

.ba-blog-list .pagination a,
.ba-blog-list .pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--b-line);
	border-radius: 10px;
	background: #fff;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	color: var(--b-ink);
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.ba-blog-list .pagination a:hover { border-color: var(--b-primary); color: var(--b-primary); }
.ba-blog-list .pagination .current { background: var(--b-primary); border-color: var(--b-primary); color: #fff; }

/* Search results header */
.ba-blog-list.search .lqd-contents > .lqd-lp-grid { padding-top: 0; }

/* ================================ MOBILE ================================ */

@media (max-width: 620px) {
	.ba-blog-wrap { padding-inline: 16px; }
	.ba-blog-hero { padding-top: 22px; }
	.ba-blog-hero__title { max-width: none; font-size: 28px; }
	.ba-blog-hero__lead { font-size: 16px; }
	.ba-blog-hero__meta { padding-bottom: 26px; font-size: 13.5px; }
	.ba-blog-hero__media { transform: translateY(18px); }
	.ba-blog-body { padding-block: 42px 32px; }
	.ba-blog-article { font-size: 16.5px; line-height: 1.68; }
	.ba-blog-article h2 { font-size: 23px; }
	.ba-blog-article h3 { font-size: 19px; }
	.ba-blog-cta { padding: 22px; }
	.ba-blog-cta .ba-blog-btn { width: 100%; }
	.ba-blog-author { padding: 20px; gap: 14px; }
	.ba-blog-author img { width: 48px; height: 48px; flex-basis: 48px; }
	.ba-blog-card { padding: 20px 18px; }
	.ba-blog-related { padding-block: 40px; }
	.ba-blog-list .lqd-lp-meta,
	.ba-blog-list .lqd-lp-header,
	.ba-blog-list .lqd-lp-excerpt,
	.ba-blog-list .lqd-lp-footer { padding-inline: 18px; }
}

/* ============================== CONTENTS ============================== */

.ba-blog-toc { min-width: 0; }

.ba-blog-toc__inner {
	padding: 20px;
	border: 1px solid var(--b-line);
	border-radius: var(--b-radius);
	background: var(--b-surface);
}

@media (min-width: 1280px) {
	.ba-blog-toc__inner {
		position: sticky;
		top: 24px;
		max-height: calc(100vh - 48px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

.ba-blog-toc__title {
	margin: 0 0 12px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--b-primary);
}

.ba-blog-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: ba-toc;
}

.ba-blog-toc__item { margin: 0; }
.ba-blog-toc__item--h3 { padding-inline-start: 14px; }

.ba-blog-single .ba-blog-toc__list a {
	display: block;
	padding: 7px 0 7px 12px;
	border-inline-start: 2px solid var(--b-line);
	font-size: 13.5px;
	line-height: 1.45;
	text-decoration: none;
	color: var(--b-muted);
	transition: color .2s ease, border-color .2s ease;
}

.ba-blog-single .ba-blog-toc__list a:hover { color: var(--b-primary); border-inline-start-color: var(--b-primary); }

.ba-blog-single .ba-blog-toc__list a.is-current {
	color: var(--b-primary);
	font-weight: 600;
	border-inline-start-color: var(--b-primary);
}

.ba-blog-toc__item--h3 a { font-size: 13px; }

/* Below the three-column breakpoint the contents become a collapsible box so
   they never push the article down the page on a phone. */
@media (max-width: 1279px) {
	.ba-blog-toc__inner { padding: 0; }

	.ba-blog-toc__title {
		margin: 0;
		padding: 15px 18px;
		cursor: default;
	}

	.ba-blog-toc__list {
		max-height: 216px;
		overflow-y: auto;
		padding: 0 18px 14px;
		-webkit-overflow-scrolling: touch;
	}
}

/* Anchor targets must clear the sticky site header */
.ba-blog-article h2[id],
.ba-blog-article h3[id] { scroll-margin-top: 110px; }

/* ========================= LISTING CONTAINER ========================= */

/* The listing grid was running edge to edge because the theme container is
   released on blog pages. Give it back a readable measure. */
.ba-blog-list .lqd-lp-grid {
	width: 100%;
	max-width: var(--b-wrap);
	margin-inline: auto;
	padding-inline: 20px;
}

/* Defensive: if any script positions the cards absolutely, the grid wins. */
.ba-blog-list .lqd-lp-row,
.ba-blog-list .lqd-lp-column {
	position: static !important;
	inset: auto !important;
	transform: none !important;
	height: auto !important;
}

.ba-blog-list .lqd-lp-row { float: none !important; }
.ba-blog-list .lqd-lp-column { float: none !important; }

/* Bootstrap clears .row floats with ::before / ::after. In a grid container a
   pseudo-element becomes a grid ITEM, so ::before was taking the first cell and
   pushing the first card into column two. */
.ba-blog-list .lqd-lp-row::before,
.ba-blog-list .lqd-lp-row::after {
	content: none !important;
	display: none !important;
}

/* Same reasoning for the Bootstrap negative gutters on .row */
.ba-blog-list .lqd-lp-row { margin-inline: 0 !important; }

@media (max-width: 620px) {
	.ba-blog-list .lqd-lp-grid { padding-inline: 16px; }
	.ba-blog-hero { padding-block: 28px 32px; }
	.ba-blog-hero__mark { width: 60vw; opacity: .05; }
	.ba-blog-article__media { aspect-ratio: 16 / 10; max-height: 260px; margin-bottom: 1.5em; }
	.ba-blog-body { padding-block: 32px; }
	.ba-blog-body__grid { gap: 26px; }
	.ba-blog-toc__list { max-height: 190px; }
}