/**
 * LFBC Image with Frame
 *
 * Applying any `is-style-{lh|rh}-{poppy|moss|pollen}-border` block style
 * to a core/image makes the figure into a colored frame with the
 * designer's organic outer shape, wrapping the image with asymmetric
 * padding so the visible frame thickness varies per the design.
 *
 * Image dimensions: max 640×463, aspect-ratio 640/463 maintained, with
 * `object-fit: cover` cropping uploaded images of any source aspect to
 * fit. The frame size = image + padding, so the frame stays snug around
 * the image at every viewport — it never extends past the image.
 *
 * Both RH (dramatic curve at bottom-left) and LH (dramatic curve at
 * top-right) use SVG masks for the figure's outer shape — `border-radius`
 * alone can't reproduce the design's non-horizontal top edges or the
 * dramatic asymmetric corners. Each side has its own outer-path SVG
 * (RH: viewBox 689×518; LH: viewBox 694×512). The masks stretch with
 * the figure via `mask-size: 100% 100%`, and the figure's
 * `background-color` shows wherever the mask is opaque, so the 3 color
 * variants on each side reuse the same SVG. `border-radius` stays
 * declared as a fallback for browsers without mask support.
 *
 * Radii and padding both use cqi-clamped values so the frame keeps its
 * proportions at full desktop width, in a narrow 50/50 cell, and on
 * mobile. Container-type is on the figure itself; the figure's outer
 * width is explicitly driven by `width: 100%; max-width: <px>` rather
 * than by content, which keeps container queries well-defined even
 * though container-type breaks intrinsic sizing.
 */

/* --------------------------------------------------------------------------
 * Shared base — applies to all 6 frame variants (3 colors × 2 sides).
 * Padding, radii, and max-width come from each variant's own block below.
 * -------------------------------------------------------------------------- */

.wp-block-image.is-style-rh-poppy-border,
.wp-block-image.is-style-lh-poppy-border,
.wp-block-image.is-style-rh-moss-border,
.wp-block-image.is-style-lh-moss-border,
.wp-block-image.is-style-rh-pollen-border,
.wp-block-image.is-style-lh-pollen-border {
	display: block;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
	container-type: inline-size;
	padding:
		var(--lfbc-frame-pad-top)
		var(--lfbc-frame-pad-right)
		var(--lfbc-frame-pad-bottom)
		var(--lfbc-frame-pad-left);
	border-radius:
		var(--lfbc-frame-tl)
		var(--lfbc-frame-tr)
		var(--lfbc-frame-br)
		var(--lfbc-frame-bl);
}

.wp-block-image.is-style-rh-poppy-border > img,
.wp-block-image.is-style-lh-poppy-border > img,
.wp-block-image.is-style-rh-moss-border > img,
.wp-block-image.is-style-lh-moss-border > img,
.wp-block-image.is-style-rh-pollen-border > img,
.wp-block-image.is-style-lh-pollen-border > img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 640px;
	max-height: 463px;
	aspect-ratio: 640 / 463;
	object-fit: cover;
	border-radius: inherit;
}

/* Hide captions on framed images — the colored padding strip below the
   image is part of the frame, not a place for caption text to live. */
.wp-block-image.is-style-rh-poppy-border figcaption,
.wp-block-image.is-style-lh-poppy-border figcaption,
.wp-block-image.is-style-rh-moss-border figcaption,
.wp-block-image.is-style-lh-moss-border figcaption,
.wp-block-image.is-style-rh-pollen-border figcaption,
.wp-block-image.is-style-lh-pollen-border figcaption {
	display: none;
}

/* --------------------------------------------------------------------------
 * Color variants — background-color is the only per-color difference.
 * -------------------------------------------------------------------------- */

.wp-block-image.is-style-rh-poppy-border,
.wp-block-image.is-style-lh-poppy-border  { background-color: var(--wp--preset--color--poppy-500); }

.wp-block-image.is-style-rh-moss-border,
.wp-block-image.is-style-lh-moss-border   { background-color: var(--wp--preset--color--moss-500); }

.wp-block-image.is-style-rh-pollen-border,
.wp-block-image.is-style-lh-pollen-border { background-color: var(--wp--preset--color--pollen-500); }

/* --------------------------------------------------------------------------
 * RH — dramatic curve at bottom-left. Padding values include the +10
 * adjustment to top/right/bottom over the Figma reference. SVG mask
 * provides the organic outer shape (top edge curves gently up to the
 * right, plus the dramatic bl); the path is the outer sub-path of the
 * designer's RH frame SVG.
 * -------------------------------------------------------------------------- */

.wp-block-image.is-style-rh-poppy-border,
.wp-block-image.is-style-rh-moss-border,
.wp-block-image.is-style-rh-pollen-border {
	--lfbc-frame-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 689 518' preserveAspectRatio='none'><path d='M688.236 356.81C687.286 267.14 685.556 177.48 683.016 87.8099C683.136 39.2399 638.746 -2.31013 592.076 0.0998661C473.286 4.24987 354.496 9.79987 235.706 16.7299C234.456 16.7999 233.206 16.8799 231.946 16.9599C210.396 17.8699 132.536 21.2599 123.806 21.9799C117.486 22.5099 109.556 24.1899 109.556 24.1899H109.536C85.7261 28.2399 62.6861 39.5299 44.7261 56.9699C21.9261 78.7299 7.4361 110.05 6.0161 142.81C4.0361 180.48 2.2061 218.14 0.506097 255.81C-8.6939 387.01 108.836 515.07 247.076 514.37C340.746 516.36 434.406 517.49 528.076 517.75C545.696 517.8 563.386 514.93 580.146 509.19C643.956 488.23 689.766 423.59 688.236 356.8V356.81Z' fill='black'/></svg>");

	--lfbc-frame-tl: clamp(55px, 17.4cqi, 120px);
	--lfbc-frame-tr: clamp(55px, 9.4cqi, 65px);
	--lfbc-frame-br: clamp(65px, 17.4cqi, 120px);
	--lfbc-frame-bl: clamp(90px, 33.4cqi, 230px);

	--lfbc-frame-pad-top:    clamp(15px, 4.73cqi, 33px);
	--lfbc-frame-pad-right:  clamp(16px, 5.16cqi, 36px);
	--lfbc-frame-pad-bottom: clamp(18px, 6.02cqi, 42px);
	--lfbc-frame-pad-left:   clamp(9px,  2.58cqi, 18px);

	max-width: 694px;       /* 640 image + 18 left + 36 right padding */

	-webkit-mask-image: var(--lfbc-frame-mask);
	        mask-image: var(--lfbc-frame-mask);
	-webkit-mask-size: 100% 100%;
	        mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
}

/* --------------------------------------------------------------------------
 * LH — dramatic curve at top-right. Padding values include the user's
 * adjustment: top thinned to 11 and right/bottom each +7 over the Figma
 * reference, for the "angle up left-to-right" feel. SVG mask provides
 * the organic outer shape (top edge curves down toward the left, plus
 * the dramatic tr); the path is the outer sub-path of the designer's
 * LH frame SVG.
 * -------------------------------------------------------------------------- */

.wp-block-image.is-style-lh-poppy-border,
.wp-block-image.is-style-lh-moss-border,
.wp-block-image.is-style-lh-pollen-border {
	--lfbc-frame-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 694 512' preserveAspectRatio='none'><path d='M693.537 359.54C692.987 321.87 692.287 284.21 691.457 246.54C692.047 108.44 564.067 -8.77001 433.177 0.509994C399.837 2.03999 366.487 3.67999 333.147 5.41999C283.847 7.01999 172.987 11.1 125.297 16.69C120.947 17.07 116.607 17.68 112.307 18.54C109.807 18.99 107.757 19.45 106.207 19.92C85.747 25.1 66.297 35.65 50.697 50.84C27.977 72.59 13.557 103.85 12.137 136.54C7.27703 229.21 3.26703 321.88 0.0970311 414.54C-2.28297 461.41 39.457 505.92 88.177 505.77C228.037 509.62 367.907 511.54 507.777 511.54C519.577 511.54 531.377 511.53 543.177 511.5C624.237 513.31 696.487 439.66 693.537 359.54Z' fill='black'/></svg>");

	--lfbc-frame-tl: clamp(55px, 17.3cqi, 120px);
	--lfbc-frame-tr: clamp(90px, 33.1cqi, 230px);
	--lfbc-frame-br: clamp(55px, 17.3cqi, 120px);
	--lfbc-frame-bl: clamp(55px, 17.3cqi, 120px);

	--lfbc-frame-pad-top:    clamp(15px, 4.71cqi, 33px);
	--lfbc-frame-pad-right:  clamp(17px, 5.71cqi, 40px);
	--lfbc-frame-pad-bottom: clamp(17px, 5.71cqi, 40px);
	--lfbc-frame-pad-left:   clamp(18px,  3.00cqi, 21px);

	max-width: 701px;       /* 640 image + 21 left + 40 right padding */

	-webkit-mask-image: var(--lfbc-frame-mask);
	        mask-image: var(--lfbc-frame-mask);
	-webkit-mask-size: 100% 100%;
	        mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
}