/**
 * HomeBlesh v2.4.0: homepage intent cards + Project Finder banner.
 * Light theme. Brand accents only: green, leaf, green, orange, green,
 * ink, soft, white. Card border uses the theme line token.
 */

.hb-intent-v24,
.hb-intent-v24 *,
.hb-intent-v24 *::before,
.hb-intent-v24 *::after {
	box-sizing: border-box;
}

.hb-intent-v24 {
	background: #ffffff;
	overflow-x: hidden;
}

.hb-intent-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	min-width: 0;
}

.hb-intent-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	min-width: 0;
	overflow: hidden;
	background: #ffffff;
	border: 1px solid var(--hb-line);
	border-radius: 20px;
	padding: 24px;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.hb-intent-card:nth-child(even) {
	background: #f7f2e9;
}

/* Shine sweep, hidden until hover or keyboard focus inside the card. */
.hb-intent-card::after {
	content: "";
	position: absolute;
	top: 0;
	left: -80%;
	width: 50%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.65), transparent);
	transform: skewX(-20deg);
	opacity: 0;
	pointer-events: none;
	transition: left 0.6s ease, opacity 0.3s ease;
}

.hb-intent-card:hover,
.hb-intent-card:focus-within {
	transform: translateY(-6px) scale(1.015);
	box-shadow: 0 2px 6px rgba(18, 18, 40, 0.06), 0 16px 40px rgba(18, 18, 40, 0.14), 0 30px 60px rgba(123, 108, 255, 0.14);
	border-color: #0b6b4c;
}

/* Per-card border glow matching each card's icon color. */
.hb-intent-card.is-pink:hover,
.hb-intent-card.is-pink:focus-within {
	border-color: #07563d;
	box-shadow: 0 2px 6px rgba(18, 18, 40, 0.06), 0 16px 40px rgba(18, 18, 40, 0.14), 0 30px 60px rgba(7, 86, 61, 0.16);
}

.hb-intent-card.is-purple:hover,
.hb-intent-card.is-purple:focus-within {
	border-color: #0b6b4c;
	box-shadow: 0 2px 6px rgba(18, 18, 40, 0.06), 0 16px 40px rgba(18, 18, 40, 0.14), 0 30px 60px rgba(123, 108, 255, 0.16);
}

.hb-intent-card.is-blue:hover,
.hb-intent-card.is-blue:focus-within {
	border-color: #1d6fb8;
	box-shadow: 0 2px 6px rgba(18, 18, 40, 0.06), 0 16px 40px rgba(18, 18, 40, 0.14), 0 30px 60px rgba(46, 125, 91, 0.16);
}

.hb-intent-card.is-orange:hover,
.hb-intent-card.is-orange:focus-within {
	border-color: #0284c7;
	box-shadow: 0 2px 6px rgba(18, 18, 40, 0.06), 0 16px 40px rgba(18, 18, 40, 0.14), 0 30px 60px rgba(255, 116, 72, 0.16);
}

.hb-intent-card.is-green:hover,
.hb-intent-card.is-green:focus-within {
	border-color: #1d6fb8;
	box-shadow: 0 2px 6px rgba(18, 18, 40, 0.06), 0 16px 40px rgba(18, 18, 40, 0.14), 0 30px 60px rgba(52, 199, 123, 0.16);
}

/* Clean tap state for touch screens, where hover does not apply. */
.hb-intent-card:active {
	transform: translateY(-2px) scale(1.005);
}

.hb-intent-card:hover::after,
.hb-intent-card:focus-within::after {
	left: 130%;
	opacity: 1;
}

.hb-intent-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	flex: 0 0 52px;
	border-radius: 50%;
	color: #ffffff;
	background: #0b6b4c;
	margin-bottom: 16px;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hb-intent-card:hover .hb-intent-icon,
.hb-intent-card:focus-within .hb-intent-icon {
	transform: scale(1.12) rotate(-3deg);
	box-shadow: 0 10px 22px rgba(18, 18, 40, 0.2);
}

.hb-intent-card.is-pink .hb-intent-icon {
	background: #07563d;
}

.hb-intent-card.is-purple .hb-intent-icon {
	background: #0b6b4c;
}

.hb-intent-card.is-blue .hb-intent-icon {
	background: #1d6fb8;
}

.hb-intent-card.is-orange .hb-intent-icon {
	background: #0284c7;
}

.hb-intent-card.is-green .hb-intent-icon {
	background: #1d6fb8;
}

.hb-intent-icon svg {
	display: block;
	width: 24px;
	height: 24px;
}

.hb-intent-title {
	font-family: var(--hb-font-head);
	font-size: 20px;
	font-weight: 800;
	line-height: 1.3;
	color: #121612;
	margin: 0 0 8px;
}

.hb-intent-text {
	font-size: 15px;
	line-height: 1.6;
	color: #121612;
	margin: 0 0 16px;
	overflow-wrap: break-word;
}

.hb-intent-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 18px;
	margin-top: auto;
	padding-top: 4px;
}

.hb-intent-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 15px;
	font-weight: 700;
	/* Darker brand green: #1d6fb8 measured 3.61:1 on white and
	   3.40:1 on the soft card; #3563e8 measures 5.12:1 and 4.82:1. */
	color: #3563e8;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

/* Color restated so the global a:hover green in main.css (3.26:1
   on white) cannot take over the hover state. */
.hb-intent-link:hover {
	color: #3563e8;
	text-decoration: underline;
}

.hb-intent-link:focus-visible {
	outline: 3px solid #1d6fb8;
	outline-offset: 3px;
	border-radius: 6px;
	text-decoration: underline;
}

/* Project Finder gradient banner, centered layout with the site logo on top. */
.hb-intent-banner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 20px;
	max-width: 100%;
	margin-top: 24px;
	padding: 32px;
	/* v2.6.2: green to blue to sky, darkened for white-text contrast
	   (white measures about 7:1 on #06402E, 6:1 on #14568F and 5:1 on
	   #0369A1). The old magenta-to-purple gradient sat outside the
	   green/blue/sky scheme. */
	background: linear-gradient(90deg, #06402E, #14568F 55%, #0369A1);
	border-radius: 20px;
	overflow: hidden;
}

.hb-intent-banner-text {
	width: 100%;
	max-width: 720px;
	min-width: 0;
	text-align: center;
}

/* Site logo in a white pill so it stays readable on the gradient. */
.hb-intent-banner-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 18px;
	background: #ffffff;
	border-radius: 999px;
	padding: 10px 28px;
	box-shadow: 0 10px 26px rgba(18, 18, 40, 0.22);
	max-width: 100%;
	width: max-content;
}

.hb-intent-banner-logo a {
	display: inline-flex;
	line-height: 0;
}

.hb-intent-banner-logo img {
	display: block;
	height: 72px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

.hb-intent-banner-wordmark {
	font-family: var(--hb-font-head);
	font-size: 28px;
	font-weight: 900;
	letter-spacing: -0.02em;
	color: #1d6fb8;
	white-space: nowrap;
}

.hb-intent-eyebrow {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #ffffff;
	margin: 0 0 8px;
}

.hb-intent-banner-title {
	font-family: var(--hb-font-head);
	font-size: clamp(22px, 3vw, 30px);
	font-weight: 900;
	line-height: 1.25;
	color: #ffffff;
	margin: 0 0 8px;
}

.hb-intent-banner-sub {
	font-size: 15px;
	line-height: 1.6;
	color: #ffffff;
	margin: 0;
	overflow-wrap: break-word;
}

.hb-intent-banner-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px 20px;
}

.hb-intent-banner-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 28px;
	background: #ffffff;
	color: #121612;
	border-radius: 999px;
	font-family: var(--hb-font-head);
	font-size: 15px;
	font-weight: 800;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	box-shadow: 0 6px 18px rgba(18, 18, 40, 0.07);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Color restated so the global a:hover green in main.css cannot
   recolor the ink text on the white pill. */
.hb-intent-banner-btn:hover {
	color: #121612;
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(18, 18, 40, 0.25);
}

.hb-intent-banner-btn:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 3px;
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(18, 18, 40, 0.25);
}

.hb-intent-banner-alt {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 15px;
	font-weight: 600;
	color: #ffffff;
	text-decoration: underline;
	-webkit-tap-highlight-color: transparent;
}

/* Color restated so the global a:hover green in main.css cannot
   turn this link green on the green end of the gradient. */
.hb-intent-banner-alt:hover {
	color: #ffffff;
	text-decoration-thickness: 2px;
}

.hb-intent-banner-alt:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 3px;
	border-radius: 6px;
}

/* Tablet: 2 columns. */
@media (max-width: 1024px) {
	.hb-intent-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Mobile: 1 column, banner stacks, full-width button, no horizontal overflow. */
@media (max-width: 640px) {
	.hb-intent-grid {
		grid-template-columns: 1fr;
	}

	.hb-intent-card {
		padding: 20px;
	}

	.hb-intent-banner {
		padding: 24px 20px;
	}

	.hb-intent-banner-logo {
		align-self: center;
		padding: 8px 22px;
	}

	/* Cap the logo by the banner content width: at a 320px
	   viewport the banner content box is 320 - 48 container
	   padding - 40 banner padding = 232px, minus 2 x 22px pill
	   padding leaves 188px for the image. */
	.hb-intent-banner-logo img {
		height: auto;
		max-height: 56px;
		max-width: calc(100vw - 132px);
	}

	.hb-intent-banner-wordmark {
		font-size: 24px;
		white-space: normal;
		overflow-wrap: anywhere;
		text-align: center;
	}

	.hb-intent-banner-actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.hb-intent-banner-btn {
		width: 100%;
	}

	.hb-intent-banner-alt {
		justify-content: center;
		text-align: center;
	}
}

/* Reduced motion: no transforms, no shine. */
@media (prefers-reduced-motion: reduce) {
	.hb-intent-card,
	.hb-intent-card::after,
	.hb-intent-banner-btn,
	.hb-intent-icon {
		transition: none;
		transform: none;
	}

	.hb-intent-card:hover,
	.hb-intent-card:focus-within,
	.hb-intent-card:active,
	.hb-intent-banner-btn:hover,
	.hb-intent-banner-btn:focus-visible {
		transform: none;
	}

	.hb-intent-card:hover .hb-intent-icon,
	.hb-intent-card:focus-within .hb-intent-icon {
		transform: none;
		box-shadow: none;
	}

	.hb-intent-card::after {
		display: none;
	}
}

/* ============ Dark mode (v2.4.5) ============ */
/* Section surface: the global dark rule makes headings light, so the
   section itself must go dark or headings would sit on white. */
.hb-dark .hb-intent-v24 {
	background: #121218;
}

.hb-dark .hb-intent-v24 h2 {
	color: #f4f4fa;
}

/* Cards: dark surfaces, readable text, dark borders. */
.hb-dark .hb-intent-card {
	background: #1b1b26;
	border-color: #2a2a3a;
}

.hb-dark .hb-intent-card:nth-child(even) {
	background: #20202e;
}

.hb-dark .hb-intent-title {
	color: #f4f4fa;
}

.hb-dark .hb-intent-text {
	color: #ececf4;
}

/* Links: brighter brand green so they stay readable on dark cards. */
.hb-dark .hb-intent-link {
	color: #1d6fb8;
}

.hb-dark .hb-intent-link:focus-visible {
	outline-color: #1d6fb8;
}

/* Icon chips: brand fills stay, shadow goes dark. */
.hb-dark .hb-intent-card:hover .hb-intent-icon,
.hb-dark .hb-intent-card:focus-within .hb-intent-icon {
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.55);
}

/* Shine sweep: softer on dark so it reads as a sheen, not a flash. */
.hb-dark .hb-intent-card::after {
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.22), transparent);
}

/* Hover lift and glow: dark shadows plus the same brand glow. */
.hb-dark .hb-intent-card:hover,
.hb-dark .hb-intent-card:focus-within {
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 16px 40px rgba(0, 0, 0, 0.55), 0 30px 60px rgba(123, 108, 255, 0.25);
	border-color: #0b6b4c;
}

.hb-dark .hb-intent-card.is-pink:hover,
.hb-dark .hb-intent-card.is-pink:focus-within {
	border-color: #07563d;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 16px 40px rgba(0, 0, 0, 0.55), 0 30px 60px rgba(7, 86, 61, 0.28);
}

.hb-dark .hb-intent-card.is-purple:hover,
.hb-dark .hb-intent-card.is-purple:focus-within {
	border-color: #0b6b4c;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 16px 40px rgba(0, 0, 0, 0.55), 0 30px 60px rgba(123, 108, 255, 0.28);
}

.hb-dark .hb-intent-card.is-blue:hover,
.hb-dark .hb-intent-card.is-blue:focus-within {
	border-color: #1d6fb8;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 16px 40px rgba(0, 0, 0, 0.55), 0 30px 60px rgba(46, 125, 91, 0.28);
}

.hb-dark .hb-intent-card.is-orange:hover,
.hb-dark .hb-intent-card.is-orange:focus-within {
	border-color: #0284c7;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 16px 40px rgba(0, 0, 0, 0.55), 0 30px 60px rgba(255, 116, 72, 0.28);
}

.hb-dark .hb-intent-card.is-green:hover,
.hb-dark .hb-intent-card.is-green:focus-within {
	border-color: #1d6fb8;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 16px 40px rgba(0, 0, 0, 0.55), 0 30px 60px rgba(52, 199, 123, 0.28);
}

/* Project Finder banner: gradient stays. White text on the gradient
   already reads, so it is restated explicitly to guard against the
   global dark heading rule and any light-mode inheritance. */
.hb-dark .hb-intent-banner {
	background: linear-gradient(90deg, #06402E, #14568F 55%, #0369A1);
}

.hb-dark .hb-intent-eyebrow,
.hb-dark .hb-intent-banner-title,
.hb-dark .hb-intent-banner-sub,
.hb-dark .hb-intent-banner-alt {
	color: #ffffff;
}

.hb-dark .hb-intent-banner-alt:focus-visible {
	outline-color: #ffffff;
}

/* Logo pill deliberately stays white in dark mode: the wordmark is
   brand green and only reads on a light pill over the gradient. */
.hb-dark .hb-intent-banner-logo {
	background: #ffffff;
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}

.hb-dark .hb-intent-banner-wordmark {
	color: #1d6fb8;
}

/* White button deliberately stays white with ink text in dark mode:
   it is the contrast element on the gradient. Shadows go dark. */
.hb-dark .hb-intent-banner-btn {
	background: #ffffff;
	color: #121612;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.hb-dark .hb-intent-banner-btn:hover {
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.hb-dark .hb-intent-banner-btn:focus-visible {
	outline-color: #ffffff;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

/* ============ v2.4.8 (continued): coarse pointers ============
   Card links keep their 44px tap height on touch tablets above the
   640px phone breakpoint, where the multi-column layout returns.
   Fine-pointer desktops are unaffected. */
@media (pointer: coarse) {
	.hb-intent-link {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding-block: 10px;
	}
}