/**
 * Lumina Hero — Frontend Styles
 *
 * @package WuppiBlocks
 */

/* ── Block wrapper ──────────────────────────────────────────────── */
.wp-block-wuppi-lumina-hero {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;

	--wp--preset--color--foreground:           #ffffff;
	--wp--preset--color--secondary-foreground: rgba( 255, 255, 255, 0.85 );
	--wp--preset--color--muted-foreground:     rgba( 255, 255, 255, 0.65 );
	--wp--preset--color--accent:               rgba( 255, 255, 255, 0.80 );

	color: #ffffff;
}

/* ── Canvas (inserted by view.js) ───────────────────────────────── */
.wp-block-wuppi-lumina-hero .lumina-hero__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
}

/* ── Content layer ──────────────────────────────────────────────── */
.wp-block-wuppi-lumina-hero .lumina-hero__content {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var( --wp--style--global--content-size, 800px );
	padding: var( --wp--preset--spacing--50, 2rem );
	text-align: center;
}

/* ── Eyebrow label ──────────────────────────────────────────────── */
.wp-block-wuppi-lumina-hero .lumina-hero__content .lumina-hero__eyebrow {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.70;
	margin-bottom: 0.5rem;
}

/* ── Outline buttons without explicit background ────────────────── */
.wp-block-wuppi-lumina-hero .lumina-hero__content .wp-block-button__link:not( .has-background ) {
	background-color: transparent;
	border: 1.5px solid rgba( 255, 255, 255, 0.60 );
}

.wp-block-wuppi-lumina-hero .lumina-hero__content .wp-block-button__link:not( .has-background ):hover,
.wp-block-wuppi-lumina-hero .lumina-hero__content .wp-block-button__link:not( .has-background ):focus {
	border-color: #ffffff;
	background-color: rgba( 255, 255, 255, 0.10 );
}