/* Contact panel and image viewer. Both are native <dialog> elements opened
   with showModal(), which gives focus trapping, Escape and the inert page
   behind them for free. */

/* ------------------------------------------------------------------
   Contact panel — slides in from the right
   ------------------------------------------------------------------ */

.ec-panel {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(520px, 100vw);
	max-width: none;
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--ec-white);
	color: var(--ec-ink);
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateX(100%);
	transition: transform 0.55s var(--ease-smooth-out);
}

.ec-panel.is-open {
	transform: none;
}

.ec-panel::backdrop {
	background: rgba(20, 20, 20, 0);
	transition: background-color 0.55s var(--ease-smooth-out);
}

.ec-panel.is-open::backdrop {
	background: rgba(20, 20, 20, 0.55);
}

.ec-panel__close {
	position: absolute;
	top: var(--ec-sp-3);
	left: var(--ec-sp-3);
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--ec-ink);
	cursor: pointer;
	transition: transform var(--duration-fast) var(--ease-smooth-out);
}

.ec-panel__close:hover {
	transform: rotate(90deg);
}

.ec-panel__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--ec-sp-7) clamp(1.5rem, 1rem + 3vw, 3.5rem) var(--ec-sp-5);
	text-align: center;
}

.ec-panel__media {
	width: 100%;
	max-width: 300px;
	margin-bottom: var(--ec-sp-4);
	overflow: hidden;
}

.ec-panel__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.ec-panel__title {
	margin-bottom: var(--ec-sp-2);
	font-size: var(--ec-fs-h3);
}

.ec-panel__address {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	font-size: 1.125rem;
	font-style: normal;
	line-height: 1.5;
}

.ec-panel__rule {
	width: 100%;
	margin: var(--ec-sp-5) 0;
}

.ec-panel__ask {
	margin-bottom: var(--ec-sp-3);
	font-size: var(--ec-fs-h3);
	letter-spacing: var(--ec-ls-tight);
	line-height: var(--ec-lh-snug);
}

.ec-panel__social {
	display: flex;
	gap: var(--ec-sp-4);
	margin-top: var(--ec-sp-6);
	font-size: var(--ec-fs-sm);
}

/* ------------------------------------------------------------------
   Image viewer
   ------------------------------------------------------------------ */

.ec-lightbox {
	width: 100vw;
	max-width: none;
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(14, 14, 14, 0.96);
	color: var(--ec-white);
	opacity: 0;
	transition: opacity var(--duration-fast) var(--ease-smooth-out);
}

/* display only when open: setting it unconditionally would show a closed dialog */
.ec-lightbox[open] {
	display: grid;
	place-items: center;
}

.ec-lightbox.is-open {
	opacity: 1;
}

.ec-lightbox::backdrop {
	background: transparent;
}

.ec-lightbox__img {
	max-width: min(92vw, 1600px);
	max-height: 84vh;
	object-fit: contain;
	transition: opacity var(--duration-fast) var(--ease-smooth-out);
}

.ec-lightbox__img.is-loading {
	opacity: 0;
}

.ec-lightbox__btn {
	position: absolute;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	padding: 0;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	color: var(--ec-white);
	cursor: pointer;
	transition: background-color var(--duration-fast) var(--ease-smooth-out),
		color var(--duration-fast) var(--ease-smooth-out);
}

.ec-lightbox__btn:hover {
	background: var(--ec-white);
	color: var(--ec-ink);
}

.ec-lightbox__btn--close {
	top: var(--ec-sp-3);
	right: var(--ec-sp-3);
}

.ec-lightbox__btn--prev,
.ec-lightbox__btn--next {
	top: 50%;
	transform: translateY(-50%);
}

.ec-lightbox__btn--prev {
	left: var(--ec-sp-3);
}

.ec-lightbox__btn--prev svg {
	transform: scaleX(-1);
}

.ec-lightbox__btn--next {
	right: var(--ec-sp-3);
}

.ec-lightbox__count {
	position: absolute;
	bottom: var(--ec-sp-3);
	left: 50%;
	margin: 0;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, 0.7);
	font-size: var(--ec-fs-sm);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
	.ec-lightbox__btn--prev,
	.ec-lightbox__btn--next {
		top: auto;
		bottom: var(--ec-sp-3);
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ec-panel,
	.ec-panel::backdrop,
	.ec-lightbox,
	.ec-lightbox__img {
		transition: none;
	}
}

/* ------------------------------------------------------------------
   Work mega menu — drops under the header on hover or focus (desktop)
   ------------------------------------------------------------------ */

.ec-mega {
	display: none;
}

@media (min-width: 1000px) {
	.ec-mega {
		position: fixed;
		top: var(--ec-header-h);
		left: 0;
		right: 0;
		z-index: 99;
		display: block;
		background: var(--ec-white);
		box-shadow: 0 1px 0 var(--ec-line), 0 24px 48px -32px rgba(20, 20, 20, 0.28);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-10px);
		transition: opacity var(--duration-fast) var(--ease-smooth-out),
			transform var(--duration-fast) var(--ease-smooth-out),
			visibility var(--duration-fast);
	}

	.ec-mega[data-open="true"] {
		opacity: 1;
		visibility: visible;
		transform: none;
	}
}

.ec-mega__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 0.8fr);
	gap: clamp(2rem, 1rem + 3vw, 5rem);
	align-items: start;
	padding-block: var(--ec-sp-5) var(--ec-sp-6);
}

.ec-mega__intro {
	display: grid;
	gap: var(--ec-sp-5);
	max-width: 30ch;
}

.ec-mega__lead {
	display: grid;
	gap: var(--ec-sp-1);
}

.ec-mega__lead-title {
	font-size: var(--ec-fs-h4);
	font-weight: 500;
	letter-spacing: var(--ec-ls-tight);
}

.ec-mega__lead-text {
	color: var(--ec-ink-soft);
	font-size: var(--ec-fs-sm);
	line-height: 1.55;
}

.ec-mega__lead:hover .ec-mega__lead-title {
	color: var(--ec-green-dark);
}

.ec-mega__label {
	margin-bottom: var(--ec-sp-2);
	padding-bottom: var(--ec-sp-2);
	border-bottom: 1px solid var(--ec-line);
	color: var(--ec-ink-faint);
	font-size: var(--ec-fs-sm);
}

.ec-mega__list ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ec-mega__list li {
	margin: 0;
	border-bottom: 1px solid var(--ec-line);
}

.ec-mega__item {
	display: grid;
	gap: 0.15rem;
	padding-block: var(--ec-sp-2);
}

.ec-mega__sector {
	color: var(--ec-ink-faint);
	font-size: var(--ec-fs-xs);
}

.ec-mega__title {
	font-size: 1.375rem;
	letter-spacing: var(--ec-ls-tight);
	transition: color var(--duration-fast) var(--ease-smooth-out);
}

.ec-mega__item:hover .ec-mega__title,
.ec-mega__item:focus-visible .ec-mega__title,
.ec-mega__item.is-active .ec-mega__title {
	color: var(--ec-green-dark);
}

/* The photographs are stacked; the hovered project's cross-fades in. */
.ec-mega__media {
	position: relative;
	aspect-ratio: 3 / 4;
	max-height: 440px;
	overflow: hidden;
	background: var(--ec-bg-alt);
}

.ec-mega__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.4s var(--ease-smooth-out);
}

.ec-mega__media img.is-active {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.ec-mega,
	.ec-mega__media img,
	.ec-mega__title {
		transition: none;
	}
}