/*
 * Martin's Fotorama 1.1.0: the member-zone gallery. Phone first.
 * Colours and buttons follow martin-theme's members skin (cards #22222b / #2b2b35, pink #ff2d8a,
 * gold focus #e2b26a, Open Sans Condensed) and its cover viewer (.pg-lb).
 * Without JavaScript: the first photo (a link to the original), then the strip of thumbnail links.
 */

.mfg {
	/* Settings > Martin's Fotorama overrides the four below, in an inline rule after this file */
	--mfg-th-d: 100px; /* thumbnail height: computers and tablets */
	--mfg-th-m: 64px; /* phones */
	--mfg-sb: 18px; /* thumbnail scrollbar thickness (mouse) */
	--mfg-sb-thumb: #c4c4ce; /* its handle */
	--mfg-th: var(--mfg-th-d);
	/* room under the stage for the strip: thumbnails + scrollbar + gaps (PHP strip_room() hints the same) */
	--mfg-room: calc(var(--mfg-th) + 46px);
	--mfg-gap: 4px;
	--mfg-stage: #0e0e12;
	--mfg-ink: #f5f5f5;
	--mfg-line: rgba(255, 255, 255, 0.18);
	--mfg-btn: rgba(34, 34, 43, 0.85);
	--mfg-btn-hover: #2b2b35;
	--mfg-accent: #ff2d8a;
	--mfg-focus: #e2b26a;
	--mfg-font: var(--sb-font, "Open Sans Condensed", "Arial Narrow", sans-serif);
	position: relative;
	margin: 1em 0;
	color: var(--mfg-ink);
}

.mfg-ph {
	margin: 1em 0;
}

/* Stage: the first photo's shape, never taller than the screen less the strip (--mfg-room) */
.mfg-stage {
	position: relative;
	aspect-ratio: var(--mfg-ratio, 3 / 2);
	max-height: calc(100vh - var(--mfg-room));
	max-height: calc(100svh - var(--mfg-room));
	overflow: hidden;
	background: var(--mfg-stage);
}

.mfg-track {
	display: flex;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	outline: 0;
}

.mfg-track::-webkit-scrollbar {
	display: none;
}

.mfg-track:focus-visible {
	box-shadow: inset 0 0 0 2px var(--mfg-focus);
}

.mfg-slide {
	flex: 0 0 100%;
	height: 100%;
	overflow: hidden;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}

.mfg-full {
	display: block;
	width: 100%;
	height: 100%;
}

/* The img box fills the slide and the photo is fitted inside it, so `sizes` (which sets an img's
   natural size) only chooses the file, never the layout */
.mfg .mfg-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: contain;
	cursor: pointer;
}

.mfg .mfg-img.mfg-anim {
	transition: transform 0.2s ease;
}

/* Thumbnails: one scrolling row from the first paint, with or without JavaScript (a wrapped grid
   would put every lazy thumbnail near the viewport before the script runs, and load them all) */
.mfg .mfg-thumbs {
	display: flex;
	gap: var(--mfg-gap);
	margin: var(--mfg-gap) 0 0;
	padding: 0 0 2px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--mfg-sb-thumb) rgba(255, 255, 255, 0.08);
	list-style: none;
}

/* With a mouse: a thicker bar with a light handle that is easy to grab. Chrome, Edge and Safari
   take the ::-webkit-scrollbar rules (which Chrome ignores if scrollbar-width / -color are set,
   hence the @supports); Firefox only has the standard properties, so it gets the full-size bar. */
@media (hover: hover) and (pointer: fine) {
	@supports selector(::-webkit-scrollbar) {
		.mfg .mfg-thumbs {
			scrollbar-width: auto;
			scrollbar-color: auto;
		}

		.mfg .mfg-thumbs::-webkit-scrollbar {
			height: var(--mfg-sb);
		}

		.mfg .mfg-thumbs::-webkit-scrollbar-track {
			background: rgba(255, 255, 255, 0.08);
			border-radius: 999px;
		}

		.mfg .mfg-thumbs::-webkit-scrollbar-thumb {
			background: var(--mfg-sb-thumb);
			border: 3px solid transparent;
			border-radius: 999px;
			background-clip: padding-box;
		}

		.mfg .mfg-thumbs::-webkit-scrollbar-thumb:hover {
			border-width: 2px;
		}
	}

	@supports not selector(::-webkit-scrollbar) {
		.mfg .mfg-thumbs {
			scrollbar-width: auto;
		}
	}
}

.mfg .mfg-thumbs li {
	flex: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mfg .mfg-thumbs li::before {
	content: none;
}

.mfg-th {
	position: relative;
	display: block;
	height: var(--mfg-th);
}

.mfg .mfg-th img {
	display: block;
	width: auto;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: #22222b;
}

.mfg-th::after,
.mfg-gc::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid transparent;
	pointer-events: none;
	transition: border-color 0.15s ease;
}

.mfg-th:hover::after,
.mfg-gc:hover::after {
	border-color: rgba(255, 255, 255, 0.4);
}

.mfg-th[aria-current="true"]::after,
.mfg-gc[aria-current="true"]::after {
	border-color: var(--mfg-accent);
}

.mfg-th:focus-visible,
.mfg-gc:focus-visible {
	outline: 2px solid var(--mfg-focus);
	outline-offset: 1px;
}

/* Bar: counter, "All N", full screen / close. Overlaid on the photo (top of the gallery); on
   phones it is a row of its own under the photo, see the end of this file */
.mfg-bar {
	display: none;
}

.mfg--js .mfg-bar {
	position: absolute;
	z-index: 4;
	top: 8px;
	left: 8px;
	right: 8px;
	display: flex;
	align-items: center;
	gap: 6px;
	pointer-events: none;
}

.mfg-bar > * {
	pointer-events: auto;
}

.mfg-count {
	margin-right: auto;
	padding: 4px 9px;
	border-radius: 999px;
	background: rgba(8, 8, 11, 0.6);
	color: #fff;
	font: 400 13px/1.2 var(--mfg-font);
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
}

.mfg .mfg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 40px;
	height: 40px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--mfg-line);
	border-radius: 999px;
	background: var(--mfg-btn);
	color: #fff;
	font: 400 14px/1 var(--mfg-font);
	letter-spacing: 0.04em;
	text-transform: none;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.2s ease;
}

.mfg .mfg-icon {
	width: 40px;
	padding: 0;
}

.mfg .mfg-btn:hover {
	border-color: var(--mfg-accent);
	background: var(--mfg-btn-hover);
}

.mfg .mfg-btn:focus-visible {
	outline: 2px solid var(--mfg-focus);
	outline-offset: 2px;
}

.mfg .mfg-btn svg {
	flex: none;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.mfg .mfg-close,
.mfg--fs .mfg-fullbtn,
.mfg--single .mfg-count,
.mfg--single .mfg-gridbtn,
.mfg--single .mfg-thumbs,
.mfg--single .mfg-arrow {
	display: none;
}

.mfg--fs .mfg-close {
	display: inline-flex;
}

/* Arrows: mouse only, on hover */
.mfg .mfg-arrow {
	position: absolute;
	z-index: 2;
	top: 50%;
	width: 48px;
	height: 48px;
	margin-top: -24px;
	opacity: 0;
}

.mfg .mfg-prev {
	left: 10px;
}

.mfg .mfg-next {
	right: 10px;
}

.mfg .mfg-arrow:disabled {
	visibility: hidden;
}

@media (hover: hover) {
	.mfg-stage:hover .mfg-arrow,
	.mfg .mfg-arrow:focus-visible {
		opacity: 1;
	}
}

@media (hover: none) {
	.mfg .mfg-arrow {
		display: none;
	}
}

/* Full screen: the gallery inside a modal <dialog> */
.mfg-lb {
	width: 100%;
	max-width: none;
	height: 100vh;
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: #000;
	overflow: hidden;
}

.mfg-lb::backdrop {
	background: #000;
}

html.mfg-lock {
	overflow: hidden;
}

.mfg--fs {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.mfg--fs .mfg-bar {
	top: calc(8px + env(safe-area-inset-top));
}

.mfg--fs .mfg-stage {
	flex: 1 1 auto;
	min-height: 0;
	aspect-ratio: auto;
	max-height: none;
	background: #000;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.mfg--fs.mfg--drag .mfg-stage {
	transition: none;
}

.mfg--fs .mfg-track {
	touch-action: pan-x; /* vertical drags and pinches come to the script */
}

.mfg--fs .mfg-thumbs {
	flex: none;
	margin: 0;
	padding: var(--mfg-gap);
}

.mfg--fs .mfg-img {
	cursor: zoom-in;
}

.mfg--zoomed .mfg-track {
	overflow: hidden;
	touch-action: none;
}

.mfg--zoomed .mfg-img {
	cursor: grab;
}

/* While two fingers are down the photo keeps the layer it already has (no re-raster at every
   scale step, which showed the black stage as blank tiles); it is sharpened when the fingers lift */
.mfg--pinch .mfg-img {
	will-change: transform;
}

/* "All N": every photo in a grid */
.mfg-grid {
	position: absolute;
	z-index: 3;
	inset: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: var(--mfg-gap);
	align-content: start;
	padding: calc(60px + env(safe-area-inset-top)) var(--mfg-gap) var(--mfg-gap);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: #000;
}

.mfg-grid[hidden] {
	display: none;
}

.mfg-gc {
	position: relative;
	display: block;
	aspect-ratio: 1;
}

.mfg .mfg-gc img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	object-fit: cover;
	background: #15151a;
}

.mfg--grid .mfg-thumbs,
.mfg--grid .mfg-arrow {
	visibility: hidden;
}

@media (min-width: 600px) {
	.mfg-grid {
		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
		padding-left: 12px;
		padding-right: 12px;
	}
}

/* Phones (up to 640px wide, the usual portrait phone and small tablet): in the page, the bar is
   a slim row above the photo (it comes first in the markup), so nothing covers the photo; counter
   on the left, buttons on the right. Full screen keeps the overlay. A single photo needs no bar
   (a tap opens full screen). */
@media (max-width: 640px) {
	.mfg {
		--mfg-th: var(--mfg-th-m);
		--mfg-room: calc(var(--mfg-th) + 84px); /* strip + the bar (38px) */
	}

	.mfg--js:not(.mfg--fs) .mfg-bar {
		position: static;
		margin: 0 0 var(--mfg-gap);
	}

	.mfg--js:not(.mfg--fs) .mfg-count {
		padding: 4px 2px;
		background: none;
	}

	.mfg:not(.mfg--fs) .mfg-bar .mfg-btn {
		min-width: 34px;
		height: 34px;
		padding: 0 10px;
	}

	.mfg:not(.mfg--fs) .mfg-bar .mfg-icon {
		width: 34px;
		padding: 0;
	}

	.mfg--single:not(.mfg--fs) .mfg-bar {
		display: none;
	}

	/* the photo, the bar (38px) and the strip still fit the screen; a single photo has no bar */
	.mfg--single {
		--mfg-room: calc(var(--mfg-th) + 46px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mfg .mfg-btn,
	.mfg-th::after,
	.mfg-gc::after,
	.mfg--fs .mfg-stage,
	.mfg .mfg-img.mfg-anim {
		transition: none;
	}
}