/**
 * Two Column Feature Panel
 * ============================================================================
 * Two feature cards side by side with image, heading, body and CTA.
 *
 * Load order: After panel-base.css
 * Dependencies: 00-tokens.css (design tokens)
 * ============================================================================
 */

.two-column-feature-panel .content {
	padding: var(--space-11) var(--space-7);
	max-width: var(--container-xl);
	margin: 0 auto;
}

.two-column-feature-panel .panel-heading {
	text-align: center;
	margin-bottom: var(--space-9);
}

.two-column-feature-panel .features-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-7);
}

/* Bullet list inside feature card body */
.two-column-feature-panel .bullet-list {
	list-style: none;
	padding: 0;
	margin: var(--space-4) 0 0 0;
}

.two-column-feature-panel .bullet-list li {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin-bottom: var(--space-3);
}

.two-column-feature-panel .bullet-list li::before {
	content: "";
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	background: var(--black);
	border-radius: 50%;
}

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

@media (width <= 768px) {
	.two-column-feature-panel .content {
		padding: var(--space-9) var(--space-6);
	}

	.two-column-feature-panel .features-grid {
		grid-template-columns: 1fr;
	}
}

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

@media (width <= 480px) {
	.two-column-feature-panel .content {
		padding: var(--space-7) var(--space-4);
	}
}