/* CS Icon Grid Widget */

.cs-icon-grid {
	display: grid;
	gap: 0;
	width: 100%;
}

.cs-icon-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.cs-icon-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.cs-icon-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

.cs-icon-grid__item {
	position: relative;
	padding: 1rem 2rem;
	text-align: center;
	box-sizing: border-box;
	border-left: 2px solid var(--border-vert, #6ba9d9);
	border-right: 2px solid var(--border-vert, #6ba9d9);
}

/* Prevent border doubling between adjacent columns:
   First column drops its right border (next item's left provides the line).
   Last column drops its left border (prev item's right provides the line).
   Uses :nth-of-type so the <hr> dividers don't throw off the counting. */
.cs-icon-grid--cols-2 .cs-icon-grid__item:nth-of-type(2n+1),
.cs-icon-grid--cols-3 .cs-icon-grid__item:nth-of-type(3n+1),
.cs-icon-grid--cols-4 .cs-icon-grid__item:nth-of-type(4n+1) {
	border-right: 0;
}

.cs-icon-grid--cols-2 .cs-icon-grid__item:nth-of-type(2n),
.cs-icon-grid--cols-3 .cs-icon-grid__item:nth-of-type(3n),
.cs-icon-grid--cols-4 .cs-icon-grid__item:nth-of-type(4n) {
	border-left: 0;
}

/* Horizontal divider: rendered by the template as <hr> at row boundaries.
   `grid-column: 1 / -1` makes it span the full grid row as one continuous line.
   Thorough reset below — default <hr> UA/theme styling has a beveled border
   that can read as two stacked lines. */
.cs-icon-grid__divider {
	grid-column: 1 / -1;
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 2px;
	margin: 1.5rem 0;
	padding: 0;
	border: 0;
	outline: 0;
	background-color: var(--divider, #6b7280);
	background-image: none;
	color: transparent;
	box-shadow: none;
}

.cs-icon-grid__icon {
	height: 125px;
	margin: 0 auto 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cs-icon-grid__icon-img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	display: block;
}

.cs-icon-grid__headline {
	font-size: var(--h-size, 48px);
	color: var(--h-color, #e89b5a);
	font-weight: 400 !important;
	margin: 0 0 0.75rem;
	line-height: 1 !important;
}

.cs-icon-grid__desc {
	font-size: var(--d-size, 14px);
	color: var(--d-color, #ffffff);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	line-height: 1.4 !important;
}

/* Mobile: collapse to a single column, drop vertical borders,
   and add a divider between every stacked pair of items that aren't
   already separated by an explicit <hr>. */
@media (max-width: 768px) {
	.cs-icon-grid--cols-2,
	.cs-icon-grid--cols-3,
	.cs-icon-grid--cols-4 {
		grid-template-columns: 1fr;
	}

	.cs-icon-grid__item {
		border-left: none;
		border-right: none;
	}

	.cs-icon-grid__item + .cs-icon-grid__item {
		margin-top: 2rem;
	}
	.cs-icon-grid__item + .cs-icon-grid__item::before {
		content: "";
		position: absolute;
		top: -1rem;
		left: 15%;
		right: 15%;
		height: 2px;
		background: var(--divider, #6b7280);
	}
}