/**
 * Starry Sky — shared styles (front end + editor).
 */

.wp-block-starry-sky {
	position: relative;
	display: flex;
	overflow: hidden;
	box-sizing: border-box;
	width: 100%;
	background-color: #05060a;
	/* Sensible default padding so overlaid content isn't flush to the edge. */
	padding: 2rem;
	/* Fallback height in case the inline min-height is ever missing. */
	min-height: 500px;
}

/* The star canvas fills the whole block, sitting behind the content. */
.wp-block-starry-sky .starry-sky__canvas {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	pointer-events: none;
}

/* Content layer sits on top of the sky. */
.wp-block-starry-sky .starry-sky__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: 100%;
	color: #ffffff;
}

/* Vertical alignment of the overlaid content (cover-like). */
.wp-block-starry-sky {
	align-items: center;
}
.wp-block-starry-sky.is-vertically-aligned-top {
	align-items: flex-start;
}
.wp-block-starry-sky.is-vertically-aligned-center {
	align-items: center;
}
.wp-block-starry-sky.is-vertically-aligned-bottom {
	align-items: flex-end;
}

/* Make the inner column stretch so child block alignment behaves normally. */
.wp-block-starry-sky .starry-sky__inner > * {
	max-width: 100%;
}

/* Full/wide alignment: let the block break out but keep content readable. */
.wp-block-starry-sky.alignfull,
.wp-block-starry-sky.alignwide {
	max-width: none;
}