/* ═══════════════════════════════════════════
   BLOG.CSS — Premium two-column listing
   • Heading lives INSIDE the main column (not above the grid)
   • Featured spotlight card on page 1 (Editor's Pick)
   • Author block + view + comment counts on every post
   • Sort dropdown · Trending widget · Newsletter widget
   • Skeleton shimmer for AJAX Load More
   • Sidebar uses canvas plugin `.sticky-sidebar-wrap` / `.sticky-sidebar`
   • Mobile: sidebar becomes a bottom-sheet drawer
   • LAZY-IMG FIX (line ~290) for the canvas template's `img.lazy{height:auto}` rule
   ═══════════════════════════════════════════ */

.gg-blg-body{ background: var(--gg-off-white, #FAFAFA); }
.gg-blg-body::before{
	content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
	background:
		radial-gradient(ellipse at 12% 8%,  rgba(237,41,56,.05) 0%, transparent 55%),
		radial-gradient(ellipse at 88% 92%, rgba(237,41,56,.04) 0%, transparent 55%);
}

/* No max-width per global rule (--gg-max-w: auto). No z-index here — would
   trap drawer below mobile nav. */
.gg-blg{
	width: 100%;
	/* Padding matches the rest of the site: 28px sides on desktop / 14px
	   on mobile, modest top + bottom (no big bottom gap before the footer). */
	padding: 24px 28px 32px;
}
@media (max-width: 700px){
	.gg-blg{ padding: 18px 14px 24px; }
}

/* ═════════════ Top breadcrumb (full width) ═════════════ */
.gg-blg > .gg-blg__crumbs{ margin-bottom: clamp(16px, 2vw, 24px); }
@media (max-width: 700px){
	.gg-blg > .gg-blg__crumbs{ margin-bottom: 8px; }
}
.gg-blg__crumbs-list{
	list-style: none;
	display: flex; flex-wrap: wrap; gap: 8px;
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-xs, 12px);
	color: var(--gg-gray-500, #6B7280);
	letter-spacing: .02em;
}
.gg-blg__crumbs-list li{ display: flex; align-items: center; gap: 8px; }
.gg-blg__crumbs-list li + li::before{ content: "/"; color: var(--gg-gray-300, #D1D5DB); }
.gg-blg__crumbs-list a{ color: var(--gg-gray-600, #4B5563); transition: color 200ms ease; }
.gg-blg__crumbs-list a:hover{ color: var(--gg-red, #ED2938); }
.gg-blg__crumbs-list [aria-current="page"]{ color: var(--gg-gray-800, #1F2937); font-weight: 600; }

/* ═════════════ Two-column body ═════════════ */
.gg-blg__body{
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: clamp(24px, 3vw, 40px);
	align-items: start;
}
@media (min-width: 1280px){
	.gg-blg__body{ grid-template-columns: minmax(0, 1fr) 360px; }
}

/* No standalone filter trigger — single source of truth lives inside
   `.gg-blg__actions` (toolbar). On mobile the whole actions group lifts
   out of the toolbar and floats as a pill bar at the bottom of the viewport. */

/* ═════════════ MAIN column ═════════════ */
.gg-blg__main{ min-width: 0; }

/* ── Compact heading inside main column — capped at ~18vh ── */
.gg-blg__header{
	position: relative;
	margin-bottom: clamp(16px, 2vw, 22px);
	padding: clamp(14px, 1.8vw, 22px) clamp(16px, 2vw, 26px);
	background:
		radial-gradient(ellipse at top left, rgba(237,41,56,.07) 0%, transparent 55%),
		radial-gradient(ellipse at bottom right, rgba(237,41,56,.04) 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 4px 14px rgba(237,41,56,.05);
	overflow: hidden;
}
.gg-blg__head-glow{
	position: absolute;
	right: -50px; top: -50px;
	width: 200px; height: 200px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(237,41,56,.18) 0%, transparent 60%);
	filter: blur(20px);
	pointer-events: none;
}
.gg-blg__head-inner{
	position: relative;
	display: flex; flex-direction: column;
	gap: 4px;            /* tighter — was 8px */
	max-width: 720px;
}

.gg-blg__eyebrow{
	display: inline-flex; align-items: center; gap: var(--gg-sp-3, 12px);
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: var(--gg-text-xs, 12px); font-weight: 700;
	color: var(--gg-red, #ED2938) !important;
	letter-spacing: .16em; text-transform: uppercase;
}
.gg-blg__eyebrow::before{
	content: "";
	width: 24px; height: 2px;
	background: var(--gg-red, #ED2938);
	border-radius: 2px;
}

.gg-blg__title{
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: clamp(1.25rem, 2vw, 1.625rem);     /* tighter — was up to 1.75rem */
	font-weight: 700;
	color: var(--gg-black, #0A0A0A) !important;
	line-height: 1.15; letter-spacing: -.02em;
	margin-top: 2px;
}
.gg-blg__title-accent{ color: var(--gg-red, #ED2938) !important; }

.gg-blg__sub{
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-xs, 12px);
	color: var(--gg-gray-600, #4B5563);
	line-height: 1.5;
	margin-top: 2px;
	max-width: 620px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ─── Inline stats strip — single horizontal row, mirrors home Live Count ─── */
.gg-blg__head-stats{
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
	margin: 8px 0 0;
	padding: 10px 0 0;
	border-top: 1px dashed var(--gg-gray-200, #E5E7EB);
}
.gg-blg__stat{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	transition: transform 240ms ease;
}
.gg-blg__stat:hover{ transform: translateY(-1px); }
.gg-blg__stat-icon{
	flex-shrink: 0;
	display: inline-grid;
	place-items: center;
	width: 28px; height: 28px;
	border-radius: var(--gg-r-md, 8px);
	background: var(--gg-red-light, #FFF1F2);
	color: var(--gg-red, #ED2938);
	font-size: 14px;
	transition: all 280ms cubic-bezier(.22,1,.36,1);
}
.gg-blg__stat:hover .gg-blg__stat-icon{
	background: var(--gg-red, #ED2938);
	color: var(--gg-white, #FFFFFF);
	transform: rotate(-4deg) scale(1.05);
}
.gg-blg__stat-num{
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: var(--gg-text-md, 16px);
	font-weight: 800;
	color: var(--gg-black, #0A0A0A);
	letter-spacing: -.02em;
	line-height: 1.1;
	display: inline-flex;
	align-items: baseline;
	gap: 1px;
}
.gg-blg__stat-suffix{
	color: var(--gg-red, #ED2938);
	font-weight: 700;
	font-size: .7em;
}
.gg-blg__stat-label{
	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);
	letter-spacing: .02em;
}

/* ── Active filter chips ── */
.gg-blg__chips{
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	padding: 12px 16px; margin-bottom: 16px;
	border-radius: 14px;
	background: var(--gg-white, #FFFFFF);
	border: 1px solid var(--gg-gray-200, #E5E7EB);
}
.gg-blg__chips-label{
	font-size: var(--gg-text-xs, 12px); color: var(--gg-gray-500, #6B7280);
	font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
	margin-right: 4px;
}
.gg-blg__chip{
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 8px 5px 12px;
	border-radius: 999px;
	background: var(--gg-red-subtle, rgba(237,41,56,.07));
	color: var(--gg-red-deep, #B91C28);
	font-size: var(--gg-text-xs, 12px); font-weight: 600;
	transition: background 200ms ease;
}
.gg-blg__chip i{
	width: 18px; height: 18px; border-radius: 50%;
	display: grid; place-items: center;
	background: rgba(185,28,40,.15); font-size: 11px;
}
.gg-blg__chip:hover{ background: var(--gg-red, #ED2938); color: var(--gg-white, #FFFFFF); }
.gg-blg__chip:hover i{ background: rgba(255,255,255,.25); }
.gg-blg__chip-clear{
	margin-left: auto; padding: 5px 10px; border-radius: 999px;
	font-size: var(--gg-text-xs, 12px); font-weight: 600;
	color: var(--gg-gray-600, #4B5563);
	transition: color 200ms ease;
}
.gg-blg__chip-clear:hover{ color: var(--gg-red, #ED2938); }

/* ── Toolbar — count + actions group ── */
.gg-blg__toolbar{
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; flex-wrap: wrap;
	margin-bottom: clamp(16px, 2vw, 22px);
}
.gg-blg__count{ font-size: var(--gg-text-sm, 13px); color: var(--gg-gray-600, #4B5563); }
.gg-blg__count strong{ color: var(--gg-black, #0A0A0A); font-weight: 700; }

/* ─── Single source of truth: filter btn + sort dropdown ─── */
.gg-blg__actions{
	position: relative;
	display: inline-flex; align-items: stretch; gap: 0;
	background: var(--gg-white, #FFFFFF);
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	border-radius: 999px;
	padding: 4px;
	transition: opacity 200ms ease;
}
/* Separator only visible on mobile (where both filter + sort buttons exist).
   On desktop the filter button is hidden, so the separator would orphan. */
.gg-blg__actions-sep{
	display: none;
	width: 1px;
	background: var(--gg-gray-200, #E5E7EB);
	margin: 6px 2px;
}

/* Hide the floating action bar when the site's profile dropdown or side
   menu opens — those overlays sit at root z but are bound to the header's
   sticky stacking context (z:200), which my bar at z:499 happens to paint
   over. JS toggles `body.gg-blg-hide-bar` via MutationObserver. */
body.gg-blg-hide-bar .gg-blg__actions{
	opacity: 0;
	pointer-events: none;
	transform: translate(var(--gg-blg-bar-tx, 0), 8px);
}

/* Filter button (hidden on desktop — sidebar already visible) */
.gg-blg__filter-btn{
	display: none;
	align-items: center; gap: 8px;
	padding: 8px 16px;
	border-radius: 999px;
	background: transparent;
	color: var(--gg-gray-800, #1F2937);
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: var(--gg-text-sm, 13px); font-weight: 600;
	letter-spacing: .02em;
	transition: background 200ms ease, color 200ms ease;
}
.gg-blg__filter-btn i{ font-size: 14px; color: var(--gg-red, #ED2938); }
.gg-blg__filter-btn:hover{ background: var(--gg-gray-100, #F3F4F6); }
.gg-blg__filter-btn-count{
	display: inline-grid; place-items: center;
	min-width: 20px; height: 20px;
	border-radius: 999px;
	background: var(--gg-red, #ED2938); color: var(--gg-white, #FFFFFF);
	font-size: 10px; font-weight: 800; padding: 0 6px;
}

/* Sort */
.gg-blg__sort{ position: relative; display: inline-flex; align-items: center; }
.gg-blg__sort-btn{
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 16px;
	border-radius: 999px;
	background: transparent;
	color: var(--gg-gray-800, #1F2937);
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: var(--gg-text-sm, 13px); font-weight: 600;
	letter-spacing: .02em;
	transition: background 200ms ease;
}
.gg-blg__sort-btn:hover, .gg-blg__sort.is-open .gg-blg__sort-btn{ background: var(--gg-gray-100, #F3F4F6); }
.gg-blg__sort-btn-ico{ font-size: 14px; color: var(--gg-red, #ED2938); }
.gg-blg__sort-btn-chev{ font-size: 11px; color: var(--gg-gray-400, #9CA3AF); transition: transform 240ms ease; }
.gg-blg__sort.is-open .gg-blg__sort-btn-chev{ transform: rotate(180deg); }

/* Sort menu — desktop: small dropdown popup */
.gg-blg__sort-menu{
	position: absolute;
	top: calc(100% + 8px); right: 0;
	min-width: 220px;
	background: var(--gg-white, #FFFFFF);
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	border-radius: 14px;
	box-shadow: 0 14px 32px -10px rgba(0,0,0,.16);
	padding: 6px;
	opacity: 0; visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 220ms cubic-bezier(.22,1,.36,1),
	            transform 220ms cubic-bezier(.22,1,.36,1),
	            visibility 220ms;
	z-index: 50;
}
.gg-blg__sort.is-open .gg-blg__sort-menu{ opacity: 1; visibility: visible; transform: translateY(0); }
.gg-blg__sort-menu-bar{ display: none; }
.gg-blg__sort-menu-list{ list-style: none; }
.gg-blg__sort-menu-item{
	display: flex; align-items: center; gap: 10px;
	padding: 10px 12px;
	border-radius: 10px;
	font-size: var(--gg-text-sm, 13px);
	font-weight: 500;
	color: var(--gg-gray-700, #374151);
	transition: background 180ms ease, color 180ms ease;
}
.gg-blg__sort-menu-item:hover{ background: var(--gg-gray-100, #F3F4F6); color: var(--gg-black, #0A0A0A); }
.gg-blg__sort-menu-ico{
	width: 20px; height: 20px;
	display: grid; place-items: center;
	font-size: 12px;
	color: var(--gg-gray-500, #6B7280);
}
.gg-blg__sort-menu-item > span{ flex: 1; }
.gg-blg__sort-menu-check{
	color: var(--gg-red, #ED2938);
	font-size: 14px;
	opacity: 0;
}
.gg-blg__sort-menu-item.is-active{
	background: var(--gg-red-subtle, rgba(237,41,56,.07));
	color: var(--gg-red-deep, #B91C28);
	font-weight: 700;
}
.gg-blg__sort-menu-item.is-active .gg-blg__sort-menu-ico{ color: var(--gg-red, #ED2938); }
.gg-blg__sort-menu-item.is-active .gg-blg__sort-menu-check{ opacity: 1; }

/* ═════════════ FEATURED SPOTLIGHT CARD ═════════════ */
.gg-blg__feature{
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(16px, 1.6vw, 22px);
	align-items: center;            /* vertical-center the image when body is taller */
	padding: 22px;
	margin-bottom: clamp(24px, 3vw, 36px);
	border-radius: var(--gg-r-xl, 16px);
	overflow: hidden;
	background:
		radial-gradient(ellipse at top left, rgba(237,41,56,.06) 0%, transparent 60%),
		var(--gg-white, #FFFFFF);
	box-shadow:
		0 1px 2px rgba(237,41,56,.04),
		0 12px 28px rgba(237,41,56,.08);
	transition: transform 700ms cubic-bezier(.22, 1, .36, 1),
	            box-shadow  700ms cubic-bezier(.22, 1, .36, 1);
}
.gg-blg__feature:hover{
	transform: translateY(-5px);
	box-shadow:
		0 2px 4px rgba(237,41,56,.06),
		0 24px 48px rgba(237,41,56,.16);
}
.gg-blg__feature-media{
	position: relative;
	display: block;
	align-self: center;         /* image sits in middle of its column — equal gap top + bottom */
	width: 100%;
	aspect-ratio: 16 / 9;       /* lock the frame to the source aspect, no whitespace */
	min-height: 0;
	overflow: hidden;
	border-radius: var(--gg-r-lg, 14px);
	background: var(--gg-gray-100, #F3F4F6);
}
.gg-blg__feature-img{
	position: absolute; inset: 0;
	width: 100%; height: 100% !important;
	object-fit: contain;        /* uploads are 1920×1080 — keep the whole frame visible, no crop */
	object-position: center;
	background: var(--gg-gray-100, #F3F4F6);
}
.gg-blg__feature-badge{
	position: absolute; top: 16px; left: 16px;
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 12px;
	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: .1em; text-transform: uppercase;
	box-shadow: 0 6px 16px rgba(237,41,56,.4);
}
.gg-blg__feature-badge i{ font-size: 11px; }

.gg-blg__feature-body{
	display: flex; flex-direction: column;
	padding: clamp(6px, .6vw, 10px) clamp(6px, .8vw, 12px);
	gap: 12px;
}
.gg-blg__feature-cat{
	display: inline-flex; align-self: flex-start; align-items: center;
	padding: 5px 12px;
	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: .08em; text-transform: uppercase;
	transition: background 200ms ease, color 200ms ease;
}
.gg-blg__feature-cat:hover{ background: var(--gg-red, #ED2938); color: var(--gg-white, #FFFFFF); }

.gg-blg__feature-title{
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-weight: 700;
	font-size: clamp(1.5rem, 2.2vw, 2rem);
	line-height: 1.15;
	color: var(--gg-black, #0A0A0A);
	letter-spacing: -.02em;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.gg-blg__feature-title a{
	color: inherit;
	background-image: linear-gradient(var(--gg-red, #ED2938), var(--gg-red, #ED2938));
	background-position: 0 100%; background-repeat: no-repeat;
	background-size: 0 1.5px;
	transition: background-size 320ms ease, color 240ms ease;
}
.gg-blg__feature:hover .gg-blg__feature-title a{
	background-size: 100% 1.5px;
	color: var(--gg-red-deep, #B91C28);
}
.gg-blg__feature-excerpt{
	font-size: var(--gg-text-base, 15px);
	line-height: 1.6;
	color: var(--gg-gray-600, #4B5563);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.gg-blg__feature-footer{
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; flex-wrap: wrap;
	margin-top: auto;
	padding-top: 12px;
}
.gg-blg__feature-author{ display: flex; align-items: center; gap: 12px; min-width: 0; }
.gg-blg__feature-author-img{
	width: 44px !important; height: 44px !important;
	border-radius: 50%; object-fit: cover;
	flex-shrink: 0;
	background: var(--gg-gray-100, #F3F4F6);
	box-shadow: 0 0 0 3px var(--gg-white, #FFF), 0 0 0 4px var(--gg-red-subtle, rgba(237,41,56,.15));
}
.gg-blg__feature-author > div{ display: flex; flex-direction: column; min-width: 0; }
.gg-blg__feature-author-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-blg__feature-author-meta{
	font-size: var(--gg-text-xs, 12px);
	color: var(--gg-gray-500, #6B7280);
}
.gg-blg__feature-cta{
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 18px;
	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 240ms ease, gap 240ms ease;
}
.gg-blg__feature-cta:hover{ background: var(--gg-red, #ED2938); gap: 12px; }
.gg-blg__feature-cta i{ font-size: 14px; }

.gg-blg__feature-stats{
	display: flex; gap: 14px;
	margin-top: 4px;
	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-blg__feature-stats span{ display: inline-flex; align-items: center; gap: 5px; }
.gg-blg__feature-stats i{ color: var(--gg-gray-400, #9CA3AF); }

/* ── Section divider between feature and list ── */
.gg-blg__section-divider{
	display: flex; align-items: center; gap: 14px;
	margin: clamp(20px, 2.4vw, 28px) 0 clamp(16px, 2vw, 20px);
}
.gg-blg__section-divider::before,
.gg-blg__section-divider::after{
	content: "";
	flex: 1;
	height: 1px;
	background: var(--gg-gray-200, #E5E7EB);
}
.gg-blg__section-divider-label{
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: var(--gg-text-xs, 12px);
	font-weight: 700;
	color: var(--gg-gray-700, #374151);
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* ═════════════ POST CARDS (minimalist, soft red ambient) ═════════════ */

/* LAZY-IMG FIX — canvas template's `img.lazy{height:auto}` (style.css:16133)
   would override our object-fit container heights. Force 100% on ours. */
.gg-blg .gg-blg__post-img,
.gg-blg .gg-blg__post-img.lazy,
.gg-blg .gg-blg__post-img.lazy-loaded,
.gg-blg .gg-blg__feature-img,
.gg-blg .gg-blg__feature-img.lazy,
.gg-blg .gg-blg__feature-img.lazy-loaded{
	height: 100% !important;
}

.gg-blg__list{
	list-style: none;
	display: flex; flex-direction: column;
	gap: clamp(14px, 1.8vw, 20px);
}

.gg-blg__post{
	position: relative;
	display: grid;
	grid-template-columns: minmax(220px, 320px) 1fr;
	gap: clamp(16px, 2vw, 28px);
	padding: clamp(14px, 1.6vw, 20px);
	background:
		radial-gradient(ellipse at top left, rgba(237,41,56,.05) 0%, transparent 60%),
		radial-gradient(ellipse at bottom right, rgba(237,41,56,.04) 0%, transparent 60%),
		var(--gg-white, #FFFFFF);
	border-radius: var(--gg-r-xl, 16px);
	box-shadow:
		0 1px 2px rgba(237,41,56,.04),
		0 4px 12px rgba(237,41,56,.05);
	/* Slow + soft ease — feels like a glide, not a blink */
	transition:
		background 700ms cubic-bezier(.22, 1, .36, 1),
		box-shadow 700ms cubic-bezier(.22, 1, .36, 1),
		transform  700ms cubic-bezier(.22, 1, .36, 1);
}
.gg-blg__post:hover{
	transform: translate3d(0, -4px, 0);
	background:
		radial-gradient(ellipse at top left, rgba(237,41,56,.1) 0%, transparent 60%),
		radial-gradient(ellipse at bottom right, rgba(237,41,56,.08) 0%, transparent 60%),
		var(--gg-white, #FFFFFF);
	box-shadow:
		0 2px 4px rgba(237,41,56,.06),
		0 12px 28px rgba(237,41,56,.12);
}
.gg-blg__post.is-new{ animation: gg-blg-fade-in 460ms cubic-bezier(.16,1,.3,1) both; }
@keyframes gg-blg-fade-in{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }

/* Image */
.gg-blg__post-media{
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 12px;
	aspect-ratio: 16 / 9;
	background: var(--gg-gray-100, #F3F4F6);
}
.gg-blg__post-img{
	width: 100%;
	height: 100% !important;
	object-fit: contain;        /* uploads are 1920×1080 — show full frame, never crop */
	object-position: center;
	opacity: 0;
	transition: opacity 700ms ease;
}
.gg-blg__post-img.lazy-loaded{ opacity: 1; }

.gg-blg__post-cat-overlay{
	position: absolute; top: 12px; left: 12px; z-index: 2;
	display: inline-flex; align-items: center;
	padding: 5px 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;
	box-shadow: 0 4px 12px rgba(0,0,0,.1);
	transition: background 600ms cubic-bezier(.22,1,.36,1), color 600ms cubic-bezier(.22,1,.36,1);
}
.gg-blg__post:hover .gg-blg__post-cat-overlay{ background: var(--gg-red, #ED2938); color: var(--gg-white, #FFFFFF); }

/* Read-time pill (NEW) */
.gg-blg__post-read-pill{
	position: absolute; bottom: 12px; left: 12px; z-index: 2;
	display: inline-flex; align-items: center; gap: 5px;
	padding: 5px 10px;
	border-radius: 999px;
	background: rgba(10,10,10,.75);
	backdrop-filter: blur(6px);
	color: var(--gg-white, #FFFFFF);
	font-size: var(--gg-text-2xs, 11px);
	font-weight: 600;
}
.gg-blg__post-read-pill i{ font-size: 11px; }

/* Bookmark button (NEW) */
.gg-blg__post-bookmark{
	position: absolute; top: 10px; right: 10px; z-index: 3;
	width: 36px; height: 36px;
	border-radius: 50%;
	background: rgba(255,255,255,.92);
	backdrop-filter: blur(6px);
	color: var(--gg-gray-700, #374151);
	display: grid; place-items: center;
	box-shadow: 0 4px 12px rgba(0,0,0,.12);
	transition: background 200ms ease, color 200ms ease, transform 240ms ease;
}
.gg-blg__post-bookmark:hover{ background: var(--gg-red, #ED2938); color: var(--gg-white, #FFFFFF); transform: scale(1.05); }
.gg-blg__post-bookmark i{ position: absolute; font-size: 16px; transition: opacity 200ms ease; }
.gg-blg__post-bookmark .bi-bookmark-fill{ opacity: 0; }
.gg-blg__post-bookmark[aria-pressed="true"]{ background: var(--gg-red, #ED2938); color: var(--gg-white, #FFFFFF); }
.gg-blg__post-bookmark[aria-pressed="true"] .bi-bookmark{ opacity: 0; }
.gg-blg__post-bookmark[aria-pressed="true"] .bi-bookmark-fill{ opacity: 1; }

/* Body */
.gg-blg__post-body{
	display: flex; flex-direction: column;
	min-width: 0;
	padding: 4px 4px 4px 0;
}

/* Author block (NEW) */
.gg-blg__post-author{
	display: flex; align-items: center; gap: 10px;
	margin-bottom: 12px;
}
.gg-blg__post-author-img{
	width: 32px !important; height: 32px !important;
	border-radius: 50%; object-fit: cover;
	flex-shrink: 0;
	background: var(--gg-gray-100, #F3F4F6);
}
.gg-blg__post-author-meta{ display: flex; flex-direction: column; min-width: 0; flex: 1; }
.gg-blg__post-author-name{
	font-size: var(--gg-text-xs, 12px); font-weight: 700;
	color: var(--gg-black, #0A0A0A);
	line-height: 1.2;
}
.gg-blg__post-author-role{
	font-size: var(--gg-text-2xs, 11px);
	color: var(--gg-gray-500, #6B7280);
	line-height: 1.2;
}
.gg-blg__post-cat{
	display: inline-flex; align-items: center;
	padding: 4px 10px;
	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-weight: 700;
	font-size: var(--gg-text-2xs, 11px);
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background 200ms ease, color 200ms ease;
}
.gg-blg__post-cat:hover{ background: var(--gg-red, #ED2938); color: var(--gg-white, #FFFFFF); }

.gg-blg__post-title{
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-weight: 700;
	font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
	line-height: 1.25;
	color: var(--gg-black, #0A0A0A);
	letter-spacing: -.015em;
	margin-bottom: 8px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.gg-blg__post-title a{
	color: inherit;
	background-image: linear-gradient(var(--gg-red, #ED2938), var(--gg-red, #ED2938));
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0 1.5px;
	transition: background-size 600ms cubic-bezier(.22, 1, .36, 1), color 500ms ease;
}
.gg-blg__post:hover .gg-blg__post-title a{
	background-size: 100% 1.5px;
	color: var(--gg-red-deep, #B91C28);
}

.gg-blg__post-excerpt{
	font-size: var(--gg-text-sm, 14px);
	line-height: 1.6;
	color: var(--gg-gray-600, #4B5563);
	display: -webkit-box;
	-webkit-line-clamp: 4;     /* desktop: 4 lines per request */
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: 14px;
}

.gg-blg__post-foot{
	margin-top: auto;
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	flex-wrap: wrap;
	padding-top: 10px;
	border-top: 1px dashed var(--gg-gray-200, #E5E7EB);
}
.gg-blg__post-stats{
	display: flex; align-items: center; gap: 14px;
	flex-wrap: wrap;
	font-size: var(--gg-text-xs, 12px);
	color: var(--gg-gray-500, #6B7280);
}
.gg-blg__post-stat{
	display: inline-flex; align-items: center; gap: 5px;
	font-weight: 500;
}
.gg-blg__post-stat i{ font-size: 12px; color: var(--gg-gray-400, #9CA3AF); }
.gg-blg__post-readmore{
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: var(--gg-text-xs, 12px);
	font-weight: 700;
	color: var(--gg-black, #0A0A0A);
	letter-spacing: .04em; text-transform: uppercase;
	transition: color 240ms ease, gap 240ms ease;
}
.gg-blg__post-readmore-arrow{
	display: inline-grid; place-items: center;
	width: 24px; height: 24px;
	border-radius: 50%;
	background: var(--gg-red, #ED2938);
	color: var(--gg-white, #FFFFFF);
	font-size: 11px;
	box-shadow: 0 4px 10px rgba(237,41,56,.25);
	transition: transform 240ms cubic-bezier(.16,1,.3,1), box-shadow 240ms ease;
}
.gg-blg__post-readmore:hover{ color: var(--gg-red, #ED2938); gap: 12px; }
.gg-blg__post-readmore:hover .gg-blg__post-readmore-arrow{
	transform: translateX(2px);
	box-shadow: 0 6px 16px rgba(237,41,56,.4);
}

/* ═════════════ Skeleton ═════════════ */
.gg-blg__skel{ pointer-events: none; }
.gg-blg__skel::before, .gg-blg__skel::after{ display: none; }
.gg-blg__skel-media{ background: var(--gg-gray-100, #F3F4F6); position: relative; overflow: hidden; aspect-ratio: 16 / 9; }
.gg-blg__skel-author{ display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.gg-blg__skel-circle{
	position: relative; overflow: hidden;
	width: 32px; height: 32px;
	border-radius: 50%;
	background: var(--gg-gray-100, #F3F4F6);
	flex-shrink: 0;
}
.gg-blg__skel-line{ position: relative; overflow: hidden; background: var(--gg-gray-100, #F3F4F6); border-radius: 6px; margin-bottom: 10px; }
.gg-blg__skel-line--meta { width: 80px; height: 10px; }
.gg-blg__skel-line--meta.gg-blg__skel-line--short{ width: 60px; }
.gg-blg__skel-line--title{ width: 100%; height: 22px; border-radius: 8px; }
.gg-blg__skel-line--p    { width: 100%; height: 12px; }
.gg-blg__skel-line--short{ width: 70%; }
.gg-blg__skel-shimmer{
	position: absolute; inset: 0;
	background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.65) 50%, transparent 100%);
	transform: translateX(-100%);
	animation: gg-blg-shimmer 1.4s ease-in-out infinite;
}
@keyframes gg-blg-shimmer{ 0%{transform:translateX(-100%);} 100%{transform:translateX(100%);} }

/* ═════════════ Empty state ═════════════ */
.gg-blg__empty{
	text-align: center;
	padding: clamp(40px, 6vw, 80px) 24px;
	background: var(--gg-white, #FFFFFF);
	border: 1px dashed var(--gg-gray-200, #E5E7EB);
	border-radius: 18px;
}
.gg-blg__empty i{ font-size: 44px; color: var(--gg-gray-400, #9CA3AF); margin-bottom: 12px; display: block; }
.gg-blg__empty h2{ font-family: var(--gg-font-head, 'Outfit', sans-serif); font-weight: 700; font-size: 1.375rem; color: var(--gg-gray-800, #1F2937); margin-bottom: 6px; }
.gg-blg__empty p{ color: var(--gg-gray-500, #6B7280); margin-bottom: 22px; }
.gg-blg__empty-btn{
	display: inline-flex; align-items: center; gap: 8px;
	padding: 11px 22px; border-radius: 999px;
	background: var(--gg-black, #0A0A0A); color: var(--gg-white, #FFFFFF);
	font-size: var(--gg-text-sm, 13px); font-weight: 600;
	transition: background 200ms ease;
}
.gg-blg__empty-btn:hover{ background: var(--gg-red, #ED2938); }

/* ═════════════ Pagination — Google-style ═════════════ */
/* Range meta — "Showing 1–6 of 12 results", sits just above the pager */
.gg-blg__pager-meta{
	margin-top: clamp(24px, 4vw, 40px);
	padding-top: clamp(20px, 3vw, 28px);
	border-top: 1px solid var(--gg-gray-200, #E5E7EB);
	font-size: var(--gg-text-sm, 13px);
	color: var(--gg-gray-600, #4B5563);
	text-align: center;
	margin-bottom: 14px;
}
.gg-blg__pager-meta strong{ color: var(--gg-black, #0A0A0A); font-weight: 700; }

.gg-blg__pager{
	display: flex; align-items: center; justify-content: center;
	gap: 6px; flex-wrap: wrap;
}
/* All pager controls share the same 38px height for crisp horizontal alignment */
.gg-blg__pager-btn,
.gg-blg__pager-page{
	box-sizing: border-box;
	height: 38px;
	border-radius: 10px;
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: var(--gg-text-sm, 13px);
	font-weight: 600;
	line-height: 1;
	transition: all 200ms ease;
}
.gg-blg__pager-btn{
	display: inline-flex; align-items: center; justify-content: center;
	gap: 6px;
	padding: 0 14px;
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	background: var(--gg-white, #FFFFFF);
	color: var(--gg-gray-700, #374151);
	white-space: nowrap;
}
.gg-blg__pager-btn:hover{ border-color: var(--gg-black, #0A0A0A); background: var(--gg-black, #0A0A0A); color: var(--gg-white, #FFFFFF); }
.gg-blg__pager-btn.is-disabled{ opacity: .35; pointer-events: none; }
.gg-blg__pager-btn i{ font-size: 13px; line-height: 1; display: inline-flex; align-items: center; }

/* First/Last — muted to defer to Prev/Next */
.gg-blg__pager-btn--first,
.gg-blg__pager-btn--last{ color: var(--gg-gray-500, #6B7280); }

/* The <ol> is also a flex item of the pager; explicit reset so the
   numbers sit on the SAME baseline as Prev/Next buttons (no default
   list-padding pushing them right, no <li> margin breaking alignment). */
.gg-blg__pager-pages{
	list-style: none;
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: nowrap;
	margin: 0;
	padding: 0;
}
.gg-blg__pager-pages > li{
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}
.gg-blg__pager-page{
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 38px;
	padding: 0 10px;
	color: var(--gg-gray-700, #374151);
	border: 1px solid transparent;     /* match button height visually */
	background: transparent;
}
.gg-blg__pager-page:hover{ background: var(--gg-gray-100, #F3F4F6); color: var(--gg-black, #0A0A0A); }
.gg-blg__pager-page.is-current{
	background: var(--gg-red, #ED2938);
	color: var(--gg-white, #FFFFFF);
	box-shadow: 0 4px 12px rgba(237,41,56,.4);
}
.gg-blg__pager-gap{ color: var(--gg-gray-400, #9CA3AF); padding: 0 4px; font-weight: 600; }

/* ═════════════ Load More ═════════════ */
.gg-blg__loadmore-wrap{ display: flex; justify-content: center; margin-top: clamp(20px, 3vw, 32px); }
.no-js .gg-blg__loadmore-wrap{ display: none; }
.gg-blg__loadmore{
	position: relative;
	display: inline-flex; align-items: center; gap: 12px;
	padding: 14px 32px; 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;
	letter-spacing: .04em; text-transform: uppercase;
	overflow: hidden;
	box-shadow: 0 8px 24px -8px rgba(0,0,0,.4);
	transition: background 240ms ease, transform 240ms ease, box-shadow 240ms ease;
}
.gg-blg__loadmore-glow{
	position: absolute; left: -40%; top: 50%;
	width: 60%; height: 240%;
	background: radial-gradient(ellipse at center, rgba(237,41,56,.55) 0%, transparent 70%);
	transform: translateY(-50%);
	pointer-events: none;
	transition: left 600ms ease;
}
.gg-blg__loadmore:hover{ background: var(--gg-red, #ED2938); transform: translateY(-2px); box-shadow: 0 14px 32px -10px rgba(237,41,56,.55); }
.gg-blg__loadmore:hover .gg-blg__loadmore-glow{ left: 100%; }
.gg-blg__loadmore[disabled]{ opacity: .65; pointer-events: none; }
.gg-blg__loadmore-spinner{
	width: 16px; height: 16px; border-radius: 50%;
	border: 2px solid rgba(255,255,255,.3);
	border-top-color: var(--gg-white, #FFFFFF);
	display: none;
	animation: gg-blg-spin .7s linear infinite;
}
.gg-blg__loadmore.is-loading .gg-blg__loadmore-spinner{ display: inline-block; }
.gg-blg__loadmore.is-loading .gg-blg__loadmore-label::after{ content: "…"; }
@keyframes gg-blg-spin{ to{ transform: rotate(360deg); } }

/* ═════════════ Sidebar (canvas sticky-sidebar plugin) ═════════════ */
.sticky-sidebar-wrap.gg-blg__aside-wrap{ min-height: 1px; }
.gg-blg__aside{
	background:
		radial-gradient(ellipse at top right, rgba(237,41,56,.04) 0%, transparent 60%),
		var(--gg-white, #FFFFFF);
	border-radius: var(--gg-r-xl, 16px);
	display: flex; flex-direction: column;
	box-shadow:
		0 1px 2px rgba(237,41,56,.03),
		0 4px 14px rgba(237,41,56,.04);
}
.gg-blg__aside-bar{
	display: none; align-items: center; gap: 12px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--gg-gray-200, #E5E7EB);
	position: relative;
}
.gg-blg__aside-grip{
	position: absolute; top: 8px; left: 50%;
	transform: translateX(-50%);
	width: 44px; height: 4px; border-radius: 999px;
	background: var(--gg-gray-300, #D1D5DB);
}
.gg-blg__aside-bar-title{
	flex: 1;
	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-blg__aside-close{
	width: 36px; height: 36px;
	border-radius: 50%;
	background: var(--gg-gray-100, #F3F4F6);
	color: var(--gg-gray-700, #374151);
	display: grid; place-items: center;
	transition: background 200ms ease;
}
.gg-blg__aside-close:hover{ background: var(--gg-gray-200, #E5E7EB); }
.gg-blg__aside-scroll{ padding: 8px 0; }

.gg-blg__widget{ padding: 18px 20px; border-bottom: 1px solid var(--gg-gray-100, #F3F4F6); }
.gg-blg__widget:last-child{ border-bottom: 0; }
.gg-blg__widget-title{
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: var(--gg-text-xs, 12px);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--gg-gray-700, #374151);
	margin-bottom: 14px;
	position: relative;
	padding-left: 14px;
}
.gg-blg__widget-title::before{
	content: ""; position: absolute;
	left: 0; top: 50%; transform: translateY(-50%);
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--gg-red, #ED2938);
	box-shadow: 0 0 8px var(--gg-red-glow, rgba(237,41,56,.4));
}
.gg-blg__widget-title i{ font-size: 14px; color: var(--gg-red, #ED2938); }

/* Search */
.gg-blg__search{
	position: relative; display: flex; align-items: center;
	background: var(--gg-gray-50, #F9FAFB);
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	border-radius: 12px;
	transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
}
.gg-blg__search:focus-within{
	border-color: var(--gg-red, #ED2938);
	background: var(--gg-white, #FFFFFF);
	box-shadow: 0 0 0 3px var(--gg-red-subtle, rgba(237,41,56,.08));
}
.gg-blg__search input{
	flex: 1;
	border: 0; background: transparent; outline: 0;
	padding: 11px 0 11px 14px;
	font-size: var(--gg-text-sm, 13px);
	color: var(--gg-gray-800, #1F2937);
	min-width: 0;
}
.gg-blg__search button{
	width: 40px; height: 40px;
	display: grid; place-items: center;
	color: var(--gg-gray-500, #6B7280);
	background: transparent;
	transition: color 200ms ease;
}
.gg-blg__search:focus-within button{ color: var(--gg-red, #ED2938); }

/* Trending widget (NEW) */
.gg-blg__widget--trending{
	background: linear-gradient(180deg, rgba(237,41,56,.04) 0%, transparent 100%);
}
.gg-blg__trending{ list-style: none; display: flex; flex-direction: column; gap: 12px; }
.gg-blg__trending-item{
	display: flex; align-items: flex-start; gap: 12px;
	padding-bottom: 12px;
	border-bottom: 1px dashed var(--gg-gray-100, #F3F4F6);
}
.gg-blg__trending-item:last-child{ border-bottom: 0; padding-bottom: 0; }
.gg-blg__trending-num{
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: 1.25rem;
	font-weight: 800;
	background: linear-gradient(180deg, var(--gg-red, #ED2938) 0%, transparent 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	line-height: 1;
	flex-shrink: 0;
	min-width: 26px;
	letter-spacing: -.04em;
}
.gg-blg__trending-link{ display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.gg-blg__trending-title{
	font-size: var(--gg-text-sm, 13px); font-weight: 600;
	color: var(--gg-gray-800, #1F2937);
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color 200ms ease;
}
.gg-blg__trending-link:hover .gg-blg__trending-title{ color: var(--gg-red, #ED2938); }
.gg-blg__trending-meta{
	display: inline-flex; align-items: center; gap: 5px;
	font-size: var(--gg-text-2xs, 11px);
	color: var(--gg-gray-500, #6B7280);
	font-weight: 500;
}
.gg-blg__trending-meta i{ font-size: 11px; color: var(--gg-red, #ED2938); }

/* Categories / Archive list */
.gg-blg__cat-list{ list-style: none; display: flex; flex-direction: column; gap: 2px; }
.gg-blg__cat-item{
	display: flex; align-items: center; justify-content: space-between;
	padding: 10px 12px;
	border-radius: 10px;
	color: var(--gg-gray-700, #374151);
	font-size: var(--gg-text-sm, 13px); font-weight: 500;
	transition: background 180ms ease, color 180ms ease;
}
.gg-blg__cat-item > span:first-child{ display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.gg-blg__cat-item > span:first-child i{ color: var(--gg-gray-400, #9CA3AF); font-size: 14px; width: 16px; flex-shrink: 0; }
.gg-blg__cat-item:hover{ background: var(--gg-gray-100, #F3F4F6); color: var(--gg-black, #0A0A0A); }
.gg-blg__cat-item:hover > span:first-child i{ color: var(--gg-red, #ED2938); }
.gg-blg__cat-item.is-active{
	background: linear-gradient(135deg, var(--gg-red-subtle, rgba(237,41,56,.07)) 0%, var(--gg-red-subtle, rgba(237,41,56,.04)) 100%);
	color: var(--gg-red-deep, #B91C28);
	font-weight: 600;
}
.gg-blg__cat-item.is-active > span:first-child i{ color: var(--gg-red, #ED2938); }
.gg-blg__cat-count{
	font-size: var(--gg-text-2xs, 11px);
	color: var(--gg-gray-500, #6B7280);
	background: var(--gg-gray-100, #F3F4F6);
	border-radius: 999px;
	padding: 2px 8px;
	font-weight: 600;
}
.gg-blg__cat-item.is-active .gg-blg__cat-count{
	background: var(--gg-red, #ED2938); color: var(--gg-white, #FFFFFF);
	box-shadow: 0 2px 6px rgba(237,41,56,.35);
}

/* Newsletter widget (NEW) */
.gg-blg__widget--newsletter{
	padding: 0;
}
.gg-blg__newsletter{
	position: relative;
	margin: 12px 16px;
	padding: 22px 20px 20px;
	border-radius: 14px;
	background:
		radial-gradient(ellipse at top right, rgba(237,41,56,.18) 0%, transparent 60%),
		linear-gradient(135deg, var(--gg-black, #0A0A0A) 0%, var(--gg-black-soft, #141414) 100%);
	color: var(--gg-white, #FFFFFF);
	overflow: hidden;
}
.gg-blg__newsletter::before{
	content: "";
	position: absolute;
	bottom: -40%; left: -10%;
	width: 70%; height: 80%;
	background: radial-gradient(ellipse, rgba(237,41,56,.15) 0%, transparent 60%);
	pointer-events: none;
}
.gg-blg__newsletter-icon{
	width: 40px; height: 40px;
	border-radius: 12px;
	background: var(--gg-red, #ED2938);
	display: grid; place-items: center;
	color: var(--gg-white, #FFFFFF);
	font-size: 18px;
	margin-bottom: 12px;
	box-shadow: 0 8px 18px rgba(237,41,56,.35);
}
.gg-blg__newsletter-title{
	position: relative;
	font-family: var(--gg-font-head, 'Outfit', sans-serif);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -.01em;
	margin-bottom: 4px;
	color: var(--gg-white, #FFFFFF) !important;
	padding: 0;
	text-transform: none;
}
.gg-blg__newsletter-title::before{ display: none; }
.gg-blg__newsletter-sub{
	position: relative;
	font-size: var(--gg-text-xs, 12px);
	color: rgba(255,255,255,.7);
	line-height: 1.55;
	margin-bottom: 14px;
}
.gg-blg__newsletter-form{
	position: relative;
	display: flex; align-items: center;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 999px;
	padding: 4px 4px 4px 14px;
	transition: border-color 200ms ease;
}
.gg-blg__newsletter-form:focus-within{ border-color: var(--gg-red, #ED2938); }
.gg-blg__newsletter-form input{
	flex: 1;
	background: transparent; border: 0; outline: 0;
	color: var(--gg-white, #FFFFFF);
	font-size: var(--gg-text-xs, 12px);
	min-width: 0;
}
.gg-blg__newsletter-form input::placeholder{ color: rgba(255,255,255,.5); }
.gg-blg__newsletter-form button{
	width: 32px; height: 32px;
	border-radius: 50%;
	background: var(--gg-red, #ED2938);
	color: var(--gg-white, #FFFFFF);
	display: grid; place-items: center;
	transition: background 200ms ease, transform 200ms ease;
}
.gg-blg__newsletter-form button:hover{ background: var(--gg-red-hover, #D41E2C); transform: scale(1.05); }
.gg-blg__newsletter-fine{
	position: relative;
	font-size: 10px;
	color: rgba(255,255,255,.4);
	margin-top: 10px;
	letter-spacing: .04em;
}

/* Recent posts */
.gg-blg__recent{ list-style: none; display: flex; flex-direction: column; gap: 12px; }
.gg-blg__recent-link{ display: flex; gap: 12px; align-items: center; }
.gg-blg__recent-img{
	width: 64px !important; height: 64px !important;
	border-radius: 10px;
	object-fit: cover;
	flex-shrink: 0;
	background: var(--gg-gray-100, #F3F4F6);
	opacity: 0;
	transform: scale(.96);
	transition: opacity 480ms ease, transform 600ms cubic-bezier(.16,1,.3,1);
}
.gg-blg__recent-img.lazy-loaded{ opacity: 1; transform: scale(1); }
.gg-blg__recent-link span{ display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gg-blg__recent-title{
	font-size: var(--gg-text-sm, 13px); font-weight: 600;
	color: var(--gg-gray-800, #1F2937);
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color 200ms ease;
}
.gg-blg__recent-link:hover .gg-blg__recent-title{ color: var(--gg-red, #ED2938); }
.gg-blg__recent-date{ font-size: var(--gg-text-2xs, 11px); color: var(--gg-gray-500, #6B7280); }

/* Tags */
.gg-blg__tags{ list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.gg-blg__tag{
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--gg-gray-50, #F9FAFB);
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	color: var(--gg-gray-700, #374151);
	font-size: var(--gg-text-xs, 12px);
	font-weight: 500;
	transition: all 200ms ease;
}
.gg-blg__tag:hover{ background: var(--gg-black, #0A0A0A); border-color: var(--gg-black, #0A0A0A); color: var(--gg-white, #FFFFFF); transform: translateY(-1px); }
.gg-blg__tag.is-active{ background: var(--gg-red, #ED2938); border-color: var(--gg-red, #ED2938); color: var(--gg-white, #FFFFFF); }

/* Mobile drawer backdrop */
.gg-blg__aside-backdrop{
	position: fixed; inset: 0;
	background: rgba(10,10,10,.55);
	opacity: 0;
	pointer-events: none;
	z-index: 9998;
	transition: opacity 280ms ease;
}
body.gg-blg-aside-open .gg-blg__aside-backdrop{ opacity: 1; pointer-events: auto; }
body.gg-blg-aside-open{ overflow: hidden; }


/* ═════════════ Responsive ═════════════ */

@media (max-width: 1100px){
	.gg-blg__body{ grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; }
	.gg-blg__post{ grid-template-columns: minmax(180px, 240px) 1fr; }
	.gg-blg__feature{ grid-template-columns: minmax(0, 1fr); }
	.gg-blg__feature-media{ min-height: 0; aspect-ratio: 16 / 9; }
}

/* Tablet portrait & smaller — sidebar becomes drawer.
   The single `.gg-blg__actions` element morphs from inline toolbar
   pieces into a fixed bottom pill bar. The single `.gg-blg__sort-menu`
   element morphs from a small popup into a full-width bottom sheet. */
@media (max-width: 900px){
	.gg-blg__body{ grid-template-columns: 1fr; gap: 0; }

	/* ── Toolbar layout swap on mobile ──
	   Count stays inline at the top of the column. The actions group
	   detaches and floats above the site mobile nav. */
	.gg-blg__toolbar{ display: block; }
	.gg-blg__count{ margin-bottom: 0; }

	/* Single floating pill containing TWO segments: [icon Filter | icon Sort By]
	   GRID layout (1fr | 1px | 1fr) guarantees both segments always render
	   at equal halves regardless of content length or viewport width.
	   z-index < site mobile nav (500), so profile (510) / side panel (501) /
	   search (520) all paint above this when opened. */
	/* CRITICAL: no `transform` on the bar at rest — that would trap the
	   sort menu's `position: fixed` to the bar's box instead of the
	   viewport. We center via `left:0; right:0; margin:0 auto` instead. */
	.gg-blg__actions{
		position: fixed !important;
		left: 0 !important;
		right: 0 !important;
		bottom: calc(60px + env(safe-area-inset-bottom, 0) + 12px) !important;
		margin: 0 auto !important;
		z-index: 499;
		display: grid !important;
		grid-template-columns: 1fr 1px 1fr;
		align-items: stretch;
		padding: 5px !important;
		background: var(--gg-black, #0A0A0A) !important;
		border: 0 !important;
		border-radius: 999px !important;
		box-shadow:
			0 12px 28px -8px rgba(0,0,0,.45),
			0 4px 10px rgba(237,41,56,.25);
		width: 92vw;
		max-width: 420px;
		min-width: 0;
		transition: opacity 240ms ease, transform 320ms cubic-bezier(.22,1,.36,1);
	}
	.gg-blg__actions::before{
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
		background:
			radial-gradient(ellipse at top right, rgba(237,41,56,.22) 0%, transparent 60%),
			radial-gradient(ellipse at bottom left, rgba(237,41,56,.18) 0%, transparent 60%);
		pointer-events: none;
	}
	.gg-blg__actions > *{ position: relative; min-width: 0; }

	/* Vertical `|` divider — fills the middle grid column */
	.gg-blg__actions-sep{
		display: block !important;
		width: 1px;
		height: auto;
		background: rgba(255,255,255,.18);
		margin: 8px 0;
		align-self: stretch;
	}

	body.gg-blg-hide-bar .gg-blg__actions{
		transform: translateY(160%) !important;
		pointer-events: none;
		opacity: 0;
	}

	/* ── Filter segment (left grid cell) ── */
	.gg-blg__filter-btn{
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding: 11px 12px;
		border-radius: 999px;
		background: transparent;
		color: var(--gg-white, #FFFFFF);
		font-family: var(--gg-font-head, 'Outfit', sans-serif);
		font-size: var(--gg-text-sm, 13px);
		font-weight: 600;
		letter-spacing: .02em;
		text-transform: none;
		white-space: nowrap;
		width: 100%;
		min-width: 0;
		transition: background 200ms ease, transform 200ms ease;
	}
	.gg-blg__filter-btn:hover,
	.gg-blg__filter-btn:active{ background: rgba(255,255,255,.08); }
	.gg-blg__filter-btn:active{ transform: scale(.97); }
	.gg-blg__filter-btn i{ font-size: 16px; color: var(--gg-red, #ED2938); flex-shrink: 0; }
	.gg-blg__filter-btn-label{ overflow: hidden; text-overflow: ellipsis; }

	/* ── Sort segment wrapper (right grid cell) ── */
	.gg-blg__sort{
		display: flex !important;
		position: static;          /* override desktop `relative` so the
		                              fixed sort menu escapes correctly */
		min-width: 0;
		width: 100%;
	}
	.gg-blg__sort-btn{
		display: inline-flex !important;
		width: 100%;
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding: 11px 12px;
		border-radius: 999px;
		background: transparent;
		color: var(--gg-white, #FFFFFF);
		font-family: var(--gg-font-head, 'Outfit', sans-serif);
		font-size: var(--gg-text-sm, 13px);
		font-weight: 600;
		letter-spacing: .02em;
		text-transform: none;
		white-space: nowrap;
		min-width: 0;
		transition: background 200ms ease, transform 200ms ease;
	}
	.gg-blg__sort-btn:hover,
	.gg-blg__sort.is-open .gg-blg__sort-btn{ background: rgba(255,255,255,.08); }
	.gg-blg__sort-btn:active{ transform: scale(.97); }
	.gg-blg__sort-btn-ico{ font-size: 16px; color: var(--gg-red, #ED2938); flex-shrink: 0; }
	.gg-blg__sort-btn-label{ overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
	.gg-blg__sort-btn-chev{ font-size: 11px; color: rgba(255,255,255,.6); flex-shrink: 0; }

	/* Tiny phones — keep both segments tappable */
	@media (max-width: 380px){
		.gg-blg__filter-btn,
		.gg-blg__sort-btn{ padding: 11px 8px; gap: 6px; font-size: 12px; }
	}
	@media (max-width: 340px){
		.gg-blg__filter-btn-label,
		.gg-blg__sort-btn-label{ display: none; }
	}

	/* Sort menu morphs into a bottom sheet on mobile — SINGLE element
	   slides up as one card (just like the filter drawer). No more two
	   independent transforms (bar + list) — that's what felt broken. */
	.gg-blg__sort-menu{
		position: fixed !important;
		top: auto !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
		max-height: 80vh;
		border-radius: 22px 22px 0 0 !important;
		box-shadow: 0 -24px 50px -12px rgba(0,0,0,.28) !important;
		background: var(--gg-white, #FFFFFF) !important;
		border: 0 !important;
		padding: 0 0 env(safe-area-inset-bottom, 0) !important;
		transform: translate3d(0, 100%, 0) !important;
		transition: transform 420ms cubic-bezier(.22, 1, .36, 1) !important;
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: none;
		z-index: 9999 !important;
		display: flex !important;
		flex-direction: column !important;
		overflow: hidden;
	}
	.gg-blg__sort.is-open .gg-blg__sort-menu{
		transform: translate3d(0, 0, 0) !important;
		pointer-events: auto;
	}

	/* Sheet header (grip + title) — flex item inside the card */
	.gg-blg__sort-menu-bar{
		display: flex !important;
		align-items: center;
		justify-content: center;
		position: relative;
		padding: 22px 16px 14px;
		border-bottom: 1px solid var(--gg-gray-100, #F3F4F6);
		flex-shrink: 0;
		transform: none !important;
		transition: none !important;
		background: var(--gg-white, #FFFFFF);
	}
	.gg-blg__sort-menu-grip{
		position: absolute; top: 8px; left: 50%;
		transform: translateX(-50%);
		width: 44px; height: 4px; border-radius: 999px;
		background: var(--gg-gray-300, #D1D5DB);
	}
	.gg-blg__sort-menu-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);
	}

	/* Scrollable list inside the card */
	.gg-blg__sort-menu-list{
		padding: 8px 12px 16px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		flex: 1;
		min-height: 0;
		background: var(--gg-white, #FFFFFF);
		transform: none !important;
		transition: none !important;
	}
	.gg-blg__sort-menu-item{
		padding: 14px;
		font-size: var(--gg-text-sm, 14px);
	}
	.gg-blg__sort-menu-ico{
		width: 28px; height: 28px;
		border-radius: 50%;
		background: var(--gg-gray-100, #F3F4F6);
		font-size: 13px;
	}
	.gg-blg__sort-menu-item.is-active .gg-blg__sort-menu-ico{
		background: var(--gg-red, #ED2938);
		color: var(--gg-white, #FFFFFF);
	}
	.gg-blg__sort-menu-check{ font-size: 18px; }

	/* Reuse the existing portaled backdrop (the same one used by the
	   filter drawer) so we don't add a second backdrop element.
	   Body class `gg-blg-sort-open` toggles it on. */
	body.gg-blg-sort-open .gg-blg__aside-backdrop{
		opacity: 1;
		pointer-events: auto;
	}
	body.gg-blg-sort-open{ overflow: hidden; }

	/* While sort is open, lift the actions bar's stacking context above
	   site UI so the menu (inside it) can paint over the page. */
	body.gg-blg-sort-open .gg-blg__actions{ z-index: 9999; }
	.gg-blg__sort-menu-bar{
		display: flex; align-items: center; justify-content: center;
		position: relative;
		padding: 22px 16px 14px;
		border-bottom: 1px solid var(--gg-gray-100, #F3F4F6);
	}
	.gg-blg__sort-menu-grip{
		position: absolute; top: 8px; left: 50%;
		transform: translateX(-50%);
		width: 44px; height: 4px; border-radius: 999px;
		background: var(--gg-gray-300, #D1D5DB);
	}
	.gg-blg__sort-menu-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-blg__sort-menu-list{ padding: 8px 12px 16px; }
	.gg-blg__sort-menu-item{
		padding: 14px;
		font-size: var(--gg-text-sm, 14px);
	}
	.gg-blg__sort-menu-ico{
		width: 28px; height: 28px;
		border-radius: 50%;
		background: var(--gg-gray-100, #F3F4F6);
		font-size: 13px;
	}
	.gg-blg__sort-menu-item.is-active .gg-blg__sort-menu-ico{
		background: var(--gg-red, #ED2938);
		color: var(--gg-white, #FFFFFF);
	}
	.gg-blg__sort-menu-check{ font-size: 18px; }

	/* Hide the actions bar while the filter drawer is open */
	body.gg-blg-aside-open .gg-blg__actions{
		opacity: 0;
		pointer-events: none;
		transition: opacity 200ms ease;
	}


	.sticky-sidebar-wrap.gg-blg__aside-wrap,
	.sticky-sidebar-wrap.gg-blg__aside-wrap > div:not(.gg-blg__aside){
		position: static !important;
		top: auto !important; left: auto !important;
		width: auto !important;
		min-height: 0 !important; height: auto !important;
		transform: none !important;
		padding: 0 !important; margin: 0 !important;
	}

	.gg-blg__aside{
		position: fixed !important;
		left: 0 !important; right: 0 !important;
		bottom: 0 !important; top: auto !important;
		width: auto !important;
		max-width: none !important;
		max-height: 88vh !important;
		height: auto !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;
		z-index: 9999 !important;
		padding-bottom: env(safe-area-inset-bottom, 0) !important;
		display: flex !important;
		flex-direction: column !important;
		overflow: hidden !important;
	}
	body.gg-blg-aside-open .gg-blg__aside{ transform: translate3d(0, 0, 0) !important; }
	.gg-blg__aside-bar{ display: flex; padding-top: 22px; flex-shrink: 0; }
	.gg-blg__aside-scroll{ overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 0 24px; flex: 1; min-height: 0; }
}

@media (max-width: 700px){
	.gg-blg__post{
		grid-template-columns: 1fr;
		padding: 12px;
		gap: 14px;
	}
	.gg-blg__post-media{ aspect-ratio: 16 / 9; }
	.gg-blg__post-body{ padding: 0 4px 4px; }
	.gg-blg__post-title{
		font-size: 1.0625rem;
		-webkit-line-clamp: 3;
	}
	.gg-blg__post-excerpt{ -webkit-line-clamp: 3; }

	/* Mobile post foot — full-width red Read button + stats split row */
	.gg-blg__post-foot{
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding-top: 12px;
	}
	.gg-blg__post-readmore{
		display: flex !important;
		justify-content: center;
		align-items: center;
		width: 100%;
		padding: 12px 18px;
		border-radius: 12px;
		background: var(--gg-red, #ED2938);
		color: var(--gg-white, #FFFFFF) !important;
		font-size: var(--gg-text-sm, 13px);
		font-weight: 700;
		letter-spacing: .06em;
		text-transform: uppercase;
		gap: 0 !important;
		box-shadow: 0 6px 16px -4px rgba(237,41,56,.4);
		order: 2;            /* below the stats row per request */
		transition: background 500ms ease, transform 500ms ease;
	}
	.gg-blg__post-readmore:hover,
	.gg-blg__post-readmore:active{
		background: var(--gg-red-deep, #B91C28);
		color: var(--gg-white, #FFFFFF) !important;
	}
	/* Mobile label morph: "Read" → "Read Full Article" */
	.gg-blg__post-readmore > span:first-child::after{
		content: " Full Article";
	}
	/* Hide arrow icon on mobile per request */
	.gg-blg__post-readmore-arrow{ display: none !important; }
	.gg-blg__post-stats{
		display: flex !important;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		gap: 8px;
		order: 1;            /* above the read button */
		font-size: var(--gg-text-xs, 12px);
	}
	/* First stat (date) sits left; the rest cluster on the right */
	.gg-blg__post-stats > .gg-blg__post-stat:first-child{ margin-right: auto; }
	.gg-blg__post-stats > .gg-blg__post-stat + .gg-blg__post-stat{ margin-left: 12px; }

	.gg-blg__feature-media{ min-height: 0; }
	.gg-blg__feature-footer{ flex-direction: column; align-items: stretch; }
	.gg-blg__feature-cta{ width: 100%; justify-content: center; }

	/* Mobile — 4 stat cards in one horizontal row with overflow scroll.
	   Each card keeps the same boxed layout it had in the 2×2 design:
	   icon (top-left) + label (bottom-left), number centered on right. */
	.gg-blg__head-stats{
		display: flex !important;
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		gap: 8px;
		padding: 10px 0 6px;
		margin-top: 8px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		scroll-snap-type: x mandatory;
	}
	.gg-blg__head-stats::-webkit-scrollbar{ display: none; }

	.gg-blg__stat{
		flex: 0 0 auto;
		min-width: 138px;
		display: grid !important;
		grid-template-columns: auto 1fr;
		grid-template-rows: auto auto;
		column-gap: 8px;
		row-gap: 2px;
		align-items: center;
		padding: 8px 10px;
		border-radius: 10px;
		background: var(--gg-red-subtle, rgba(237,41,56,.04));
		scroll-snap-align: start;
	}
	.gg-blg__stat-icon{
		grid-row: 1; grid-column: 1;
		width: 24px; height: 24px;        /* 30% smaller than 32px */
		font-size: 11px;
	}
	.gg-blg__stat-label{
		grid-row: 2; grid-column: 1;
		justify-self: start;
		font-size: 9px;                    /* 30% smaller than 11px */
		text-align: left;
		text-transform: uppercase;
		letter-spacing: .08em;
		color: var(--gg-gray-500, #6B7280);
		white-space: nowrap;
	}
	.gg-blg__stat-num{
		grid-row: 1 / 3;
		grid-column: 2;
		justify-self: center;
		align-self: center;
		font-size: clamp(1rem, 4.5vw, 1.25rem);   /* 30% smaller than before */
		line-height: 1;
	}
	.gg-blg__stat-suffix{ font-size: .65em; }

	/* Hide the inline filter trigger and toolbar sort on mobile —
	   they're replaced by the floating action bar at the bottom. */
	.gg-blg__filter-trigger{ display: none !important; }
	.gg-blg__toolbar .gg-blg__sort{ display: none; }
	.gg-blg__toolbar{ justify-content: flex-start; }

	/* Reserve space at the bottom of the page so the floating bar
	   doesn't cover the last card / pagination */
	.gg-blg{ padding-bottom: calc(72px + 60px + env(safe-area-inset-bottom, 0)); }
}

@media (max-width: 520px){
	.gg-blg{ padding: 16px 14px 64px; }
	.gg-blg__header{ padding: 18px; margin-bottom: 14px; }
	.gg-blg__title{ font-size: clamp(1.25rem, 6vw, 1.625rem); }
	.gg-blg__sub{ font-size: var(--gg-text-sm, 13px); }
	.gg-blg__head-glow{ width: 180px; height: 180px; }

	.gg-blg__feature-body{ padding: 4px 6px 8px; }
	.gg-blg__feature-title{ font-size: 1.25rem; }

	/* Pagination on small phones — keep everything in a row, hide
	   First/Last text labels (just chevron icons remain), tighten gaps */
	.gg-blg__pager{ gap: 4px; }
	.gg-blg__pager-btn{ padding: 9px 10px; }
	.gg-blg__pager-btn--first .gg-blg__pager-btn-label,
	.gg-blg__pager-btn--last .gg-blg__pager-btn-label,
	.gg-blg__pager-btn--prev .gg-blg__pager-btn-label,
	.gg-blg__pager-btn--next .gg-blg__pager-btn-label{ display: none; }
	.gg-blg__pager-page{ min-width: 34px; height: 34px; padding: 0 8px; font-size: 12px; }
}

@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px){
	.gg-blg__post{ grid-template-columns: minmax(180px, 220px) 1fr; }
	.gg-blg__aside{ max-height: 92vh !important; }
}

/* ═════════════════════════════════════════════════════════════════════
   No-image placeholder — when a post has no uploaded featured image.
   Neutral, calm, GG-branded with a small monochrome favicon. Not a
   colourful stock photo — visually says "no image set" without trying
   to fill the space with something irrelevant.
   ═════════════════════════════════════════════════════════════════════ */
.gg-blg__post-media--noimage,
.gg-blg__feature-media--noimage{
	background:
		repeating-linear-gradient(45deg, var(--gg-gray-50, #F9FAFB) 0 14px, var(--gg-gray-100, #F3F4F6) 14px 28px);
}
.gg-blg__post-noimage{
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	background: transparent;
}
.gg-blg__post-noimage img{
	width: 56px; height: 56px;
	opacity: .35;
	filter: grayscale(1);
	transition: opacity .25s ease, transform .25s ease;
}
.gg-blg__feature-media--noimage .gg-blg__post-noimage img{
	width: 84px; height: 84px;
}
.gg-blg__post:hover .gg-blg__post-noimage img,
.gg-blg__feature:hover .gg-blg__post-noimage img{ opacity: .55; transform: scale(1.05); }

/* ═════════════════════════════════════════════════════════════════════
   GG no-image fallbacks — small avatars and sidebar thumbs.
   Used wherever a record may not have an image yet (author headshots,
   recent-posts tiles). Neutral gray tile, soft grayscale favicon in the
   middle. Same look across the entire blog so missing images don't feel
   like a broken state.
   ═════════════════════════════════════════════════════════════════════ */

/* Small square avatar tile (sidebar "Recent posts" image slot, ~56px). */
.gg-noimage-tile{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background:
		repeating-linear-gradient(45deg, var(--gg-gray-50, #F9FAFB) 0 10px, var(--gg-gray-100, #F3F4F6) 10px 20px);
	border-radius: 10px;
	overflow: hidden;
}
.gg-noimage-tile img{
	width: 28px; height: 28px;
	opacity: .42;
	filter: grayscale(1);
}

/* Circular author avatar (post card + featured card). */
.gg-noimage-avatar{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--gg-gray-100, #F3F4F6);
	border-radius: 999px;
	overflow: hidden;
}
.gg-noimage-avatar img{
	width: 60%; height: 60%;
	opacity: .45;
	filter: grayscale(1);
}