/*
 * PrismFX Portfolio — frontend styles.
 *
 * Design: "mounted prints". The photographs carry the colour; the chrome
 * stays neutral and precise, like gallery framing. Captions read like gallery
 * wall labels. Type inherits the host site so the gallery speaks in the
 * site's own voice.
 */

/* =================================================================
 * Tokens
 * ============================================================== */

.pfx {
	/* Light ("gallery") cards are the default. */
	--pfx-card-bg: #ffffff;
	--pfx-card-back: #ebe8e3;
	--pfx-text: #1c1b19;
	--pfx-muted: #625e57;
	--pfx-line: rgba(28, 27, 25, 0.12);
	--pfx-shadow: 0 1px 2px rgba(20, 18, 15, 0.12), 0 18px 32px -16px rgba(20, 18, 15, 0.3);
	--pfx-shadow-lg: 0 2px 4px rgba(20, 18, 15, 0.1), 0 30px 50px -20px rgba(20, 18, 15, 0.35);

	--pfx-accent-c: var(--pfx-accent, var(--pfx-text));
	--pfx-on-accent-c: var(--pfx-on-accent, var(--pfx-card-bg));

	--pfx-bg: transparent;
	--pfx-radius: 10px;
	--pfx-label-r: max(3px, calc(var(--pfx-radius) - 4px));
	--pfx-btn-r: max(3px, min(6px, calc(var(--pfx-radius) - 4px)));
	--pfx-mat: 8px;
	--pfx-ease: cubic-bezier(0.22, 0.8, 0.24, 1);

	position: relative;
	box-sizing: border-box;
	--pfx-wn: var(--pfx-wd, 100);
	width: calc(var(--pfx-wn) * 1%);
	max-width: min(100%, var(--pfx-max-w, 100%));
	margin: 0 auto;
	background: var(--pfx-bg);
	font-size: 16px;
	line-height: 1.4;
	-webkit-tap-highlight-color: transparent;
	isolation: isolate;
}

.pfx-theme-dark {
	--pfx-card-bg: #1f1d1b;
	--pfx-card-back: #161513;
	--pfx-text: #f3f0eb;
	--pfx-muted: #b6b0a6;
	--pfx-line: rgba(243, 240, 235, 0.12);
	--pfx-shadow: 0 1px 2px rgba(0, 0, 0, 0.22), 0 18px 32px -14px rgba(0, 0, 0, 0.5);
	--pfx-shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.2), 0 30px 50px -18px rgba(0, 0, 0, 0.55);
}

.pfx.has-bg {
	color: var(--pfx-on-bg, inherit);
	padding: clamp(16px, 3vw, 40px) clamp(12px, 2.5vw, 32px);
	border-radius: max(0px, calc(var(--pfx-radius) + 4px));
	overflow: hidden;
}

.pfx *,
.pfx *::before,
.pfx *::after {
	box-sizing: border-box;
}

.pfx:focus {
	outline: none;
}

.pfx:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.pfx-outer {
	display: block;
	margin-bottom: 1.5em;
}

.pfx-notice {
	padding: 12px 14px;
	border: 1px dashed currentColor;
	opacity: 0.7;
}

.pfx-stage {
	position: relative;
	user-select: none;
	-webkit-user-select: none;
	touch-action: pan-y;
}

.pfx.is-dragging .pfx-stage {
	cursor: grabbing;
}

/* =================================================================
 * Category filter
 * ============================================================== */

.pfx-filters {
	position: relative;
	z-index: 6;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 22px;
	margin: 0 0 22px;
	padding: 0;
}

.pfx .pfx-filter {
	position: relative;
	margin: 0;
	padding: 6px 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	opacity: 0.6;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.pfx .pfx-filter:hover {
	opacity: 0.9;
	background: none;
	color: inherit;
}

.pfx .pfx-filter.is-active {
	opacity: 1;
}

.pfx .pfx-filter::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: currentColor;
	transform: scaleX(0);
	transition: transform 0.25s var(--pfx-ease);
}

.pfx .pfx-filter.is-active::after {
	transform: scaleX(1);
}

.pfx .pfx-filter:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

.pfx .pfx-filter:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* =================================================================
 * Card
 * ============================================================== */

.pfx-item {
	position: relative;
	color: var(--pfx-text);
	text-align: left;
}

.pfx-face {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: var(--pfx-radius);
	background: var(--pfx-card-bg);
	box-shadow: var(--pfx-shadow);
	border: 1px solid var(--pfx-line);
	container: pfx-face / inline-size;
}

.pfx-media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: color-mix(in srgb, var(--pfx-text) 8%, var(--pfx-card-bg));
	flex: 0 0 auto;
}

.pfx .pfx-media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
	pointer-events: none;
	-webkit-user-drag: none;
}

.pfx-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	padding: 12px 14px 14px;
}

.pfx .pfx-title {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.012em;
	color: inherit;
	text-transform: none;
	text-wrap: balance;
	overflow-wrap: anywhere;
}

.pfx .pfx-desc {
	margin: 0;
	padding: 0;
	max-width: 52ch;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--pfx-muted);
	text-wrap: pretty;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.pfx a.pfx-btn,
.pfx a.pfx-btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 8px;
	padding: 0.5em 0.95em;
	border: 0;
	border-radius: var(--pfx-btn-r);
	background: var(--pfx-btn-bg, var(--pfx-accent-c));
	color: var(--pfx-btn-text, var(--pfx-on-accent-c));
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.005em;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.pfx a.pfx-btn:hover {
	background: color-mix(in srgb, var(--pfx-btn-bg, var(--pfx-accent-c)) 84%, var(--pfx-card-bg));
	color: var(--pfx-btn-text, var(--pfx-on-accent-c));
}

.pfx a.pfx-btn:focus-visible {
	outline: 2px solid var(--pfx-btn-bg, var(--pfx-accent-c));
	outline-offset: 2px;
}

.pfx-shade {
	position: absolute;
	inset: 0;
	background: #000;
	opacity: 0;
	pointer-events: none;
	border-radius: inherit;
	z-index: 3;
}

.pfx-nodesc .pfx-item .pfx-desc {
	display: none;
}

/* "View larger" on layouts where a tap moves to the next photo. */
.pfx .pfx-enlarge {
	position: absolute;
	z-index: 4;
	top: 10px;
	right: 10px;
	display: none;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--pfx-card-bg);
	color: var(--pfx-text);
	box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.4);
	cursor: pointer;
}

.pfx .pfx-item.is-active .pfx-enlarge {
	display: inline-flex;
}

.pfx .pfx-enlarge svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.pfx .pfx-enlarge:focus-visible {
	outline: 2px solid var(--pfx-accent-c);
	outline-offset: 2px;
}

/* ---------- Caption placement ---------- */

/* Label: a solid wall label pinned to the photo's lower-left corner. */
.pfx-cappos-label .pfx-media {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
}

.pfx-cappos-label .pfx-body,
.pfx-cap-hover .pfx-body {
	position: absolute;
	z-index: 2;
	left: 10px;
	bottom: 10px;
	width: max-content;
	max-width: calc(100% - 20px);
	padding: 10px 12px 12px;
	border-radius: var(--pfx-label-r);
	background: var(--pfx-card-bg);
	color: var(--pfx-text);
	box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.55);
	transition: opacity 0.25s ease, transform 0.4s var(--pfx-ease);
}

.pfx-cappos-label .pfx-face {
	border: 0;
}

/* In moving layouts, side cards keep a title-only label. */
.pfx-cappos-label:not(.pfx-static) .pfx-item:not(.is-active) .pfx-desc,
.pfx-cappos-label:not(.pfx-static) .pfx-item:not(.is-active) .pfx-btn {
	display: none;
}

/* Hover: the label appears when someone points at (or tabs to) a photo. */
.pfx-cap-hover .pfx-body {
	opacity: 0;
	transform: translateY(6px);
	pointer-events: none;
}

.pfx-cap-hover .pfx-item:hover .pfx-body,
.pfx-cap-hover .pfx-item:focus-within .pfx-body {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

@media (hover: none) {
	.pfx-cap-hover .pfx-item.is-active .pfx-body {
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}
}

.pfx-cap-hide .pfx-body {
	display: none;
}

/* Small cards get a smaller label. */
@container pfx-face (max-width: 230px) {
	.pfx-body {
		padding: 8px 10px 10px;
	}
	.pfx .pfx-title {
		font-size: 0.9375rem;
	}
	.pfx .pfx-desc {
		font-size: 0.75rem;
		-webkit-line-clamp: 2;
	}
	.pfx a.pfx-btn {
		margin-top: 6px;
		font-size: 0.75rem;
	}
}

@container pfx-face (max-width: 170px) {
	.pfx .pfx-desc {
		display: none;
	}
}

/* =================================================================
 * Controls: previous · position · next
 * ============================================================== */

.pfx-nav {
	position: relative;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin-top: 18px;
	color: inherit;
}

.pfx .pfx-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 1px solid color-mix(in srgb, currentColor 26%, transparent);
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
	box-shadow: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pfx .pfx-arrow:hover {
	background: color-mix(in srgb, currentColor 9%, transparent);
	border-color: color-mix(in srgb, currentColor 45%, transparent);
	color: inherit;
}

.pfx .pfx-arrow:active {
	background: color-mix(in srgb, currentColor 16%, transparent);
}

.pfx .pfx-arrow:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.pfx .pfx-pause {
	margin-left: 6px;
}

.pfx .pfx-pause .pfx-i-play,
.pfx .pfx-pause[aria-pressed="true"] .pfx-i-pause {
	display: none;
}

.pfx .pfx-pause[aria-pressed="true"] .pfx-i-play {
	display: block;
	fill: currentColor;
	stroke-width: 1.25;
}

/* Galleries without arrows (e.g. the marquee) show the pause button in a corner. */
.pfx .pfx-pause--float {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 6;
	margin: 0;
	background: var(--pfx-card-bg);
	color: var(--pfx-text);
}

/* Grid photos open the viewer from the keyboard too. */
.pfx .pfx-media:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.pfx .pfx-arrow svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.pfx-count {
	min-width: 4.75em;
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	text-align: center;
	letter-spacing: 0.02em;
	opacity: 0.62;
}

.pfx-count b {
	font-weight: 600;
}

.pfx-count i {
	font-style: normal;
}

/* =================================================================
 * Before JS boots (and without JS)
 * ============================================================== */

.pfx:not(.is-ready) .pfx-track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	padding: 8px 4px 16px;
	scroll-snap-type: x mandatory;
	opacity: 0;
	animation: pfx-reveal 0.3s 1.5s forwards;
}

.pfx:not(.is-ready) .pfx-item {
	flex: 0 0 240px;
	scroll-snap-align: center;
}

.pfx-static:not(.is-ready) .pfx-track {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	overflow: visible;
}

.pfx:not(.is-ready) .pfx-count,
.pfx:not(.is-ready) .pfx-enlarge {
	display: none;
}

@keyframes pfx-reveal {
	to {
		opacity: 1;
	}
}

.pfx.is-ready .pfx-item {
	position: absolute;
	top: 0;
	left: 0;
}

.pfx.is-filtering .pfx-track {
	animation: pfx-fade 0.35s ease;
}

@keyframes pfx-fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* =================================================================
 * Portfolio grids: Grid, Masonry, Justified
 * ============================================================== */

.pfx-static .pfx-stage {
	touch-action: auto;
}

.pfx-static.is-ready .pfx-track {
	position: relative;
}

.pfx-static .pfx-item.is-out {
	display: none;
}

.pfx-static.is-placed .pfx-item {
	transition: transform 0.55s var(--pfx-ease), opacity 0.35s ease;
}

.pfx-static .pfx-item.is-entering {
	opacity: 0;
	transition: none;
}

/* Captions below: no card surface, the photo and its caption sit on the page. */
.pfx-static.pfx-cappos-below .pfx-face {
	overflow: visible;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.pfx-static.pfx-cappos-below .pfx-media {
	border-radius: var(--pfx-radius);
}

.pfx-static.pfx-cappos-below.pfx-cap-show .pfx-item {
	color: inherit;
}

.pfx-static.pfx-cappos-below.pfx-cap-show .pfx-body {
	padding: 12px 2px 4px;
}

.pfx-static.pfx-cappos-below.pfx-cap-show .pfx-desc {
	color: inherit;
	opacity: 0.72;
}

.pfx-static.pfx-cappos-below .pfx-shade {
	inset: 0 0 auto 0;
	height: 0;
}

.pfx-static.pfx-cap-hover .pfx-face {
	overflow: hidden;
	border-radius: var(--pfx-radius);
}

.pfx-static.pfx-cap-hover .pfx-media {
	position: relative;
	inset: auto;
}

.pfx--justified .pfx-face {
	border: 0;
}

.pfx--justified .pfx-media,
.pfx--justified.pfx-cap-hover .pfx-media {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
}

/* The photo answers the pointer. */
.pfx-static.pfx-click-lightbox .pfx-media,
.pfx-static.pfx-click-link .pfx-media {
	cursor: zoom-in;
}

.pfx-static.pfx-click-link .pfx-media {
	cursor: pointer;
}

.pfx-static .pfx-media img {
	transition: transform 0.6s var(--pfx-ease);
}

@media (hover: hover) {
	.pfx-static:not(.pfx-click-none) .pfx-item:hover .pfx-media img {
		transform: scale(1.035);
	}
}

/* =================================================================
 * Coverflow
 * ============================================================== */

.pfx--coverflow .pfx-stage {
	overflow: hidden;
	cursor: grab;
	perspective-origin: 50% 40%;
}

.pfx--coverflow.is-ready .pfx-track {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	pointer-events: none;
}

.pfx--coverflow.is-ready .pfx-item {
	pointer-events: auto;
	will-change: transform;
	transform-origin: 50% 50%;
}

.pfx--coverflow .pfx-face {
	border-radius: calc(var(--pfx-radius) + 2px);
	-webkit-box-reflect: below 8px linear-gradient(transparent 76%, rgba(0, 0, 0, 0.16));
}

/* =================================================================
 * 3D Ring — matted prints
 * ============================================================== */

.pfx--ring .pfx-stage {
	overflow: hidden;
	perspective-origin: 50% 15%;
	padding-top: 28px;
}

.pfx--ring .pfx-deco {
	position: absolute;
	left: 14%;
	right: 14%;
	bottom: 10%;
	height: 26%;
	background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.16), transparent 68%);
	pointer-events: none;
}

.pfx--ring.is-ready .pfx-track {
	position: relative;
	transform-style: preserve-3d;
	will-change: transform;
}

.pfx--ring.is-ready .pfx-item {
	left: 50%;
	transform-style: preserve-3d;
	cursor: grab;
}

.pfx--ring .pfx-face {
	padding: var(--pfx-mat);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-webkit-box-reflect: below 10px linear-gradient(transparent 70%, rgba(0, 0, 0, 0.16));
}

.pfx--ring .pfx-media {
	border-radius: max(2px, calc(var(--pfx-radius) - var(--pfx-mat) + 2px));
}

.pfx--ring.pfx-cap-show .pfx-body {
	padding: 12px 6px 6px;
}

.pfx--ring .pfx-back {
	position: absolute;
	inset: 0;
	border-radius: var(--pfx-radius);
	background: var(--pfx-card-back);
	border: 1px solid var(--pfx-line);
	transform: rotateY(180deg);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.pfx-fixed-cards.pfx--ring .pfx-media {
	aspect-ratio: auto;
	flex: 1 1 0;
	min-height: 30%;
}

.pfx-fixed-cards.pfx--ring .pfx-body {
	flex: 0 1 auto;
	min-height: 0;
	overflow: hidden;
}

/* =================================================================
 * Expanding Panels
 * ============================================================== */

.pfx--panels .pfx-stage {
	perspective: 1600px;
	padding: clamp(10px, 4%, 22px) clamp(10px, 3%, 40px);
	touch-action: auto;
}

.pfx--panels.is-ready .pfx-track {
	pointer-events: none;
	display: flex;
	align-items: center;
	gap: var(--pfx-gap-panels, 10px);
	height: 100%;
	transform-style: preserve-3d;
}

.pfx--panels.is-ready .pfx-item {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	height: 88%;
	cursor: pointer;
	pointer-events: auto;
	container: pfx-panel / size;
	transform: rotateY(calc(var(--pfx-side, 0) * -9deg)) translateZ(calc(var(--pfx-dist, 0) * -8px)) scale(0.97);
	transition: flex-grow 0.75s var(--pfx-ease), height 0.75s var(--pfx-ease), transform 0.75s var(--pfx-ease), translate 0.3s var(--pfx-ease), scale 0.3s var(--pfx-ease);
}

.pfx--panels.is-ready .pfx-item.is-active {
	flex-grow: var(--pfx-expand, 4);
	height: 100%;
	cursor: zoom-in;
	transform: translateZ(26px) scale(1);
}

.pfx--panels.pfx-click-none .pfx-item.is-active {
	cursor: default;
}

.pfx--panels .pfx-face {
	transition: box-shadow 0.3s ease;
}

.pfx--panels .pfx-item.is-active .pfx-face {
	box-shadow: var(--pfx-shadow-lg);
}

.pfx--panels .pfx-media img {
	transition: transform 0.9s var(--pfx-ease), filter 0.3s ease;
	transform: scale(1.12);
}

.pfx--panels .pfx-item.is-active .pfx-media img {
	transform: scale(1);
}

.pfx--panels .pfx-body {
	left: 14px;
	bottom: 14px;
	max-width: min(calc(100% - 28px), 46ch);
	padding: 12px 14px 14px;
}

.pfx--panels .pfx-item:not(.is-active) .pfx-body {
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
}

.pfx--panels.pfx-cap-show .pfx-item.is-active .pfx-body {
	transition-delay: 0.3s;
}

.pfx--panels .pfx-title {
	font-size: clamp(1.0625rem, 1.8vw, 1.3125rem);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.pfx--panels .pfx-desc {
	-webkit-line-clamp: 2;
}

@container pfx-panel (max-height: 300px) {
	.pfx--panels .pfx-body {
		left: 10px;
		bottom: 10px;
		padding: 8px 10px 10px;
	}
	.pfx--panels .pfx-desc {
		display: none;
	}
	.pfx--panels .pfx-title {
		font-size: 1rem;
		-webkit-line-clamp: 1;
	}
}

.pfx--panels .pfx-item:not(.is-active) .pfx-shade {
	opacity: 0.24;
}

.pfx--panels .pfx-shade {
	transition: opacity 0.3s ease;
}

@media (hover: hover) {
	.pfx-hover-glow.pfx--panels .pfx-item:not(.is-active):hover {
		translate: 0 -5px;
	}
	.pfx-hover-glow.pfx--panels .pfx-item:not(.is-active):hover .pfx-face {
		box-shadow: 0 0 0 2px var(--pfx-accent-c), var(--pfx-shadow-lg);
	}
	.pfx-hover-glow.pfx--panels .pfx-item:not(.is-active):hover .pfx-shade,
	.pfx-hover-lift.pfx--panels .pfx-item:not(.is-active):hover .pfx-shade,
	.pfx-hover-zoom.pfx--panels .pfx-item:not(.is-active):hover .pfx-shade {
		opacity: 0;
	}
	.pfx-hover-lift.pfx--panels .pfx-item:hover {
		translate: 0 -12px;
	}
	.pfx-hover-lift.pfx--panels .pfx-item:not(.is-active):hover {
		scale: 1.03;
	}
	.pfx-hover-lift.pfx--panels .pfx-item:hover .pfx-face {
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 40px 60px -22px rgba(0, 0, 0, 0.6);
	}
	.pfx-hover-zoom.pfx--panels .pfx-item:not(.is-active):hover .pfx-media img {
		transform: scale(1.26);
		filter: brightness(1.12) saturate(1.12);
	}
	.pfx-hover-spotlight.pfx--panels .pfx-track:hover .pfx-item .pfx-shade {
		opacity: 0.58;
	}
	.pfx-hover-spotlight.pfx--panels .pfx-track:hover .pfx-item:hover .pfx-shade {
		opacity: 0;
	}
}

.pfx--panels .pfx-item:not(.is-active):focus-within .pfx-face {
	box-shadow: 0 0 0 2px var(--pfx-accent-c), var(--pfx-shadow);
}

.pfx--panels.is-vertical .pfx-track {
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
}

.pfx--panels.is-vertical.is-ready .pfx-item {
	width: 100%;
	height: auto;
	transform: rotateX(calc(var(--pfx-side, 0) * 8deg)) scale(0.98);
}

.pfx--panels.is-vertical.is-ready .pfx-item.is-active {
	flex: 0 0 60%;
	transform: translateZ(10px);
}

.pfx--panels.is-vertical.is-ready .pfx-item.is-far {
	display: none;
}

/* =================================================================
 * Lightbox
 * ============================================================== */

html.pfx-lb-lock {
	overflow: hidden;
}

.pfx-lb {
	--pfx-lb-ink: #f3f0eb;
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	grid-template-rows: auto 1fr;
	color: var(--pfx-lb-ink);
	font-size: 16px;
	line-height: 1.4;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.pfx-lb[hidden] {
	display: none;
}

.pfx-lb.is-open {
	opacity: 1;
}

.pfx-lb *,
.pfx-lb *::before,
.pfx-lb *::after {
	box-sizing: border-box;
}

.pfx-lb-backdrop {
	position: absolute;
	inset: 0;
	background: #121110;
	opacity: var(--pfx-lb-fade, 1);
}

.pfx-lb-bar {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px 0 22px;
}

.pfx-lb-count {
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	opacity: 0.7;
}

.pfx-lb button {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	box-shadow: none;
	cursor: pointer;
}

.pfx-lb-close,
.pfx-lb-nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(243, 240, 235, 0.22) !important;
	transition: background-color 0.15s ease;
}

.pfx-lb-close:hover,
.pfx-lb-nav:hover {
	background: rgba(243, 240, 235, 0.1) !important;
}

.pfx-lb-close:focus-visible,
.pfx-lb-nav:focus-visible,
.pfx-lb-btn:focus-visible {
	outline: 2px solid var(--pfx-lb-ink);
	outline-offset: 2px;
}

.pfx-lb svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.pfx-lb-figure {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
	min-height: 0;
	margin: 0;
	padding: 12px clamp(12px, 7vw, 96px) 24px;
}

.pfx-lb-media {
	position: relative;
	display: flex;
	justify-content: center;
	min-height: 0;
	max-width: 100%;
	transition: transform 0.45s var(--pfx-ease);
	touch-action: none;
}

.pfx-lb-img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: calc(100vh - 210px);
	max-height: calc(100dvh - 210px);
	margin: 0;
	border-radius: 4px;
	object-fit: contain;
	box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8);
	user-select: none;
	-webkit-user-drag: none;
}

.pfx-lb.is-measuring .pfx-lb-media {
	transform: none !important;
}

/* The caption is a wall label beneath the photo, as wide as the photo. */
.pfx-lb-frame {
	display: table;
	margin: 0 auto;
}

.pfx-lb-cap {
	display: table-caption;
	caption-side: bottom;
	padding: 16px 0 0;
	text-align: left;
}

.pfx-lb-capin {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 16px;
	min-width: min(320px, 80vw);
}

.pfx-lb-cap[hidden] {
	display: none;
}

.pfx-lb .pfx-lb-title {
	margin: 0;
	font-family: inherit;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: inherit;
}

.pfx-lb .pfx-lb-desc {
	flex-basis: 100%;
	order: 3;
	max-width: 64ch;
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.55;
	opacity: 0.74;
}

.pfx-lb a.pfx-lb-btn {
	margin-left: auto;
	padding: 0.5em 0.95em;
	border-radius: 6px;
	background: var(--pfx-lb-ink);
	color: #121110;
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.pfx-lb a.pfx-lb-btn:hover {
	background: #fff;
	color: #121110;
}

.pfx-lb-nav {
	position: absolute;
	z-index: 3;
	top: 50%;
	transform: translateY(-50%);
}

.pfx-lb-prev {
	left: clamp(8px, 2vw, 24px);
}

.pfx-lb-next {
	right: clamp(8px, 2vw, 24px);
}

.pfx-lb-nav[hidden] {
	display: none;
}

@media (max-width: 640px) {
	.pfx-lb-nav {
		top: auto;
		bottom: 18px;
		transform: none;
	}
	.pfx-lb-figure {
		padding-bottom: 78px;
	}
	.pfx-lb-img {
		max-height: calc(100vh - 260px);
		max-height: calc(100dvh - 260px);
	}
	.pfx-lb a.pfx-lb-btn {
		margin-left: 0;
	}
}

/* =================================================================
 * Phone layout switch, width and alignment
 * ============================================================== */

@media (max-width: 639.98px) {
	.pfx-responsive > .pfx-desktop-only {
		display: none;
	}
	.pfx {
		--pfx-wn: var(--pfx-wp, 100);
	}
}

@media (min-width: 640px) {
	.pfx-responsive > .pfx-phone-only {
		display: none;
	}
}

.pfx-align-left {
	--pfx-af: 0;
	margin-left: 0;
	margin-right: auto;
}

.pfx-align-center {
	--pfx-af: 0.5;
}

.pfx-align-right {
	--pfx-af: 1;
	margin-left: auto;
	margin-right: 0;
}

.pfx.pfx-basis-screen {
	--pfx-vw: calc(100vw - var(--pfx-sbw, 0px));
	--pfx-aw: min(calc(var(--pfx-wn) * var(--pfx-vw) / 100), var(--pfx-max-w, 100000px));
	width: var(--pfx-aw);
	max-width: none;
	margin-left: calc(50% - var(--pfx-vw) / 2 + (var(--pfx-vw) - var(--pfx-aw)) * var(--pfx-af, 0.5));
	margin-right: 0;
}

/* Block editor alignment */
.wp-block-prismfx-gallery.alignfull .pfx,
.wp-block-prismfx-gallery.alignwide .pfx {
	max-width: none;
}

/* =================================================================
 * Motion preferences
 * ============================================================== */

@media (prefers-reduced-motion: reduce) {
	.pfx *,
	.pfx *::before,
	.pfx *::after,
	.pfx-lb,
	.pfx-lb * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}