/* tbl-lightbox — shared video lightbox (native <dialog>). Consumed by the
   case-study interior brand card and the case-studies index. */

.tbl-lightbox {
	max-width: none;
	max-height: none;
	width: min(90vw, 1280px);
	margin: auto;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--White, #fff);
	overflow: visible;
}

.tbl-lightbox::backdrop {
	background: rgba(0, 0, 0, 0.8);
}

@keyframes tbl-lightbox-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.tbl-lightbox[open] {
	animation: tbl-lightbox-fade 200ms ease-out both;
}

.tbl-lightbox__stage {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
}

.tbl-lightbox__stage iframe,
.tbl-lightbox__stage video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* lenis.css turns off pointer events on every iframe while smooth scroll is on. */
.lenis.lenis-smooth .tbl-lightbox__stage iframe {
	pointer-events: auto;
}

.tbl-lightbox__close {
	position: absolute;
	right: 0;
	bottom: 100%;
	margin-bottom: 8px;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	appearance: none;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: var(--White, #fff);
	cursor: pointer;
	transition: var(--button-easing);
}

.tbl-lightbox__close:hover,
.tbl-lightbox__close:focus-visible {
	background: rgba(255, 255, 255, 0.28);
}

.tbl-lightbox__close:focus-visible {
	outline: 2px solid var(--White, #fff);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.tbl-lightbox[open] { animation: none; }
	.tbl-lightbox__close { transition: none; }
}

/* ---------------------------------------------------------------------------
   Panel mode (homepage-updates ticket 06) — the Start a Project dialog rendered
   by footer.php (Figma 11531:36916): a 454-wide white r10 card, a 35px black
   close disc inside it at 15/17, and the HubSpot embed. The dialog itself is a
   transparent viewport-sized layer (native modal = top layer + focus trap), so
   the scrim, the morph shell and the card are ordinary children the JS can
   measure and animate with WAAPI. --tb-morph-duration is read by the JS. */

.tbl-lightbox--panel {
	--tb-morph-duration: 600;
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--Black, #000);
	overflow: hidden;                /* reset.css's `clip scroll` would scroll the layer */
	overscroll-behavior: contain;
}

.tbl-lightbox--panel::backdrop {
	background: transparent;
}

.tbl-lightbox--panel[open] {
	animation: none;
}

/* Scroll lock where Lenis is absent (reduced motion / editor). */
html.tbl-lightbox-open {
	overflow: hidden;
}

.tbl-lightbox__scrim {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.8);
	opacity: 0;
}

.tbl-lightbox--panel.is-open .tbl-lightbox__scrim {
	opacity: 1;
}

/* The morph shell: the pill at rest, the card at the end. Geometry is written
   by the JS each open/close; hidden otherwise. */
.tbl-lightbox__shell {
	position: absolute;
	display: none;
	border-radius: 100px;
	background: rgba(0, 0, 0, 0.4);
	-webkit-backdrop-filter: blur(12.5px);
	backdrop-filter: blur(12.5px);
	overflow: hidden;
	pointer-events: none;
}

.tbl-lightbox__shell.is-on {
	display: block;
}

/* Card: auto height from the form, capped at the viewport less 16px each side,
   scrolling INSIDE the panel past that so the close disc stays put. */
.tbl-lightbox__card {
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	display: flex;
	flex-direction: column;
	width: min(454px, 100vw - 32px);
	max-height: calc(100vh - 32px);
	border-radius: 10px;
	background: var(--White, #fff);
	color: var(--Black, #000);
	opacity: 0;
}

.tbl-lightbox--panel.is-open .tbl-lightbox__card {
	opacity: 1;
}

/* One compositing layer for the card from the first frame of the morph to the
   close: Safari re-rasterises a layer it drops, and the text shifted half a
   pixel the moment the fade-in ended (Pastel #220). */
.tbl-lightbox--panel[open] .tbl-lightbox__card {
	will-change: opacity;
}

.tbl-lightbox__panel {
	min-height: 0;
	overflow: auto;
	overscroll-behavior: contain;
	padding: 67px 29px 40px 46px;
	border-radius: 10px;
}

.tbl-lightbox__title {
	margin: 0 0 24px;
	padding: 0;
	font-family: var(--header-font);
	font-weight: var(--header-font-weight);
	font-size: 32px;
	line-height: 1.1;
	letter-spacing: -0.32px;
	color: inherit;
}

/* Pastel #281: title to first field 44px -> 22px (the field carries 20). */
#lets-talk .tbl-lightbox__title {
	margin-bottom: 2px;
}

.tbl-lightbox--panel .tbl-lightbox__close {
	top: 15px;
	right: 17px;
	bottom: auto;
	margin: 0;
	width: 35px;
	height: 35px;
	background: var(--Neutral-100, #000);
	color: var(--White, #fff);
	z-index: 1;
}

.tbl-lightbox--panel .tbl-lightbox__close svg {
	width: 16px;
	height: 16px;
}

.tbl-lightbox--panel .tbl-lightbox__close:hover,
.tbl-lightbox--panel .tbl-lightbox__close:focus-visible {
	background: var(--Primary-90, #200147);
}

.tbl-lightbox--panel .tbl-lightbox__close:focus-visible {
	outline: 2px solid var(--Primary-Alt-50-Base, #af85ec);
	outline-offset: 2px;
}

@media (max-width: 599.98px) {
	.tbl-lightbox__panel {
		padding: 64px 20px 28px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tbl-lightbox--panel {
		--tb-morph-duration: 0;
	}
}