/*!
 * Baly Digital — Category listing ([baly_category_listing]).
 * Faithful port of baly-design-system/Baly Digital/Service Listing.html.
 * Shared chrome (trust-band, catnav, card, faq, pd-about, hd-pill) lives in
 * baly-dg-kit.css; this file holds the page-specific header + grid. Scoped
 * under .bdg (.bdg--listing).
 */

.bdg--listing .lp-head {
	background: linear-gradient(160deg, #00237A 0%, #0043FF 58%, #2F62FF 100%);
	color: #fff;
	border-radius: var(--radius-2xl);
	margin-top: clamp(20px, 3vw, 32px);
	padding: clamp(28px, 4vw, 44px);
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	gap: 28px;
	box-shadow: 0 28px 60px -26px rgba(0,30,80,0.5);
}
.bdg--listing .lp-head::before { content: ""; position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(rgba(255,255,255,0.4) 1.4px, transparent 1.4px); background-size: 30px 30px; }
.bdg--listing .lp-head::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 4%, rgba(120,160,255,0.4), transparent 55%); }
.bdg--listing .lp-head__ic { width: 88px; height: 88px; flex: none; border-radius: var(--radius-xl); background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.22); display: grid; place-items: center; position: relative; z-index: 2; }
.bdg--listing .lp-head__ic svg { width: 46px; height: 46px; color: #fff; }
.bdg--listing .lp-head__txt { position: relative; z-index: 2; }
.bdg--listing .lp-head__crumb { font-size: var(--text-sm); color: rgba(255,255,255,0.7); margin-bottom: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.bdg--listing .lp-head__crumb a:hover { color: #fff; }
.bdg--listing .lp-head h1 { font-size: var(--text-3xl); font-weight: var(--font-black); margin: 0 0 8px; letter-spacing: -0.02em; }
.bdg--listing .lp-head p { margin: 0; color: rgba(255,255,255,0.85); font-size: var(--text-md); max-width: 52ch; }

.bdg--listing .lp-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: var(--space-8); }
.bdg--listing .lp-empty { text-align: center; padding: 60px; color: var(--fg-tertiary); grid-column: 1 / -1; font-weight: 600; }

@media (max-width: 980px) {
	.bdg--listing .lp-grid { grid-template-columns: repeat(4, 1fr); }
	.bdg--listing .lp-head { flex-direction: column; align-items: flex-start; text-align: right; }
}
@media (max-width: 640px) {
	.bdg--listing .lp-grid { grid-template-columns: repeat(3, 1fr); }
	.bdg--listing .lp-head h1 { font-size: var(--text-2xl); }
}