/**
 * Program finder. The question: the cards `mt-8 grid gap-4 sm:grid-cols-2
 * lg:grid-cols-5`, a card `flex flex-col rounded-lg border border-border/60
 * bg-card p-5`, lifted 4px with a shadow on hover; chosen, `border
 * swiss-red-dark shadow-lg ring-1`. Its check a 24px circle, filled in the
 * dark red when chosen; the label `mt-4 text-lg font-bold leading-snug`,
 * the hint `mt-2 text-sm leading-relaxed` muted. The line under the cards
 * `mt-6 text-sm` muted.
 *
 * The answer, a warm band: `grid gap-10 lg:grid-cols-12 lg:gap-16`, four
 * and eight columns. Left the heading, `mt-4` the line over the goals,
 * `mt-4 space-y-2 text-sm` the goals with checks, `mt-8` a 4:3 picture
 * `rounded-xl`, `mt-6` the way back. Right `space-y-4` three cards `grid
 * gap-4 rounded-lg border p-6 sm:grid-cols-[3.5rem_minmax(0,1fr)_auto]`:
 * the rank `text-3xl font-bold` in the dark red, the title `text-xl
 * font-bold leading-snug`, why `mt-2` muted, the page `mt-3 text-sm
 * font-medium` in the dark red, a 20px arrow. Then `mt-10 text-lg
 * font-bold` and the links `mt-3 divide-y border-y`, each `py-3 text-sm
 * font-medium`; the buttons `mt-8`, large.
 */

/* The question is `text-2xl md:text-3xl` without a leading: 32px lines
   below 768px where the small title elsewhere has 1.25. */
.sba-c-program-finder.sba-c-title-small .sba-c-section-title {
	line-height: 32px;
}

.sba-c-program-finder .sba-c-finder-profiles {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	margin-top: 32px;
}

.sba-c-program-finder .sba-c-finder-profile {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 20px;
	border: 1px solid color-mix(in srgb, var(--sba-border) 60%, transparent);
	border-radius: var(--sba-radius);
	background-color: var(--sba-surface);
	color: var(--sba-charcoal);
	text-align: left;
	text-decoration: none;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.sba-c-program-finder .sba-c-finder-profile:hover {
	border-color: color-mix(in srgb, var(--sba-red) 40%, transparent);
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	color: var(--sba-charcoal);
	transform: translateY(-4px);
}

.sba-c-program-finder .sba-c-finder-profile[aria-checked="true"] {
	border-color: var(--sba-red-dark);
	box-shadow: 0 0 0 1px var(--sba-red-dark), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	transform: none;
}

.sba-c-program-finder .sba-c-finder-profile:focus-visible {
	outline: 2px solid var(--sba-ring);
	outline-offset: 2px;
}

.sba-c-program-finder .sba-c-finder-check {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 1px solid var(--sba-border);
	border-radius: 9999px;
	color: transparent;
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

.sba-c-program-finder .sba-c-finder-check .sba-i {
	font-size: 14px;
	line-height: 14px;
}

.sba-c-program-finder .sba-c-finder-profile:hover .sba-c-finder-check {
	border-color: color-mix(in srgb, var(--sba-red) 60%, transparent);
}

.sba-c-program-finder .sba-c-finder-profile[aria-checked="true"] .sba-c-finder-check {
	border-color: var(--sba-red-dark);
	background-color: var(--sba-red-dark);
	color: #fff;
}

.sba-c-program-finder .sba-c-finder-label {
	margin-top: 16px;
	color: var(--sba-charcoal);
	font-size: 18px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: var(--sba-heading-tracking);
	line-height: 1.375;
}

.sba-c-program-finder .sba-c-finder-hint {
	margin-top: 8px;
	color: var(--sba-slate);
	font-size: 14px;
	line-height: 1.625;
}

.sba-c-program-finder .sba-c-finder-not-sure {
	margin-top: 24px;
	color: var(--sba-slate);
	font-size: 14px;
	line-height: 20px;
}

.sba-c-program-finder .sba-c-finder-not-sure[hidden],
.sba-c-program-finder-answer[hidden] {
	display: none;
}

.sba-c-program-finder .sba-c-finder-not-sure p {
	margin: 0;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

.sba-c-program-finder-answer {
	scroll-margin-top: 96px;
}

.sba-c-program-finder-answer .sba-c-finder-answer {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
}

.sba-c-program-finder-answer .sba-c-finder-why > :is(p, ul, img):where(:not(.sba-c-eyebrow)) {
	margin: 0;
}

.sba-c-program-finder-answer .sba-c-finder-why > .sba-c-finder-goals-intro {
	margin-top: 16px;
	color: var(--sba-slate);
	font-size: 16px;
	line-height: 24px;
}

.sba-c-program-finder-answer .sba-c-finder-why > .sba-c-finder-goals {
	display: grid;
	gap: 8px;
	margin-top: 16px;
	padding: 0;
	list-style: none;
}

.sba-c-program-finder-answer .sba-c-finder-goals li {
	display: flex;
	gap: 12px;
	margin: 0;
	color: var(--sba-charcoal);
	font-size: 14px;
	line-height: 20px;
}

.sba-c-program-finder-answer .sba-c-finder-goals .sba-i {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--sba-red-dark);
	font-size: 16px;
	line-height: 16px;
}

.sba-c-program-finder-answer .sba-c-finder-why > .sba-c-finder-image {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	margin-top: 32px;
	aspect-ratio: 4 / 3;
	border-radius: 12px;
	object-fit: cover;
}

/* The way back takes a 24px line, as the prototype's button in a line of
   text does. */
.sba-c-program-finder-answer .sba-c-finder-reset {
	display: flex;
	width: fit-content;
	min-height: 24px;
	align-items: center;
	gap: 6px;
	margin-top: 24px;
	color: var(--sba-red-dark);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-decoration: none;
}

.sba-c-program-finder-answer .sba-c-finder-reset:hover {
	color: var(--sba-red-darker);
}

.sba-c-program-finder-answer .sba-c-finder-reset .sba-i {
	font-size: 16px;
	line-height: 16px;
}

.sba-c-program-finder-answer .sba-c-finder-recommendations {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sba-c-program-finder-answer .sba-c-finder-recommendations li {
	margin: 0;
}

.sba-c-program-finder-answer .sba-c-finder-recommendation {
	display: grid;
	gap: 16px;
	padding: 24px;
	border: 1px solid color-mix(in srgb, var(--sba-border) 60%, transparent);
	border-radius: var(--sba-radius);
	background-color: var(--sba-surface);
	color: var(--sba-charcoal);
	text-decoration: none;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sba-c-program-finder-answer a.sba-c-finder-recommendation:hover {
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	color: var(--sba-charcoal);
	transform: translateY(-4px);
}

.sba-c-program-finder-answer .sba-c-finder-recommendation:focus-visible {
	outline: 2px solid var(--sba-ring);
	outline-offset: 2px;
}

.sba-c-program-finder-answer .sba-c-finder-rank {
	color: var(--sba-red-dark);
	font-size: 30px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: var(--sba-heading-tracking);
	line-height: 36px;
}

.sba-c-program-finder-answer .sba-c-finder-rec-body {
	min-width: 0;
}

.sba-c-program-finder-answer .sba-c-finder-rec-title {
	display: block;
	color: var(--sba-charcoal);
	font-size: 20px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: var(--sba-heading-tracking);
	line-height: 1.375;
	transition: color 0.3s ease;
}

.sba-c-program-finder-answer a.sba-c-finder-recommendation:hover .sba-c-finder-rec-title {
	color: var(--sba-red-dark);
}

.sba-c-program-finder-answer .sba-c-finder-rec-why {
	display: block;
	margin-top: 8px;
	color: var(--sba-slate);
	font-size: 16px;
	line-height: 24px;
}

.sba-c-program-finder-answer .sba-c-finder-rec-page {
	display: block;
	margin-top: 12px;
	color: var(--sba-red-dark);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
}

/* A recommendation with two links is not a link itself, and does not
   lift: the names under it are, in the row of text links. */
.sba-c-program-finder-answer .sba-c-finder-recommendation-links .sba-c-links {
	margin-top: 12px;
}

.sba-c-program-finder-answer .sba-c-finder-rec-arrow {
	display: none;
	color: var(--sba-red-dark);
	font-size: 20px;
	line-height: 20px;
	transition: transform 0.3s ease;
}

.sba-c-program-finder-answer a.sba-c-finder-recommendation:hover .sba-c-finder-rec-arrow {
	transform: translateX(2px);
}

.sba-c-program-finder-answer .sba-c-finder-what > .sba-c-finder-also-title {
	margin: 40px 0 0;
	color: var(--sba-charcoal);
	font-size: 18px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: var(--sba-heading-tracking);
	line-height: 28px;
}

.sba-c-program-finder-answer .sba-c-finder-what > .sba-c-finder-also {
	margin: 12px 0 0;
	padding: 0;
	border-top: 1px solid var(--sba-border);
	border-bottom: 1px solid var(--sba-border);
	list-style: none;
}

.sba-c-program-finder-answer .sba-c-finder-also li {
	margin: 0;
}

.sba-c-program-finder-answer .sba-c-finder-also li + li {
	border-top: 1px solid var(--sba-border);
}

.sba-c-program-finder-answer .sba-c-finder-also a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	color: var(--sba-charcoal);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-decoration: none;
}

.sba-c-program-finder-answer .sba-c-finder-also a:hover {
	color: var(--sba-red-dark);
}

.sba-c-program-finder-answer .sba-c-finder-also .sba-i {
	flex: 0 0 auto;
	color: var(--sba-red-dark);
	font-size: 16px;
	line-height: 16px;
	transition: transform 0.3s ease;
}

.sba-c-program-finder-answer .sba-c-finder-also a:hover .sba-i {
	transform: translateX(2px);
}

@media (min-width: 768px) {
	.sba-c-program-finder.sba-c-title-small .sba-c-section-title {
		line-height: 36px;
	}
}

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

	.sba-c-program-finder-answer .sba-c-finder-recommendation {
		grid-template-columns: 3.5rem minmax(0, 1fr) auto;
		align-items: start;
	}

	.sba-c-program-finder-answer .sba-c-finder-rec-arrow {
		display: block;
	}
}

@media (min-width: 1024px) {
	.sba-c-program-finder .sba-c-finder-profiles {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.sba-c-program-finder-answer .sba-c-finder-answer {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: 64px;
	}

	.sba-c-program-finder-answer .sba-c-finder-why {
		grid-column: span 4;
	}

	.sba-c-program-finder-answer .sba-c-finder-what {
		grid-column: span 8;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sba-c-program-finder .sba-c-finder-profile,
	.sba-c-program-finder .sba-c-finder-profile:hover,
	.sba-c-program-finder-answer .sba-c-finder-recommendation,
	.sba-c-program-finder-answer .sba-c-finder-recommendation:hover {
		transform: none;
	}
}