/* Centerpiece: text, one photo, quick facts. Branding owns the palette, type, corners and section spacing.
   Restyle per theme from css/screen.css by changing the --cc-centerpiece-* variables. */
.cc-centerpiece {
	--cc-centerpiece-gap: clamp(24px, 4cqw, 64px);
	--cc-centerpiece-line: color-mix(in srgb, currentColor 18%, transparent);
	--cc-centerpiece-muted: color-mix(in srgb, currentColor 76%, transparent);
	--cc-centerpiece-label-font: var(--font-small-titles);
	--cc-centerpiece-value-font: var(--font-titles);
	--cc-centerpiece-radius: var(--img-radius, 0);
	--cc-centerpiece-ratio: 3 / 4;
	--cc-centerpiece-accent: var(--color-main);
	container-type: inline-size;
	min-width: 0;
}
.bg-main .cc-centerpiece, .bg-black .cc-centerpiece, .bg-image .cc-centerpiece, .bg-video .cc-centerpiece { --cc-centerpiece-accent: currentColor; }
.cc-centerpiece :is(a, [tabindex]):focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.cc-centerpiece .cc-centerpiece__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cc-centerpiece-gap);
	align-items: center;
}
.cc-centerpiece .cc-centerpiece__intro, .cc-centerpiece .cc-centerpiece__facts { min-width: 0; }
.cc-centerpiece .cc-centerpiece__media { margin: 0; width: 100%; max-width: 360px; justify-self: center; min-width: 0; }
.cc-centerpiece .cc-centerpiece__frame {
	aspect-ratio: var(--cc-centerpiece-ratio);
	overflow: hidden;
	border-radius: var(--cc-centerpiece-radius);
	background: color-mix(in srgb, currentColor 8%, transparent);
}
.cc-centerpiece--arch .cc-centerpiece__frame { border-radius: 999px 999px var(--cc-centerpiece-radius) var(--cc-centerpiece-radius); }
.cc-centerpiece--circle { --cc-centerpiece-ratio: 1 / 1; }
.cc-centerpiece--circle .cc-centerpiece__frame { border-radius: 50% !important; }
.cc-centerpiece .cc-centerpiece__img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.cc-centerpiece .cc-centerpiece__caption { margin-top: 12px; font-size: 16px; line-height: 1.4; color: var(--cc-centerpiece-muted); text-align: center; }
.cc-centerpiece .cc-centerpiece__facts-title {
	margin: 0 0 16px;
	padding-top: 16px;
	border-top: 2px solid var(--cc-centerpiece-accent);
	font-family: var(--cc-centerpiece-label-font);
	font-size: 16px;
}
.cc-centerpiece .cc-centerpiece__list { margin: 0; padding: 0; }
.cc-centerpiece .cc-centerpiece__row { padding: 16px 0; border-top: 1px solid var(--cc-centerpiece-line); }
.cc-centerpiece .cc-centerpiece__row:last-child { border-bottom: 1px solid var(--cc-centerpiece-line); }
.cc-centerpiece .cc-centerpiece__label { margin: 0 0 4px; font-family: var(--cc-centerpiece-label-font); font-size: 16px; line-height: 1.3; color: var(--cc-centerpiece-muted); }
.cc-centerpiece .cc-centerpiece__value { margin: 0; font-family: var(--cc-centerpiece-value-font); font-size: clamp(20px, 2.4cqw, 28px); line-height: 1.2; overflow-wrap: anywhere; }
.cc-centerpiece .cc-centerpiece__value a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@container (min-width: 700px) {
	.cc-centerpiece .cc-centerpiece__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cc-centerpiece .cc-centerpiece__intro { grid-column: 1 / -1; }
	.cc-centerpiece .cc-centerpiece__media { max-width: none; }
	.cc-centerpiece--no-img .cc-centerpiece__facts, .cc-centerpiece--no-facts .cc-centerpiece__media { grid-column: 1 / -1; }
	.cc-centerpiece--no-facts .cc-centerpiece__media { max-width: 420px; }
	.cc-centerpiece--no-img.cc-centerpiece--no-facts .cc-centerpiece__grid { grid-template-columns: minmax(0, 1fr); }
}
@container (min-width: 1000px) {
	.cc-centerpiece .cc-centerpiece__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr); }
	.cc-centerpiece .cc-centerpiece__intro { grid-column: auto; }
	.cc-centerpiece--no-img .cc-centerpiece__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
	.cc-centerpiece--no-facts .cc-centerpiece__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
	.cc-centerpiece--no-img.cc-centerpiece--no-facts .cc-centerpiece__grid { grid-template-columns: minmax(0, 1fr); }
	.cc-centerpiece--no-img .cc-centerpiece__facts, .cc-centerpiece--no-facts .cc-centerpiece__media { grid-column: auto; }
	.cc-centerpiece--no-facts .cc-centerpiece__media { max-width: none; }
}
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		@keyframes cc-centerpiece-frame { from { clip-path: inset(12% 12% 12% 12%); } to { clip-path: inset(0); } }
		@keyframes cc-centerpiece-img { from { scale: 1.08; } to { scale: 1; } }
		.cc-centerpiece .cc-centerpiece__frame { animation: cc-centerpiece-frame linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
		.cc-centerpiece .cc-centerpiece__img { animation: cc-centerpiece-img linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
	}
}