/* Page Header (Modern) — frontend styles.
   Every selector scoped under .lwp-modern-page-header (§7).
   Colors come from the modern palette (--lwp-*), with fallbacks. */

.lwp-modern-page-header {
	/* Clear the fixed navbar (lwp-modern-nav.css: position:fixed; top:0;
	   height:var(--lwp-nav-height,64px)) so titles never sit under it. */
	padding: calc(var(--lwp-nav-height, 64px) + clamp(1.75rem, 4vw, 3rem)) 0 clamp(1.5rem, 3vw, 2.25rem);
	color: var(--lwp-text-primary, #e8eaf0);
	position: relative;
	overflow: hidden;
}

.lwp-modern-page-header--bg-surface {
	background: var(--lwp-surface, rgba(20, 30, 50, 0.6));
	border-bottom: 1px solid var(--lwp-border, rgba(124, 92, 191, 0.2));
}

/* Hero-pattern background (mirrors the three .hero-bg-layer divs from
   blocks/modern-hero/style-index.css, scoped to this block). */
.lwp-modern-page-header__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.lwp-modern-page-header__bg-layer {
	position: absolute;
	inset: 0;
}

.lwp-modern-page-header__bg-layer.layer-1 {
	background: radial-gradient(ellipse at 30% 50%, color-mix(in srgb, var(--lwp-accent, #7c5cbf) 15%, transparent) 0%, transparent 60%);
}

.lwp-modern-page-header__bg-layer.layer-2 {
	background: radial-gradient(ellipse at 70% 80%, color-mix(in srgb, var(--lwp-accent, #7c5cbf) 8%, transparent) 0%, transparent 50%);
}

.lwp-modern-page-header__bg-layer.layer-3 {
	/* Noise pattern tinted with the palette accent — same masked SVG as the hero. */
	background-color: color-mix(in srgb, var(--lwp-accent, #7c5cbf) 3%, transparent);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4h2v4h4v2h4v4h2V6h4V4h-4zM6 4V0H4v4H0v2h4v4h2v4h2v4h4v2h4v2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v4h2v4h4v2h4v2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.lwp-modern-page-header__inner {
	position: relative;
	z-index: 1;
	max-width: var(--lwp-content-width, 1100px);
	margin: 0 auto;
	padding: 0 24px;
}

/* Template usage (archive-modern.php): when the strip sits directly above the
   blog-archive section, tighten the section's 96px top padding so the header
   and grid read as one composition. */
.lwp-modern-page-header + .lwp-ba {
	padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

.lwp-modern-page-header--align-center .lwp-modern-page-header__inner {
	text-align: center;
}

/* Breadcrumb */
.lwp-modern-page-header__crumbs {
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	margin: 0 0 0.75rem;
}

.lwp-modern-page-header__crumbs a {
	color: var(--lwp-text-secondary, #9aa5b8);
	text-decoration: none;
}

.lwp-modern-page-header__crumbs a:hover,
.lwp-modern-page-header__crumbs a:focus-visible {
	color: var(--lwp-accent-light, #a382de);
	text-decoration: underline;
}

.lwp-modern-page-header__crumb-sep {
	margin: 0 0.5em;
	color: var(--lwp-text-muted, #6b7a94);
}

.lwp-modern-page-header__crumbs [aria-current="page"] {
	color: var(--lwp-text-primary, #e8eaf0);
}

/* Kicker — small uppercase eyebrow */
.lwp-modern-page-header__kicker {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--lwp-accent-light, #a382de);
	margin: 0 0 0.5rem;
}

/* Title */
.lwp-modern-page-header__title {
	font-size: clamp(2rem, 4.5vw, 3rem);
	line-height: 1.15;
	font-weight: 700;
	color: var(--lwp-text-primary, #e8eaf0);
	margin: 0 0 0.75rem;
}

/* Intro line */
.lwp-modern-page-header__intro {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--lwp-text-secondary, #9aa5b8);
	max-width: 42em;
	margin: 0;
}

.lwp-modern-page-header--align-center .lwp-modern-page-header__intro {
	margin-left: auto;
	margin-right: auto;
}