/*!
 * Baly Blog Plugin — combined stylesheet
 *
 * Structure:
 *   1. Fonts (@font-face referencing the existing baly.iq WOFF2 files)
 *   2. Design tokens (scoped to .baly-blog-scope so they don't leak to the rest of the site)
 *   3. Shared base (container, cards, buttons, sub-nav, search, section heads)
 *   4. Homepage ([baly_blog])
 *   5. Single post ([baly_blog_post])
 *   6. Category ([baly_blog_category])
 *   7. Responsive (tablet ≤ 1023px, mobile ≤ 767px)
 */

/* ============================================================
   1. Fonts
   ------------------------------------------------------------
   Performance: only the four weights we actually use across the
   plugin styles are declared (regular / semibold / bold / black).
   Weight 500 (medium) falls back to 400, weight 800 to 700/900 via
   the CSS font-weight matching algorithm — visually almost
   indistinguishable on small UI text and saves ~5 separate font
   downloads per page.

   `font-display: optional` (instead of `swap`) avoids the FOUT:
   if the woff2 isn't ready by first paint (e.g. preload arrived
   in time, or font is cached from a previous visit) it's used;
   otherwise the system fallback stack is used permanently for
   that pageview, with no flicker. The system fallback stack
   below is tuned so its metrics are close to Graphik Arabic.
   ============================================================ */
@font-face { font-family: "GraphikArabic"; font-display: optional; font-weight: 400; font-style: normal; src: url("https://baly.iq/wp-content/uploads/redux/custom-fonts/custom/Graphikarabic-regular2/Graphikarabic-regular2.woff2") format("woff2"); }
@font-face { font-family: "GraphikArabic"; font-display: optional; font-weight: 600; font-style: normal; src: url("https://baly.iq/wp-content/uploads/redux/custom-fonts/custom/Graphikarabic-semibold2/Graphikarabic-semibold2.woff2") format("woff2"); }
@font-face { font-family: "GraphikArabic"; font-display: optional; font-weight: 700; font-style: normal; src: url("https://baly.iq/wp-content/uploads/redux/custom-fonts/custom/Graphikarabic-bold2/Graphikarabic-bold2.woff2") format("woff2"); }
@font-face { font-family: "GraphikArabic"; font-display: swap;     font-weight: 900; font-style: normal; src: url("https://baly.iq/wp-content/uploads/redux/custom-fonts/custom/Graphikarabic-black2/Graphikarabic-black2.woff2") format("woff2"); }

/* ============================================================
   2. Tokens — scoped so we never override the host theme
   ============================================================ */
.baly-blog-scope {
	--bb-brand:           #0043FF;
	--bb-brand-hover:     #0039E0;
	--bb-brand-active:    #002FBF;
	--bb-brand-light:     #B8C9FF;
	--bb-brand-lighter:   #E6ECFF;
	--bb-brand-10:        rgba(0, 67, 255, 0.10);
	--bb-brand-20:        rgba(0, 67, 255, 0.20);

	--bb-black:           #0A0A0A;
	--bb-grey-900:        #1A1A1A;
	--bb-grey-800:        #2E2E2E;
	--bb-grey-700:        #4A4A4A;
	--bb-grey-600:        #666666;
	--bb-grey-500:        #8A8A8A;
	--bb-grey-400:        #ADADAD;
	--bb-grey-300:        #CCCCCC;
	--bb-grey-200:        #E5E5E5;
	--bb-grey-100:        #F5F5F7;
	--bb-grey-50:         #FAFAFA;
	--bb-white:           #FFFFFF;

	--bb-fg:              var(--bb-black);
	--bb-fg-2:            var(--bb-grey-600);
	--bb-fg-3:            var(--bb-grey-400);
	--bb-bg:              var(--bb-white);
	--bb-bg-2:            var(--bb-grey-100);
	--bb-bg-3:            var(--bb-grey-50);
	--bb-border:          var(--bb-grey-200);
	--bb-border-subtle:   var(--bb-grey-100);

	--bb-radius-sm:       8px;
	--bb-radius-md:       12px;
	--bb-radius-lg:       16px;
	--bb-radius-xl:       20px;
	--bb-radius-2xl:      28px;
	--bb-radius-pill:     999px;

	--bb-shadow-1:        0 1px 4px rgba(0,0,0,0.06);
	--bb-shadow-2:        0 2px 12px rgba(0,0,0,0.10);
	--bb-shadow-3:        0 8px 32px rgba(0,0,0,0.14);
	--bb-shadow-brand:    0 4px 20px rgba(0, 67, 255, 0.25);

	/* The fallback stack uses the OS's native Arabic-capable UI font first
	   (San Francisco / Segoe / Tajawal / Tahoma) so when font-display:
	   optional skips the woff2 the page still renders close-to-design
	   without a swap flash. */
	--bb-font:            "Graphikarabic", "GraphikArabic", "SF Arabic", "Segoe UI", "Tajawal", "Helvetica Neue", "Tahoma", Arial, sans-serif;
	--bb-ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
	--bb-fast:            150ms;
	--bb-base:            250ms;
	--bb-slow:            400ms;

	font-family: var(--bb-font);
	color: var(--bb-fg);
	background: var(--bb-bg);
	direction: rtl;
	text-align: right;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.baly-blog-scope,
.baly-blog-scope *,
.baly-blog-scope *::before,
.baly-blog-scope *::after {
	box-sizing: border-box;
}

.baly-blog-scope img { max-width: 100%; display: block; }
.baly-blog-scope a   { color: inherit; text-decoration: none; }
.baly-blog-scope button { font-family: inherit; }

/* Defensive font override — wins against Porto theme + Elementor rules
   that target h1/h2/h3/p/etc. with !important. Without this, descendants
   inherit the theme's font instead of GraphikArabic. */
.baly-blog-scope,
.baly-blog-scope h1,
.baly-blog-scope h2,
.baly-blog-scope h3,
.baly-blog-scope h4,
.baly-blog-scope h5,
.baly-blog-scope h6,
.baly-blog-scope p,
.baly-blog-scope a,
.baly-blog-scope span,
.baly-blog-scope li,
.baly-blog-scope ol,
.baly-blog-scope ul,
.baly-blog-scope td,
.baly-blog-scope th,
.baly-blog-scope div,
.baly-blog-scope time,
.baly-blog-scope cite,
.baly-blog-scope figcaption,
.baly-blog-scope blockquote,
.baly-blog-scope strong,
.baly-blog-scope em,
.baly-blog-scope small,
.baly-blog-scope label,
.baly-blog-scope button,
.baly-blog-scope input,
.baly-blog-scope textarea,
.baly-blog-scope select {
	font-family: var(--bb-font) !important;
}

/* ============================================================
   3. Shared base
   ============================================================ */

.baly-blog-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Section head */
.baly-blog-section { padding: 40px 0 0; }
.baly-blog-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 24px;
	gap: 24px;
}
.baly-blog-section__head h2 {
	font-size: 36px;
	font-weight: 900;
	margin: 0;
	letter-spacing: -0.01em;
	line-height: 1.2;
}
.baly-blog-section__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--bb-brand);
	font-weight: 600;
	font-size: 14px;
	transition: gap var(--bb-fast) var(--bb-ease-out);
}
.baly-blog-section__more:hover { gap: 10px; }

/* Card */
.baly-blog-card {
	background: var(--bb-bg);
	border-radius: var(--bb-radius-xl);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--bb-shadow-1);
	transition: transform var(--bb-base) var(--bb-ease-out), box-shadow var(--bb-base);
	height: 100%;
}
.baly-blog-card:hover { transform: translateY(-2px); box-shadow: var(--bb-shadow-2); }
.baly-blog-card__link {
	display: flex;
	flex-direction: column;
	flex: 1;
}
.baly-blog-card__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	position: relative;
	background: var(--bb-bg-2);
}
.baly-blog-card__img {
	/* Pin to the media's box. Same Porto-defeating recipe as the post's
	   featured image: `position: absolute; inset: 0` plus `!important` on
	   width / height beats `.entry-content img { height: auto !important }`,
	   which would otherwise let the image render at its intrinsic ratio
	   inside the 16/9 media frame and leave a gap at the bottom. */
	position: absolute !important;
	inset: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	margin: 0;
	object-fit: cover;
	transition: transform var(--bb-slow) var(--bb-ease-out);
}
.baly-blog-card:hover .baly-blog-card__img { transform: scale(1.04); }
.baly-blog-card__placeholder {
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 100%;
	background: repeating-linear-gradient(45deg, #e8edf5, #e8edf5 8px, #dde4f0 8px, #dde4f0 16px);
	color: #8fa0bc;
	font-family: monospace;
	font-size: 12px;
}
.baly-blog-card__chip {
	position: absolute;
	top: 12px;
	inset-inline-start: 12px;
	background: rgba(255,255,255,0.95);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--bb-brand);
	font-size: 12px;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: var(--bb-radius-pill);
	z-index: 1;
}
.baly-blog-card__body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}
.baly-blog-card__title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--bb-fg);
	margin: 0;
	text-wrap: pretty;
}
.baly-blog-card__excerpt {
	font-size: 14px;
	color: var(--bb-fg-2);
	line-height: 1.6;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.baly-blog-card__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--bb-border-subtle);
	font-size: 13px;
	color: var(--bb-fg-3);
}
.baly-blog-card__avatar {
	width: 28px; height: 28px;
	border-radius: 50%;
	background: var(--bb-brand-lighter);
	color: var(--bb-brand);
	font-size: 12px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
}
.baly-blog-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.baly-blog-card__author {
	font-size: 13px;
	color: var(--bb-fg);
	font-weight: 500;
}
.baly-blog-card__dot {
	width: 3px; height: 3px;
	border-radius: 50%;
	background: var(--bb-grey-300);
	flex-shrink: 0;
}
.baly-blog-card__time {
	font-size: 13px;
	color: var(--bb-fg-3);
}

/* Buttons */
.baly-blog-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: var(--bb-radius-pill);
	border: none;
	font-family: inherit;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	transition: all var(--bb-fast);
	background: var(--bb-brand);
	color: #fff;
	box-shadow: var(--bb-shadow-brand);
}
.baly-blog-btn:hover { background: var(--bb-brand-hover); transform: translateY(-1px); }
.baly-blog-btn:active { transform: scale(0.97); background: var(--bb-brand-active); }

/* Search overlay */
.baly-blog-search {
	position: fixed;
	inset: 0;
	background: rgba(13, 24, 41, 0.6);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 120px 20px 0;
	opacity: 0;
	pointer-events: none;
	z-index: 99999;
	transition: opacity var(--bb-base);
}
.baly-blog-search.is-open { opacity: 1; pointer-events: auto; }
.baly-blog-search__box {
	width: 100%;
	max-width: 560px;
	background: var(--bb-bg);
	border-radius: var(--bb-radius-2xl);
	box-shadow: 0 24px 64px rgba(0,0,0,0.2);
	padding: 12px;
	display: flex;
	align-items: center;
	gap: 12px;
	border: 2px solid var(--bb-brand);
	transform: translateY(-16px);
	transition: transform var(--bb-base);
}
.baly-blog-search.is-open .baly-blog-search__box { transform: translateY(0); }
.baly-blog-search__icon { color: var(--bb-fg-2); display: flex; padding-inline-start: 8px; }
.baly-blog-search__input {
	flex: 1;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 16px;
	color: var(--bb-fg);
	outline: 0;
	direction: rtl;
	padding: 8px 0;
}
.baly-blog-search__close {
	background: transparent;
	border: 0;
	color: var(--bb-fg-2);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 12px;
}

/* ============================================================
   4. Homepage
   ============================================================ */

.baly-blog-home .baly-blog-section:first-of-type,
.baly-blog-hero { padding-top: 32px; }

/* Hero carousel */
.baly-blog-hero { padding: 32px 0 0; }
.baly-blog-hero__carousel {
	position: relative;
	border-radius: var(--bb-radius-2xl);
	overflow: hidden;
	background: var(--bb-bg-2);
	aspect-ratio: 1100/360;
	box-shadow: 0 4px 16px rgba(16,24,40,0.05);
}
.baly-blog-hero__track { position: relative; width: 100%; height: 100%; }
.baly-blog-hero__slide {
	position: absolute; inset: 0;
	opacity: 0;
	transition: opacity .5s var(--bb-ease-out);
	cursor: pointer;
	display: block;
}
.baly-blog-hero__slide.is-active { opacity: 1; z-index: 1; }
.baly-blog-hero__img {
	width: 100%; height: 100%; object-fit: cover;
	display: block;
}
.baly-blog-hero__slide::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.85) 100%);
}
.baly-blog-hero__overlay {
	position: absolute;
	inset-inline: 40px;
	bottom: 32px;
	z-index: 2;
	color: #fff;
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 70%;
}
.baly-blog-hero__chip {
	align-self: flex-start;
	background: var(--bb-brand);
	color: #fff;
	padding: 5px 12px;
	border-radius: var(--bb-radius-pill);
	font-size: 12px;
	font-weight: 600;
}
.baly-blog-hero__title {
	font-size: 32px;
	line-height: 1.2;
	font-weight: 900;
	text-wrap: balance;
}
.baly-blog-hero__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: #fff;
	opacity: 0.9;
	flex-wrap: wrap;
}
.baly-blog-hero__meta-sep { opacity: 0.6; }
.baly-blog-hero__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px; height: 44px;
	border-radius: var(--bb-radius-pill);
	background: rgba(255,255,255,0.55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--bb-black);
	border: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 2px rgba(16,24,40,0.08);
	opacity: 0.5;
	transition: opacity .2s, background .2s, box-shadow .2s, transform .2s;
	z-index: 3;
}
.baly-blog-hero__arrow svg { width: 18px; height: 18px; }
.baly-blog-hero__carousel:hover .baly-blog-hero__arrow { opacity: 1; }
.baly-blog-hero__arrow:hover {
	background: #fff;
	box-shadow: 0 6px 24px rgba(16,24,40,0.12);
	transform: translateY(-50%) scale(1.04);
}
.baly-blog-hero__arrow--prev { right: 14px; }
.baly-blog-hero__arrow--next { left: 14px; }
.baly-blog-hero__dots {
	position: absolute;
	bottom: 14px;
	left: 0; right: 0;
	display: flex;
	justify-content: center;
	gap: 6px;
	z-index: 3;
}
.baly-blog-hero__dot {
	width: 6px; height: 6px;
	border-radius: var(--bb-radius-pill);
	background: rgba(255,255,255,0.55);
	box-shadow: 0 1px 2px rgba(16,24,40,0.15);
	border: 0;
	padding: 0;
	cursor: pointer;
	transition: width .2s ease;
}
.baly-blog-hero__dot.is-active { width: 24px; background: #fff; }

/* Latest grid */
.baly-blog-latest__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

/* Category strip */
.baly-blog-catstrip__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
}
.baly-blog-cattile {
	position: relative;
	aspect-ratio: 1;
	border-radius: var(--bb-radius-xl);
	overflow: hidden;
	background: var(--bb-brand-lighter);
	display: block;
}
.baly-blog-cattile img {
	width: 100%; height: 100%;
	object-fit: cover;
	opacity: 0.9;
	transition: transform var(--bb-slow);
}
.baly-blog-cattile:hover img { transform: scale(1.06); }
.baly-blog-cattile::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,67,255,0) 30%, rgba(0,67,255,0.85) 100%);
}
.baly-blog-cattile__label {
	position: absolute;
	inset-inline: 12px; bottom: 12px;
	color: #fff;
	font-weight: 700;
	font-size: 18px;
	z-index: 1;
}
.baly-blog-cattile__label small {
	display: block;
	font-size: 12px;
	font-weight: 400;
	opacity: 0.85;
	margin-top: 2px;
}

/* Editorial split */
.baly-blog-editorial { padding: 64px 0 0; }
.baly-blog-editorial__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 48px;
}
.baly-blog-feature {
	display: flex;
	flex-direction: column;
	gap: 20px;
	background: var(--bb-bg);
	border: 1px solid var(--bb-border-subtle);
	border-radius: var(--bb-radius-xl);
	overflow: hidden;
	box-shadow: var(--bb-shadow-1);
	transition: transform var(--bb-base) var(--bb-ease-out), box-shadow var(--bb-base);
}
.baly-blog-feature:hover {
	transform: translateY(-2px);
	box-shadow: var(--bb-shadow-2);
}
.baly-blog-feature__media {
	aspect-ratio: 16/9;
	overflow: hidden;
	position: relative;
	background: var(--bb-bg-2);
}
.baly-blog-feature__img {
	position: absolute !important;
	inset: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	margin: 0;
	object-fit: cover;
}
.baly-blog-feature__body {
	padding: 0 24px 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.baly-blog-feature__title {
	font-size: 28px;
	font-weight: 800;
	line-height: 1.25;
	margin: 0;
}
.baly-blog-feature__excerpt {
	font-size: 15px;
	line-height: 1.65;
	color: var(--bb-fg-2);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 7;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Most-read list — matches the design system's `.editorial__list` exactly: numbered
   eyebrow + title + thumb, natural content height (no flex stretch tricks). */
.baly-blog-mostread {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
}
.baly-blog-mostread__item {
	border-bottom: 1px solid var(--bb-border-subtle);
}
.baly-blog-mostread__item:last-child { border-bottom: none; }
.baly-blog-mostread__item a {
	display: grid;
	grid-template-columns: 1fr 120px;
	gap: 16px;
	padding: 18px 0;
	align-items: flex-start;
	transition: opacity var(--bb-fast);
}
.baly-blog-mostread__item:first-child a { padding-top: 0; }
.baly-blog-mostread__item:last-child a { padding-bottom: 0; }
.baly-blog-mostread__item a:hover { opacity: 0.85; }
.baly-blog-mostread__num {
	font-size: 12px;
	font-weight: 700;
	color: var(--bb-brand);
	letter-spacing: 0.04em;
}
.baly-blog-mostread__main { min-width: 0; }
.baly-blog-mostread__item h4,
.baly-blog-mostread__title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	margin: 6px 0 8px;
	text-wrap: pretty;
}
.baly-blog-mostread__thumb {
	width: 120px; height: 90px;
	border-radius: var(--bb-radius-md);
	overflow: hidden;
	background: var(--bb-bg-2);
	flex-shrink: 0;
}
.baly-blog-mostread__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Make the editorial split align both columns to the same row height */
.baly-blog-editorial__grid { align-items: stretch; }
.baly-blog-editorial__grid > div { display: flex; flex-direction: column; }
.baly-blog-editorial__grid > div .baly-blog-feature { flex: 1; }

/* Generic horizontal rail (partner carousel + related on post page) */
.baly-blog-rail__head,
.baly-blog-related__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 24px;
}
.baly-blog-rail__head h2,
.baly-blog-related__head h2 {
	font-size: 32px;
	font-weight: 900;
	margin: 0;
	letter-spacing: -0.01em;
}
.baly-blog-rail__nav,
.baly-blog-related__nav {
	display: flex;
	gap: 8px;
}
/* CTA in the section head — used by `[baly_blog_recent]` instead of the
   prev/next nav arrows. Visual matches `.baly-blog-comment-form__submit`:
   brand-coloured pill, white text, hover darkens. */
.baly-blog-related__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: var(--bb-brand);
	color: #fff !important;
	padding: 12px 22px;
	border: 0;
	border-radius: 999px !important;
	-webkit-border-radius: 999px !important;
	-moz-border-radius: 999px !important;
	font-family: inherit;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	cursor: pointer;
	box-shadow: none !important;
	transition: background var(--bb-fast);
	white-space: nowrap;
}
.baly-blog-related__cta:hover,
.baly-blog-related__cta:focus { background: var(--bb-brand-hover); color: #fff !important; }
.baly-blog-rail__btn {
	width: 44px; height: 44px;
	border-radius: 50%;
	border: 1px solid var(--bb-border);
	background: var(--bb-bg);
	color: var(--bb-fg);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all var(--bb-fast) var(--bb-ease-out);
}
.baly-blog-rail__btn:hover {
	background: var(--bb-brand);
	border-color: var(--bb-brand);
	color: #fff;
}
.baly-blog-rail__btn svg { width: 18px; height: 18px; }
/* Partner / news rail = always a horizontal carousel. */
.baly-blog-rail__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* Negative margin matches the inner track padding so the first/last cards
	   have shadow breathing room on the leading edge without misaligning the
	   visual gutter from the rest of the page. */
	margin: 0 -16px;
	cursor: grab;
	user-select: none;
}
.baly-blog-rail__viewport.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
}
.baly-blog-rail__viewport::-webkit-scrollbar { display: none; }
.baly-blog-rail__track {
	display: flex;
	align-items: stretch;
	gap: 20px;
	padding: 8px 16px;
}
.baly-blog-rail__track > .baly-blog-card {
	flex: 0 0 320px;
	scroll-snap-align: start;
	height: auto;
}
.baly-blog-rail__track .baly-blog-card .baly-blog-card__excerpt {
	-webkit-line-clamp: 2;
	min-height: 2.6em;
}

/* Related — horizontal carousel on every viewport (desktop, tablet, mobile).
   Same scroll-snap behaviour as `.baly-blog-rail__viewport`, including the
   −16 px negative margin so the first / last card's drop shadow has
   breathing room on the leading edge. The prev / next buttons in
   `.baly-blog-related__nav` drive scrolling on desktop, drag and touch on
   smaller viewports — both wired up by the existing `[data-bb-rail*]` JS. */
.baly-blog-related__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	margin: 0 -16px;
	cursor: grab;
	user-select: none;
}
.baly-blog-related__viewport.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
}
.baly-blog-related__viewport::-webkit-scrollbar { display: none; }
.baly-blog-related__track {
	display: flex;
	align-items: stretch;
	gap: 20px;
	padding: 8px 16px;
}
.baly-blog-related__track > .baly-blog-card {
	flex: 0 0 320px;
	width: 320px;
	scroll-snap-align: start;
	height: auto;
}
.baly-blog-rail__cta {
	flex: 0 0 320px;
	width: 320px;
	scroll-snap-align: start;
	align-self: stretch;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto auto;
	align-items: end;
	column-gap: 16px;
	row-gap: 6px;
	padding: 28px;
	border-radius: var(--bb-radius-2xl);
	background: var(--bb-brand);
	color: #fff !important;
	height: auto;
	position: relative;
	overflow: hidden;
	transition: transform var(--bb-fast) var(--bb-ease-out);
}
.baly-blog-rail__cta,
.baly-blog-rail__cta * { color: #fff !important; }
.baly-blog-rail__cta:hover { transform: translateY(-2px); }
.baly-blog-rail__cta::before {
	content: "";
	position: absolute;
	inset-inline-start: -40px;
	top: -40px;
	width: 180px; height: 180px;
	background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 70%);
	pointer-events: none;
}
.baly-blog-rail__cta-arrow {
	grid-column: 2;
	grid-row: 1 / span 3;
	align-self: end;
	width: 56px; height: 56px;
	border-radius: 50%;
	background: rgba(255,255,255,0.16);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background var(--bb-fast), color var(--bb-fast), transform var(--bb-fast);
}
/* Hover: translucent ring becomes solid white, the chevron flips to brand-blue. */
.baly-blog-rail__cta:hover .baly-blog-rail__cta-arrow {
	background: #fff;
	color: var(--bb-brand) !important;
	transform: scale(1.06);
}
.baly-blog-rail__cta:hover .baly-blog-rail__cta-arrow svg { stroke: var(--bb-brand); }
.baly-blog-rail__cta-arrow svg { width: 22px; height: 22px; }
.baly-blog-rail__cta-title {
	grid-column: 1;
	font-size: 28px;
	font-weight: 800;
	line-height: 1.2;
}
.baly-blog-rail__cta-sub {
	grid-column: 1;
	font-size: 14px;
	opacity: 0.85;
	line-height: 1.5;
}

.baly-blog-empty {
	padding: 64px 24px;
	text-align: center;
	color: var(--bb-fg-2);
}

/* ============================================================
   5. Single post
   ============================================================ */

.baly-blog-post__grid {
	display: grid;
	/* `minmax(0, 1fr)` keeps the content column from blowing out when long,
	   non-breaking strings appear (links, code blocks, etc.). */
	grid-template-columns: minmax(0, 1fr) 320px;
	column-gap: 64px;
	row-gap: 0;
	align-items: start;
	padding: 16px 0 0;
}
.baly-blog-post__grid--full { display: block; grid-template-columns: 1fr; max-width: 820px; margin: 0 auto; }
/* `display: contents` makes the article transparent for layout so its
   children — header, featured figure, prose body, share, comments — sit as
   direct grid items in the parent grid. The article's semantic role + ARIA
   tree are preserved. This lets the sidebar (column 2) start at the
   featured-image row (row 2) instead of at the very top of the column, so
   its top aligns with the featured image rather than with the post title. */
.baly-blog-post__grid > .baly-blog-post__content { display: contents !important; }
.baly-blog-post__content > * { grid-column: 1; min-width: 0; }
.baly-blog-post__head { grid-column: 1; grid-row: 1; }
.baly-blog-post__sidebar {
	grid-column: 2;
	/* Span from row 2 to a sufficiently large row so the sidebar's content
	   height doesn't dictate the size of any single column-1 row (otherwise
	   the featured image at row 2 inherits the sidebar's height and a big
	   white gap appears between the featured image and the TOC). Per CSS
	   Grid Level 1, an item spanning multiple tracks doesn't contribute to
	   sizing of any individual track unless it's the only item in that
	   track — so featured / toc / prose each size to their own content. */
	grid-row: 2 / span 99;
	display: flex;
	flex-direction: column;
	gap: 24px;
	position: sticky;
	top: 32px;
	align-self: start;
}

.baly-blog-post__head {
	padding: 0 0 32px;
}
.baly-blog-post__title,
h1.baly-blog-post__title,
.baly-blog-scope .baly-blog-post__head h1.baly-blog-post__title {
	font-size: 40px;
	line-height: 1.15;
	font-weight: 900;
	letter-spacing: -0.015em;
	margin: 0 0 24px;
	text-wrap: balance;
	/* Force the title colour against Porto's `.entry-title { color: var(...) }`
	   override, which paints h1 blue site-wide. */
	color: var(--bb-fg) !important;
}
.baly-blog-post__byline {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.baly-blog-post__author {
	display: flex;
	align-items: center;
	gap: 12px;
}
/* Defensive: explicitly enforce a circle so host themes that set
   `img { border-radius: 0 }` can't square the avatar off. */
.baly-blog-post__avatar,
img.baly-blog-post__avatar {
	width: 36px;
	height: 36px;
	aspect-ratio: 1 / 1;
	border-radius: 50% !important;
	background: var(--bb-brand-lighter);
	color: var(--bb-brand);
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	overflow: hidden;
	object-fit: cover;
	flex-shrink: 0;
}
.baly-blog-post__author-name { font-weight: 600; font-size: 14px; color: var(--bb-fg); }
.baly-blog-post__byline-sep { width: 1px; height: 28px; background: var(--bb-border); }
.baly-blog-post__meta {
	display: flex;
	gap: 16px;
	font-size: 14px;
	color: var(--bb-fg-2);
	flex-wrap: wrap;
}
.baly-blog-post__meta span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Featured image */
.baly-blog-post__featured {
	position: relative;
	aspect-ratio: 16/9;
	border-radius: var(--bb-radius-2xl);
	overflow: hidden;
	background: var(--bb-bg-2);
	margin: 0 0 32px;
}
/* Pin the image to the figure's box. We use absolute positioning instead of
   `width: 100%; height: 100%` because Porto's `.entry-content img { height:
   auto !important }` rule beats class-only `height: 100%`, which makes the
   image take its intrinsic aspect-ratio (e.g. 1408 × 768 = 1.83) inside a
   16/9 container (1.78) and leaves a thin gap at the bottom. With
   `inset: 0`, the image stretches to every edge of the figure regardless of
   what Porto does to width / height, and `object-fit: cover` handles the
   intrinsic-vs-container ratio difference cleanly. */
.baly-blog-post__featured-img {
	position: absolute !important;
	inset: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	margin: 0;
	object-fit: cover;
}
.baly-blog-post__featured-chip {
	position: absolute;
	top: 16px;
	inset-inline-start: 16px;
	z-index: 2;
	background: rgba(255,255,255,0.95);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--bb-brand);
	padding: 8px 16px;
	border-radius: var(--bb-radius-pill);
	font-size: 12px;
	font-weight: 600;
	box-shadow: var(--bb-shadow-1);
	text-decoration: none;
	transition: background var(--bb-fast), color var(--bb-fast);
}
a.baly-blog-post__featured-chip:hover {
	background: var(--bb-brand);
	color: #fff;
}

/* Inline TOC — chevron + label + numbered pills, top/bottom rules.
   Defensive `!important` on list-style and padding so Porto's `.entry-content ul`
   can't bring back disc bullets or extra padding-inline-start. */
.baly-blog-toc-inline {
	margin: 32px 0 40px;
	display: flex;
	align-items: center;
	gap: 0;
	flex-wrap: wrap;
	/* Both rules use the same subtle hairline so the component reads as a
	   neutral separator strip, not a heavy framed block. */
	border-top: 1px solid var(--bb-border-subtle);
	border-bottom: 1px solid var(--bb-border-subtle);
	padding: 18px 0;
}
.baly-blog-toc-inline__label {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding-inline-end: 24px;
	border-inline-end: 1px solid var(--bb-border-subtle);
	margin-inline-end: 24px;
	font-size: 14px;
	font-weight: 600;
	color: var(--bb-fg);
	white-space: nowrap;
}
.baly-blog-toc-inline__label::before {
	content: "";
	display: inline-block;
	width: 18px; height: 18px;
	flex-shrink: 0;
	background-color: var(--bb-brand);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14M5 12l7 7 7-7'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14M5 12l7 7 7-7'/></svg>") center / contain no-repeat;
}
.baly-blog-toc-inline__list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	counter-reset: bbtoc;
	/* Take all remaining width on the row beside the label and wrap pills
	   internally. Without `flex: 1 1 0` the list sized to its intrinsic
	   content width, which on multi-heading posts overflowed the parent and
	   triggered the parent's flex-wrap — kicking the whole list to a new
	   row beneath the label, with the pills then packed shoulder-to-shoulder
	   on a too-narrow line. With `flex: 1 1 0; min-width: 0` the list sits
	   beside the label and the pills wrap into multiple rows inside it. */
	flex: 1 1 0;
	min-width: 0;
}
.baly-blog-toc-inline__list li {
	counter-increment: bbtoc;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.baly-blog-toc-inline__list li::before,
.baly-blog-toc-inline__list li::marker { content: none !important; }
.baly-blog-toc-inline__list a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	font-size: 14px;
	font-weight: 500;
	color: var(--bb-fg-2);
	background: var(--bb-bg-3);
	border-radius: var(--bb-radius-pill);
	transition: all var(--bb-fast) var(--bb-ease-out);
	text-decoration: none;
}
.baly-blog-toc-inline__list a::before {
	content: counter(bbtoc, arabic-indic);
	font-size: 11px;
	font-weight: 600;
	color: var(--bb-brand);
	font-feature-settings: "tnum";
}
.baly-blog-toc-inline__list a:hover,
.baly-blog-toc-inline__list a.is-current {
	color: var(--bb-fg);
	background: var(--bb-brand-lighter);
}

/* Prose body — applies to the_content() output */
.baly-blog-prose__body { color: var(--bb-fg); }
.baly-blog-prose__body > * { max-width: 100%; }
.baly-blog-prose__body p {
	font-size: 18px;
	line-height: 1.8;
	color: var(--bb-grey-800);
	margin: 0 0 24px;
	text-wrap: pretty;
}
.baly-blog-prose__body p strong { color: var(--bb-fg); font-weight: 600; }
.baly-blog-prose__body h2 {
	font-size: 32px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: 56px 0 20px;
	scroll-margin-top: 100px;
}
.baly-blog-prose__body h3 {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
	margin: 40px 0 16px;
	scroll-margin-top: 100px;
}
.baly-blog-prose__body ul,
.baly-blog-prose__body ol {
	margin: 0 0 24px;
	padding: 0;
	font-size: 18px;
	line-height: 1.8;
	color: var(--bb-grey-800);
	list-style: none;
}
.baly-blog-prose__body ul li,
.baly-blog-prose__body ol li {
	margin-bottom: 10px;
	position: relative;
}
.baly-blog-prose__body ul li {
	padding-inline-start: 28px;
}
.baly-blog-prose__body ul li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 14px;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--bb-brand);
}
.baly-blog-prose__body ol {
	counter-reset: bbol;
}
.baly-blog-prose__body ol li {
	counter-increment: bbol;
	padding-inline-start: 40px;
}
.baly-blog-prose__body ol li::before {
	content: counter(bbol, arabic-indic);
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	width: 28px; height: 28px;
	border-radius: 50%;
	background: var(--bb-brand);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.baly-blog-prose__body a {
	color: var(--bb-brand);
	border-bottom: 1px solid currentColor;
}
.baly-blog-prose__body img,
.baly-blog-prose__body figure img {
	border-radius: var(--bb-radius-xl);
	max-width: 100%;
	height: auto;
}
.baly-blog-prose__body figure {
	margin: 40px 0;
}
.baly-blog-prose__body figcaption {
	margin-top: 12px;
	font-size: 14px;
	color: var(--bb-fg-3);
	text-align: center;
	line-height: 1.5;
}
.baly-blog-prose__body blockquote {
	position: relative;
	margin: 48px 0;
	padding: 36px 40px;
	background: var(--bb-brand-lighter);
	border-radius: var(--bb-radius-xl);
	border-inline-end: 4px solid var(--bb-brand);
}
.baly-blog-prose__body blockquote::before {
	content: "\201D";
	position: absolute;
	top: 16px;
	inset-inline-start: 28px;
	font-size: 90px;
	line-height: 1;
	color: var(--bb-brand);
	opacity: 0.25;
	font-family: Georgia, serif;
	font-weight: 700;
}
.baly-blog-prose__body blockquote p {
	font-size: 22px;
	line-height: 1.5;
	font-weight: 500;
	color: var(--bb-grey-900);
	margin: 0 0 16px;
	position: relative;
	z-index: 1;
}
.baly-blog-prose__body blockquote cite {
	font-style: normal;
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	color: var(--bb-fg-2);
}
.baly-blog-prose__body blockquote cite::before {
	content: "";
	width: 28px; height: 1px;
	background: var(--bb-brand);
}
.baly-blog-prose__body table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--bb-radius-lg);
	overflow: hidden;
	box-shadow: var(--bb-shadow-1);
	margin: 32px 0;
	background: var(--bb-bg);
	font-size: 14px;
}
.baly-blog-prose__body th {
	background: var(--bb-bg-2);
	color: var(--bb-fg);
	font-weight: 600;
	text-align: start;
	padding: 14px 18px;
}
.baly-blog-prose__body td {
	padding: 14px 18px;
	border-top: 1px solid var(--bb-border-subtle);
	color: var(--bb-grey-800);
}

/* Drop cap removed — disabled per design feedback (the giant first-letter
   looked broken on Arabic ligatures). The reset below neutralises any host
   theme that re-adds a ::first-letter rule via specificity. */
.baly-blog-prose__body > p:first-of-type::first-letter,
.baly-blog-prose__body p::first-letter {
	font-family: inherit !important;
	font-size: inherit !important;
	line-height: inherit !important;
	float: none !important;
	margin: 0 !important;
	color: inherit !important;
	opacity: 1 !important;
	font-weight: inherit !important;
}

/* Share row */
.baly-blog-share {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 32px 0;
	margin: 32px 0;
	border-block: 1px solid var(--bb-border-subtle);
	flex-wrap: wrap;
}
.baly-blog-share__label {
	font-size: 14px;
	color: var(--bb-fg-3);
	margin-inline-end: 4px;
}
.baly-blog-share__btn {
	width: 40px; height: 40px;
	min-width: 40px;
	border-radius: 50%;
	background: var(--bb-bg);
	border: 1px solid var(--bb-border);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--bb-fg-2);
	transition: all var(--bb-fast);
	cursor: pointer;
}
.baly-blog-share__btn:hover,
.baly-blog-share__btn.is-copied {
	background: var(--bb-brand);
	color: #fff;
	border-color: var(--bb-brand);
}

/* Author bio */
.baly-blog-author {
	display: grid;
	grid-template-columns: 74px 1fr;
	gap: 24px;
	align-items: center;
	background: var(--bb-bg);
	padding: 28px;
	border-radius: var(--bb-radius-xl);
	margin: 32px 0;
	box-shadow: var(--bb-shadow-1);
}
.baly-blog-author__avatar,
img.baly-blog-author__avatar {
	width: 74px; height: 74px;
	aspect-ratio: 1 / 1;
	/* Force circle even when the host theme sets `img { border-radius: 0 }`
	   or wraps the avatar in a square Gravatar element. */
	border-radius: 50% !important;
	background: var(--bb-brand);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	font-weight: 900;
	overflow: hidden;
	object-fit: cover;
	flex-shrink: 0;
}
.baly-blog-author__name { font-size: 18px; font-weight: 700; margin: 0 0 4px; }
.baly-blog-author__role { font-size: 14px; color: var(--bb-brand); font-weight: 500; margin-bottom: 8px; }
.baly-blog-author__bio { font-size: 14px; line-height: 1.6; color: var(--bb-fg-2); margin: 0; }

/* Sidebar widgets */
.baly-blog-widget {
	background: var(--bb-bg);
	border-radius: var(--bb-radius-xl);
	padding: 24px;
	box-shadow: var(--bb-shadow-1);
}
.baly-blog-widget__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
}
.baly-blog-widget__head h4 {
	font-size: 18px;
	font-weight: 700;
	margin: 0;
}
.baly-blog-widget__icon {
	width: 28px; height: 28px;
	border-radius: 8px;
	background: var(--bb-brand-lighter);
	color: var(--bb-brand);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.baly-blog-widget__list { list-style: none; padding: 0; margin: 0; }
.baly-blog-widget__list li {
	border-bottom: 1px solid var(--bb-border-subtle);
}
.baly-blog-widget__list li:last-child { border-bottom: none; }
.baly-blog-widget__item {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 12px;
	padding: 14px 0;
	align-items: flex-start;
	transition: opacity var(--bb-fast);
}
.baly-blog-widget__item:hover { opacity: 0.85; }
.baly-blog-widget__list li:first-child .baly-blog-widget__item { padding-top: 0; }
.baly-blog-widget__list li:last-child .baly-blog-widget__item { padding-bottom: 0; }
.baly-blog-widget__thumb {
	width: 72px; height: 56px;
	border-radius: var(--bb-radius-md);
	overflow: hidden;
	background: var(--bb-bg-2);
}
.baly-blog-widget__thumb img { width: 100%; height: 100%; object-fit: cover; }
.baly-blog-widget__title {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--bb-fg);
	margin: 0 0 6px;
	text-wrap: pretty;
}
.baly-blog-widget__meta { font-size: 12px; color: var(--bb-fg-3); }

.baly-blog-widget--top .baly-blog-widget__item {
	grid-template-columns: 32px 1fr;
}
.baly-blog-widget__rank {
	width: 32px; height: 32px;
	border-radius: 50%;
	background: var(--bb-brand-lighter);
	color: var(--bb-brand);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
}
.baly-blog-widget--top .baly-blog-widget__list li:first-child .baly-blog-widget__rank {
	background: var(--bb-brand);
	color: #fff;
}

.baly-blog-widget--cta {
	background: var(--bb-brand);
	color: #fff;
	padding: 28px;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.baly-blog-widget--cta::before {
	content: "";
	position: absolute;
	top: -40px;
	right: -40px;
	width: 160px; height: 160px;
	background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 70%);
	border-radius: 50%;
}
.baly-blog-widget--cta h4 { color: #fff; font-size: 22px; font-weight: 900; margin: 0 0 8px; }
.baly-blog-widget--cta p { font-size: 14px; margin: 0 0 18px; opacity: 0.9; line-height: 1.5; }
.baly-blog-widget--cta .baly-blog-btn {
	background: #fff;
	color: var(--bb-brand);
	width: 100%;
	box-shadow: none;
}
.baly-blog-widget--cta .baly-blog-btn:hover { background: var(--bb-bg-2); }

/* Related */
.baly-blog-related { margin: 64px 0 32px; }

/* Comments — built on top of a custom comment walker so we control the markup
   end-to-end (the BEM classes below mirror the design system handover). */
.baly-blog-comments {
	margin: 64px 0 32px;
	padding: 48px;
	background: var(--bb-bg);
	border-radius: var(--bb-radius-2xl);
}
.baly-blog-comments__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 32px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--bb-border-subtle);
}
.baly-blog-comments__head h2 {
	font-size: 22px;
	font-weight: 700;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 10px;
}
.baly-blog-comments__count-pill {
	background: var(--bb-brand-lighter);
	color: var(--bb-brand);
	padding: 4px 12px;
	border-radius: var(--bb-radius-pill);
	font-size: 14px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.baly-blog-comment-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 0 32px !important;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.baly-blog-comment-list .baly-blog-comment,
.baly-blog-comment__children .baly-blog-comment {
	display: grid !important;
	grid-template-columns: 48px 1fr;
	grid-template-areas:
		"avatar  body"
		"divider divider"
		"replies replies";
	column-gap: 16px;
	row-gap: 0;
	padding: 24px 0 0;
	list-style: none !important;
	border-bottom: none !important;
}
.baly-blog-comment__avatar   { grid-area: avatar; }
.baly-blog-comment__body     { grid-area: body; }
.baly-blog-comment__children { grid-area: replies; grid-column: 1 / -1; }
/* The dashed divider that sits between every comment's body and whatever
   comes next (its replies, or its sibling comment). */
.baly-blog-comment-list .baly-blog-comment::after {
	content: '';
	grid-area: divider;
	border-top: 1px dashed var(--bb-border-subtle);
	margin: 16px 0 0;
	height: 0;
	min-width: 0;
	display: block;
}
/* Hide the trailing dashed line on the last sibling of any thread… */
.baly-blog-comment-list > .baly-blog-comment:last-child::after,
.baly-blog-comment__children > .baly-blog-comment:last-child::after { display: none; }
/* …unless that last sibling has replies, in which case the divider still
   serves as the separator between its body and its replies. */
.baly-blog-comment-list > .baly-blog-comment:last-child:has(> .baly-blog-comment__children)::after,
.baly-blog-comment__children > .baly-blog-comment:last-child:has(> .baly-blog-comment__children)::after { display: block; }
.baly-blog-comment-list .baly-blog-comment::marker { content: none !important; }
.baly-blog-comment-list > .baly-blog-comment:last-child { border-bottom: none; }
.baly-blog-comment__avatar {
	width: 48px;
	height: 48px;
	border-radius: 50% !important;
	background: var(--bb-brand-lighter);
	color: var(--bb-brand);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 700;
	overflow: hidden;
	object-fit: cover;
	flex-shrink: 0;
}
.baly-blog-comment__body { min-width: 0; max-width: 100%; }
.baly-blog-comment__head {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 6px;
}
.baly-blog-comment__name {
	font-size: 14px;
	font-weight: 600;
	color: var(--bb-fg);
	text-decoration: none;
}
.baly-blog-comment__badge {
	background: var(--bb-brand);
	color: #fff;
	padding: 2px 8px;
	border-radius: var(--bb-radius-pill);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.05em;
}
.baly-blog-comment__date {
	font-size: 12px;
	color: var(--bb-fg-3);
}
.baly-blog-comment__content {
	font-size: 14px;
	line-height: 1.7;
	color: var(--bb-grey-800);
	margin: 0 0 10px;
}
.baly-blog-comment__content p { margin: 0 0 8px; }
.baly-blog-comment__content p:last-child { margin-bottom: 0; }
.baly-blog-comment__pending {
	font-size: 12px;
	color: var(--bb-fg-3);
	font-style: italic;
	margin: 0 0 8px;
}
.baly-blog-comment__actions {
	display: flex;
	gap: 16px;
	align-items: center;
}
.baly-blog-comment__action,
.baly-blog-comment__action a {
	font-family: inherit;
	font-size: 12px;
	color: var(--bb-fg-3);
	font-weight: 500;
	cursor: pointer;
	background: none;
	border: 0;
	padding: 0;
	text-decoration: none;
}
.baly-blog-comment__action a:hover,
.baly-blog-comment__action:hover { color: var(--bb-brand); }

.baly-blog-comment__children {
	list-style: none !important;
	margin: 16px 0 0 0 !important;
	padding-block: 0 !important;
	padding-inline-start: 32px !important;
	padding-inline-end: 0 !important;
	border: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0;
}
.baly-blog-comment__children .baly-blog-comment {
	border-bottom: none;
	padding: 12px 0;
}
/* Cap inline indentation past depth 1 so deep threads don't run off the page. */
.baly-blog-comment__children .baly-blog-comment__children { padding-inline-start: 16px !important; }
.baly-blog-comment__children .baly-blog-comment__children .baly-blog-comment__children { padding-inline-start: 8px !important; }
/* Strip any list bullets/markers a host theme might inject on nested items. */
.baly-blog-comment__children > .baly-blog-comment::marker,
.baly-blog-comment__children > .baly-blog-comment::before { content: none !important; }

/* Comment form — three-up name/email/url, then full-width comment + actions. */
.baly-blog-comment-form {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	column-gap: 12px;
	row-gap: 12px;
	align-items: start;
}
#respond .baly-blog-comment-form,
.comment-respond .baly-blog-comment-form { margin-top: 0; }
.baly-blog-comments .comment-reply-title {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 16px;
	color: var(--bb-fg);
}
.baly-blog-comments .comment-reply-title small { font-size: 12px; font-weight: 500; margin-inline-start: 8px; }
.baly-blog-comments .comment-reply-title small a { color: var(--bb-brand); }
.baly-blog-comment-form__field {
	margin: 0;
	min-width: 0;
}
.baly-blog-comment-form input[type="text"],
.baly-blog-comment-form input[type="email"],
.baly-blog-comment-form input[type="url"],
.baly-blog-comment-form textarea {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--bb-border);
	border-radius: var(--bb-radius-md);
	font-family: inherit;
	font-size: 14px;
	background: var(--bb-bg);
	direction: rtl;
	color: var(--bb-fg);
	outline: none;
	transition: border-color var(--bb-fast), box-shadow var(--bb-fast);
}
.baly-blog-comment-form input:focus,
.baly-blog-comment-form textarea:focus {
	border-color: var(--bb-brand);
	box-shadow: 0 0 0 3px var(--bb-brand-20);
}
.baly-blog-comment-form textarea {
	min-height: 120px;
	resize: vertical;
	line-height: 1.6;
}
/* Explicit grid placement so the row is name | email | url in the visual order
   we want, regardless of the field order WordPress emits. RTL flips automatically. */
.baly-blog-comment-form__field--author  { grid-column: 1; grid-row: 1; }
.baly-blog-comment-form__field--email   { grid-column: 2; grid-row: 1; }
.baly-blog-comment-form__field--url     { grid-column: 3; grid-row: 1; }
.baly-blog-comment-form__field--comment { grid-column: 1 / -1; grid-row: 2; }
.baly-blog-comment-form__actions        { grid-column: 1 / -1; grid-row: 3; }
/* Keep WP-injected pieces (hidden inputs, cookie-consent, akismet badges) from
   stealing grid cells and breaking the row layout. The cookie-consent block
   is also removed via the show_comments_cookies_opt_in PHP filter — this CSS
   is the belt-and-suspenders fallback for cached HTML and plugins that
   re-render the field after the filter has run. */
.baly-blog-comment-form > input[type="hidden"],
.baly-blog-comment-form .akismet_comment_form_privacy_notice,
.baly-blog-comment-form .comment-form-cookies-consent,
.baly-blog-comment-form #wp-comment-cookies-consent,
.baly-blog-comment-form label[for="wp-comment-cookies-consent"] { display: none !important; }
.baly-blog-comment-form__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 4px 0 0;
	flex-wrap: wrap;
}
.baly-blog-comment-form__notice {
	font-size: 12px;
	color: var(--bb-fg-3);
	flex: 1;
}
.baly-blog-comment-form__submit {
	background: var(--bb-brand);
	color: #fff;
	border: 0;
	padding: 12px 22px;
	/* Pill radius fixed at 999px to defeat Porto's button radius overrides.
	   The ID-scoped overrides below carry higher specificity for the cases
	   where Porto targets `#commentform input[type=submit]` directly. */
	border-radius: 999px !important;
	font-family: inherit;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	transition: background var(--bb-fast);
}
/* Porto / other themes commonly override via `#commentform input[type=submit]
   { border-radius: 4px !important; box-shadow: 0 4px 8px ... !important }`
   (specificity 1,0,1) which beats a plain `.class !important`. These selectors
   carry specificity 1,1,1 and 1,2,1 so they reliably win shape *and* shadow
   regardless of theme. */
#commentform input[type="submit"].baly-blog-comment-form__submit,
#commentform button[type="submit"].baly-blog-comment-form__submit,
.baly-blog-comments #commentform .baly-blog-comment-form__submit,
.baly-blog-comments .baly-blog-comment-form .baly-blog-comment-form__submit {
	border-radius: 999px !important;
	-webkit-border-radius: 999px !important;
	-moz-border-radius: 999px !important;
	box-shadow: none !important;
	text-shadow: none !important;
	filter: none !important;
}
#commentform input[type="submit"].baly-blog-comment-form__submit:hover,
#commentform button[type="submit"].baly-blog-comment-form__submit:hover,
.baly-blog-comments #commentform .baly-blog-comment-form__submit:hover,
.baly-blog-comments .baly-blog-comment-form .baly-blog-comment-form__submit:hover {
	box-shadow: none !important;
	filter: none !important;
}
.baly-blog-comment-form__submit:hover { background: var(--bb-brand-hover); }
.baly-blog-comments__closed {
	font-size: 14px;
	color: var(--bb-fg-3);
	margin: 0;
}

/* ============================================================
   6. Category
   ============================================================ */

.baly-blog-cathead {
	background: var(--bb-bg);
	border-radius: var(--bb-radius-2xl);
	padding: 36px 40px;
	display: grid;
	grid-template-columns: 1fr 220px;
	gap: 40px;
	align-items: center;
	box-shadow: var(--bb-shadow-1);
	margin: 24px 0 40px;
	position: relative;
	overflow: hidden;
}
.baly-blog-cathead::before {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	inset-inline-end: 0;
	width: 4px;
	background: var(--bb-brand);
}
.baly-blog-cathead__title {
	font-size: 38px;
	font-weight: 900;
	line-height: 1.15;
	margin: 0 0 12px;
	letter-spacing: -0.01em;
}
.baly-blog-cathead__lede {
	font-size: 16px;
	line-height: 1.65;
	color: var(--bb-fg-2);
	margin: 0 0 16px;
	max-width: 620px;
	text-wrap: pretty;
}
.baly-blog-cathead__stats {
	display: flex;
	gap: 24px;
	align-items: center;
	flex-wrap: wrap;
}
.baly-blog-cathead__stat {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: var(--bb-fg-2);
}
.baly-blog-cathead__stat strong {
	color: var(--bb-fg);
	font-weight: 600;
}
.baly-blog-cathead__img {
	width: 220px; height: 180px;
	border-radius: var(--bb-radius-xl);
	overflow: hidden;
	background: var(--bb-bg-2);
}
.baly-blog-cathead__img img { width: 100%; height: 100%; object-fit: cover; }

.baly-blog-listing__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-bottom: 48px;
}

.baly-blog-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	padding: 16px 0 32px;
	flex-wrap: wrap;
}
.baly-blog-pagination__btn {
	min-width: 44px; height: 44px;
	border-radius: var(--bb-radius-pill);
	border: 1px solid var(--bb-border);
	background: var(--bb-bg);
	color: var(--bb-fg);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	padding: 0 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	transition: all var(--bb-fast);
}
.baly-blog-pagination__btn:hover {
	border-color: var(--bb-brand);
	color: var(--bb-brand);
}
.baly-blog-pagination__btn.is-current,
.baly-blog-pagination .current {
	background: var(--bb-brand) !important;
	color: #fff !important;
	border-color: var(--bb-brand) !important;
	pointer-events: none;
}
.baly-blog-pagination .dots { padding: 0 4px; color: var(--bb-fg-3); }
.baly-blog-pagination__indicator {
	display: none;
	font-size: 14px;
	color: var(--bb-fg-2);
	font-weight: 500;
	white-space: nowrap;
}
.baly-blog-pagination__indicator strong {
	color: var(--bb-fg);
	font-weight: 600;
}

/* ============================================================
   7. Responsive
   ============================================================ */

/* ──────────────────────────────────────────────────────────────────
   Tablet (≤ 900px). Breakpoint matches the new design system handover.
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.baly-blog-container { padding: 0 20px; }

	.baly-blog-section__head h2,
	.baly-blog-rail__head h2,
	.baly-blog-related__head h2 { font-size: 28px; }

	/* Hero */
	.baly-blog-hero__carousel { aspect-ratio: 16/9; }
	.baly-blog-hero__title { font-size: 26px; }
	.baly-blog-hero__overlay { inset-inline: 32px; bottom: 28px; max-width: 80%; }
	.baly-blog-hero__arrow { width: 40px; height: 40px; }

	/* Home grids */
	.baly-blog-latest__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
	.baly-blog-catstrip__grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }

	/* Editorial split → stacked, mostread thumb 96×72 */
	.baly-blog-editorial__grid { grid-template-columns: 1fr; gap: 40px; }
	.baly-blog-feature__title { font-size: 22px; }
	.baly-blog-mostread__item a { grid-template-columns: 1fr 96px; }
	.baly-blog-mostread__thumb { width: 96px; height: 72px; }

	/* Partner rail keeps the carousel; cards narrow slightly to share the row. */
	.baly-blog-rail__track > .baly-blog-card,
	.baly-blog-rail__cta { flex: 0 0 280px; width: 280px; }

	/* Post — collapse to a single column. The desktop sidebar placement
	   (grid-column: 2; grid-row: 2) must be reset to `auto` so the sidebar
	   auto-places at the END of the column flow on small screens, after the
	   article body — not in an implicit second column at row 2 next to the
	   header. */
	/* Drop the row-gap entirely on mobile. With `display: contents` on the
	   article, all post sections (head, featured, toc, prose, share, author,
	   comments, sidebar) are direct grid items — and a 40 px row-gap was
	   stacking on top of each component's own margin, producing 70–100 px
	   visual gaps between adjacent blocks. With row-gap: 0, the spacing is
	   purely the sum of the two adjacent margins, which is what we tuned
	   the per-component margins to be. */
	.baly-blog-post__grid { grid-template-columns: 1fr; row-gap: 0; column-gap: 0; }
	.baly-blog-post__sidebar {
		grid-column: auto;
		grid-row: auto;
		position: static;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px;
		flex-direction: initial;
		align-self: stretch;
	}
	.baly-blog-post__title { font-size: 32px; }
	.baly-blog-post__featured { aspect-ratio: 16/10; }
	/* Related is now a flex carousel everywhere (handled by the base rule);
	   the old 2-up grid override at this breakpoint is gone. */
	.baly-blog-comments { padding: 32px; }

	/* Category */
	.baly-blog-cathead { grid-template-columns: 1fr 160px; gap: 24px; padding: 28px; }
	.baly-blog-cathead__img { width: 160px; height: 140px; }
	.baly-blog-cathead__title { font-size: 30px; }
	.baly-blog-listing__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

/* ──────────────────────────────────────────────────────────────────
   Mobile (≤ 640px).
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
	.baly-blog-container { padding: 0 16px; }

	/* Mobile sections breathe more around their heading on phones. */
	.baly-blog-section { padding: 36px 0 0; }
	/* Editorial grid feels too close to the catstrip pills above it on mobile,
	   because the catstrip is a horizontal scroller without bottom padding —
	   so we add an explicit top gap on the editorial section. */
	.baly-blog-section.baly-blog-editorial { padding-top: 56px; }
	.baly-blog-section__head { margin-bottom: 20px; }
	.baly-blog-section__head h2,
	.baly-blog-rail__head h2,
	.baly-blog-related__head h2 { font-size: 22px; }
	.baly-blog-section__more { font-size: 13px; }

	/* Hero — extra breathing space before the next section's heading. */
	.baly-blog-hero { padding: 16px 0 16px; }
	.baly-blog-hero__carousel { aspect-ratio: 4/3; }
	.baly-blog-hero__overlay { inset-inline: 20px; bottom: 24px; max-width: 90%; gap: 10px; }
	.baly-blog-hero__title { font-size: 22px; line-height: 1.25; }
	.baly-blog-hero__meta { font-size: 12px; gap: 8px; }
	.baly-blog-hero__arrow { display: none; }
	.baly-blog-hero__dot { width: 5px; height: 5px; }
	.baly-blog-hero__dot.is-active { width: 18px; }

	/* Latest → horizontal scroll-snap carousel */
	.baly-blog-latest__grid {
		display: flex;
		grid-template-columns: none;
		gap: 14px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		scrollbar-width: none;
		-ms-overflow-style: none;
		margin: 0 -16px;
		padding: 4px 16px;
	}
	.baly-blog-latest__grid::-webkit-scrollbar { display: none; }
	.baly-blog-latest__grid > .baly-blog-card {
		flex: 0 0 280px;
		scroll-snap-align: start;
	}
	.baly-blog-latest__grid > .baly-blog-card .baly-blog-card__media { aspect-ratio: 16/10; }
	.baly-blog-latest__grid > .baly-blog-card .baly-blog-card__title { font-size: 16px; line-height: 1.4; }
	.baly-blog-latest__grid > .baly-blog-card .baly-blog-card__excerpt { font-size: 13px; -webkit-line-clamp: 2; }
	.baly-blog-latest__grid > .baly-blog-card .baly-blog-card__meta { font-size: 11px; }
	.baly-blog-latest__grid::after { content: ""; flex: 0 0 16px; }

	/* Category strip → horizontal scroll-snap carousel */
	.baly-blog-catstrip__grid {
		display: flex;
		grid-template-columns: none;
		gap: 12px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		scrollbar-width: none;
		-ms-overflow-style: none;
		margin: 0 -16px;
		padding: 4px 16px;
	}
	.baly-blog-catstrip__grid::-webkit-scrollbar { display: none; }
	.baly-blog-catstrip__grid > .baly-blog-cattile {
		flex: 0 0 160px;
		scroll-snap-align: start;
	}
	.baly-blog-catstrip__grid > .baly-blog-cattile .baly-blog-cattile__label { font-size: 14px; }
	.baly-blog-catstrip__grid::after { content: ""; flex: 0 0 16px; }

	/* Editorial / mostread — standard editorial-item with smaller thumb */
	.baly-blog-editorial { padding-top: 8px; }
	.baly-blog-editorial__grid { gap: 32px; }
	.baly-blog-feature__title { font-size: 18px; }
	/* Title / excerpt / meta were touching the card's left, right and bottom
	   edges (sides 4 px, bottom 0). Restore proper breathing room and give
	   the meta a real bottom gap from the card edge. */
	.baly-blog-feature__body { padding: 16px 18px 18px; }
	.baly-blog-mostread__item a {
		grid-template-columns: 1fr 80px;
		gap: 12px;
		padding: 14px 0;
	}
	.baly-blog-mostread__item:first-child a { padding-top: 14px; }
	.baly-blog-mostread__item:last-child a { padding-bottom: 14px; }
	.baly-blog-mostread__item h4,
	.baly-blog-mostread__title { font-size: 14px; margin-top: 4px; }
	.baly-blog-mostread__thumb { width: 80px; height: 60px; }

	/* Partner rail on mobile (related is handled separately below as a carousel). */
	.baly-blog-rail__head,
	.baly-blog-related__head { flex-direction: column; align-items: flex-start; gap: 12px; }
	.baly-blog-rail__nav,
	.baly-blog-related__nav { display: none; }
	.baly-blog-rail__track > .baly-blog-card,
	.baly-blog-rail__cta { flex: 0 0 240px; width: 240px; }
	.baly-blog-rail__cta { padding: 20px; }
	.baly-blog-rail__cta-title { font-size: 17px; }
	.baly-blog-rail__cta-arrow { width: 44px; height: 44px; }

	/* Post — high specificity so Porto's `.entry-title { font-size: 18px !important }`
	   can't shrink the title below the design size on phones. */
	.baly-blog-post__title,
	h1.baly-blog-post__title,
	.baly-blog-scope .baly-blog-post__head h1.baly-blog-post__title {
		font-size: 28px !important;
		line-height: 1.22 !important;
	}
	/* Tighter rhythm on mobile so the title sits close to the featured image,
	   the body sits close to the image, and share / author / widgets don't
	   each carry their own ~32 px stack. */
	.baly-blog-post__head { padding: 12px 0 12px; }
	.baly-blog-post__featured {
		aspect-ratio: 16/10;
		border-radius: var(--bb-radius-xl);
		margin-bottom: 16px;
	}
	.baly-blog-post__byline { gap: 12px; }
	.baly-blog-post__byline-sep { display: none; }
	.baly-blog-post__meta { gap: 12px; flex-wrap: wrap; font-size: 12px; }
	.baly-blog-post__sidebar {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	/* The TOC sat between the featured image and the prose body — pulling it
	   up closes the gap between the image and the article. */
	.baly-blog-toc-inline { margin: 16px 0 20px; }
	/* Share row: ~96 px combined (32 padding + 32 margin top + 32 author
	   margin) → ~32 px combined on mobile. */
	.baly-blog-share { padding: 16px 0; margin: 16px 0; }
	.baly-blog-author { margin: 16px 0; padding: 20px; }
	/* The widget panel sits inside the sidebar, which on mobile auto-places
	   at the very end of the post column — pull it up so it reads as a
	   continuation of the author block. */
	.baly-blog-widget { padding: 18px; }

	.baly-blog-prose__body p { font-size: 16px; line-height: 1.75; }
	.baly-blog-prose__body h2 { font-size: 24px; margin: 36px 0 16px; }
	.baly-blog-prose__body h3 { font-size: 20px; margin: 28px 0 12px; }
	.baly-blog-prose__body blockquote { padding: 24px; margin: 32px 0; }
	.baly-blog-prose__body blockquote p { font-size: 18px; }
	/* Loosen the gap between bullet / number list items on mobile — at the
	   smaller body size the desktop 10px sits too tight. */
	.baly-blog-prose__body ul,
	.baly-blog-prose__body ol { line-height: 1.85; }
	.baly-blog-prose__body ul li,
	.baly-blog-prose__body ol li { margin-bottom: 18px; }
	.baly-blog-prose__body table { display: block; overflow-x: auto; font-size: 13px; }
	.baly-blog-prose__body th,
	.baly-blog-prose__body td { padding: 10px 12px; white-space: nowrap; }

	/* Inline TOC stacks label above pills on mobile */
	.baly-blog-toc-inline {
		flex-direction: column;
		align-items: flex-start;
		padding: 16px 0;
		margin: 24px 0 32px;
	}
	.baly-blog-toc-inline__label {
		border-inline-end: none;
		padding-inline-end: 0;
		margin-inline-end: 0;
		margin-bottom: 12px;
	}

	/* Related — base rule already renders a flex carousel; on mobile we just
	   tighten the card width / gap and crop the media a bit taller (16/10) so
	   more of the card fits on screen. */
	.baly-blog-related { margin: 48px 0 24px; }
	.baly-blog-related__track { gap: 14px; padding: 4px 16px; }
	.baly-blog-related__track > .baly-blog-card { flex: 0 0 280px; width: 280px; }
	.baly-blog-related__track > .baly-blog-card .baly-blog-card__media { aspect-ratio: 16/10; }

	/* Keep the centered share row but stay on the tightened 16-px rhythm
	   from the tablet block above (don't snap back to 24 px padding here). */
	.baly-blog-share { padding: 16px 0; margin: 16px 0; justify-content: center; }
	.baly-blog-author {
		grid-template-columns: 56px 1fr;
		grid-template-rows: auto auto;
		padding: 18px;
		margin: 16px 0;
		gap: 12px 14px;
	}
	.baly-blog-author__avatar,
	img.baly-blog-author__avatar {
		width: 56px !important;
		height: 56px !important;
		min-width: 56px;
		max-width: 56px;
		aspect-ratio: 1 / 1;
		border-radius: 50% !important;
		font-size: 22px;
		grid-row: 1;
		flex-shrink: 0;
	}
	.baly-blog-author > div { grid-column: 2; grid-row: 1; }
	.baly-blog-author__bio { grid-column: 1 / -1; grid-row: 2; margin: 0; }

	.baly-blog-comments { padding: 24px; margin: 24px 0 16px; border-radius: var(--bb-radius-xl); }
	.baly-blog-comments__head { flex-direction: column; align-items: flex-start; gap: 12px; }
	.baly-blog-comments__head h2 { font-size: 18px; }
	/* Force the count pill to a perfect circle on phones — the desktop's
	   `padding: 4px 12px` reads as oval at the smaller mobile font size. */
	.baly-blog-comments__count-pill {
		width: 26px;
		min-width: 26px;
		height: 26px;
		padding: 0;
		font-size: 12px;
		aspect-ratio: 1 / 1;
	}
	.baly-blog-comment-list .baly-blog-comment {
		grid-template-columns: 36px 1fr;
		gap: 12px;
	}
	.baly-blog-comment__avatar { width: 36px; height: 36px; font-size: 14px; }
	.baly-blog-comment__children { padding-inline-start: 16px !important; }
	.baly-blog-comment__children .baly-blog-comment__children { padding-inline-start: 8px !important; }
	.baly-blog-comment__children .baly-blog-comment__children .baly-blog-comment__children { padding-inline-start: 4px !important; }
	/* Stack the comment-form grid to a single column on mobile. */
	.baly-blog-comment-form { grid-template-columns: 1fr; }
	.baly-blog-comment-form__field--author  { grid-column: 1; grid-row: 1; }
	.baly-blog-comment-form__field--email   { grid-column: 1; grid-row: 2; }
	.baly-blog-comment-form__field--url     { grid-column: 1; grid-row: 3; }
	.baly-blog-comment-form__field--comment { grid-column: 1; grid-row: 4; }
	.baly-blog-comment-form__actions        { grid-column: 1; grid-row: 5; }
	.baly-blog-comment-form__actions {
		flex-direction: column;
		align-items: stretch;
	}
	.baly-blog-comment-form__submit { width: 100%; }

	/* Category */
	.baly-blog-cathead { grid-template-columns: 1fr; padding: 20px; gap: 16px; border-radius: var(--bb-radius-xl); }
	.baly-blog-cathead__title { font-size: 24px; }
	.baly-blog-cathead__lede { font-size: 14px; }
	.baly-blog-cathead__img { display: none; }
	.baly-blog-listing__grid { grid-template-columns: 1fr; gap: 16px; margin-bottom: 32px; }


	/* Compact pagination: just prev / "page X of Y" indicator / next */
	.baly-blog-pagination {
		gap: 8px;
		justify-content: space-between;
	}
	.baly-blog-pagination__btn {
		min-width: 44px; height: 44px;
		font-size: 14px;
		padding: 0;
		flex-shrink: 0;
	}
	.baly-blog-pagination__btn:not(.prev):not(.next),
	.baly-blog-pagination .dots { display: none; }
	/* Hide just the text label so the SVG chevron stays visible inside the circle. */
	.baly-blog-pagination__btn .baly-blog-pagination__label { display: none; }
	.baly-blog-pagination__btn.prev,
	.baly-blog-pagination__btn.next { gap: 0; }
	.baly-blog-pagination__btn.prev svg,
	.baly-blog-pagination__btn.next svg { width: 16px; height: 16px; display: block; }
	.baly-blog-pagination__indicator { display: inline-block; }

	/* On mobile we drop the comment-count chip from the post byline meta — the
	   date and reading-time stay inline next to the author. */
	.baly-blog-post__meta-comments { display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.baly-blog-scope *,
	.baly-blog-scope *::before,
	.baly-blog-scope *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}