/* ============================================================================
 * BA Vendor Directory — filterable/searchable vendor grid.
 * Renders from archive-vendor.php + template-parts/content-vendor.php;
 * filtering behavior in js/ba-vendor-directory.js.
 *
 * Cohesive with the theme's modern navy system (calendar_list / ba-upcoming-markets
 * / ba-top-bars):
 *   navy #113c61 · sky #25a7ce/#1268a1 · amber #ffa41b
 *   ink #12303f · muted #5f7078 · hairline #e5e7eb · card-border #e8edf0
 *
 * NOTE: theme root is html{font-size:62.5%} => 1rem = 10px. Sizes below are
 * authored on that 10px scale.
 * ========================================================================== */

/* ---- Head ------------------------------------------------------------------ */
.ba-vendor-directory__head{ text-align:center; max-width:68rem; margin:0 auto 3.6rem; }
.ba-vendor-directory__eyebrow{
	display:inline-block; font-size:1.3rem; font-weight:700; line-height:1;
	letter-spacing:.14em; text-transform:uppercase; color:#1268a1;
	background:#dff4fe; padding:.6rem 1.4rem; border-radius:4rem; margin-bottom:1.6rem;
}
.ba-vendor-directory__title{ font-size:3.6rem; line-height:1.12; font-weight:700; color:#113c61; margin:0 0 1.2rem; }
.ba-vendor-directory__intro{ color:#5f7078; font-size:1.7rem; line-height:1.6; margin:0; }

/* ---- Filter bar -------------------------------------------------------------
 * Sticky-ish (not position:sticky — kept simple) shell holding the search
 * input + category pills + live result count. */
.ba-vendor-filters{
	display:flex; flex-direction:column; gap:1.6rem; align-items:center;
	margin:0 0 3.2rem; padding:2rem; background:#f3f6fa; border-radius:14px;
}

.ba-vendor-filters__search{ position:relative; width:100%; max-width:44rem; }
.ba-vendor-filters__search-icon{
	position:absolute; left:1.6rem; top:50%; transform:translateY(-50%);
	color:#8a99a3; font-size:1.5rem; pointer-events:none;
}
.ba-vendor-filters__search-input{
	width:100%; box-sizing:border-box; font-size:1.6rem; line-height:1.4;
	padding:1.2rem 1.6rem 1.2rem 4.2rem; border:1px solid #d5dee6; border-radius:4rem;
	background:#fff; color:#12303f; min-height:4.6rem;
	transition:border-color 140ms ease, box-shadow 140ms ease;
}
.ba-vendor-filters__search-input::placeholder{ color:#8a99a3; }
.ba-vendor-filters__search-input:focus{
	outline:none; border-color:#25a7ce; box-shadow:0 0 0 3px rgba(37,167,206,.2);
}

.ba-vendor-filters__cats{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; }
.ba-vendor-filters__pill{
	display:inline-flex; align-items:center; min-height:3.6rem;
	font-size:1.4rem; font-weight:600; line-height:1; color:#12303f;
	background:#fff; border:1px solid #d5dee6; border-radius:4rem;
	padding:.9rem 1.6rem; cursor:pointer;
	transition:background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.ba-vendor-filters__pill:hover{ border-color:#1268a1; color:#1268a1; }
.ba-vendor-filters__pill:focus-visible{ outline:2px solid #1268a1; outline-offset:2px; }
.ba-vendor-filters__pill.is-active{ background:#113c61; border-color:#113c61; color:#fff; }

.ba-vendor-filters__count{ margin:0; font-size:1.4rem; color:#5f7078; min-height:1.8rem; }

/* ---- Grid + card ------------------------------------------------------------ */
.ba-vendor-grid{ row-gap:2.8rem; }

.ba-vendor-col.is-ba-hidden{ display:none; }

.ba-vendor-card{
	display:flex; flex-direction:column; height:100%; text-decoration:none;
	background:#fff; border:1px solid #e8edf0; border-radius:14px; overflow:hidden;
	box-shadow:0 1px 3px rgba(17,60,97,.05);
	transition:box-shadow 160ms ease, transform 160ms ease, border-color 160ms ease;
}
.ba-vendor-card:hover, .ba-vendor-card:focus-visible{
	box-shadow:0 10px 26px rgba(17,60,97,.12); transform:translateY(-2px); border-color:#d7e2ea;
}
.ba-vendor-card:focus-visible{ outline:2px solid #1268a1; outline-offset:2px; }

.ba-vendor-card__img{ aspect-ratio:5 / 4; background:#eef2f5; overflow:hidden; }
.ba-vendor-card__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.ba-vendor-card__img-fallback{
	width:100%; height:100%; display:flex; align-items:center; justify-content:center;
	background:#113c61; color:#fff; font-weight:700; font-size:1.6rem; text-align:center; padding:1.6rem;
}

.ba-vendor-card__body{ flex:1 1 auto; display:flex; flex-direction:column; padding:1.8rem 2rem 2.2rem; }
.ba-vendor-card__kicker{
	align-self:flex-start; font-size:1.1rem; font-weight:700; text-transform:uppercase;
	letter-spacing:.08em; color:#1268a1; background:#dff4fe; border-radius:4rem;
	padding:.4rem 1rem; margin-bottom:1rem;
}
.ba-vendor-card__title{ font-size:2rem; font-weight:700; color:#12303f; margin:0 0 .8rem; line-height:1.25; }
.ba-vendor-card__desc{ color:#5f7078; font-size:1.5rem; line-height:1.55; margin:0 0 1.4rem; flex:1 1 auto; }
/* #1268a1, not #25a7ce — the theme's own "sky-AA" pairing (see ba-upcoming-markets.css
   header comment); #25a7ce on white is 2.79:1, fails WCAG AA for this font-size. */
.ba-vendor-card__more{ font-size:1.4rem; font-weight:700; color:#1268a1; margin-top:auto; }
.ba-vendor-card__more i{ margin-left:.4rem; font-size:1.2rem; }

/* ---- Empty state -------------------------------------------------------- */
.ba-vendor-empty{ text-align:center; padding:4rem 2rem; color:#5f7078; font-size:1.6rem; }
.ba-vendor-empty__reset{
	background:none; border:0; padding:0; color:#1268a1; font-weight:700; text-decoration:underline;
	text-underline-offset:.2em; cursor:pointer; font-size:inherit;
}
.ba-vendor-empty__reset:hover, .ba-vendor-empty__reset:focus-visible{ color:#113c61; }

/* ---- Mobile -------------------------------------------------------------- */
@media (max-width:600px){
	.ba-vendor-directory__title{ font-size:2.8rem; }
	.ba-vendor-filters{ padding:1.6rem; }
	.ba-vendor-filters__cats{ justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; width:100%; padding-bottom:.4rem; }
	.ba-vendor-filters__pill{ flex:0 0 auto; }
}