/**
 * The two Industry hub pages, Funding & partnering and Talent, jobs &
 * education (docs/industry-hubs.md).
 *
 * Both are built in the Chapters overview's vocabulary — charcoal hero, tile
 * grid, pillar cards, the closing two-column band — and take that look from
 * chapters.css, which is enqueued with them. What is here is only what the
 * hubs add: the grids of MyListing preview cards that the shortcodes in
 * includes/raskin/hub-cards.php render, and the row of buttons under them.
 *
 * The cards themselves are painted site-wide by listing-cards.css; nothing
 * here reaches inside one. Every selector is scoped to a class the shortcode
 * or the build script sets.
 */

/* --------------------------------------------------------------------------
 * Card grids
 *
 * Preview cards in a grid with the standard card's 24px gap (the Layout
 * page: 24px between standard cards, 20px only in a dense grid of quiet
 * cards): one across, two from 640px, three from 1025px and four for the
 * hiring grid, which has the shorter company cards. MyListing gives the card
 * a bottom margin for its own column layout; the grid gap replaces it.
 * -------------------------------------------------------------------------- */

.sba-hub-cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
}

.sba-hub-cards .lf-item-container {
	margin-bottom: 0;
}

.sba-hub-card {
	min-width: 0;
}

.sba-hub-card-caption {
	margin: 12px 0 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
}

@media (min-width: 640px) {
	.sba-hub-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1025px) {
	.sba-hub-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.sba-hub-cards-4 .sba-hub-cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
 * Button row
 *
 * The buttons under a card grid sit in one line with a 12px gap and wrap on
 * a phone. Elementor lays widgets set to "auto" width out as flex items
 * already; the wrap only needs the gap.
 * -------------------------------------------------------------------------- */

.sba-hub-actions > .elementor-widget-wrap {
	gap: 12px;
	align-items: center;
}

.sba-hub-actions .elementor-widget-wrap > .elementor-element.sba-btn {
	margin: 0;
}

/* The line of links after the buttons ("How posting works: …"). */
.sba-hub-note {
	color: var(--sba-slate);
	font-size: 14px;
	line-height: 20px;
}

.sba-hub-note p {
	margin: 0;
}

/* --------------------------------------------------------------------------
 * Reviewer notice
 *
 * The light red line above the hero saying the copy is new. Deleted before
 * launch together with its section.
 * -------------------------------------------------------------------------- */

.sba-hub-notice {
	border-bottom: 1px solid hsl(var(--sba-red-hsl) / 0.1);
}

.sba-hub-notice-text {
	color: var(--sba-red-dark);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.625;
	text-align: center;
}

.sba-hub-notice-text p {
	margin: 0;
}

/* --------------------------------------------------------------------------
 * Hairlines
 *
 * A tinted band meets its neighbours with a --sba-border hairline (the
 * Layout page). chapters.css gives the tile band its bottom one and the
 * warm closing band its top one; the Talent page's jobs band sits above a
 * white section and its tile band below one, so they take the other edge.
 * -------------------------------------------------------------------------- */

.sba-hub-hairline-bottom {
	border-bottom: 1px solid var(--sba-border);
}

.sba-hub-hairline-top {
	border-top: 1px solid var(--sba-border);
}

/* --------------------------------------------------------------------------
 * Pillar body with a list
 *
 * The Funding page's "Getting started" cards hold a line and then the links
 * as the guide's dot list; the line keeps the pillar text's spacing above
 * the list.
 * -------------------------------------------------------------------------- */

.sba-hub-pillar-list p {
	margin: 0 0 12px;
}