/*
 * Organic image masks (VISUAL_ACCEPTANCE.md M01–M06, FCT_WEB_SPEC.md §9, §10).
 *
 * Four cut-outs traced from the reference panels by qa/tools/trace-masks.mjs,
 * each its own asymmetric silhouette rather than one universal blob (M01):
 *   r2  tall bean with a lower lobe and rough right edge (Wat we doen)
 *   r5  broad torn blob (Workshops)
 *   r7  landscape band with a torn diagonal lower edge (Over FCT)
 *   r8  angular torn-paper cut (Contact)
 *
 * The mask is an SVG file applied with CSS, separate from the photo (M02),
 * stretched to the element, so the element keeps the silhouette's traced
 * aspect ratio (qa/panels/masks.json) and the photo fills it with
 * object-fit: cover. One file per shape serves any number of instances, so
 * there are no duplicate IDs (M04). Without mask support the photo stays
 * visible with softly rounded corners (M06). The lock-up never gets a mask.
 */

.is-style-organic-r2 {
	--fct-mask: url("../masks/organic-r2.svg?v=55c54ccc796f");
	--fct-mask-ratio: 0.7192;
}

.is-style-organic-r5 {
	--fct-mask: url("../masks/organic-r5.svg?v=01ea500c7027");
	--fct-mask-ratio: 1.0745;
}

.is-style-organic-r7 {
	--fct-mask: url("../masks/organic-r7.svg?v=fd0f9369111a");
	--fct-mask-ratio: 2.2636;
}

.is-style-organic-r8 {
	--fct-mask: url("../masks/organic-r8.svg?v=f13f784d9873");
	--fct-mask-ratio: 1.2093;
}

:is(.wp-block-image, .wp-block-cover)[class*="is-style-organic-"] {
	position: relative;
}

.wp-block-image[class*="is-style-organic-"] img,
.wp-block-cover[class*="is-style-organic-"] {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--fct-mask-ratio);
	object-fit: cover;
	border-radius: 0;
	-webkit-mask: var(--fct-mask) center / 100% 100% no-repeat;
	mask: var(--fct-mask) center / 100% 100% no-repeat;
}

/* The cover block sizes itself from its content; the mask ratio wins. */
.wp-block-cover[class*="is-style-organic-"] {
	min-height: 0 !important;
	padding: 0;
}

/* M06: no mask support, a cared-for rectangle instead of a raw one. */
@supports not ((mask-image: url("x.svg")) or (-webkit-mask-image: url("x.svg"))) {
	.wp-block-image[class*="is-style-organic-"] img,
	.wp-block-cover[class*="is-style-organic-"] {
		border-radius: 24px;
	}
}