/* CSA Pillars — stacked sections of image showcase + text, with the text on
   the left or right per section and an optional divider between sections.
   The image block reuses the .csa-image-showcase markup and stylesheet. */

/* Inside a row-direction Elementor flex container the widget wrapper shrinks
   to its content, so the grid resolves its percentage/fr tracks against a
   narrower box and the text column wraps early. Force both to full width. */
.elementor-widget-csa_pillars,
.csa-pillars {
	width: 100%;
}

.csa-pillars {
	--csa-pillars-media: 45%;
}

.csa-pillars__item {
	display: grid;
	grid-template-columns: minmax(0, var(--csa-pillars-media)) minmax(0, 1fr);
	align-items: start;
	column-gap: 112px;
	row-gap: 32px;
}

.csa-pillars__item--text-left {
	grid-template-columns: minmax(0, 1fr) minmax(0, var(--csa-pillars-media));
}

.csa-pillars__item--text-left .csa-pillars__media {
	order: 2;
}

/* A section without images lets its text span the full width. */
.csa-pillars__item > .csa-pillars__content:only-child {
	grid-column: 1 / -1;
}

.csa-pillars__content {
	min-width: 0;
}

.csa-pillars__title {
	margin: 0 0 32px;
	font-size: 64px;
	font-weight: 400;
	line-height: 1.1;
	color: #1f2230;
}

.csa-pillars__subtitle {
	margin: 0 0 32px;
	font-size: 32px;
	font-weight: 400;
	line-height: 1.2;
	color: #1f2230;
}

.csa-pillars__desc {
	font-size: 20px;
	line-height: 1.75;
	text-align: justify;
	color: #6b6f7b;
}

.csa-pillars__desc > :last-child {
	margin-bottom: 0;
}

/* Reset theme <hr> styling (background, height, borders) so only the
   top border paints the line. */
.csa-pillars .csa-pillars__divider {
	height: 0;
	margin: 96px 0;
	border: 0;
	border-top: 3px solid #0e0b45;
	background: none;
}

@media (max-width: 1024px) {
	.csa-pillars__item {
		column-gap: 48px;
	}

	.csa-pillars__title {
		font-size: 44px;
	}

	.csa-pillars__subtitle {
		font-size: 26px;
	}
}

/* Stack on mobile: title, subtitle and description first, images last,
   regardless of the text position chosen for desktop. */
@media (max-width: 767px) {
	.csa-pillars__item,
	.csa-pillars__item--text-left {
		grid-template-columns: minmax(0, 1fr);
	}

	.csa-pillars__item .csa-pillars__media {
		order: 2;
	}

	.csa-pillars__title {
		font-size: 36px;
		margin-bottom: 20px;
	}

	.csa-pillars__subtitle {
		font-size: 22px;
		margin-bottom: 20px;
	}

	.csa-pillars__desc {
		font-size: 17px;
		text-align: left;
	}

	.csa-pillars .csa-pillars__divider {
		margin: 56px 0;
	}
}