/**
 * Image Gallery — .espt-block-gallery
 *
 * Root classes: is-layout-{grid|masonry|slider} is-ratio-{original|square|
 *   portrait|tall|landscape|wide} is-hover-{none|zoom|overlay|caption|
 *   instagram|tilt} is-heading-position-{top|left|right} is-text-align-*
 *   is-head-valign-* is-body-valign-* is-cap-below/no-cap-below
 *   is-cap-align-* is-shadow-{soft|strong} is-anim-{none|fade|up|zoom}
 *   is-lightbox/no-lightbox is-lb-theme-{dark|light}
 * JS state on .espt-gal: is-anim-ready → is-inview → is-anim-done.
 * Base states with no rule of their own (they are what the plain styles do):
 *   is-layout-grid, is-heading-position-top, is-ratio-square (via --ar),
 *   no-lightbox, is-lb-theme-dark.
 * Vars: --cols --gap --radius --border-w --head-w --head-gap --head-pad
 *   --head-radius --title-size --sub-size --eyebrow-size --cap-size
 *   --btn-radius and the colour vars (--title-color, --overlay-color …).
 */

/* --------------------------------------------------------------- shell */
.espt-block-gallery .espt-gal {
	min-width: 0;
}

.espt-block-gallery .espt-gal-body {
	min-width: 0;
}

/* --------------------------------------------------------------- head */
.espt-block-gallery .espt-gal-head {
	background: var(--head-bg, transparent);
	border-radius: var(--head-radius, 0);
	margin: 0 0 var(--head-gap, 22px);
	min-width: 0;
	padding: var(--head-pad, 0);
	text-align: center;
}

.espt-block-gallery.is-text-align-left .espt-gal-head { text-align: left; }
.espt-block-gallery.is-text-align-right .espt-gal-head { text-align: right; }

/* Border only shows once a colour is picked (transparent otherwise). */
.espt-block-gallery .espt-gal-head { border: 1px solid var(--head-line, transparent); }

.espt-block-gallery .espt-gal-eyebrow {
	color: var(--eyebrow-color, var(--bd-primary));
	display: inline-block;
	font-size: var(--eyebrow-size, 13px);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	margin: 0 0 10px;
	overflow-wrap: anywhere;
	text-transform: uppercase;
}

.espt-block-gallery .espt-gal-title {
	color: var(--title-color, var(--bd-ink));
	font-size: var(--title-size, 24px);
	font-weight: 800;
	line-height: 1.2;
	margin: 0 0 12px;
	overflow-wrap: anywhere;
}

.espt-block-gallery .espt-gal-sub {
	color: var(--sub-color, var(--bd-muted));
	font-size: var(--sub-size, 16px);
	line-height: 1.7;
	margin: 0;
	overflow-wrap: anywhere;
}

/* Heading buttons. */
.espt-block-gallery .espt-gal-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-top: 20px;
}

.espt-block-gallery.is-text-align-left .espt-gal-actions { justify-content: flex-start; }
.espt-block-gallery.is-text-align-right .espt-gal-actions { justify-content: flex-end; }

.espt-block-gallery .espt-gal-btn {
	align-items: center;
	background: var(--btn1-bg, var(--espt-btn-bg, var(--bd-primary)));
	border: 2px solid transparent;
	border-radius: var(--btn-radius, 10px);
	color: var(--btn1-color, #fff);
	cursor: pointer;
	display: inline-flex;
	font-size: 15px;
	font-weight: 700;
	gap: 8px;
	justify-content: center;
	line-height: 1.3;
	max-width: 100%;
	min-width: 0;
	padding: 12px 22px;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, filter 0.15s ease;
}

.espt-block-gallery .espt-gal-btn:hover {
	color: var(--btn1-color, #fff);
	filter: brightness(1.07);
	transform: translateY(-1px);
}

.espt-block-gallery .espt-gal-btn-secondary {
	background: transparent;
	border-color: var(--btn2-color, var(--bd-primary));
	color: var(--btn2-color, var(--bd-primary));
}

.espt-block-gallery .espt-gal-btn-secondary:hover {
	background: var(--bd-soft);
	color: var(--btn2-color, var(--bd-primary));
	filter: none;
}

.espt-block-gallery .espt-gal-bt { overflow-wrap: anywhere; }
.espt-block-gallery .espt-gal-bi { font-size: 1.15em; }

/* ------------------------------------------------------------- layouts */
.espt-block-gallery .espt-gal-grid {
	display: grid;
	gap: var(--gap, 12px);
	grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
}

.espt-block-gallery .espt-gal-masonry {
	column-count: var(--cols, 2);
	column-gap: var(--gap, 12px);
}

.espt-block-gallery .espt-gal-masonry .espt-gal-item {
	break-inside: avoid;
	display: inline-block;
	margin-bottom: var(--gap, 12px);
	width: 100%;
}

.espt-block-gallery .espt-gal-slider { position: relative; }

/* overflow-x:auto makes overflow-y "auto" too, so the vertical padding is what
   keeps the lift/tilt hover and the drop shadows from being clipped. */
.espt-block-gallery .espt-gal-track {
	-webkit-overflow-scrolling: touch;
	display: flex;
	gap: var(--gap, 12px);
	overflow-x: auto;
	padding: 8px 0 10px;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.espt-block-gallery .espt-gal-track::-webkit-scrollbar { display: none; }

.espt-block-gallery.is-layout-slider .espt-gal-item {
	flex: 0 0 calc((100% - (var(--cols, 2) - 1) * var(--gap, 12px)) / var(--cols, 2));
	scroll-snap-align: start;
}

/* ---------------------------------------------------------------- tile */
.espt-block-gallery .espt-gal-item {
	border-radius: var(--radius, 12px);
	margin: 0;
	min-width: 0;
	position: relative;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.espt-block-gallery .espt-gal-link {
	border-radius: inherit;
	color: inherit;
	display: block;
	position: relative;
	text-decoration: none;
}

/* Only the tiles that really open the viewer advertise it. */
.espt-block-gallery.is-lightbox a.espt-gal-link[data-espt-lb] { cursor: zoom-in; }

.espt-block-gallery .espt-gal-link:focus-visible {
	outline: 3px solid var(--bd-accent);
	outline-offset: 3px;
}

.espt-block-gallery .espt-gal-media {
	background: var(--tile-bg, var(--bd-soft));
	border: var(--border-w, 0) solid var(--border-color, var(--bd-line));
	border-radius: inherit;
	display: block;
	overflow: hidden;
	position: relative;
}

.espt-block-gallery .espt-gal-img {
	display: block;
	height: auto;
	width: 100%;
}

/* Inline SVG stand-in for a row with no picture yet. object-fit does not
   apply to inline SVG, so the crop comes from preserveAspectRatio="slice"
   plus the explicit box below. */
.espt-block-gallery .espt-gal-ph {
	background: var(--tile-bg, var(--bd-soft));
	color: var(--bd-primary);
}

.espt-block-gallery.is-shadow-soft .espt-gal-media { box-shadow: 0 8px 24px -12px rgba(15, 23, 42, 0.35); }
.espt-block-gallery.is-shadow-strong .espt-gal-media { box-shadow: 0 20px 40px -18px rgba(15, 23, 42, 0.55); }

/* Cropped shapes (never in masonry, never with "Original"). */
.espt-block-gallery.is-ratio-square { --ar: 1 / 1; }
.espt-block-gallery.is-ratio-portrait { --ar: 4 / 5; }
.espt-block-gallery.is-ratio-tall { --ar: 3 / 4; }
.espt-block-gallery.is-ratio-landscape { --ar: 4 / 3; }
.espt-block-gallery.is-ratio-wide { --ar: 16 / 9; }

.espt-block-gallery:not(.is-layout-masonry):not(.is-ratio-original) .espt-gal-media {
	aspect-ratio: var(--ar, 1 / 1);
}

.espt-block-gallery:not(.is-layout-masonry):not(.is-ratio-original) .espt-gal-img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* -------------------------------------------------------------- hovers */
.espt-block-gallery.is-hover-zoom .espt-gal-img,
.espt-block-gallery.is-hover-overlay .espt-gal-img,
.espt-block-gallery.is-hover-instagram .espt-gal-img,
.espt-block-gallery.is-hover-tilt .espt-gal-img {
	transition: transform 0.5s ease;
}

.espt-block-gallery.is-hover-zoom .espt-gal-item:hover .espt-gal-img,
.espt-block-gallery.is-hover-zoom .espt-gal-item:focus-within .espt-gal-img,
.espt-block-gallery.is-hover-overlay .espt-gal-item:hover .espt-gal-img,
.espt-block-gallery.is-hover-overlay .espt-gal-item:focus-within .espt-gal-img,
.espt-block-gallery.is-hover-instagram .espt-gal-item:hover .espt-gal-img,
.espt-block-gallery.is-hover-instagram .espt-gal-item:focus-within .espt-gal-img {
	transform: scale(1.06);
}

.espt-block-gallery.is-hover-tilt .espt-gal-item:hover,
.espt-block-gallery.is-hover-tilt .espt-gal-item:focus-within {
	box-shadow: 0 22px 44px -20px rgba(15, 23, 42, 0.55);
	transform: translateY(-6px) rotate(-1deg);
	z-index: 2;
}

/* Overlay layer (magnifier / gradient). */
.espt-block-gallery .espt-gal-ov {
	align-items: center;
	display: flex;
	inset: 0;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transition: opacity 0.3s ease;
}

.espt-block-gallery .espt-gal-ovi {
	color: var(--overlay-ink, #fff);
	font-size: 32px;
	transform: scale(0.82);
	transition: transform 0.3s ease;
}

.espt-block-gallery.is-hover-overlay .espt-gal-ov {
	background: var(--overlay-color, rgba(15, 23, 42, 0.45));
}

.espt-block-gallery.is-hover-instagram .espt-gal-ov {
	align-items: flex-end;
	background: var(--overlay-color, linear-gradient(to top, rgba(15, 23, 42, 0.62) 0%, rgba(15, 23, 42, 0) 58%));
	justify-content: flex-start;
	padding: 14px;
}

.espt-block-gallery.is-hover-instagram .espt-gal-ovi { font-size: 24px; }

.espt-block-gallery.is-hover-overlay .espt-gal-item:hover .espt-gal-ov,
.espt-block-gallery.is-hover-overlay .espt-gal-item:focus-within .espt-gal-ov,
.espt-block-gallery.is-hover-instagram .espt-gal-item:hover .espt-gal-ov,
.espt-block-gallery.is-hover-instagram .espt-gal-item:focus-within .espt-gal-ov {
	opacity: 1;
}

.espt-block-gallery .espt-gal-item:hover .espt-gal-ovi,
.espt-block-gallery .espt-gal-item:focus-within .espt-gal-ovi {
	transform: none;
}

/* Small magnifier badge for the effects with no overlay of their own. It sits
   on a fixed white pill, so it keeps its own dark ink rather than following
   --overlay-ink (which is usually white, for the dark overlay). */
.espt-block-gallery .espt-gal-zi {
	align-items: center;
	background: rgba(255, 255, 255, 0.92);
	border-radius: 999px;
	color: var(--bd-ink);
	display: inline-flex;
	font-size: 15px;
	height: 32px;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	right: 10px;
	top: 10px;
	transform: scale(0.7);
	transition: opacity 0.25s ease, transform 0.25s ease;
	width: 32px;
}

.espt-block-gallery .espt-gal-item:hover .espt-gal-zi,
.espt-block-gallery .espt-gal-item:focus-within .espt-gal-zi {
	opacity: 1;
	transform: none;
}

/* ------------------------------------------------------------ captions */
/* On the image (default) — slides up on hover / keyboard focus. */
.espt-block-gallery.no-cap-below .espt-gal-media .espt-gal-cap {
	background: linear-gradient(to top, rgba(15, 23, 42, 0.82), rgba(15, 23, 42, 0));
	bottom: 0;
	color: #fff;
	display: block;
	font-size: var(--cap-size, 14px);
	font-weight: 600;
	left: 0;
	line-height: 1.35;
	margin: 0;
	opacity: 0;
	overflow-wrap: anywhere;
	padding: 24px 14px 12px;
	pointer-events: none;
	position: absolute;
	right: 0;
	transform: translateY(101%);
	transition: transform 0.32s ease, opacity 0.32s ease;
	z-index: 2;
}

.espt-block-gallery.no-cap-below .espt-gal-item:hover .espt-gal-media .espt-gal-cap,
.espt-block-gallery.no-cap-below .espt-gal-item:focus-within .espt-gal-media .espt-gal-cap {
	opacity: 1;
	transform: none;
}

/* "No hover effect" keeps the caption pinned instead of hiding it behind a
   hover the visitor may never perform — so it reads differently from the
   "Caption slides up" effect. */
.espt-block-gallery.is-hover-none.no-cap-below .espt-gal-media .espt-gal-cap {
	opacity: 1;
	transform: none;
	transition: none;
}

/* "Caption slides up" is the only effect with no image movement of its own,
   so the band itself carries the look: a deeper, taller panel. */
.espt-block-gallery.is-hover-caption.no-cap-below .espt-gal-media .espt-gal-cap {
	background: linear-gradient(to top, rgba(15, 23, 42, 0.92) 0%, rgba(15, 23, 42, 0.84) 55%, rgba(15, 23, 42, 0) 100%);
	padding: 32px 14px 14px;
}

/* Below the image. */
.espt-block-gallery.is-cap-below .espt-gal-cap-b {
	color: var(--cap-color, var(--bd-body));
	font-size: var(--cap-size, 14px);
	font-weight: 600;
	line-height: 1.45;
	margin: 10px 2px 0;
	overflow-wrap: anywhere;
	text-align: center;
}

.espt-block-gallery.is-cap-align-left .espt-gal-cap-b { text-align: left; }
.espt-block-gallery.is-cap-align-right .espt-gal-cap-b { text-align: right; }

/* Touch screens never hover: reveal the caption, the Instagram gradient and
   the zoom badge so the tiles are not silently missing half their content. */
@media (hover: none) {
	.espt-block-gallery.no-cap-below .espt-gal-media .espt-gal-cap,
	.espt-block-gallery .espt-gal-zi,
	.espt-block-gallery.is-hover-instagram .espt-gal-ovi {
		opacity: 1;
		transform: none;
	}

	.espt-block-gallery.is-hover-instagram .espt-gal-ov { opacity: 1; }
}

/* ------------------------------------------------------ slider chrome */
.espt-block-gallery .espt-gal-arrow {
	align-items: center;
	background: var(--arrow-bg, #fff);
	border: 0;
	border-radius: 50%;
	box-shadow: 0 6px 18px rgba(17, 24, 39, 0.18);
	color: var(--arrow-color, var(--bd-ink));
	cursor: pointer;
	display: inline-flex;
	font-size: 20px;
	height: 40px;
	justify-content: center;
	padding: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	transition: opacity 0.2s ease, transform 0.2s ease;
	width: 40px;
	z-index: 3;
}

.espt-block-gallery .espt-gal-arrow:hover { transform: translateY(-50%) scale(1.07); }
.espt-block-gallery .espt-gal-arrow:focus-visible { outline: 3px solid var(--bd-accent); outline-offset: 2px; }
.espt-block-gallery .espt-gal-prev { left: 6px; }
.espt-block-gallery .espt-gal-next { right: 6px; }

.espt-block-gallery .espt-gal-arrow[disabled] {
	opacity: 0;
	pointer-events: none;
}

/* Sibling of .espt-gal-slider — the track already carries 10px of bottom
   padding, so the dots only need a little more air. */
.espt-block-gallery .espt-gal-dots {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	justify-content: center;
	margin-top: 6px;
}

.espt-block-gallery .espt-gal-dots[hidden] { display: none; }

.espt-block-gallery .espt-gal-dot {
	background: var(--bd-line);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	height: 8px;
	padding: 0;
	transition: background 0.2s ease, transform 0.2s ease;
	width: 8px;
}

.espt-block-gallery .espt-gal-dot.is-active {
	background: var(--dot-color, var(--bd-primary));
	transform: scale(1.3);
}

.espt-block-gallery .espt-gal-dot:focus-visible { outline: 2px solid var(--bd-accent); outline-offset: 2px; }

/* --------------------------------------------------- entrance animation */
/* The JS adds .is-anim-ready, so if it never runs the tiles stay visible.
   Once the tiles have landed it adds .is-anim-done, which retires the whole
   entrance layer — otherwise the 0.6s timing and the stagger delay below
   would keep overriding the tiles' own hover transitions for ever. */
.espt-block-gallery .espt-gal.is-anim-ready:not(.is-anim-done) .espt-gal-anim {
	opacity: 0;
	transition: opacity 0.6s ease, transform 0.6s ease;
	will-change: opacity, transform;
}

.espt-block-gallery.is-anim-up .espt-gal.is-anim-ready:not(.is-anim-done) .espt-gal-anim { transform: translateY(26px); }
.espt-block-gallery.is-anim-zoom .espt-gal.is-anim-ready:not(.is-anim-done) .espt-gal-anim { transform: scale(0.92); }

.espt-block-gallery .espt-gal.is-anim-ready:not(.is-anim-done).is-inview .espt-gal-anim {
	opacity: 1;
	transform: none;
}

.espt-block-gallery .espt-gal.is-anim-ready:not(.is-anim-done).is-inview .espt-gal-anim:nth-child(1) { transition-delay: 0.05s; }
.espt-block-gallery .espt-gal.is-anim-ready:not(.is-anim-done).is-inview .espt-gal-anim:nth-child(2) { transition-delay: 0.12s; }
.espt-block-gallery .espt-gal.is-anim-ready:not(.is-anim-done).is-inview .espt-gal-anim:nth-child(3) { transition-delay: 0.19s; }
.espt-block-gallery .espt-gal.is-anim-ready:not(.is-anim-done).is-inview .espt-gal-anim:nth-child(4) { transition-delay: 0.26s; }
.espt-block-gallery .espt-gal.is-anim-ready:not(.is-anim-done).is-inview .espt-gal-anim:nth-child(5) { transition-delay: 0.33s; }
.espt-block-gallery .espt-gal.is-anim-ready:not(.is-anim-done).is-inview .espt-gal-anim:nth-child(6) { transition-delay: 0.4s; }
.espt-block-gallery .espt-gal.is-anim-ready:not(.is-anim-done).is-inview .espt-gal-anim:nth-child(7) { transition-delay: 0.47s; }
.espt-block-gallery .espt-gal.is-anim-ready:not(.is-anim-done).is-inview .espt-gal-anim:nth-child(n + 8) { transition-delay: 0.54s; }

/* ------------------------------------------------------------ lightbox */
/* Mounted on <body> in a portal that copies the block's classes + vars, so
   an ancestor transform can never trap the fixed overlay. */
.espt-block-gallery.espt-gal-portal {
	bottom: 0;
	left: 0;
	margin: 0;
	max-width: none;
	position: fixed;
	right: 0;
	top: 0;
	width: auto;
	z-index: 99999;
}

html.espt-gal-locked { overflow: hidden; }

.espt-block-gallery .espt-gal-lb {
	align-items: center;
	background: rgba(2, 6, 23, 0.93);
	bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	left: 0;
	padding: 14px 10px 20px;
	position: absolute;
	right: 0;
	top: 0;
}

.espt-block-gallery .espt-gal-lb[hidden] { display: none; }
.espt-block-gallery.is-lb-theme-light .espt-gal-lb { background: rgba(248, 250, 252, 0.97); }

.espt-block-gallery .espt-gal-lb-in {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: min(1100px, 94vw);
	min-width: 0;
	user-select: none; /* a swipe must not select the caption text */
}

.espt-block-gallery .espt-gal-lb-img {
	animation: espt-gal-pop 0.25s ease;
	background: rgba(0, 0, 0, 0.3);
	border-radius: 10px;
	display: block;
	max-height: 66vh;
	max-width: 100%;
	object-fit: contain;
}

.espt-block-gallery.is-lb-theme-light .espt-gal-lb-img { background: rgba(15, 23, 42, 0.06); }

@keyframes espt-gal-pop {
	from { opacity: 0.4; transform: scale(0.965); }
	to { opacity: 1; transform: none; }
}

.espt-block-gallery .espt-gal-lb-cap {
	color: rgba(255, 255, 255, 0.92);
	font-size: 14px;
	line-height: 1.5;
	max-width: 720px;
	overflow-wrap: anywhere;
	text-align: center;
}

.espt-block-gallery.is-lb-theme-light .espt-gal-lb-cap { color: var(--bd-ink); }
.espt-block-gallery .espt-gal-lb-cap:empty { display: none; }

.espt-block-gallery .espt-gal-lb-btn {
	align-items: center;
	background: rgba(255, 255, 255, 0.16);
	border: 0;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	font-size: 22px;
	height: 40px;
	justify-content: center;
	line-height: 1;
	padding: 0;
	position: absolute;
	transition: background 0.15s ease, transform 0.15s ease;
	width: 40px;
	z-index: 2;
}

.espt-block-gallery.is-lb-theme-light .espt-gal-lb-btn { background: rgba(15, 23, 42, 0.1); color: var(--bd-ink); }
.espt-block-gallery .espt-gal-lb-btn:hover { background: rgba(255, 255, 255, 0.3); transform: scale(1.07); }
.espt-block-gallery.is-lb-theme-light .espt-gal-lb-btn:hover { background: rgba(15, 23, 42, 0.18); }
.espt-block-gallery .espt-gal-lb-btn:focus-visible { outline: 3px solid var(--bd-accent); outline-offset: 2px; }

.espt-block-gallery .espt-gal-lb-x { right: 10px; top: 10px; }
.espt-block-gallery .espt-gal-lb-prev { bottom: 14px; left: calc(50% - 52px); }
.espt-block-gallery .espt-gal-lb-next { bottom: 14px; right: calc(50% - 52px); }

.espt-block-gallery .espt-gal-lb-n {
	bottom: 62px;
	color: rgba(255, 255, 255, 0.75);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	position: absolute;
}

.espt-block-gallery.is-lb-theme-light .espt-gal-lb-n { color: var(--bd-muted); }

/* ------------------------------------------------------------- tablet */
@media (min-width: 768px) {
	.espt-block-gallery.is-heading-position-left .espt-gal,
	.espt-block-gallery.is-heading-position-right .espt-gal {
		align-items: flex-start;
		display: flex;
		flex-wrap: wrap; /* a very wide side heading drops the images below it */
		gap: var(--head-gap, 32px);
	}

	.espt-block-gallery.is-heading-position-right .espt-gal { flex-direction: row-reverse; }

	.espt-block-gallery.is-heading-position-left .espt-gal-head,
	.espt-block-gallery.is-heading-position-right .espt-gal-head {
		flex: 0 0 var(--head-w, 30%);
		margin-bottom: 0;
		max-width: var(--head-w, 30%);
	}

	.espt-block-gallery.is-heading-position-left .espt-gal-body,
	.espt-block-gallery.is-heading-position-right .espt-gal-body {
		align-self: center;
		flex: 1 1 240px;
		min-width: 0;
	}

	.espt-block-gallery.is-head-valign-start .espt-gal-head { align-self: flex-start; }
	.espt-block-gallery.is-head-valign-center .espt-gal-head { align-self: center; }
	.espt-block-gallery.is-head-valign-end .espt-gal-head { align-self: flex-end; }

	.espt-block-gallery.is-body-valign-start .espt-gal-body { align-self: flex-start; }
	.espt-block-gallery.is-body-valign-center .espt-gal-body { align-self: center; }
	.espt-block-gallery.is-body-valign-end .espt-gal-body { align-self: flex-end; }

	.espt-block-gallery .espt-gal-arrow {
		height: 44px;
		width: 44px;
	}

	.espt-block-gallery .espt-gal-prev { left: 8px; }
	.espt-block-gallery .espt-gal-next { right: 8px; }

	.espt-block-gallery .espt-gal-lb { padding: 40px 16px; }
	.espt-block-gallery .espt-gal-lb-img { max-height: 76vh; }
	.espt-block-gallery .espt-gal-lb-btn { height: 44px; width: 44px; }
	.espt-block-gallery .espt-gal-lb-prev { bottom: auto; left: 16px; top: calc(50% - 22px); }
	.espt-block-gallery .espt-gal-lb-next { bottom: auto; right: 16px; top: calc(50% - 22px); }
	.espt-block-gallery .espt-gal-lb-n { bottom: 16px; }
}

/* ------------------------------------------------------------ desktop */
@media (min-width: 1024px) {
	.espt-block-gallery .espt-gal-lb-img { max-height: 80vh; }
	.espt-block-gallery .espt-gal-arrow { opacity: 0.92; }
	.espt-block-gallery .espt-gal-slider:hover .espt-gal-arrow { opacity: 1; }
}

/* -------------------------------------------------------- calm motion */
/* Each block below has to match the specificity of the rule it cancels —
   the hover rules are .is-hover-* scoped (0,3,0 / 0,4,0), so a plain
   ".espt-block-gallery .espt-gal-img" would silently lose. */
@media (prefers-reduced-motion: reduce) {
	.espt-block-gallery .espt-gal-item,
	.espt-block-gallery .espt-gal-ov,
	.espt-block-gallery .espt-gal-ovi,
	.espt-block-gallery .espt-gal-zi,
	.espt-block-gallery .espt-gal-btn,
	.espt-block-gallery .espt-gal-arrow,
	.espt-block-gallery .espt-gal-dot,
	.espt-block-gallery .espt-gal-lb-btn {
		transition: none;
	}

	.espt-block-gallery.is-hover-zoom .espt-gal-img,
	.espt-block-gallery.is-hover-overlay .espt-gal-img,
	.espt-block-gallery.is-hover-instagram .espt-gal-img,
	.espt-block-gallery.is-hover-tilt .espt-gal-img,
	.espt-block-gallery.no-cap-below .espt-gal-media .espt-gal-cap {
		transition: none;
	}

	.espt-block-gallery.is-hover-zoom .espt-gal-item:hover .espt-gal-img,
	.espt-block-gallery.is-hover-zoom .espt-gal-item:focus-within .espt-gal-img,
	.espt-block-gallery.is-hover-overlay .espt-gal-item:hover .espt-gal-img,
	.espt-block-gallery.is-hover-overlay .espt-gal-item:focus-within .espt-gal-img,
	.espt-block-gallery.is-hover-instagram .espt-gal-item:hover .espt-gal-img,
	.espt-block-gallery.is-hover-instagram .espt-gal-item:focus-within .espt-gal-img,
	.espt-block-gallery.is-hover-tilt .espt-gal-item:hover,
	.espt-block-gallery.is-hover-tilt .espt-gal-item:focus-within,
	.espt-block-gallery .espt-gal-btn:hover,
	.espt-block-gallery .espt-gal-lb-btn:hover {
		transform: none;
	}

	/* The arrow keeps its centring transform, just loses the pop. */
	.espt-block-gallery .espt-gal-arrow:hover { transform: translateY(-50%); }

	.espt-block-gallery .espt-gal-lb-img { animation: none; }

	/* Specificity has to beat .is-anim-up/.is-anim-zoom above (0,5,0). */
	.espt-block-gallery.is-anim-fade .espt-gal.is-anim-ready:not(.is-anim-done) .espt-gal-anim,
	.espt-block-gallery.is-anim-up .espt-gal.is-anim-ready:not(.is-anim-done) .espt-gal-anim,
	.espt-block-gallery.is-anim-zoom .espt-gal.is-anim-ready:not(.is-anim-done) .espt-gal-anim {
		opacity: 1;
		transform: none;
		transition: none;
	}
}