/* ==========================================================================
   Binham — trip search results
   Loaded only on the Trip Search template. Every colour comes from tokens.css.
   ========================================================================== */

/* The theme had no main+sidebar layout, so this grid is new. */
.bnh-trips {
	display: grid;
	gap: var(--bnh-s6);
	align-items: start;
}

@media (min-width: 900px) {
	.bnh-trips { grid-template-columns: 260px minmax(0, 1fr); }
}

/* --- Sidebar --------------------------------------------------------------- */

.bnh-trips__side {
	display: grid;
	gap: var(--bnh-s4);
	align-content: start;
	padding: var(--bnh-s4);
	background: var(--bnh-white);
	border: 1px solid var(--bnh-line);
	border-radius: var(--bnh-r);
}

@media (min-width: 900px) {
	/* Stays with the reader while a long result list scrolls past. */
	.bnh-trips__side {
		position: sticky;
		top: calc(var(--bnh-nav-h) + var(--bnh-s4));
	}
}

.bnh-trips__sidehead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--bnh-s3);
	padding-bottom: var(--bnh-s3);
	border-bottom: 1px solid var(--bnh-line);
}

.bnh-trips__filtertitle {
	margin: 0;
	color: var(--bnh-navy-800);
	font-size: 1.125rem;
	font-weight: 700;
}

.bnh-trips__clear { font-size: var(--bnh-fs-sm); }

/* --- Facet ----------------------------------------------------------------- */

.bnh-facet {
	margin: 0;
	padding: 0;
	border: 0;
}

.bnh-facet__title {
	margin: 0 0 var(--bnh-s3);
	padding: 0;
	color: var(--bnh-navy-800);
	font-size: var(--bnh-fs-sm);
	font-weight: 700;
}

.bnh-facet__list {
	display: grid;
	gap: .15rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bnh-facet__row[hidden] { display: none; }

.bnh-facet__label {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: .5rem;
	align-items: center;
	padding: .35rem .4rem;
	border-radius: var(--bnh-r-sm);
	color: var(--bnh-ink);
	font-size: var(--bnh-fs-sm);
	cursor: pointer;
}

.bnh-facet__label:hover { background: var(--bnh-grey-050); }

.bnh-facet__label input {
	width: 16px;
	height: 16px;
	accent-color: var(--bnh-orange);
	cursor: pointer;
}

.bnh-facet__count { color: var(--bnh-muted); font-size: var(--bnh-fs-xs); }

.bnh-facet__more {
	margin-top: var(--bnh-s2);
	padding: 0;
	background: none;
	border: 0;
	color: var(--bnh-navy);
	font-family: inherit;
	font-size: var(--bnh-fs-sm);
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

.bnh-facet__empty { margin: 0; color: var(--bnh-muted); font-size: var(--bnh-fs-xs); }

/* --- Results --------------------------------------------------------------- */

.bnh-trips__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--bnh-s3);
	margin-bottom: var(--bnh-s4);
}

.bnh-trips__count { margin: 0; color: var(--bnh-ink); font-size: var(--bnh-fs-sm); }
.bnh-trips__count strong { color: var(--bnh-navy-800); font-size: 1.125rem; }

.bnh-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bnh-s2);
	margin: 0 0 var(--bnh-s4);
	padding: 0;
	list-style: none;
}

.bnh-chip--remove {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .3rem .7rem;
	background: var(--bnh-navy-050);
	border: 1px solid var(--bnh-line);
	border-radius: var(--bnh-r-pill);
	color: var(--bnh-navy);
	font-size: var(--bnh-fs-xs);
	font-weight: 600;
	text-decoration: none;
}

.bnh-chip--remove:hover {
	background: var(--bnh-orange);
	border-color: var(--bnh-orange);
	color: var(--bnh-white);
}

.bnh-trips__grid { margin-bottom: var(--bnh-s5); }

/* paginate_links( type => list ) renders a <ul>, unlike the_posts_pagination. */
.bnh-trips__main .page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bnh-s2);
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bnh-trips__main .page-numbers li a,
.bnh-trips__main .page-numbers li span {
	display: grid;
	place-items: center;
	min-width: 42px;
	min-height: 42px;
	padding: 0 .6rem;
	background: var(--bnh-white);
	border: 1px solid var(--bnh-line);
	border-radius: var(--bnh-r-sm);
	color: var(--bnh-navy);
	font-size: var(--bnh-fs-sm);
	font-weight: 600;
	text-decoration: none;
}

.bnh-trips__main .page-numbers li .current,
.bnh-trips__main .page-numbers li a:hover {
	background: var(--bnh-orange);
	border-color: var(--bnh-orange);
	color: var(--bnh-white);
}

/* JS submits on change, so the button is only needed without it. */
.bnh-js .bnh-trips__apply { display: none; }