/*
 * 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;
}

/*
 * Self-sufficiency: do NOT rely on core's cover stylesheet being present.
 * WordPress only prints core's `.wp-block-cover` block CSS when the page
 * actually contains a block that pulls it in (e.g. a real core/cover block).
 * This is a CUSTOM block reusing core's classes, so on a form with no
 * core/cover block the core stylesheet is absent — the image then falls back
 * to `position: static` and sits top-left instead of being centred by the
 * `margin:auto` rule below (which needs absolute positioning to work).
 * Set the positioning ourselves so centring holds regardless of core.
 */
.wp-block-cover.krskrt-cover > .wp-block-cover__background,
.wp-block-cover.krskrt-cover > .wp-block-cover__image-background {
	position: absolute;
	inset:    0;
}

/* 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;
	/* Default 29px inset on every side (58px = 2 × 29). Overridden by the inline
	   max-width/max-height the PHP emits when an Image margin is set. */
	max-width: calc(100% - 58px);
	max-height: calc(100% - 58px);
	width: auto;
	height: auto;
	/* Default contain framing — overridden by the inline border / border-radius
	   the PHP emits from the Image Border & Shadow controls. */
	border: 1px solid #dedede;
	border-radius: 10px;
}

/*
 * Three-zone layout: logo (top) · inner content (centred, grows) · info bar
 * (bottom). The wrapper is a flow column; the overlay + image stay absolute
 * background layers behind it. `position:relative` (1) anchors those absolute
 * layers and (2) gives the cover its own stacking context so the image's
 * z-index:1 can never paint over later (sticky) sections — this is what made
 * the old fixed mode necessary; it isn't any more.
 */
.wp-block-cover.krskrt-cover {
	position: relative;
	display: flex;
	flex-direction: column;
	/* Override core's align-items:center, which would shrink each zone to its
	   content width and defeat the per-zone L/C/R alignment. */
	align-items: stretch;
}
/*
 * When the sticky-stacking JS tags the cover as section/part 0 it adds
 * .mm-sticky-section (position:sticky, specificity 0,1,0) + an inline `top`.
 * Our `position:relative` above is 0,2,0 and would otherwise win and kill the
 * sticky behaviour — restore it explicitly at 0,3,0. (position:sticky still
 * anchors the absolute overlay/image and keeps its own stacking context.)
 */
.wp-block-cover.krskrt-cover.mm-sticky-section {
	position: sticky;
}
.wp-block-cover.krskrt-cover > .krskrt-cover__logo {
	position: relative;
	z-index: 2;
	margin: 0;
	margin-top: 7px;
	flex: 0 0 auto;
	padding: 0;
}
.wp-block-cover.krskrt-cover > .wp-block-cover__inner-container {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.wp-block-cover.krskrt-cover > .krskrt-cover__infobar {
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
	display: flex;
	padding: 0;
}

/* Logo zone alignment + sizing. */
.krskrt-cover__logo.is-align-left   { text-align: left; }
.krskrt-cover__logo.is-align-center { text-align: center; }
.krskrt-cover__logo.is-align-right  { text-align: right; }
.krskrt-cover__logo-img {
	display: inline-block;
	height: 100px;
	width: auto;
	max-width: 100%;
}

/* Info bar zone alignment. Zero the .kk-game-info auto-margins (which would
   otherwise force-centre it) and let justify-content drive L/C/R. */
.krskrt-cover__infobar > .kk-game-info { margin-left: 0; margin-right: 0; }
.krskrt-cover__infobar.is-align-left   { justify-content: flex-start; }
.krskrt-cover__infobar.is-align-center { justify-content: center; }
.krskrt-cover__infobar.is-align-right  { justify-content: flex-end; }

/*
 * Layout — "Inner blocks use content width" (like the WP group block). When on,
 * the wrapper gets .is-constrained + a --krskrt-cover-content-width var, and the
 * three zones are capped to that width and centred. Left/right alignment of the
 * logo and info bar then lines up within the content width, not the viewport
 * edge. Off (default) = full bleed.
 */
.wp-block-cover.krskrt-cover.is-constrained > .krskrt-cover__logo,
.wp-block-cover.krskrt-cover.is-constrained > .wp-block-cover__inner-container,
.wp-block-cover.krskrt-cover.is-constrained > .krskrt-cover__infobar {
	width: 100%;
	max-width: var(--krskrt-cover-content-width, 1140px);
	margin-left: auto;
	margin-right: auto;
}

/* 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;
}