/*
 * ============================================================================
 *  page-utility.css — Shared utility-page hero + content shell
 * ============================================================================
 *
 *  PURPOSE
 *  -------
 *  Partner apply / referral marketing heroes already feel finished. Bare
 *  utility surfaces (login, contact, feature-request, terms wall of text,
 *  thin search headers) looked empty. This sheet provides:
 *    1. .nllm-page-hero — brand wash + eyebrow/title/lede (parity with
 *       .nllm-partner-hero / contact card atmosphere)
 *    2. Login / auth form card shell (ambient glow + elevated well)
 *    3. Contact integration when default.php injects the shared hero
 *
 *  Loaded on com_users + com_contact (+ available site-wide for template
 *  overrides). Token-pure where possible.
 *
 *  [host:grok-cli:0.2.114][brain:xai:grok-4.5][via:direct:xai][hurc:v0.12.1740]
 * ============================================================================
 */

/* [host:grok-cli:0.2.114][brain:xai:grok-4.5][via:direct:xai][hurc:v0.12.1676] ── §1 Shared utility hero ──────────────────────────────────────────────── */

.nllm-page-hero {
	display: flex;
	flex-direction: column;
	gap: var(--nllm-space-md, 1rem);
	margin: 0 0 var(--nllm-space-lg, 1.5rem);
	padding: var(--nllm-space-lg, 1.5rem) var(--nllm-space-md, 1rem);
	border-radius: var(--nllm-radius-md, 12px);
	background:
		radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--pc-bolt-amber, #f59e0b) 22%, transparent), transparent 55%),
		radial-gradient(70% 90% at 100% 20%, color-mix(in srgb, var(--nllm-violet, #7c3aed) 28%, transparent), transparent 50%),
		var(--nllm-surface, #1e293b);
	border: 1px solid var(--nllm-surface-soft, #334155);
	box-shadow: var(--nllm-shadow-sm, 0 2px 8px rgba(124, 58, 237, 0.15));
}

.nllm-page-hero--split {
	/* [host:grok-cli:0.2.114][brain:xai:grok-4.5][via:direct:xai][hurc:v0.12.1676] Desktop split when aside present */
}

.nllm-page-hero__eyebrow {
	margin: 0 0 0.35rem;
	font-size: max(0.875rem, 14px);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pc-bolt-amber-pale, #fde68a);
}

.nllm-page-hero__title {
	margin: 0 0 0.45rem;
	font-size: clamp(1.45rem, 5.5vw, 1.9rem);
	font-weight: var(--nllm-font-weight-extrabold, 800);
	line-height: var(--nllm-leading-snug, 1.25);
	color: var(--nllm-text, #f8fafc);
}

.nllm-page-hero__lede {
	margin: 0;
	max-width: 42rem;
	color: var(--nllm-text-muted, #cbd5e1);
	line-height: 1.55;
	font-size: 0.975rem;
}

.nllm-page-hero__lede p {
	margin: 0 0 0.5rem;
}

.nllm-page-hero__lede p:last-child {
	margin-bottom: 0;
}

.nllm-page-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.nllm-page-hero__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--nllm-space-sm, 0.5rem);
}

@media (min-width: 768px) {
	.nllm-page-hero--split {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		gap: var(--nllm-space-lg, 1.5rem);
		padding: var(--nllm-space-xl, 2rem) var(--nllm-space-lg, 1.5rem);
	}

	.nllm-page-hero--split .nllm-page-hero__text {
		flex: 1 1 auto;
		min-width: 0;
	}

	.nllm-page-hero--split .nllm-page-hero__aside {
		flex: 0 0 auto;
	}
}

/* [host:grok-cli:0.2.114][brain:xai:grok-4.5][via:direct:xai][hurc:v0.12.1676] ── §2 Login / auth utility shell (contact-card parity) ─────────────────── */

.com-users-login.login,
.com-users-registration,
.com-users-remind,
.com-users-reset,
.com-users-logout {
	position: relative;
	max-width: 28rem;
	margin-inline: auto;
	padding: var(--nllm-space-xl, 2rem) var(--nllm-space-md, 1rem) var(--nllm-space-2xl, 3rem);
	z-index: 0;
}

.com-users-login.login::before,
.com-users-registration::before,
.com-users-remind::before,
.com-users-reset::before {
	content: "";
	position: absolute;
	inset: -8% -45% auto;
	height: 420px;
	background:
		radial-gradient(620px circle at 28% 8%, rgba(124, 58, 237, 0.22), transparent 60%),
		radial-gradient(540px circle at 82% 22%, rgba(6, 182, 212, 0.16), transparent 58%);
	z-index: -1;
	pointer-events: none;
}

/* [host:grok-cli:0.2.114][brain:xai:grok-4.5][via:direct:xai][hurc:v0.12.1676] Hero inside login should span the shell width before the card */
.com-users-login .nllm-page-hero,
.com-users-registration .nllm-page-hero,
.com-users-remind .nllm-page-hero,
.com-users-reset .nllm-page-hero {
	max-width: none;
}

.com-users-login__form.form-horizontal.well,
.com-users-login form.well,
.com-users-registration form.well,
.com-users-remind form.well,
.com-users-reset form.well {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, rgba(30, 41, 59, 0.94) 0%, rgba(20, 28, 46, 0.94) 100%);
	border: 1px solid var(--nllm-surface-edge, #475569);
	border-radius: var(--nllm-radius-lg, 20px);
	padding: var(--nllm-space-xl, 2rem);
	box-shadow: var(--nllm-shadow-lg, 0 12px 40px rgba(124, 58, 237, 0.3));
	animation: nllm-utility-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.com-users-login__form.form-horizontal.well::before,
.com-users-login form.well::before,
.com-users-registration form.well::before,
.com-users-remind form.well::before,
.com-users-reset form.well::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--nllm-gradient, linear-gradient(135deg, #7c3aed 0%, #5b21b6 55%, #06b6d4 100%));
}

.com-users-login label,
.com-users-login .control-label label {
	color: var(--nllm-text, #f8fafc);
	font-weight: var(--nllm-font-weight-semibold, 600);
	font-size: var(--nllm-text-sm, 0.875rem);
}

.com-users-login__submit .btn-primary,
.com-users-login button[type="submit"].btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	gap: var(--nllm-space-sm, 0.5rem);
	margin-top: var(--nllm-space-md, 1rem);
	padding: calc(var(--nllm-space-sm, 0.5rem) + var(--nllm-space-xs, 0.25rem)) var(--nllm-space-xl, 2rem);
	background: var(--nllm-gradient, linear-gradient(135deg, #7c3aed 0%, #5b21b6 55%, #06b6d4 100%));
	background-size: 160% 160%;
	background-position: 0% 50%;
	color: var(--nllm-text, #f8fafc);
	border: 0;
	border-radius: var(--nllm-radius-sm, 6px);
	font-weight: var(--nllm-font-weight-bold, 700);
	box-shadow: var(--nllm-shadow-md, 0 6px 20px rgba(124, 58, 237, 0.2));
	transition:
		background-position var(--nllm-transition-base, 0.22s ease),
		transform var(--nllm-transition-fast, 0.15s ease),
		box-shadow var(--nllm-transition-fast, 0.15s ease);
}

.com-users-login__submit .btn-primary:hover,
.com-users-login button[type="submit"].btn-primary:hover {
	background-position: 100% 50%;
	transform: translateY(-2px);
	box-shadow: var(--nllm-shadow-lg, 0 12px 40px rgba(124, 58, 237, 0.3));
}

.com-users-login__options.list-group {
	margin-top: var(--nllm-space-lg, 1.5rem);
	gap: 0.35rem;
	background: transparent;
	border: 0;
}

.com-users-login__options .list-group-item {
	background: color-mix(in srgb, var(--nllm-surface, #1e293b) 88%, transparent);
	border: 1px solid var(--nllm-surface-soft, #334155);
	border-radius: var(--nllm-radius-sm, 6px);
	color: var(--nllm-text-muted, #cbd5e1);
	margin-bottom: 0.35rem;
}

.com-users-login__options .list-group-item:hover {
	color: var(--nllm-text, #f8fafc);
	border-color: var(--nllm-violet, #7c3aed);
}

/* [host:grok-cli:0.2.114][brain:xai:grok-4.5][via:direct:xai][hurc:v0.12.1676] ── §3 Contact + feature-request hero integration ───────────────────────── */

.com-contact {
	/* [host:grok-cli:0.2.114][brain:xai:grok-4.5][via:direct:xai][hurc:v0.12.1676] hero sits above the ambient card; keep measure */
}

.com-contact > .nllm-page-hero {
	max-width: 42rem;
	margin-inline: auto;
	margin-bottom: var(--nllm-space-lg, 1.5rem);
	text-align: left;
}

/* [host:grok-cli:0.2.114][brain:xai:grok-4.5][via:direct:xai][hurc:v0.12.1676] When shared hero is present, suppress core duplicate page_heading / name */
.com-contact:has(> .nllm-page-hero) > h1:not(.nllm-page-hero__title),
.com-contact:has(> .nllm-page-hero) > .page-header {
	display: none;
}

/* [host:grok-cli:0.2.114][brain:xai:grok-4.5][via:direct:xai][hurc:v0.12.1676] ── §4 Partner terms content card (hero + readable body) ────────────────── */

.nllm-partner-terms {
	/* [host:grok-cli:0.2.114][brain:xai:grok-4.5][via:direct:xai][hurc:v0.12.1676] dashboard.css already sets max-width; elevate body as card after hero */
}

.nllm-partner-terms__body {
	position: relative;
	padding: var(--nllm-space-lg, 1.5rem) var(--nllm-space-md, 1rem);
	background: linear-gradient(180deg, rgba(30, 41, 59, 0.55) 0%, rgba(15, 23, 42, 0.35) 100%);
	border: 1px solid var(--nllm-surface-soft, #334155);
	border-radius: var(--nllm-radius-md, 12px);
}

/* [host:grok-cli:0.2.114][brain:xai:grok-4.5][via:direct:xai][hurc:v0.12.1676] ── §5 Partner search hero (panel → hero class used in markup) ──────────── */

.nllm-partner-search-page .nllm-partner-hero {
	margin-bottom: var(--nllm-space-lg, 1.5rem);
}

/* [host:grok-cli:0.2.114][brain:xai:grok-4.5][via:direct:xai][hurc:v0.12.1676] ── Motion ──────────────────────────────────────────────────────────────── */

@keyframes nllm-utility-rise {
	from {
		transform: translateY(12px);
		opacity: 0.88;
	}

	to {
		transform: none;
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.com-users-login__form.form-horizontal.well,
	.com-users-login form.well,
	.com-users-registration form.well,
	.com-users-remind form.well,
	.com-users-reset form.well {
		animation: none;
	}

	.com-users-login__submit .btn-primary:hover,
	.com-users-login button[type="submit"].btn-primary:hover {
		transform: none;
	}
}