/**
 * Homepage-only styles — enqueued only on is_front_page().
 * Matches the approved homepage preview section-for-section.
 */

.hh-hero {
	background:
		linear-gradient(90deg, rgba(7, 22, 51, 0.99) 0%, rgba(7, 22, 51, 0.96) 36%, rgba(7, 22, 51, 0.7) 57%, rgba(7, 22, 51, 0.14) 84%),
		url('../images/hero-professionals-v1.jpg') 68% center / cover no-repeat;
	color: var(--hh-on-navy);
	padding: 92px 0 138px;
	position: relative;
	overflow: hidden;
}

.hh-hero::before,
.hh-hero::after {
	content: "";
	position: absolute;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	pointer-events: none;
}

.hh-hero::before {
	width: 460px;
	height: 460px;
	right: -90px;
	top: -190px;
}

.hh-hero::after {
	width: 310px;
	height: 310px;
	right: 16%;
	bottom: -210px;
}

.hh-hero-inner {
	max-width: 1180px;
	text-align: left;
	position: relative;
	z-index: 1;
}

.hh-hero-eyebrow {
	color: var(--hh-gold);
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	margin-bottom: 18px;
}

.hh-hero-eyebrow::after {
	content: "";
	width: 26px;
	height: 1px;
	background: rgba(245, 166, 35, 0.5);
}

.hh-hero h1 {
	font-size: clamp(42px, 5.4vw, 68px);
	line-height: 1.08;
	color: #fff;
	font-weight: 700;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
	max-width: 790px;
	letter-spacing: -0.035em;
}

.hh-hero p.sub {
	margin-top: 20px;
	font-size: 18px;
	color: var(--hh-on-navy-soft);
	max-width: 460px;
}

.hh-hero-proof {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr;
	gap: 12px;
	max-width: 920px;
	margin-top: 34px;
}

.hh-proof-card {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 17px 18px;
	border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.07);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.hh-proof-card--featured {
	flex-direction: row;
	align-items: flex-start;
	gap: 12px;
	background: rgba(255, 255, 255, 0.11);
}

.hh-proof-card strong {
	display: block;
	font-size: 14px;
	color: #fff;
	line-height: 1.3;
}

.hh-proof-card span:not(.hh-proof-icon) {
	display: block;
	margin-top: 4px;
	font-size: 12.5px;
	line-height: 1.45;
	color: rgba(237, 241, 251, 0.76);
}

.hh-proof-icon {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	flex: 0 0 28px;
	border-radius: 50%;
	background: var(--hh-gold);
	color: #071633;
	font-weight: 900;
}

@media (max-width: 780px) {
	.hh-hero {
		background:
			linear-gradient(180deg, rgba(7, 22, 51, 0.82) 0%, rgba(7, 22, 51, 0.94) 62%, #071633 100%),
			url('../images/hero-professionals-v1.jpg') 64% 30% / cover no-repeat;
		padding: 64px 0 120px;
	}

	.hh-hero-inner {
		max-width: 560px;
		text-align: center;
	}

	.hh-hero-eyebrow {
		justify-content: center;
	}

	.hh-hero-eyebrow::before {
		content: "";
		width: 26px;
		height: 1px;
		background: rgba(245, 166, 35, 0.5);
	}

	.hh-hero p.sub {
		margin-left: auto;
		margin-right: auto;
	}

	.hh-hero-proof {
		grid-template-columns: 1fr;
		max-width: 520px;
		margin-left: auto;
		margin-right: auto;
		text-align: left;
	}
}

.hh-ticket {
	margin: 40px 0 0;
	max-width: 620px;
	background: var(--hh-surface-raised);
	border-radius: var(--hh-radius-l);
	box-shadow: var(--hh-shadow-pop);
	display: flex;
	align-items: stretch;
	text-align: left;
}

@media (max-width: 780px) {
	.hh-ticket {
		margin: 40px auto 0;
	}
}

.ticket-field {
	flex: 1 1 0;
	padding: 15px 20px;
	min-width: 0;
}

.ticket-field label {
	display: block;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--hh-ink-soft);
	margin-bottom: 3px;
}

.ticket-field input,
.ticket-field select {
	width: 100%;
	border: none;
	background: none;
	padding: 0;
	font-family: var(--hh-font-body);
	font-size: 15.5px;
	font-weight: 600;
	color: var(--hh-ink);
	appearance: none;
	-webkit-appearance: none;
}

.ticket-field input::placeholder {
	color: var(--hh-ink-soft);
	font-weight: 500;
}

.ticket-field input:focus,
.ticket-field select:focus {
	outline: none;
}

.ticket-divider {
	width: 0;
	border-left: 1.5px dashed var(--hh-line);
	position: relative;
	flex-shrink: 0;
}

.ticket-divider::before,
.ticket-divider::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--hh-cloud);
}

.ticket-divider::before {
	top: -8px;
}

.ticket-divider::after {
	bottom: -8px;
}

.hh-ticket .btn-primary {
	margin: 8px;
	border-radius: calc(var(--hh-radius-l) - 8px);
	padding: 0 26px;
	flex-shrink: 0;
}

@media (max-width: 640px) {
	.hh-ticket {
		flex-direction: column;
		border-radius: var(--hh-radius-m);
	}

	.ticket-divider {
		display: none;
	}

	.ticket-field {
		border-bottom: 1px dashed var(--hh-line);
	}

	.hh-ticket .btn-primary {
		margin: 12px;
	}
}

.hh-hero-popular {
	margin-top: 22px;
	font-size: 13.5px;
	color: var(--hh-on-navy-soft);
}

.hh-hero-popular a {
	color: var(--hh-on-navy);
	font-weight: 600;
	border-bottom: 1px solid rgba(237, 241, 251, 0.3);
}

.hh-hero-popular a:hover {
	border-color: var(--hh-gold);
	color: var(--hh-gold);
}

.hh-hero-secondary {
	margin-top: 26px;
}

.hh-hero-secondary a {
	color: var(--hh-on-navy-soft);
	font-weight: 700;
	font-size: 14.5px;
}

.hh-hero-secondary a:hover {
	color: #fff;
}

.hh-hero-secondary a svg {
	width: 14px;
	height: 14px;
	margin-left: 4px;
	vertical-align: -2px;
}

.hh-trust-strip {
	max-width: 980px;
	margin: -64px auto 0;
	background: var(--hh-surface-raised);
	border-radius: var(--hh-radius-l);
	box-shadow: var(--hh-shadow-card);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	position: relative;
	z-index: 5;
}

.trust-item {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 22px 20px;
	border-right: 1px solid var(--hh-line);
}

.trust-item:last-child {
	border-right: none;
}

.trust-item svg {
	width: 22px;
	height: 22px;
	color: var(--hh-green);
	flex-shrink: 0;
}

.trust-item span {
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.25;
}

@media (max-width: 860px) {
	.hh-trust-strip {
		grid-template-columns: repeat(2, 1fr);
		margin-top: -48px;
		border-radius: var(--hh-radius-m);
	}

	.trust-item:nth-child(2) {
		border-right: none;
	}

	.trust-item {
		border-bottom: 1px solid var(--hh-line);
	}
}

.hh-section {
	padding: 92px 0;
}

.hh-section--tight-top {
	padding-top: 76px;
}

.section-head {
	max-width: 640px;
	margin-bottom: 44px;
}

.section-head h2 {
	font-size: clamp(26px, 3.4vw, 34px);
	font-weight: 700;
}

.section-head p {
	margin-top: 12px;
	font-size: 16.5px;
	color: var(--hh-ink-soft);
}

.section-head--centered {
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.band-cloud {
	background: var(--hh-cloud);
}

.hh-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	counter-reset: step;
}

.step {
	position: relative;
	padding-top: 6px;
}

.step-num {
	font-family: var(--hh-font-display);
	font-weight: 700;
	font-size: 15px;
	color: var(--hh-blue);
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}

.step-num::before {
	counter-increment: step;
	content: counter(step);
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--hh-surface-raised);
	border: 1.5px solid var(--hh-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
}

.step h3 {
	font-size: 18.5px;
	margin-bottom: 8px;
}

.step p {
	color: var(--hh-ink-soft);
	font-size: 15px;
}

@media (max-width: 760px) {
	.hh-steps {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

.hh-cat-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
}

.cat-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 22px 18px;
	border: 1.5px solid var(--hh-line);
	border-radius: var(--hh-radius-m);
	background: var(--hh-surface-raised);
	transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.cat-card:hover {
	border-color: var(--hh-blue);
	transform: translateY(-3px);
	box-shadow: var(--hh-shadow-card);
}

.cat-icon {
	width: 42px;
	height: 42px;
	border-radius: 11px;
	background: color-mix(in srgb, var(--hh-gold) 16%, transparent);
	display: flex;
	align-items: center;
	justify-content: center;
}

.cat-icon svg {
	width: 22px;
	height: 22px;
	color: var(--hh-blue-ink);
}

.cat-card span:last-child {
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.3;
}

.cat-more {
	text-align: center;
	margin-top: 30px;
}

@media (max-width: 980px) {
	.hh-cat-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 600px) {
	.hh-cat-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.hh-hero {
		padding: 46px 0 104px;
		background:
			linear-gradient(180deg, rgba(7, 22, 51, .58) 0%, rgba(7, 22, 51, .72) 36%, rgba(7, 22, 51, .93) 70%, #071633 100%),
			url('../images/hero-professionals-v1.jpg') 70% 24% / cover no-repeat;
	}

	.hh-hero h1 {
		font-size: clamp(32px, 10vw, 42px);
		line-height: 1.12;
		letter-spacing: -0.025em;
	}

	.hh-hero p.sub {
		margin-top: 16px;
		font-size: 16px;
	}

	.hh-ticket {
		margin-top: 28px;
		box-shadow: 0 18px 38px -18px rgba(10, 42, 102, .42);
	}

	.ticket-field {
		padding: 14px 16px;
	}

	.hh-ticket .btn-primary {
		min-height: 48px;
	}

	.hh-hero-popular {
		line-height: 1.8;
	}

	.hh-hero-secondary {
		margin-top: 20px;
	}

	.hh-hero-proof {
		margin-top: 28px;
	}

	.hh-trust-strip {
		grid-template-columns: 1fr;
		margin-top: -38px;
	}

	.trust-item,
	.trust-item:nth-child(2) {
		border-right: none;
		border-bottom: 1px solid var(--hh-line);
		padding: 17px 18px;
	}

	.trust-item:last-child {
		border-bottom: none;
	}

	.hh-section,
	.hh-join-band {
		padding: 64px 0;
	}

	.hh-section--tight-top {
		padding-top: 58px;
	}

	.section-head {
		margin-bottom: 30px;
	}

	.hh-cat-grid {
		gap: 12px;
	}

	.cat-card {
		padding: 18px 14px;
		gap: 11px;
	}

	.cat-card span:last-child {
		font-size: 13.5px;
	}

	.hh-banner {
		padding: 34px 22px;
	}

	.testi-card {
		padding: 22px;
	}
}

@media (max-width: 380px) {
	.hh-cat-grid {
		grid-template-columns: 1fr;
	}
}

/* .pro-grid, .pro-card and friends, and .empty-state are shared components
   defined once in components.css — Category, Job Detail, and this page
   all render professional cards, so they live in one place. */

.hh-banner {
	background: linear-gradient(120deg, var(--hh-blue) 0%, #2E76FF 100%);
	border-radius: var(--hh-radius-l);
	padding: 52px 48px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	color: #fff;
}

.hh-banner h2 {
	font-size: clamp(22px, 3vw, 28px);
	color: #fff;
	max-width: 480px;
}

@media (max-width: 720px) {
	.hh-banner {
		flex-direction: column;
		text-align: center;
		padding: 40px 28px;
	}
}

.hh-testi-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.testi-card {
	background: var(--hh-surface-raised);
	border: 1.5px solid var(--hh-line);
	border-radius: var(--hh-radius-m);
	padding: 26px;
}

.testi-quote-mark {
	font-family: var(--hh-font-display);
	font-size: 40px;
	color: var(--hh-gold);
	line-height: 1;
	margin-bottom: 6px;
	display: block;
}

.testi-card p.quote {
	font-size: 15px;
	color: var(--hh-ink);
}

.testi-attr {
	margin-top: 18px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--hh-ink-soft);
}

@media (max-width: 900px) {
	.hh-testi-grid {
		grid-template-columns: 1fr;
		max-width: 460px;
		margin: 0 auto;
	}
}

.hh-join-band {
	background: var(--hh-blue-ink);
	color: var(--hh-on-navy);
	position: relative;
	overflow: hidden;
	padding: 92px 0;
}

.hh-join-band::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(560px 320px at 12% 20%, rgba(30, 158, 90, 0.18), transparent 60%);
}

.hh-join-inner {
	position: relative;
	text-align: center;
	max-width: 620px;
	margin: 0 auto;
}

.hh-join-inner h2 {
	color: #fff;
	font-size: clamp(24px, 3.4vw, 32px);
}

.hh-join-inner p {
	margin-top: 14px;
	color: var(--hh-on-navy-soft);
	font-size: 16.5px;
}

.hh-join-inner .btn-primary {
	margin-top: 26px;
}

.hh-join-inner .micro {
	margin-top: 12px;
	font-size: 13px;
	color: var(--hh-on-navy-soft);
	opacity: 0.85;
}