/**
 * Elcogen Features Widget Styles
 *
 * Responsive layout for product/service features with icons
 * Desktop: Horizontal layout with 5 items
 * Mobile: Vertical stacked layout
 *
 * @package Elcogen_Elementor_Widgets
 * @since 1.0.0
 */

/* ========================================
   Base Container Styles - Desktop
   ======================================== */
.elcogen-features {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	width: 100%;
	padding: var(--spacing-baseline-24) 0;
	gap: 0;
}

/* ========================================
   Feature Item Styles
   ======================================== */
.elcogen-features__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	flex: 1;
	width: auto;
}

/* ========================================
   Icon Styles
   ======================================== */
.elcogen-features__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--spacing-baseline-24);
	height: var(--spacing-baseline-24);
	margin-bottom: 0;
}

.elcogen-features__icon img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
}

.elcogen-features__icon i {
	font-size: var(--spacing-baseline-24);
	line-height: 1;
	display: block;
}

.elcogen-features__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* ========================================
   Title Typography - Managed by Elementor Global Typography
   ======================================== */
.elcogen-features__title {
	margin: .5rem 0 .25rem 0 !important;
	font-size: var(--font-size-body-large);
	line-height: 1.5rem;
}

/* ========================================
   Description Typography - Managed by Elementor Global Typography
   ======================================== */
.elcogen-features__description {
	margin: 0;
	font-size: var(--font-size-body-small);
	line-height: 1.25rem;
}

/* ========================================
   Mobile Responsive Styles (≤48rem)
   ======================================== */
@media (max-width: 48rem) {
	.elcogen-features {
		flex-direction: column;
		padding: var(--spacing-baseline-40) 0;
		gap: var(--spacing-baseline-40);
	}

	.elcogen-features__item {
		width: 100%;
	}
}