/**
 * Zevonix Suite - Integrations Grid
 * Layout skeleton. Every visual value below is overridable from the
 * Elementor Style tab; these are only the fallbacks.
 */

.zsuite-integrations {
	display: grid;
	grid-template-columns: repeat( var( --zsi-cols, 5 ), minmax( 0, 1fr ) );
	gap: var( --zsi-gap, 16px );
	align-items: stretch;
	width: 100%;
}

.zsuite-integration {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: var( --zsi-icon-gap, 15px );
	height: 100%;
	box-sizing: border-box;
	text-align: var( --zsi-text-align, center );
	text-decoration: none;
	background-color: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 12px;
	padding: 24px 20px;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

a.zsuite-integration:hover,
a.zsuite-integration:focus-visible {
	transform: translateY( calc( -1 * var( --zsi-hover-lift, 2px ) ) );
}

.zsuite-integrations--lift-all .zsuite-integration:hover {
	transform: translateY( calc( -1 * var( --zsi-hover-lift, 2px ) ) );
}

a.zsuite-integration:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/*
 * Kept as a block so the glyph inside follows --zsi-text-align, which lets a
 * single alignment control drive the icon, the name and the description.
 */
.zsuite-integration__icon {
	display: block;
	flex: 0 0 auto;
	color: #10A7F3;
	font-size: 28px;
	line-height: 1;
}

.zsuite-integration__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
	vertical-align: middle;
}

.zsuite-integration__content {
	width: 100%;
}

.zsuite-integration__title {
	margin: 0;
	color: #0F172A;
}

.zsuite-integration__desc {
	margin: 6px 0 0;
	color: #475569;
}

/* Editor placeholder when the repeater is empty. */
.zsuite-integrations__empty {
	grid-column: 1 / -1;
	padding: 24px;
	border: 1px dashed #CBD5E1;
	border-radius: 8px;
	color: #64748B;
	text-align: center;
	font-size: 14px;
}

@media ( prefers-reduced-motion: reduce ) {
	.zsuite-integration {
		transition: none;
	}

	.zsuite-integrations .zsuite-integration:hover,
	.zsuite-integrations .zsuite-integration:focus-visible {
		transform: none;
	}
}