/* ==========================================================================
   Stravum Builder — Impact Highlight (widgets/impact-highlight.php)

   PART FILE. Enqueued automatically by st_builder_enqueue_parts() (it globs
   assets/parts/*.css), on the front end and inside the editor canvas.

   Structural minimum + Digital Vanguard dark defaults only. All per-instance
   styling comes from the style engine (control `selectors`), emitted in a
   later <style> element inside the block markup — so engine rules must win.
   Every selector the engine also targets is kept to at most TWO classes here:
   the engine's version is `.st-el-{uid} .st-ih…` (also two) and the later
   stylesheet wins on a tie. Never add a third class (or an id) to those.

   .st-ih-num also carries `.st-counter-num`, the hook assets/widgets.js
   animates. frontend.css styles `.st-counter-num` with a single class and is
   enqueued BEFORE this part file, so the single-class rules below win the tie
   and the number gets its own scale here.

   The pulse dot borrows one already-compiled Tailwind utility from the theme
   (`animate-ping`, the same one stravum-blocks' hero badge uses) purely for
   its keyframes — everything else is plain CSS, since tailwind.css cannot be
   rebuilt on this host.
   ========================================================================== */

.st-ih {
	--st-ih-accent: #fd5b38;
	--st-ih-peach: #ffb4a4;
	--st-ih-white: #ffffff;
	--st-ih-text: #a9adc1;
	--st-ih-deep: #0b0e15;
	--st-ih-border: rgba(255, 255, 255, 0.08);
	min-width: 0;
	text-align: center;
}

/* ================================================================== Header. */
.st-ih-head {
	max-width: 720px;
	margin: 0 auto 44px;
}

.st-ih-eyebrow {
	margin: 0 0 14px;
	font-family: "Geist", sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--st-ih-accent);
}

.st-ih-heading {
	margin: 0;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--st-ih-white);
}

.st-ih-sub {
	margin: 16px 0 0;
	font-family: "IBM Plex Sans", sans-serif;
	font-size: 17px;
	line-height: 1.7;
	color: var(--st-ih-text);
}

/* =================================================================== Panel. */
.st-ih-panel {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* Full-bleed within its content area (was implicitly full-width already as
	   a block-level element, but made explicit per the design reference) plus
	   a taller, more generous frame so the number reads as the dominant
	   element rather than a compact, boxy card. */
	width: 100%;
	min-height: 400px;
	padding: 96px 56px 96px;
	border: 1px solid var(--st-ih-border);
	border-radius: 24px;
	background-color: var(--st-ih-deep);
}

/* Decorative bloom behind the number. */
.st-ih-panel::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: -40%;
	left: 50%;
	width: 720px;
	height: 480px;
	transform: translateX(-50%);
	background: radial-gradient(circle, rgba(253, 91, 56, 0.16) 0%, rgba(253, 91, 56, 0) 68%);
	pointer-events: none;
}

/* Subtle repeating dot-grid texture, same low-opacity radial-gradient-dot
   technique as the bloom above (this codebase has no existing reusable dot
   pattern elsewhere — grepped assets/ for `radial-gradient` and inline SVG
   data-URIs, only this file's own bloom used the technique), kept on its own
   layer so it never touches `background-color` (panel_bg stays purely
   engine-controlled). */
.st-ih-panel::after {
	content: "";
	position: absolute;
	z-index: 0;
	inset: 0;
	background-image: radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
	background-size: 22px 22px;
	pointer-events: none;
}

.st-ih-panel > * {
	position: relative;
	z-index: 1;
}

/* =================================================================== Badge. */
/* Reference design pins the pulse badge in the panel's bottom-right corner
   rather than stacking it above the number. `.st-ih-panel > *` (above) puts
   `position: relative;` + `z-index: 1;` on every direct child including this
   one; this same-specificity rule below it wins the `position` tie by source
   order, so `position: absolute` here takes effect while still inheriting
   the z-index that keeps it above the bloom/dot-grid layers. Being absolute
   also removes it from panel's flex flow so it no longer affects the
   vertical centering of the value/label/source-link group. */
.st-ih-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	position: absolute;
	right: 32px;
	bottom: 32px;
	margin: 0;
	padding: 8px 16px;
	border: 1px solid rgba(253, 91, 56, 0.3);
	border-radius: 999px;
	background-color: rgba(253, 91, 56, 0.1);
	font-family: "Geist", sans-serif;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--st-ih-accent);
}

.st-ih-dot {
	position: relative;
	display: inline-flex;
	width: 8px;
	height: 8px;
	flex: 0 0 auto;
}

.st-ih-dot > span {
	border-radius: 999px;
	background-color: var(--st-ih-accent);
}

.st-ih-dot > span:first-child {
	position: absolute;
	inset: 0;
	opacity: 0.75;
}

.st-ih-dot > span:last-child {
	position: relative;
	width: 8px;
	height: 8px;
}

/* ================================================================== Number. */
.st-ih-value {
	display: block;
	line-height: 1;
}

.st-ih-num {
	display: inline-block;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 104px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--st-ih-accent);
	text-shadow: 0 0 70px rgba(253, 91, 56, 0.35);
}

.st-ih-statlabel {
	margin: 18px 0 0;
	font-family: "Geist", sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--st-ih-text);
}

/* ============================================================ Source link. */
.st-ih-src {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 28px;
	font-family: "IBM Plex Sans", sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--st-ih-peach);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 180, 164, 0.35);
	padding-bottom: 3px;
	transition: color 0.25s ease, border-color 0.25s ease;
}

.st-ih-src:hover,
.st-ih-src:focus-visible {
	color: var(--st-ih-accent);
	border-bottom-color: rgba(253, 91, 56, 0.6);
}

.st-ih-arrow {
	transition: transform 0.25s ease;
}

.st-ih-src:hover .st-ih-arrow {
	transform: translateX(3px);
}

/* ============================================================== Responsive. */
@media (max-width: 1024px) {
	.st-ih-num {
		font-size: 84px;
	}

	.st-ih-panel {
		min-height: 340px;
		padding: 72px 40px 80px;
	}

	.st-ih-badge {
		right: 24px;
		bottom: 24px;
	}
}

@media (max-width: 767px) {
	.st-ih-head {
		margin-bottom: 32px;
	}

	.st-ih-heading {
		font-size: 30px;
	}

	.st-ih-panel {
		min-height: 0;
		padding: 44px 20px 72px;
		border-radius: 18px;
	}

	.st-ih-num {
		font-size: 58px;
	}

	.st-ih-badge {
		right: 16px;
		bottom: 16px;
	}
}