/* Member Story photo lightbox (assets/story-lightbox.js). Kept in the
   plugin, not the theme, so it works with the plugin alone. */
.gcdoc-member-story__gallery a { cursor: zoom-in; }

.gcdoc-lightbox {
	position: fixed; inset: 0; z-index: 100000;
	display: flex; align-items: center; justify-content: center;
	padding: 56px 64px; background: rgba(15, 18, 16, 0.92);
}
.gcdoc-lightbox[hidden] { display: none; }
body.gcdoc-lightbox-open { overflow: hidden; }

.gcdoc-lightbox__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 100%; max-height: 100%; }
.gcdoc-lightbox__img { display: block; max-width: 100%; max-height: calc(100vh - 140px); width: auto; height: auto; object-fit: contain; border-radius: 4px; box-shadow: 0 6px 30px rgba(0, 0, 0, 0.5); background: #222; }
.gcdoc-lightbox__count { color: #e8e8e8; font-size: 0.9rem; min-height: 1.2em; }

.gcdoc-lightbox button {
	position: absolute; display: flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer;
}
.gcdoc-lightbox button:hover, .gcdoc-lightbox button:focus-visible { background: rgba(255, 255, 255, 0.3); outline: 2px solid #fff; outline-offset: 2px; }
.gcdoc-lightbox button[hidden] { display: none; }
.gcdoc-lightbox__close { top: 12px; right: 12px; }
.gcdoc-lightbox__prev { left: 10px; top: 50%; transform: translateY(-50%); }
.gcdoc-lightbox__next { right: 10px; top: 50%; transform: translateY(-50%); }

/* Phones: photo uses the full width; arrows sit at the bottom corners. */
@media (max-width: 700px) {
	.gcdoc-lightbox { padding: 56px 8px 76px; }
	.gcdoc-lightbox__img { max-height: calc(100vh - 170px); }
	.gcdoc-lightbox__prev, .gcdoc-lightbox__next { top: auto; bottom: 14px; transform: none; }
	.gcdoc-lightbox__prev { left: 16px; }
	.gcdoc-lightbox__next { right: 16px; }
}