/**
 * "Made in America" callout.
 *
 * Three product shots on the left, each linking through to a product category
 * page, with the positioning copy on the right. Carried over from the current
 * site, including its hover behaviour: hovering the group dims every shot
 * except the one under the pointer.
 */

.sterling-callout {
	position: relative;
	background-color: var(--sterling-ink, #231f20);
	background-image: url("../images/callout-bg.jpg");
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	color: #fff;
}

/* The texture is a light grey gradient; the current site darkens it with a
   flat ink wash rather than shipping a darkened image. */
.sterling-callout::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--sterling-ink, #231f20);
	opacity: 0.46;
}

/* Lift the content above the wash. */
.sterling-callout > .e-con-inner {
	position: relative;
	z-index: 2;
}

/* These containers are boxed, so the flex layout lives on .e-con-inner —
   alignment set on the container itself only moves the inner wrapper. */
.sterling-callout__row > .e-con-inner {
	align-items: center;
}

/* Product shots
   ------------------------------------------------------------------------ */

/* Elementor gives child containers width:100%, so cap the width rather than
   relying on flex-basis alone, or the two columns stack full width. */
/* align-self on the column itself rather than align-items on the row: the row
   is a boxed container, so its alignment runs through Elementor's variables on
   .e-con-inner and a plain align-items there leaves the column stretched. */
.sterling-callout__images {
	flex: 0 1 calc(58.333% - 16px);
	width: auto;
	max-width: calc(58.333% - 16px);
	align-self: center;
}

.sterling-callout__images > .e-con-inner {
	align-items: center;
	justify-content: center;
}

.elementor-widget-image.sterling-callout__img {
	flex: 1 1 33.333%;
	width: auto;
	max-width: 33.333%;
}

.elementor-widget-image.sterling-callout__img img {
	display: block;
	width: 100%;
	height: auto;
	transition: filter 0.3s ease;
}

/* Dim the whole group on hover, then restore the shot being pointed at, so the
   hovered lock reads as the live link. :focus-within carries the same cue to
   keyboard users tabbing through the three links. */
.sterling-callout__images:hover .sterling-callout__img img,
.sterling-callout__images:focus-within .sterling-callout__img img {
	filter: grayscale(100%) brightness(60%) contrast(150%);
}

/* Scoped to the group so this matches the dimming rule's specificity and wins
   on order — a bare .sterling-callout__img:hover loses to it and every shot
   stays dark. */
.sterling-callout__images .sterling-callout__img:hover img,
.sterling-callout__images .sterling-callout__img:focus-within img {
	filter: none;
}

/* Copy
   ------------------------------------------------------------------------ */

/* The 16px trims on both columns are half the row's 32px gap, so the pair adds
   up to 100% and stays on one line. */
.sterling-callout__copy {
	flex: 0 1 calc(41.666% - 16px);
	width: auto;
	max-width: calc(41.666% - 16px);
	gap: 0;
}

.elementor-widget-heading.sterling-callout__title .elementor-heading-title {
	margin: 0 0 1.25rem;
	color: #fff;
	font-family: var(--sterling-display, sans-serif);
	font-size: clamp(1.125rem, 1.8vw, 1.5rem);
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* Qualified with the widget class so these sit above Elementor's per-page
   ".elementor-widget-text-editor { color: var(--e-global-color-text) }", which
   paints the global ink colour and ties on specificity. */
/* A step heavier than the 400 the global kit sets, so the reversed copy holds
   up against the textured background, with tighter leading to match. */
.elementor-widget-text-editor.sterling-callout__lead {
	margin-bottom: 0.95rem;
	color: #fff;
	font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.4;
}

.sterling-callout__lead p:last-child {
	margin-bottom: 0;
}

/* Paragraph and bullet list sit side by side, as on the current site. */
.sterling-callout__split {
	gap: 1.5rem;
	align-items: start;
}

.elementor-widget-text-editor.sterling-callout__aside,
.elementor-widget-text-editor.sterling-callout__points {
	width: auto;
	color: #fff;
	font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.4;
}

.sterling-callout__aside {
	flex: 1 1 52%;
	max-width: 55%;
}

.sterling-callout__points {
	flex: 1 1 40%;
	max-width: 45%;
}

.sterling-callout__aside p:last-child {
	margin-bottom: 0;
}

.sterling-callout__points ul {
	margin: 0;
	padding-left: 1.15rem;
	list-style: disc;
}

/* Breakpoints
   ------------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.sterling-callout__images,
	.sterling-callout__copy {
		flex-basis: 100%;
		max-width: 100%;
	}
}

@media (max-width: 767px) {
	.sterling-callout__aside,
	.sterling-callout__points {
		flex-basis: 100%;
		max-width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.elementor-widget-image.sterling-callout__img img {
		transition: none;
	}
}