/*
 * core/group — the pale wash behind a section, in the design's three tints
 * (`is-style-mesh-wash`, `is-style-mesh-wash-warm`, `is-style-mesh-wash-purple`).
 *
 * Figma stacks three layers over the section's white ground, and the whole of
 * this file is that stack translated:
 *
 *   1. the shared mesh-gradient bitmap, cropped
 *   2. a brand colour — Light Blue, or Orange for the warm variant, or Purple
 *      for the purple one — in `mix-blend-mode: color`
 *   3. `rgba(247, 247, 247, 0.72)` — Brand/BG at 72% — flat over both
 *
 * Layer 2 is what makes it a *wash* rather than the hero's mesh: the `color`
 * blend keeps the bitmap's luminosity and takes its hue and chroma from the
 * brand colour, so a warm, busy gradient comes out as one flat tint of itself.
 * Layer 3 then takes nearly three quarters of it away.
 *
 * ## Three layers on one element, and no pseudo-elements
 *
 * `background-blend-mode` is the property most of this file exists to use: each
 * background layer blends with the layers *below* it, so the three
 * `background-image` layers below — read bottom-up, which is how CSS lists them —
 * are the Figma stack in the same order with the same modes. A `::before` and a
 * `::after` would reproduce it too, and cost the section two boxes that a
 * `position: relative` and a `z-index` then have to keep behind its content.
 *
 * The two flat layers are `linear-gradient()`s of a single colour, because
 * `background-image` is the only property that takes a list and `background-color`
 * is one value at the bottom of the stack — which is where the section's own
 * white already is.
 *
 * ## The crop
 *
 * Figma places the bitmap 643.28% wide and 213.06% tall, offset -275.64% and
 * -32.51% of the frame. `background-size` takes those two percentages unchanged.
 * `background-position` cannot: CSS aligns the same percentage of the image with
 * that percentage of the box, so a raw offset has to be divided by the overflow
 * it moves through — 275.64 / (643.28 − 100) = 50.74% across, and
 * 32.51 / (213.06 − 100) = 28.75% down.
 *
 * **The two frames disagree, and the desktop one wins.** At 375 the design states
 * 725.62% × 240.33% from the same offsets, which works out to 44.06% / 23.17% —
 * a different crop of the same bitmap, where `is-style-mesh-gradient`'s transform
 * is identical in both frames. Nothing in the design says which is deliberate;
 * the desktop frame is the one the theme takes when they differ, and at this
 * opacity the difference is a few pixels of hue nobody can point at.
 *
 * ## Why the background is here and not on the block
 *
 * `core/group` has had a Background image control since 6.4, and it would carry a
 * custom `background-size` and `background-position` perfectly well. Two things
 * rule it out for a *pattern*, and they are the same two
 * `assets/css/blocks/group-mesh-gradient.css` sets out at greater length: the
 * image URL would be baked into post content as an absolute URL, carrying the
 * dev domain into production; and background styles are serialised by the
 * *JavaScript* style engine, which writes `url( 'x' )` where PHP's writes
 * `url('x')` — so a hand-written attribute has to match a quirk of one of two
 * engines that disagree, or the editor calls the pattern invalid. And neither
 * control can express the blend stack at all.
 *
 * The file the hero already ships is reused rather than exporting a third crop of
 * the same bitmap: it is the same asset in Figma, and one file that three
 * sections share is one file to replace when the brand gradient changes.
 */
.wp-block-group.is-style-mesh-wash,
.wp-block-group.is-style-mesh-wash-warm,
.wp-block-group.is-style-mesh-wash-purple {
	/*
	 * The blend colour, and the only thing that separates the two washes.
	 *
	 * Layer 2 is a flat fill of this in `mix-blend-mode: color`, so the whole
	 * difference between the cool wash and the warm one is which brand colour
	 * the bitmap's hue is replaced by — the crop, the veil and the blend stack
	 * are identical. A second stylesheet for that would be eighty lines of
	 * arithmetic copied to change one hex.
	 *
	 * The `color` blend takes the *hue and chroma* from this and the luminosity
	 * from the bitmap, so the value has to be an opaque colour: a translucent one
	 * would composite before it blended and the tint would come out weaker than
	 * the token says. Both are palette entries, so both are read as tokens.
	 */
	--kg-mesh-wash-tint: var(--wp--preset--color--brand-light-blue);

	background-image: linear-gradient(
			rgba(247, 247, 247, 0.72),
			rgba(247, 247, 247, 0.72)
		),
		linear-gradient(
			var(--kg-mesh-wash-tint),
			var(--kg-mesh-wash-tint)
		),
		url(../../images/hero/gradient.jpg);
	background-position:
		0 0,
		0 0,
		50.74% 28.75%;
	background-repeat: no-repeat;
	background-size:
		auto,
		auto,
		643.28% 213.06%;
	background-blend-mode: normal, color, normal;
}

/*
 * The warm wash: Brand/Orange in place of Brand/Light Blue.
 *
 * The design draws it behind the "Nenda i publika miljöer" section
 * (`patterns/cases-venue-slider.php`), and it states the same stack in
 * both of that section's frames — a warm variant is the section's own decision
 * rather than a leftover from whichever frame it was copied out of.
 *
 * **The crop is shared, and the design's two numbers differ by 2%.** This
 * section's frames place the bitmap 208.78% tall from −31.86% (29.29% down,
 * against the 28.75% above); the ramp is the same bitmap through the same 72%
 * veil, and half a percent of a background position under three quarters of an
 * opaque veil is not a difference anyone can point at. One crop, so a change to
 * it moves both washes together.
 */
.wp-block-group.is-style-mesh-wash-warm {
	--kg-mesh-wash-tint: var(--wp--preset--color--brand-orange);
}

/*
 * The purple wash: Brand/Purple in place of Brand/Light Blue.
 *
 * The design gives each sector page its own accent, and the wash is where that
 * shows across a whole section: Vård och omsorg's frames tint with Brand/Light
 * Blue, Hotell's with Brand/Purple. It is the same bitmap through the same crop
 * and the same 72% veil — the `color` blend keeps the bitmap's luminosity and
 * takes hue and chroma from the token, which is why one declaration is the
 * whole difference.
 *
 * Measured rather than assumed: sampling the two "Solution + How it works"
 * frames gives hue 225–227° across Vård och omsorg's wash and 246–249° across
 * Hotell's, against 227° for `brand-light-blue` and 251° for `brand-purple`.
 * The blend preserves hue exactly, so those readings *are* the token.
 */
.wp-block-group.is-style-mesh-wash-purple {
	--kg-mesh-wash-tint: var(--wp--preset--color--brand-purple);
}