/* ==========================================================================
   Spark Custom Lightbox — spark-cst-lightbox.css
   Layout:
     ┌────────────────────────────────────────────┐
     │  FEATURED IMAGE (full width, top)   [×]    │
     ├────────────────────────────────────────────┤
     │  [img][img][img][img]  gallery strip        │
     ├──────────────┬─────────────────────────────┤
     │ PROJECT TITLE│ Meta + Challenge/Solution/   │
     │  (left col)  │ Result + Description         │
     └──────────────┴─────────────────────────────┘
   ========================================================================== */

:root {
	--slb-red:      #c1272d;
	--slb-red-dk:   #a01e23;
	--slb-text:     #1a1a1a;
	--slb-muted:    #575757;
	--slb-bg:       #ffffff;
	--slb-alt:      #f5f5f5;
	--slb-border:   #e0e0e0;
	--slb-dark:     #111111;
	--slb-strip:    #1d1d1d;
	--slb-radius:   4px;
	--slb-ease:     0.22s ease;
}

body.spark-lightbox-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   Overlay + backdrop
   -------------------------------------------------------------------------- */

.spark-lightbox-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 28px 16px 40px;
	box-sizing: border-box;
	animation: slbFade var(--slb-ease) both;
}

.spark-lightbox-overlay[hidden] { display: none !important; }

.spark-lightbox-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(6, 6, 6, 0.84);
	z-index: 0;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   Modal
   -------------------------------------------------------------------------- */

.spark-lightbox-wrap {
	position: relative;
	width: 100%;
	max-width: 1080px;
	z-index: 1;
	animation: slbUp var(--slb-ease) both;
}

.spark-lightbox-modal {
	background: var(--slb-bg);
	border-radius: var(--slb-radius);
	box-shadow: 0 32px 90px rgba(0, 0, 0, 0.50);
	overflow: hidden;
	font-family: "Votorantim Typeface", sans-serif;
}

/* Close button — top-right of the modal */
.spark-lightbox-close {
	position: absolute;
	top: 12px;
	right: 14px;
	z-index: 50;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.60);
	color: #fff;
	border: 1.5px solid rgba(255, 255, 255, 0.28);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background var(--slb-ease), border-color var(--slb-ease);
}

.spark-lightbox-close:hover,
.spark-lightbox-close:focus-visible {
	background: var(--slb-red);
	border-color: var(--slb-red);
	outline: none;
}

/* ==========================================================================
   SECTION 1 — Featured image stage (full width)
   ========================================================================== */

.slb-stage {
	position: relative;
	width: 100%;
	height: 420px;
	background: var(--slb-dark);
	overflow: hidden;
}

.slb-stage-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: opacity 0.18s ease;
}

/* Prev / Next arrows */
.slb-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.52);
	color: #fff;
	border: none;
	font-size: 20px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background var(--slb-ease);
}

.slb-arrow:hover,
.slb-arrow:focus-visible  { background: var(--slb-red); outline: none; }
.slb-arrow:disabled       { opacity: 0.22; cursor: default; }
.slb-arrow-prev           { left: 14px; }
.slb-arrow-next           { right: 14px; }

/* Image counter */
.slb-counter {
	position: absolute;
	bottom: 12px;
	right: 16px;
	z-index: 5;
	font-size: 11px;
	color: #fff;
	background: rgba(0, 0, 0, 0.55);
	padding: 3px 10px;
	border-radius: 30px;
	pointer-events: none;
}

/* ==========================================================================
   SECTION 2 — Gallery thumbnail strip
   ========================================================================== */

.slb-strip {
	display: flex;
	gap: 4px;
	padding: 8px 12px;
	background: var(--slb-strip);
	overflow-x: auto;
	scrollbar-width: thin;
	scrollbar-color: #4a4a4a var(--slb-strip);
}

.slb-strip::-webkit-scrollbar       { height: 3px; }
.slb-strip::-webkit-scrollbar-track { background: var(--slb-strip); }
.slb-strip::-webkit-scrollbar-thumb { background: #555; border-radius: 2px; }

.slb-thumb {
	flex: 0 0 72px;
	height: 52px;
	overflow: hidden;
	border: 2px solid transparent;
	border-radius: 2px;
	cursor: pointer;
	padding: 0;
	background: #333;
	transition: border-color 0.14s;
}

.slb-thumb.is-active,
.slb-thumb:hover,
.slb-thumb:focus-visible {
	border-color: var(--slb-red);
	outline: none;
}

.slb-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ==========================================================================
   SECTION 3 — Two-column content
   ========================================================================== */

.slb-content {
	display: grid;
	grid-template-columns: 36% 64%;
	min-height: 260px;
}

/* ── Left column: project title only ── */

.slb-title-col {
	padding: 36px 28px 36px 36px;
	border-right: 1px solid var(--slb-border);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.slb-project-title {
	font-size: clamp(20px, 2.2vw, 32px);
	font-weight: 800;
	color: var(--slb-text);
	line-height: 1.2;
	margin: 0;
	padding-left: 14px;
	border-left: 4px solid var(--slb-red);
	outline: none;
}

/* ── Right column: all details (scrollable) ── */

.slb-details-col {
	padding: 30px 32px 32px 30px;
	overflow-y: auto;
	max-height: 520px;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.slb-details-col::-webkit-scrollbar       { width: 4px; }
.slb-details-col::-webkit-scrollbar-track { background: #f0f0f0; }
.slb-details-col::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; }

/* Short bio */
.slb-bio {
	font-size: 14px;
	line-height: 1.72;
	color: var(--slb-muted);
}

.slb-bio p:first-child { margin-top: 0; }
.slb-bio p:last-child  { margin-bottom: 0; }

/* Meta rows: Client / Location / Scope / Timeline */
.slb-meta {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.slb-meta-item {
	padding: 10px 0;
	background: transparent;
	border-bottom: 1px solid var(--slb-border);
}

.slb-meta-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.slb-meta-lbl {
	display: block;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--slb-red);
	margin-bottom: 3px;
}

.slb-meta-val {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--slb-text);
}

/* Content sections (Challenge / Solution / Result / Description) */
.slb-section {
	line-height: 1.75;
}

.slb-sect-title {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--slb-text);
	margin: 0;
	padding: 0;
	border: none;
	display: inline;
}

.slb-sect-title::after {
	content: ': ';
	font-weight: 400;
	letter-spacing: 0;
}

.slb-sect-body {
	font-size: 14px;
	line-height: inherit;
	color: #333;
	display: inline;
}

.slb-sect-body p { display: inline; margin: 0; }

/* ==========================================================================
   Loading / Error states
   ========================================================================== */

.slb-state {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 380px;
	font-size: 15px;
	color: var(--slb-muted);
	padding: 40px;
}

.slb-state--loading::before {
	content: '';
	display: inline-block;
	width: 24px;
	height: 24px;
	border: 3px solid #e0e0e0;
	border-top-color: var(--slb-red);
	border-radius: 50%;
	animation: slbSpin 0.65s linear infinite;
	margin-right: 12px;
	flex-shrink: 0;
}

.slb-state--error { color: var(--slb-red); }

/* ==========================================================================
   Clickable card (JetEngine listing item)
   ========================================================================== */

.jet-listing-grid__item[data-spark-lightbox] { cursor: pointer; }

/* ==========================================================================
   Optional trigger button (shortcode with label=)
   ========================================================================== */

.spark-lightbox-trigger {
	display: inline-flex;
	align-items: center;
	padding: 10px 22px;
	background: var(--slb-red);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border: none;
	border-radius: var(--slb-radius);
	cursor: pointer;
	transition: background var(--slb-ease);
}

.spark-lightbox-trigger:hover,
.spark-lightbox-trigger:focus-visible {
	background: var(--slb-red-dk);
	outline: none;
}

/* ==========================================================================
   Keyframes
   ========================================================================== */

@keyframes slbFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes slbUp   { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes slbSpin { to   { transform: rotate(360deg); } }

/* ==========================================================================
   Responsive — Tablet (≤ 860px)
   ========================================================================== */

@media (max-width: 860px) {
	.spark-lightbox-overlay {
		padding: 16px 10px 30px;
	}

	.slb-stage {
		height: 300px;
	}

	.slb-content {
		grid-template-columns: 1fr;
	}

	.slb-title-col {
		padding: 24px 22px 16px;
		border-right: none;
		border-bottom: 1px solid var(--slb-border);
	}

	.slb-details-col {
		padding: 22px 22px 28px;
		max-height: none;
		overflow-y: visible;
	}

}

/* ==========================================================================
   Responsive — Mobile (≤ 580px)
   ========================================================================== */

@media (max-width: 580px) {
	.spark-lightbox-overlay {
		padding: 0;
	}

	.spark-lightbox-wrap  { max-width: 100%; }
	.spark-lightbox-modal { border-radius: 0; min-height: 100dvh; }

	.spark-lightbox-close {
		top: 10px;
		right: 10px;
	}

	.slb-stage {
		height: 230px;
	}

	.slb-arrow {
		width: 36px;
		height: 36px;
		font-size: 16px;
	}

	.slb-thumb {
		flex: 0 0 60px;
		height: 44px;
	}

	.slb-title-col {
		padding: 18px 16px 14px;
	}

	.slb-project-title {
		font-size: 22px;
	}

	.slb-details-col {
		padding: 16px 16px 24px;
	}
}