/* ML Gallery — frontend layout styles */

/* ── Base ───────────────────────────────────────────────────────────────── */

.ml-gallery-container {
	margin: 1em 0;
	padding: 0;
	list-style: none;
	--ml-columns: 3;
	--ml-gap: 8px;
	--ml-corner-inset: calc(var(--ml-corner-radius, 0px) * 0.2929);
}

.ml-gallery-container > a {
	display: block;
	overflow: hidden;
	line-height: 0;
	text-decoration: none;
}

.ml-gallery-container > a img {
	display: block;
	width: 100%;
	transition: opacity .2s ease;
}

.ml-gallery-container > a:hover img {
	opacity: .85;
}

/* ── Grid ───────────────────────────────────────────────────────────────── */

.ml-gallery-container.ml-layout-grid {
	display: grid;
	grid-template-columns: repeat(var(--ml-columns), 1fr);
	gap: var(--ml-gap);
}

.ml-gallery-container.ml-layout-grid > a img {
	height: var(--ml-row-height, 220px);
	object-fit: cover;
}

/* ── Masonry ────────────────────────────────────────────────────────────── */

.ml-gallery-container.ml-layout-masonry {
	columns: var(--ml-columns);
	column-gap: var(--ml-gap);
}

.ml-gallery-container.ml-layout-masonry > a {
	break-inside: avoid;
	margin-bottom: var(--ml-gap);
}

.ml-gallery-container.ml-layout-masonry > a img {
	height: auto;
	object-fit: unset;
}

/* ── Justified ──────────────────────────────────────────────────────────── */

.ml-gallery-container.ml-layout-justified {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ml-gap);
}

/* Fixed height; per-item width is set by ml-gallery-layout.js (row-packing). */
.ml-gallery-container.ml-layout-justified > a {
	flex: 1 1 auto;
	height: var(--ml-row-height, 220px);
	overflow: hidden;
}

.ml-gallery-container.ml-layout-justified > a img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	vertical-align: bottom;
}

/* ── Carousel (lightGallery inline carousel) ────────────────────────────── */

/* Give the container a height so lightGallery has space to render into.
   LG inline mode absolutely-positions its stage inside this element. */
.ml-gallery-container.ml-layout-carousel {
	position: relative;
	height: 500px;
	z-index: 0;
	--ml-stage-inset-top: 52px;
}

/* Lift the container above the page while the lightbox is open (maximized, fullscreen or modal). */
.ml-gallery-container.ml-layout-carousel:has(.lg-container.lg-show:not(.lg-inline)) {
	z-index: 100001;
}

.ml-gallery-container.ml-layout-carousel[data-lg-thumbnails="1"] {
	--ml-stage-inset-bottom: 90px;
}

.ml-gallery-container .ml-gallery-stage-button {
	top: calc(10px + var(--ml-corner-inset, 0px) + var(--ml-stage-inset-top, 0px)) !important;
	right: calc(10px + var(--ml-corner-inset, 0px)) !important;
}

.ml-gallery-container.ml-layout-carousel .ml-gallery-stage-button {
	z-index: 100002;
}

/* Hide the raw <a> source items — lightGallery replaces them with its own UI */
.ml-gallery-container.ml-layout-carousel > a {
	display: none;
}

/* Scale images to fit within the slide instead of cropping */
.ml-gallery-container.ml-layout-carousel .lg-object {
	object-fit: contain;
	max-height: 100%;
	width: auto;
	max-width: 100%;
}

/* Block: full-width layout */
.ml-gallery-block.is-full-width {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

/* Showcase layout */
.ml-gallery-container.ml-layout-showcase > a {
	display: none;
}

.ml-showcase-stage {
	position: relative;
	width: 100%;
	overflow: hidden;
	cursor: pointer;
}

.ml-showcase-stage .ml-showcase-img {
	display: block;
	width: 100%;
	height: 420px;
	object-fit: cover;
}

/* The rule above is an author style, so it outranks the browser's own [hidden]. */
.ml-showcase-stage .ml-showcase-img[hidden] {
	display: none;
}

.ml-showcase-stage .ml-showcase-player {
	display: block;
	width: 100%;
	height: 420px;
	border: 0;
	background: #000;
	object-fit: contain;
}

.ml-showcase-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2; /* stay above the transitioning incoming image */
	margin: 0;
	padding: 12px 16px;
	line-height: 1.35;
	color: var(--ml-thumb-caption-color, #ffffff);
	font-size: var(--ml-thumb-caption-size, 14px);
	text-align: var(--ml-thumb-caption-align, left);
	background: var(--ml-thumb-caption-bg, linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0)));
}

.ml-showcase-incoming {
	position: absolute;
	top: 0;
	left: 0;
}

.ml-showcase-incoming.ml-tr-fade {
	opacity: 0;
}

.ml-showcase-incoming.ml-tr-slide-next {
	transform: translateX(100%);
}

.ml-showcase-incoming.ml-tr-slide-prev {
	transform: translateX(-100%);
}

.ml-showcase-incoming.ml-tr-zoom {
	opacity: 0;
	transform: scale(1.15);
}

.ml-showcase-incoming.ml-tr-active {
	opacity: 1;
	transform: translateX(0) scale(1);
	transition: transform 0.45s ease, opacity 0.45s ease;
}

/* Showcase caption transition — honors the Caption Transition setting. */
.ml-showcase-cap-fade {
	animation: ml-showcase-cap-fade 0.4s ease;
}

.ml-showcase-cap-slide-up {
	animation: ml-showcase-cap-slide-up 0.4s ease;
}

.ml-showcase-cap-slide-down {
	animation: ml-showcase-cap-slide-down 0.4s ease;
}

@keyframes ml-showcase-cap-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes ml-showcase-cap-slide-up {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes ml-showcase-cap-slide-down {
	from { opacity: 0; transform: translateY(-20px); }
	to   { opacity: 1; transform: translateY(0); }
}

.ml-showcase-thumbs {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	padding: 8px 0;
}

.ml-showcase-thumb {
	flex-shrink: 0;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 3px;
	cursor: pointer;
	background: none;
	overflow: hidden;
	opacity: 0.6;
	transition: opacity .15s, border-color .15s;
}

/* Centre the strip with auto margins rather than justify-content: center, so a
   strip wider than the gallery still scrolls to its first thumbnail. Logical
   properties keep this right on RTL sites. */
.ml-showcase-thumb:first-child {
	margin-inline-start: auto;
}

.ml-showcase-thumb:last-child {
	margin-inline-end: auto;
}

.ml-showcase-thumb img {
	display: block;
	width: 80px;
	height: 56px;
	object-fit: cover;
}

.ml-showcase-thumb:hover,
.ml-showcase-thumb.is-active {
	opacity: 1;
}

.ml-showcase-thumb.is-active {
	border-color: var(--ml-orange, #dd6923);
}

.ml-showcase-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 0;
}

.ml-showcase-btn {
	border: none;
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	padding: 6px 10px;
	border-radius: 3px;
	background-color: var(--ml-arrow-bg, #000);
	color: var(--ml-arrow-color, #fff);
}

.ml-showcase-btn:hover {
	opacity: 0.85;
}

.ml-showcase-counter {
	flex: 1;
	font-size: 14px;
	text-align: center;
	background-color: var(--ml-toolbar-bg, #000);
	color: var(--ml-toolbar-color, #fff);
	padding: 6px 8px;
}

.ml-showcase-pager {
	display: flex;
	justify-content: center;
	gap: 6px;
	padding: 8px 0;
}

.ml-showcase-pager-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	padding: 0;
	background-color: var(--ml-toolbar-bg, #000);
	opacity: 0.35;
	transition: opacity 0.2s;
}

.ml-showcase-pager-dot:hover {
	opacity: 0.65;
}

.ml-showcase-pager-dot.is-active {
	opacity: 1;
}

/* Responsive column bands, matching MetaSlider's four displays. --ml-columns is
   set inline on the container, so target the consuming properties, not the var. */
@media (max-width: 767px) {
	.ml-gallery-container.ml-layout-grid {
		grid-template-columns: repeat(var(--ml-columns-mobile, 1), 1fr);
	}

	.ml-gallery-container.ml-layout-masonry {
		columns: var(--ml-columns-mobile, 1);
	}

	.ml-showcase-stage .ml-showcase-img,
	.ml-showcase-stage .ml-showcase-player {
		height: 260px;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.ml-gallery-container.ml-layout-grid {
		grid-template-columns: repeat(var(--ml-columns-tablet, var(--ml-columns)), 1fr);
	}

	.ml-gallery-container.ml-layout-masonry {
		columns: var(--ml-columns-tablet, var(--ml-columns));
	}
}

@media (min-width: 1024px) and (max-width: 1439px) {
	.ml-gallery-container.ml-layout-grid {
		grid-template-columns: repeat(var(--ml-columns-laptop, var(--ml-columns)), 1fr);
	}

	.ml-gallery-container.ml-layout-masonry {
		columns: var(--ml-columns-laptop, var(--ml-columns));
	}
}

/* Block link navigation when lightbox is disabled */
.ml-gallery-container[data-ml-lightbox="0"] a {
	pointer-events: none;
	cursor: default;
}

/* ── Video items ────────────────────────────────────────────────────────── */

/* Positioning context for the play badge. Scoped to video anchors so image
   anchors keep whatever positioning their layout gives them. */
.ml-gallery-container > a.ml-gallery-video {
	position: relative;
}

/* Play badge for videos with poster images. Posterless videos show a placeholder
   SVG with its own play glyph, so the badge is omitted to avoid stacking. */
.ml-gallery-video--poster::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba( 0, 0, 0, 0.55 ) url( "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M9 7l9 5-9 5z'/%3E%3C/svg%3E" ) no-repeat center / 24px 24px;
	pointer-events: none;
}

/* ── Thumbnail captions ─────────────────────────────────────────────────── */

.ml-gallery-caption {
	display: none;
}

.ml-gallery-container.ml-has-thumb-captions > a {
	position: relative;
}

.ml-gallery-container.ml-has-thumb-captions .ml-gallery-caption {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 10px calc(12px + var(--ml-corner-inset, 0px)) calc(10px + var(--ml-corner-inset, 0px));
	line-height: 1.35;
	/* Hook points for future per-gallery controls; fall back to sensible defaults. */
	color: var(--ml-thumb-caption-color, #ffffff);
	font-size: var(--ml-thumb-caption-size, 14px);
	text-align: var(--ml-thumb-caption-align, left);
	background: var(--ml-thumb-caption-bg, linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0)));
}

.ml-gallery-caption > *,
.ml-showcase-caption > * {
	margin: 0;
}

.ml-gallery-container.ml-caption-pos-top .ml-gallery-caption,
.ml-gallery-container.ml-caption-pos-top .ml-showcase-caption,
.ml-gallery-container.ml-caption-pos-top .lg-sub-html {
	top: 0;
	bottom: auto;
}

.ml-gallery-container.ml-caption-pos-top .ml-gallery-caption {
	padding: calc(10px + var(--ml-corner-inset, 0px)) calc(12px + var(--ml-corner-inset, 0px)) 10px;
}

.ml-gallery-container.ml-layout-carousel.ml-caption-pos-top .lg-sub-html {
	top: 47px;
}

.ml-gallery-container.ml-caption-pos-middle .ml-gallery-caption,
.ml-gallery-container.ml-caption-pos-middle .ml-showcase-caption,
.ml-gallery-container.ml-caption-pos-middle .lg-sub-html {
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
}

.ml-gallery-container.ml-caption-pos-middle .ml-gallery-caption {
	padding: 10px calc(12px + var(--ml-corner-inset, 0px));
}

.ml-gallery-container.ml-caption-pos-middle .ml-showcase-cap-slide-up,
.ml-gallery-container.ml-caption-pos-middle .ml-showcase-cap-slide-down {
	animation-name: ml-showcase-cap-fade;
}

@media (hover: hover) {
	.ml-gallery-container.ml-caption-hover .ml-gallery-caption,
	.ml-gallery-container.ml-caption-hover .ml-showcase-caption,
	.ml-gallery-container.ml-caption-hover .lg-container .lg-outer .lg-sub-html {
		opacity: 0;
		transition: opacity .25s ease;
	}

	.ml-gallery-container.ml-caption-hover > a:hover .ml-gallery-caption,
	.ml-gallery-container.ml-caption-hover > a:focus-visible .ml-gallery-caption,
	.ml-gallery-container.ml-caption-hover .ml-showcase-stage:hover .ml-showcase-caption,
	.ml-gallery-container.ml-caption-hover .lg-container:hover .lg-outer .lg-sub-html,
	.ml-gallery-container.ml-caption-hover .lg-container:focus-within .lg-outer .lg-sub-html {
		opacity: 1;
	}

	/* Keyboard focus on a control inside the tile (Open button, showcase stage
	   image) reveals the caption too. Kept separate: an unsupported :has() would
	   otherwise void the hover rule above. */
	.ml-gallery-container.ml-caption-hover > a:has(:focus-visible) .ml-gallery-caption,
	.ml-gallery-container.ml-caption-hover .ml-showcase-stage:has(:focus-visible) .ml-showcase-caption {
		opacity: 1;
	}

	.ml-gallery-container.ml-caption-hover .ml-showcase-cap-fade,
	.ml-gallery-container.ml-caption-hover .ml-showcase-cap-slide-up,
	.ml-gallery-container.ml-caption-hover .ml-showcase-cap-slide-down {
		animation: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ml-gallery-container.ml-caption-hover .ml-gallery-caption,
	.ml-gallery-container.ml-caption-hover .ml-showcase-caption,
	.ml-gallery-container.ml-caption-hover .lg-container .lg-outer .lg-sub-html {
		transition: none;
	}
}

/* ── Load More ──────────────────────────────────────────────────────────── */

.ml-gallery-container > a.ml-item-hidden {
	display: none;
}

.ml-load-more-wrap {
	display: flex;
	justify-content: center;
	margin-top: var(--ml-gap, 8px);
}

.ml-load-more {
	padding: 10px 22px;
	border: 0;
	border-radius: 4px;
	background-color: #000000;
	color: #ffffff;
	font-size: 14px;
	line-height: 1.4;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

.ml-load-more:hover,
.ml-load-more:focus {
	background-color: #f0f0f0;
	color: #000000;
}

.ml-load-more-status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── Accessibility: keyboard focus and screen-reader text ───────────────── */

/* Two-tone ring (black outline, white halo) stays visible on any image or
   page background. Keyboard focus only (:focus-visible), so mouse users see
   no change. Tiles are lifted above their neighbours so a narrow gap does not
   hide the ring. */
.ml-gallery-container > a:focus-visible {
	position: relative;
	z-index: 3;
}

.ml-gallery-container > a:focus-visible,
.ml-gallery-container .ml-showcase-thumb:focus-visible,
.ml-gallery-container .ml-showcase-btn:focus-visible,
.ml-gallery-container .ml-showcase-pager-dot:focus-visible,
.ml-load-more:focus-visible {
	outline: 2px solid #000000;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #ffffff;
}

/* Full-bleed controls (showcase stage image, inline carousel) clip anything
   drawn outside them, and an image paints over its own inset shadow, so the
   ring is an overlay drawn inside the stage. */
.ml-gallery-container .ml-showcase-img:focus-visible,
.ml-gallery-container > .lg-container:focus-visible {
	outline: none;
}

.ml-gallery-container > .lg-container:focus-visible::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1100;
	pointer-events: none;
	box-shadow: inset 0 0 0 2px #000000, inset 0 0 0 4px #ffffff;
}

/* Separate rule: an unsupported :has() would void the whole selector list. */
.ml-showcase-stage:has(.ml-showcase-img:focus-visible)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	box-shadow: inset 0 0 0 2px #000000, inset 0 0 0 4px #ffffff;
}

/* Browsers without :has() still get a visible indicator. */
@supports not selector(:has(*)) {
	.ml-gallery-container .ml-showcase-img:focus-visible {
		outline: 3px solid #ffffff;
		outline-offset: -3px;
	}
}

.ml-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}