/**
 * hostsnix/home-hero — frontend.
 * Values measured from the live home page hero at 1440px.
 */

.hsx-hh2 {
	position: relative;
	overflow: hidden;
	/* Only the 1.5rem the React hero adds *beyond* the header. React needs the
	   full header height because its header is position:fixed and overlays the
	   page; the block canvas reserves that space with .hsx-header-slot instead,
	   so adding it here again left a ~109px empty band above the eyebrow. */
	padding-top: 24px;
	padding-bottom: 16px;
	padding-inline: 24px;
}

/* ── Background photograph + veil ── */
.hsx-hh2-bg { position: absolute; inset: 0; opacity: 0.3; }
.hsx-hh2-bg-img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }

.hsx-hh2-veil {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: linear-gradient(
		hsl(var(--background) / 0.5),
		hsl(var(--background) / 0.8),
		hsl(var(--background))
	);
}

.hsx-hh2-inner {
	position: relative;
	width: 100%;
	max-width: 72rem;
	margin-inline: auto;
	text-align: center;
}

.hsx-hh2-tag { margin-bottom: 24px; }

/* ── Heading ── */
.hsx-hh2-h1 {
	margin-bottom: 24px;
	font-size: 36px;
	line-height: 40px;
	font-weight: 700;
	color: hsl(var(--foreground));
}
@media (min-width: 640px)  { .hsx-hh2-h1 { font-size: 48px; line-height: 48px;} }
@media (min-width: 768px)  { .hsx-hh2-h1 { font-size: 60px; line-height: 1; } }

/* The lead line is a teal→accent→teal gradient clipped to the text. */
.hsx-hh2-lead {
	background-image: linear-gradient(
		to right,
		hsl(var(--primary)),
		hsl(var(--accent)),
		hsl(var(--primary))
	);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: hsx-hh2-pan 3s linear infinite;
}
@keyframes hsx-hh2-pan {
	to { background-position: 200% center; }
}
@media (prefers-reduced-motion: reduce) {
	.hsx-hh2-lead { animation: none; }
}

/* min-height reserves the second line so swapping phrases never reflows the
   page — a shorter phrase would otherwise shift everything below it. */
.hsx-hh2-line { display: inline-block; width: 100%; min-height: 3.75rem; }
@media (min-width: 768px) { .hsx-hh2-line { min-height: 0; } }

.hsx-hh2-prefix { color: hsl(var(--primary)); }
.hsx-hh2-phrase { color: hsl(var(--foreground)); }

/* The caret only exists while the animation is running. */
.hsx-hh2-phrase[data-hsx-typing] {
	border-right: 3px solid hsl(var(--primary));
	padding-right: 2px;
	animation: hsx-hh2-caret 0.75s step-end infinite;
}
@keyframes hsx-hh2-caret {
	0%, 100% { border-color: hsl(var(--primary)); }
	50%      { border-color: transparent; }
}

/* React renders one <p> with two <br> in the middle; two paragraphs with a
   matching gap read the same and keep the markup honest. */
.hsx-hh2-intro {
	margin-bottom: 32px;
	margin-inline: auto;
	font-size: 18px;
	line-height: 1.625;
	color: hsl(var(--muted-foreground));
	display: flex;
	flex-direction: column;
	gap: 1.625em;
}
@media (min-width: 768px) { .hsx-hh2-intro { font-size: 20px; line-height: 28px; gap: 28px; } }

/* ── Actions ── */
.hsx-hh2-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-bottom: 12px;
}
@media (min-width: 640px) { .hsx-hh2-actions { flex-direction: row; } }

.hsx-hh2-btn { font-size: 18px; }
.hsx-hh2-btn.hsx-btn--primary {
	box-shadow: 0 10px 15px -3px hsl(var(--primary) / 0.3), 0 4px 6px -4px hsl(var(--primary) / 0.3);
}

.hsx-hh2-note {
	margin-bottom: 32px;
	font-size: 14px;
	line-height: 20px;
	color: hsl(var(--muted-foreground));
}

/* ── Capability web ──
   Rendered once. React repeats this markup three times, and the copies differ
   in more than scale: below 1024px every box is smaller — 140px sides instead
   of 190, 48px tiles instead of 56, a 80px connector instead of 130. Applying
   only the scale left the desktop geometry in place, 972px of content scaled
   to 457px inside a 393px phone, so the outer labels were clipped by the
   section's overflow. The small-screen sizes are below; they bring the content
   to 716px, which is 336px once scaled. */
.hsx-hh2-web {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 1100px;
	margin-inline: auto;
	margin-bottom: 16px;
}

/* Scaling leaves the original box height behind, so the negative margins pull
   the surrounding copy back in — the same numbers React uses. */
/*
 * React's 0.47 leaves 700px of content at 329px — inside a 393px phone that is
 * a 32px gutter, and on a 360px one only 12px, which reads as text jammed
 * against the screen edge on a real handset even though nothing is clipped.
 * 0.42 buys 49px and 33px respectively, and the diagram is still legible.
 */
@media (max-width: 639px) {
	.hsx-hh2-web {
		transform: scale(0.42);
		transform-origin: center center;
		margin-top: -62px;
		margin-bottom: -62px;
	}
}

/* Nothing narrower than 360px was covered by any of React's three copies. */
@media (max-width: 359px) {
	.hsx-hh2-web {
		transform: scale(0.38);
		margin-top: -66px;
		margin-bottom: -66px;
	}
}
@media (min-width: 640px) and (max-width: 1023px) {
	.hsx-hh2-web {
		transform: scale(0.65);
		transform-origin: center center;
		margin-top: -40px;
		margin-bottom: -40px;
	}
}

.hsx-hh2-side {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 360px;
	width: 190px;
	flex-shrink: 0;
	padding-block: 8px;
}

.hsx-hh2-node { display: flex; flex-direction: column; align-items: center; gap: 8px; }

.hsx-hh2-tile {
	display: flex; align-items: center; justify-content: center;
	height: 56px; width: 56px; flex-shrink: 0;
	border: 1px solid hsl(var(--primary) / 0.15);
	border-radius: 16px;
	color: hsl(var(--primary));
}
.hsx-hh2-tile-svg { height: 28px; width: 28px; }

/*
 * `align-items: center` sizes this to its own content, so a label wider than
 * the 140px column escapes it in both directions instead of wrapping — and the
 * column edge is the diagram's outer edge, so the text lands against the screen
 * edge. It fits with 18px to spare in Chrome on macOS; iOS renders SF Pro a
 * little wider at 10px, and a reader with a larger text setting wider still.
 * The cap makes it wrap rather than overflow, whatever the metrics.
 */
.hsx-hh2-node-label {
	max-width: 100%;
	overflow-wrap: break-word;
	font-size: 12px; line-height: 16px; font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: center;
	color: hsl(var(--foreground));
}

.hsx-hh2-link-wrap { height: 360px; width: 130px; flex-shrink: 0; }
.hsx-hh2-link { display: block; height: 100%; width: 100%; }
.hsx-hh2-link svg { display: block; height: 100%; width: 100%; }

/* ── Centre ── */
.hsx-hh2-core { position: relative; flex-shrink: 0; margin-inline: 8px; }

.hsx-hh2-core-grid {
	display: grid;
	grid-template-columns: 120px 120px;
	gap: 76px;
}

.hsx-hh2-card {
	height: 105px; width: 120px;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center; gap: 8px;
}
.hsx-hh2-card-svg { height: 32px; width: 32px; color: hsl(var(--primary) / 0.7); }

.hsx-hh2-card-label {
	max-width: 100%;
	overflow-wrap: break-word;
	font-size: 11px; line-height: 16.5px; font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: center;
	color: hsl(var(--foreground));
}

/* The mark sits over the grid's centre gap, so it must not swallow clicks. */
.hsx-hh2-core-mark {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

/* ── Below 1024px: the smaller of React's three copies ── */
@media (max-width: 1023px) {
	.hsx-hh2-side { height: 300px; width: 140px; }
	.hsx-hh2-node { gap: 6px; }
	.hsx-hh2-tile { height: 48px; width: 48px; }
	.hsx-hh2-tile-svg { height: 24px; width: 24px; }
	.hsx-hh2-node-label { font-size: 10px; line-height: 14px; }
	.hsx-hh2-link-wrap { height: 300px; width: 80px; }
	.hsx-hh2-core-grid { grid-template-columns: 100px 100px; gap: 60px; }
	.hsx-hh2-card { height: 85px; width: 100px; gap: 6px; }
	.hsx-hh2-card-svg { height: 24px; width: 24px; }
	.hsx-hh2-card-label { font-size: 9px; line-height: 13px; }
	.hsx-hh2-disc { height: 80px; width: 80px; }
	/* React's w-14 h-12 on the small copies, against w-18 h-16 on desktop. */
	.hsx-hh2-disc-img { height: 48px; width: 56px; }
}

.hsx-hh2-disc {
	display: flex; align-items: center; justify-content: center;
	height: 100px; width: 100px;
	border-radius: 9999px;
	background-color: hsl(var(--primary));
	box-shadow: 0 10px 15px -3px hsl(var(--primary) / 0.3), 0 4px 6px -4px hsl(var(--primary) / 0.3);
}

/* The logo is full colour, so it is forced to a white silhouette on the teal
   disc — brightness-0 invert in the React hero. */
.hsx-hh2-disc-img {
	height: 64px; width: 64px;
	-o-object-fit: contain;
	   object-fit: contain;
	filter: brightness(0) invert(1);
}