.nocturne-rotating-cover {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.nocturne-rotating-cover.is-placeholder {
	min-height: 200px;
	background: var(--wp--preset--color--ink-2, #1a1a1a);
}

/* Standard/Wide width - the theme has no generic handling for these two
   (only Full has a theme-wide mechanism, see below), so this block still
   has to size them itself. */
.nocturne-rotating-cover:not(.alignwide):not(.alignfull) {
	max-width: var(--wp--style--global--content-size, 760px);
	margin-left: auto;
	margin-right: auto;
}

.nocturne-rotating-cover.alignwide {
	max-width: var(--wp--style--global--wide-size, 1380px);
	margin-left: auto;
	margin-right: auto;
}

/* Full Bleed - just remove the width cap. The theme's own style.css already
   has a generic, block-type-agnostic rule (".wp-site-blocks .alignfull" /
   ".is-root-container .wp-block[data-align=full]") that negative-margins
   any alignfull block out to the viewport edge - this class is also now
   listed alongside core/group and core/cover in that same style.css (see
   its "Relevant issues: gutenberg#35607, #35884" comment) for the padding
   half of that mechanism. Previously this used its own calc(50% - 50vw)
   margin trick instead of relying on that, which broke specifically when
   this block rendered nested inside another post's editor canvas (a
   pattern used on a page, edited via that page) - vw there resolves against
   that inner iframe's own viewport, not the one actually visible on screen. */
.nocturne-rotating-cover.alignfull {
	max-width: none;
}

.nocturne-rotating-cover__images {
	position: absolute;
	inset: 0;
}

.nocturne-rotating-cover__image {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 1.4s ease;
}

.nocturne-rotating-cover__image.is-active {
	opacity: 1;
	z-index: 1;
}

/* Aspect ratio - crops the photo layer only, the cover itself stays whatever
   size Minimum height says. inset:0 above makes an unsized box fill its
   parent by default; relaxing that to margin:auto (centers a sized box
   instead of stretching to fill) plus a min-width/min-height:100% floor is
   what lets aspect-ratio size the box freely while never going smaller than
   the cover in either dimension - so it always still fully covers it, just
   cropped to the chosen shape instead of the cover's own shape. The actual
   ratio value itself is set inline (style.aspectRatio in edit.js) since it's
   user-chosen, not something a static rule can express. */
.nocturne-rotating-cover__image.has-aspect-ratio {
	inset: 0;
	margin: auto;
	min-width: 100%;
	min-height: 100%;
}

/* Fixed/Repeated background - same idea as core/cover's own has-parallax /
   is-repeated. Editor preview only ever renders one .is-active image (see
   edit.js), but both classes live on the block root so a single rule covers
   the editor and the front end (where view.js swaps which image is active). */
.nocturne-rotating-cover.has-parallax .nocturne-rotating-cover__image {
	background-attachment: fixed;
}

.nocturne-rotating-cover.is-repeated .nocturne-rotating-cover__image {
	background-repeat: repeat;
	background-size: auto;
}

.nocturne-rotating-cover__overlay {
	position: absolute;
	inset: 0;
	background-color: var(--wp--preset--color--ink, #0d0c0e);
	z-index: 2;
	pointer-events: none;
}

/* width:100% (capped by max-width) so the box actually fills up to the cap
   instead of shrink-wrapping to its own content's natural width - important
   for wide inner content like a nav row. No margin:auto though - auto
   margins on a flex item always consume the free space along that axis
   themselves, which would force the box back to horizontal-center
   regardless of contentPosition and leave nothing for justify-content
   to use once max-width caps it narrower than the cover itself. */
.nocturne-rotating-cover__content {
	position: relative;
	z-index: 3;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--wp--style--global--content-size, 760px);
	padding: 24px;
	text-align: center;
	color: var(--wp--preset--color--bone, #eee7dc);
}

/* The content column grows along with the cover itself instead of staying
   frozen at the Standard-width cap. Full Bleed removes the cap entirely
   (rather than stopping at wide-size) - this cover is as likely to hold a
   full-width header/nav row as it is a narrower hero heading, and Full
   Bleed should mean the content can actually reach the edges when that's
   what's inside it. */
.nocturne-rotating-cover.alignwide .nocturne-rotating-cover__content {
	max-width: var(--wp--style--global--wide-size, 1380px);
}

.nocturne-rotating-cover.alignfull .nocturne-rotating-cover__content {
	max-width: none;
}

/* Content position - mirrors core/cover's is-position-* convention. Content
   fills the whole cover by default (base rule above centers it); picking a
   position in the Inspector just moves where within that area it sits. */
.nocturne-rotating-cover.is-position-top-left { align-items: flex-start; justify-content: flex-start; }
.nocturne-rotating-cover.is-position-top-center { align-items: flex-start; justify-content: center; }
.nocturne-rotating-cover.is-position-top-right { align-items: flex-start; justify-content: flex-end; }
.nocturne-rotating-cover.is-position-center-left { align-items: center; justify-content: flex-start; }
.nocturne-rotating-cover.is-position-center-center { align-items: center; justify-content: center; }
.nocturne-rotating-cover.is-position-center-right { align-items: center; justify-content: flex-end; }
.nocturne-rotating-cover.is-position-bottom-left { align-items: flex-end; justify-content: flex-start; }
.nocturne-rotating-cover.is-position-bottom-center { align-items: flex-end; justify-content: center; }
.nocturne-rotating-cover.is-position-bottom-right { align-items: flex-end; justify-content: flex-end; }

/* --- Editor: selected-images list in the Inspector --- */
.nocturne-rotating-cover-image-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.nocturne-rotating-cover-image-list li {
	position: relative;
	width: 56px;
	height: 56px;
}

.nocturne-rotating-cover-image-thumb {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 2px;
	background-size: cover;
	background-repeat: no-repeat;
}

.nocturne-rotating-cover-image-list li .nocturne-rotating-cover-image-remove {
	position: absolute;
	top: -6px;
	right: -6px;
	background: #fff;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	min-width: 20px;
	padding: 0;
}