/* ═══════════════════════════════════════════════════════════════════════
   business-list.css — Business directory page (`/business`)

   Reuses tokens from /custom/css/core.css (--gg-red, --gg-font-head,
   --gg-r-xl, etc.). No `:root` redeclarations and no global resets — those
   stay project-wide. Shares the visual language of business.css (the
   profile page) but lives in its own block so the two never collide.

   Block: .gg-bdir  (Business Directory)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Body / page wrapper ─────────────────────────────────────────────── */
.gg-bdir-body{ background: var(--gg-off-white, #FAFAFA); }
.gg-bdir-body::before{
	content: "";
	position: fixed; inset: 0;
	background:
		radial-gradient(1100px 460px at 8% -8%, rgba(237,41,56,.06), transparent 70%),
		radial-gradient(900px 420px at 110% 12%, rgba(237,41,56,.04), transparent 75%);
	pointer-events: none; z-index: 0;
}

.gg-bdir{
	width: 100%;
	padding: 24px 28px 32px;
	position: relative; z-index: 1;
}
@media (max-width: 700px){ .gg-bdir{ padding: 14px 14px 56px; } }
@media (min-width: 1440px){ .gg-bdir{ padding: 28px 28px 40px; } }

/* ── Shared atoms ────────────────────────────────────────────────────── */
.gg-bdir__eyebrow{
	display: inline-block;
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-2xs, 11px);
	font-weight: 700;
	color: var(--gg-red-deep, #B91C28);
	letter-spacing: .14em; text-transform: uppercase;
	margin-bottom: 8px;
}
.gg-bdir__eyebrow--light{ color: rgba(255,255,255,.78); }

.gg-bdir__btn{
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 12px 20px;
	border-radius: 12px;
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-xs, 12px);
	font-weight: 700;
	letter-spacing: .04em;
	white-space: nowrap;
	transition: all 200ms ease;
	cursor: pointer;
	border: 1.5px solid transparent;
}
.gg-bdir__btn i{ font-size: 14px; transition: transform 200ms ease; }
.gg-bdir__btn--primary{
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	color: #fff;
	box-shadow: 0 10px 26px -10px rgba(237,41,56,.6), inset 0 1px 0 rgba(255,255,255,.18);
}
.gg-bdir__btn--primary:hover{ filter: brightness(1.05); transform: translateY(-1px); color: #fff; }
.gg-bdir__btn--primary:hover i{ transform: translateX(2px); }
.gg-bdir__btn--white{
	background: var(--gg-white, #fff);
	color: var(--gg-red-deep, #B91C28);
	box-shadow: 0 10px 26px -10px rgba(0,0,0,.4);
}
.gg-bdir__btn--white:hover{ transform: translateY(-1px); }
.gg-bdir__btn--white:hover i{ transform: translateX(2px); }

/* ── Breadcrumb ──────────────────────────────────────────────────────── */
.gg-bdir__crumbs{ margin-bottom: clamp(14px, 2vw, 20px); }
.gg-bdir__crumbs-list{
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-xs, 12px);
	font-weight: 600;
	color: var(--gg-gray-500, #6B7280);
}
.gg-bdir__crumbs-list li{ display: inline-flex; align-items: center; gap: 8px; }
.gg-bdir__crumbs-list li:not(:last-child)::after{
	content: "/"; color: var(--gg-gray-300, #D1D5DB); font-weight: 500;
}
.gg-bdir__crumbs-list a{ color: var(--gg-gray-500, #6B7280); transition: color 180ms ease; }
.gg-bdir__crumbs-list a:hover{ color: var(--gg-red-deep, #B91C28); }
.gg-bdir__crumbs-list span[aria-current]{ color: var(--gg-gray-800, #1F2937); }

/* ── Compact header ──────────────────────────────────────────────────────
   Short intro card: text on the left, stats as icon chips on the right. Same
   family as the blog header but wider, and with the stats moved inline beside
   the title instead of below it — so the band stays low even on desktop.    */
.gg-bdir__head{
	position: relative;
	overflow: hidden;
	border-radius: var(--gg-r-xl, 16px);
	padding: clamp(16px, 2vw, 24px) clamp(18px, 2.4vw, 28px);
	margin-bottom: clamp(14px, 2vw, 20px);
	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, #fff);
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	box-shadow: 0 1px 2px rgba(237,41,56,.04), 0 4px 14px rgba(237,41,56,.05);
}
.gg-bdir__head-glow{
	position: absolute; top: -60px; right: -50px;
	width: 220px; height: 220px; border-radius: 50%;
	background: radial-gradient(circle, var(--gg-red-glow, rgba(237,41,56,.18)), transparent 60%);
	filter: blur(20px); pointer-events: none;
}
.gg-bdir__head-inner{
	position: relative;
	display: flex; align-items: center; justify-content: space-between;
	gap: clamp(20px, 3vw, 40px); flex-wrap: wrap;
}
.gg-bdir__head-text{ min-width: 0; flex: 1 1 380px; }

.gg-bdir__eyebrow{
	display: inline-flex; align-items: center; gap: 7px;
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-xs, 12px);
	font-weight: 700;
	color: var(--gg-red, #ED2938);
	letter-spacing: .14em; text-transform: uppercase;
	margin-bottom: 6px;
}
.gg-bdir__eyebrow i{ font-size: 14px; }
.gg-bdir__head-title{
	font-family: var(--gg-font-head);
	font-size: clamp(var(--gg-text-xl, 22px), 2.6vw, var(--gg-text-3xl, 32px));
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.025em;
	color: var(--gg-black, #0A0A0A);
	margin: 0 0 6px;
}
.gg-bdir__head-accent{ color: var(--gg-red, #ED2938); }
.gg-bdir__head-sub{
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-sm, 13px);
	color: var(--gg-gray-600, #4B5563);
	line-height: 1.5;
	margin: 0;
	max-width: 560px;
}

/* Stats — icon chip + number + label, right-aligned beside the intro */
.gg-bdir__head-stats{
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-wrap: wrap; align-items: center;
	gap: 10px 22px;
	flex: 0 1 auto;
}
.gg-bdir__head-stat{
	display: inline-flex; align-items: center; gap: 10px;
	transition: transform 240ms ease;
}
.gg-bdir__head-stat:hover{ transform: translateY(-1px); }
.gg-bdir__head-stat-ico{
	flex-shrink: 0;
	display: inline-grid; place-items: center;
	width: 38px; height: 38px;
	border-radius: 11px;
	background: var(--gg-red-light, #FFF1F2);
	color: var(--gg-red, #ED2938);
	font-size: 17px;
	transition: all 280ms cubic-bezier(.22,1,.36,1);
}
.gg-bdir__head-stat:hover .gg-bdir__head-stat-ico{
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	color: #fff;
	transform: rotate(-4deg) scale(1.05);
}
.gg-bdir__head-stat-body{ display: inline-flex; flex-direction: column; line-height: 1.05; }
.gg-bdir__head-stat-num{
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-xl, 22px);
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--gg-black, #0A0A0A);
}
.gg-bdir__head-stat-label{
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-2xs, 11px);
	font-weight: 600;
	letter-spacing: .04em; text-transform: uppercase;
	color: var(--gg-gray-500, #6B7280);
}

/* ── Sticky filter bar ───────────────────────────────────────────────────
   Layout: [ keyword search form (grows) ] [ Category · City · Sort cells ].
   `position: sticky` keeps it in flow (no content jump). When the sentinel
   above it scrolls under the header, business-list.js adds `.is-stuck`, which
   breaks the bar out to full viewport width — mirroring the listing detail
   page's full-bleed sub-nav.                                                */
.gg-bdir__sentinel{ display: block; height: 1px; margin: 0; }
.gg-bdir__bar{
	position: sticky; top: 72px; z-index: 50;
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	padding: 12px 14px;
	margin-bottom: 16px;
	background: rgba(255,255,255,.82);
	backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	border-radius: 16px;
	box-shadow: 0 6px 20px -12px rgba(15,23,42,.18);
	transition: border-radius 220ms ease, box-shadow 220ms ease, background 220ms ease;
}
/* Full-bleed when stuck — break out of the padded main to the viewport edges. */
.gg-bdir__bar.is-stuck{
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: clamp(14px, 4vw, 28px);
	padding-right: clamp(14px, 4vw, 28px);
	border-radius: 0;
	border-left: 0; border-right: 0;
	background: rgba(255,255,255,.94);
	box-shadow: 0 8px 24px -12px rgba(15,23,42,.16);
}

/* — Keyword search form (typeable, tag-style) — */
.gg-bdir__search{
	display: flex; align-items: center; gap: 8px;
	flex: 1 1 300px; min-width: 0;
}
.gg-bdir__keywords{
	flex: 1; min-width: 0;
	display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
	padding: 5px 10px;
	min-height: 44px;
	background: var(--gg-white, #fff);
	border: 1.5px solid var(--gg-gray-200, #E5E7EB);
	border-radius: 12px;
	transition: border-color 200ms ease, box-shadow 200ms ease;
	cursor: text;
}
.gg-bdir__keywords:focus-within{
	border-color: var(--gg-red, #ED2938);
	box-shadow: 0 0 0 4px var(--gg-red-subtle, rgba(237,41,56,.07));
}
.gg-bdir__keywords-ico{ color: var(--gg-gray-400, #9CA3AF); font-size: 15px; flex-shrink: 0; }
.gg-bdir__chip{
	display: inline-flex; align-items: center; gap: 4px;
	padding: 4px 6px 4px 10px;
	border-radius: 999px;
	background: var(--gg-red-light, #FFF1F2);
	border: 1px solid var(--gg-red-subtle, rgba(237,41,56,.18));
	font-family: var(--gg-font-head);
	font-size: 12px; font-weight: 700;
	color: var(--gg-red-deep, #B91C28);
	max-width: 180px;
}
.gg-bdir__chip-label{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gg-bdir__chip-x{
	display: grid; place-items: center;
	width: 16px; height: 16px;
	border-radius: 999px;
	background: rgba(237,41,56,.14);
	color: var(--gg-red-deep, #B91C28);
	font-size: 10px; line-height: 1;
	flex-shrink: 0;
	transition: background 160ms ease, color 160ms ease;
}
.gg-bdir__chip-x:hover{ background: var(--gg-red, #ED2938); color: #fff; }
.gg-bdir__keyword-input{
	flex: 1; min-width: 80px;
	border: none; outline: none; background: none;
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-sm, 13px);
	color: var(--gg-gray-800, #1F2937);
	padding: 5px 2px;
}
.gg-bdir__keyword-input::placeholder{ color: var(--gg-gray-400, #9CA3AF); }
.gg-bdir__search-btn{
	display: inline-flex; align-items: center; gap: 6px;
	flex-shrink: 0;
	height: 44px; padding: 0 18px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	color: #fff;
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-xs, 12px); font-weight: 700;
	letter-spacing: .03em;
	box-shadow: 0 8px 20px -10px rgba(237,41,56,.6);
	transition: filter 200ms ease, transform 200ms ease;
}
.gg-bdir__search-btn i{ transition: transform 200ms ease; }
.gg-bdir__search-btn:hover{ filter: brightness(1.05); }
.gg-bdir__search-btn:hover i{ transform: translateX(2px); }

/* — Dropdown cells (Category / City / Sort) — */
.gg-bdir__cells{ display: flex; align-items: center; gap: 10px; flex: 0 0 auto; flex-wrap: wrap; }
.gg-bdir__cell{
	position: relative;
	display: inline-flex; align-items: center;
	height: 44px; min-width: 150px;
	padding-left: 12px;
	background: var(--gg-white, #fff);
	border: 1.5px solid var(--gg-gray-200, #E5E7EB);
	border-radius: 12px;
	transition: border-color 200ms ease;
}
.gg-bdir__cell:hover{ border-color: var(--gg-gray-300, #D1D5DB); }
.gg-bdir__cell:focus-within{
	border-color: var(--gg-red, #ED2938);
	box-shadow: 0 0 0 4px var(--gg-red-subtle, rgba(237,41,56,.07));
}
.gg-bdir__cell-ico{ color: var(--gg-red-deep, #B91C28); font-size: 13px; flex-shrink: 0; z-index: 1; pointer-events: none; }

/* — bootstrap-select overrides (same component as the search bar, styled to
     match the gg-bdir cell). Targets the library's internal classes only. — */
.gg-bdir__cell .bootstrap-select{
	--bs-dropdown-link-active-bg:    var(--gg-red-subtle, rgba(237,41,56,.07));
	--bs-dropdown-link-active-color: var(--gg-red-deep, #B91C28);
	--bs-dropdown-link-hover-bg:     var(--gg-red-subtle, rgba(237,41,56,.07));
	--bs-dropdown-link-hover-color:  var(--gg-red-deep, #B91C28);
	width: 100% !important; height: 100%;
}
.gg-bdir__cell .bootstrap-select > .dropdown-toggle{
	position: relative;
	width: 100%; height: 100%;
	display: flex !important; align-items: center; justify-content: flex-start !important;
	padding: 0 30px 0 8px;
	border: 0 !important; border-radius: 0 !important;
	background: transparent !important; box-shadow: none !important; outline: 0 !important;
	font-family: var(--gg-font-head);
	font-weight: 700;
	font-size: var(--gg-text-xs, 12px);
	letter-spacing: -.01em;
	color: var(--gg-gray-800, #1F2937) !important;
	text-align: left; white-space: nowrap;
}
.gg-bdir__cell .bootstrap-select > .dropdown-toggle::after{
	content: '\F282';                       /* bi-chevron-down */
	font-family: 'bootstrap-icons';
	position: absolute; right: 12px; top: 50%;
	transform: translateY(-50%);
	border: 0 !important; margin: 0 !important;
	font-size: 11px; line-height: 1;
	color: var(--gg-gray-400, #9CA3AF);
	transition: transform 150ms ease;
	pointer-events: none;
}
.gg-bdir__cell .bootstrap-select.show > .dropdown-toggle::after{ transform: translateY(-50%) rotate(180deg); }
.gg-bdir__cell .bootstrap-select .filter-option{
	position: static; display: flex; align-items: center;
	width: 100%; height: 100%; min-width: 0; padding: 0; overflow: hidden;
}
.gg-bdir__cell .bootstrap-select .filter-option-inner,
.gg-bdir__cell .bootstrap-select .filter-option-inner-inner{
	width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2;
}
.gg-bdir__cell .bootstrap-select .dropdown-menu{
	z-index: 1100;
	border: 0; border-radius: 12px;
	box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 20px 40px -8px rgba(15,23,42,.18);
	margin-top: 8px !important;
	padding: 6px;
	min-width: 200px;
	overflow: hidden;
}
.gg-bdir__cell .bootstrap-select .dropdown-menu li > a,
.gg-bdir__cell .bootstrap-select .dropdown-menu .dropdown-item{
	padding: 9px 12px; border-radius: 8px;
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-sm, 13px);
	color: var(--gg-gray-800, #1F2937);
	transition: background 150ms ease, color 150ms ease;
}
.gg-bdir__cell .bootstrap-select .dropdown-menu li > a:hover,
.gg-bdir__cell .bootstrap-select .dropdown-menu li.selected > a,
.gg-bdir__cell .bootstrap-select .dropdown-menu .dropdown-item.active,
.gg-bdir__cell .bootstrap-select .dropdown-menu .dropdown-item:active,
.gg-bdir__cell .bootstrap-select .dropdown-menu .dropdown-item:focus{
	background: var(--gg-red-subtle, rgba(237,41,56,.07)) !important;
	color: var(--gg-red-deep, #B91C28) !important;
}
.gg-bdir__cell .bootstrap-select .bs-searchbox{ padding: 4px 4px 6px; border-bottom: 1px solid var(--gg-gray-100, #F3F4F6); margin-bottom: 4px; }
.gg-bdir__cell .bootstrap-select .bs-searchbox input{
	width: 100%; border: 1px solid var(--gg-gray-200, #E5E7EB) !important; border-radius: 8px !important;
	padding: 8px 12px; background: var(--gg-gray-50, #F9FAFB) !important; box-shadow: none !important;
	font-size: var(--gg-text-sm, 13px); color: var(--gg-gray-800, #1F2937); outline: 0;
}
.gg-bdir__cell .bootstrap-select .bs-searchbox input:focus{ border-color: var(--gg-red, #ED2938) !important; background: var(--gg-white, #fff) !important; }

/* ── Toolbar (count + clear) ─────────────────────────────────────────── */
.gg-bdir__toolbar{
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; flex-wrap: wrap;
	margin-bottom: 18px;
}
.gg-bdir__count{
	margin: 0;
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-base, 15px);
	color: var(--gg-gray-600, #4B5563);
}
.gg-bdir__count strong{
	font-family: var(--gg-font-head);
	font-weight: 800;
	color: var(--gg-black, #0A0A0A);
}
.gg-bdir__count-ctx{ color: var(--gg-gray-400, #9CA3AF); }
.gg-bdir__count-ctx::before{ content: "· "; }
.gg-bdir__clear{
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-xs, 12px);
	font-weight: 700;
	color: var(--gg-gray-600, #4B5563);
	padding: 7px 12px;
	border-radius: 999px;
	border: 1.5px solid var(--gg-gray-200, #E5E7EB);
	transition: all 200ms ease;
}
.gg-bdir__clear:hover{
	color: var(--gg-red-deep, #B91C28);
	border-color: var(--gg-red-subtle, rgba(237,41,56,.32));
	background: var(--gg-red-light, #FFF1F2);
}

/* ── Business grid ───────────────────────────────────────────────────── */
.gg-bdir__grid{
	list-style: none; padding: 0; margin: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}
@media (max-width: 1100px){ .gg-bdir__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px){  .gg-bdir__grid{ grid-template-columns: 1fr; } }

/* ── Card ──
   Cover banner → overlapping circular logo (with verified tick) → body.
   Hover: -6px lift, soft red shadow, cover zoom, red bottom sweep.        */
.gg-bdir__card{
	position: relative;
	background: var(--gg-white, #fff);
	border-radius: 18px;
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(15,23,42,.04);
	transition: transform 320ms cubic-bezier(.16,1,.3,1),
	            box-shadow 320ms ease,
	            border-color 320ms ease;
}
.gg-bdir__card::after{
	content: "";
	position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
	background: linear-gradient(90deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	transform: scaleX(0); transform-origin: left center;
	transition: transform 380ms cubic-bezier(.16,1,.3,1);
	z-index: 3;
}
.gg-bdir__card:hover{
	transform: translateY(-6px);
	box-shadow: 0 1px 2px rgba(237,41,56,.06), 0 24px 44px -16px rgba(237,41,56,.22);
	border-color: var(--gg-red-subtle, rgba(237,41,56,.32));
}
.gg-bdir__card:hover::after{ transform: scaleX(1); }
.gg-bdir__card.is-featured{ border-color: rgba(237,41,56,.28); }

.gg-bdir__card-link{ display: block; color: inherit; }

/* Cover banner */
.gg-bdir__card-cover{
	position: relative;
	aspect-ratio: 16 / 7;
	overflow: hidden;
	background: var(--gg-gray-100, #F3F4F6);
}
.gg-bdir__card-cover img{
	width: 100%; height: 100%;
	object-fit: cover;
	transform: scale(1.03);
	transition: transform 900ms cubic-bezier(.16,1,.3,1), filter 320ms ease;
}
.gg-bdir__card:hover .gg-bdir__card-cover img{ transform: scale(1.09); filter: saturate(1.08); }
.gg-bdir__card-veil{
	position: absolute; inset: 0;
	background:
		linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(10,10,10,.46) 100%),
		linear-gradient(135deg, rgba(237,41,56,.14) 0%, rgba(0,0,0,0) 55%);
	pointer-events: none;
}
.gg-bdir__card-cat{
	position: absolute; top: 12px; left: 12px;
	padding: 5px 11px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	color: #fff;
	font-family: var(--gg-font-head);
	font-size: 10px; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase;
	box-shadow: 0 6px 14px -4px rgba(237,41,56,.55);
	z-index: 2;
}
.gg-bdir__card-flag{
	position: absolute; top: 12px; right: 12px;
	display: inline-flex; align-items: center; gap: 5px;
	padding: 5px 10px;
	border-radius: 999px;
	background: rgba(255,255,255,.94);
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	font-family: var(--gg-font-head);
	font-size: 10px; font-weight: 800;
	letter-spacing: .04em; text-transform: uppercase;
	color: var(--gg-gray-800, #1F2937);
	box-shadow: 0 4px 12px -4px rgba(15,23,42,.18);
	z-index: 2;
}
.gg-bdir__card-flag i{ color: #FBBF24; font-size: 10px; }

/* Overlapping logo */
.gg-bdir__card-logo{
	position: relative;
	width: 64px; height: 64px;
	margin: -32px 0 0 18px;
	border-radius: 16px;
	border: 3px solid var(--gg-white, #fff);
	overflow: visible;
	background: var(--gg-white, #fff);
	box-shadow: 0 8px 20px -8px rgba(15,23,42,.28);
	z-index: 2;
}
.gg-bdir__card-logo img{
	width: 100%; height: 100%;
	object-fit: cover; border-radius: 13px;
}
.gg-bdir__card-tick{
	position: absolute; right: -5px; bottom: -5px;
	font-size: 18px;
	color: var(--gg-red, #ED2938);
	background: var(--gg-white, #fff);
	border-radius: 50%;
	line-height: 1;
}

/* Body */
.gg-bdir__card-body{ padding: 12px 18px 18px; }
.gg-bdir__card-head{
	display: flex; align-items: flex-start; justify-content: space-between;
	gap: 10px; margin-bottom: 8px;
}
.gg-bdir__card-name{
	margin: 0;
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-lg, 18px);
	font-weight: 800;
	letter-spacing: -.015em;
	color: var(--gg-black, #0A0A0A);
	line-height: 1.25;
	transition: color 220ms ease;
}
.gg-bdir__card:hover .gg-bdir__card-name{ color: var(--gg-red-deep, #B91C28); }
.gg-bdir__card-rating{
	display: inline-flex; align-items: center; gap: 4px;
	flex-shrink: 0;
	padding: 4px 9px;
	border-radius: 999px;
	background: var(--gg-gray-50, #F9FAFB);
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	font-family: var(--gg-font-head);
	font-size: 12px;
	color: var(--gg-gray-800, #1F2937);
}
.gg-bdir__card-rating i{ color: #FBBF24; font-size: 11px; }
.gg-bdir__card-rating strong{ font-weight: 800; letter-spacing: -.01em; }
.gg-bdir__card-rating em{ font-style: normal; color: var(--gg-gray-500, #6B7280); font-size: 10px; font-weight: 500; }

.gg-bdir__card-tagline{
	margin: 0 0 12px;
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-sm, 13px);
	color: var(--gg-gray-600, #4B5563);
	line-height: 1.5;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden;
}
.gg-bdir__card-tags{
	list-style: none; padding: 0; margin: 0 0 14px;
	display: flex; flex-wrap: wrap; gap: 5px;
}
.gg-bdir__card-tags li{
	font-family: var(--gg-font-head);
	font-size: 10px; font-weight: 700;
	color: var(--gg-gray-700, #374151);
	padding: 3px 9px;
	background: var(--gg-gray-50, #F9FAFB);
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	border-radius: 999px;
	letter-spacing: .03em;
}
.gg-bdir__card-meta{
	display: flex; flex-wrap: wrap; gap: 6px 14px;
	margin-bottom: 14px;
}
.gg-bdir__card-meta-item{
	display: inline-flex; align-items: center; gap: 5px;
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-xs, 12px);
	font-weight: 600;
	color: var(--gg-gray-500, #6B7280);
}
.gg-bdir__card-meta-item i{ color: var(--gg-red-deep, #B91C28); font-size: 12px; }

.gg-bdir__card-foot{
	display: flex; align-items: center; justify-content: space-between;
	gap: 8px;
	padding-top: 12px;
	border-top: 1px dashed var(--gg-gray-200, #E5E7EB);
}
.gg-bdir__card-since{
	font-family: var(--gg-font-head);
	font-size: 11px; font-weight: 700;
	letter-spacing: .03em;
	color: var(--gg-gray-500, #6B7280);
}
.gg-bdir__card-cta{
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--gg-font-head);
	font-size: 11px; font-weight: 800;
	letter-spacing: .04em; text-transform: uppercase;
	color: var(--gg-gray-800, #1F2937);
	transition: color 220ms ease, gap 220ms ease;
}
.gg-bdir__card-cta i{
	width: 22px; height: 22px;
	display: grid; place-items: center;
	border-radius: 999px;
	background: var(--gg-gray-100, #F3F4F6);
	color: var(--gg-gray-700, #374151);
	font-size: 12px;
	transition: background 220ms ease, color 220ms ease, transform 320ms cubic-bezier(.16,1,.3,1);
}
.gg-bdir__card:hover .gg-bdir__card-cta{ color: var(--gg-red-deep, #B91C28); gap: 10px; }
.gg-bdir__card:hover .gg-bdir__card-cta i{
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	color: #fff; transform: translateX(2px);
	box-shadow: 0 4px 10px -4px rgba(237,41,56,.5);
}

/* ── Empty state ─────────────────────────────────────────────────────── */
.gg-bdir__empty{
	text-align: center;
	padding: clamp(40px, 6vw, 72px) 20px;
	background: var(--gg-white, #fff);
	border: 1px dashed var(--gg-gray-200, #E5E7EB);
	border-radius: 18px;
}
.gg-bdir__empty-ico{
	width: 64px; height: 64px; margin: 0 auto 18px;
	display: grid; place-items: center;
	border-radius: 18px;
	background: var(--gg-red-light, #FFF1F2);
	color: var(--gg-red, #ED2938);
	font-size: 28px;
}
.gg-bdir__empty h2{
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-xl, 22px);
	font-weight: 800;
	color: var(--gg-black, #0A0A0A);
	margin: 0 0 8px;
}
.gg-bdir__empty p{
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-base, 15px);
	color: var(--gg-gray-500, #6B7280);
	margin: 0 0 22px;
}

/* ── Pagination ──────────────────────────────────────────────────────── */
.gg-bdir__pager-meta{
	text-align: center;
	margin: 30px 0 14px;
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-sm, 13px);
	color: var(--gg-gray-500, #6B7280);
}
.gg-bdir__pager-meta strong{ color: var(--gg-gray-800, #1F2937); font-weight: 700; }
.gg-bdir__pager{
	display: flex; align-items: center; justify-content: center;
	flex-wrap: wrap; gap: 8px;
	margin-bottom: 8px;
}
.gg-bdir__pager-btn{
	display: inline-flex; align-items: center; gap: 6px;
	padding: 9px 16px;
	border-radius: 10px;
	border: 1.5px solid var(--gg-gray-200, #E5E7EB);
	background: var(--gg-white, #fff);
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-xs, 12px);
	font-weight: 700;
	color: var(--gg-gray-700, #374151);
	transition: all 200ms ease;
}
.gg-bdir__pager-btn:hover{
	border-color: var(--gg-red-subtle, rgba(237,41,56,.32));
	color: var(--gg-red-deep, #B91C28);
}
.gg-bdir__pager-btn.is-disabled{ opacity: .4; pointer-events: none; }
.gg-bdir__pager-pages{
	list-style: none; padding: 0; margin: 0;
	display: flex; align-items: center; gap: 6px;
}
.gg-bdir__pager-page{
	display: grid; place-items: center;
	min-width: 40px; height: 40px;
	padding: 0 8px;
	border-radius: 10px;
	border: 1.5px solid var(--gg-gray-200, #E5E7EB);
	background: var(--gg-white, #fff);
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-sm, 13px);
	font-weight: 700;
	color: var(--gg-gray-700, #374151);
	transition: all 200ms ease;
}
.gg-bdir__pager-page:hover{
	border-color: var(--gg-red-subtle, rgba(237,41,56,.32));
	color: var(--gg-red-deep, #B91C28);
}
.gg-bdir__pager-page.is-current{
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	border-color: transparent;
	color: #fff;
	box-shadow: 0 6px 14px -6px rgba(237,41,56,.5);
}
.gg-bdir__pager-gap{
	display: grid; place-items: center;
	min-width: 28px; height: 40px;
	color: var(--gg-gray-400, #9CA3AF);
	font-weight: 700;
}

/* ── Load more (blog-style, progressive enhancement) ─────────────────── */
.gg-bdir__loadmore-wrap{ display: flex; justify-content: center; margin-top: clamp(14px, 2vw, 20px); }
.gg-bdir__loadmore{
	position: relative;
	display: inline-flex; align-items: center; gap: 8px;
	overflow: hidden;
	padding: 13px 28px;
	border-radius: 999px;
	border: 1.5px solid var(--gg-red, #ED2938);
	background: var(--gg-white, #fff);
	color: var(--gg-red, #ED2938);
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-sm, 13px);
	font-weight: 700;
	letter-spacing: .02em;
	transition: background 220ms ease, color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}
.gg-bdir__loadmore-glow{
	position: absolute; top: 0; left: -100%;
	width: 100%; height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
	transition: left 600ms ease;
	pointer-events: none;
}
.gg-bdir__loadmore:hover{
	background: var(--gg-red, #ED2938);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 14px 32px -10px rgba(237,41,56,.55);
}
.gg-bdir__loadmore:hover .gg-bdir__loadmore-glow{ left: 100%; }
.gg-bdir__loadmore[disabled]{ opacity: .65; pointer-events: none; }
.gg-bdir__loadmore-spinner{
	display: none;
	width: 15px; height: 15px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: gg-bdir-spin .6s linear infinite;
}
.gg-bdir__loadmore.is-loading{ background: var(--gg-red, #ED2938); color: #fff; }
.gg-bdir__loadmore.is-loading .gg-bdir__loadmore-spinner{ display: inline-block; }
@keyframes gg-bdir-spin{ to { transform: rotate(360deg); } }

/* Newly appended cards fade + rise in */
.gg-bdir__card.is-new{ animation: gg-bdir-cardin .5s var(--gg-ease, cubic-bezier(.16,1,.3,1)) both; }
@keyframes gg-bdir-cardin{ from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ── Bottom CTA banner ───────────────────────────────────────────────── */
.gg-bdir__cta{
	position: relative;
	overflow: hidden;
	margin-top: clamp(36px, 5vw, 64px);
	border-radius: var(--gg-r-xl, 16px);
	background: linear-gradient(135deg, var(--gg-black, #0A0A0A), var(--gg-black-soft, #141414));
}
.gg-bdir__cta-glow{
	position: absolute; inset: 0;
	background:
		radial-gradient(600px 300px at 12% 120%, rgba(237,41,56,.4), transparent 70%),
		radial-gradient(500px 260px at 95% -20%, rgba(237,41,56,.28), transparent 70%);
	pointer-events: none;
}
.gg-bdir__cta-inner{
	position: relative;
	display: flex; align-items: center; justify-content: space-between;
	gap: clamp(20px, 4vw, 48px); flex-wrap: wrap;
	padding: clamp(28px, 4vw, 48px) clamp(22px, 4vw, 56px);
}
.gg-bdir__cta-title{
	font-family: var(--gg-font-head);
	font-size: clamp(var(--gg-text-xl, 22px), 3vw, var(--gg-text-3xl, 36px));
	font-weight: 800;
	letter-spacing: -.02em;
	color: #fff;
	margin: 0 0 8px;
	line-height: 1.15;
}
.gg-bdir__cta-sub{
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-base, 15px);
	color: rgba(255,255,255,.72);
	margin: 0;
	max-width: 520px;
}
.gg-bdir__cta-actions{ flex-shrink: 0; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 900px){
	.gg-bdir__bar{ top: 64px; }
	.gg-bdir__search{ flex: 1 1 100%; }
	.gg-bdir__cells{ width: 100%; }
	.gg-bdir__cell{ flex: 1 1 140px; min-width: 0; }
}
/* Compact header: stack stats under the intro, and let them wrap as a row. */
@media (max-width: 860px){
	.gg-bdir__head-inner{ align-items: flex-start; }
	.gg-bdir__head-stats{
		width: 100%;
		gap: 14px 20px;
		margin-top: 14px; padding-top: 14px;
		border-top: 1px dashed var(--gg-gray-200, #E5E7EB);
	}
}
@media (max-width: 640px){
	.gg-bdir__head-stats{ justify-content: space-between; gap: 12px; }
	.gg-bdir__head-stat{ gap: 8px; }
	.gg-bdir__head-stat-ico{ width: 32px; height: 32px; font-size: 15px; }
	.gg-bdir__head-stat-num{ font-size: var(--gg-text-lg, 18px); }
	.gg-bdir__cells{ flex-direction: column; align-items: stretch; }
	.gg-bdir__cell{ flex: 1 1 auto; }
	.gg-bdir__cta-actions{ width: 100%; }
	.gg-bdir__cta-actions .gg-bdir__btn{ width: 100%; }
	.gg-bdir__pager-btn-label{ display: none; }
}

/* ── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
	.gg-bdir__card,
	.gg-bdir__card-cover img,
	.gg-bdir__card-cta i,
	.gg-bdir__card::after{ transition: none !important; }
}