/**
 * Hero CSS
 * Homepage hero, archive/taxonomy hero, search hero, single clinic hero.
 *
 * @package ClinicalRecovery
 */

/* ── Homepage Hero ──────────────────────────────────────────── */
.home-hero {
	position: relative;
	min-height: clamp(680px, 90vh, 900px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: linear-gradient(135deg, #1A2A2E 0%, #2C3F44 100%);
	color: #fff;
}
.home-hero__bg {
	position: absolute;
	inset: 0;
	background: none;
	z-index: 0;
	transform: scale(1.03);
	transition: transform 8s ease;
}
.home-hero.is-loaded .home-hero__bg {
	transform: scale(1);
}
.home-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(26,42,46,.45) 0%,
		rgba(26,42,46,.25) 50%,
		rgba(26,42,46,.7) 100%
	);
	z-index: 0;
}
/* Container sits above overlay */
.home-hero > .container {
	position: relative;
	z-index: 1;
	flex: 1;
	display: flex;
	align-items: center;
}
.home-hero__content {
	padding: 6rem 0 4rem;
	max-width: 860px;
}
.home-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.5rem 1.125rem;
	background: rgba(184,148,90,.15);
	border: 1px solid rgba(184,148,90,.3);
	color: var(--gold-soft);
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 500;
	margin-bottom: 1.75rem;
}
.hero-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--gold-soft);
	flex-shrink: 0;
}
.home-hero__heading {
	font-family: var(--ff-serif);
	font-size: clamp(2.75rem, 6.5vw, 5.25rem);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.025em;
	color: #fff;
	margin-bottom: 1.5rem;
}
.home-hero__heading em {
	font-style: italic;
	color: var(--gold-soft);
	font-weight: 500;
}
.home-hero__sub {
	font-size: clamp(1rem, 1.8vw, 1.1875rem);
	line-height: 1.65;
	color: rgba(255,255,255,.85);
	max-width: 620px;
	margin-bottom: 2.75rem;
	font-weight: 300;
}
.home-hero__search {
	margin-bottom: 2.25rem;
}
/* Popular tags */
.home-hero__popular {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.625rem;
}
.popular-label {
	font-size: 0.875rem;
	color: rgba(255,255,255,.6);
	margin-right: 0.25rem;
}
.popular-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.3125rem 0.875rem;
	background: rgba(255,255,255,.1);
	border: 1px solid rgba(255,255,255,.18);
	font-size: 0.875rem;
	color: rgba(255,255,255,.88);
	text-decoration: none;
	backdrop-filter: blur(4px);
	transition: background var(--t-fast), border-color var(--t-fast);
	border-radius: 2rem;
}
.popular-tag:hover {
	background: rgba(255,255,255,.2);
	border-color: rgba(255,255,255,.35);
}
/* Trust stats bar at bottom of hero */
.home-hero__trust {
	position: relative;
	z-index: 1;
	border-top: 1px solid rgba(255,255,255,.12);
	background: rgba(255,255,255,.06);
	backdrop-filter: blur(8px);
}
.trust-stats {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	padding: 1.25rem 1.5rem;
	flex-wrap: wrap;
}
.trust-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0.5rem 3rem;
	border-right: 1px solid rgba(255,255,255,.12);
}
.trust-stat:last-child { border-right: none; }
.trust-stat__divider { display: none; }
.trust-stat__number {
	font-family: var(--ff-serif);
	font-size: 1.625rem;
	font-weight: 500;
	color: #fff;
	line-height: 1;
	margin-bottom: 0.25rem;
}
.trust-stat__label {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255,255,255,.6);
	white-space: nowrap;
}

/* ── Hero Search Form (inside hero) ─────────────────────────── */
/* The form uses .hero-search class from template-parts/search/hero-search.php */
.hero-search {
	display: flex;
	align-items: stretch;
	background: rgba(255,255,255,.98);
	border-radius: 4px;
	padding: 8px;
	max-width: 820px;
	box-shadow: 0 30px 80px rgba(0,0,0,.25);
	gap: 0;
}
.hero-search__field {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.875rem 1.25rem;
	border-right: 1px solid var(--border);
	background: transparent;
	cursor: pointer;
	transition: background var(--t-fast);
	position: relative;
}
.hero-search__field:hover {
	background: var(--bg);
}
.hero-search__field--text { flex: 1.4; }
.hero-search__field--select { flex: 1; }
.hero-search__icon {
	color: var(--gold);
	font-size: 1.125rem;
	flex-shrink: 0;
}
.hero-search__input,
.hero-search__select {
	border: none;
	outline: none;
	background: none;
	font-size: 0.9375rem;
	color: var(--ink);
	font-family: var(--ff-sans);
	width: 100%;
	padding: 0;
	cursor: pointer;
}
.hero-search__input::placeholder {
	color: var(--text-muted);
	font-size: 0.875rem;
}
.hero-search__btn {
	background: var(--ink);
	color: #fff;
	border: none;
	padding: 0 2rem;
	border-radius: 2px;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	white-space: nowrap;
	transition: background var(--t-fast);
	flex-shrink: 0;
	font-family: var(--ff-sans);
}
.hero-search__btn:hover {
	background: var(--gold);
}
/* Autocomplete dropdown */
.search-autocomplete {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	max-height: 320px;
	overflow-y: auto;
	z-index: var(--z-dropdown);
}
.search-autocomplete[hidden] { display: none; }
.search-autocomplete__item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	cursor: pointer;
	transition: background var(--t-fast);
	color: var(--ink);
}
.search-autocomplete__item:hover {
	background: var(--bg);
}

/* ── Archive Hero ───────────────────────────────────────────── */
.archive-hero {
	background: var(--bg-dark);
	padding: clamp(3rem, 7vw, 6rem) 0 3rem;
}
.archive-hero__inner {
	max-width: 720px;
}
.archive-hero__eyebrow {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 1rem;
}
.archive-hero__title {
	font-family: var(--ff-serif);
	font-size: clamp(2rem, 4.5vw, 3.5rem);
	font-weight: 400;
	color: var(--white);
	line-height: 1.1;
	margin-bottom: 1rem;
}
.archive-hero__subtitle {
	color: rgba(255,255,255,.7);
	font-size: clamp(1rem, 1.5vw, 1.125rem);
	line-height: 1.6;
	margin-bottom: 2rem;
}
.archive-hero__search {
	max-width: 560px;
}

/* ── Taxonomy Hero ──────────────────────────────────────────── */
.taxonomy-hero {
	position: relative;
	background: var(--bg-dark);
	padding: clamp(3rem, 7vw, 6rem) 0 3rem;
	overflow: hidden;
}
.taxonomy-hero--has-bg {
	background-image: var(--hero-bg);
	background-size: cover;
	background-position: center;
}
.taxonomy-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(26,42,46,.85) 0%, rgba(26,42,46,.5) 100%);
}
.taxonomy-hero .container {
	position: relative;
	z-index: 1;
}
.taxonomy-hero__inner {
	display: flex;
	align-items: flex-end;
	gap: 1.5rem;
}
.taxonomy-hero__thumb {
	flex-shrink: 0;
	margin: 0;
}
.taxonomy-hero__thumb-img {
	width: 80px;
	height: 80px;
	border-radius: var(--radius-md);
	object-fit: cover;
	border: 2px solid var(--gold);
}
.taxonomy-hero__eyebrow {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 0.5rem;
}
.taxonomy-hero__title {
	font-family: var(--ff-serif);
	font-size: clamp(2rem, 4vw, 3rem);
	color: var(--white);
	line-height: 1.1;
	margin-bottom: 0.75rem;
}
.taxonomy-hero__desc {
	color: rgba(255,255,255,.75);
	font-size: 1rem;
	line-height: 1.6;
	max-width: 600px;
}
.taxonomy-hero__count {
	display: inline-block;
	margin-top: 0.75rem;
	font-size: 0.875rem;
	color: rgba(255,255,255,.55);
	font-weight: 500;
}

/* ── Single Clinic Hero ─────────────────────────────────────── */
.clinic-hero {
	position: relative;
	background: var(--bg-dark);
}
.clinic-hero__gallery {
	position: relative;
	aspect-ratio: 16/7;
	overflow: hidden;
}
.clinic-hero__gallery-track {
	display: flex;
	height: 100%;
	transition: transform 0.5s var(--ease-out);
}
.clinic-hero__gallery-slide {
	flex-shrink: 0;
	width: 100%;
	height: 100%;
}
.clinic-hero__gallery-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.clinic-hero__gallery-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 40%, rgba(26,42,46,.7) 100%);
	pointer-events: none;
}
.clinic-hero__gallery-nav {
	position: absolute;
	bottom: 1.5rem;
	right: 1.5rem;
	display: flex;
	gap: 0.5rem;
	z-index: 2;
}
.clinic-hero__gallery-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: rgba(255,255,255,.15);
	border: 1px solid rgba(255,255,255,.3);
	backdrop-filter: blur(4px);
	border-radius: 50%;
	color: var(--white);
	font-size: 1.25rem;
	cursor: pointer;
	transition: background var(--t-fast);
}
.clinic-hero__gallery-btn:hover {
	background: rgba(255,255,255,.3);
}
.clinic-hero__gallery-counter {
	position: absolute;
	bottom: 1.5rem;
	left: 1.5rem;
	font-size: 0.875rem;
	color: rgba(255,255,255,.8);
	background: rgba(0,0,0,.4);
	backdrop-filter: blur(4px);
	padding: 0.25rem 0.75rem;
	border-radius: 2rem;
}
.clinic-hero__gallery-all {
	position: absolute;
	bottom: 1.5rem;
	right: 8rem;
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.875rem;
	color: var(--white);
	background: rgba(255,255,255,.15);
	border: 1px solid rgba(255,255,255,.3);
	backdrop-filter: blur(4px);
	padding: 0.4rem 0.875rem;
	border-radius: 2rem;
	text-decoration: none;
	transition: background var(--t-fast);
}
.clinic-hero__gallery-all:hover {
	background: rgba(255,255,255,.28);
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.home-hero__content {
		padding: 4rem 0 3rem;
	}
	.hero-search {
		flex-direction: column;
		border-radius: var(--radius-md);
		max-width: 100%;
	}
	.hero-search__field {
		border-right: none;
		border-bottom: 1px solid var(--border);
	}
	.hero-search__field:last-of-type {
		border-bottom: none;
	}
	.hero-search__btn {
		width: 100%;
		justify-content: center;
		padding: 1rem;
		border-radius: 0 0 var(--radius-md) var(--radius-md);
	}
	.trust-stats {
		gap: 0;
	}
	.trust-stat {
		padding: 0.5rem 1.25rem;
		flex: 1;
		min-width: 50%;
	}
	.taxonomy-hero__inner {
		flex-direction: column;
		align-items: flex-start;
	}
	.clinic-hero__gallery {
		aspect-ratio: 4/3;
	}
}