/* ============================================
 * acf/page-hero — block-scoped styles
 *
 * Enqueued via block.json "style": "file:./page-hero.css". Loaded only
 * on pages where the block is used. CSS-only (no viewScript).
 *
 * Naming: BEM with `.blk-page-hero` root, `__element` for children.
 * Tokens come from :root in global.css.
 * ============================================ */

.blk-page-hero {
	padding: 140px 0;
	text-align: center;
	position: relative;
	/* WordPress' constrained post-content layout adds a 24px block-gap to
	 * each child via `:where(.wp-block-post-content-is-layout-constrained)
	 * > *`. The core `:first-child` reset isn't always winning when the
	 * hero is the first block, so pin the gap to 0 explicitly. Harmless
	 * when the rule doesn't apply (e.g. used outside post-content). */
	margin-block-start: 0 !important;
}

/* Dotted radial background — same surface used on the homepage .hero. */
.blk-page-hero::before {
	content: "";
	position: absolute;
	top: -120px;
	left: 0;
	right: 0;
	bottom: 0;
	background-image:
		radial-gradient(ellipse 80% 70% at 50% 10%, rgba(255, 255, 255, 0.06), transparent 70%),
		radial-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1.2px);
	background-size: 100% 100%, 24px 24px;
	background-position: 0 0, 0 0;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.65) 50%, transparent 100%);
	        mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.65) 50%, transparent 100%);
	pointer-events: none;
	z-index: 0;
}

/* Dashed bottom rule. */
.blk-page-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background-image: linear-gradient(to right,
		rgba(255, 255, 255, 0.12) 0 12px,
		transparent 12px 24px);
	background-size: 24px 1px;
	background-repeat: repeat-x;
	pointer-events: none;
}

.blk-page-hero > .container {
	position: relative;
	z-index: 1;
}

.blk-page-hero__badge {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
	color: var(--color-fg-muted);
	padding: 6px 12px;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-full);
	margin-bottom: var(--space-lg);
	line-height: 1;
}

.blk-page-hero__heading {
	font-size: clamp(44px, 6vw, 80px);
	font-weight: var(--weight-medium);
	letter-spacing: -0.04em;
	line-height: 1.05;
	margin: 0 auto 18px;
	max-width: 880px;
	color: var(--color-fg);
	text-wrap: balance;
}

.blk-page-hero__lead {
	font-size: clamp(16px, 1.4vw, 18px);
	line-height: var(--leading-relaxed);
	color: var(--color-fg-muted);
	max-width: 640px;
	margin: 0 auto;
	text-wrap: pretty;
}

@media (max-width: 760px) {
	.blk-page-hero { padding: 96px 0; }
}