/*
 * InSight project lightbox.
 *
 * !important is used deliberately and heavily. The lightbox lands on client
 * sites whose themes and Elementor kits style every <button> and <h2> with
 * selectors more specific than a single class, so without it the site's own
 * button colours, padding and hover effects appear on the close and arrow
 * buttons.
 */

/* ==================================================
   ELEMENTOR LOOP CARD
   ================================================== */

/*
 * Scoped with :has() to cards that actually contain a lightbox trigger. This
 * file loads on every page, and "project-card" is a common class name — a
 * theme or portfolio widget using it elsewhere must not be repositioned.
 */
.project-card:has(.ls-project-lightbox-trigger) {
	position: relative;
}

/* Let the invisible trigger cover the whole card, not just the shortcode widget. */
.project-card .elementor-widget-shortcode:has(.ls-project-lightbox-trigger),
.project-card .elementor-widget-shortcode:has(.ls-project-lightbox-trigger) > .elementor-widget-container,
.project-card .elementor-shortcode:has(.ls-project-lightbox-trigger) {
	position: static !important;
}

/*
 * Browsers too old for :has() (Safari before 15.4, Firefox before 121) throw
 * away both rules above — but still apply the "cover the card" rule below, so
 * the trigger would be sized against the shortcode widget (zero height: cards
 * stop opening) or against the whole page (it blocks every link). Those
 * browsers get the unscoped rules instead, which is how 0.9.0 behaved.
 */
@supports not selector(:has(*)) {
	.project-card {
		position: relative;
	}

	.project-card .elementor-widget-shortcode,
	.project-card .elementor-widget-shortcode > .elementor-widget-container,
	.project-card .elementor-shortcode {
		position: static !important;
	}
}

/* Every trigger is invisible, wherever it is placed. */
button.ls-project-lightbox-trigger,
button.ls-project-lightbox-trigger:hover,
button.ls-project-lightbox-trigger:focus,
button.ls-project-lightbox-trigger:active {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	color: transparent !important;
	transform: none !important;
	cursor: pointer;
}

/* Inside a card, it covers the card. */
.project-card button.ls-project-lightbox-trigger {
	position: absolute !important;
	inset: 0 !important;
	z-index: 20 !important;
	width: 100% !important;
	height: 100% !important;
}

button.ls-project-lightbox-trigger::before,
button.ls-project-lightbox-trigger::after {
	display: none !important;
	content: none !important;
}

button.ls-project-lightbox-trigger:focus-visible {
	outline: 2px solid #fff !important;
	outline-offset: -5px !important;
}

/* In the Elementor editor, let clicks reach the card so it can be edited. */
.elementor-editor-active button.ls-project-lightbox-trigger {
	pointer-events: none !important;
}

/* ==================================================
   LIGHTBOX
   ================================================== */

html.ls-project-lightbox-open,
body.ls-project-lightbox-open {
	overflow: hidden !important;
}

/* [hidden] has to win over the display rules below. (The arrow buttons need
   their own, stronger rule — see "A one-photo project" further down.) */
.ls-project-lightbox[hidden],
.ls-project-lightbox [hidden] {
	display: none !important;
}

.ls-project-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: grid;
	place-items: center;
	padding: 24px;
	background: rgba(0, 0, 0, 0.88);
	-webkit-tap-highlight-color: transparent;
}

.ls-project-lightbox-dialog {
	position: relative;
	width: min(1100px, 100%);
	/* vh on a phone is the screen with the address bar HIDDEN, so while the bar
	   shows, a vh-sized dialog is taller than what is visible and its top — the
	   close button — is cut off. dvh is what is actually visible; the vh line
	   stays as the fallback for browsers without dvh. Same for the photo below,
	   and the script's size estimate (innerHeight) assumes the dvh figure. */
	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px);
	overflow-y: auto;
	background: #111;
	color: #fff;
	border-radius: 12px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
	text-align: left;
}

.ls-project-lightbox-dialog:focus {
	outline: none;
}

/* ==================================================
   IMAGE AREA
   ================================================== */

.ls-project-lightbox-stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 300px;
	background: #080808;
	touch-action: pan-y pinch-zoom; /* horizontal swipes are ours; scrolling and pinch-zoom stay the browser's */
}

.ls-project-lightbox-image {
	display: block;
	max-width: 100%;
	width: auto;
	height: auto;
	max-height: 70vh;
	max-height: 70dvh;
	object-fit: contain;
	transition: opacity 0.2s ease;
}

/* While the next photo downloads, dim the old one so it is never shown
   against the new photo's number. */
.ls-project-lightbox-stage.is-loading .ls-project-lightbox-image {
	opacity: 0.25;
}

.ls-project-lightbox-stage.is-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 36px;
	height: 36px;
	margin: -18px 0 0 -18px;
	border: 3px solid rgba(255, 255, 255, 0.25);
	border-top-color: #fff;
	border-radius: 50%;
	animation: ls-project-lightbox-spin 0.8s linear infinite;
}

@keyframes ls-project-lightbox-spin {
	to { transform: rotate(360deg); }
}

/* ==================================================
   BUTTONS — close, previous, next
   ================================================== */

.ls-project-lightbox button.ls-project-lightbox-close,
.ls-project-lightbox button.ls-project-lightbox-prev,
.ls-project-lightbox button.ls-project-lightbox-next {
	position: absolute !important;
	z-index: 10 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: rgba(0, 0, 0, 0.55) !important;
	background-image: none !important;
	box-shadow: none !important;
	color: #fff !important;
	font-family: Arial, Helvetica, sans-serif !important;
	font-weight: 300 !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-decoration: none !important;
	text-shadow: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	transform: none !important;
	transition: background-color 0.15s ease !important;
	cursor: pointer !important;
}

.ls-project-lightbox button.ls-project-lightbox-close:hover,
.ls-project-lightbox button.ls-project-lightbox-close:focus,
.ls-project-lightbox button.ls-project-lightbox-close:active,
.ls-project-lightbox button.ls-project-lightbox-prev:hover,
.ls-project-lightbox button.ls-project-lightbox-prev:focus,
.ls-project-lightbox button.ls-project-lightbox-prev:active,
.ls-project-lightbox button.ls-project-lightbox-next:hover,
.ls-project-lightbox button.ls-project-lightbox-next:focus,
.ls-project-lightbox button.ls-project-lightbox-next:active {
	transform: none !important; /* themes scale or lift buttons on hover */
	background: rgba(0, 0, 0, 0.8) !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: #fff !important;
}

.ls-project-lightbox button.ls-project-lightbox-close:focus-visible,
.ls-project-lightbox button.ls-project-lightbox-prev:focus-visible,
.ls-project-lightbox button.ls-project-lightbox-next:focus-visible {
	outline: 2px solid #fff !important;
	outline-offset: 2px !important;
}

.ls-project-lightbox button.ls-project-lightbox-close::before,
.ls-project-lightbox button.ls-project-lightbox-close::after,
.ls-project-lightbox button.ls-project-lightbox-prev::before,
.ls-project-lightbox button.ls-project-lightbox-prev::after,
.ls-project-lightbox button.ls-project-lightbox-next::before,
.ls-project-lightbox button.ls-project-lightbox-next::after {
	display: none !important;
	content: none !important;
}

.ls-project-lightbox button.ls-project-lightbox-close {
	top: 14px !important;
	right: 14px !important;
	width: 42px !important;
	height: 42px !important;
	border-radius: 50% !important;
	font-size: 30px !important;
}

.ls-project-lightbox button.ls-project-lightbox-prev,
.ls-project-lightbox button.ls-project-lightbox-next {
	top: 50% !important;
	margin-top: -32px !important; /* not transform — themes animate transform on hover */
	width: 48px !important;
	height: 64px !important;
	border-radius: 6px !important;
	font-size: 42px !important;
}

.ls-project-lightbox button.ls-project-lightbox-prev {
	left: 14px !important;
}

.ls-project-lightbox button.ls-project-lightbox-next {
	right: 14px !important;
}

/* A one-photo project hides its arrows. This must out-rank the display:flex
   !important above, so it repeats the full selector plus [hidden]. */
.ls-project-lightbox button.ls-project-lightbox-prev[hidden],
.ls-project-lightbox button.ls-project-lightbox-next[hidden] {
	display: none !important;
}

/* ==================================================
   PROJECT INFORMATION
   ================================================== */

.ls-project-lightbox-info {
	padding: 24px 28px 28px;
}

.ls-project-lightbox-heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 10px;
}

.ls-project-lightbox h2.ls-project-lightbox-title {
	margin: 0 !important;
	padding: 0 !important;
	color: #fff !important;
	font-size: 24px !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.ls-project-lightbox-location {
	margin: -4px 0 12px;
	opacity: 0.65;
	font-size: 15px;
}

.ls-project-lightbox-count {
	flex: 0 0 auto;
	opacity: 0.6;
	font-size: 14px;
}

.ls-project-lightbox-description {
	max-width: 800px;
	opacity: 0.82;
	font-size: 16px;
	line-height: 1.6;
	color: #fff !important;
}

/* Themes often colour <p> directly (dark grey), which would put dark text on
   the dark dialog. Everything in the description takes the white above. */
.ls-project-lightbox-description * {
	color: inherit !important;
}

.ls-project-lightbox-description > :first-child {
	margin-top: 0;
}

.ls-project-lightbox-description > :last-child {
	margin-bottom: 0;
}

.ls-project-lightbox-description a {
	text-decoration: underline;
}

/* ==================================================
   MOBILE
   ================================================== */

@media (max-width: 767px) {
	.ls-project-lightbox {
		padding: 12px;
	}

	.ls-project-lightbox-dialog {
		max-height: calc(100vh - 24px);
		max-height: calc(100dvh - 24px);
	}

	.ls-project-lightbox-stage {
		min-height: 220px;
	}

	.ls-project-lightbox-image {
		max-height: 62vh;
		max-height: 62dvh;
	}

	.ls-project-lightbox-info {
		padding: 20px;
	}

	.ls-project-lightbox h2.ls-project-lightbox-title {
		font-size: 21px !important;
	}

	.ls-project-lightbox button.ls-project-lightbox-prev,
	.ls-project-lightbox button.ls-project-lightbox-next {
		width: 42px !important;
		height: 54px !important;
		margin-top: -27px !important;
		font-size: 34px !important;
	}

	.ls-project-lightbox button.ls-project-lightbox-prev {
		left: 8px !important;
	}

	.ls-project-lightbox button.ls-project-lightbox-next {
		right: 8px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ls-project-lightbox-image {
		transition: none;
	}
}