/* CTA: Invitation Card (CUSTOM-TEMPLATE.md D7). The closing invitation as a card with a tear-off stub.
   Variables (restyle from css/screen.css):
   --cc-invite-card-radius   card corners (16px; themes set 0)
   --cc-invite-card-notch    perforation notch radius (14px)
   --cc-invite-card-stub-w   stub width at 800px and up (clamp(240px, 30cqw, 320px))
   --cc-invite-card-pad      card padding (clamp(28px, 5cqw, 64px))
   --cc-invite-card-perf     dashed line color
   --cc-invite-card-ink      override text color when the Card Color is a mid tone
   --cc-invite-card-title-font, -body-font, -label-font   fonts (Branding)
   Modifiers: --tilt (slight rotation at 800px and up), --no-stub. The section background shows through the notches. */
.cc-invite-card {
	--cc-invite-card-radius: 16px;
	--cc-invite-card-notch: 14px;
	--cc-invite-card-stub-w: clamp(240px, 30cqw, 320px);
	--cc-invite-card-pad: clamp(28px, 5cqw, 64px);
	--cc-invite-card-perf: color-mix(in srgb, currentColor 35%, transparent);
	--cc-invite-card-title-font: var(--font-titles);
	--cc-invite-card-body-font: var(--font-body);
	--cc-invite-card-label-font: var(--font-small-titles);
	--cc-invite-card-rest: 0deg;
	container-type: inline-size;
	min-width: 0;
}
.cc-invite-card :is(a, [tabindex]):focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.cc-invite-card .cc-invite-card__card {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	max-width: 1040px;
	margin-inline: auto;
	color: var(--cc-invite-card-ink, inherit);
}
.cc-invite-card .cc-invite-card__main,
.cc-invite-card .cc-invite-card__stub { padding: var(--cc-invite-card-pad); min-width: 0; }
.cc-invite-card .cc-invite-card__main {
	border-radius: var(--cc-invite-card-radius) var(--cc-invite-card-radius) 0 0;
	-webkit-mask: radial-gradient(circle at 0 100%, #0000 var(--cc-invite-card-notch), #000 calc(var(--cc-invite-card-notch) + .5px)), radial-gradient(circle at 100% 100%, #0000 var(--cc-invite-card-notch), #000 calc(var(--cc-invite-card-notch) + .5px));
	-webkit-mask-composite: source-in;
	mask: radial-gradient(circle at 0 100%, #0000 var(--cc-invite-card-notch), #000 calc(var(--cc-invite-card-notch) + .5px)), radial-gradient(circle at 100% 100%, #0000 var(--cc-invite-card-notch), #000 calc(var(--cc-invite-card-notch) + .5px));
	mask-composite: intersect;
}
.cc-invite-card .cc-invite-card__stub {
	border-radius: 0 0 var(--cc-invite-card-radius) var(--cc-invite-card-radius);
	-webkit-mask: radial-gradient(circle at 0 0, #0000 var(--cc-invite-card-notch), #000 calc(var(--cc-invite-card-notch) + .5px)), radial-gradient(circle at 100% 0, #0000 var(--cc-invite-card-notch), #000 calc(var(--cc-invite-card-notch) + .5px));
	-webkit-mask-composite: source-in;
	mask: radial-gradient(circle at 0 0, #0000 var(--cc-invite-card-notch), #000 calc(var(--cc-invite-card-notch) + .5px)), radial-gradient(circle at 100% 0, #0000 var(--cc-invite-card-notch), #000 calc(var(--cc-invite-card-notch) + .5px));
	mask-composite: intersect;
}
.cc-invite-card.cc-invite-card--no-stub .cc-invite-card__main { border-radius: var(--cc-invite-card-radius); -webkit-mask: none; mask: none; }
.cc-invite-card .cc-invite-card__perf {
	height: 0;
	margin-inline: var(--cc-invite-card-notch);
	border-top: 2px dashed var(--cc-invite-card-perf);
	position: relative;
	z-index: 1;
}
.cc-invite-card .cc-invite-card__main :is(.ct2-head, .ct2-buttons) { margin-inline: 0; }
.cc-invite-card .cc-invite-card__main .ct2-buttons { margin-top: 28px; }
.cc-invite-card .cc-invite-card__stub-title {
	margin: 0 0 16px;
	font-family: var(--cc-invite-card-label-font);
	font-size: 16px;
	line-height: 1.3;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.cc-invite-card .cc-invite-card__details { margin: 0; }
.cc-invite-card .cc-invite-card__detail { margin: 0 0 16px; }
.cc-invite-card .cc-invite-card__detail:last-child { margin-bottom: 0; }
.cc-invite-card .cc-invite-card__detail dt { margin: 0 0 2px; font-family: var(--cc-invite-card-body-font); font-size: 16px; line-height: 1.3; opacity: .78; }
.cc-invite-card .cc-invite-card__detail dd { margin: 0; font-family: var(--cc-invite-card-title-font); font-size: clamp(20px, 2cqw + 10px, 26px); line-height: 1.2; overflow-wrap: anywhere; }
.cc-invite-card .cc-invite-card__detail dd a { color: inherit; text-decoration: underline; text-underline-offset: .18em; }

@container (min-width: 800px) {
	.cc-invite-card .cc-invite-card__card { grid-template-columns: minmax(0, 1fr) 0 var(--cc-invite-card-stub-w); }
	.cc-invite-card.cc-invite-card--no-stub .cc-invite-card__card { grid-template-columns: minmax(0, 1fr); }
	.cc-invite-card .cc-invite-card__main {
		border-radius: var(--cc-invite-card-radius) 0 0 var(--cc-invite-card-radius);
		-webkit-mask: radial-gradient(circle at 100% 0, #0000 var(--cc-invite-card-notch), #000 calc(var(--cc-invite-card-notch) + .5px)), radial-gradient(circle at 100% 100%, #0000 var(--cc-invite-card-notch), #000 calc(var(--cc-invite-card-notch) + .5px));
		-webkit-mask-composite: source-in;
		mask: radial-gradient(circle at 100% 0, #0000 var(--cc-invite-card-notch), #000 calc(var(--cc-invite-card-notch) + .5px)), radial-gradient(circle at 100% 100%, #0000 var(--cc-invite-card-notch), #000 calc(var(--cc-invite-card-notch) + .5px));
		mask-composite: intersect;
	}
	.cc-invite-card .cc-invite-card__stub {
		border-radius: 0 var(--cc-invite-card-radius) var(--cc-invite-card-radius) 0;
		-webkit-mask: radial-gradient(circle at 0 0, #0000 var(--cc-invite-card-notch), #000 calc(var(--cc-invite-card-notch) + .5px)), radial-gradient(circle at 0 100%, #0000 var(--cc-invite-card-notch), #000 calc(var(--cc-invite-card-notch) + .5px));
		-webkit-mask-composite: source-in;
		mask: radial-gradient(circle at 0 0, #0000 var(--cc-invite-card-notch), #000 calc(var(--cc-invite-card-notch) + .5px)), radial-gradient(circle at 0 100%, #0000 var(--cc-invite-card-notch), #000 calc(var(--cc-invite-card-notch) + .5px));
		mask-composite: intersect;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.cc-invite-card.cc-invite-card--no-stub .cc-invite-card__main { border-radius: var(--cc-invite-card-radius); }
	.cc-invite-card .cc-invite-card__perf { height: auto; width: 0; margin: var(--cc-invite-card-notch) 0; border-top: 0; border-inline-start: 2px dashed var(--cc-invite-card-perf); }
	.cc-invite-card.cc-invite-card--tilt .cc-invite-card__card { rotate: -1.5deg; }
}
@media (prefers-reduced-motion: no-preference) {
	.cc-invite-card .cc-invite-card__card { transition: rotate 300ms cubic-bezier(.22, 1, .36, 1); }
	.cc-invite-card.cc-invite-card--tilt .cc-invite-card__card:hover,
	.cc-invite-card.cc-invite-card--tilt .cc-invite-card__card:focus-within { rotate: 0deg; }
	@supports (animation-timeline: view()) {
		@keyframes cc-invite-card-in { from { translate: 0 32px; rotate: -3deg; } to { translate: 0 0; rotate: var(--cc-invite-card-rest); } }
		.cc-invite-card { animation: cc-invite-card-in linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
	}
}