/* ===========================================================================
   solution-alternating-rows — three rows of copy and picture that swap sides
   ---------------------------------------------------------------------------
   Scope: .vbs-solution-alternating-rows
   Depends on: css/tokens.css, css/base.css
   Contains no literal colour, font, size, radius, shadow or duration.

   The move: the picture changes sides every row, and the copy is set at h1.
   Three rows on a 5/7 grid; odd rows put the words left, even rows put them
   right, so the eye zig-zags down the page and no two consecutive rows
   share a silhouette. Each picture sits in a panel with the card radius so
   the photograph reads as a screen. The row heading is set at the h1 step,
   which is what stops this from being a feature list with pictures.
   ========================================================================= */

.vbs-solution-alternating-rows__head { max-inline-size: var(--vb-max-narrow); }
.vbs-solution-alternating-rows__title { text-wrap: balance; }

.vbs-solution-alternating-rows__rows {
	margin-block-start: clamp(2.5rem, 5vw, 4rem);
	display: grid;
	gap: clamp(3rem, 7vw, 6rem);
}

.vbs-solution-alternating-rows__row {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: center;
}
@media (min-width: 64rem) {
	.vbs-solution-alternating-rows__row {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		column-gap: clamp(3rem, 6vw, 6rem);
	}
	/* even rows: picture first, words second */
	.vbs-solution-alternating-rows__row:nth-child(even) {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}
	.vbs-solution-alternating-rows__row:nth-child(even) .vbs-solution-alternating-rows__copy { order: 2; }
}

.vbs-solution-alternating-rows__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
}
.vbs-solution-alternating-rows__name {
	max-inline-size: 16ch;
	text-wrap: balance;
}
.vbs-solution-alternating-rows__text { max-inline-size: 42ch; }

.vbs-solution-alternating-rows__media {
	border-radius: var(--vb-radius-card);
	border: var(--vb-border-hair) solid var(--vb-color-rule);
	box-shadow: var(--vb-shadow-card);
}