/* CTA: Two Doors (CUSTOM-TEMPLATE.md D7). Two equal choices side by side; each half is one big link.
   Variables (restyle from css/screen.css):
   --cc-two-doors-h         door min height (clamp(320px, 36cqw, 520px))
   --cc-two-doors-pad       door padding (clamp(24px, 4cqw, 64px))
   --cc-two-doors-shade     how much of the door color covers a photo (.82; keeps solid-color contrast)
   --cc-two-doors-or-bg     fill of the "or" circle (the section color; Canvas by default)
   --cc-two-doors-title-font, -body-font, -label-font   fonts (Branding)
   Modifiers: --single (one door, full width). Doors: --a, --b, .is-static (no link), .has-img. */
.cc-two-doors {
	--cc-two-doors-h: clamp(320px, 36cqw, 520px);
	--cc-two-doors-pad: clamp(24px, 4cqw, 64px);
	--cc-two-doors-shade: .82;
	--cc-two-doors-or-bg: Canvas;
	--cc-two-doors-title-font: var(--font-titles);
	--cc-two-doors-body-font: var(--font-body);
	--cc-two-doors-label-font: var(--font-small-titles);
	--cc-two-doors-ease: cubic-bezier(.22, 1, .36, 1);
	container-type: inline-size;
	min-width: 0;
	overflow-x: clip;
}
.bg-main .cc-two-doors { --cc-two-doors-or-bg: var(--color-main); }
.bg-sec .cc-two-doors { --cc-two-doors-or-bg: var(--color-sec); }
.bg-third .cc-two-doors { --cc-two-doors-or-bg: var(--color-third); }
.bg-fourth .cc-two-doors { --cc-two-doors-or-bg: var(--color-fourth); }
.bg-black .cc-two-doors, .bg-image .cc-two-doors, .bg-video .cc-two-doors { --cc-two-doors-or-bg: #000; }
.bg-image .cc-two-doors, .bg-video .cc-two-doors { --cc-two-doors-or-ink: #fff; }
.cc-two-doors .cc-two-doors__pair { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; }
.cc-two-doors .cc-two-doors__door {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	min-width: 0;
	min-height: var(--cc-two-doors-h);
	padding: var(--cc-two-doors-pad);
	box-sizing: border-box;
	text-decoration: none;
	color: inherit;
}
.cc-two-doors a.cc-two-doors__door:focus-visible { outline: 3px solid currentColor; outline-offset: -8px; }
.cc-two-doors .cc-two-doors__img { position: absolute; inset: 0; z-index: -2; display: block; width: 100%; height: 100%; object-fit: cover; }
.cc-two-doors .cc-two-doors__door.has-img::after { content: ''; position: absolute; inset: 0; z-index: -1; background: inherit; opacity: var(--cc-two-doors-shade); }
.cc-two-doors .cc-two-doors__body { position: relative; display: block; min-width: 0; }
.cc-two-doors .cc-two-doors__label {
	display: block;
	margin: 0 0 16px;
	font-family: var(--cc-two-doors-label-font);
	font-size: 16px;
	line-height: 1.3;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.cc-two-doors .cc-two-doors__title { display: block; font-family: var(--cc-two-doors-title-font); font-size: clamp(40px, 6.4cqw, 104px); line-height: .95; overflow-wrap: anywhere; }
.cc-two-doors .cc-two-doors__line { display: block; margin-top: 16px; max-width: 34ch; font-family: var(--cc-two-doors-body-font); font-size: 18px; line-height: 1.4; }
.cc-two-doors .cc-two-doors__arrow { display: inline-block; margin-top: 20px; font-size: 32px; line-height: 1; }
.cc-two-doors .cc-two-doors__or {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: -32px 0 0 -32px;
	border-radius: 50%;
	background: var(--cc-two-doors-or-bg);
	color: var(--cc-two-doors-or-ink, currentColor);
	font-family: var(--cc-two-doors-title-font);
	font-size: 20px;
	line-height: 1;
	text-align: center;
}
.cc-two-doors.cc-two-doors--single .cc-two-doors__door { min-height: var(--cc-two-doors-h); }

@container (min-width: 800px) {
	.cc-two-doors .cc-two-doors__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
	.cc-two-doors.cc-two-doors--single .cc-two-doors__pair { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: no-preference) {
	.cc-two-doors .cc-two-doors__img { transition: transform 240ms var(--cc-two-doors-ease); }
	.cc-two-doors .cc-two-doors__arrow { transition: transform 240ms var(--cc-two-doors-ease); }
	.cc-two-doors a.cc-two-doors__door:hover .cc-two-doors__img,
	.cc-two-doors a.cc-two-doors__door:focus-visible .cc-two-doors__img { transform: scale(1.05); }
	.cc-two-doors a.cc-two-doors__door:hover .cc-two-doors__arrow,
	.cc-two-doors a.cc-two-doors__door:focus-visible .cc-two-doors__arrow { transform: translateX(6px); }
	@supports (animation-timeline: view()) {
		@keyframes cc-two-doors-a { from { translate: -24px 0; opacity: 0; } to { translate: 0 0; opacity: 1; } }
		@keyframes cc-two-doors-b { from { translate: 24px 0; opacity: 0; } to { translate: 0 0; opacity: 1; } }
		.cc-two-doors .cc-two-doors__door--a { animation: cc-two-doors-a linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
		.cc-two-doors .cc-two-doors__door--b { animation: cc-two-doors-b linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
	}
}