/* WEDO Feature Section — heading + marker items beside a photo. */

.elementor-widget-wedo-feature-section {
	width: 100%;
	max-width: 100%;
}

.wedo-feature {
	display: flex;
	align-items: stretch;
	width: 100%;
	max-width: 100%;
}

.wedo-feature__content {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center; /* items block vertically centered vs the image (user request; desktop row layouts) */
}

.wedo-feature__heading {
	margin: 0 0 34px;
}

.wedo-feature__items {
	display: flex;
	flex-direction: column;
}

.wedo-feature__item {
	display: flex;
	align-items: flex-start;
	gap: var(--wedo-feat-marker-gap, 16px);
}

.wedo-feature__icon {
	flex: 0 0 auto;
	width: var(--wedo-feat-icon, 32px);
	height: var(--wedo-feat-icon, 32px);
	margin-top: 2px;
}

.wedo-feature__icon img,
.wedo-feature__icon svg {
	width: 100% !important;
	height: 100% !important;
	display: block;
}

.wedo-feature__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.wedo-feature__item-title,
.wedo-feature__item-text {
	display: block;
}

/* Vertical-line marker (section B style) */
.wedo-feature--marker-line .wedo-feature__item {
	border-left: var(--wedo-feat-line-w, 1px) solid var(--wedo-feat-line, #c1d9ba);
	padding-left: var(--wedo-feat-marker-gap, 16px);
	gap: 0;
}

/* Image column: width works for both row and column directions
   (--wedo-feat-media-w is forced to 100% in stacked layouts).
   --wedo-feat-w-adj (set by the Image Position control) subtracts half the
   column gap in row layouts so 50% media = Figma's even 780/780 split.
   align-self:center per Figma Group 87 — the text block is vertically
   centered against the image (was flex-start = top-aligned). */
.wedo-feature__media {
	flex: 0 0 auto;
	width: calc(var(--wedo-feat-media-w, var(--wedo-feat-img-w, 50%)) - var(--wedo-feat-w-adj, 0px));
	max-width: 100%;
	overflow: hidden;
	aspect-ratio: var(--wedo-feat-ratio, 780 / 460);
	align-self: center;
}

/* Full-width separator line below the section (Figma Lines 29/30) */
.wedo-feature-divider {
	width: 100%;
	height: 1px;
	background-color: rgba(65, 83, 80, 0.18);
	margin-top: 50px;
}

.wedo-feature__img {
	width: 100%;
	/* !important: WP core's `img:is([sizes="auto" i],[width][height]){height:auto}`
	   outranks a plain class selector — same bug as .wedo-rp__img. The var still
	   resolves to `auto` in the Original-ratio mode, so that mode is unaffected. */
	height: var(--wedo-feat-img-h, 100%) !important;
	object-fit: var(--wedo-feat-fit, cover);
	display: block;
}


/* Stacked mobile layout: no vertical centering — content flows naturally
   under the image (the desktop centering made headings look pushed down). */
@media (max-width: 480px) {
	.wedo-feature__content {
		justify-content: flex-start;
	}
}

/* ≤768, per Figma mobile 698:1502: feature IMAGES span the full card layer
   (container 20px inset) but the TEXT (heading + items) sits on the 40 text
   grid — 20px further in (heading x=39, items x=40..360). Same grid keeps
   tablet portrait consistent with the other sections. */
@media (max-width: 768px) {
	.wedo-feature__content {
		padding-left: 20px;
		padding-right: 20px;
	}
}