/*
 * Resource Center — STRUCTURAL / STATE CSS ONLY.
 *
 * Two-column layout: a fixed-width vertical sidebar of categories + a
 * flexible list of resource rows. Look-and-feel (colours, type, spacing,
 * card/row design) is done in Impreza/WPBakery.
 *
 * Sidebar width is exposed as a variable so it can be tuned from Impreza's
 * custom CSS box without editing the plugin: --bsc-resource-sidebar-width.
 */

.bsc-resource-center {
	--bsc-resource-sidebar-width: 260px;
	--bsc-resource-gap: 1.5rem;

	display: grid;
	grid-template-columns: var(--bsc-resource-sidebar-width) 1fr;
	gap: var(--bsc-resource-gap);
	align-items: start;
}

.bsc-resource-center__sidebar-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bsc-resource-center__category-item {
	list-style: none;
}

.bsc-resource-center__list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.bsc-resource-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.bsc-resource-row__icon {
	flex: 0 0 auto;
}

.bsc-resource-row__title {
	flex: 1 1 auto;
	min-width: 0;
}

.bsc-resource-row__size {
	flex: 0 0 auto;
}

.bsc-resource-row__download {
	flex: 0 0 auto;
	display: inline-flex;
}
.bsc-resource-row__download img {
	display: block;
}

/* The promo row is a direct grid child, a sibling of the sidebar AND the
   results column (not nested in either), so it can span the full width —
   sidebar + downloads — instead of being confined to one column. */
.bsc-resource-center__promo {
	grid-column: 1 / -1;
	margin-top: var(--bsc-resource-gap);
}

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

@media (max-width: 768px) {
	.bsc-resource-center {
		grid-template-columns: 1fr;
	}
}