/*
 * LDR_PageBanner widget styles.
 * Selectors are scoped under .ldr-page-banner so they don't leak.
 */

.ldr-page-banner {
	position: relative;
	background-color: var(--ldr-navy);
	color: #fff;
	padding-top: 112px;       /* pt-28 — 7rem */
	padding-bottom: 64px;     /* pb-16 — 4rem */
	overflow: hidden;
	isolation: isolate;
}

.ldr-page-banner__glow {
	position: absolute;
	inset: 0;
	opacity: 0.10;
	pointer-events: none;
	z-index: 0;
}

.ldr-page-banner__blob {
	position: absolute;
	width: 24rem;             /* w-96 */
	height: 24rem;            /* h-96 */
	border-radius: 9999px;
	filter: blur(48px);       /* blur-3xl */
}

.ldr-page-banner__blob--lake {
	top: 0;
	right: 0;
	background-color: var(--ldr-lake);
	transform: translate(50%, -50%);
}

.ldr-page-banner__blob--gold {
	bottom: 0;
	left: 0;
	background-color: var(--ldr-gold);
	transform: translate(-50%, 50%);
}

.ldr-page-banner__inner {
	position: relative;
	text-align: center;
	z-index: 1;
}

/* --- Pill ---------------------------------------------------------------- */

.ldr-page-banner__pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background-color: oklch(0.72 0.14 75 / 0.20);  /* gold/20 */
	border-radius: var(--ldr-radius-pill);
	padding: 0.5rem 1rem;
	margin-bottom: 1.5rem;     /* mb-6 */
	font-family: var(--ldr-font-heading);
	font-weight: 600;
	font-size: 0.875rem;       /* text-sm */
	color: var(--ldr-gold);
	line-height: 1;
}

.ldr-page-banner__pill-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1rem;
	height: 1rem;
	color: var(--ldr-gold);
}

.ldr-page-banner__pill-icon svg,
.ldr-page-banner__pill-icon i {
	width: 1rem;
	height: 1rem;
	display: block;
	color: inherit;
	fill: currentColor;
}

/* --- Heading ------------------------------------------------------------- */

.ldr-page-banner__heading {
	font-family: var(--ldr-font-heading);
	font-weight: 900;          /* font-black */
	font-size: 2.25rem;        /* text-4xl — 36px mobile */
	line-height: 1.0;          /* match production rendered line-height (text-4xl + leading-none) */
	color: #fff;
	margin: 0 0 1rem 0;        /* mb-4 = 16px */
	letter-spacing: -0.005em;
}

@media (min-width: 640px) {
	.ldr-page-banner__heading {
		font-size: 3rem;       /* sm:text-5xl — 48px */
	}
}

/* --- Intro --------------------------------------------------------------- */

.ldr-page-banner__intro {
	font-family: var(--ldr-font-body);
	font-size: 1.125rem;       /* text-lg — 18px */
	line-height: 1.555;        /* matches production 28px / 18px */
	color: rgb(255 255 255 / 0.7);
	max-width: 42rem;          /* max-w-2xl — 672px */
	margin: 0 auto;
}