/**
 * Capabilities Table block — shared front-end + editor styles.
 */

.eretail-capabilities {
	position: relative;
	padding-block: var( --eretail-space-2xl, 96px );
	background-color: var( --eretail-color-heading, #111111 );
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.eretail-capabilities__overlay {
	position: absolute;
	inset: 0;
	background: rgba( 17, 17, 17, 0.55 );
}

.eretail-capabilities__inner {
	position: relative;
	z-index: 1;
}

.eretail-capabilities__header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var( --eretail-space-md, 24px );
	margin-bottom: var( --eretail-space-lg, 40px );
	color: #ffffff;
}

.eretail-capabilities__heading {
	color: #ffffff;
	margin-bottom: 8px;
}

.eretail-capabilities__subheading {
	color: rgba( 255, 255, 255, 0.75 );
	margin-bottom: 0;
}

.eretail-capabilities__card {
	background: var( --eretail-color-bg, #ffffff );
	border-radius: var( --eretail-radius-md, 8px );
	padding: var( --eretail-space-lg, 40px );
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --eretail-space-lg, 40px );
}

.eretail-capabilities__column h3 {
	font-size: 1.1rem;
	margin-bottom: var( --eretail-space-sm, 16px );
}

.eretail-capabilities__column ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var( --eretail-space-sm, 16px );
}

.eretail-capabilities__column li {
	padding-left: 1.5em;
	position: relative;
	color: var( --eretail-color-text, #4a4a4a );
}

.eretail-capabilities__column li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var( --eretail-color-primary, #e41e26 );
}

@media ( min-width: 782px ) {
	.eretail-capabilities__card {
		grid-template-columns: 1fr 1fr;
	}

	.eretail-capabilities__column:first-child {
		border-right: 1px solid var( --eretail-color-border, #e5e5e5 );
		padding-right: var( --eretail-space-lg, 40px );
	}
}