/**
 * Credit strip: `border-t bg-surface-cool py-5`, the credits `flex
 * flex-wrap items-center gap-x-10 gap-y-4 text-sm` muted; a logo 32px
 * high `gap-3` after its label, a name `font-medium` charcoal, dark red on
 * hover.
 */

.sba-c-credit-strip {
	padding: 20px 0;
	border-top: 1px solid var(--sba-border);
	background-color: var(--sba-surface-cool);
}

.sba-c-credit-strip .sba-c-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 40px;
	color: var(--sba-slate);
	font-size: 14px;
	line-height: 20px;
}

.sba-c-credit-strip .sba-c-credit-logo {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.sba-c-credit-strip .sba-c-credit-logo a {
	display: inline-flex;
	align-items: center;
}

.sba-c-credit-strip img {
	width: auto;
	height: 32px;
}

.sba-c-credit-strip .sba-c-credit:not(.sba-c-credit-logo) a {
	color: var(--sba-charcoal);
	font-weight: 500;
	text-decoration: none;
}

.sba-c-credit-strip .sba-c-credit:not(.sba-c-credit-logo) a:hover {
	color: var(--sba-red-dark);
}

/* An operator line (the platform pages): the name in bold charcoal, the
   sentence after it; one line from 640px, stacked below (`flex-col gap-2
   sm:flex-row`). */
.sba-c-credit-strip .sba-c-credit-line {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sba-c-credit-strip .sba-c-credit-line strong {
	flex: 0 0 auto;
	color: var(--sba-charcoal);
	font-weight: var(--sba-heading-weight);
}

@media (min-width: 640px) {
	.sba-c-credit-strip .sba-c-credit-line {
		flex-direction: row;
	}
}