/* LNTA Gallery — the Gallery page.

   The page was a single line reading "Content Loading Soon........". The
   photographs already existed: 272 of them, published with the 47 news
   stories. This lays them out rather than asking anyone to upload again.

   A CSS-columns masonry rather than a grid of equal boxes: the library is a
   mix of landscape event photography and portrait shots, and cropping them
   all to one shape would waste most of the frame. Columns let each picture
   keep its own proportions.

   Colour declarations carry !important at two classes or more: the
   site-wide `.elementor * { color:#fff }` loads after plugin stylesheets. */

.lng-gallery {
	width: 100%;
}

.lng-gallery .lng-count {
	margin: 0 0 24px;
	color: #6b7280 !important;
	font-size: 0.95rem;
}

.lng-gallery .lng-grid {
	columns: 4;
	column-gap: 16px;
}

.lng-gallery .lng-item {
	/* break-inside stops a picture being split across two columns. */
	break-inside: avoid;
	margin: 0 0 16px;
	padding: 0;
}

.lng-gallery .lng-item.is-hidden {
	display: none;
}

.lng-gallery .lng-item__btn {
	display: block;
	position: relative;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: 12px;
	overflow: hidden;
	background: #f1f5ef;
	cursor: zoom-in;
	line-height: 0;
}

.lng-gallery .lng-item__btn img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.45s ease;
}

.lng-gallery .lng-item__btn:hover img,
.lng-gallery .lng-item__btn:focus-visible img {
	transform: scale(1.05);
}

.lng-gallery .lng-item__btn:focus-visible {
	outline: 3px solid #f0a818;
	outline-offset: 3px;
}

/* The story title, over a gradient so it stays readable whatever the
   photograph underneath is doing. */
.lng-gallery .lng-item__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 28px 14px 12px;
	background: linear-gradient(180deg, rgba(3, 41, 2, 0), rgba(3, 41, 2, 0.85));
	color: #ffffff !important;
	font-size: 0.82rem;
	line-height: 1.4;
	text-align: left;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.25s ease, transform 0.25s ease;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.lng-gallery .lng-item__btn:hover .lng-item__caption,
.lng-gallery .lng-item__btn:focus-visible .lng-item__caption {
	opacity: 1;
	transform: translateY(0);
}

/* ---------- Show more ---------- */

.lng-gallery .lng-more-wrap {
	margin-top: 28px;
	text-align: center;
}

.lng-gallery .lng-more {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 26px;
	border: 0;
	border-radius: 999px;
	background: #225321;
	color: #ffffff !important;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.lng-gallery .lng-more:hover {
	background: #2d6b2b;
	transform: translateY(-2px);
}

.lng-gallery .lng-more__count {
	padding: 2px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.18);
	font-size: 0.85rem;
}

.lng-gallery .lng-empty {
	padding: 48px 0;
	text-align: center;
	color: #4b5563 !important;
}

/* ---------- Lightbox ---------- */

.lng-lightbox[hidden] {
	display: none;
}

.lng-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 56px 16px;
	background: rgba(3, 12, 3, 0.94);
}

.lng-lightbox .lng-lightbox__figure {
	margin: 0;
	max-width: 1100px;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.lng-lightbox .lng-lightbox__img {
	max-width: 100%;
	/* Leaves room for the caption under the picture. */
	max-height: calc(100vh - 170px);
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 10px;
}

.lng-lightbox .lng-lightbox__cap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 16px;
	text-align: center;
}

.lng-lightbox .lng-lightbox__title {
	color: rgba(255, 255, 255, 0.92) !important;
	font-size: 0.98rem;
}

.lng-lightbox .lng-lightbox__link {
	color: #f0a818 !important;
	font-weight: 700;
	font-size: 0.9rem;
	text-decoration: none;
}

.lng-lightbox .lng-lightbox__link:hover {
	text-decoration: underline;
}

.lng-lightbox .lng-lightbox__close,
.lng-lightbox .lng-lightbox__nav {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: #ffffff !important;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease;
}

.lng-lightbox .lng-lightbox__close:hover,
.lng-lightbox .lng-lightbox__nav:hover {
	background: rgba(255, 255, 255, 0.28);
}

.lng-lightbox .lng-lightbox__close {
	top: 14px;
	right: 14px;
	font-size: 2rem;
}

.lng-lightbox .lng-lightbox__nav--prev {
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
}

.lng-lightbox .lng-lightbox__nav--next {
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
}

/* A spinner while the photograph downloads, so the frame is never just
   empty on a slow connection. */
.lng-lightbox.is-loading .lng-lightbox__figure::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 42px;
	height: 42px;
	margin: -21px 0 0 -21px;
	border: 3px solid rgba(255, 255, 255, 0.25);
	border-top-color: #f0a818;
	border-radius: 50%;
	animation: lng-spin 0.8s linear infinite;
}

.lng-lightbox.is-loading .lng-lightbox__img {
	opacity: 0;
}

.lng-lightbox .lng-lightbox__img {
	transition: opacity 0.25s ease;
}

@keyframes lng-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.lng-lightbox.is-loading .lng-lightbox__figure::before {
		animation: none;
	}
}

/* ---------- Responsive ---------- */

@media (max-width: 1199px) {
	.lng-gallery .lng-grid {
		columns: 3;
	}
}

@media (max-width: 767px) {
	.lng-gallery .lng-grid {
		columns: 2;
		column-gap: 12px;
	}

	.lng-gallery .lng-item {
		margin-bottom: 12px;
	}

	/* There is no hover on a touch screen, so the caption can only be
	   always-on or not at all. Across a 170px tile a two-line story title
	   covers most of the photograph, so it goes — the title is on the
	   lightbox, which is one tap away. */
	.lng-gallery .lng-item__caption {
		display: none;
	}

	.lng-gallery .lng-item__btn {
		cursor: pointer;
	}
}

/* Only the narrowest phones drop to a single column; two columns show
   roughly twice as much of the library per screen. */
@media (max-width: 359px) {
	.lng-gallery .lng-grid {
		columns: 1;
	}
}

@media (max-width: 420px) {
	.lng-lightbox {
		padding: 72px 10px;
	}

	/* Arrows move off the picture and under it, where a thumb reaches. */
	.lng-lightbox .lng-lightbox__nav--prev {
		left: 50%;
		top: auto;
		bottom: 14px;
		transform: translateX(-62px);
	}

	.lng-lightbox .lng-lightbox__nav--next {
		right: 50%;
		top: auto;
		bottom: 14px;
		transform: translateX(62px);
	}
}