/* ═══════════════════════════════════════════════════════════════════════
   BLOG-DETAIL.CSS — Single article page
   Reuses tokens from /custom/css/core.css (--gg-red, --gg-font-head,
   --gg-r-xl, etc.) and reuses .gg-blg__body / .gg-blg__aside / widget
   classes from /css/blog.css for the right-rail.

   New BEM block: .gg-blgd
     • Reading-progress bar (fixed under header)
     • Hero (eyebrow, title, dek, author chip, stats, hero image)
     • Sticky share rail (desktop) / floating mobile bar (phone)
     • Article typography + figures + pull quotes + lists + callouts
     • Author bio card · prev/next navigator · comments
     • Related grid · bottom CTA banner
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Reading-progress bar ─── */
.gg-blgd__progress{
	position: fixed;
	top: 72px; left: 0; right: 0;
	height: 3px;
	background: rgba(237,41,56,.08);
	z-index: calc(var(--gg-z-sticky, 200) - 1);
	pointer-events: none;
}
.gg-blgd__progress-bar{
	display: block;
	width: 0;
	height: 100%;
	background: linear-gradient(90deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	box-shadow: 0 0 12px rgba(237,41,56,.45);
	transition: width 120ms linear;
}

/* ═════════════ HERO ═════════════ */
.gg-blgd__hero{
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(20px, 3vw, 36px);
	margin-bottom: clamp(24px, 3vw, 36px);
	padding: clamp(20px, 2.4vw, 32px);
	background:
		radial-gradient(ellipse at top left, rgba(237,41,56,.08) 0%, transparent 55%),
		radial-gradient(ellipse at bottom right, rgba(237,41,56,.05) 0%, transparent 55%),
		var(--gg-white, #FFFFFF);
	border-radius: var(--gg-r-xl, 16px);
	box-shadow:
		0 1px 2px rgba(237,41,56,.04),
		0 12px 32px rgba(237,41,56,.08);
	overflow: hidden;
}
.gg-blgd__hero-glow{
	position: absolute;
	right: -80px; top: -80px;
	width: 320px; height: 320px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(237,41,56,.22) 0%, transparent 60%);
	filter: blur(36px);
	pointer-events: none;
}
.gg-blgd__hero-inner{
	position: relative;
	display: flex; flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.gg-blgd__hero-cat{
	display: inline-flex; align-self: flex-start; align-items: center; gap: 8px;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--gg-red-subtle, rgba(237,41,56,.08));
	color: var(--gg-red-deep, #B91C28);
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: var(--gg-text-2xs, 11px);
	font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase;
	transition: background 220ms ease, color 220ms ease;
}
.gg-blgd__hero-cat:hover{ background: var(--gg-red, #ED2938); color: var(--gg-white, #FFFFFF); }
.gg-blgd__hero-cat-dot{
	width: 7px; height: 7px; border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 0 3px rgba(237,41,56,.18);
	animation: gg-blgd-pulse 2.4s ease-in-out infinite;
}
@keyframes gg-blgd-pulse{
	0%, 100%{ box-shadow: 0 0 0 3px rgba(237,41,56,.18); }
	50%{ box-shadow: 0 0 0 6px rgba(237,41,56,.05); }
}

.gg-blgd__hero-title{
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: clamp(1.75rem, 3.4vw, 2.75rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.025em;
	color: var(--gg-black, #0A0A0A);
}

.gg-blgd__hero-dek{
	font-family: var(--gg-font-body);
	font-size: clamp(var(--gg-text-base, 15px), 1.1vw, var(--gg-text-lg, 18px));
	color: var(--gg-gray-600, #4B5563);
	line-height: 1.55;
	max-width: 60ch;
}

.gg-blgd__hero-meta{
	display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
	margin-top: 6px;
	padding-top: 16px;
	border-top: 1px dashed var(--gg-gray-200, #E5E7EB);
}
.gg-blgd__author-chip{
	display: inline-flex; align-items: center; gap: 12px;
	padding: 4px 14px 4px 4px;
	border-radius: 999px;
	background: var(--gg-gray-50, #F9FAFB);
	transition: background 220ms ease, transform 220ms ease;
}
.gg-blgd__author-chip:hover{ background: var(--gg-red-subtle, rgba(237,41,56,.08)); transform: translateY(-1px); }
.gg-blgd__author-chip-img{
	width: 36px !important; height: 36px !important;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 2px var(--gg-white, #FFF), 0 0 0 3px var(--gg-red-subtle, rgba(237,41,56,.18));
}
.gg-blgd__author-chip > span{ display: flex; flex-direction: column; line-height: 1.15; }
.gg-blgd__author-chip-name{
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: var(--gg-text-sm, 13px); font-weight: 700;
	color: var(--gg-black, #0A0A0A);
}
.gg-blgd__author-chip-role{
	font-size: var(--gg-text-xs, 12px);
	color: var(--gg-gray-500, #6B7280);
}

.gg-blgd__hero-stats{
	list-style: none;
	display: inline-flex; flex-wrap: wrap; align-items: center;
	gap: 6px 14px;
	font-size: var(--gg-text-xs, 12px);
	color: var(--gg-gray-600, #4B5563);
}
.gg-blgd__hero-stats li{ display: inline-flex; align-items: center; gap: 6px; }
.gg-blgd__hero-stats i{ color: var(--gg-red, #ED2938); font-size: 13px; }

.gg-blgd__hero-actions{
	margin-left: auto;
	display: inline-flex; align-items: center; gap: 8px;
}
.gg-blgd__icon-btn{
	position: relative;
	width: 40px; height: 40px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--gg-white, #FFFFFF);
	color: var(--gg-gray-700, #374151);
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	box-shadow: 0 1px 2px rgba(0,0,0,.04);
	transition: background 200ms ease, color 200ms ease, transform 200ms ease, border-color 200ms ease;
}
.gg-blgd__icon-btn:hover{
	background: var(--gg-red, #ED2938);
	color: var(--gg-white, #FFFFFF);
	border-color: transparent;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(237,41,56,.3);
}
.gg-blgd__icon-btn i{ position: absolute; font-size: 16px; transition: opacity 200ms ease; }
.gg-blgd__icon-btn .bi-bookmark-fill{ opacity: 0; }
.gg-blgd__icon-btn[aria-pressed="true"]{ background: var(--gg-red, #ED2938); color: var(--gg-white, #FFFFFF); border-color: transparent; }
.gg-blgd__icon-btn[aria-pressed="true"] .bi-bookmark{ opacity: 0; }
.gg-blgd__icon-btn[aria-pressed="true"] .bi-bookmark-fill{ opacity: 1; }

.gg-blgd__hero-media{
	position: relative;
	aspect-ratio: 16 / 9;       /* lock frame to source aspect — 1920×1080 fits with zero whitespace */
	min-height: 0;
	border-radius: var(--gg-r-xl, 16px);
	overflow: hidden;
	background: var(--gg-gray-100, #F3F4F6);
	box-shadow: 0 12px 28px -8px rgba(0,0,0,.18);
}
.gg-blgd__hero-img{
	position: absolute; inset: 0;
	width: 100%; height: 100% !important;
	object-fit: contain;        /* show the whole image — no crop, no scale */
	object-position: center;
}
.gg-blgd__hero-badge{
	position: absolute; top: 14px; left: 14px;
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(10,10,10,.78);
	backdrop-filter: blur(8px);
	color: var(--gg-white, #FFFFFF);
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: var(--gg-text-2xs, 11px); font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase;
}
.gg-blgd__hero-badge i{ color: var(--gg-red, #ED2938); font-size: 12px; }

/* ═════════════ MAIN COLUMN ═════════════ */
.gg-blgd__main{
	position: relative;
	min-width: 0;
}
/* Push the article body right of the share rail on desktop only */
@media (min-width: 1100px){
	.gg-blgd__main{ padding-left: 72px; }
}

/* ─── Sticky share rail (desktop) ─── */
.gg-blgd__share-rail{
	display: none;
}
@media (min-width: 1100px){
	.gg-blgd__share-rail{
		display: flex; flex-direction: column; align-items: center; gap: 10px;
		position: sticky;
		top: 110px;
		float: left;
		margin-left: -72px;
		padding: 14px 8px;
		border-radius: 999px;
		background: var(--gg-white, #FFFFFF);
		border: 1px solid var(--gg-gray-200, #E5E7EB);
		box-shadow: 0 6px 18px -8px rgba(0,0,0,.12);
		width: 52px;
		z-index: 5;
	}
	.gg-blgd__share-rail-label{
		font-family: var(--gg-font-head, 'Outfit', sans-serif);
		font-size: 9px;
		font-weight: 700;
		letter-spacing: .14em;
		text-transform: uppercase;
		color: var(--gg-gray-500, #6B7280);
		writing-mode: vertical-rl;
		transform: rotate(180deg);
		padding: 4px 0;
		border-bottom: 1px solid var(--gg-gray-200, #E5E7EB);
		margin-bottom: 4px;
	}
}
.gg-blgd__share-link{
	position: relative;
	width: 36px; height: 36px;
	display: grid; place-items: center;
	border-radius: 50%;
	color: var(--gg-gray-700, #374151);
	font-size: 15px;
	transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}
.gg-blgd__share-link:hover{ background: var(--gg-red-subtle, rgba(237,41,56,.08)); color: var(--gg-red, #ED2938); transform: translateY(-2px); }
.gg-blgd__share-toast{
	position: absolute;
	left: 110%;
	top: 50%;
	transform: translateY(-50%) translateX(-6px);
	padding: 6px 10px;
	border-radius: var(--gg-r-md, 8px);
	background: var(--gg-black, #0A0A0A);
	color: var(--gg-white, #FFFFFF);
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms ease, transform 200ms ease;
}
.gg-blgd__share-link.is-copied .gg-blgd__share-toast{
	opacity: 1; transform: translateY(-50%) translateX(0);
}

/* ─── Table of contents ─── */
.gg-blgd__toc{
	margin-bottom: clamp(20px, 2.4vw, 28px);
	padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2vw, 24px);
	background:
		linear-gradient(135deg, var(--gg-white, #FFFFFF), var(--gg-gray-50, #F9FAFB));
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	border-radius: var(--gg-r-xl, 16px);
	box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.gg-blgd__toc[open]{ background: var(--gg-white, #FFFFFF); }
.gg-blgd__toc-summary{
	display: flex; align-items: center; gap: 10px;
	cursor: pointer;
	list-style: none;
	user-select: none;
}
.gg-blgd__toc-summary::-webkit-details-marker{ display: none; }
.gg-blgd__toc-eyebrow{
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: var(--gg-text-2xs, 11px);
	font-weight: 700;
	color: var(--gg-red, #ED2938);
	letter-spacing: .14em; text-transform: uppercase;
}
.gg-blgd__toc-title{
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: var(--gg-text-md, 16px);
	font-weight: 700;
	color: var(--gg-black, #0A0A0A);
}
.gg-blgd__toc-chev{
	margin-left: auto;
	color: var(--gg-gray-400, #9CA3AF);
	transition: transform 240ms ease;
	font-size: 14px;
}
.gg-blgd__toc[open] .gg-blgd__toc-chev{ transform: rotate(180deg); }

.gg-blgd__toc-list{
	list-style: none;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px dashed var(--gg-gray-200, #E5E7EB);
	counter-reset: gg-blgd-toc;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px 14px;
}
.gg-blgd__toc-list li a{
	display: flex; align-items: center; gap: 10px;
	padding: 8px 10px;
	border-radius: var(--gg-r-md, 8px);
	font-size: var(--gg-text-sm, 13px);
	color: var(--gg-gray-700, #374151);
	transition: background 200ms ease, color 200ms ease;
}
.gg-blgd__toc-list li a:hover{ background: var(--gg-red-subtle, rgba(237,41,56,.08)); color: var(--gg-red, #ED2938); }
.gg-blgd__toc-list li a.is-active{
	background: var(--gg-red-subtle, rgba(237,41,56,.08));
	color: var(--gg-red-deep, #B91C28);
	font-weight: 700;
}
.gg-blgd__toc-num{
	flex-shrink: 0;
	display: inline-grid; place-items: center;
	min-width: 22px; height: 22px;
	border-radius: var(--gg-r-sm, 4px);
	background: var(--gg-gray-100, #F3F4F6);
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: 10px; font-weight: 800;
	color: var(--gg-gray-600, #4B5563);
	letter-spacing: .04em;
	transition: background 200ms ease, color 200ms ease;
}
.gg-blgd__toc-list li a:hover .gg-blgd__toc-num,
.gg-blgd__toc-list li a.is-active .gg-blgd__toc-num{
	background: var(--gg-red, #ED2938); color: var(--gg-white, #FFFFFF);
}
.gg-blgd__toc-text{ flex: 1; min-width: 0; }

@media (max-width: 700px){
	.gg-blgd__toc-list{ grid-template-columns: 1fr; }
}

/* ═════════════ ARTICLE TYPOGRAPHY ═════════════ */
.gg-blgd__article{
	background: var(--gg-white, #FFFFFF);
	border-radius: var(--gg-r-xl, 16px);
	padding: clamp(24px, 3vw, 44px);
	box-shadow:
		0 1px 2px rgba(237,41,56,.04),
		0 4px 16px rgba(237,41,56,.05);
	font-family: var(--gg-font-body);
	color: var(--gg-gray-800, #1F2937);
	line-height: 1.75;
	font-size: clamp(var(--gg-text-base, 15px), 1.05vw, 1.0625rem);
}
.gg-blgd__section{
	scroll-margin-top: 110px;        /* offset for fixed header when jumping from TOC */
}
.gg-blgd__section + .gg-blgd__section{
	margin-top: clamp(28px, 3.4vw, 44px);
	padding-top: clamp(28px, 3.4vw, 44px);
	border-top: 1px solid var(--gg-gray-100, #F3F4F6);
}
/* H2 — applies BOTH to the demo's `.gg-blgd__h2` class AND to bare <h2>
   inside the article (DB / WYSIWYG content arrives without classes). */
.gg-blgd__h2,
.gg-blgd__article h2{
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: clamp(1.375rem, 2vw, 1.75rem);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.2;
	color: var(--gg-black, #0A0A0A);
	margin: clamp(28px, 3vw, 36px) 0 14px;
	position: relative;
	padding-left: 18px;
	scroll-margin-top: 110px;
}
.gg-blgd__h2::before,
.gg-blgd__article h2::before{
	content: "";
	position: absolute;
	left: 0; top: .35em;
	width: 4px; height: .8em;
	background: linear-gradient(180deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	border-radius: 4px;
}
/* H2 directly inside `.gg-blgd__section` (the demo wrapper) keeps its own
   margin handling — the section already adds the top spacing. */
.gg-blgd__article .gg-blgd__section > h2{ margin-top: 0; }
/* ═══════════════════════════════════════════════════════════════════════
   WYSIWYG PROSE STYLES
   Article body is fetched from the database and rendered as raw HTML
   (h2, h3, h4, h5, h6, p, ul, ol, blockquote, table, img, figure, hr,
   pre, code …). Editors don't add classes, so we style every bare element
   inside `.gg-blgd__article`. The class-based blocks above (.gg-blgd__h2,
   .gg-blgd__list, .gg-blgd__quote, .gg-blgd__figure, .gg-blgd__callout)
   continue to work for hand-built / featured content.
   ═══════════════════════════════════════════════════════════════════════ */

/* Headings — H3 / H4 / H5 / H6 cascade in size + weight */
.gg-blgd__article h3{
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: clamp(1.125rem, 1.4vw, 1.25rem);
	font-weight: 700;
	color: var(--gg-black, #0A0A0A);
	letter-spacing: -.01em;
	line-height: 1.3;
	margin: 28px 0 10px;
	scroll-margin-top: 110px;
}
.gg-blgd__article h4{
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: clamp(1rem, 1.2vw, 1.125rem);
	font-weight: 700;
	color: var(--gg-black, #0A0A0A);
	margin: 22px 0 8px;
	scroll-margin-top: 110px;
}
.gg-blgd__article h5{
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: var(--gg-text-md, 1rem);
	font-weight: 700;
	color: var(--gg-gray-800, #1F2937);
	letter-spacing: .02em;
	margin: 20px 0 6px;
	scroll-margin-top: 110px;
}
.gg-blgd__article h6{
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: var(--gg-text-sm, .875rem);
	font-weight: 700;
	color: var(--gg-red-deep, #B91C28);
	letter-spacing: .12em;
	text-transform: uppercase;
	margin: 18px 0 6px;
	scroll-margin-top: 110px;
}

/* Paragraphs */
.gg-blgd__article p{ color: var(--gg-gray-700, #374151); margin: 0 0 16px; }
.gg-blgd__article p:last-child{ margin-bottom: 0; }

/* Inline */
.gg-blgd__article a{ color: var(--gg-red, #ED2938); border-bottom: 1px solid rgba(237,41,56,.25); transition: color 200ms ease, border-color 200ms ease; }
.gg-blgd__article a:hover{ color: var(--gg-red-deep, #B91C28); border-bottom-color: currentColor; }
.gg-blgd__article strong, .gg-blgd__article b{ color: var(--gg-black, #0A0A0A); font-weight: 700; }
.gg-blgd__article em, .gg-blgd__article i{ font-style: italic; }
.gg-blgd__article mark{ background: linear-gradient(180deg, transparent 60%, rgba(237,41,56,.22) 60%); color: inherit; padding: 0 2px; }
.gg-blgd__article small{ font-size: .85em; color: var(--gg-gray-500, #6B7280); }
.gg-blgd__article del{ color: var(--gg-gray-400, #9CA3AF); }

/* Bare lists (DB content) — the .gg-blgd__list class above keeps its own
   premium styling for the demo. These selectors handle plain <ul>/<ol> the
   editor outputs. We *exclude* the class-based variant via :not(). */
.gg-blgd__article ul:not(.gg-blgd__list),
.gg-blgd__article ol:not(.gg-blgd__list){
	margin: 16px 0;
	padding-left: 24px;
	color: var(--gg-gray-700, #374151);
}
.gg-blgd__article ul:not(.gg-blgd__list) > li,
.gg-blgd__article ol:not(.gg-blgd__list) > li{
	margin: 6px 0;
	padding-left: 4px;
	line-height: 1.7;
}
.gg-blgd__article ul:not(.gg-blgd__list) > li::marker{ color: var(--gg-red, #ED2938); font-size: 1.05em; }
.gg-blgd__article ol:not(.gg-blgd__list) > li::marker{ color: var(--gg-red, #ED2938); font-weight: 700; }
.gg-blgd__article ul:not(.gg-blgd__list) ul,
.gg-blgd__article ol:not(.gg-blgd__list) ol,
.gg-blgd__article ul:not(.gg-blgd__list) ol,
.gg-blgd__article ol:not(.gg-blgd__list) ul{ margin: 6px 0; }

/* Bare blockquote (DB content) — premium pull-quote handled by .gg-blgd__quote */
.gg-blgd__article blockquote:not(.gg-blgd__quote){
	margin: 22px 0;
	padding: 14px 20px;
	border-left: 3px solid var(--gg-red, #ED2938);
	background: var(--gg-gray-50, #F9FAFB);
	border-radius: 0 var(--gg-r-md, 8px) var(--gg-r-md, 8px) 0;
	color: var(--gg-gray-700, #374151);
	font-style: italic;
	font-size: 1.0625em;
	line-height: 1.6;
}
.gg-blgd__article blockquote:not(.gg-blgd__quote) p{ margin: 0; }

/* Horizontal rule */
.gg-blgd__article hr{
	border: 0;
	height: 1px;
	margin: 28px auto;
	background: linear-gradient(90deg, transparent 0%, var(--gg-gray-200, #E5E7EB) 30%, var(--gg-gray-200, #E5E7EB) 70%, transparent 100%);
}

/* Inline code + code blocks */
.gg-blgd__article code{
	background: var(--gg-gray-100, #F3F4F6);
	color: var(--gg-red-deep, #B91C28);
	padding: 2px 6px;
	border-radius: 4px;
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: .9em;
	border: 1px solid var(--gg-gray-200, #E5E7EB);
}
.gg-blgd__article pre{
	background: var(--gg-black, #0A0A0A);
	color: var(--gg-white, #FFFFFF);
	padding: 16px 18px;
	border-radius: var(--gg-r-lg, 12px);
	margin: 20px 0;
	overflow-x: auto;
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: .8125rem;
	line-height: 1.6;
}
.gg-blgd__article pre code{
	background: transparent;
	color: inherit;
	padding: 0;
	border: 0;
	border-radius: 0;
	font-size: inherit;
}

/* Images — applies to bare <img> in DB content. .gg-blgd__figure (class)
   overrides for hand-built feature images. */
.gg-blgd__article img{
	max-width: 100%;
	height: auto;
	display: block;
	margin: 20px auto;
	border-radius: var(--gg-r-lg, 12px);
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 18px -8px rgba(0,0,0,.12);
	background: var(--gg-gray-100, #F3F4F6);
}
/* Bare figure (DB content) — gets a softer treatment than .gg-blgd__figure */
.gg-blgd__article figure:not(.gg-blgd__figure){
	margin: 20px 0;
}
.gg-blgd__article figure:not(.gg-blgd__figure) img{
	margin: 0;
}
.gg-blgd__article figure:not(.gg-blgd__figure) figcaption{
	margin-top: 8px;
	padding: 0 8px;
	font-size: var(--gg-text-xs, 12px);
	color: var(--gg-gray-500, #6B7280);
	text-align: center;
	font-style: italic;
	line-height: 1.5;
}

/* ═════ TABLES — important for blog content ═════
   Wrapped in horizontal scroll on small screens so wide tables don't blow
   out the layout. */
.gg-blgd__article table{
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin: 24px 0;
	font-size: var(--gg-text-sm, .875rem);
	background: var(--gg-white, #FFFFFF);
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	border-radius: var(--gg-r-lg, 12px);
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 16px -10px rgba(0,0,0,.1);
}
.gg-blgd__article thead{
	background: linear-gradient(135deg, rgba(237,41,56,.08), rgba(237,41,56,.03));
}
.gg-blgd__article thead th{
	padding: 12px 16px;
	text-align: left;
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: var(--gg-text-xs, .75rem);
	font-weight: 700;
	color: var(--gg-black, #0A0A0A);
	letter-spacing: .06em;
	text-transform: uppercase;
	border-bottom: 2px solid var(--gg-red, #ED2938);
	white-space: nowrap;
}
.gg-blgd__article tbody td,
.gg-blgd__article tbody th{
	padding: 12px 16px;
	color: var(--gg-gray-700, #374151);
	border-bottom: 1px solid var(--gg-gray-100, #F3F4F6);
	vertical-align: top;
	line-height: 1.55;
}
.gg-blgd__article tbody tr:nth-child(even){ background: var(--gg-gray-50, #F9FAFB); }
.gg-blgd__article tbody tr:hover{ background: var(--gg-red-subtle, rgba(237,41,56,.05)); }
.gg-blgd__article tbody tr:last-child td,
.gg-blgd__article tbody tr:last-child th{ border-bottom: 0; }
.gg-blgd__article table caption{
	caption-side: top;
	padding: 0 0 8px;
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: var(--gg-text-xs, .75rem);
	font-weight: 700;
	color: var(--gg-gray-600, #4B5563);
	letter-spacing: .04em;
	text-align: left;
}

/* Mobile: scroll wide tables horizontally instead of wrapping */
@media (max-width: 700px){
	.gg-blgd__article table{
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.gg-blgd__article thead th,
	.gg-blgd__article tbody td,
	.gg-blgd__article tbody th{
		padding: 10px 12px;
		font-size: var(--gg-text-xs, .75rem);
	}
}

/* Iframe / video embeds — common WYSIWYG output */
.gg-blgd__article iframe,
.gg-blgd__article video{
	max-width: 100%;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--gg-r-lg, 12px);
	border: 0;
	margin: 20px 0;
	background: var(--gg-black, #0A0A0A);
}

.gg-blgd__lede{
	font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
	color: var(--gg-gray-700, #374151);
	font-weight: 500;
	line-height: 1.6;
}

/* Lists */
.gg-blgd__list{
	margin: 16px 0;
	padding-left: 22px;
	display: flex; flex-direction: column; gap: 10px;
}
.gg-blgd__list li{ padding-left: 6px; }
.gg-blgd__list li::marker{ color: var(--gg-red, #ED2938); font-weight: 700; }

ol.gg-blgd__list{ counter-reset: gg-blgd-step; padding-left: 0; }
ol.gg-blgd__list li{
	list-style: none;
	position: relative;
	padding-left: 44px;
}
ol.gg-blgd__list li::before{
	counter-increment: gg-blgd-step;
	content: counter(gg-blgd-step, decimal-leading-zero);
	position: absolute; left: 0; top: 1px;
	width: 32px; height: 28px;
	display: grid; place-items: center;
	border-radius: var(--gg-r-md, 8px);
	background: var(--gg-red-subtle, rgba(237,41,56,.08));
	color: var(--gg-red-deep, #B91C28);
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: var(--gg-text-xs, 12px);
	font-weight: 800;
	letter-spacing: .04em;
}

ul.gg-blgd__list--check{ list-style: none; padding-left: 0; }
ul.gg-blgd__list--check li{
	position: relative;
	padding-left: 32px;
}
ul.gg-blgd__list--check li::before{
	content: "\F633"; /* bi-check2 — bootstrap icons private use area */
	font-family: 'bootstrap-icons';
	position: absolute; left: 0; top: 0;
	width: 22px; height: 22px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--gg-red, #ED2938);
	color: var(--gg-white, #FFFFFF);
	font-size: 13px;
}

/* Blockquote */
.gg-blgd__quote{
	margin: 24px 0;
	padding: 22px 24px 22px 28px;
	background:
		radial-gradient(ellipse at top right, rgba(237,41,56,.08) 0%, transparent 60%),
		var(--gg-gray-50, #F9FAFB);
	border-left: 4px solid var(--gg-red, #ED2938);
	border-radius: var(--gg-r-lg, 12px);
	position: relative;
}
.gg-blgd__quote::before{
	content: "\201C";
	position: absolute;
	top: -8px; right: 18px;
	font-family: 'Fraunces', serif;
	font-size: 88px;
	line-height: 1;
	color: rgba(237,41,56,.15);
	pointer-events: none;
}
.gg-blgd__quote p{
	font-family: 'Fraunces', serif;
	font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
	color: var(--gg-gray-800, #1F2937);
	line-height: 1.5;
	font-style: italic;
}
.gg-blgd__quote cite{
	display: block;
	margin-top: 10px;
	font-style: normal;
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: var(--gg-text-xs, 12px);
	font-weight: 700;
	color: var(--gg-gray-600, #4B5563);
	letter-spacing: .04em;
}

/* Figure */
.gg-blgd__figure{
	margin: 24px 0;
	border-radius: var(--gg-r-lg, 12px);
	overflow: hidden;
	background: var(--gg-gray-100, #F3F4F6);
	box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -10px rgba(0,0,0,.16);
}
.gg-blgd__figure img{ width: 100%; height: auto !important; display: block; aspect-ratio: 16 / 9; object-fit: contain; object-position: center; background: var(--gg-gray-100, #F3F4F6); }
.gg-blgd__figure figcaption{
	padding: 12px 16px;
	font-size: var(--gg-text-xs, 12px);
	color: var(--gg-gray-500, #6B7280);
	text-align: center;
	background: var(--gg-white, #FFFFFF);
	border-top: 1px solid var(--gg-gray-100, #F3F4F6);
	font-style: italic;
}

/* Callout */
.gg-blgd__callout{
	margin: 24px 0;
	padding: 18px 20px;
	border-radius: var(--gg-r-lg, 12px);
	background:
		linear-gradient(135deg, rgba(237,41,56,.06), rgba(237,41,56,.02));
	border: 1px solid rgba(237,41,56,.18);
	display: flex; flex-direction: column; gap: 8px;
}
.gg-blgd__callout-tag{
	display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--gg-red, #ED2938);
	color: var(--gg-white, #FFFFFF);
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: var(--gg-text-2xs, 11px);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.gg-blgd__callout-tag i{ font-size: 12px; }
.gg-blgd__callout p{ color: var(--gg-gray-800, #1F2937); margin: 0 !important; }

/* Tags + reactions row */
.gg-blgd__tags{
	margin-top: clamp(28px, 3.4vw, 40px);
	padding-top: 24px;
	border-top: 1px solid var(--gg-gray-100, #F3F4F6);
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.gg-blgd__tags-label{
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: var(--gg-text-2xs, 11px);
	font-weight: 700;
	color: var(--gg-gray-500, #6B7280);
	letter-spacing: .12em; text-transform: uppercase;
	margin-right: 4px;
}
.gg-blgd__tag{
	display: inline-flex; align-items: center;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--gg-gray-100, #F3F4F6);
	color: var(--gg-gray-700, #374151);
	font-size: var(--gg-text-xs, 12px);
	font-weight: 600;
	transition: background 200ms ease, color 200ms ease;
	border-bottom: none !important;
}
.gg-blgd__tag:hover{ background: var(--gg-red, #ED2938); color: var(--gg-white, #FFFFFF) !important; }

.gg-blgd__reactions{
	margin-top: 18px;
	padding: 14px 18px;
	background: var(--gg-gray-50, #F9FAFB);
	border-radius: var(--gg-r-lg, 12px);
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.gg-blgd__reactions-label{
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: var(--gg-text-sm, 13px);
	font-weight: 700;
	color: var(--gg-black, #0A0A0A);
	margin-right: auto;
}
.gg-blgd__reaction{
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--gg-white, #FFFFFF);
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	color: var(--gg-gray-700, #374151);
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: var(--gg-text-sm, 13px);
	font-weight: 600;
	transition: all 220ms ease;
}
.gg-blgd__reaction:hover{ border-color: var(--gg-red, #ED2938); color: var(--gg-red, #ED2938); transform: translateY(-1px); }
.gg-blgd__reaction.is-active{ background: var(--gg-red, #ED2938); color: var(--gg-white, #FFFFFF); border-color: transparent; }
.gg-blgd__reaction-count{
	display: inline-grid; place-items: center;
	min-width: 24px; height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--gg-gray-100, #F3F4F6);
	color: var(--gg-gray-700, #374151);
	font-size: var(--gg-text-2xs, 11px);
	font-weight: 800;
}
.gg-blgd__reaction.is-active .gg-blgd__reaction-count{
	background: rgba(255,255,255,.2);
	color: var(--gg-white, #FFFFFF);
}

/* ═════════════ AUTHOR BIO CARD ═════════════ */
.gg-blgd__bio{
	position: relative;
	margin-top: clamp(28px, 3.4vw, 40px);
	padding: clamp(20px, 2.4vw, 28px);
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: clamp(14px, 2vw, 24px);
	background:
		radial-gradient(ellipse at bottom right, rgba(237,41,56,.06) 0%, transparent 60%),
		var(--gg-white, #FFFFFF);
	border-radius: var(--gg-r-xl, 16px);
	border: 1px solid var(--gg-gray-100, #F3F4F6);
	box-shadow: 0 1px 2px rgba(237,41,56,.04), 0 6px 18px -8px rgba(0,0,0,.08);
	overflow: hidden;
}
.gg-blgd__bio-glow{
	position: absolute;
	right: -60px; bottom: -60px;
	width: 220px; height: 220px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(237,41,56,.18) 0%, transparent 60%);
	filter: blur(28px);
	pointer-events: none;
}
.gg-blgd__bio-img{
	position: relative;
	width: 100px !important; height: 100px !important;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 4px var(--gg-white, #FFF), 0 0 0 5px var(--gg-red-subtle, rgba(237,41,56,.18));
}
.gg-blgd__bio-body{ position: relative; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.gg-blgd__bio-eyebrow{
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: var(--gg-text-2xs, 11px);
	font-weight: 700;
	color: var(--gg-red, #ED2938);
	letter-spacing: .14em; text-transform: uppercase;
}
.gg-blgd__bio-name{
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: clamp(1.25rem, 1.6vw, 1.5rem);
	font-weight: 700;
	color: var(--gg-black, #0A0A0A);
	letter-spacing: -.01em;
}
.gg-blgd__bio-role{
	font-size: var(--gg-text-sm, 13px);
	color: var(--gg-gray-500, #6B7280);
	margin-bottom: 8px;
}
.gg-blgd__bio-text{
	font-size: var(--gg-text-sm, 13px);
	line-height: 1.6;
	color: var(--gg-gray-700, #374151);
}
.gg-blgd__bio-actions{
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
	margin-top: 12px;
}
.gg-blgd__bio-cta{
	display: inline-flex; align-items: center; gap: 8px;
	padding: 9px 16px;
	border-radius: 999px;
	background: var(--gg-black, #0A0A0A);
	color: var(--gg-white, #FFFFFF);
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: var(--gg-text-sm, 13px);
	font-weight: 600;
	transition: background 220ms ease, transform 220ms ease;
}
.gg-blgd__bio-cta:hover{ background: var(--gg-red, #ED2938); transform: translateY(-1px); }
.gg-blgd__bio-social{ display: inline-flex; gap: 4px; margin-left: auto; }
.gg-blgd__bio-social a{
	width: 36px; height: 36px;
	display: grid; place-items: center;
	border-radius: 50%;
	color: var(--gg-gray-600, #4B5563);
	transition: background 200ms ease, color 200ms ease;
}
.gg-blgd__bio-social a:hover{ background: var(--gg-red-subtle, rgba(237,41,56,.08)); color: var(--gg-red, #ED2938); }

/* ═════════════ NEIGHBOURS (prev/next) ═════════════ */
.gg-blgd__neighbours{
	margin-top: clamp(28px, 3.4vw, 36px);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(12px, 2vw, 18px);
}
.gg-blgd__neighbour{
	display: flex; flex-direction: column;
	gap: 6px;
	padding: clamp(16px, 2vw, 22px);
	background: var(--gg-white, #FFFFFF);
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	border-radius: var(--gg-r-xl, 16px);
	transition: border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
	min-width: 0;
}
.gg-blgd__neighbour:hover{
	border-color: var(--gg-red, #ED2938);
	transform: translateY(-3px);
	box-shadow: 0 12px 28px -12px rgba(237,41,56,.18);
}
.gg-blgd__neighbour--next{ text-align: right; }
.gg-blgd__neighbour-eyebrow{
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: var(--gg-text-2xs, 11px);
	font-weight: 700;
	color: var(--gg-red, #ED2938);
	letter-spacing: .12em; text-transform: uppercase;
}
.gg-blgd__neighbour--next .gg-blgd__neighbour-eyebrow{ justify-content: flex-end; }
.gg-blgd__neighbour-title{
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: var(--gg-text-md, 16px);
	font-weight: 700;
	color: var(--gg-black, #0A0A0A);
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 600px){
	.gg-blgd__neighbours{ grid-template-columns: 1fr; }
	.gg-blgd__neighbour--next{ text-align: left; }
	.gg-blgd__neighbour--next .gg-blgd__neighbour-eyebrow{ justify-content: flex-start; }
}

/* ═════════════ COMMENTS ═════════════ */
.gg-blgd__comments{
	margin-top: clamp(36px, 4.4vw, 56px);
	padding: clamp(20px, 2.4vw, 32px);
	background: var(--gg-white, #FFFFFF);
	border-radius: var(--gg-r-xl, 16px);
	box-shadow: 0 1px 2px rgba(237,41,56,.04), 0 4px 16px rgba(237,41,56,.05);
}
.gg-blgd__comments-head{
	display: flex; align-items: center; gap: 14px;
	margin-bottom: 18px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--gg-gray-100, #F3F4F6);
}
.gg-blgd__comments-title{
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: clamp(1.125rem, 1.6vw, 1.375rem);
	font-weight: 700;
	color: var(--gg-black, #0A0A0A);
}
.gg-blgd__comments-title i{ color: var(--gg-red, #ED2938); }
.gg-blgd__comments-count{
	display: inline-grid; place-items: center;
	min-width: 28px; height: 24px;
	padding: 0 8px;
	border-radius: 999px;
	background: var(--gg-red-subtle, rgba(237,41,56,.08));
	color: var(--gg-red-deep, #B91C28);
	font-size: var(--gg-text-xs, 12px);
	font-weight: 800;
}
.gg-blgd__comments-sort{
	margin-left: auto;
	display: inline-flex; gap: 2px;
	padding: 3px;
	border-radius: 999px;
	background: var(--gg-gray-100, #F3F4F6);
}
.gg-blgd__comments-sort button{
	padding: 6px 14px;
	border-radius: 999px;
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: var(--gg-text-xs, 12px);
	font-weight: 600;
	color: var(--gg-gray-600, #4B5563);
	transition: background 200ms ease, color 200ms ease;
}
.gg-blgd__comments-sort button.is-active{ background: var(--gg-white, #FFFFFF); color: var(--gg-black, #0A0A0A); box-shadow: 0 1px 2px rgba(0,0,0,.06); }

/* Comment form */
.gg-blgd__comment-form{
	display: grid; grid-template-columns: auto 1fr;
	gap: 14px;
	padding: 14px;
	background: var(--gg-gray-50, #F9FAFB);
	border-radius: var(--gg-r-lg, 12px);
	margin-bottom: 22px;
}
.gg-blgd__comment-form-avatar{
	width: 44px; height: 44px;
	border-radius: 50%;
	object-fit: cover;
}
.gg-blgd__comment-form-body{ display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gg-blgd__comment-form-body textarea{
	width: 100%;
	min-height: 88px;
	padding: 12px 14px;
	border-radius: var(--gg-r-md, 8px);
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	background: var(--gg-white, #FFFFFF);
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-sm, 14px);
	color: var(--gg-gray-800, #1F2937);
	resize: vertical;
	transition: border-color 200ms ease, box-shadow 200ms ease;
}
.gg-blgd__comment-form-body textarea:focus{
	outline: none;
	border-color: var(--gg-red, #ED2938);
	box-shadow: 0 0 0 3px var(--gg-red-subtle, rgba(237,41,56,.12));
}
.gg-blgd__comment-form-foot{
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; flex-wrap: wrap;
}
.gg-blgd__comment-form-hint{
	font-size: var(--gg-text-xs, 12px);
	color: var(--gg-gray-500, #6B7280);
}
.gg-blgd__comment-form-hint a{ color: var(--gg-red, #ED2938); }
.gg-blgd__comment-form-submit{
	display: inline-flex; align-items: center; gap: 8px;
	padding: 9px 18px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	color: var(--gg-white, #FFFFFF);
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: var(--gg-text-sm, 13px);
	font-weight: 700;
	box-shadow: 0 4px 14px rgba(237,41,56,.3);
	transition: transform 220ms ease, box-shadow 220ms ease;
}
.gg-blgd__comment-form-submit:hover{ transform: translateY(-1px); box-shadow: 0 8px 22px rgba(237,41,56,.36); }

/* Comment list */
.gg-blgd__comment-list{
	list-style: none;
	display: flex; flex-direction: column;
	gap: 18px;
}
.gg-blgd__comment{
	display: grid; grid-template-columns: auto 1fr;
	gap: 14px;
	padding: 16px;
	border-radius: var(--gg-r-lg, 12px);
	border: 1px solid var(--gg-gray-100, #F3F4F6);
	transition: background 220ms ease, border-color 220ms ease;
}
.gg-blgd__comment:hover{ background: var(--gg-gray-50, #F9FAFB); border-color: var(--gg-gray-200, #E5E7EB); }
.gg-blgd__comment-avatar{
	width: 44px !important; height: 44px !important;
	border-radius: 50%; object-fit: cover;
	background: var(--gg-gray-100, #F3F4F6);
}
.gg-blgd__comment-body{ min-width: 0; }
.gg-blgd__comment-head{
	display: flex; align-items: baseline; flex-wrap: wrap;
	gap: 6px 10px;
	margin-bottom: 6px;
}
.gg-blgd__comment-name{
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: var(--gg-text-sm, 13px); font-weight: 700;
	color: var(--gg-black, #0A0A0A);
}
.gg-blgd__comment-role{
	font-size: var(--gg-text-xs, 12px);
	color: var(--gg-gray-500, #6B7280);
}
.gg-blgd__comment-date{
	font-size: var(--gg-text-xs, 12px);
	color: var(--gg-gray-400, #9CA3AF);
}
.gg-blgd__comment-text{
	font-size: var(--gg-text-sm, 14px);
	color: var(--gg-gray-700, #374151);
	line-height: 1.55;
}
.gg-blgd__comment-actions{
	display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
	margin-top: 10px;
}
.gg-blgd__comment-action{
	position: relative;
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 10px;
	border-radius: var(--gg-r-md, 8px);
	color: var(--gg-gray-600, #4B5563);
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: var(--gg-text-xs, 12px);
	font-weight: 600;
	transition: background 200ms ease, color 200ms ease;
}
.gg-blgd__comment-action:hover{ background: var(--gg-red-subtle, rgba(237,41,56,.08)); color: var(--gg-red, #ED2938); }
.gg-blgd__comment-action--ghost{ margin-left: auto; }
.gg-blgd__comment-action i{ font-size: 14px; }
.gg-blgd__comment-action[data-blgd-like] .bi-heart-fill{ position: absolute; opacity: 0; transition: opacity 200ms ease; }
.gg-blgd__comment-action[data-blgd-like][aria-pressed="true"]{ color: var(--gg-red, #ED2938); }
.gg-blgd__comment-action[data-blgd-like][aria-pressed="true"] .bi-heart{ opacity: 0; }
.gg-blgd__comment-action[data-blgd-like][aria-pressed="true"] .bi-heart-fill{ opacity: 1; }
.gg-blgd__comment-likes{ font-weight: 700; }

.gg-blgd__comments-more{
	display: flex; align-items: center; justify-content: center; gap: 8px;
	width: 100%;
	margin-top: 18px;
	padding: 12px 18px;
	border-radius: 999px;
	background: var(--gg-gray-50, #F9FAFB);
	border: 1px dashed var(--gg-gray-300, #D1D5DB);
	color: var(--gg-gray-700, #374151);
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: var(--gg-text-sm, 13px);
	font-weight: 600;
	transition: all 220ms ease;
}
.gg-blgd__comments-more:hover{
	background: var(--gg-red-subtle, rgba(237,41,56,.08));
	border-color: var(--gg-red, #ED2938);
	border-style: solid;
	color: var(--gg-red-deep, #B91C28);
}

/* ═════════════ RELATED ARTICLES ═════════════ */
.gg-blgd__related{
	margin-top: clamp(40px, 5vw, 64px);
}
.gg-blgd__related-head{
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: end;
	gap: 14px;
	margin-bottom: clamp(18px, 2.4vw, 26px);
}
.gg-blgd__related-head .gg-blg__eyebrow{ grid-column: 1 / -1; }
.gg-blgd__related-title{
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--gg-black, #0A0A0A);
	line-height: 1.15;
}
.gg-blgd__related-all{
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: var(--gg-text-sm, 13px);
	font-weight: 700;
	color: var(--gg-red, #ED2938);
	white-space: nowrap;
	transition: gap 220ms ease;
}
.gg-blgd__related-all:hover{ gap: 12px; color: var(--gg-red-deep, #B91C28); }

.gg-blgd__related-grid{
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 22px);
}
.gg-blgd__related-card{
	display: flex; flex-direction: column;
	background:
		radial-gradient(ellipse at top left, rgba(237,41,56,.05) 0%, transparent 60%),
		var(--gg-white, #FFFFFF);
	border-radius: var(--gg-r-xl, 16px);
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(237,41,56,.04), 0 4px 14px rgba(237,41,56,.06);
	transition: transform 600ms cubic-bezier(.22, 1, .36, 1), box-shadow 600ms cubic-bezier(.22, 1, .36, 1);
}
.gg-blgd__related-card:hover{
	transform: translateY(-6px);
	box-shadow: 0 2px 4px rgba(237,41,56,.06), 0 24px 40px -12px rgba(237,41,56,.18);
}
.gg-blgd__related-card-media{
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--gg-gray-100, #F3F4F6);
}
.gg-blgd__related-card-img{
	width: 100%;
	height: 100% !important;
	object-fit: contain;        /* full 1920×1080 visible — no crop, no scale */
	object-position: center;
}
.gg-blgd__related-card-cat{
	position: absolute; top: 12px; left: 12px;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(255,255,255,.94);
	backdrop-filter: blur(6px);
	color: var(--gg-black, #0A0A0A);
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: var(--gg-text-2xs, 11px);
	font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase;
}
.gg-blgd__related-card-body{
	padding: 18px 20px 20px;
	display: flex; flex-direction: column;
	flex: 1;
	gap: 10px;
}
.gg-blgd__related-card-title{
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: var(--gg-text-md, 16px);
	font-weight: 700;
	color: var(--gg-black, #0A0A0A);
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.gg-blgd__related-card-excerpt{
	font-size: var(--gg-text-xs, 12px);
	color: var(--gg-gray-600, #4B5563);
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: auto;
}
.gg-blgd__related-card-foot{
	display: flex; flex-wrap: wrap; gap: 4px 12px;
	padding-top: 12px;
	border-top: 1px dashed var(--gg-gray-200, #E5E7EB);
	font-size: var(--gg-text-xs, 12px);
	color: var(--gg-gray-500, #6B7280);
}
.gg-blgd__related-card-foot span{ display: inline-flex; align-items: center; gap: 5px; }
.gg-blgd__related-card-foot i{ color: var(--gg-red, #ED2938); }

@media (max-width: 1000px){
	.gg-blgd__related-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
	.gg-blgd__related-grid{ grid-template-columns: 1fr; }
	.gg-blgd__related-head{ grid-template-columns: 1fr; }
}

/* ═════════════ BOTTOM CTA ═════════════ */
.gg-blgd__cta{
	position: relative;
	margin-top: clamp(40px, 5vw, 64px);
	padding: clamp(28px, 4vw, 48px);
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) auto;
	gap: clamp(20px, 3vw, 36px);
	align-items: center;
	background:
		radial-gradient(ellipse at top right, rgba(237,41,56,.18) 0%, transparent 55%),
		linear-gradient(135deg, var(--gg-black, #0A0A0A), var(--gg-black-soft, #141414));
	border-radius: var(--gg-r-xl, 16px);
	overflow: hidden;
}
.gg-blgd__cta-glow{
	position: absolute;
	left: -100px; bottom: -100px;
	width: 360px; height: 360px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(237,41,56,.32) 0%, transparent 60%);
	filter: blur(60px);
	pointer-events: none;
}
.gg-blgd__cta-body{ position: relative; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.gg-blgd__cta-body .gg-blg__eyebrow{ color: var(--gg-red, #ED2938) !important; }
.gg-blgd__cta-body .gg-blg__eyebrow::before{ background: var(--gg-red, #ED2938); }
.gg-blgd__cta-title{
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: clamp(1.5rem, 2.6vw, 2.125rem);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.2;
	color: var(--gg-white, #FFFFFF);
}
.gg-blgd__cta-sub{
	font-size: var(--gg-text-base, 15px);
	color: rgba(255,255,255,.72);
	line-height: 1.55;
	max-width: 56ch;
}
.gg-blgd__cta-actions{
	position: relative;
	display: flex; align-items: center; gap: 10px;
	flex-wrap: wrap;
}
.gg-blgd__cta-primary{
	display: inline-flex; align-items: center; gap: 10px;
	padding: 14px 26px;
	border-radius: 999px;
	background: var(--gg-red, #ED2938);
	color: var(--gg-white, #FFFFFF);
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: var(--gg-text-md, 16px);
	font-weight: 700;
	box-shadow: 0 8px 24px rgba(237,41,56,.42);
	transition: transform 220ms ease, box-shadow 220ms ease, gap 220ms ease;
}
.gg-blgd__cta-primary:hover{ transform: translateY(-2px); gap: 14px; box-shadow: 0 14px 32px rgba(237,41,56,.5); }
.gg-blgd__cta-secondary{
	display: inline-flex; align-items: center; gap: 8px;
	padding: 14px 22px;
	border-radius: 999px;
	color: var(--gg-white, #FFFFFF);
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: var(--gg-text-sm, 14px);
	font-weight: 600;
	border: 1px solid rgba(255,255,255,.18);
	transition: background 200ms ease, border-color 200ms ease;
}
.gg-blgd__cta-secondary:hover{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.28); }

@media (max-width: 800px){
	.gg-blgd__cta{ grid-template-columns: 1fr; }
	.gg-blgd__cta-actions{ justify-content: stretch; }
	.gg-blgd__cta-primary, .gg-blgd__cta-secondary{ flex: 1; justify-content: center; }
}

/* ═════════════ HERO RESPONSIVE ═════════════ */
@media (max-width: 1000px){
	.gg-blgd__hero{ grid-template-columns: 1fr; }
	.gg-blgd__hero-media{ order: -1; min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 600px){
	.gg-blgd__hero{ padding: 18px; }
	.gg-blgd__hero-actions{ margin-left: 0; }
}

/* ═════════════ MOBILE STICKY BAR ═════════════
   Sits above the site's mobile bottom nav (`.gg-mnv`, 60px tall, z:500
   from core.css). Two breakpoints:
     • 769–900px (tablets) — no .gg-mnv, bar sits at viewport bottom
     • ≤768px (phones)     — .gg-mnv shows, push bar above it (60px + gap)
*/
.gg-blgd__mobile-bar{
	display: none;
}
@media (max-width: 900px){
	.gg-blgd__mobile-bar{
		position: fixed;
		left: 12px; right: 12px;
		bottom: calc(12px + env(safe-area-inset-bottom, 0));
		display: flex; align-items: center; gap: 6px;
		padding: 6px;
		background:
			radial-gradient(ellipse at top right, rgba(237,41,56,.32) 0%, transparent 60%),
			linear-gradient(135deg, var(--gg-black, #0A0A0A), var(--gg-black-soft, #141414));
		border-radius: 999px;
		box-shadow:
			0 12px 28px -8px rgba(0,0,0,.45),
			0 4px 10px rgba(237,41,56,.25);
		z-index: 501;            /* above .gg-mnv (z:500) */
		transition: transform 320ms cubic-bezier(.22,1,.36,1), opacity 220ms ease;
	}
	body.gg-blg-hide-bar .gg-blgd__mobile-bar{ transform: translateY(260%); opacity: 0; pointer-events: none; }
}
/* Phone — stack the bar ABOVE the mobile bottom nav */
@media (max-width: 768px){
	.gg-blgd__mobile-bar{
		bottom: calc(60px + 8px + env(safe-area-inset-bottom, 0));
	}
}
/* Phone landscape — mobile nav shrinks to 50px (see core.css) */
@media (max-width: 520px) and (orientation: landscape){
	.gg-blgd__mobile-bar{
		bottom: calc(50px + 8px + env(safe-area-inset-bottom, 0));
	}
}
.gg-blgd__mobile-bar-btn{
	position: relative;
	flex: 0 0 auto;
	display: inline-flex; align-items: center; gap: 6px;
	padding: 10px 12px;
	border-radius: 999px;
	color: var(--gg-white, #FFFFFF);
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: var(--gg-text-xs, 12px);
	font-weight: 600;
	transition: background 200ms ease;
}
.gg-blgd__mobile-bar-btn:hover, .gg-blgd__mobile-bar-btn:active{ background: rgba(255,255,255,.08); }
.gg-blgd__mobile-bar-btn i{ font-size: 16px; color: var(--gg-red, #ED2938); position: relative; }
.gg-blgd__mobile-bar-btn .bi-bookmark-fill{ position: absolute; opacity: 0; }
.gg-blgd__mobile-bar-btn[aria-pressed="true"] .bi-bookmark{ opacity: 0; }
.gg-blgd__mobile-bar-btn[aria-pressed="true"] .bi-bookmark-fill{ opacity: 1; }
.gg-blgd__mobile-bar-cta{
	margin-left: auto;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 11px 18px;
	border-radius: 999px;
	background: var(--gg-red, #ED2938);
	color: var(--gg-white, #FFFFFF);
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: var(--gg-text-sm, 13px);
	font-weight: 700;
	box-shadow: 0 4px 14px rgba(237,41,56,.42);
}
.gg-blgd__mobile-bar-cta:hover{ background: var(--gg-red-deep, #B91C28); }

/* Padding-bottom for blog-detail lives further down — single source. */

/* Author bio responsive */
@media (max-width: 600px){
	.gg-blgd__bio{
		grid-template-columns: 1fr;
		text-align: center;
	}
	.gg-blgd__bio-img{ margin: 0 auto; }
	.gg-blgd__bio-actions{ justify-content: center; }
	.gg-blgd__bio-social{ margin-left: 0; }
}

/* Comment form responsive */
@media (max-width: 480px){
	.gg-blgd__comment-form{ grid-template-columns: 1fr; }
	.gg-blgd__comment-form-avatar{ width: 36px; height: 36px; }
	.gg-blgd__comment{ grid-template-columns: 1fr; }
	.gg-blgd__comment-avatar{ width: 36px !important; height: 36px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE APP-LIKE POLISH
   Tighter spacing, edge-to-edge media, scrollable tables, refined
   floating bar (5 actions), and the comments bottom-sheet drawer.
   These rules cover writer-uploaded WYSIWYG content (no custom classes
   in the body — JS marks up image-paragraphs and wraps tables on load).
   ═══════════════════════════════════════════════════════════════════════ */

/* — Image-only paragraphs become media blocks (JS adds .gg-blgd__img-block) — */
.gg-blgd__article p.gg-blgd__img-block{
	margin: 24px 0;
	text-align: center;
	line-height: 0;
}
.gg-blgd__article p.gg-blgd__img-block img{
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto !important;
	margin: 0 auto;
	border-radius: var(--gg-r-lg, 12px);
	box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -10px rgba(0,0,0,.16);
}

/* — Table scroll wrapper (JS-injected around every <table>) — */
.gg-blgd__table-wrap{
	margin: 24px 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: rgba(237,41,56,.35) transparent;
	-ms-overflow-style: -ms-autohiding-scrollbar;
}
.gg-blgd__table-wrap::-webkit-scrollbar{ height: 6px; }
.gg-blgd__table-wrap::-webkit-scrollbar-thumb{ background: rgba(237,41,56,.35); border-radius: 999px; }
.gg-blgd__article .gg-blgd__table-wrap > table{
	margin: 0;
	width: 100%;
	min-width: 100%;
}

/* ── ≤700px: app-like compaction ────────────────────────────────────── */
@media (max-width: 700px){
	/* Edge-to-edge media — break out of the 16px page padding */
	.gg-blgd__article p.gg-blgd__img-block{
		margin-left: -16px;
		margin-right: -16px;
		width: calc(100% + 32px);
	}
	.gg-blgd__article p.gg-blgd__img-block img{
		border-radius: 0;
		box-shadow: none;
	}

	/* Tables: edge-to-edge scroll viewport, force horizontal scroll */
	.gg-blgd__table-wrap{
		margin-left: -16px;
		margin-right: -16px;
		padding: 0 16px 4px;
	}
	.gg-blgd__article .gg-blgd__table-wrap > table{
		min-width: 560px;
		border-radius: var(--gg-r-md, 10px);
	}

	/* Tighter prose, slightly larger reading size */
	.gg-blgd__article{ font-size: 15.5px; }
	.gg-blgd__article p{ line-height: 1.65; margin-bottom: 14px; }
	.gg-blgd__article ul:not(.gg-blgd__list),
	.gg-blgd__article ol:not(.gg-blgd__list){ padding-left: 22px; }
	.gg-blgd__article ul:not(.gg-blgd__list) > li,
	.gg-blgd__article ol:not(.gg-blgd__list) > li{ line-height: 1.6; margin: 4px 0; }
	.gg-blgd__article h2{ scroll-margin-top: 80px; }
	.gg-blgd__article h3{ margin-top: 24px; scroll-margin-top: 80px; }
	.gg-blgd__article h4{ margin-top: 18px; }
	.gg-blgd__article blockquote:not(.gg-blgd__quote){
		margin-left: -4px; margin-right: -4px;
		padding: 14px 16px;
	}
}

/* ── ≤600px: hero compaction + section spacing ─────────────────────── */
@media (max-width: 600px){
	.gg-blgd__hero{
		padding: 14px;
		gap: 14px;
		border-radius: var(--gg-r-lg, 12px);
		margin-bottom: 22px;
	}
	.gg-blgd__hero-media{ min-height: 0; aspect-ratio: 16 / 9; border-radius: var(--gg-r-md, 10px); overflow: hidden; }
	.gg-blgd__hero-img{ border-radius: var(--gg-r-md, 10px); }
	.gg-blgd__hero-glow{ display: none; }
	.gg-blgd__hero-title{ font-size: clamp(1.5rem, 6.4vw, 2rem); line-height: 1.15; }
	.gg-blgd__hero-dek{ font-size: 14px; line-height: 1.5; -webkit-line-clamp: 4; }
	.gg-blgd__hero-meta{ gap: 10px; flex-wrap: wrap; }
	.gg-blgd__hero-stats{ gap: 8px 12px; font-size: 11.5px; }
	.gg-blgd__author-chip{ padding: 5px 10px; gap: 8px; }
	.gg-blgd__author-chip-img{ width: 30px; height: 30px; }
	.gg-blgd__author-chip-name{ font-size: 12px; }
	.gg-blgd__author-chip-role{ font-size: 10px; }
	.gg-blgd__hero-cat{ font-size: 10px; padding: 4px 10px; }
	.gg-blgd__hero-actions{ gap: 6px; }
	.gg-blgd__hero-badge{ display: none; }

	.gg-blg__body{ gap: 0; }
	.gg-blgd__neighbours{ gap: 8px; grid-template-columns: 1fr; }
	.gg-blgd__bio{ padding: 18px; gap: 16px; }
	.gg-blgd__related{ margin-top: 32px; }
	.gg-blgd__related-grid{ grid-template-columns: 1fr; gap: 14px; }
	.gg-blgd__cta{ padding: 22px; }
	.gg-blgd__cta-title{ font-size: 1.25rem !important; }

	/* Breadcrumbs: keep one line */
	.gg-blg__crumbs-list{ flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.gg-blg__crumbs-list li{ flex-shrink: 0; }

	.gg-blgd__tags{ gap: 6px; }
	.gg-blgd__tag{ font-size: 11px; padding: 4px 10px; }
}

/* ── Mobile floating action bar — 4 equal-width icon+label buttons ── */
@media (max-width: 900px){
	.gg-blgd__mobile-bar{
		padding: 6px;
		gap: 2px;
		justify-content: space-between;
	}
	.gg-blgd__mobile-bar-btn{
		flex: 1 1 0;
		min-width: 0;
		flex-direction: column;
		gap: 3px;
		padding: 9px 6px;
		justify-content: center;
	}
	.gg-blgd__mobile-bar-btn i{ font-size: 18px; }
	.gg-blgd__mobile-bar-btn span{
		font-size: 10.5px; line-height: 1; opacity: .82;
		font-weight: 600; letter-spacing: .02em;
	}
}
@media (max-width: 380px){
	.gg-blgd__mobile-bar{ left: 10px; right: 10px; padding: 5px; }
	.gg-blgd__mobile-bar-btn{ padding: 8px 4px; }
	.gg-blgd__mobile-bar-btn span{ font-size: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   COMMENTS — bottom-sheet drawer on mobile
   On desktop / tablet, the comments section renders inline normally.
   At ≤900px it becomes a fixed slide-up bottom sheet, opened from
   [data-blgd-open-comments] in the floating bar. The shared
   .gg-blg__aside-backdrop dims the page (same one the sidebar drawer
   uses; body classes drive which is open).
   ═══════════════════════════════════════════════════════════════════════ */
.gg-blgd__comments-grip{ display: none; }
.gg-blgd__comments-close{
	display: none;
	background: transparent; border: 0; cursor: pointer;
}

@media (max-width: 900px){
	/* Backdrop visibility — extend the existing rules to cover both drawers. */
	body.gg-blgd-comments-open .gg-blg__aside-backdrop{
		opacity: 1;
		pointer-events: auto;
	}
	body.gg-blgd-comments-open{ overflow: hidden; }

	/* Mirror of the Topics drawer pattern (blog.css line 1556) — !important
	   throughout because base .gg-blgd__comments has its own padding/margin
	   /background/shadow/border-radius that we have to override here. */
	.gg-blgd__comments[data-blgd-comments]{
		position: fixed !important;
		left: 0 !important; right: 0 !important;
		top: auto !important; bottom: 0 !important;
		width: auto !important;
		max-width: none !important;
		max-height: 88vh !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		background: var(--gg-white, #FFFFFF) !important;
		border-radius: 22px 22px 0 0 !important;
		box-shadow: 0 -24px 50px -12px rgba(0,0,0,.25) !important;
		transform: translate3d(0, 100%, 0) !important;
		transition: transform 360ms cubic-bezier(.16, 1, .3, 1) !important;
		will-change: transform;
		z-index: 9999 !important;
		overflow: hidden !important;
		overscroll-behavior: contain;
		padding-bottom: env(safe-area-inset-bottom, 0) !important;
		display: flex !important;
		flex-direction: column !important;
	}
	body.gg-blgd-comments-open .gg-blgd__comments[data-blgd-comments]{
		transform: translate3d(0, 0, 0) !important;
	}

	.gg-blgd__comments-grip{
		display: block;
		width: 44px; height: 4px;
		background: var(--gg-gray-300, #D1D5DB);
		border-radius: 999px;
		margin: 10px auto 4px;
		flex-shrink: 0;
		cursor: grab;
	}

	.gg-blgd__comments-head{
		display: flex; align-items: center; gap: 12px;
		padding: 8px 18px 14px;
		margin: 0;
		border-bottom: 1px solid var(--gg-gray-100, #F3F4F6);
		flex-shrink: 0;
	}
	.gg-blgd__comments-title{
		flex: 1;
		font-size: 1rem;
		margin: 0;
	}
	.gg-blgd__comments-sort{ display: none; }      /* hide on mobile drawer */
	.gg-blgd__comments-close{
		display: inline-flex; align-items: center; justify-content: center;
		width: 34px; height: 34px;
		border-radius: 50%;
		background: var(--gg-gray-50, #F9FAFB);
		color: var(--gg-gray-700, #374151);
		flex-shrink: 0;
		font-size: 14px;
	}
	.gg-blgd__comments-close:active{ background: var(--gg-gray-100, #F3F4F6); }

	.gg-blgd__comments-scroll{
		flex: 1; min-height: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 16px 16px calc(28px + env(safe-area-inset-bottom, 0));
		display: flex; flex-direction: column; gap: 14px;
	}
	.gg-blgd__comment-form{ margin: 0; }
	.gg-blgd__comments[data-blgd-comments] .gg-blgd__comment-list{ margin: 0; }
}

/* On desktop the scroll wrapper is just a transparent passthrough. */
@media (min-width: 901px){
	.gg-blgd__comments-scroll{ display: contents; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE PREMIUM CLEANUP
   Hides metadata noise, fixes double padding, simplifies breadcrumbs.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px){
	/* Page padding lives in blog.css — single source. Hero card sits flush
	   with that boundary instead of stacking its own pad. */
	.gg-blgd__hero{
		padding: 0;
		background: transparent;
		box-shadow: none;
		border-radius: 0;
		gap: 16px;
	}
	.gg-blgd__hero-glow{ display: none; }
	.gg-blgd__hero-inner{ gap: 12px; }

	/* Mobile hero meta — author chip on the LEFT, stats in a 2×2 grid on
	   the RIGHT (date / read time on row 1, views / comments on row 2).
	   Save + share live in the floating bar, so we hide them here. */
	.gg-blgd__hero-actions{ display: none; }
	.gg-blgd__hero-badge{ display: none; }

	.gg-blgd__hero-meta{
		display: grid !important;
		grid-template-columns: auto 1fr;
		align-items: center;
		gap: 14px;
		margin: 0;
	}
	.gg-blgd__author-chip{
		grid-column: 1;
		padding: 6px 10px 6px 6px;
	}
	.gg-blgd__hero-stats{
		grid-column: 2;
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: auto;
		gap: 6px 10px;
		list-style: none;
		margin: 0; padding: 0;
		font-size: 11.5px;
		color: var(--gg-gray-600, #4B5563);
		min-width: 0;
	}
	.gg-blgd__hero-stats li{
		display: inline-flex;
		align-items: center;
		gap: 5px;
		min-width: 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.gg-blgd__hero-stats li i{ font-size: 12px; flex-shrink: 0; }

	/* Breadcrumbs — single line, no scroll, hide the article-title crumb
	   (user already sees the title in the hero below). */
	.gg-blg__crumbs-list{
		flex-wrap: nowrap;
		overflow: hidden;
	}
	.gg-blg__crumbs-list > li:last-child{ display: none; }
	.gg-blg__crumbs-list > li:nth-last-child(2)::after{ content: none; }
}

/* Page padding for blog-detail follows blog.css (.gg-blg) — single source. */

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE FOLLOW-UPS
   • Hide the empty <span> placeholder in prev/next nav so a single card
     (first or last article) renders cleanly without a phantom row.
   • Related cards become a horizontal swipe carousel on mobile (3 cards
     scrolling like a native app).
   • Tighter padding-bottom on .gg-blgd so the gap between the bottom CTA
     and the footer feels right, not cavernous.
   ═══════════════════════════════════════════════════════════════════════ */

/* Empty placeholder shouldn't take grid space anywhere — clean for first/
   last articles where prev or next is null. */
.gg-blgd__neighbours > span:empty{ display: none; }

/* When only one neighbour exists, give it the full row */
@media (max-width: 600px){
	/* Newer + Older in a single row, side by side. Tightened so titles
	   line-clamp to 2 lines and don't blow out card height. */
	.gg-blgd__neighbours{
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		margin-top: 28px;
	}
	.gg-blgd__neighbour{ padding: 12px 14px; gap: 4px; min-width: 0; }
	.gg-blgd__neighbour-eyebrow{ font-size: 10.5px; }
	.gg-blgd__neighbour-title{
		font-size: 13px;
		line-height: 1.3;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

/* — Related articles: horizontal scroll carousel on mobile — */
@media (max-width: 700px){
	.gg-blgd__related{ margin-top: 28px; }
	.gg-blgd__related-head{
		/* Title left, "See all" link right — keep the desktop pattern. */
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: 12px;
		margin-bottom: 14px;
		padding: 0 2px;
	}
	.gg-blgd__related-title{ font-size: 1.25rem; }
	.gg-blgd__related-all{ font-size: 12px; align-self: center; white-space: nowrap; }

	.gg-blgd__related-grid{
		display: flex !important;
		flex-wrap: nowrap;
		grid-template-columns: none !important;
		overflow-x: auto;
		overflow-y: hidden;
		gap: 12px;
		padding: 4px 0 14px;
		/* First card aligns with the section heading (page padding boundary).
		   Right edge extends past page padding so the next card peeks in,
		   inviting the swipe. */
		margin: 0 -14px 0 0;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.gg-blgd__related-grid::-webkit-scrollbar{ display: none; }

	.gg-blgd__related-card{
		flex: 0 0 78%;
		max-width: 320px;
		min-width: 0;
		scroll-snap-align: start;
	}
	.gg-blgd__related-card-media{ aspect-ratio: 16 / 9; }
	.gg-blgd__related-card-title{ font-size: 1rem; line-height: 1.3; }
	.gg-blgd__related-card-excerpt{
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: 13px;
	}
	.gg-blgd__related-card-foot{
		gap: 10px;
		font-size: 11px;
	}
}

/* — Bottom CTA → footer gap: minimal. The floating bar floats over the
     bottom edge of the CTA when scrolled to the very end — that's the
     trade-off for not having a big void above the footer. — */
@media (max-width: 900px){
	.gg-blgd{ padding-bottom: calc(12px + env(safe-area-inset-bottom, 0)) !important; }
}
@media (max-width: 768px){
	/* Just clear the site's mobile bottom nav (60px) plus a hair. */
	.gg-blgd{ padding-bottom: calc(60px + 12px + env(safe-area-inset-bottom, 0)) !important; }
}

/* — Final image / section sizing polish on mobile — */
@media (max-width: 600px){
	.gg-blgd__cta{ margin-top: 28px; padding: 18px; gap: 14px; }
	/* "Find a pro" + "Back to all articles" — single row, equal width */
	.gg-blgd__cta-actions{
		flex-direction: row;
		gap: 8px;
		flex-wrap: nowrap;
	}
	.gg-blgd__cta-primary,
	.gg-blgd__cta-secondary{
		flex: 1 1 0;
		min-width: 0;
		justify-content: center;
		padding: 11px 10px;
		font-size: 12.5px;
		gap: 4px;
		text-align: center;
		white-space: nowrap;
	}
	.gg-blgd__cta-secondary{ font-size: 12px; }   /* longer label, slightly smaller */
	.gg-blgd__cta-sub{ font-size: 13.5px; line-height: 1.5; }

	/* Author bio compaction */
	.gg-blgd__bio{ padding: 16px; gap: 14px; margin-top: 28px; }
	.gg-blgd__bio-img{ width: 64px; height: 64px; }
	.gg-blgd__bio-name{ font-size: 1.05rem; }
	.gg-blgd__bio-text{ font-size: 13.5px; line-height: 1.5; }
}

/* ═════════════════════════════════════════════════════════════════════
   FAQ + Comments sections — both sit below the article body.
   FAQ is a stack of <details>; Comments is a stack of cards plus a form.
   Both use site-token colors (--gg-red etc.) so they stay on-brand.
   ═════════════════════════════════════════════════════════════════════ */

.gg-blgd__faq{
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--gg-gray-200, #E5E7EB);
}
.gg-blgd__faq > h2{
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-weight: 700;
	font-size: 1.5rem;
	color: var(--gg-black, #0A0A0A);
	margin: 0 0 16px;
}
.gg-blgd__faq-item{
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	border-radius: 12px;
	background: var(--gg-white, #fff);
	margin-bottom: 10px;
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.gg-blgd__faq-item[open]{
	border-color: rgba(237,41,56,.22);
	box-shadow: 0 4px 14px rgba(17,24,39,.06);
}
.gg-blgd__faq-item > summary{
	cursor: pointer;
	padding: 14px 18px;
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-weight: 600;
	font-size: 1rem;
	color: var(--gg-gray-900, #111827);
	list-style: none;
	position: relative;
	padding-right: 44px;
}
.gg-blgd__faq-item > summary::-webkit-details-marker{ display: none; }
.gg-blgd__faq-item > summary::after{
	content: '+';
	position: absolute;
	right: 16px; top: 50%;
	transform: translateY(-50%);
	width: 22px; height: 22px;
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-weight: 700; font-size: 1rem;
	color: var(--gg-red, #ED2938);
	border: 1px solid currentColor;
	border-radius: 6px;
	transition: transform .15s ease;
}
.gg-blgd__faq-item[open] > summary::after{ content: '−'; }
.gg-blgd__faq-answer{
	padding: 0 18px 16px;
	color: var(--gg-gray-700, #374151);
	line-height: 1.62;
	font-size: .95rem;
}

/* ─── Comments ─── */
.gg-blgd__comments{
	margin-top: 48px;
	padding-top: 28px;
	border-top: 1px solid var(--gg-gray-200, #E5E7EB);
}
.gg-blgd__comments > h2{
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-weight: 700;
	font-size: 1.5rem;
	color: var(--gg-black, #0A0A0A);
	margin: 0 0 6px;
	display: flex; align-items: baseline; gap: 8px;
}
.gg-blgd__comments-count{
	font-size: 1rem;
	font-weight: 500;
	color: var(--gg-gray-500, #6B7280);
}
.gg-blgd__comments-notice{
	margin: 12px 0 18px;
	padding: 10px 14px;
	background: rgba(22,163,74,.08);
	border: 1px solid rgba(22,163,74,.25);
	border-radius: 10px;
	color: #15803D;
	font-size: .9rem;
}
.gg-blgd__comments-empty{
	margin: 16px 0 24px;
	color: var(--gg-gray-500, #6B7280);
	font-style: italic;
}
.gg-blgd__comments-list{
	list-style: none;
	margin: 18px 0 12px;
	padding: 0;
}
.gg-blgd__comment{
	display: flex;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px dashed var(--gg-gray-200, #E5E7EB);
}
.gg-blgd__comment.is-hidden{ display: none; }
.gg-blgd__comment-avatar{
	width: 44px; height: 44px;
	border-radius: 50%;
	flex-shrink: 0;
	object-fit: cover;
	background: var(--gg-gray-100, #F3F4F6);
}
.gg-blgd__comment-body{ flex: 1; min-width: 0; }
.gg-blgd__comment-head{
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 4px;
}
.gg-blgd__comment-name{
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-weight: 700;
	color: var(--gg-black, #0A0A0A);
	font-size: .95rem;
}
.gg-blgd__comment-time{
	font-size: .78rem;
	color: var(--gg-gray-500, #6B7280);
}
.gg-blgd__comment-text{
	color: var(--gg-gray-800, #1F2937);
	line-height: 1.6;
	font-size: .92rem;
	margin: 0;
	word-wrap: break-word;
}
.gg-blgd__comments-more{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 18px;
	margin: 8px 0 24px;
	border: 1px solid var(--gg-gray-300, #D1D5DB);
	background: var(--gg-white, #fff);
	color: var(--gg-gray-700, #374151);
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-weight: 600;
	font-size: .85rem;
	border-radius: 999px;
	cursor: pointer;
	transition: all .15s ease;
}
.gg-blgd__comments-more:hover{
	border-color: rgba(237,41,56,.4);
	background: rgba(237,41,56,.06);
	color: var(--gg-red, #ED2938);
}
.gg-blgd__comments-more-count{
	color: var(--gg-gray-500, #6B7280);
	font-weight: 500;
}

/* ─── Comment submit form ─── */
.gg-blgd__comment-form{
	margin-top: 28px;
	padding: 20px 22px;
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	border-radius: 14px;
	background: var(--gg-gray-50, #F9FAFB);
}
.gg-blgd__comment-form > h3{
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--gg-black, #0A0A0A);
	margin: 0 0 14px;
}
.gg-blgd__comment-form-row{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 10px;
}
@media (max-width: 575px){
	.gg-blgd__comment-form-row{ grid-template-columns: 1fr; }
}
.gg-blgd__comment-input,
.gg-blgd__comment-textarea{
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--gg-gray-300, #D1D5DB);
	border-radius: 8px;
	background: var(--gg-white, #fff);
	font-family: var(--gg-font-body, 'Figtree', sans-serif);
	font-size: .92rem;
	color: var(--gg-gray-900, #111827);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.gg-blgd__comment-input:focus,
.gg-blgd__comment-textarea:focus{
	outline: none;
	border-color: var(--gg-red, #ED2938);
	box-shadow: 0 0 0 3px rgba(237,41,56,.07);
}
.gg-blgd__comment-textarea{ resize: vertical; min-height: 100px; }
.gg-blgd__comment-submit{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 22px;
	margin-top: 10px;
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	color: var(--gg-white, #fff);
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-weight: 700;
	font-size: .9rem;
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(237,41,56,.25);
	transition: transform .12s ease, box-shadow .12s ease;
}
.gg-blgd__comment-submit:hover{ transform: translateY(-1px); box-shadow: 0 4px 12px rgba(237,41,56,.32); }
.gg-blgd__comment-disclaimer{
	margin: 10px 0 0;
	color: var(--gg-gray-500, #6B7280);
	font-size: .78rem;
}

/* ═════════════════════════════════════════════════════════════════════
   GG no-image fallbacks — detail page edition.
   Mirrors the avatar look from /css/blog.css so the hero author chip,
   bio card, comment avatars, related-card thumb and hero media all
   share a single visual treatment when their underlying record has
   no uploaded image yet.
   ═════════════════════════════════════════════════════════════════════ */

/* Generic circular avatar fallback (hero chip, comment avatar). */
.gg-blgd__noimage-avatar{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--gg-gray-100, #F3F4F6);
	border-radius: 999px;
	overflow: hidden;
}
.gg-blgd__noimage-avatar img{
	width: 58%; height: 58%;
	opacity: .45;
	filter: grayscale(1);
}
/* 72px size variant — used on the "log in to comment" form prompt. */
.gg-blgd__noimage-avatar--72{
	width: 44px; height: 44px;
	flex: 0 0 44px;
}
/* Large bio-card variant — keeps the existing .gg-blgd__bio-img footprint. */
.gg-blgd__noimage-avatar--lg img{
	width: 50%; height: 50%;
}

/* Article hero media fallback (16:9 frame). */
.gg-blgd__hero-media--noimage{
	background:
		repeating-linear-gradient(45deg, var(--gg-gray-50, #F9FAFB) 0 16px, var(--gg-gray-100, #F3F4F6) 16px 32px);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--gg-r-lg, 14px);
}
.gg-blgd__hero-noimage{
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.gg-blgd__hero-noimage img{
	width: 96px; height: 96px;
	opacity: .35;
	filter: grayscale(1);
}

/* Related-card thumb fallback (3-up grid). */
.gg-blgd__related-card-media--noimage{
	background:
		repeating-linear-gradient(45deg, var(--gg-gray-50, #F9FAFB) 0 12px, var(--gg-gray-100, #F3F4F6) 12px 24px);
	display: flex;
	align-items: center;
	justify-content: center;
}
.gg-blgd__related-card-noimage{
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.gg-blgd__related-card-noimage img{
	width: 56px; height: 56px;
	opacity: .4;
	filter: grayscale(1);
}