/*
 * cover.css
 *
 * iOS Safari ignores background-attachment:fixed, so the native WordPress
 * cover block parallax does nothing there. This stylesheet — scoped to the
 * same @supports test WordPress itself uses — sets up the geometry that
 * cover-parallax.js needs to drive the effect via transform instead.
 *
 * Desktop is completely unaffected: no rules apply, native parallax works.
 */

@supports ( -webkit-touch-callout: inherit ) {

	/* Kill the native CSS parallax; JS will handle it. */
	.wp-block-cover.has-parallax,
	.wp-block-cover-image.has-parallax {
		background-attachment: scroll !important;
		overflow: hidden;
		/* WordPress core sets background-size:cover for the fixed-attachment
		   case, sizing relative to the viewport. Once attachment is reset to
		   scroll that relationship breaks — the image scales relative to the
		   element instead and can appear distorted. Reset to auto so the
		   background displays at its natural dimensions on iOS. */
		background-size: auto !important;
	}

	/*
	 * Extend the background image 30 % beyond the cover's height (15 % on
	 * each side) so JS can translate it ±15 % without exposing the cover's
	 * fallback background colour at the edges.
	 */
	.wp-block-cover.has-parallax .wp-block-cover__image-background,
	.wp-block-cover-image.has-parallax .wp-block-cover__image-background {
		height: 130%;
		top: -15%;
		will-change: transform;
	}

}