/**
 * H2 Image Text Panel
 * ============================================================================
 * Two-column layout with image and text content including bullet points.
 *
 * Load order: After panel-base.css
 * Dependencies: 00-tokens.css (design tokens)
 * ============================================================================
 */

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

.h2-image-text-panel .content {
	display: flex;
	align-items: flex-start;
	gap: var(--space-9);
	max-width: var(--container-xl);
	margin: 0 auto;
	padding: var(--space-11) var(--space-7);
}

.h2-image-text-panel .image-column {
	flex: 0 0 47.5%;
	max-width: 47.5%;
}

.h2-image-text-panel .main-image {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--radius-md);
}

.h2-image-text-panel .text-column {
	flex: 1;
	min-width: 0;
}

/* H2-level heading — smaller than hero panel-heading, dark text */
.h2-image-text-panel .panel-heading {
	font-size: var(--heading-sub);
	color: var(--black);
	margin-bottom: var(--space-6);
}

/* Large solid-circle bullets matching design */
.h2-image-text-panel .bullet-list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-4) 0;
}

.h2-image-text-panel .bullet-list li {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin-bottom: var(--space-4);
}

.h2-image-text-panel .bullet-list li::before {
	content: "";
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	background: var(--black);
	border-radius: 50%;
}

.h2-image-text-panel .body-text {
	font-size: var(--text-base);
	line-height: var(--leading-normal);
	margin-bottom: var(--space-6);
	color: var(--black);
}

.h2-image-text-panel .button-container {
	margin-top: var(--space-7);
}

/* Image right variant */
.h2-image-text-panel--image-right .content {
	flex-direction: row-reverse;
}

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

@media (width <= 768px) {
	.h2-image-text-panel .content {
		flex-direction: column;
		gap: var(--space-7);
		padding: var(--space-9) var(--space-6);
	}

	.h2-image-text-panel .image-column {
		flex: 1 1 100%;
		max-width: 100%;
	}

	/* Image always on top when stacked */
	.h2-image-text-panel--image-right .content {
		flex-direction: column;
	}
}

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

@media (width <= 480px) {
	.h2-image-text-panel .content {
		padding: var(--space-7) var(--space-4);
	}
}