/*
 * KrsKrt Cover block — frontend & editor styles.
 *
 * Reuses core's `.wp-block-cover` layout (overlay span, image, inner-container
 * all `position:absolute` filling the wrapper). Two core rules need active
 * overriding for our fork to work:
 *
 *   1. `wp-includes/blocks/cover/style.css` line 13 paints the wrapper
 *      `background-color:#000` when `has-background-dim` is set without an
 *      overlay-colour preset class. Core assumes the image fully covers the
 *      wrapper (`object-fit:cover`); our default `object-fit:contain` lets
 *      that black bleed through around the letterboxed image. Force
 *      transparent on the wrapper.
 *
 *   2. `wp-includes/blocks/cover/style.css` lines 228–235 force `__background`
 *      to z-index:1 and `__image-background` to z-index:0 (so core's overlay
 *      paints on top of the image). Selector specificity is (0,6,1) thanks
 *      to `body:not(.editor-styles-wrapper) … :not(:has(…))`, so a
 *      class-only override loses. We use `!important` to flip the order;
 *      DOM remains overlay → image → inner-container.
 */

/* 1. Wrapper transparent — defeat core's "dark wrapper fallback". */
.wp-block-cover.krskrt-cover.has-background-dim,
.wp-block-cover.krskrt-cover.has-background-dim:not([class*=-background-color]),
.wp-block-cover.krskrt-cover.has-background-dim[class*=-background-color] {
	background-color: transparent;
}

/* 2. Force overlay BEHIND image, inner-container above both. */
.wp-block-cover.krskrt-cover > .wp-block-cover__background {
	z-index: 0 !important;
}
.wp-block-cover.krskrt-cover > .wp-block-cover__image-background {
	z-index: 1 !important;
}
.wp-block-cover.krskrt-cover > .wp-block-cover__inner-container {
	position: relative;
	z-index: 2 !important;
}

/* Default object-fit when no inline style is present. */
.wp-block-cover.krskrt-cover > .wp-block-cover__image-background {
	object-fit: contain;
}

/*
 * In `object-fit: contain` mode, core sizes the <img> element to fill the
 * wrapper (top/right/bottom/left:0; width:100%; height:100%) and uses
 * object-fit to letterbox the visible image inside that box. That means
 * border / border-radius / box-shadow on the <img> get drawn at the wrapper
 * edges, not around the visible (letterboxed) image. Switch to natural
 * sizing capped by the wrapper, then centre with `margin:auto`, so the
 * <img> element matches the visible image. The same `<img>` styles now
 * decorate the actual image instead of the container.
 *
 * In `cover` mode the visible image == wrapper rectangle (cropped), so
 * leaving the <img> wrapper-sized is correct.
 */
.wp-block-cover.krskrt-cover.is-object-fit-contain > .wp-block-cover__image-background {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
}

/* Fullscreen fixed background layer (frontend only — see editor scope below) */
.wp-block-cover.krskrt-cover.is-fixed {
	position: fixed;
	inset: 0;
	z-index: 0;
}

/* The placeholder shown in the editor when "Use featured image" is on. */
.krskrt-cover__featured-stub {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: rgba(0, 0, 0, 0.4);
	font-style: italic;
	pointer-events: none;
}

/*
 * Editor scope: keep the block editable inside the canvas.
 * Inside `.editor-styles-wrapper` (the iframe Gutenberg renders blocks in)
 * we don't want position:fixed because it detaches the block from the flow
 * and hides it behind the editor chrome. Authors still see the `is-fixed`
 * preview behaviour on the front-end.
 */
.editor-styles-wrapper .wp-block-cover.krskrt-cover.is-fixed,
.wp-block-cover.krskrt-cover.krskrt-cover--editor.is-fixed {
	position: relative;
	inset: auto;
}