/* Snapshot Band: a row of captioned photos, then a strip of facts. Restyle per theme from css/screen.css
   by changing the --cc-snapshot-* variables. */
.cc-snapshot {
	--cc-snapshot-gap: clamp(12px, 1.6cqw, 24px);
	--cc-snapshot-line: color-mix(in srgb, currentColor 18%, transparent);
	--cc-snapshot-muted: color-mix(in srgb, currentColor 76%, transparent);
	--cc-snapshot-label-font: var(--font-small-titles);
	--cc-snapshot-value-font: var(--font-data-numbers, var(--font-titles));
	--cc-snapshot-radius: var(--img-radius, 0);
	--cc-snapshot-accent: var(--color-main);
	container-type: inline-size;
	min-width: 0;
}
.bg-main .cc-snapshot, .bg-black .cc-snapshot, .bg-image .cc-snapshot, .bg-video .cc-snapshot { --cc-snapshot-accent: currentColor; }
.cc-snapshot :is(a, [tabindex]):focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.ct-wrapper:has(.cc-snapshot__row[role="region"]) { overflow-x: clip; }
.cc-snapshot .cc-snapshot__row {
	display: flex;
	gap: var(--cc-snapshot-gap);
	align-items: flex-end;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 6px;
}
.cc-snapshot .cc-snapshot__row::-webkit-scrollbar { display: none; }
.cc-snapshot .cc-snapshot__photo { flex: 0 0 78%; margin: 0; min-width: 0; scroll-snap-align: start; }
.cc-snapshot--one .cc-snapshot__photo { flex: 1 1 100%; }
.cc-snapshot .cc-snapshot__frame { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--cc-snapshot-radius); background: color-mix(in srgb, currentColor 8%, transparent); }
.cc-snapshot--one .cc-snapshot__frame { aspect-ratio: 16 / 9; }
.cc-snapshot .cc-snapshot__img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.cc-snapshot .cc-snapshot__caption { margin-top: 10px; font-size: 16px; line-height: 1.4; color: var(--cc-snapshot-muted); }
.cc-snapshot .cc-snapshot__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 0; margin: 40px 0 0; padding: 0; }
.cc-snapshot .cc-snapshot__fact { display: flex; flex-direction: column-reverse; padding: 0 0 0 20px; border-left: 1px solid var(--cc-snapshot-line); min-width: 0; }
.cc-snapshot .cc-snapshot__label { margin: 0; font-family: var(--cc-snapshot-label-font); font-size: 16px; line-height: 1.3; color: var(--cc-snapshot-muted); }
.cc-snapshot .cc-snapshot__value { margin: 0 0 4px; font-family: var(--cc-snapshot-value-font); font-size: clamp(32px, 5cqw, 64px); line-height: 1; overflow-wrap: anywhere; }
.cc-snapshot--one .cc-snapshot__facts, .cc-snapshot .cc-snapshot__row + .cc-snapshot__facts { margin-top: 40px; }
@container (min-width: 700px) {
	.cc-snapshot .cc-snapshot__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; overflow: visible; }
	.cc-snapshot .cc-snapshot__photo { flex: none; }
	.cc-snapshot--one .cc-snapshot__row { display: block; }
	.cc-snapshot .cc-snapshot__facts { display: flex; flex-wrap: wrap; gap: 24px 0; }
	.cc-snapshot .cc-snapshot__fact { flex: 1 1 160px; }
}
@container (min-width: 1000px) {
	.cc-snapshot .cc-snapshot__row { display: flex; align-items: flex-end; }
	.cc-snapshot--one .cc-snapshot__row { display: block; }
	.cc-snapshot .cc-snapshot__photo { flex: 1 1 0; }
	.cc-snapshot--n2 .cc-snapshot__photo:nth-child(1) { flex-grow: 6; }
	.cc-snapshot--n2 .cc-snapshot__photo:nth-child(2) { flex-grow: 4; }
	.cc-snapshot--n3 .cc-snapshot__photo:nth-child(1) { flex-grow: 4; }
	.cc-snapshot--n3 .cc-snapshot__photo:nth-child(2), .cc-snapshot--n3 .cc-snapshot__photo:nth-child(3) { flex-grow: 3; }
	.cc-snapshot--n4.cc-snapshot--staggered .cc-snapshot__photo:nth-child(1) { flex-grow: 30; }
	.cc-snapshot--n4.cc-snapshot--staggered .cc-snapshot__photo:nth-child(2), .cc-snapshot--n4.cc-snapshot--staggered .cc-snapshot__photo:nth-child(4) { flex-grow: 22; }
	.cc-snapshot--n4.cc-snapshot--staggered .cc-snapshot__photo:nth-child(3) { flex-grow: 26; }
	.cc-snapshot--staggered .cc-snapshot__photo:nth-child(2n) .cc-snapshot__frame { aspect-ratio: 1 / 1; }
	.cc-snapshot--staggered .cc-snapshot__photo:nth-child(3) .cc-snapshot__frame { aspect-ratio: 5 / 6; }
	.cc-snapshot--staggered.cc-snapshot--one .cc-snapshot__frame { aspect-ratio: 16 / 9; }
	.cc-snapshot .cc-snapshot__fact { flex: 1 1 0; padding-left: 24px; }
}
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		@keyframes cc-snapshot-in { from { opacity: 0; translate: 0 32px; } to { opacity: 1; translate: 0 0; } }
		.cc-snapshot .cc-snapshot__photo { animation: cc-snapshot-in linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
		.cc-snapshot .cc-snapshot__photo:nth-child(2) { animation-range: entry 8% entry 68%; }
		.cc-snapshot .cc-snapshot__photo:nth-child(3) { animation-range: entry 16% entry 76%; }
		.cc-snapshot .cc-snapshot__photo:nth-child(4) { animation-range: entry 24% entry 84%; }
	}
}