/*--------------------------------------------------------------
Level Up GBN — public (restricted) member directory,
inc/public-directory.php + page-directory.php.

Deliberately a mirror of members-directory.css: same deep-forest
full-bleed band, same search-over-sidebar-over-grid layout, same
white member card. A logged-out visitor and a member should be
looking at the same product.

It is a mirror rather than a shared file because the two pages have
almost nothing in common structurally — that one is BuddyBoss's
member loop being wrestled into shape with !important, this one is
our own markup that can simply be given the right classes. Merging
them would mean inheriting that fight here for no benefit. What is
shared is the design, and where a value here matches one there
(76px avatar, 8px radius, 16px padding, the pagination pill) it is
because the design says so, and the two should be changed together.

The --lu-color-* tokens come from lu-internal.css, which this page
opts into via the lugbn_is_internal_design_system_page filter.
--------------------------------------------------------------*/

body.lugbn-public-directory-page {
	background: var(--lu-color-green-white, #F2F5F0);
	/* Required by the full-bleed band below — without it the -100vw
	   margins give the document a horizontal scrollbar. */
	overflow-x: hidden;
}

body.lugbn-public-directory-page #primary.content-area,
body.lugbn-public-directory-page .site-content-grid {
	padding-top: 0;
	padding-bottom: 56px;
}

/* The WP page title sits outside our container and would print above
   the band. The band carries its own <h1>. */
body.lugbn-public-directory-page .entry-header,
body.lugbn-public-directory-page .entry-title {
	display: none;
}

/* ─── Layout ──────────────────────────────────────────────────────────────── */

/* Width matches .lu-container--max in lu-design-system.css, so the directory's
   content edge lines up with every other public page. The page template is
   page-fullwidth-content, whose .container carries no max-width of its own —
   without this the grid ran the full viewport.

   This selector stays a bare class ON PURPOSE. Every responsive override below
   is `.lugbn-public-directory` (0,1,0), and media queries contribute nothing to
   specificity — so raising this rule to 0,3,0 silently kills the entire
   responsive layout, desktop columns and all, down to 320px. Only `padding`
   needs the extra weight; it lives in its own rule below. */
.lugbn-public-directory {
	display: grid;
	grid-template-columns: 236px 1fr;
	/* The 1fr on the last row is load-bearing, not cosmetic. `content` spans
	   rows 2-4, and when every row is `auto` grid distributes that item's
	   height across all of them — the count and search rows inflate by a share
	   of the card grid and the sidebar gets pushed hundreds of px down the page.
	   A flexible final row absorbs the span instead. members-directory.css:37
	   carries the same declaration for the same reason. Add a row here and you
	   must add it to this list too, or the new row starts absorbing height. */
	grid-template-rows: auto auto auto 1fr;
	grid-template-areas:
		"hero    hero"
		"count   content"
		"search  content"
		"sidebar content";
	column-gap: 40px;
	row-gap: 0;
	align-items: start;
	width: 100%;
	max-width: 1420px;
	margin: 0 auto;
}

/* Body-scoped for specificity, not style, and deliberately isolated to the one
   property that needs it: this is a .bb-grid child, and BuddyBoss's
   `.bb-grid > :not(.no-gutter)` sets `padding: 10px`. :not() carries its
   argument's weight, so that rule is 0,2,0 and a bare `.lugbn-public-directory`
   (0,1,0) loses to it no matter how late it loads. */
body.lugbn-public-directory-page .lugbn-public-directory {
	padding: 0 24px;
}

/* Full-bleed deep-forest band behind the hero row. Four pieces are
   needed and all four matter: the pseudo-element spanning every
   column, the -100vw side margins that push it past the container,
   `overflow-x: hidden` on the body (above), and `position: relative`
   on the real grid items (below) so they stack above it. */
.lugbn-public-directory::before {
	content: '';
	grid-area: hero;
	grid-column: 1 / -1;
	align-self: stretch;
	margin: 0 -100vw;
	background: var(--lu-color-deep-forest, #032E1C);
}

.lugbn-public-directory > * {
	position: relative;
}

/* ─── Hero ────────────────────────────────────────────────────────────────── */

/* Mirrors .lu-hero.lu-hero--centered from lu-design-system.css so this reads as
   the same hero as /membership/ and the rest of the public pages.
   Deliberately mirrored here rather than by adding those classes in the markup,
   because .lu-hero's own declarations lean on tokens this page does not have —
   see the two below.

   The public header is absolute and transparent (body.lu-transparent-header),
   so it floats over this band rather than sitting above it, and #content's 76px
   top padding is zeroed with it. The 140px top is the marketing hero's own
   value and already clears the 80px header. */
.lugbn-public-directory__hero {
	grid-area: hero;

	/* The two tokens lu-design-system.css scopes to .lu-page, which this page
	   never renders. It loads lu-internal.css for tokens instead, and that file
	   defines neither: --lu-font-display is omitted on purpose (no Anton behind
	   the login) and the spacing scale isn't there at all. Without these,
	   .lu-h1's font-family resolved to nothing and fell back to the system face.
	   /directory/ is a public page, so the display face belongs here; scoping
	   the token to this hero keeps it out of the internal pages. */
	--lu-font-display: 'Anton', sans-serif;
	--lu-space-8: 2rem;

	padding: 140px 0 4rem;
	text-align: center;
	color: var(--lu-color-white, #fff);
}

/* .lu-h1 is `color: inherit !important` and sizes itself for a full-width
   marketing hero; on the real pages `.lu-hero .lu-h1` overrides both. Same two
   overrides, same values. */
.lugbn-public-directory__hero .lu-h1 {
	color: var(--lu-color-green-white, #F2F5F0) !important;
	font-size: clamp(2.25rem, 5vw, 4.5rem);
}

.lugbn-public-directory__hero .lu-large {
	max-width: 46ch;
	margin-left: auto;
	margin-right: auto;
}

.lugbn-public-directory__hero .lu-hero-actions {
	justify-content: center;
}

.lugbn-public-directory__title {
	margin: 0;
	font-family: var(--lu-font-body, 'Instrument Sans', sans-serif);
	font-size: 30px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--lu-color-white, #fff);
}

.lugbn-public-directory__lede {
	margin: 12px 0 0;
	font-size: 15px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.75);
}

/* ─── Count ───────────────────────────────────────────────────────────────── */

/* Sits in the narrow left column directly above the search box. It carries the
   search box's own 28px top margin so the two read as one block and the card
   grid still starts level with it — the search rule below drops to 0 to match. */
.lugbn-public-directory__count {
	grid-area: count;
	margin: 28px 0 10px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--lu-color-caddy, #6B7570);
}

/* ─── Search ──────────────────────────────────────────────────────────────── */

.lugbn-public-directory__search {
	grid-area: search;
	display: flex;
	align-items: center;
	width: 100%;
	margin: 0 0 24px;
	background: var(--lu-color-white, #fff);
	border: 1px solid #E1E6DE;
	border-radius: 8px;
}

.lugbn-public-directory__search input[type="search"] {
	min-width: 0;
	flex: 1 1 auto;
	height: 44px;
	padding: 0 12px 0 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	font-size: 15px;
	color: var(--lu-color-graphite, #2A2D2F);
}

.lugbn-public-directory__search input[type="search"]:focus {
	outline: none;
}

.lugbn-public-directory__search:focus-within {
	border-color: var(--lu-color-electric-turf, #1FCB60);
}

/* order: -1 puts the magnifier at the leading edge visually while the
   button stays after the input in the DOM, so tabbing reaches the
   field first. */
.lugbn-public-directory__search button {
	order: -1;
	padding: 0 8px 0 12px;
	background: transparent;
	border: 0;
	line-height: 0;
	color: var(--lu-color-caddy, #6B7570);
	cursor: pointer;
}

/* ─── Filters sidebar ─────────────────────────────────────────────────────── */

.lugbn-public-directory__filters {
	grid-area: sidebar;
}

.lugbn-public-directory-filter {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	margin: 0;
}

.lugbn-public-directory-filter label {
	font-size: 14px;
	font-weight: 500;
	color: var(--lu-color-graphite, #2A2D2F);
}

.lugbn-public-directory-filter select {
	width: 100%;
	max-width: none;
	height: 46px;
	padding: 0 12px 0 14px;
	background-color: var(--lu-color-white, #fff);
	border: 1px solid #E1E6DE;
	border-radius: 8px;
	font-size: 15px;
	color: var(--lu-color-graphite, #2A2D2F);
}

.lugbn-public-directory-filter select:focus {
	outline: none;
	border-color: var(--lu-color-electric-turf, #1FCB60);
}

/* ─── Results grid ────────────────────────────────────────────────────────── */

.lugbn-public-directory__content {
	grid-area: content;
	min-width: 0;
	/* Lines the first row of cards up with the search box beside it. */
	padding-top: 28px;
}

.lugbn-public-directory-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ─── Card ────────────────────────────────────────────────────────────────── */

.lugbn-public-member {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 16px;
	background: var(--lu-color-white, #fff);
	border-radius: 8px;
	text-align: center;
}

.lugbn-public-member-avatar img {
	display: block;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	object-fit: cover;
}

.lugbn-public-member-name {
	margin-top: 14px;
	font-family: var(--lu-font-heading, 'Radio Canada Big', 'Instrument Sans', sans-serif);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--lu-color-deep-forest, #032E1C);
}

/* min-height, and rendered even when empty, so that a member with no
   company doesn't pull their card shorter than the rest of the row —
   the same reason the Club Members card prints both of its meta lines
   unconditionally. */
.lugbn-public-member-company {
	display: block;
	width: 100%;
	min-height: 20px;
	margin-top: 8px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: #4F5A55;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ─── Empty state ─────────────────────────────────────────────────────────── */

.lugbn-public-directory-empty {
	margin: 0;
	padding: 32px 20px;
	background: var(--lu-color-white, #fff);
	border-radius: 8px;
	text-align: center;
	font-size: 15px;
	color: var(--lu-color-caddy, #6B7570);
}

/* ─── Pagination ──────────────────────────────────────────────────────────── */

.lugbn-public-directory-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 28px;
}

.lugbn-public-directory-pagination a,
.lugbn-public-directory-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 14px;
	border-radius: 999px;
	font-size: 14px;
	text-decoration: none;
}

.lugbn-public-directory-pagination a {
	background: var(--lu-color-white, #fff);
	border: 1px solid #E1E6DE;
	color: var(--lu-color-graphite, #2A2D2F);
}

.lugbn-public-directory-pagination a:hover {
	border-color: var(--lu-color-electric-turf, #1FCB60);
	text-decoration: none;
}

.lugbn-public-directory-pagination span {
	color: var(--lu-color-caddy, #6B7570);
}

/* ─── Join CTA ────────────────────────────────────────────────────────────── */

/* Styled here rather than reusing `.lu-btn` from lu-design-system.css:
   that stylesheet is the marketing system and is not loaded on this
   page, which is why the button rendered as bare text before. This
   matches the Connect pill on the Club Members card instead. */
.lugbn-public-directory-cta {
	margin: 40px 0 0;
	text-align: center;
}

.lugbn-public-directory-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 26px;
	background: var(--lu-color-birdie-lime, #B5EB79);
	border: 1px solid var(--lu-color-birdie-lime, #B5EB79);
	border-radius: 999px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--lu-color-deep-forest, #032E1C);
	text-decoration: none;
}

.lugbn-public-directory-cta__btn:hover {
	background: var(--lu-color-deep-forest, #032E1C);
	border-color: var(--lu-color-deep-forest, #032E1C);
	color: var(--lu-color-birdie-lime, #B5EB79);
	text-decoration: none;
}

/* ─── Mobile filter toggle ────────────────────────────────────────────────── */

.lugbn-public-directory .lugbn-filter-toggle {
	display: none;
}

/* The plus/cross icon is duplicated from members-directory.css rather
   than shared: that stylesheet is only loaded on the logged-in
   directory, so this page would otherwise render a toggle with no
   affordance on it. Same geometry, so the two read as one control. */
.lugbn-public-directory .lugbn-filter-toggle__icon {
	position: relative;
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
}

.lugbn-public-directory .lugbn-filter-toggle__icon::before,
.lugbn-public-directory .lugbn-filter-toggle__icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 1.5px;
	background: currentColor;
	transform: translate(-50%, -50%);
	transition: transform 0.15s ease;
}

.lugbn-public-directory .lugbn-filter-toggle__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.lugbn-public-directory .lugbn-filter-toggle[aria-expanded="true"] .lugbn-filter-toggle__icon::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.lugbn-public-directory .lugbn-filter-toggle[aria-expanded="true"] .lugbn-filter-toggle__icon::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
	.lugbn-public-directory-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px 20px;
	}
}

@media (max-width: 900px) {
	.lugbn-public-directory {
		grid-template-columns: 200px 1fr;
		column-gap: 28px;
	}

	.lugbn-public-directory-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.lugbn-public-directory {
		grid-template-columns: minmax(0, 1fr);
		/* Reset the desktop `auto auto 1fr` — nothing spans rows in the stacked
		   layout, and leaving it would make the third row (toggle) flexible and
		   stretch it. Mirrors members-directory.css:697. */
		grid-template-rows: auto;
		grid-template-areas:
			"hero"
			"count"
			"search"
			"toggle"
			"sidebar"
			"content";
	}

	body.lugbn-public-directory-page .lugbn-public-directory {
		padding: 0 16px;
	}

	/* Hero padding is deliberately NOT overridden at this breakpoint — .lu-hero
	   holds 140px from desktop all the way down to 480px, and the directory
	   hero tracks it. See the 480px block at the end of this file. */

	.lugbn-public-directory__title {
		font-size: 24px;
	}

	/* Same handoff as desktop: the count carries the top margin, the search box
	   sits tight under it. */
	.lugbn-public-directory__count {
		margin: 22px 0 8px;
	}

	.lugbn-public-directory__search {
		margin: 0 0 18px;
	}

	.lugbn-public-directory .lugbn-filter-toggle {
		display: flex;
		grid-area: toggle;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin-top: 4px;
		padding: 0 0 14px;
		background: transparent;
		border: 0;
		border-bottom: 1px solid #DFE4DB;
		border-radius: 0;
		box-shadow: none;
		font-family: inherit;
		font-size: 15px;
		font-weight: 500;
		color: var(--lu-color-graphite, #2A2D2F);
		cursor: pointer;
	}

	.lugbn-public-directory__filters {
		display: none;
		padding-top: 18px;
	}

	.lugbn-public-directory.lugbn-filters-open .lugbn-public-directory__filters {
		display: block;
	}

	.lugbn-public-directory__content {
		padding-top: 24px;
	}
}

/* 480px, not this file's usual 400px breakpoint — it tracks lu-design-system's
   `.lu-hero` media block so the two heroes step up their top padding together. */
@media (max-width: 480px) {
	.lugbn-public-directory__hero {
		padding: 160px 0 4rem;
	}
}

@media (max-width: 400px) {
	.lugbn-public-directory-grid {
		gap: 12px;
	}
}