/**
 * CBM ribbon sections: keep the ribbon out from under the copy.
 *
 * The ParagraphBackground-* / Background-* / Heading-3 / Section-1 / Section-2 /
 * GreenRibbon / Frame-1000004708 artwork is all the same shape: a flat
 * brand-colour field with a blue (sometimes green) ribbon entering from the
 * RIGHT edge. The left 35% is one flat colour on 18 of the 21 files.
 *
 * Under `background-size: cover`, a container that is narrow AND tall scales the
 * graphic by its short axis - height - so the ribbon balloons and sweeps across
 * the box, landing under the text. Containers go narrow-and-tall as the copy
 * reflows, which is why this bites hardest at phone width.
 *
 * No text colour can fix it. Measured on the actual art, dark text is 10.09:1 on
 * the flat field but 1.53:1 on the ribbon; white is the inverse (1.73 vs 11.34).
 * The two backgrounds are 6.57:1 apart, so the fix has to be geometric.
 *
 * The classes are written by uploads/spark-cbm-ribbon-class.php, which states
 * facts about each container and leaves the treatment to this file:
 *
 *   cbm-ribbon-section    sits on ribbon art
 *   cbm-ribbon-card       narrow container
 *   cbm-ribbon-flatleft   art has a flat left edge
 *   cbm-ribbon-hascolour  background_color matches the art's field
 *
 * !important throughout, because Elementor emits these as per-element rules
 * (.elementor-NNNN .elementor-element.elementor-element-XXXX), which outrank a
 * plain class selector.
 */

/* ---------------------------------------------------------------- phone ----
 * The breakpoint where this is still visibly wrong. Rather than shrink the art -
 * which needs a flat background_color behind it to fill the rest, and no colour
 * changes are wanted on this site - keep `cover` filling the box and move the
 * visible crop onto the artwork's OWN flat left region. The ribbon is cropped
 * off to the right. No colour, no gap, no padding, no distortion.
 *
 * Only `background-position` is set. Deliberately NOT `background-size`: some of
 * these containers carry Elementor's `background-size: 0px auto` at this
 * breakpoint, which hides the art on purpose, and forcing `cover` would put it
 * back. Leaving size alone means those stay hidden and the rest get re-anchored.
 *
 * Gated on cbm-ribbon-phoneflat (computed from the image actually shown at
 * phone width, since 20 containers swap to a different one there): ParagraphBackground-2 and Section-2 have busy
 * left edges, and Section-2 has placeholder "Lorem Ipsum" baked into its left
 * side, so shifting those left would put that on screen.
 */
@media (max-width: 767px) {
	.cbm-ribbon-phoneflat {
		background-position: left center !important;
	}
}

/* --------------------------------------------------------------- tablet ----
 * Bands that carry a matching flat colour can afford the nicer treatment: the
 * ribbon shrinks to a corner motif at a fixed HEIGHT, which is ratio-independent
 * (the art runs 1.29:1 to 4.79:1, so a single `contain` padding cannot serve
 * them all). Wider files run off to the left of the corner, where they are flat
 * colour identical to background_color, so the crop is invisible.
 *
 * Restricted to containers that actually have that colour - without it the
 * shrunk image exposes bare background, which is what broke the home page.
 * Bracketed at min-width so it cannot cascade down and override the phone rule
 * above, and excluded from cards, whose extra padding read as dead space on
 * desktop.
 */
@media (min-width: 768px) and (max-width: 1024px) {
	.cbm-ribbon-section.cbm-ribbon-hascolour:not(.cbm-ribbon-card) {
		background-size: auto 88px !important;
		background-position: right bottom !important;
		background-repeat: no-repeat !important;
		background-attachment: scroll !important;
		/* Elementor containers resolve padding through --padding-bottom ->
		   --padding-block-end -> padding-block-end on .e-con-full, so set the
		   custom property it actually reads. The physical longhand is the
		   fallback for any legacy section/column element. */
		--padding-bottom: 120px !important;
		padding-bottom: 120px !important;
	}
}

/* -------------------------------------------------------------- overlay ----
 * These containers set a 50% black wash below 1024px, presumably to rescue
 * legibility. It does the opposite: it takes dark-on-field from 10.09:1 down to
 * 2.86:1 (failing AA) and dark-on-ribbon to 1.01:1. The Elementor setting is
 * cleared at source too; this is the belt to those braces.
 */
@media (max-width: 1024px) {
	.cbm-ribbon-section > .elementor-background-overlay {
		opacity: 0 !important;
	}
}

/* ------------------------------------------- product Key Benefits cards ----
 * A different mechanism, which is why none of the rules above reach it. These
 * cards (product single template, JetEngine dynamic repeater) paint the ribbon
 * as a real `<img>` covering the card, not as a CSS background:
 *
 *   .durability-card > .background-image > img      <- the artwork
 *   .durability-card > .card-content                <- heading + copy
 *
 * The flat field the card shows IS that image, so the image must keep covering;
 * shrinking or re-anchoring it would expose white. The design already keeps the
 * copy clear with a right padding on .card-content - the mechanism is right, the
 * value was wrong. It was a fixed 120px, but the ribbon is proportional: the art
 * is flat across its left 62-66%, so the ribbon takes the right ~36% of the card
 * whatever the card's width. On a wide card 120px does not reach it, and the
 * last words of each line ran onto the ribbon at 1.53:1.
 *
 * A percentage tracks the ribbon at every width instead. 38% = the ribbon's 36%
 * plus a little breathing room.
 *
 * Overrides the child theme's own breakpoint rules, some of which are
 * !important, so this has to be too.
 */
.key-repeater-section .durability-card .card-content {
	padding-right: 38% !important;
}