/**
 * hostsnix/cta — frontend.
 * Values measured from the live CTA band and the homepage overlap card.
 */

.hsx-cta-inner { display: flex; flex-direction: column; }

.hsx-cta-desc {
	margin-top: 8px;
	font-size: 16px;
	line-height: 24px;
	color: hsl(var(--muted-foreground));
	max-width: 36rem;
}
@media (min-width: 768px) {
	.hsx-cta-desc { font-size: 18px; line-height: 28px; }
}

.hsx-cta-actions { margin-top: 24px; }

.hsx-cta-note {
	margin-top: 12px;
	font-size: 14px;
	line-height: 20px;
	color: hsl(var(--muted-foreground));
}

/* The eyebrow is the shared .hsx-tag pill; only its spacing is local. */
.hsx-cta-tag { margin-bottom: 16px; }
.hsx-btn-icon { width: 20px; height: 20px; }

/* ── Trust chips ──
   A real <ul>, because it is a list of claims — not decoration. */
.hsx-cta-chips {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 32px;
}
.hsx-cta--band .hsx-cta-chips { justify-content: center; }

.hsx-cta-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	line-height: 24px;
	color: hsl(var(--foreground));
}
.hsx-cta-chip-svg { height: 18px; width: 18px; flex-shrink: 0; color: hsl(var(--primary)); }

/* ── Band: centred, full-width gradient ── */
.hsx-cta--band { text-align: center; }

/* text-4xl md:text-5xl — larger than the shared section heading. */
.hsx-cta-band-h2 {
	font-size: 30px;
	line-height: 36px;
	font-weight: 700;
	color: hsl(var(--foreground));
}
@media (min-width: 640px) { .hsx-cta-band-h2 { font-size: 36px; line-height: 40px;} }
@media (min-width: 768px) { .hsx-cta-band-h2 { font-size: 48px; line-height: 48px;} }

.hsx-cta--band .hsx-cta-band-h2 { margin-bottom: 24px; }
.hsx-cta--band .hsx-cta-desc { margin-top: 0; font-size: 18px; line-height: 28px; max-width: none; }
@media (min-width: 768px) { .hsx-cta--band .hsx-cta-desc { font-size: 20px; } }
.hsx-cta--band .hsx-cta-copy { display: flex; flex-direction: column; align-items: center; }
.hsx-cta--band .hsx-cta-desc { margin-inline: auto; }
.hsx-cta--band .hsx-cta-note { text-align: center; }

/* ─────────────────────── Panels (card + centered) ─────────────────────── *
 * Both are the same rounded gradient panel over the footer's top edge; they
 * differ only in how the copy and actions are arranged inside it. Values are
 * the Tailwind equivalents of the React panels (rounded-2xl, border
 * primary/15, shadow-xl shadow-primary/10, p-8 md:p-10). */

.hsx-cta--card,
.hsx-cta--centered { position: relative; z-index: 20; }

.hsx-cta--card .hsx-cta-inner,
.hsx-cta--centered .hsx-cta-inner {
	position: relative;
	overflow: hidden;
	border: 1px solid hsl(var(--primary) / 0.15);
	border-radius: 16px;
	background-image: linear-gradient(
		to bottom right,
		hsl(var(--secondary) / 0.4),
		hsl(var(--card)),
		hsl(var(--primary) / 0.05)
	);
	box-shadow: 0 20px 25px -5px hsl(var(--primary) / 0.1),
		0 8px 10px -6px hsl(var(--primary) / 0.1);
}

/* The blurred highlight in the top-right corner. */
.hsx-cta-glow {
	position: absolute;
	top: -64px;
	right: -64px;
	width: 224px;
	height: 224px;
	border-radius: 9999px;
	background-color: hsl(var(--primary) / 0.1);
	filter: blur(48px);
	pointer-events: none;
}

/* The opposite corner, in the accent hue. */
.hsx-cta-glow--alt {
	top: auto;
	right: auto;
	bottom: -80px;
	left: -48px;
	background-color: hsl(var(--accent) / 0.1);
}

/* Panel heading. No letter-spacing: the live CTA headings are the one place on
   the site that do not use tracking-tight. */
.hsx-cta-h2 {
	font-weight: 700;
	color: hsl(var(--foreground));
}

/* text-2xl md:text-3xl — the VPS and hub CTAs. */
.hsx-cta-h2--md { font-size: 24px; line-height: 32px; }
@media (min-width: 768px) { .hsx-cta-h2--md { font-size: 30px; line-height: 36px; } }

/* text-3xl md:text-4xl — the home page CTA. */
.hsx-cta-h2--lg { font-size: 30px; line-height: 36px; }
@media (min-width: 768px) { .hsx-cta-h2--lg { font-size: 36px; line-height: 40px; } }

/* The CTA buttons are text-base, not the 18px hero size — that alone is most of
   why the panel looked oversized next to the React one. */
.hsx-btn--cta { font-size: 16px; }

/* ── Card: copy | divider | stacked action column ── */
.hsx-cta--card .hsx-cta-copy    { padding: 32px; }
.hsx-cta--card .hsx-cta-actions { margin-top: 0; padding: 0 32px 32px; }
.hsx-cta--card .hsx-cta-h2      { margin-bottom: 12px; }
/* text-base with leading-relaxed, which is what the VPS and hub CTAs measure. */
.hsx-cta--card .hsx-cta-desc    { margin-top: 0; font-size: 16px; line-height: 26px; max-width: 36rem; }

/* Stacked: the primary fills the column, the secondary is a quiet link under it. */
.hsx-cta--card .hsx-cta-actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	gap: 12px;
}
.hsx-cta--card .hsx-btn { width: 100%; }

.hsx-cta-link {
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	color: hsl(var(--muted-foreground));
	text-align: center;
	text-decoration: none;
	transition: color 0.15s ease;
}
.hsx-cta-link:hover,
.hsx-cta-link:focus-visible { color: hsl(var(--primary)); }

@media (min-width: 768px) {
	.hsx-cta--card .hsx-cta-inner   { flex-direction: row; align-items: center; }
	.hsx-cta--card .hsx-cta-copy    { flex: 1; padding: 40px; }
	.hsx-cta--card .hsx-cta-actions { min-width: 280px; padding: 40px; }
	.hsx-cta--card .hsx-cta-divider {
		width: 1px;
		align-self: stretch;
		margin-block: 40px;
		background-color: hsl(var(--border));
	}
	/* Only the large-heading variant (the home page CTA) steps up to text-lg. */
	.hsx-cta--card.hsx-cta--head-lg .hsx-cta-desc { font-size: 18px; line-height: 28px; }
}

.hsx-cta--card .hsx-cta-divider { display: none; }
@media (min-width: 768px) { .hsx-cta--card .hsx-cta-divider { display: block; } }

/* ── Centered: one column, buttons side by side (the About panel) ── */
.hsx-cta--centered .hsx-cta-inner {
	align-items: center;
	gap: 20px;
	padding: 32px;
	text-align: center;
}
@media (min-width: 768px) { .hsx-cta--centered .hsx-cta-inner { padding: 40px; } }

.hsx-cta--centered .hsx-cta-copy    { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.hsx-cta--centered .hsx-cta-actions { margin-top: 0; }
.hsx-cta--centered .hsx-cta-desc    { margin-top: 0; margin-inline: auto; }
.hsx-cta--centered .hsx-btn--cta    { border-radius: 12px; padding-inline: 28px; }

/* Overlap: pulls the CTA onto the footer. The footer reserves the space with
   its own top padding, matching <Footer overlapTop /> in React. */
.hsx-cta--overlap { margin-bottom: -5rem; }