/**
 * Busly — hero.css
 * The cinematic photo hero + eyebrow/heading/CTA/trust-row, exactly matching
 * .hero-* in homepage.html. Rendered by class-widget-hero.php.
 */

.busly-hero-wrap { background: #f0f2f7; }
/* min-height, not height: the badge/heading/subtitle/CTA/trust-row stack is
   vertically centered inside this box (see .busly-hero-body below). A fixed
   `height` combined with `overflow:hidden` would clip that stack (usually
   the trust row, being last) whenever it's taller than the clamped value at
   a given viewport height — min-height keeps the clamp as a *minimum*
   (matching the reference's cinematic proportions) while letting the box
   grow to fit its actual content instead of cutting it off. */
.busly-hero { position: relative; overflow: hidden; min-height: clamp(400px, 62vh, 680px); }
.busly-hero-photo { position: absolute; inset: 0; background-position: center 55%; background-size: cover; background-repeat: no-repeat; }
.busly-hero-overlay {
	position: absolute; inset: 0;
	background: linear-gradient(100deg, rgba(6,14,46,.90) 0%, rgba(6,14,46,.75) 22%, rgba(6,14,46,.45) 44%, rgba(6,14,46,.12) 66%, transparent 82%);
}
.busly-hero-top-fade { position: absolute; bottom: 0; left: 0; right: 0; height: 100px; background: linear-gradient(to bottom, transparent, rgba(6,14,46,.18)); pointer-events: none; }
/* align-items:center, matching the reference's exact rule. The min-height
   change above already prevents the trust-row clipping bug on its own
   (the box only ever grows taller than the clamp when content genuinely
   needs it, never shrinks below it) — flex-start was an unnecessary extra
   deviation from the reference's own centering behaviour on top of that,
   so it's reverted here rather than kept as a second change. */
.busly-hero-body { position: relative; height: 100%; display: flex; align-items: center; padding-top: 66px; }
.busly-hero-body .wrap { width: 100%; }

.hero-badge {
	display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px; border-radius: 100px; margin-bottom: 22px;
	background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
	font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.75); letter-spacing: .03em;
	margin-top: 30px !important;
}
.hero-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #34d399; flex-shrink: 0; animation: busly-pulse 2s ease-in-out infinite; }
@keyframes busly-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.hero-h1 { font-size: clamp(2rem, 4.8vw, 3.8rem); font-weight: 900; line-height: 1.08; letter-spacing: -.03em; color: #fff; max-width: 520px; margin-bottom: 14px; }
.hero-h1 em, .hero-h1 .accent { color: #93c5fd; font-style: normal; }
.hero-sub { font-size: 15px; font-weight: 400; color: rgba(255,255,255,.52); margin-bottom: 32px; max-width: 360px; line-height: 1.7; }

.hero-cta {
	display: inline-flex; align-items: center; gap: 8px; padding: 13px 30px; border-radius: 100px;
	background: #fff; border: none; color: var(--busly-navy); font-size: 14px; font-weight: 800; cursor: pointer;
	box-shadow: 0 6px 24px rgba(0,0,0,.22); transition: transform .15s, box-shadow .15s;
}
.hero-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(0,0,0,.28); }
.hero-cta svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Text/icon color are set per-instance from the widget's own Elementor
   "Trust Row Style" controls (Style tab), not hardcoded here — see
   class-widget-hero.php. Icon SVGs have no `fill` attribute of their own
   (Elementor's Icons_Manager output relies on CSS for that), so without an
   explicit fill they render at the SVG spec default (solid black) —
   invisible against a dark hero photo. */
.hero-trust { display: flex; align-items: center; gap: 20px; margin-top: 36px; margin-bottom: 32px; flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; }
.trust-item svg { width: 14px; height: 14px; flex-shrink: 0; }
.trust-sep { width: 1px; height: 16px; background: rgba(255,255,255,.12); }

@media (max-width: 760px) {
	.hero-trust { gap: 22px; }
	.trust-sep { display: none; }
}

/* Search widget sits directly under the hero, mirroring homepage.html's
   .search-wrap vertical rhythm. */
.busly-search-widget { padding: 24px 0 44px; background: #f0f2f7; }