/**
 * Featured-image mask overlay for post loops.
 *
 * Applied to the element wrapping the featured <img> in each loop card via the
 * .charrua-ecomt-loop-thumb class. Two masked pseudo-elements draw, in front of
 * the image, the SVG cut: a filled block on the right and a chevron stroke. The
 * colours come from per-category CSS variables (see WP\Featured_Mask), falling
 * back to the tokens below when a category has no colour set.
 */

.charrua-ecomt-loop-thumb {
	position: relative;
	display: block;
	margin: 0;
	/* Hug the image: killing the inline baseline gap makes the wrapper match the
	   image height so the overlay reaches 100%. */
	line-height: 0;
	overflow: hidden;
	/* Clip the overlay to the card's rounded corners. Defaults to the Kadence
	   image radius; override with --ecomt-thumb-radius where it differs. */
	border-radius: var(--ecomt-thumb-radius, 16px);
}

/* Some builders (e.g. Kadence) wrap the image in an inline link; force it to
   fill so the wrapper keeps hugging the image. */
.charrua-ecomt-loop-thumb > a {
	display: block;
	line-height: 0;
}

.charrua-ecomt-loop-thumb::before,
.charrua-ecomt-loop-thumb::after {
	content: "";
	position: absolute;
	/* Overhang 1px on every side so subpixel rounding of the stretched mask
	   never leaves the image showing at the edges; the wrapper's overflow
	   clips the overhang back to the rounded box. */
	inset: -1px;
	z-index: 2;
	border-radius: inherit;
	pointer-events: none;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-size: 100% 100%;
	        mask-size: 100% 100%;
}

/* Filled block on the right. */
.charrua-ecomt-loop-thumb::before {
	background-color: var(--ecomt-overlay-fill, #E6EDFF);
	-webkit-mask-image: url(../images/overlay-fill.svg);
	        mask-image: url(../images/overlay-fill.svg);
}

/* Chevron stroke. */
.charrua-ecomt-loop-thumb::after {
	background-color: var(--ecomt-overlay-stroke, #0047FF);
	-webkit-mask-image: url(../images/overlay-stroke.svg);
	        mask-image: url(../images/overlay-stroke.svg);
}