/* ═════════════════════════════════════════════════════════════════
   SECTION 2 — PRODUCT CAPABILITIES
   Zigzag rows of text + device images (phones and MacBooks).
   overflow:hidden is required — MacBook images bleed past the viewport edge.
   ═════════════════════════════════════════════════════════════════ */

.caps { background: var(--cream); overflow: hidden; padding-top: 70px;}
.caps-header { max-width: 1100px; margin-bottom: var(--section-y); }
.caps-header .display { text-transform: uppercase; }

/* ── Zigzag row layout ── */
.caps-rows { display: flex; flex-direction: column; gap: 0; }
.cap-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(40px, 5vw, 96px);
	align-items: flex-start;
}
.cap-row.is-reverse .cap-row-text  { order: 2; }
.cap-row.is-reverse .cap-row-image { order: 1; }

/* Small gap between the two MacBook rows (3 & 4) */
.cap-row {
	margin-top: 150px;
}

.cap-row:nth-child(1) { margin-top: 0; }

/* Rows 5 & 6 (plain screenshots) break out of the cascade */
.cap-row:nth-child(5),
.cap-row:nth-child(6) {
	align-items: center;
}

/* ── Text column ── */
.cap-row-text {
	max-width: 520px;
	align-self: center;
}
.cap-row-text h3 {
	font-size: var(--fs-card-title);
	font-weight: 500;
	color: var(--ink);
	line-height: 1.1;
	letter-spacing: -.01em;
	margin: 0 0 18px;
}
.cap-row-text p {
	color: var(--ink-soft);
	font-size: clamp(18px, 1.8056vw, 26px);
	line-height: 1.6;
	margin: 0;
	max-width: 48ch;
}

/* ── Image column ──
   min-width:0 prevents the grid track from auto-expanding to fit oversized images */
.cap-row-image {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	min-height: 0;
	min-width: 0;
	overflow: visible;
}
.cap-row-image img {
	max-width: 100%;
	max-height: none;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Higher-specificity overrides for composite device images */
.cap-row-image img.laptop-composite {
	width: clamp(540px, 64vw, 1100px);
	max-width: none;
}
.cap-row-image img.phone-composite {
	width: clamp(220px, 24vw, 344px);
	max-width: none;
}

/* Rows 5 & 6: restore centered alignment for plain screenshots */
.cap-row:nth-child(5) .cap-row-image,
.cap-row:nth-child(6) .cap-row-image {
	align-items: center;
	min-height: 480px;
}
.cap-row:nth-child(5) .cap-row-image img,
.cap-row:nth-child(6) .cap-row-image img {
	max-height: 560px;
}

/* Plain tile screenshots (tiles 5 & 6: CALM Portal, Loquat IQ) — rounded corners */
.cap-row:nth-child(5) .cap-row-image > img,
.cap-row:nth-child(6) .cap-row-image > img {
	border-radius: 16px;
}

/* Tile 5 (CALM Portal): render at the same scale as the laptop composites.
   Row 5 is non-reversed → image sits in the right column; anchor to flex-start
   so the 1100px width bleeds off the right edge (mirroring row 3's bleed). */
.cap-row:nth-child(5) .cap-row-image {
	align-items: center;
	justify-content: flex-start;
	min-height: 0;
	overflow: visible;
}
.cap-row:nth-child(5) .cap-row-image > img {
	width: clamp(540px, 64vw, 1100px);
	max-width: none;
	max-height: none;
	height: auto;
}

/* Tile 6 (Loquat IQ): same scale-up as tile 5, but row 6 IS reversed
   (image sits in the left column), anchor to flex-end → bleeds off the left edge. */
.cap-row:nth-child(6) .cap-row-image {
	align-items: center;
	justify-content: flex-end;
	min-height: 0;
	overflow: visible;
}
.cap-row:nth-child(6) .cap-row-image > img {
	width: clamp(540px, 64vw, 1100px);
	max-width: none;
	max-height: none;
	height: auto;
}

/* ── Phone composites (tiles 1 & 2) ──
   SVG ref: iPhone 344px wide in a 1440px canvas (~24vw). */
.phone-composite {
	display: block;
	width: clamp(220px, 24vw, 344px);
	max-width: none;
	height: auto;
}

/* ── Laptop composites (tiles 3 & 4) ──
   SVG ref: MacBook 907px wide at 1440px canvas = ~63vw, bleeds off the edge.
   flex-shrink:0 prevents the flex container collapsing the image to column width. */
.laptop-composite {
	display: block;
	width: clamp(540px, 64vw, 1100px);
	max-width: none;
	height: auto;
	flex-shrink: 0;
}

/* Tile 3 (Cards — right column, no-reverse): anchor MacBook to left → bleeds RIGHT */
.cap-row:nth-child(3) .cap-row-image {
	justify-content: flex-start;
	overflow: visible;
}
/* Tile 4 (Lending — left column, reversed): anchor MacBook to right → bleeds LEFT */
.cap-row:nth-child(4) .cap-row-image {
	justify-content: flex-end;
	overflow: visible;
}

/* Reversed rows: push text-col content toward left (sits on the right) */
.cap-row.is-reverse .cap-row-text { margin-left: auto; }

/* ── Responsive ── */
@media (max-width: 900px) {
	.cap-row,
	.cap-row.is-reverse {
		grid-template-columns: 1fr;
		gap: 24px;
		margin-top: 0;
	}
	.cap-row.is-reverse .cap-row-text  { order: 0; margin-left: 0; }
	.cap-row.is-reverse .cap-row-image { order: 1; }
	.caps-rows { gap: 48px; }
}