/**
 * Logo groups. A block under the heading `mt-8`; a block with a heading
 * `mt-14`, the heading `text-xl font-bold`, its line `mt-2 text-sm` muted,
 * the logos `mt-5`. Tiles `grid gap-3`, each `rounded-lg border
 * border-border/60 bg-card`: large `aspect-[3/2] p-4`, two, three and from
 * 1024px five across; small `aspect-[5/3] p-3`, two, four and six across;
 * named a 5:3 `p-4` logo over the name, `border-t px-3 py-2 text-sm
 * font-medium`. The note for a group without logos `rounded-lg border
 * border-dashed bg-surface-cool p-5 text-sm` muted, the button `mt-6`.
 * Split: `grid gap-10 lg:grid-cols-12 lg:gap-16`, seven and five columns.
 */

.sba-c-logo-groups .sba-c-logos-block {
	margin-top: 32px;
}

.sba-c-logo-groups .sba-c-logos-block.sba-c-logos-block-titled {
	margin-top: 56px;
}

.sba-c-logo-groups .sba-c-logos-aside > .sba-c-logos-block:first-child {
	margin-top: 0;
}

.sba-c-logo-groups .sba-c-logos-block > * {
	margin: 0;
}

.sba-c-logo-groups .sba-c-logos-block > .sba-c-logos-title {
	color: var(--sba-charcoal);
	font-size: 20px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: var(--sba-heading-tracking);
	line-height: 28px;
}

.sba-c-logo-groups .sba-c-logos-block > .sba-c-logos-text {
	margin-top: 8px;
	color: var(--sba-slate);
	font-size: 14px;
	line-height: 20px;
}

.sba-c-logo-groups .sba-c-logos-block > .sba-c-logos-title ~ :is(.sba-c-logos, .sba-c-logos-pending) {
	margin-top: 20px;
}

.sba-c-logo-groups .sba-c-logos-block > .sba-c-logos-pending {
	padding: 20px;
	border: 1px dashed var(--sba-border);
	border-radius: var(--sba-radius);
	background-color: var(--sba-surface-cool);
	color: var(--sba-slate);
	font-size: 14px;
	line-height: 20px;
}

.sba-c-logo-groups .sba-c-logos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	padding: 0;
	list-style: none;
}

.sba-c-logo-groups .sba-c-logos li {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	margin: 0;
	border: 1px solid color-mix(in srgb, var(--sba-border) 60%, transparent);
	border-radius: var(--sba-radius);
	background-color: var(--sba-surface);
}

.sba-c-logo-groups .sba-c-logos-large li {
	aspect-ratio: 3 / 2;
	padding: 16px;
}

.sba-c-logo-groups .sba-c-logos-small li {
	aspect-ratio: 5 / 3;
	padding: 12px;
}

.sba-c-logo-groups .sba-c-logos-named li {
	flex-direction: column;
	align-items: stretch;
	overflow: hidden;
}

.sba-c-logo-groups .sba-c-logos.is-limited li.sba-c-logos-more {
	display: none;
}

.sba-c-logo-groups .sba-c-logos-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	/* An aspect-ratio box grows to a tall logo's height unless its minimum
	   is zero (Africa, Baden-Württemberg); the tiles' too. */
	min-height: 0;
	aspect-ratio: 5 / 3;
	padding: 16px;
}

.sba-c-logo-groups .sba-c-logos-caption {
	padding: 8px 12px;
	border-top: 1px solid var(--sba-border);
	color: var(--sba-charcoal);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-align: center;
}

.sba-c-logo-groups .sba-c-logos a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.sba-c-logo-groups .sba-c-logos img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.sba-c-logo-groups .sba-c-logos-name {
	color: var(--sba-charcoal);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-align: center;
}

.sba-c-logo-groups .sba-c-logos-block > .sba-c-logos-actions {
	margin-top: 24px;
}

.sba-c-logo-groups .sba-c-logos-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
}

.sba-c-logo-groups .sba-c-logos-split .sba-c-section-title {
	max-width: none;
}

.sba-c-logo-groups .sba-c-logos-split .sba-c-links {
	margin-top: 24px;
}

@media (min-width: 640px) {
	.sba-c-logo-groups :is(.sba-c-logos-large, .sba-c-logos-named) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.sba-c-logo-groups .sba-c-logos-small {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.sba-c-logo-groups :is(.sba-c-logos-large, .sba-c-logos-named) {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.sba-c-logo-groups .sba-c-logos-small {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.sba-c-logo-groups .sba-c-logos-split {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: 64px;
	}

	.sba-c-logo-groups .sba-c-logos-main {
		grid-column: span 7;
	}

	.sba-c-logo-groups .sba-c-logos-aside {
		grid-column: span 5;
	}
}