/**
 * SectionMate — compiler helper classes.
 *
 * Gutenberg has almost no per-breakpoint layout. These classes are written
 * by the compiler when a native field cannot do the job:
 *   apcm-stack-sm   wide rows → column
 *   apcm-header-sm  logo + CTA stay; mid-nav hides
 *   apcm-pad-sm     large desktop padding halved
 *   apcm-gb-safe    overflow cap on compiled roots
 *   apcm-clip       overflow: hidden   (all viewports)
 *   apcm-scroll     overflow: auto     (all viewports)
 *
 * Spectra / Elementor use native breakpoint fields; they only need the
 * header-hide rule. Everything below 781px is responsive safety; the two
 * overflow classes are not — a rounded card has to clip its children at every
 * width, and core/group has no control that says so.
 */

/*
 * Spectra Blocks 1.0.8 paints a container's solid colour on ::before with
 * z-index:-1 and does not give that container a stacking context. Inside a
 * photograph, that pseudo paints behind the photo and the card goes
 * transparent. isolation keeps the colour in the card. It is limited to
 * descendants of a photo: applying it to every coloured container hides a
 * gradient highlight that Spectra paints with the same pseudo (lab 06).
 * The photo container itself is excluded so its overlay stays above the image.
 */
.wp-block-spectra-container:is(.has-image-background, .has-video-background, .spectra-background-image) .wp-block-spectra-container:is(.spectra-background-color, .spectra-background-gradient):not(.has-image-background):not(.has-video-background):not(.spectra-background-image) {
	isolation: isolate;
}

/*
 * `overflow` on a Gutenberg group. The other three backends have a native
 * field for it, so without this the same clean JSON clipped a card's children
 * to its radius on three backends and let them poke out square on the fourth.
 */
.apcm-clip {
	overflow: hidden;
}

.apcm-scroll {
	overflow: auto;
}

@media (max-width: 781px) {
	.apcm-stack-sm.wp-block-group,
	.apcm-stack-sm.wp-block-group.is-layout-flex,
	.apcm-stack-sm > .wp-block-group__inner-container {
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
	}

	.apcm-stack-sm > *,
	.apcm-stack-sm > .wp-block-group__inner-container > * {
		max-width: 100% !important;
		flex-basis: auto !important;
		box-sizing: border-box;
	}

	.apcm-header-sm > *:not(:first-child):not(:last-child) {
		display: none !important;
	}

	.apcm-header-sm,
	.apcm-header-sm.wp-block-group.is-layout-flex {
		flex-wrap: wrap !important;
		row-gap: 12px;
	}

	.apcm-header-sm > :first-child,
	.apcm-header-sm > :last-child {
		max-width: 100%;
	}

	/* Same caps the native paddingMobile path applies: 16 on the sides, 40 top
	   and bottom. Gutenberg has no per-breakpoint padding control, so this class
	   is how a compiled page gets there. */
	.apcm-pad-sm {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	/*
	 * Overlap constructs, undone.
	 *
	 * A negative margin exists to pull one element over another on a wide screen.
	 * On a phone the same margin drags it across the text beside it — measured on
	 * lab 015, a photo with `margin-top: -229` still sat on top of the copy on all
	 * four backends. Spectra Legacy has no marginMobile field and Gutenberg has no
	 * breakpoint fields at all, so the class carries it for them; the other two get
	 * the native value as well and this is simply belt and braces.
	 */
	/*
	 * Doubled and attribute-qualified on purpose. Spectra writes its own margins
	 * as `margin-top: -229px !important` from a two-class selector, so a single
	 * class with !important ties on specificity and then loses or wins on source
	 * order — which is not something to leave to chance across three builders.
	 */
	.apcm-flat-sm.apcm-flat-sm[class] {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Only where the desktop value was NEGATIVE — positive vertical margin is
	   rhythm and belongs on a phone too. CSS cannot ask which it was, so the
	   compiler decides and adds this class only for the negative case. */
	.apcm-flatv-sm.apcm-flatv-sm[class] {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	/* A fixed width wider than the phone just hangs off the edge. */
	.apcm-full-sm.apcm-full-sm[class] {
		width: 100% !important;
		max-width: 100% !important;
	}

	.apcm-gb-safe,
	.apcm-gb-safe img,
	.apcm-gb-safe video,
	.apcm-gb-safe iframe,
	.apcm-stack-sm img,
	.apcm-header-sm img {
		max-width: 100%;
	}

	.apcm-gb-safe img,
	.apcm-stack-sm img,
	.apcm-header-sm img {
		height: auto;
	}
}