/* Public supplier listing (/suppliers/) and business profiles
 * (/suppliers/{business}/).
 *
 * These pages carry BOTH lu-header--public and lu-internal-page: public
 * chrome around internal-design-system content, the same pairing
 * /directory/ uses. Tokens therefore come from lu-internal.css, which
 * scopes them to body.lu-internal-page — every var() below keeps a literal
 * fallback so a missed token degrades to the right colour rather than to
 * nothing.
 *
 * Offer cards on a profile are styled by supplier-directory.css, which is
 * enqueued alongside this file; only the locked state is added here. */

/* ═══ Page shell ═══════════════════════════════════════════════════════════ */

/* These are CPT templates, so there is NO #primary.content-area — that is
 * page.php's wrapper and a CPT template replaces it. get_header() opens only
 * #content > .container > .bb-grid.site-content-grid, so the grid itself is
 * what carries the padding to zero. #primary is listed too, harmlessly, so
 * the rule keeps working if these ever become shortcode pages.
 *
 * Values are literals, not tokens: lu-internal.css defines the colour, font
 * and radius custom properties but NOT --lu-space-* or --lu-container-*,
 * which live on .lu-page in lu-design-system.css and are absent here. */

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

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

body.lugbn-supplier-archive-page .entry-header,
body.lugbn-supplier-archive-page .entry-title,
body.lugbn-supplier-profile-page .entry-header,
body.lugbn-supplier-profile-page .entry-title {
	display: none;
}

/* The content column. Width matches .lu-container--max so the supplier pages
 * line up with every other public page.
 *
 * Stays a BARE class on purpose. Every responsive override below is written
 * as a bare class (0,1,0) and media queries contribute nothing to
 * specificity, so raising this to 0,3,0 would silently kill the responsive
 * layout at every breakpoint at once. Only padding needs the extra weight,
 * and it gets its own rule. */
.lugbn-suppliers {
	width: 100%;
	max-width: 1420px;
	margin: 0 auto;
}

/* Body-scoped for specificity, not style, and isolated to the one property
 * that needs it: this is a .bb-grid child and BuddyBoss sets
 * `.bb-grid > :not(.no-gutter) { padding: 10px }`. :not() carries its
 * argument's weight, making that 0,2,0 — a bare .lugbn-suppliers (0,1,0)
 * loses to it however late this file loads. */
body.lugbn-supplier-archive-page .lugbn-suppliers,
body.lugbn-supplier-profile-page .lugbn-suppliers {
	padding: 0 24px;
}

/* ═══ Listing hero ═════════════════════════════════════════════════════════ */

/* Two headers, two clearances.
 *
 * Logged in, the member header is solid and sits ABOVE the content in normal
 * flow, so the band needs no clearance at all — 44px, the value every other
 * internal page band uses.
 *
 * Logged out, the marketing header is absolute and transparent
 * (body.lu-transparent-header) and floats OVER the band, with #content's 76px
 * top padding zeroed along with it. Measured before the fix: masthead bottom
 * edge 76px, title top 44px — straight through the logo. 140px matches
 * /directory/, so the two public listings start on the same line.
 *
 * Keyed on lu-transparent-header rather than on a login check in PHP, because
 * that class IS the condition — anything that turns the transparent header on
 * or off brings the right padding with it. */
.lugbn-suppliers-hero {
	position: relative;
	padding: 44px 0 40px;
}

body.lu-transparent-header .lugbn-suppliers-hero {
	padding-top: 140px;
}

.lugbn-suppliers-hero::before {
	content: '';
	position: absolute;
	inset: 0 -100vw;
	background: var(--lu-color-deep-forest, #032E1C);
}

.lugbn-suppliers-hero > * {
	position: relative;
}

.lugbn-suppliers-hero__title {
	margin: 0 0 8px;
	font-family: var(--lu-font-heading, 'Radio Canada Big', sans-serif);
	font-size: 26px;
	font-weight: 600;
	color: var(--lu-color-white, #fff);
}

.lugbn-suppliers-hero__subtitle {
	margin: 0;
	font-family: var(--lu-font-body, 'Instrument Sans', sans-serif);
	font-size: 15px;
	color: var(--lu-color-birdie-lime, #B5EB79);
}

.lugbn-suppliers-body {
	padding-top: 28px;
}

.lugbn-suppliers-section-title {
	margin: 0 0 16px;
	font-family: var(--lu-font-heading, 'Radio Canada Big', sans-serif);
	font-size: 18px;
	font-weight: 600;
	color: var(--lu-color-graphite, #2A2D2F);
}

.lugbn-suppliers-featured {
	margin-bottom: 40px;
}

/* ═══ Supplier cards ═══════════════════════════════════════════════════════ */

.lugbn-suppliers-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.lugbn-supplier-card {
	display: flex;
	flex-direction: column;
	background: var(--lu-color-white, #fff);
	border-radius: var(--lu-radius-md, 8px);
	overflow: hidden;
}

.lugbn-supplier-card.is-featured {
	outline: 2px solid var(--lu-color-gold, #D6AE5D);
	outline-offset: -2px;
}

.lugbn-supplier-card__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 150px;
	background: var(--lu-color-green-tint, #E8EDE5);
}

/* Fills the tile rather than floating in the middle of it. Note the
 * trade-off: a wide, transparent-background logo will now be cropped top and
 * bottom. Suppliers are told to upload a square-ish image; if that stops
 * holding, this is the rule to revisit — not the markup. */
.lugbn-supplier-card__logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lugbn-supplier-card__logo-fallback {
	font-family: var(--lu-font-heading, 'Radio Canada Big', sans-serif);
	font-size: 44px;
	font-weight: 700;
	color: var(--lu-color-caddy, #6B7570);
}

.lugbn-supplier-card__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px;
	flex: 1;
}

/* .lugbn-offer-category comes from supplier-directory.css, where it is
 * display:block inside .lugbn-offer-meta — a flex ROW, so it hugs its text.
 * Both places it is reused here are column/block contexts, where block means
 * full width and the pill renders as a heavy bar across the card. Covers
 * both: align-self for the flex parent, fit-content for the block one. */
.lugbn-supplier-card__body > .lugbn-offer-category,
.lugbn-supplier-profile__intro > .lugbn-offer-category {
	align-self: flex-start;
	width: fit-content;
}

.lugbn-supplier-card__name {
	margin: 0;
	font-family: var(--lu-font-heading, 'Radio Canada Big', sans-serif);
	font-size: 17px;
	font-weight: 600;
}

.lugbn-supplier-card__name a {
	color: var(--lu-color-graphite, #2A2D2F);
	text-decoration: none;
}

.lugbn-supplier-card__name a:hover {
	text-decoration: underline;
}

.lugbn-supplier-card__location,
.lugbn-supplier-card__offers {
	margin: 0;
	font-size: 13px;
	color: var(--lu-color-caddy, #6B7570);
}

.lugbn-supplier-card__tagline {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--lu-color-graphite, #2A2D2F);
}

.lugbn-supplier-card__offers {
	margin-top: auto;
	padding-top: 8px;
	font-weight: 600;
	color: var(--lu-color-deep-forest, #032E1C);
}

/* ═══ Apply prompt ═════════════════════════════════════════════════════════ */

.lugbn-suppliers-apply {
	margin: 40px 0 0;
	padding: 32px 28px;
	border-radius: var(--lu-radius-md, 8px);
	background: var(--lu-color-deep-forest, #032E1C);
	text-align: center;
}

.lugbn-suppliers-apply__title {
	margin: 0 0 8px;
	font-family: var(--lu-font-heading, 'Radio Canada Big', sans-serif);
	font-size: 20px;
	font-weight: 600;
	color: var(--lu-color-white, #fff);
}

.lugbn-suppliers-apply__text {
	margin: 0 0 20px;
	font-size: 15px;
	color: rgba(255, 255, 255, 0.85);
}

.lugbn-suppliers-apply__cta {
	display: inline-block;
	padding: 12px 28px;
	border-radius: var(--lu-radius-full, 9999px);
	background: var(--lu-color-birdie-lime, #B5EB79);
	color: var(--lu-color-deep-forest, #032E1C);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.lugbn-suppliers-apply__cta:hover {
	background: var(--lu-color-white, #fff);
	color: var(--lu-color-deep-forest, #032E1C);
}

.lugbn-suppliers-pagination {
	margin-top: 32px;
	display: flex;
	justify-content: center;
}

.lugbn-suppliers-pagination .page-numbers {
	padding: 6px 12px;
	margin: 0 2px;
	border-radius: var(--lu-radius-sm, 4px);
	font-size: 14px;
	color: var(--lu-color-graphite, #2A2D2F);
	text-decoration: none;
}

.lugbn-suppliers-pagination .page-numbers.current {
	background: var(--lu-color-deep-forest, #032E1C);
	color: var(--lu-color-white, #fff);
}

/* ═══ Profile ══════════════════════════════════════════════════════════════ */

/* Full-bleed band carrying breadcrumb + logo + name, same four-piece recipe
 * as the archive hero. Not decoration: the public header is absolute with
 * `color: #fff !important` baked in, so without a dark backdrop the logo and
 * Sign in link are white on near-white and effectively invisible. */
.lugbn-supplier-profile__band {
	position: relative;
	padding: 36px 0 36px;
}

/* Clearance only when the header floats over it — see the hero above. */
body.lu-transparent-header .lugbn-supplier-profile__band {
	padding-top: 116px;
}

.lugbn-supplier-profile__band::before {
	content: '';
	position: absolute;
	inset: 0 -100vw;
	background: var(--lu-color-deep-forest, #032E1C);
}

/* Required by the ::before above — without it the band paints over its own
   content rather than behind it. */
.lugbn-supplier-profile__band > * {
	position: relative;
}

/* The category pill is deep-forest-on-lime by default, which disappears
   against this band. Inverted here only. */
.lugbn-supplier-profile__band .lugbn-offer-category {
	background: var(--lu-color-birdie-lime, #B5EB79);
	color: var(--lu-color-deep-forest, #032E1C);
}

.lugbn-supplier-breadcrumb {
	padding: 0 0 20px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.7);
}

.lugbn-supplier-breadcrumb a {
	color: rgba(255, 255, 255, 0.7);
}

.lugbn-supplier-breadcrumb a:hover {
	color: var(--lu-color-white, #fff);
}

.lugbn-supplier-breadcrumb span {
	margin: 0 4px;
}

.lugbn-supplier-profile__head {
	display: flex;
	align-items: center;
	gap: 24px;
	/* No padding of its own — the band supplies the spacing. */
}

.lugbn-supplier-profile__logo {
	flex: 0 0 140px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 140px;
	background: var(--lu-color-white, #fff);
	border-radius: var(--lu-radius-md, 8px);
}

.lugbn-supplier-profile__logo img {
	max-width: 75%;
	max-height: 75%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.lugbn-supplier-profile__name {
	margin: 6px 0;
	font-family: var(--lu-font-heading, 'Radio Canada Big', sans-serif);
	font-size: 30px;
	font-weight: 700;
	color: var(--lu-color-white, #fff);
}

.lugbn-supplier-profile__location {
	margin: 0;
	font-size: 14px;
	color: var(--lu-color-birdie-lime, #B5EB79);
}

.lugbn-supplier-profile__tagline {
	margin: 8px 0 0;
	font-size: 16px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.85);
}

.lugbn-supplier-profile__layout {
	padding-top: 36px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 40px;
	align-items: start;
}

.lugbn-supplier-profile__about {
	font-size: 15px;
	line-height: 1.65;
	color: var(--lu-color-graphite, #2A2D2F);
}

/* Suppliers write this in a plain textarea, so whatever HTML they paste lands
 * here with nothing but theme defaults — lists arrived with padding-left: 0
 * and markers hanging outside the text column. */
.lugbn-supplier-profile__about > *:first-child {
	margin-top: 0;
}

.lugbn-supplier-profile__about p {
	margin: 0 0 16px;
}

.lugbn-supplier-profile__about h2,
.lugbn-supplier-profile__about h3,
.lugbn-supplier-profile__about h4 {
	margin: 28px 0 12px;
	font-family: var(--lu-font-heading, 'Radio Canada Big', sans-serif);
	font-weight: 600;
	color: var(--lu-color-graphite, #2A2D2F);
}

.lugbn-supplier-profile__about h2 { font-size: 20px; }
.lugbn-supplier-profile__about h3 { font-size: 17px; }
.lugbn-supplier-profile__about h4 { font-size: 15px; }

/* NOT display:flex for the gap — flex blockifies the <li> children, which
   strips ::marker and silently removes every bullet and number. Spacing goes
   on the item instead. */
.lugbn-supplier-profile__about ul,
.lugbn-supplier-profile__about ol {
	margin: 0 0 20px;
	padding-left: 22px;
}

.lugbn-supplier-profile__about ul { list-style: disc; }
.lugbn-supplier-profile__about ol { list-style: decimal; }

.lugbn-supplier-profile__about li {
	margin-bottom: 8px;
	padding-left: 4px;
}

.lugbn-supplier-profile__about li::marker {
	color: var(--lu-color-electric-turf, #1FCB60);
	font-weight: 600;
}

/* WordPress global styles ship `.has-medium-font-size { font-size: … !important }`
 * and the block editor stamps that class onto every paragraph and list item
 * written with a size preset — which is how a supplier's bullets arrived at
 * 20px against 15px body copy. An !important of our own is the only thing
 * that beats an !important, and it is scoped to this block so it cannot
 * reach the rest of the site. `inherit` keeps whatever the About block sets
 * rather than hard-coding a second number to keep in sync. */
.lugbn-supplier-profile__about .has-small-font-size,
.lugbn-supplier-profile__about .has-medium-font-size,
.lugbn-supplier-profile__about .has-large-font-size,
.lugbn-supplier-profile__about .has-x-large-font-size {
	font-size: inherit !important;
	line-height: inherit !important;
}

.lugbn-supplier-profile__about a {
	color: var(--lu-color-deep-forest, #032E1C);
	text-decoration: underline;
}

.lugbn-supplier-profile__about img {
	max-width: 100%;
	height: auto;
	border-radius: var(--lu-radius-md, 8px);
}

.lugbn-supplier-profile__features {
	margin: 20px 0;
	padding-left: 20px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 15px;
	color: var(--lu-color-graphite, #2A2D2F);
}

/* ═══ Photo gallery ════════════════════════════════════════════════════════ */

/* Enhanced by assets/js/supplier-gallery.js. Until that runs there is no
 * `is-ready` class and every slide stays visible, stacked — a usable list of
 * photos rather than one photo with no way to reach the others. */

.lugbn-gallery {
	margin: 24px 0 32px;
}

.lugbn-gallery__slide {
	margin: 0 0 12px;
}

.lugbn-gallery__slide img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--lu-radius-md, 8px);
}

.lugbn-gallery__nav,
.lugbn-gallery__thumbs,
.lugbn-gallery__count {
	display: none;
}

/* ─── Enhanced ─── */

.lugbn-gallery.is-ready .lugbn-gallery__stage {
	position: relative;
}

.lugbn-gallery.is-ready .lugbn-gallery__slide {
	display: none;
	margin: 0;
}

.lugbn-gallery.is-ready .lugbn-gallery__slide.is-active {
	display: flex;
	justify-content: center;
}

/* The frame takes its size from the photo — no aspect-ratio box, so nothing
   is cropped and nothing is letterboxed. max-height stops a tall portrait
   shot running away with the page; width stays auto so the proportions are
   the image's own. */
.lugbn-gallery.is-ready .lugbn-gallery__slide img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 460px;
}

.lugbn-gallery.is-ready .lugbn-gallery__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	border-radius: var(--lu-radius-full, 9999px);
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
	color: var(--lu-color-deep-forest, #032E1C);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.lugbn-gallery.is-ready .lugbn-gallery__nav:hover {
	background: var(--lu-color-white, #fff);
}

.lugbn-gallery.is-ready .lugbn-gallery__nav.is-prev { left: 10px; }
.lugbn-gallery.is-ready .lugbn-gallery__nav.is-next { right: 10px; }

.lugbn-gallery.is-ready .lugbn-gallery__count {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 2;
	display: block;
	margin: 0;
	padding: 3px 9px;
	border-radius: var(--lu-radius-full, 9999px);
	background: rgba(15, 16, 20, 0.68);
	color: var(--lu-color-white, #fff);
	font-size: 12px;
}

.lugbn-gallery.is-ready .lugbn-gallery__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.lugbn-gallery.is-ready .lugbn-gallery__thumb {
	display: block;
	width: 68px;
	height: 52px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--lu-radius-sm, 4px);
	background: none;
	overflow: hidden;
	cursor: pointer;
	opacity: 0.6;
}

.lugbn-gallery.is-ready .lugbn-gallery__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	/* Cover is right HERE and wrong on the stage: a thumbnail is a target to
	   click, not the photo itself, so a consistent grid beats fidelity. */
	object-fit: cover;
}

.lugbn-gallery.is-ready .lugbn-gallery__thumb.is-active,
.lugbn-gallery.is-ready .lugbn-gallery__thumb:hover {
	border-color: var(--lu-color-electric-turf, #1FCB60);
	opacity: 1;
}

.lugbn-gallery.is-ready .lugbn-gallery__thumb:focus-visible {
	outline: 2px solid var(--lu-color-electric-turf, #1FCB60);
	outline-offset: 2px;
}

/* ═══ Sidebar offers ═══════════════════════════════════════════════════════ */

.lugbn-supplier-profile__offers {
	margin-bottom: 20px;
}

/* Single column: this is a 340px sidebar, not the listing grid. */
.lugbn-supplier-offer-stack {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Shorter than the Perks grid's 185px — a sidebar card should not be mostly
   photograph. */
.lugbn-supplier-offer-stack .lugbn-offer-image img {
	height: 140px;
}

/* ═══ Profile sidebar ══════════════════════════════════════════════════════ */

.lugbn-supplier-profile__contact,
.lugbn-supplier-profile__socials {
	background: var(--lu-color-white, #fff);
	border-radius: var(--lu-radius-md, 8px);
	padding: 20px;
	margin-bottom: 20px;
}

.lugbn-supplier-profile__contact a,
.lugbn-supplier-profile__socials a {
	display: block;
	font-size: 14px;
	color: var(--lu-color-deep-forest, #032E1C);
	word-break: break-word;
}

.lugbn-supplier-profile__contact a + a {
	margin-top: 8px;
}

.lugbn-supplier-profile__website {
	font-weight: 600;
}

.lugbn-supplier-profile__socials ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* ═══ Locked offer teaser ══════════════════════════════════════════════════ */

.lugbn-offer-card.is-locked .lugbn-offer-image img {
	filter: grayscale(0.4);
	opacity: 0.75;
}

.lugbn-offer-locked {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

.lugbn-offer-locked-text {
	font-size: 13px;
	font-weight: 600;
	color: var(--lu-color-caddy, #6B7570);
}

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

@media (max-width: 1024px) {
	.lugbn-suppliers-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lugbn-supplier-profile__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
}

@media (max-width: 640px) {
	/* Paired the same way as the base rule: bare class for layout,
	   body-scoped for the gutter, or the .bb-grid rule wins here too. */
	body.lugbn-supplier-archive-page .lugbn-suppliers,
	body.lugbn-supplier-profile-page .lugbn-suppliers {
		padding: 0 16px;
	}

	.lugbn-suppliers-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.lugbn-gallery.is-ready .lugbn-gallery__slide img {
		max-height: 320px;
	}

	.lugbn-supplier-profile__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.lugbn-supplier-profile__logo {
		flex: 0 0 auto;
		width: 120px;
		height: 120px;
	}

	.lugbn-suppliers-hero__title {
		font-size: 22px;
	}
}

/* 480px tracks lu-design-system's `.lu-hero` block, so every public hero
   steps up its top padding at the same point. */
@media (max-width: 480px) {
	body.lu-transparent-header .lugbn-suppliers-hero {
		padding-top: 160px;
	}

	body.lu-transparent-header .lugbn-supplier-profile__band {
		padding-top: 136px;
	}
}