/*
 * A section's background: the store's own kept render, or nothing.
 *
 * inc/section-imagery.php decides which, and writes the answer as
 * `data-st-imagery="kept"` plus a `--st-section-image` custom property, or
 * `data-st-imagery="waiting"` and no property. There is deliberately no third
 * state and no default image: a shared fallback photograph is one store's idea of
 * itself on fifty stores.
 *
 * Tokens only. The waiting state is the store's own surface colour at a low
 * alpha of its own text colour, so it is a different quiet grey on every store
 * and not a hard-coded one.
 */

[data-st-section] {
	position: relative;
	isolation: isolate;
}

/* ------------------------------------------------------------------- kept */
[data-st-section][data-st-imagery='kept']::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--st-section-image);
	background-size: cover;
	background-position: center;
	/* The section's own text stays legible over any render without a colour
	   being named here: the scrim is the section's own background colour, which
	   the palette already set. */
	box-shadow: inset 0 0 0 100vmax color-mix(in srgb, currentColor 8%, transparent);
}

/* ---------------------------------------------------------------- waiting
 *
 * No image, and it does not pretend to be one: a flat token surface, the same
 * padding and rhythm as a section that has its render, so the page reads as
 * finished rather than broken while the imagery run catches up.
 */
[data-st-section][data-st-imagery='waiting']::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: color-mix(in srgb, currentColor 4%, transparent);
}

/* A page that baked an image into an inline style on a waiting section has it
   removed in PHP (render_block); this is the belt for a style that arrived from
   somewhere PHP does not see, such as a block's generated stylesheet. */
[data-st-section][data-st-imagery='waiting'] {
	background-image: none;
}