/* Lloyd Gallery - front end. Kept theme-agnostic: sets its own spacing
   and motion, borrows color/type from the surrounding theme wherever
   sensible so it drops into any site design. */

.lg-page-header {
	margin-bottom: 1.75em;
}

.lg-page-title {
	margin: 0 0 0.3em;
}

.lg-event-date {
	display: inline-block;
	font-size: 0.85em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.65;
	margin: 0 0 0.6em;
}

.lg-empty {
	opacity: 0.7;
}

.lg-credit {
	display: flex;
	justify-content: flex-end;
	margin: 1.75em 0 0;
}

.lg-credit a {
	display: inline-block;
	padding: 5px 11px;
	border-radius: 999px;
	background: rgba(127, 127, 127, 0.12);
	/* Deliberately not `color: inherit` - a theme with a strong global
	   link colour made an earlier version of this look distractingly
	   loud. A fixed, muted grey reads as an intentional small credit
	   regardless of the surrounding theme. */
	color: #6b6b6b;
	text-decoration: none;
	font-size: 0.75em;
	letter-spacing: 0.02em;
	transition: color 0.15s ease, background 0.15s ease;
}

.lg-credit a:hover,
.lg-credit a:focus-visible {
	color: #333;
	background: rgba(127, 127, 127, 0.2);
}

/* The lightbox's own toolbar/background is always dark regardless of the
   site's theme, so this variant is styled to match that fixed context
   directly rather than inheriting the (potentially light) page colours
   the grid's own .lg-credit relies on. */
.lg-pswp-credit {
	position: absolute;
	left: 12px;
	bottom: 12px;
	margin: 0;
	z-index: 3;
}

.lg-pswp-credit a {
	background: rgba(0, 0, 0, 0.45);
	color: rgba(255, 255, 255, 0.85);
}

.lg-pswp-credit a:hover,
.lg-pswp-credit a:focus-visible {
	color: #fff;
	background: rgba(0, 0, 0, 0.65);
}

/* ---- Album list ---- */

.lg-album-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 28px;
}

@media (max-width: 480px) {
	.lg-album-grid {
		/* A 280px minimum can be wider than the available space on a
		   small phone once the theme's own content padding is
		   subtracted - a single column guarantees no overflow. */
		grid-template-columns: 1fr;
	}
}

.lg-album-card {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.lg-album-card.is-visible {
	opacity: 1;
	transform: none;
}

.lg-album-card-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.lg-album-card-cover {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 10px;
	background: rgba(127, 127, 127, 0.12);
}

.lg-album-card-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.lg-album-card-cover-placeholder {
	display: block;
	width: 100%;
	height: 100%;
}

.lg-album-card-link:hover .lg-album-card-cover img,
.lg-album-card-link:focus-visible .lg-album-card-cover img {
	transform: scale(1.04);
}

.lg-album-card-lock {
	position: absolute;
	top: 10px;
	right: 10px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 13px;
	line-height: 1;
	padding: 6px 7px;
	border-radius: 6px;
}

.lg-album-card-title {
	display: block;
	margin-top: 12px;
	font-size: 1.1em;
	font-weight: 600;
}

.lg-album-card-date {
	display: block;
	margin-top: 3px;
	font-size: 0.8em;
	opacity: 0.6;
}

/* ---- Single album: justified grid ---- */

.lg-justified {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.lg-justified-row {
	display: flex;
	gap: 6px;
}

/* The final row, when it isn't a full row's worth of photos, is centred
   rather than left-aligned - stretching it to full width would distort
   the last photo(s) far more than the other rows, but leaving it at the
   left edge dumps all the leftover space on the right, which reads as
   unfinished rather than as a deliberate layout. */
.lg-justified-row--center {
	justify-content: center;
}

.lg-photo {
	margin: 0;
	position: relative;
	overflow: hidden;
	border-radius: 4px;
	opacity: 0;
	transform: translateY(16px) scale(0.98);
	transition: opacity 0.55s ease, transform 0.55s ease;
}

.lg-photo.is-visible {
	opacity: 1;
	transform: none;
}

.lg-photo a {
	display: block;
	width: 100%;
	height: 100%;
}

.lg-photo-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.lg-photo a:hover .lg-photo-img,
.lg-photo a:focus-visible .lg-photo-img {
	transform: scale(1.045);
}

.lg-photo-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 22px 10px 10px;
	font-size: 0.85em;
	color: #fff;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent);
	transform: translateY(100%);
	transition: transform 0.3s ease;
	pointer-events: none;
}

.lg-photo a:hover + .lg-photo-caption,
.lg-photo:hover .lg-photo-caption {
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.lg-album-card,
	.lg-photo,
	.lg-album-card-cover img,
	.lg-photo-img,
	.lg-photo-caption {
		transition: none !important;
		transform: none !important;
		opacity: 1 !important;
	}
}

/**
 * .editor-styles-wrapper only exists inside the block editor's own
 * iframe, never on the real front end, so this can't affect a visitor.
 * It's a safety net for the block preview: gallery.js's scroll-reveal
 * and justified-row sizing both depend on running against the exact
 * document the photos land in, and a front-end script isn't guaranteed
 * to execute against the editor iframe's separate document the way a
 * stylesheet is - without this, a photo that misses that wiring is
 * stuck permanently invisible (opacity: 0, no computed size) rather
 * than just unstyled.
 */
.editor-styles-wrapper .lg-photo,
.editor-styles-wrapper .lg-album-card {
	opacity: 1 !important;
	transform: none !important;
}

.editor-styles-wrapper .lg-photo {
	width: 220px !important;
	height: 165px !important;
	flex-grow: 0 !important;
}

/* ---- Lightbox: caption panel & slideshow controls ---- */

/* WordPress's admin bar sits at z-index 99999, and PhotoSwipe's own
   default (100000) clears that by only 1 - anything on the site that
   nudges the admin bar's z-index up even slightly (not unusual; several
   common plugins do) ends up rendering it on top of the lightbox's own
   toolbar in that same strip, contesting it for space instead of the
   lightbox simply covering the whole viewport as intended.
   !important because photoswipe.css sets the same property on the same
   selector (.pswp) and, being vendor CSS this plugin enqueues after its
   own stylesheet, wins the cascade on load order alone otherwise -
   equal specificity, later source, without this. */
.pswp {
	z-index: 100050 !important;
}

.lg-pswp-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 32px 24px 22px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.72), transparent);
	text-align: center;
	pointer-events: none;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.lg-pswp-caption.is-visible {
	opacity: 1;
	transform: none;
}

.lg-pswp-caption p {
	margin: 0 auto;
	max-width: 640px;
	color: #fff;
	font-size: 15px;
	line-height: 1.5;
}

.pswp__button--lg-autoplay-speed {
	width: auto;
	padding: 0 10px;
}

/* The play/pause icon is drawn with fill="currentColor" so it can
   recolour with the button, but nothing - not PhotoSwipe's own CSS, nor
   ours until now - actually set a colour on this custom button, so it
   fell back to the browser's default (black) button text colour. Its
   crisp outline against any photo comes from the icon's own
   .pswp__icn-shadow path (see gallery.js) - already styled by
   photoswipe.css, nothing extra needed here for that part. */
.pswp__button--lg-autoplay-toggle {
	color: #fff;
}

/* Same crisp-outline idea as the icon above, applied to text instead of
   an SVG path - a real stroke around each letterform, not a blurred
   shadow, using the exact colour/width PhotoSwipe's own icon outlines
   use (--pswp-icon-stroke-color/-width) so all three controls read as
   one consistent toolbar. paint-order keeps the stroke from covering
   the fill on chunky glyphs like "5". */
.lg-pswp-speed-label {
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	-webkit-text-stroke: var( --pswp-icon-stroke-width ) var( --pswp-icon-stroke-color );
	paint-order: stroke fill;
}

@media (prefers-reduced-motion: reduce) {
	.lg-pswp-caption {
		transition: none !important;
	}
}