.taif-lightbox[hidden] { display: none; }
.taif-lightbox-open { overflow: hidden; }
.taif-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	grid-template-columns: minmax(48px, 1fr) minmax(0, 1100px) minmax(48px, 1fr);
	align-items: center;
	background: color-mix(in srgb, var(--taif-primary-dark) 94%, transparent);
	padding: clamp(16px, 4vw, 48px);
}
.taif-lightbox figure { grid-column: 2; margin: 0; text-align: center; }
.taif-lightbox__image { display: block; max-width: 100%; max-height: calc(100vh - 120px); margin: auto; object-fit: contain; border-radius: 12px; box-shadow: 0 24px 70px color-mix(in srgb, var(--taif-primary-dark) 55%, transparent); }
.taif-lightbox__status { min-height: 28px; padding-top: 12px; color: var(--taif-card); font-weight: 700; }
.taif-lightbox__close,
.taif-lightbox__nav { width: 48px; height: 48px; border: 1px solid color-mix(in srgb, var(--taif-card) 35%, transparent); border-radius: 50%; background: var(--taif-primary); color: var(--taif-card); cursor: pointer; font-size: 24px; line-height: 1; }
.taif-lightbox__close { position: absolute; inset-block-start: 20px; inset-inline-end: 20px; }
.taif-lightbox__close::before,
.taif-lightbox__close::after { content: ''; position: absolute; width: 22px; height: 2px; inset: 50% auto auto 50%; background: currentColor; }
.taif-lightbox__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.taif-lightbox__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.taif-lightbox__prev { grid-column: 1; justify-self: start; }
.taif-lightbox__next { grid-column: 3; justify-self: end; }
.taif-lightbox :focus-visible { outline-color: var(--taif-accent); }
@media (max-width: 640px) {
	.taif-lightbox { grid-template-columns: 44px minmax(0, 1fr) 44px; padding: 64px 8px 20px; }
	.taif-lightbox__image { max-height: calc(100vh - 150px); }
	.taif-lightbox__close { inset-block-start: 12px; inset-inline-end: 12px; }
	.taif-lightbox__nav { width: 40px; height: 40px; font-size: 19px; }
}