/**
 * ACF block: Список зі стрілками.
 * Mobile (<768): single column.
 * Laptop (768–1199): 2 columns, aligned (no horizontal stagger).
 * Wide (≥1200): 2 columns; every 2nd row is nudged right (100px) so it reads
 *   as a staggered / cascading layout. Pattern repeats every 4 items.
 */

.arrow-list {
	--arrow-size: 20px;
	--arrow-shift: 100px;
	/* Even rows shift less → their elements end up ~10% longer than odd rows. */
	--arrow-shift-2: 50px;
}

.arrow-list__title {
	margin-bottom: 30px;
}

.arrow-list__items {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

.arrow-list__item {
	position: relative;
	padding-left: 30px;
	line-height: 1.4;
}

.arrow-list__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc((1em * var(--line-height-base) - var(--arrow-size)) / 2);
	width: var(--arrow-size);
	height: var(--arrow-size);
	background: url(../../images/icon-arr.svg) no-repeat center / contain;
}

@media (min-width: 768px) {
	.arrow-list {
		--arrow-size: 30px;
	}

	.arrow-list__item {
		padding-left: 40px;
	}

	.arrow-list__items {
		grid-template-columns: 1fr 1fr;
		column-gap: 40px;
		row-gap: 20px;
	}
}

@media (min-width: 1200px) {
	/* Equal-width columns; the 100px spacing comes from the item padding/margin
	   below (so "element + gap" is one consistent width across every cell). */
	.arrow-list__items {
		column-gap: 0;
	}

	/* Odd rows: element sits left, gap on the right. */
	.arrow-list__item:nth-child(4n + 1),
	.arrow-list__item:nth-child(4n + 2) {
		padding-right: var(--arrow-shift);
	}

	/* Even rows: whole element (marker + text) shifts right, gap on the left.
	   Smaller shift → these elements are a bit longer than the odd-row ones. */
	.arrow-list__item:nth-child(4n + 3),
	.arrow-list__item:nth-child(4n + 4) {
		margin-left: var(--arrow-shift-2);
	}
}