/*
 * BE Brand Directory — ported from reference site.css (base block; no later version block
 * touches these classes): .notes-grid (+ ≤900px), .sec/.alt bands (brands.html sets
 * padding-block:56px and scroll-margin-top:var(--hdr) inline), .shead, .eyebrow, .h-sec, .link,
 * .pgrid.c5 (+ ≤1100px and ≤760px). Shared helpers (.pad, .wrap) are scoped here so the widget
 * does not depend on the site layer. Style controls write the --be-bd-* properties.
 */

.elementor-widget-be-brand-directory {
	width: 100%;
}

.elementor-widget-be-brand-directory .be-bd .pad {
	padding-left: var(--gl);
	padding-right: var(--gr);
}

.elementor-widget-be-brand-directory .be-bd .wrap {
	max-width: var(--maxw);
	margin: 0 auto;
}

/* ---------- A–Z grid ---------- */
.elementor-widget-be-brand-directory .be-bd-jump {
	padding-bottom: var(--be-bd-jump-pb, 40px);
}

.elementor-widget-be-brand-directory .be-bd-jump-title {
	margin: 0 0 20px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.7;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--be-bd-jump-title, var(--soft));
}

.elementor-widget-be-brand-directory .be-bd .notes-grid {
	display: grid;
	grid-template-columns: repeat(var(--be-bd-jump-cols, 6), minmax(0, 1fr));
	background: var(--be-bd-jump-bg, var(--ink));
	border-left: 1px solid var(--be-bd-jump-line, var(--dline));
	border-top: 1px solid var(--be-bd-jump-line, var(--dline));
}

.be-site .elementor-widget-be-brand-directory .be-bd .notes-grid a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: var(--be-bd-jump-h, 72px);
	padding: 0 8px;
	color: var(--be-bd-jump-color, var(--bone));
	font-family: var(--f);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.7;
	text-align: center;
	text-decoration: none;
	border-right: 1px solid var(--be-bd-jump-line, var(--dline));
	border-bottom: 1px solid var(--be-bd-jump-line, var(--dline));
	transition: background .2s, color .2s;
}

.be-site .elementor-widget-be-brand-directory .be-bd .notes-grid a:hover {
	background: var(--be-bd-jump-hover-bg, var(--amber));
	color: var(--be-bd-jump-hover, #fff);
}

.be-site .elementor-widget-be-brand-directory .be-bd .notes-grid a:focus-visible {
	outline: 2px solid var(--be-bd-jump-hover-bg, var(--amber));
	outline-offset: -4px;
}

.elementor-widget-be-brand-directory .be-bd .notes-grid a small {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .08em;
	line-height: 1.4;
	color: var(--be-bd-jump-num, var(--ash));
	transition: color .2s;
}

.elementor-widget-be-brand-directory .be-bd .notes-grid a:hover small {
	color: inherit;
}

/* ---------- Brand bands ---------- */
.elementor-widget-be-brand-directory .be-bd .be-bd-sec {
	padding-block: var(--be-bd-sec-pad, 56px);
	background: var(--be-bd-band-odd, var(--paper));
	scroll-margin-top: var(--hdr, 84px);
}

.elementor-widget-be-brand-directory .be-bd .be-bd-sec.alt {
	background: var(--be-bd-band-even, var(--paper2));
}

.elementor-widget-be-brand-directory .be-bd .shead {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 12px 24px;
	margin-bottom: var(--be-bd-head-gap, 36px);
}

.elementor-widget-be-brand-directory .be-bd .shead > div {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.elementor-widget-be-brand-directory .be-bd .eyebrow {
	margin: 0;
	font-family: var(--f);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.7;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--be-bd-eyebrow, var(--soft));
}

.elementor-widget-be-brand-directory .be-bd .h-sec {
	margin: 0;
	font-family: var(--f);
	font-size: clamp(26px, 2.6vw, 34px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.01em;
	text-transform: none;
	text-wrap: balance;
	color: var(--be-bd-name, var(--text));
}

.be-site .elementor-widget-be-brand-directory .be-bd .shead a.link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	font-family: var(--f);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.7;
	letter-spacing: .18em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--be-bd-link, var(--soft));
	transition: color .2s, gap .2s;
}

.be-site .elementor-widget-be-brand-directory .be-bd .shead a.link:hover {
	color: var(--be-bd-link-hover, var(--text));
	gap: 12px;
}

.elementor-widget-be-brand-directory .be-bd .shead a.link svg {
	width: 16px;
	height: 10px;
	flex: 0 0 auto;
}

.elementor-widget-be-brand-directory .be-bd .shead a.link i {
	font-size: 12px;
}

.elementor-widget-be-brand-directory .be-bd .be-bd-empty {
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
	color: var(--be-bd-empty, var(--muted));
}

/* ---------- Card grid ---------- */
.elementor-widget-be-brand-directory .be-bd .pgrid {
	display: grid;
	gap: var(--be-bd-row-gap, 44px) var(--be-bd-col-gap, 22px);
	grid-template-columns: repeat(var(--be-bd-cols, 5), minmax(0, 1fr));
}

/* Same as Pro's Loop Grid: the card root fills its cell. */
.elementor-widget-be-brand-directory .be-bd .pgrid > .e-loop-item > .e-con {
	height: 100%;
}

@media (max-width: 1100px) {
	.elementor-widget-be-brand-directory .be-bd .pgrid {
		grid-template-columns: repeat(var(--be-bd-cols-mid, 3), minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.elementor-widget-be-brand-directory .be-bd .notes-grid {
		grid-template-columns: repeat(var(--be-bd-jump-cols-m, 3), minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.elementor-widget-be-brand-directory .be-bd .pgrid {
		grid-template-columns: repeat(var(--be-bd-cols-m, 2), minmax(0, 1fr));
		gap: var(--be-bd-row-gap-m, 34px) var(--be-bd-col-gap-m, 14px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.be-site .elementor-widget-be-brand-directory .be-bd .notes-grid a,
	.be-site .elementor-widget-be-brand-directory .be-bd .notes-grid a small,
	.be-site .elementor-widget-be-brand-directory .be-bd .shead a.link {
		transition: none;
	}
}