/* Home hero isolated overrides
	 Scope: home/front-page only (enqueued conditionally from functions.php)
	 Purpose: keep home hero frame/content tuning separate from global overrides.
*/

@media (min-width:901px){
	/* Home desktop: frame/background layer only */
	body.home .hero {
		margin-top: 0 !important;
		position: relative;
		isolation: isolate;
		background: transparent !important;
	}

	body.home .hero::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -160px;
		bottom: 0;
		background: radial-gradient(1200px 340px at 50% 0%, rgba(76,201,240,.16), transparent 60%), linear-gradient(180deg,#0b1020 0%, #121735 100%);
		z-index: -1;
		pointer-events: none;
	}

	/* Home desktop: nudge content up only slightly; previous value still
	   left it too high so reduce the negative offset further. */
	body.home .hero .wrap.hero-grid {
		transform: translateY(-10px); /* less upward shift to drop content down */
	}
}

@media (min-width:721px) and (max-width:900px) {
	body.home .hero {
		margin-top: 0 !important;
		padding-top: clamp(52px, 9vw, 84px) !important;
		padding-bottom: clamp(16px, 3vw, 28px) !important;
	}
}

@media (max-width:900px){
	/* Home baseline mobile hero spacing (copied from overrides, isolated here) */
	body.home .hero {
		padding: 0 0 !important;
		margin-top: 0 !important;
	}

	/* Home mobile: adjust frame padding so background sits below content
	   instead of lifting upward; remove negative margin and shift spacing down */
	body.home .hero {
		margin-top: 0 !important; /* no upward lift */
		padding-top: 0 !important; /* remove top padding */
		padding-bottom: 80px !important; /* slightly less to avoid too much downward space */
	}

	/* Home mobile: full-bleed hero shell; allow slight rounding at edges */
	body.home .hero {
		position: relative !important;
		left: 50% !important;
		right: 50% !important;
		margin-left: -50vw !important;
		margin-right: -50vw !important;
		width: 100vw !important;
		border-radius: 12px !important; /* small corner radius */
		padding-left: 0 !important;
		padding-right: 0 !important;
		box-shadow: none !important;
		overflow: visible !important;
	}

	body.home .hero .wrap.hero-grid {
		max-width: none !important;
		padding-left: 12px !important;
		padding-right: 12px !important;
		transform: translateY(48px) !important; /* push content even further down */
	}

	/* Home mobile: left align content */
	body.home .hero .hero-card,
	body.home .hero .hero-card .title,
	body.home .hero .hero-card .lead {
		text-align: left !important;
	}

	/* Home mobile: inner hero card edge-to-edge */
	body.home .hero .wrap.hero-grid {
		padding-left: 0 !important;
		padding-right: 0 !important;
		max-width: none !important;
	}

	body.home .hero .hero-card {
		width: 100% !important;
		margin: 0 !important;
		border-radius: 16px !important;
		box-shadow: 0 10px 30px rgba(2,6,23,0.45) !important;
		background-clip: padding-box !important;
		overflow: hidden !important;
		border-left: none !important;
		border-right: none !important;
	}

	body.home .hero .hero-card > div[style] {
		border-radius: 16px !important;
	}

	body.home .hero .hero-card .title,
	body.home .hero .hero-card .lead,
	body.home .hero .hero-card .hero-ctas {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	/* Home mobile: pills */
	body.home .hero .grid {
		gap: 8px !important;
	}

	body.home .hero .grid .pill,
	body.home .hero .hero-card .pill {
		display: inline-flex !important;
		justify-content: center !important;
		align-items: center !important;
		padding: 6px 8px !important;
		font-size: 10px !important;
		font-weight: 800 !important;
		border-radius: 10px !important;
		background: rgba(255,255,255,0.02) !important;
		border: 1px solid rgba(255,255,255,0.06) !important;
		color: #eaf6ff !important;
		line-height: 1 !important;
		min-height: 32px !important;
		box-sizing: border-box !important;
		text-align: center !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		letter-spacing: 0.01em !important;
		text-transform: none !important;
	}

	/* Keep 3 equal-width pills on small screens */
	@media (max-width:900px) {
		body.home .hero .grid {
			display: grid !important;
			grid-template-columns: repeat(3, 1fr) !important;
			gap: 8px !important;
		}

		body.home .hero .grid .pill,
		body.home .hero .hero-card .pill {
			width: 100% !important;
			padding: 6px 6px !important;
			font-size: 10px !important;
		}
	}

	@media (max-width:420px) {
		body.home .hero .grid .pill,
		body.home .hero .hero-card .pill {
			padding: 4px 6px !important;
			font-size: 9px !important;
			min-height: 28px !important;
		}
	}
}