/**
 * Story Rows — stacked rounded cards; each row is text+image, image+text,
 * or image+text+image. Image fills its cell at the card height (object-fit cover).
 */

.elementor-column > .elementor-element-populated:has(.elementor-widget-agency-story-rows) {
	padding: 0 !important;
}

.aew-story {
	width: 100%;
	box-sizing: border-box;
	background-color: #ece8e3;
}

.aew-story__inner {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	box-sizing: border-box;
}

.aew-story__rows {
	display: flex;
	flex-direction: column;
	/* gap owned by row_gap control */
}

/* ── Row card ──────────────────────────────────────────────────── */
.aew-story__row {
	display: grid;
	column-gap: 32px;
	align-items: stretch;
	/* padding owned by card_padding control */
	background-color: #f8f5f1;
	border-radius: 24px;
	box-sizing: border-box;
}

/* Image column width via --aew-story-img-w (editor "Image width" control);
   default 1fr keeps the original 50/50. Text fills the remaining space. */
.aew-story__row--text-media {
	grid-template-columns: minmax(0, 1fr) var(--aew-story-img-w, 1fr);
}
.aew-story__row--media-text {
	grid-template-columns: var(--aew-story-img-w, 1fr) minmax(0, 1fr);
}
.aew-story__row--media-text-media {
	/* Two images share the image-width budget (half each), else --aew-story-img-w
	   applied to BOTH sides doubles it (e.g. 65%+65%) and collapses the center. */
	grid-template-columns: calc(var(--aew-story-img-w, 60%) / 2) minmax(0, 1fr) calc(var(--aew-story-img-w, 60%) / 2);
}

/* ── Media ─────────────────────────────────────────────────────── */
.aew-story__media {
	position: relative;
	/* image height follows the copy column (grid align-items: stretch); min-height
	   owned by image_min_height_desktop control, default 0 = no floor */
	min-height: var(--aew-story-img-min-h, 0);
	/* border-radius owned by image_radius control */
	overflow: hidden;
	background: #e1deda;
}

.aew-story__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ── Copy ──────────────────────────────────────────────────────── */
.aew-story__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
	/* padding owned by copy control (sp_copy_padding) */
	min-width: 0;
}

.aew-story__row--media-text-media .aew-story__copy {
	align-items: center;
	text-align: center;
}

.aew-story__title {
	margin: 0;
	font-family: var(--aew-font-heading, 'DM Serif Display', serif);
	/* font-size owned by heading_typography control */
	font-weight: 400;
	line-height: 1.15;
	color: #252f37;
}

.aew-story__body {
	font-family: var(--aew-font-body, Poppins, sans-serif);
	/* font-size owned by body_typography control */
	line-height: 1.6;
	color: #252f37;
}

.aew-story__body p {
	margin: 0 0 1em;
}

.aew-story__body p:last-child {
	margin-bottom: 0;
}

/* ── Tablet / mobile: stack ────────────────────────────────────── */
@media (max-width: 1024px) {
	.aew-story__row,
	.aew-story__row--text-media,
	.aew-story__row--media-text,
	.aew-story__row--media-text-media {
		grid-template-columns: 1fr !important;
		/* Gap between the image and copy when the row stacks — editable via the
		   "Stacked gap (image ↔ copy)" control. */
		row-gap: var(--aew-story-stack-gap, 24px);
	}
	/* Stacked: no side copy to match — give the image a fixed height (editor-controlled). */
	.aew-story__media {
		min-height: var(--aew-story-img-h, 240px);
	}
	/* Image always on top when stacked: Text+Image rows have copy first in the
	   DOM, so pull the media above it. (Image+Text rows already lead with the
	   image; Image+Text+Image keeps its natural order.) Also covers the per-row
	   "stack image first" toggle. */
	.aew-story__row--text-media .aew-story__media,
	.aew-story__row--stack-image-first .aew-story__media {
		order: -1;
	}
	/* All rows left-align their copy once stacked (incl. Image+Text+Image). */
	.aew-story__copy,
	.aew-story__row--media-text-media .aew-story__copy {
		text-align: left;
		align-items: flex-start;
	}
}