/*
 * Inspiration lightbox — Figma 1976:4309 (1440x800 slide).
 *
 * Lives in its own .css file rather than inline in PHP: a PHP file carrying a
 * script/style blob is a malware signature, and this host's WAF rejected the
 * plugin upload because of it.
 *
 * Geometry from the node JSON:
 *   caption   left 64, bottom 64
 *   category  Jost 36 / 43.2  ls -0.72  #F7F7F7
 *   title     Jost 50 / 60    ls -1     #FFFFFF
 *   arrows    60x66 hit area, inset 64 each side, vertically centred (y 367..433 of 800)
 *   close     50x50 circle, white @ 40% opacity, inset 55 top/right, cross 20x20
 *   scrim     linear-gradient 180deg, transparent 42.4% -> #000 100%
 * Insets clamp down on narrow viewports; the design only specifies 1440.
 */

.insp-lb {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	--insp-inset: clamp(20px, 4.44vw, 64px);
}

.insp-lb[hidden] { display: none; }

.insp-lb__stage { position: absolute; inset: 0; overflow: hidden; }

.insp-lb__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.insp-lb__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(0,0,0,0) 42.4%, rgba(0,0,0,1) 100%);
}

.insp-lb__caption {
	position: absolute;
	left: var(--insp-inset);
	right: var(--insp-inset);
	bottom: var(--insp-inset);
	z-index: 2;
	pointer-events: none;
}

.insp-lb__cat {
	margin: 0 0 16px;
	font-family: Jost, sans-serif;
	font-weight: 400;
	color: #F7F7F7;
	font-size: clamp(22px, 2.5vw, 36px);
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.insp-lb__title {
	margin: 0;
	font-family: Jost, sans-serif;
	font-weight: 400;
	color: #fff;
	font-size: clamp(26px, 3.472vw, 50px);
	line-height: 1.2;
	letter-spacing: -0.02em;
	max-width: 22ch;
}

.insp-lb__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 60px;
	height: 66px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: #fff;
	transition: color 250ms ease, opacity 250ms ease;
}

.insp-lb__nav svg { width: 16.4319px; height: 34px; display: block; }
.insp-lb__prev { left: var(--insp-inset); }
.insp-lb__prev svg { transform: scaleX(-1); }
.insp-lb__next { right: var(--insp-inset); }
.insp-lb__nav:hover { color: #D4AF37; }
.insp-lb__nav[hidden] { display: none; }

.insp-lb__close {
	position: absolute;
	top: 55px;
	right: 55px;
	z-index: 3;
	width: 50px;
	height: 50px;
	border-radius: 25px;
	border: 0;
	cursor: pointer;
	background: rgba(255,255,255,0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	transition: background 250ms ease;
}

.insp-lb__close svg { width: 20px; height: 20px; display: block; }
.insp-lb__close:hover { background: rgba(255,255,255,0.6); }

.insp-lb__counter {
	position: absolute;
	left: var(--insp-inset);
	top: 55px;
	z-index: 3;
	margin: 0;
	color: #F7F7F7;
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	letter-spacing: 0.86px;
}

.insp-lb__empty {
	position: relative;
	z-index: 3;
	color: #fff;
	font-family: Montserrat, sans-serif;
	font-size: 16px;
	text-align: center;
	padding: 0 24px;
}

body.insp-lb-open { overflow: hidden; }

@media (max-width: 767px) {
	.insp-lb__close { top: 20px; right: 20px; width: 40px; height: 40px; }
	.insp-lb__close svg { width: 16px; height: 16px; }
	.insp-lb__counter { top: 28px; }
	.insp-lb__nav { width: 44px; height: 52px; }
	.insp-lb__nav svg { width: 12px; height: 25px; }
}