/**
 * Glance (Figma "V2 Glance": Home 10:6037 / 834 / 390; the cabin pages 10:6693 and the others).
 *
 * 1440: title h1; 48 below (cabin pages 40), four figures 282 wide, 24 apart, with a rule on top
 * (value numeral 44/48, label small muted, 4 apart); 48 below, the photo strip: narrow and wide
 * frames (Home 201 / 378, 14 apart, photos 249 high (PLAN.md B3 Q10b: one height for the row);
 * cabin pages 202 / 374, 16 apart, 354 high), radius 12, captions 12 under the photos.
 * 834: the figures stay in one row; the strip keeps its size and scrolls (cabin pages 256 / 480,
 * photos 320 high). 390: title h2; the figures are rows 16 apart, label left, value right
 * (h3 28/36); the strip scrolls (272 / 510, photos 340 high, 16 apart).
 */

.sw-glance {
	--sw-glance-numbers-gap: var(--sw-heading-gap);
	--sw-glance-narrow: 201px;
	--sw-glance-wide: 378px;
	--sw-glance-photo-h: 249px;
	--sw-glance-gap: 14px;
}

.sw-glance__numbers {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: var(--sw-glance-numbers-gap) 0 0;
}

/* Value above the label (the label comes first in the markup, for the phone rows). */
.sw-glance__number {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	gap: 4px;
	min-width: 0;
}

.sw-glance__value {
	margin: 0;
}

/* Photo strip: on desktop the frames share the row in proportion to their widths. */
.sw-glance__strip {
	gap: var(--sw-glance-gap);
	margin-top: 48px;
	overflow: visible;
}

.sw-glance__photo--narrow {
	flex: 1 1 var(--sw-glance-narrow);
}

.sw-glance__photo--wide {
	flex: 1 1 var(--sw-glance-wide);
}

.sw-glance__strip.sw-bleed {
	margin-inline: 0;
	padding-inline: 0;
}

.sw-glance__photo .sw-figure__media {
	height: var(--sw-glance-photo-h);
}

.sw-glance__photo .sw-figure__caption {
	margin-top: 12px;
}

@media (max-width: 1024px) {
	.sw-glance__strip {
		overflow-x: auto;
	}

	.sw-glance__strip.sw-bleed {
		margin-inline: calc(-1 * var(--sw-gutter));
		padding-inline: var(--sw-gutter);
	}

	.sw-glance__photo--narrow {
		flex: none;
		width: var(--sw-glance-narrow);
	}

	.sw-glance__photo--wide {
		flex: none;
		width: var(--sw-glance-wide);
	}
}

@media (max-width: 767px) {
	.sw-glance {
		--sw-glance-narrow: 272px;
		--sw-glance-wide: 510px;
		--sw-glance-photo-h: 340px;
		--sw-glance-gap: 16px;
	}

	.sw-glance__numbers {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	/* 53 high: the rule, 16 above, then label left and value right (h3 28/36). */
	.sw-glance__number {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
	}

	.sw-glance__value {
		font-size: var(--sw-fs-h3);
		line-height: var(--sw-lh-h3);
		text-align: right;
	}
}