/**
 * Icon Features Widget Styles
 *
 * Full-width background section with icon-based features grid
 *
 * @package DrYazdani
 * @since 1.0.0
 */

/* ==========================================================================
   Main Container
   ========================================================================== */

.dryazdani-icon-features {
	position: relative;
	background-color: var(--dryazdani-secondary);
	padding-block: var(--dryazdani-space-32);
	padding-inline: var(--dryazdani-space-6);
	overflow: hidden;
}

/* ==========================================================================
   Background & Overlay
   ========================================================================== */

.dryazdani-icon-features__background {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.dryazdani-icon-features__bg-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.2;
}

.dryazdani-icon-features__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgb(var(--dryazdani-secondary-rgb)),
		rgba(var(--dryazdani-secondary-rgb), 0.8)
	);
}

/* RTL gradient */
html[dir="rtl"] .dryazdani-icon-features__overlay {
	background: linear-gradient(
		to left,
		rgb(var(--dryazdani-secondary-rgb)),
		rgba(var(--dryazdani-secondary-rgb), 0.8)
	);
}

/* ==========================================================================
   Content Container
   ========================================================================== */

/* Container with additional positioning styles */
.dryazdani-icon-features__container {
	/* Base styles inherited from .dryazdani-container & .dryazdani-container--standard */
	position: relative;
	z-index: var(--dryazdani-z-base);
}

.dryazdani-icon-features__content {
	max-width: 768px;
}

/* ==========================================================================
   Header
   ========================================================================== */

.dryazdani-icon-features__header {
	margin-block-end: var(--dryazdani-space-12);
}

.dryazdani-icon-features__badge {
	display: inline-block;
	margin-block-end: var(--dryazdani-space-8);
	color: var(--dryazdani-primary);
	font-family: var(--dryazdani-font-body);
	font-size: var(--dryazdani-text-xs);
	font-weight: var(--dryazdani-font-medium);
	letter-spacing: var(--dryazdani-tracking-ultra-wide);
	text-transform: uppercase;
}

.dryazdani-icon-features__heading {
	font-family: var(--dryazdani-font-heading);
	font-size: clamp(var(--dryazdani-text-5xl), 6vw, var(--dryazdani-text-6xl));
	font-weight: var(--dryazdani-font-normal);
	color: var(--dryazdani-text-inverse);
	line-height: var(--dryazdani-leading-tight);
	margin: 0;
}

/* ==========================================================================
   Features Grid
   ========================================================================== */

.dryazdani-icon-features__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--dryazdani-space-6) var(--dryazdani-space-12);
}

.dryazdani-icon-features__grid[data-columns="2"] {
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.dryazdani-icon-features__grid[data-columns="2"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Individual Feature */
.dryazdani-icon-features__feature {
	display: flex;
}

.dryazdani-icon-features__feature-inner {
	display: flex;
	align-items: flex-start;
	gap: var(--dryazdani-space-4);
}

/* Icon */
.dryazdani-icon-features__icon {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--dryazdani-primary);
	fill: var(--dryazdani-primary);
	margin-block-start: var(--dryazdani-space-1);
}

.dryazdani-icon-features__icon i,
.dryazdani-icon-features__icon svg {
	width: 32px;
	height: 32px;
}

/* Feature Content */
.dryazdani-icon-features__feature-content {
	flex: 1;
}

.dryazdani-icon-features__feature-title {
	font-family: var(--dryazdani-font-heading);
	font-size: var(--dryazdani-text-2xl);
	font-weight: var(--dryazdani-font-normal);
	color: var(--dryazdani-text-inverse);
	line-height: var(--dryazdani-leading-tight);
	margin: 0 0 var(--dryazdani-space-3) 0;
}

.dryazdani-icon-features__feature-description {
	font-family: var(--dryazdani-font-body);
	font-size: var(--dryazdani-text-lg);
	color: var(--dryazdani-text-inverse);
	opacity: 0.7;
	line-height: var(--dryazdani-leading-normal);
	margin: 0 !important;
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

@media (min-width: 768px) {
	.dryazdani-icon-features {
		padding-inline: var(--dryazdani-space-8);
	}
}

@media (min-width: 1024px) {
	.dryazdani-icon-features {
		padding-inline: var(--dryazdani-space-12);
	}
}

/* Mobile adjustments */
@media (max-width: 767px) {
	.dryazdani-icon-features {
		padding-block: var(--dryazdani-space-20);
	}

	.dryazdani-icon-features__heading {
		font-size: var(--dryazdani-text-4xl);
	}

	.dryazdani-icon-features__grid {
		gap: var(--dryazdani-space-4) var(--dryazdani-space-8);
	}

	.dryazdani-icon-features__feature-title {
		font-size: var(--dryazdani-text-xl);
	}
}

/* ==========================================================================
   Light Background Variant
   ========================================================================== */

.dryazdani-icon-features--light {
	background-color: var(--dryazdani-background);
}

.dryazdani-icon-features--light .dryazdani-icon-features__badge {
	color: var(--dryazdani-primary);
}

.dryazdani-icon-features--light .dryazdani-icon-features__heading {
	color: var(--dryazdani-text-primary);
}

.dryazdani-icon-features--light .dryazdani-icon-features__icon {
	width: 64px;
	height: 64px;
	background-color: var(--dryazdani-primary);
	border-radius: 50%;
	color: var(--dryazdani-text-primary);
}

.dryazdani-icon-features--light .dryazdani-icon-features__feature-title {
	color: var(--dryazdani-text-primary);
}

.dryazdani-icon-features--light .dryazdani-icon-features__feature-description {
	color: var(--dryazdani-text-body);
	opacity: 1;
}

/* 3-column grid support */
.dryazdani-icon-features__grid[data-columns="3"] {
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.dryazdani-icon-features__grid[data-columns="3"] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.dryazdani-icon-features * {
		transition: none !important;
		animation: none !important;
	}
}