/*
 * Machine Finder — STRUCTURAL / STATE CSS ONLY.
 *
 * This file ships the layout behaviour that cannot live in the page builder
 * because it depends on the open/closed toggle state (sidebar visibility,
 * 3<->2 column reflow, mobile drawer). All look-and-feel (colours, type,
 * spacing, card design, chip/button styling) is done in Impreza/WPBakery.
 *
 * Column counts are exposed as variables so they can be tuned from Impreza's
 * custom CSS box without editing the plugin:
 *   --bsc-cols-closed (default 3)  --bsc-cols-open (default 2)
 */

.bsc-finder {
	--bsc-cols-closed: 3;
	--bsc-cols-open: 2;
	--bsc-sidebar-width: 468px;
	--bsc-gap: 1.5rem;

	display: grid;
	grid-template-columns: 1fr;        /* closed: results take the full width */
	gap: var(--bsc-gap);
	align-items: start;
}

/* The control bar spans the full width above everything. */
.bsc-finder__bar {
	grid-column: 1 / -1;
}

/* ---- Open state: sidebar + results side by side ---- */
.bsc-finder.is-filters-open {
	grid-template-columns: var(--bsc-sidebar-width) 1fr;
}

/* ---- Closed state: hide the sidebar entirely ---- */
.bsc-finder.is-filters-closed .bsc-finder__filters {
	display: none;
}

/* ---- Results grid: column count keyed to the state ---- */
.bsc-finder__grid {
	display: grid;
	gap: var(--bsc-gap);
	grid-template-columns: repeat(var(--bsc-cols-closed), minmax(0, 1fr));
}
.bsc-finder.is-filters-open .bsc-finder__grid {
	grid-template-columns: repeat(var(--bsc-cols-open), minmax(0, 1fr));
}

/* The promo row and the empty state always span the whole grid. */
.bsc-finder__promo,
.bsc-finder__empty {
	grid-column: 1 / -1;
}

/* Client feedback (2026-08-13): a full-width promo row fixed at card #9
   (bsc_finder_promo_after) leaves an empty grid cell in the row right before
   it whenever the active column count doesn't divide evenly into 9 — visible
   as a "hole" in the results list. 9 only divides evenly by 1 or 3, so this
   hits any 2-column configuration. Simplest fix with no reordering/JS: hide
   the promo row entirely whenever 2 columns are active, so that row just
   flows full instead of leaving a gap. Base rule below covers the open
   sidebar at the two "3 closed / 2 open" breakpoints (default + 1025-1400px);
   the 769-1024px tablet override further down covers the OPPOSITE case,
   since there 2 columns is the CLOSED (default) state, not open. */
.bsc-finder.is-filters-open .bsc-finder__promo {
	display: none;
}

.bsc-finder-card__media img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* The backdrop is only used by the mobile drawer (below). */
.bsc-finder__backdrop {
	display: none;
}

/* Dim the results while an AJAX refresh is in flight. */
.bsc-finder.is-loading .bsc-finder__results {
	opacity: 0.5;
	pointer-events: none;
}

/* Unavailable facet option (0 results in the current context). Functional cue;
   restyle freely in the builder. */
.bsc-finder-facet__item.is-disabled {
	opacity: 0.4;
}

/* Desktop auto-applies on change, and the design shows no Apply button, so the
   form actions (Show results / Clear all) live only in the mobile drawer.
   NOTE: this means a no-JS desktop visitor can't submit the form inline. */
.bsc-finder__form-actions {
	display: none;
}

/* -------------------------------------------------------------------------
 * Tablet / small laptop (769–1400px): the full-desktop layout (468px sidebar
 * + 2-col results when open) leaves the result cards too narrow here, so the
 * card actions row collides and overflows. Retune the column/sidebar vars per
 * sub-range — no new structure, just smaller numbers.
 * ---------------------------------------------------------------------- */

/* Small laptop / large tablet: narrower sidebar, single result column while
   the filters are open; 2 columns when closed. */
@media (min-width: 769px) and (max-width: 1024px) {
	.bsc-finder {
		--bsc-cols-closed: 2;
		--bsc-cols-open: 1;
		--bsc-sidebar-width: 300px;
	}

	/* Here 2 columns is the CLOSED (default) state, not open — the promo-hole
	   fix above needs to flip: hide it closed, show it again once open (1
	   column, no divisibility problem). */
	.bsc-finder.is-filters-closed .bsc-finder__promo {
		display: none;
	}
	.bsc-finder.is-filters-open .bsc-finder__promo {
		display: block;
	}
}

/* Laptop / small desktop: keep the 2-/3-column design but shrink the sidebar
   so two result cards still get a usable width when the filters are open. */
@media (min-width: 1025px) and (max-width: 1400px) {
	.bsc-finder {
		--bsc-cols-closed: 3;
		--bsc-cols-open: 2;
		--bsc-sidebar-width: 340px;
	}
}

/* -------------------------------------------------------------------------
 * Mobile: the sidebar becomes an off-canvas drawer regardless of state.
 * The grid drops to a single column.
 * ---------------------------------------------------------------------- */
@media (max-width: 768px) {
	.bsc-finder,
	.bsc-finder.is-filters-open {
		grid-template-columns: 1fr;
	}

	.bsc-finder__grid,
	.bsc-finder.is-filters-open .bsc-finder__grid {
		grid-template-columns: 1fr;
	}

	/* Drawer: off to the left until opened. */
	.bsc-finder__filters {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		width: min(85vw, 360px);
		height: 100%;
		overflow-y: auto;
		transform: translateX(-100%);
		transition: transform 0.25s ease;
	}
	/* On mobile the sidebar is in the DOM even when "closed"; reveal via state. */
	.bsc-finder.is-filters-closed .bsc-finder__filters {
		display: block;
	}
	.bsc-finder.is-filters-open .bsc-finder__filters {
		transform: translateX(0);
	}

	.bsc-finder.is-filters-open .bsc-finder__backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 999;
		background: rgba(0, 0, 0, 0.5);
	}

	/* Lock background scroll while the drawer is open. */
	body.bsc-finder-drawer-open {
		overflow: hidden;
	}

	/* The drawer DOES need the Apply / Clear actions (no auto-apply on mobile). */
	.bsc-finder__form-actions {
		display: flex;
		gap: 0.75rem;
		align-items: center;
		margin-top: 1.25rem;
	}

	/* Neither .bsc-finder__apply nor .bsc-finder__reset has bespoke styling
	   (they inherit Impreza's generic submit-button skin) or an explicit
	   width, so in this ~240px-wide drawer column the flex row shrinks
	   "Show results" below what its own label needs at that font size,
	   wrapping it to 2 lines while "Clear all" does the same next to it —
	   confirmed via getBoundingClientRect() (84px tall for a 1-line button).
	   Stack instead: primary action full width, secondary link centred
	   underneath, matching the full-width-CTA pattern used elsewhere on the
	   site (e.g. the support form's submit button). */
	.bsc-finder__form-actions {
		flex-direction: column;
		align-items: stretch;
		gap: 0.5rem;
	}
	/* Even at full width, the drawer narrows further on small phones (85vw,
	   e.g. ~272px at a 320px viewport) — "SHOW RESULTS" at the inherited 21px
	   still doesn't fit on one line there. 17px fits down to the drawer's
	   narrowest real-world width with room to spare. !important: this button
	   has no bespoke class, so it falls to Impreza's generic submit-button
	   skin — `[type="submit"]:not(.w-btn):not(.button){font-size:21px}` —
	   whose two :not() clauses each count as a class for specificity, so it
	   actually out-specifies a plain two-class override here. */
	.bsc-finder__form-actions .bsc-finder__apply {
		font-size: 17px !important;
	}
	.bsc-finder__reset {
		text-align: center;
	}
}