/* ── Section ──────────────────────────────────────────────── */
.section-zig-zag {
	background-color: var(--color-bg-light-50);
	background-blend-mode: multiply;}

.section-zig-zag > .container {
	padding-block: var(--size-v-pad-md) var(--size-v-pad-sm);
}


/* ── Grid ─────────────────────────────────────────────────── */
.zz-grid {
	display: grid;
	align-items: center;
	column-gap: var(--size-pad-xl);
}

.zz-grid--left  { grid-template-columns: 13fr 9fr; }
.zz-grid--right { grid-template-columns: 9fr 13fr; }

/* ── Visual ───────────────────────────────────────────────── */
.zz-img {
	width: 100%;
	aspect-ratio: 16 / 9;
	display: block;
	border-radius: var(--radius-media);
	border: var(--size-border-card-border) solid var(--color-border-light-100);
	object-fit: cover;
}

/* ── Text ─────────────────────────────────────────────────── */
.zz-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2rem;
}

/* Override global h*+* margin — flex gap handles spacing */
.zz-text > * + * {
	margin-top: 0;
}

.zz-title {
	color: var(--color-text-pri-dark);
	font-size: var(--fs-h2);
	margin: 0;
	max-width: var(--size-max-text);
}

.zz-desc {
	color: var(--color-text-pri-dark);
	max-width: var(--size-max-text);
}

.zz-desc p {
	margin: 0;
}

/* ── Button ───────────────────────────────────────────────── */
.zz-btn {
	padding: var(--btn-pad-v) var(--btn-pad-h);
}

/* ── Responsive ───────────────────────────────────────────── */
@media only screen and (max-width: 991.98px) {
	.section-zig-zag > .container {
		padding-block: var(--size-v-pad-md);
	}

	.zz-grid--left,
	.zz-grid--right {
		grid-template-columns: 1fr;
		row-gap: var(--size-pad-sm);
	}

	/* Visual always first on mobile */
	.zz-grid--left  .zz-visual,
	.zz-grid--right .zz-visual { order: 1; }

	.zz-grid--left  .zz-text,
	.zz-grid--right .zz-text   { order: 2; }

	.zz-text {
		gap: 1.5rem;
	}
}