/**
 * Features Benefits Grid Panel
 * ============================================================================
 * Grid layout of icon + heading + description feature items.
 *
 * Load order: After panel-base.css
 * Dependencies: 00-tokens.css (design tokens)
 * ============================================================================
 */

/* ==========================================================================
   Base Styles
   ========================================================================== */

.features-benefits-grid-panel .content {
	padding: var(--space-11) var(--space-7);
	max-width: var(--container-xl);
	margin: 0 auto;
}

.features-benefits-grid-panel .panel-heading {
	margin-bottom: var(--space-7);
}

.features-benefits-grid-panel .panel-subtitle {
	font-size: var(--text-lg);
	line-height: var(--leading-relaxed);
	max-width: 800px;
	margin: 0 0 var(--space-9);
	color: var(--text-secondary);
}

/* Grid layout */
.features-benefits-grid-panel .features-grid {
	display: grid;
	gap: var(--space-7);
}

.features-benefits-grid-panel .features-grid--cols-3 {
	grid-template-columns: repeat(3, 1fr);
}

.features-benefits-grid-panel .features-grid--cols-2 {
	grid-template-columns: repeat(2, 1fr);
}

/* Horizontal layout for icon-feature items */
.features-benefits-grid-panel .icon-feature-item--horizontal {
	display: flex;
	align-items: flex-start;
	gap: var(--space-5);
	text-align: left;
}

.features-benefits-grid-panel .icon-feature-item__icon {
	margin-bottom: var(--space-4);
}

.features-benefits-grid-panel .icon-feature-item__icon .material-icons,
.features-benefits-grid-panel .icon-feature-item__icon .material-icons-outlined {
	font-size: 2.5rem;
	color: var(--brand-main);
}

/* Contained icon variant — rounded square with light bg */
.icon-feature-item__icon--contained {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	background: var(--brand-highlight);
	border-radius: var(--radius-base);
}

/* Dark background variant */
.features-benefits-grid-panel--dark-bg .panel-heading,
.features-benefits-grid-panel--dark-bg .panel-subtitle {
	color: var(--white);
}

.features-benefits-grid-panel--dark-bg .icon-feature-item__heading {
	color: var(--white);
}

.features-benefits-grid-panel--dark-bg .icon-feature-item__body {
	color: rgba(255, 255, 255, 0.85);
}

.features-benefits-grid-panel--dark-bg .icon-feature-item__icon .material-icons,
.features-benefits-grid-panel--dark-bg .icon-feature-item__icon .material-icons-outlined {
	color: var(--white);
}

.features-benefits-grid-panel--dark-bg .icon-feature-item__icon--contained {
	background: rgba(255, 255, 255, 0.15);
}

.features-benefits-grid-panel .icon-feature-item__heading {
	font-size: var(--heading-card);
	font-weight: var(--font-bold);
	margin-bottom: var(--space-3);
	color: var(--brand-main);
}

.features-benefits-grid-panel .icon-feature-item__body {
	font-size: var(--text-base);
	color: var(--text-secondary);
	line-height: var(--leading-normal);
}

/* ==========================================================================
   Responsive: Tablet (1024px)
   ========================================================================== */

@media (width <= 1024px) {
	.features-benefits-grid-panel .features-grid--cols-3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ==========================================================================
   Responsive: Mobile (768px)
   ========================================================================== */

@media (width <= 768px) {
	.features-benefits-grid-panel .content {
		padding: var(--space-9) var(--space-6);
	}

	.features-benefits-grid-panel .features-grid--cols-3,
	.features-benefits-grid-panel .features-grid--cols-2 {
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}
}

/* ==========================================================================
   Responsive: Mobile (480px)
   ========================================================================== */

@media (width <= 480px) {
	.features-benefits-grid-panel .content {
		padding: var(--space-7) var(--space-4);
	}

	.features-benefits-grid-panel .panel-subtitle {
		font-size: var(--text-base);
	}
}