/*
 * Homepage Hero
 *
 * Figma: 1440px frame, background --qehs-primary, hero height 676px,
 * top padding 24px / bottom padding 120px (extra bottom space reserved
 * for the Search bar section, which overlaps the hero/next-section
 * boundary — built in a later task, not this one).
 *
 * Uses .qehs-section (full-width background) + .qehs-container (1248px
 * centered content, responsive padding) from base/typography.css.
 */

.qehs-hero {
	/* Subtle left-edge darkening, measured from the reference: fades
	   from near-black at the left edge into the existing --qehs-primary
	   navy by ~30% across, then holds flat navy for the remainder.
	   Base navy color is unchanged — this only adds a gradient overlay
	   toward the left edge, per the reference. */
	background: linear-gradient(to right, #000000 0%, var(--qehs-primary) 32%, var(--qehs-primary) 100%);
	padding-top: 36px;
	padding-bottom: 120px;
	overflow: hidden; /* artwork must never cause horizontal scroll */
}

.qehs-hero__inner {
	display: flex;
	align-items: center;
	gap: var(--qehs-space-xl);
}

.qehs-hero__content {
	flex: 1 1 55%;
	min-width: 0;
}

.qehs-hero__headline {
	/* Larger/bolder than the sitewide default h1 — a deliberate,
	   scoped override for this hero context only, not a change to
	   base/typography.css's global heading scale. */
	margin: 0 0 var(--qehs-space-md);
	font-size: 3rem;
	line-height: 1.25;
	font-weight: 700;
	color: #ffffff;
}

.qehs-hero__headline-accent {
	color: var(--qehs-secondary);
}

.qehs-hero__lead {
	margin: 0 0 var(--qehs-space-lg);
	max-width: 680px;
	font-size: 1rem;
	line-height: 1.6;
	/* ASSUMPTION: exact Figma value for this muted-on-navy body text
	   wasn't provided — translucent white avoids inventing a new named
	   color token for a single-use tint. Swap for an exact hex if one
	   is supplied. */
	color: rgba(255, 255, 255, 0.78);
}

.qehs-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--qehs-space-md);
	margin-bottom: var(--qehs-space-xl);
}

/* Pill-shaped CTA buttons, scoped to the hero only — mirrors the same
   approach already used for the header's Login button: .qehs-btn's
   shared border-radius stays untouched (Document Card depends on it),
   this only overrides shape within .qehs-hero__cta. */
.qehs-hero__cta-btn {
	border-radius: 999px;
	padding: var(--qehs-space-md) var(--qehs-space-lg);
	transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease, filter 0.2s ease;
}


.qehs-hero__cta-btn.qehs-btn--secondary {
	line-height: 2;
}

.qehs-hero__cta-btn.qehs-btn--secondary:hover,
.qehs-hero__cta-btn.qehs-btn--secondary:focus-visible {
	line-height: 2;
	background-color: transparent;
	color: white;
	border: 2px solid white;
}


.qehs-hero__stats {
	display: flex;
	/*flex-wrap: wrap;*/
	align-items: flex-start;
	column-gap: var(--qehs-space-lg);
	row-gap: var(--qehs-space-md);
}

.qehs-hero__stat {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--qehs-space-sm);
}

/* Vertical divider between stat groups, matching the reference — the
   first item has none. */
.qehs-hero__stat + .qehs-hero__stat {
	padding-left: var(--qehs-space-lg);
	border-left: 1px solid rgba(255, 255, 255, 0.2); 
}

.qehs-hero__stat-icon {
	flex-shrink: 0;
	object-fit: contain;
}

.qehs-hero__stat-value {
	font-weight: 700;
	font-size: 1rem;
	color: #ffffff;
}

.qehs-hero__stat-label {
	flex-basis: 100%;
	margin-left: 26px; /* icon width + gap, so the label aligns under the value */
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.65);
}

/* The rating icon (5-star row) is proportionally wider than the other
   stat icons (86px vs ~20-27px) — its own natural aspect ratio is
   preserved rather than distorted into a square, so its label needs a
   matching wider margin to stay aligned under the value. */
.qehs-hero__stat--rating .qehs-hero__stat-label {
	margin-left: 94px;
}

.qehs-hero__media {
	flex: 1 1 50%;
	display: flex;
	justify-content: center;
	min-width: 0;
}

.qehs-hero__image {
	display: flex;
	width: 100%;
	height: auto;
}

/* --- Tablet / mobile: stack content above artwork, matching the
   site's existing 1024px breakpoint (same as the header) rather than
   introducing a different one. --- */
@media (max-width: 1024px) {
	.qehs-hero {
		padding-top: var(--qehs-space-xl);
		padding-bottom: var(--qehs-space-2xl);
	}

	.qehs-hero__inner {
		flex-direction: column;
		align-items: stretch;
		gap: var(--qehs-space-xl);
	}

	.qehs-hero__content {
		flex-basis: auto;
	}

	.qehs-hero__lead {
		max-width: none;
	}

	.qehs-hero__media {
		order: -1; /* artwork above the headline on smaller screens, avoiding a very long single column with the image buried at the bottom */
		flex-basis: auto;
	}

	.qehs-hero__image {
		max-width: 500px;
		margin: 0 auto;
	}

	.qehs-hero__headline {
		font-size: 2.25rem;
	}
}

/* --- Compact phones --- */
@media (max-width: 480px) {
	.qehs-hero {
		padding-top: var(--qehs-space-lg);
		padding-bottom: var(--qehs-space-xl);
	}

	.qehs-hero__headline {
		font-size: 1.75rem;
	}

	.qehs-hero__lead {
		font-size: 0.9rem;
	}

	.qehs-hero__cta {
		flex-direction: column;
		align-items: stretch;
	}

	.qehs-hero__cta-btn {
		justify-content: center;
	}

	.qehs-hero__stats {
		column-gap: var(--qehs-space-lg);
	}

	.qehs-hero__image {
		max-width: 320px;
	}
}