/* ============================================================
   COLUMN BOX — .column-box
   Reusable section: optional heading above a boxed column layout.
   Variants: --gray (white bg, bordered box) | --red (primary bg, white box)
   Column count: __box--cols-1 | __box--cols-2
   ============================================================ */

/* Section base
   ============================================================ */

.column-box {
	padding-top: var(--section-py-sm);
	padding-bottom: var(--section-py-sm);
}

.column-box--gray {
	background: var(--color-gray-mid);
}

.column-box--red {
	background: var(--color-primary-dark);
}

/* Inner container
   ============================================================ */

.column-box__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
	display: grid;
	gap: var(--space-7);
}

/* Optional section heading above the box
   ============================================================ */

.column-box__section-heading {
	font-size: clamp( var(--size-xl), 4vw, var(--size-heading) );
	font-weight: var(--weight-bold);
	line-height: calc( 56 / 44 );
	margin: 0;
}

.column-box--gray .column-box__section-heading {
	color: var(--color-text);
}

.column-box--red .column-box__section-heading {
	color: var(--color-white);
	text-align: center;
}

/* Box wrapper
   ============================================================ */

.column-box__box {
	border-radius: var(--radius-lg);
	padding: var(--space-8);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
}

.column-box--gray .column-box__box {
	background: var(--color-white);
	border: none;
}

.column-box--red .column-box__box {
	background: var(--color-white);
	border: none;
}

/* Column
   ============================================================ */

.column-box__col {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

/* Column heading
   ============================================================ */

.column-box__col-heading {
	font-size: clamp( var(--size-lg), 2.5vw, var(--size-xl) );
	font-weight: var(--weight-black);
	color: var(--color-text);
	line-height: 1.2;
	margin: 0;
}

/* Bullet list
   ============================================================ */

.column-box__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.column-box__list li {
	font-size: var(--size-base);
	color: var(--color-text-muted);
	line-height: calc( 26 / 16 );
	padding-left: var(--space-5);
	position: relative;
}

.column-box__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-primary);
}

/* Desktop (≥ 992px)
   ============================================================ */

@media ( min-width: 992px ) {

	.column-box {
		padding-top: var(--section-py);
		padding-bottom: var(--section-py);
	}

	.column-box__box {
		padding: var(--space-10);
	}

	.column-box__box--cols-2 {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-10);
	}


}