/* ==========================================================================
   Reviews hub (/reviews/) grid/pagination styling, also shared by the
   taxonomy archive templates (genre/year/score/studio, taxonomy.php) —
   .bim-hub-header itself is only used by taxonomy.php now.
   ========================================================================== */

/* Kept deliberately short — just the back-link and heading, no intro
   copy — and close to the site header rather than a tall, spaced-out
   banner. */
.bim-hub-header {
	padding: var(--bim-space-md) 0 var(--bim-space-lg);
	background: var(--bim-color-bg-alt);
	border-bottom: 1px solid var(--bim-color-border);
}

.bim-hub-header__back {
	display: inline-block;
	margin-bottom: var(--bim-space-xs);
}

.bim-hub-header__title {
	font-size: clamp(30px, 4vw, 46px);
	margin: 0;
}

.bim-hub {
	padding-top: var(--bim-space-lg);
	padding-bottom: var(--bim-space-xl);
}

/* --- Filters ------------------------------------------------------------ */
.bim-hub-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: center;
	gap: var(--bim-space-md);
	padding-bottom: var(--bim-space-lg);
	margin-bottom: var(--bim-space-lg);
	border-bottom: 2px solid var(--bim-color-text);
}

.bim-hub-filters__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--bim-color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.bim-hub-filters__field select {
	font-family: var(--bim-font-body);
	font-size: 15px;
	font-weight: 500;
	color: var(--bim-color-text);
	text-transform: none;
	letter-spacing: normal;
	padding: 9px 32px 9px 12px;
	border: 1px solid var(--bim-color-border);
	border-radius: var(--bim-radius-sm);
	background: var(--bim-color-surface);
	min-width: 160px;
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--bim-color-text-muted) 50%), linear-gradient(135deg, var(--bim-color-text-muted) 50%, transparent 50%);
	background-position: calc(100% - 16px) center, calc(100% - 11px) center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

.bim-hub-filters__field select:focus {
	outline: none;
	border-color: var(--bim-color-accent);
}

.bim-hub-filters__clear {
	font-size: 14px;
	font-weight: 600;
	color: var(--bim-color-accent);
	margin-bottom: 2px;
}

/* --- Results grid ----------------------------------------------------------
   Poster-only cards don't need to be as big as the fuller cards elsewhere
   on the site — more, smaller posters per row reads better as a browsable
   grid. Overrides the shared .bim-grid default (4 across on desktop) with
   more columns, just on this page. */
.bim-hub-grid {
	grid-template-columns: repeat(6, 1fr);
}

@media (max-width: 960px) {
	.bim-hub-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 640px) {
	.bim-hub-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* --- Results / empty state ------------------------------------------------ */
.bim-hub-empty {
	padding: var(--bim-space-xl) 0;
	text-align: center;
	color: var(--bim-color-text-muted);
	font-size: 16px;
}

/* --- Pagination -------------------------------------------------------------- */
.bim-hub-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: var(--bim-space-xl);
}

.bim-hub-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border: 1px solid var(--bim-color-border);
	border-radius: var(--bim-radius-sm);
	font-weight: 600;
	font-size: 14px;
	color: var(--bim-color-text);
}

.bim-hub-pagination .page-numbers:hover,
.bim-hub-pagination .page-numbers:focus {
	border-color: var(--bim-color-accent);
	color: var(--bim-color-accent);
}

.bim-hub-pagination .page-numbers.current {
	background: var(--bim-color-text);
	border-color: var(--bim-color-text);
	color: var(--bim-color-text-inverse);
}

.bim-hub-pagination .page-numbers.dots {
	border-color: transparent;
}

/* --- Responsive -------------------------------------------------------------- */
@media (max-width: 640px) {
	.bim-hub-filters {
		flex-direction: column;
		align-items: stretch;
	}

	.bim-hub-filters__field select {
		width: 100%;
	}
}