/* Door Panels (CUSTOM-TEMPLATE.md D7). Tall photo doors; a text sheet slides up on hover or focus.
   Variables (set on .cc-door-panels or a parent, restyle from css/screen.css):
   --cc-door-panels-h       door height at 1000px and up (clamp(420px, 44cqw, 640px))
   --cc-door-panels-line    hairline between doors
   --cc-door-panels-accent  number color (Branding main; currentColor on dark sections)
   --cc-door-panels-title-font, -body-font, -num-font   fonts (Branding)
   --cc-door-panels-ease    slide/zoom easing
   Modifiers: --n1 .. --n6 (door count). Doors: .is-static (no link), --no-img. */
.cc-door-panels {
	--cc-door-panels-h: clamp(420px, 44cqw, 640px);
	--cc-door-panels-line: color-mix(in srgb, currentColor 18%, transparent);
	--cc-door-panels-accent: var(--color-main);
	--cc-door-panels-title-font: var(--font-titles);
	--cc-door-panels-body-font: var(--font-body);
	--cc-door-panels-num-font: var(--font-data-numbers, var(--font-titles));
	--cc-door-panels-ease: cubic-bezier(.22, 1, .36, 1);
	container-type: inline-size;
	min-width: 0;
}
.bg-main .cc-door-panels, .bg-black .cc-door-panels, .bg-image .cc-door-panels, .bg-video .cc-door-panels { --cc-door-panels-accent: currentColor; }
.cc-door-panels :is(a, [tabindex]):focus-visible { outline: 2px solid currentColor; outline-offset: -6px; }
.cc-door-panels .cc-door-panels__door:focus-visible { outline: 3px solid #fff; outline-offset: -6px; box-shadow: inset 0 0 0 6px #000; }
.cc-door-panels [hidden] { display: none !important; }

/* Phones: one column, sheet always visible */
.cc-door-panels .cc-door-panels__list { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.cc-door-panels .cc-door-panels__item { margin: 0; padding: 0; min-width: 0; border-top: 1px solid var(--cc-door-panels-line); }
.cc-door-panels .cc-door-panels__item:first-child { border-top: 0; }
.cc-door-panels .cc-door-panels__door {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	min-height: 300px;
	color: inherit;
	text-decoration: none;
	background: color-mix(in srgb, currentColor 8%, transparent);
}
.cc-door-panels .cc-door-panels__img { position: absolute; inset: 0; z-index: -2; display: block; width: 100%; height: 100%; object-fit: cover; }
.cc-door-panels .cc-door-panels__door:not(.cc-door-panels__door--no-img)::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	z-index: -1;
	height: 96px;
	background: linear-gradient(#000, transparent);
	opacity: .45;
	pointer-events: none;
}
.cc-door-panels .cc-door-panels__num {
	position: absolute;
	top: 16px;
	inset-inline-start: 20px;
	font-family: var(--cc-door-panels-num-font);
	font-size: 18px;
	line-height: 1;
	letter-spacing: .04em;
	color: #fff;
}
.cc-door-panels .cc-door-panels__door--no-img .cc-door-panels__num { color: var(--cc-door-panels-accent); }
.cc-door-panels .cc-door-panels__label { position: relative; padding: 20px 20px 22px; }
.cc-door-panels .cc-door-panels__title {
	margin: 0;
	font-family: var(--cc-door-panels-title-font);
	line-height: 1.05;
	overflow-wrap: anywhere;
	hyphens: auto;
}
.cc-door-panels .cc-door-panels__sheet { display: grid; grid-template-rows: 1fr; }
.cc-door-panels .cc-door-panels__sheet-in { min-height: 0; overflow: hidden; }
.cc-door-panels .cc-door-panels__text { margin: 10px 0 0; font-family: var(--cc-door-panels-body-font); font-size: 16px; line-height: 1.5; }
.cc-door-panels .cc-door-panels__more { display: inline-block; margin-top: 12px; font-size: 16px; font-weight: 600; }
.cc-door-panels .cc-door-panels__arrow { display: inline-block; }

@container (min-width: 600px) {
	.cc-door-panels .cc-door-panels__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cc-door-panels .cc-door-panels__item { border-top: 0; border-inline-start: 1px solid var(--cc-door-panels-line); }
	.cc-door-panels .cc-door-panels__item:nth-child(odd) { border-inline-start: 0; }
	.cc-door-panels .cc-door-panels__item:nth-child(n+3) { border-top: 1px solid var(--cc-door-panels-line); }
	.cc-door-panels .cc-door-panels__door { aspect-ratio: 4 / 5; min-height: 0; }
}
@container (min-width: 1000px) {
	.cc-door-panels .cc-door-panels__list { display: flex; }
	.cc-door-panels .cc-door-panels__item { flex: 1 1 0; border-top: 0 !important; border-inline-start: 1px solid var(--cc-door-panels-line); }
	.cc-door-panels .cc-door-panels__item:first-child { border-inline-start: 0; }
	.cc-door-panels .cc-door-panels__door { aspect-ratio: auto; height: var(--cc-door-panels-h); }
	.cc-door-panels .cc-door-panels__label { padding: 22px 24px 26px; }
	@media (hover: hover) {
		.cc-door-panels .cc-door-panels__door:not(.is-static) .cc-door-panels__sheet { grid-template-rows: 0fr; opacity: 0; }
		.cc-door-panels .cc-door-panels__door:not(.is-static):hover .cc-door-panels__sheet,
		.cc-door-panels .cc-door-panels__door:not(.is-static):focus-visible .cc-door-panels__sheet,
		.cc-door-panels .cc-door-panels__door:not(.is-static):focus-within .cc-door-panels__sheet { grid-template-rows: 1fr; opacity: 1; }
	}
}
@media (prefers-reduced-motion: no-preference) {
	.cc-door-panels .cc-door-panels__img { transition: transform 240ms var(--cc-door-panels-ease); }
	.cc-door-panels .cc-door-panels__sheet { transition: grid-template-rows 240ms var(--cc-door-panels-ease), opacity 240ms var(--cc-door-panels-ease); }
	@container (min-width: 1000px) {
		@media (hover: hover) {
			.cc-door-panels .cc-door-panels__door:not(.is-static):hover .cc-door-panels__img,
			.cc-door-panels .cc-door-panels__door:not(.is-static):focus-within .cc-door-panels__img { transform: scale(1.04); }
		}
	}
	@supports (animation-timeline: view()) {
		@keyframes cc-door-panels-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
		.cc-door-panels .cc-door-panels__item {
			animation: cc-door-panels-in linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 55%;
		}
		.cc-door-panels .cc-door-panels__item:nth-child(2) { animation-range: entry 4% entry 59%; }
		.cc-door-panels .cc-door-panels__item:nth-child(3) { animation-range: entry 8% entry 63%; }
		.cc-door-panels .cc-door-panels__item:nth-child(4) { animation-range: entry 12% entry 67%; }
		.cc-door-panels .cc-door-panels__item:nth-child(5) { animation-range: entry 16% entry 71%; }
		.cc-door-panels .cc-door-panels__item:nth-child(6) { animation-range: entry 20% entry 75%; }
	}
}