/**
 * Image — .espt-block-image
 *
 * Root classes: is-template-{standard…banner} is-hover-{none…glow}
 *   is-content-position-{below|topleft|top|topright|midleft|center|midright|
 *   botleft|bottom|botright} is-content-style-{plain…minimal}
 *   is-content-align-{auto|left|center|right} is-reveal-hover/no-reveal-hover
 *   is-badge-pos-{tl|tr|bl|br} is-badge-shape-{pill|rounded|square|ribbon}
 *   is-ratio-{original|r1x1|…|custom} is-object-fit-* is-object-position-*
 *   is-corner-* is-shadow-* is-frame-border-* is-blend-* is-shade-*
 *   is-anim-* is-text-align-* is-zoom-icon/no-zoom-icon
 * Figure classes (set by render()): .espt-img, .is-anim-ready (entrance start
 *   state, printed server-side), .has-overlay (content sits over the photo).
 * Vars: --accent --max-width --img-height --opacity --shade-color
 *   --shade-opacity --f-gray --f-blur --f-bright --f-contrast --f-saturate
 *   --anim-speed --title-size --sub-size --desc-size --cap-size --icon-size
 *   --badge-size --content-gap --content-edge --box-pad --box-radius
 *   --box-maxw --box-blur --btn-size --btn-radius --btn-gap and the colour
 *   vars (--title-color, --box-bg, --badge-bg, --btn1-bg …).
 *
 * Mobile-first. Nothing here may overflow a 320px viewport: the figure is
 * capped with min(100%, …), every flex child gets min-width:0 and long words
 * wrap.
 */

/* ------------------------------------------------------------- the shell */
.espt-block-image .espt-img {
	display: block;
	margin: 0;
	max-width: min(100%, var(--max-width, 640px));
	min-width: 0;
	position: relative;
}

.espt-block-image.is-text-align-center .espt-img { margin-inline: auto; }
.espt-block-image.is-text-align-right .espt-img { margin-inline: auto 0; }
.espt-block-image.is-text-align-left .espt-img { margin-inline: 0 auto; }

/* ------------------------------------------------------------- the frame */
.espt-block-image .espt-img-frame {
	aspect-ratio: 4 / 3;
	background: var(--bd-soft);
	border-radius: var(--frame-radius, 12px);
	display: block;
	line-height: 0;
	min-width: 0;
	overflow: hidden;
	position: relative;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.espt-block-image .espt-img-el {
	display: block;
	filter:
		grayscale(var(--f-gray, 0%))
		blur(var(--f-blur, 0px))
		brightness(var(--f-bright, 100%))
		contrast(var(--f-contrast, 100%))
		saturate(var(--f-saturate, 100%));
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center center;
	opacity: var(--opacity, 1);
	transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1), filter 0.4s ease, opacity 0.3s ease;
	width: 100%;
}

/* Object fit / focus ---------------------------------------------------- */
.espt-block-image.is-object-fit-contain .espt-img-el { object-fit: contain; }
.espt-block-image.is-object-fit-fill .espt-img-el { object-fit: fill; }
.espt-block-image.is-object-position-top .espt-img-el { object-position: center top; }
.espt-block-image.is-object-position-bottom .espt-img-el { object-position: center bottom; }
.espt-block-image.is-object-position-left .espt-img-el { object-position: left center; }
.espt-block-image.is-object-position-right .espt-img-el { object-position: right center; }
.espt-block-image.is-object-position-topleft .espt-img-el { object-position: left top; }
.espt-block-image.is-object-position-topright .espt-img-el { object-position: right top; }
.espt-block-image.is-object-position-botleft .espt-img-el { object-position: left bottom; }
.espt-block-image.is-object-position-botright .espt-img-el { object-position: right bottom; }

/* Blend modes ----------------------------------------------------------- */
.espt-block-image.is-blend-multiply .espt-img-el { mix-blend-mode: multiply; }
.espt-block-image.is-blend-screen .espt-img-el { mix-blend-mode: screen; }
.espt-block-image.is-blend-overlay .espt-img-el { mix-blend-mode: overlay; }
.espt-block-image.is-blend-darken .espt-img-el { mix-blend-mode: darken; }
.espt-block-image.is-blend-lighten .espt-img-el { mix-blend-mode: lighten; }
.espt-block-image.is-blend-luminosity .espt-img-el { mix-blend-mode: luminosity; }

/* ----------------------------------------------------------- click layer */
.espt-block-image .espt-img-cover {
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: inherit;
	cursor: pointer;
	display: block;
	inset: 0;
	margin: 0;
	padding: 0;
	position: absolute;
	width: 100%;
	z-index: 2;
}

.espt-block-image .espt-img-cover:focus-visible {
	outline: 3px solid var(--accent, var(--bd-primary));
	outline-offset: -3px;
}

/* Magnifier badge on hover. */
.espt-block-image .espt-img-zi {
	align-items: center;
	background: rgba(255, 255, 255, 0.92);
	border-radius: 999px;
	color: var(--accent, var(--bd-primary));
	display: inline-flex;
	font-size: 18px;
	height: 44px;
	justify-content: center;
	left: 50%;
	line-height: 1;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%) scale(0.75);
	transition: opacity 0.28s ease, transform 0.28s ease;
	width: 44px;
	z-index: 4;
}

.espt-block-image.no-zoom-icon .espt-img-zi { display: none; }

.espt-block-image .espt-img-frame:hover .espt-img-zi,
.espt-block-image .espt-img-cover:focus-visible ~ .espt-img-zi {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

/* Touch devices never hover, so the "this opens" hint would never appear:
   show it permanently, a little smaller and quieter. */
@media (hover: none) {
	.espt-block-image .espt-img-zi {
		background: rgba(255, 255, 255, 0.8);
		opacity: 1;
		transform: translate(-50%, -50%) scale(0.86);
	}
}

/* ----------------------------------------------------------------- shade */
.espt-block-image .espt-img-shade {
	background: var(--shade-color, #020617);
	inset: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transition: opacity 0.35s ease;
	z-index: 1;
}

.espt-block-image.is-shade-always .espt-img-shade { opacity: var(--shade-opacity, 55%); }
.espt-block-image.is-shade-hover .espt-img-frame:hover .espt-img-shade { opacity: var(--shade-opacity, 55%); }

.espt-block-image.is-shade-gradient .espt-img-shade {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 34%, var(--shade-color, #020617) 100%);
	opacity: var(--shade-opacity, 55%);
}

.espt-block-image.is-shade-top .espt-img-shade {
	background: linear-gradient(0deg, rgba(0, 0, 0, 0) 34%, var(--shade-color, #020617) 100%);
	opacity: var(--shade-opacity, 55%);
}

/* ----------------------------------------------------------------- badge */
.espt-block-image .espt-img-badge {
	align-items: center;
	background: var(--badge-bg, var(--accent, var(--bd-primary)));
	border-radius: 999px;
	color: var(--badge-color, #fff);
	display: inline-flex;
	font-size: var(--badge-size, 12px);
	font-weight: 800;
	letter-spacing: 0.05em;
	line-height: 1.3;
	max-width: calc(100% - 24px);
	overflow-wrap: anywhere;
	padding: 5px 12px;
	position: absolute;
	z-index: 5;
}

.espt-block-image.is-badge-pos-tl .espt-img-badge { left: 12px; top: 12px; }
.espt-block-image.is-badge-pos-tr .espt-img-badge { right: 12px; top: 12px; }
.espt-block-image.is-badge-pos-bl .espt-img-badge { bottom: 12px; left: 12px; }
.espt-block-image.is-badge-pos-br .espt-img-badge { bottom: 12px; right: 12px; }

.espt-block-image.is-badge-shape-rounded .espt-img-badge { border-radius: 7px; }
.espt-block-image.is-badge-shape-square .espt-img-badge { border-radius: 0; }

.espt-block-image.is-badge-shape-ribbon .espt-img-badge {
	border-radius: 0 6px 6px 0;
	padding-left: 16px;
}

.espt-block-image.is-badge-shape-ribbon.is-badge-pos-tl .espt-img-badge,
.espt-block-image.is-badge-shape-ribbon.is-badge-pos-bl .espt-img-badge { left: 0; }

.espt-block-image.is-badge-shape-ribbon.is-badge-pos-tr .espt-img-badge,
.espt-block-image.is-badge-shape-ribbon.is-badge-pos-br .espt-img-badge {
	border-radius: 6px 0 0 6px;
	padding-left: 12px;
	padding-right: 16px;
	right: 0;
}

/* The folded corner that makes a ribbon read as a ribbon: a small dark
   triangle tucked against the frame edge, away from the badge. */
.espt-block-image.is-badge-shape-ribbon .espt-img-badge::before {
	border: 5px solid transparent;
	border-left-width: 0;
	border-top-color: rgba(0, 0, 0, 0.45);
	content: "";
	left: 0;
	position: absolute;
	top: 100%;
}

.espt-block-image.is-badge-shape-ribbon.is-badge-pos-tr .espt-img-badge::before,
.espt-block-image.is-badge-shape-ribbon.is-badge-pos-br .espt-img-badge::before {
	border-left-width: 5px;
	border-right-width: 0;
	left: auto;
	right: 0;
}

.espt-block-image.is-badge-shape-ribbon.is-badge-pos-bl .espt-img-badge::before,
.espt-block-image.is-badge-shape-ribbon.is-badge-pos-br .espt-img-badge::before {
	border-bottom-color: rgba(0, 0, 0, 0.45);
	border-top-color: transparent;
	bottom: 100%;
	top: auto;
}

/* --------------------------------------------------------- content layer */
.espt-block-image .espt-img-content {
	display: flex;
	flex-direction: column;
	inset: 0;
	min-width: 0;
	padding: var(--content-edge, 14px);
	pointer-events: none;
	position: absolute;
	z-index: 3;
}

.espt-block-image .espt-img-content a,
.espt-block-image .espt-img-content button { pointer-events: auto; }

.espt-block-image.is-content-position-topleft .espt-img-content { align-items: flex-start; justify-content: flex-start; }
.espt-block-image.is-content-position-top .espt-img-content { align-items: center; justify-content: flex-start; }
.espt-block-image.is-content-position-topright .espt-img-content { align-items: flex-end; justify-content: flex-start; }
.espt-block-image.is-content-position-midleft .espt-img-content { align-items: flex-start; justify-content: center; }
.espt-block-image.is-content-position-center .espt-img-content { align-items: center; justify-content: center; }
.espt-block-image.is-content-position-midright .espt-img-content { align-items: flex-end; justify-content: center; }
.espt-block-image.is-content-position-botleft .espt-img-content { align-items: flex-start; justify-content: flex-end; }
.espt-block-image.is-content-position-bottom .espt-img-content { align-items: center; justify-content: flex-end; }
.espt-block-image.is-content-position-botright .espt-img-content { align-items: flex-end; justify-content: flex-end; }

/* ----------------------------------------------------------- content box */
.espt-block-image .espt-img-box {
	align-items: flex-start;
	border: 1px solid var(--box-line, transparent);
	border-radius: var(--box-radius, 14px);
	display: flex;
	flex-direction: column;
	gap: var(--content-gap, 8px);
	line-height: 1.5;
	max-width: min(100%, var(--box-maxw, 460px));
	min-width: 0;
	padding: var(--box-pad, 14px);
	text-align: left;
}

.espt-block-image .espt-img-box-below {
	margin: 14px 0 0;
	max-width: min(100%, var(--box-maxw, 460px));
}

/* Alignment: "auto" follows the 9-point position, otherwise it is explicit. */
.espt-block-image.is-content-align-auto.is-content-position-top .espt-img-box,
.espt-block-image.is-content-align-auto.is-content-position-center .espt-img-box,
.espt-block-image.is-content-align-auto.is-content-position-bottom .espt-img-box,
.espt-block-image.is-content-align-center .espt-img-box {
	align-items: center;
	text-align: center;
}

.espt-block-image.is-content-align-auto.is-content-position-topright .espt-img-box,
.espt-block-image.is-content-align-auto.is-content-position-midright .espt-img-box,
.espt-block-image.is-content-align-auto.is-content-position-botright .espt-img-box,
.espt-block-image.is-content-align-right .espt-img-box {
	align-items: flex-end;
	text-align: right;
}

.espt-block-image.is-content-align-left .espt-img-box {
	align-items: flex-start;
	text-align: left;
}

.espt-block-image.is-content-align-center .espt-img-box-below { margin-inline: auto; }
.espt-block-image.is-content-align-right .espt-img-box-below { margin-inline: auto 0; }

/* Below the image, "follow the position" has no 9-point position to follow —
   so it follows where the photo itself sits instead of always hugging left. */
.espt-block-image.is-content-align-auto.is-text-align-center .espt-img-box-below {
	align-items: center;
	margin-inline: auto;
	text-align: center;
}

.espt-block-image.is-content-align-auto.is-text-align-right .espt-img-box-below {
	align-items: flex-end;
	margin-inline: auto 0;
	text-align: right;
}

.espt-block-image.is-content-align-auto.is-text-align-center .espt-img-box-below .espt-img-actions { justify-content: center; }
.espt-block-image.is-content-align-auto.is-text-align-right .espt-img-box-below .espt-img-actions { justify-content: flex-end; }

/* Reveal on hover (overlay positions only). */
.espt-block-image.is-reveal-hover .espt-img-content .espt-img-box {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.espt-block-image.is-reveal-hover .espt-img-frame:hover .espt-img-box,
.espt-block-image.is-reveal-hover .espt-img-frame:focus-within .espt-img-box {
	opacity: 1;
	transform: none;
}

/* --------------------------------------------------------- content parts */
.espt-block-image .espt-img-ico {
	color: var(--icon-color, var(--accent, var(--bd-primary)));
	font-size: var(--icon-size, 26px);
	line-height: 0;
}

.espt-block-image .espt-img-subtitle {
	color: var(--sub-color, var(--accent, var(--bd-primary)));
	font-size: var(--sub-size, 13px);
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.4;
	overflow-wrap: anywhere;
	text-transform: uppercase;
}

.espt-block-image .espt-img-title {
	color: var(--title-color, var(--bd-ink));
	font-size: var(--title-size, 19px);
	font-weight: 800;
	line-height: 1.25;
	margin: 0;
	overflow-wrap: anywhere;
}

.espt-block-image .espt-img-desc {
	color: var(--desc-color, var(--bd-body));
	font-size: var(--desc-size, 15px);
	line-height: 1.6;
	overflow-wrap: anywhere;
}

.espt-block-image .espt-img-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--btn-gap, 10px);
	margin-top: 2px;
	max-width: 100%;
	min-width: 0;
}

.espt-block-image.is-content-align-center .espt-img-actions { justify-content: center; }
.espt-block-image.is-content-align-right .espt-img-actions { justify-content: flex-end; }

.espt-block-image .espt-img-btn {
	align-items: center;
	border: 1px solid transparent;
	border-radius: var(--btn-radius, 10px);
	display: inline-flex;
	font-size: var(--btn-size, 14px);
	font-weight: 700;
	gap: 8px;
	justify-content: center;
	line-height: 1.2;
	max-width: 100%;
	min-width: 0;
	overflow-wrap: anywhere;
	padding: 10px 18px;
	text-decoration: none;
	transition: transform 0.2s ease, filter 0.2s ease, background 0.2s ease;
}

.espt-block-image .espt-img-btn1 {
	background: var(--btn1-bg, var(--accent, var(--espt-btn-bg, var(--bd-primary))));
	color: var(--btn1-color, #fff);
}

.espt-block-image .espt-img-btn2 {
	background: rgba(255, 255, 255, 0.16);
	border-color: currentcolor;
	color: var(--btn2-color, #fff);
}

.espt-block-image .espt-img-box-below .espt-img-btn2 {
	background: transparent;
	color: var(--btn2-color, var(--accent, var(--bd-primary)));
}

.espt-block-image .espt-img-btn:hover {
	filter: brightness(1.05);
	transform: translateY(-2px);
}

.espt-block-image .espt-img-btn:focus-visible {
	outline: 3px solid var(--accent, var(--bd-primary));
	outline-offset: 2px;
}

.espt-block-image .espt-img-bi { font-size: 1.05em; }

/* --------------------------------------------------------------- caption */
.espt-block-image .espt-img-caption {
	color: var(--cap-color, var(--bd-muted));
	font-size: var(--cap-size, 13px);
	line-height: 1.5;
	margin: 10px 0 0;
	overflow-wrap: anywhere;
	text-align: center;
}

.espt-block-image.is-content-align-left .espt-img-caption { text-align: left; }
.espt-block-image.is-content-align-right .espt-img-caption { text-align: right; }

/* ================================================== content box designs */
.espt-block-image.is-content-style-plain .espt-img-box,
.espt-block-image.is-content-style-minimal .espt-img-box {
	background: none;
	border-color: transparent;
	padding: 0;
}

.espt-block-image.is-content-style-solid .espt-img-box { background: var(--box-bg, rgba(17, 24, 39, 0.85)); }
.espt-block-image.is-content-style-light .espt-img-box {
	background: var(--box-bg, #fff);
	box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.45);
}

.espt-block-image.is-content-style-glass .espt-img-box {
	backdrop-filter: blur(var(--box-blur, 10px));
	background: var(--box-bg, rgba(255, 255, 255, 0.16));
	border-color: var(--box-line, rgba(255, 255, 255, 0.34));
	-webkit-backdrop-filter: blur(var(--box-blur, 10px));
}

.espt-block-image.is-content-style-gradient .espt-img-box {
	background: var(--box-bg, linear-gradient(135deg, var(--accent, var(--bd-primary)), var(--bd-deep)));
}

.espt-block-image.is-content-style-outline .espt-img-box {
	background: var(--box-bg, rgba(2, 6, 23, 0.28));
	border-color: var(--box-line, rgba(255, 255, 255, 0.85));
	border-width: 2px;
}

.espt-block-image.is-content-style-accent .espt-img-box {
	background: var(--box-bg, rgba(17, 24, 39, 0.82));
	border-left: 4px solid var(--accent, var(--bd-primary));
}

.espt-block-image.is-content-style-blur .espt-img-box {
	backdrop-filter: blur(var(--box-blur, 10px));
	background: var(--box-bg, rgba(15, 23, 42, 0.34));
	-webkit-backdrop-filter: blur(var(--box-blur, 10px));
}

/* Full-width bar hugs the frame edges. */
.espt-block-image.is-content-style-bar .espt-img-content { padding: 0; }

.espt-block-image.is-content-style-bar .espt-img-box {
	background: var(--box-bg, linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 72%));
	border-radius: 0;
	max-width: none;
	padding: calc(var(--box-pad, 14px) + 14px) var(--box-pad, 14px) var(--box-pad, 14px);
	width: 100%;
}

/* Below the image the bar reads as a solid card instead of a fade. */
.espt-block-image.is-content-style-bar .espt-img-box-below {
	background: var(--box-bg, rgba(17, 24, 39, 0.9));
	border-radius: var(--box-radius, 14px);
	padding: var(--box-pad, 14px);
	width: auto;
}

/* Dark content boxes — and anything laid over a photo — take light text. */
.espt-block-image.is-content-style-solid .espt-img-title,
.espt-block-image.is-content-style-glass .espt-img-title,
.espt-block-image.is-content-style-gradient .espt-img-title,
.espt-block-image.is-content-style-outline .espt-img-title,
.espt-block-image.is-content-style-bar .espt-img-title,
.espt-block-image.is-content-style-accent .espt-img-title,
.espt-block-image.is-content-style-blur .espt-img-title,
.espt-block-image .espt-img-content .espt-img-title { color: var(--title-color, #fff); }

.espt-block-image.is-content-style-solid .espt-img-desc,
.espt-block-image.is-content-style-glass .espt-img-desc,
.espt-block-image.is-content-style-gradient .espt-img-desc,
.espt-block-image.is-content-style-outline .espt-img-desc,
.espt-block-image.is-content-style-bar .espt-img-desc,
.espt-block-image.is-content-style-accent .espt-img-desc,
.espt-block-image.is-content-style-blur .espt-img-desc { color: var(--desc-color, rgba(255, 255, 255, 0.92)); }

.espt-block-image .espt-img-content .espt-img-desc { color: var(--desc-color, rgba(255, 255, 255, 0.92)); }

.espt-block-image.is-content-style-solid .espt-img-subtitle,
.espt-block-image.is-content-style-glass .espt-img-subtitle,
.espt-block-image.is-content-style-gradient .espt-img-subtitle,
.espt-block-image.is-content-style-outline .espt-img-subtitle,
.espt-block-image.is-content-style-bar .espt-img-subtitle,
.espt-block-image.is-content-style-blur .espt-img-subtitle,
.espt-block-image .espt-img-content .espt-img-subtitle { color: var(--sub-color, rgba(255, 255, 255, 0.92)); }

.espt-block-image .espt-img-content .espt-img-ico { color: var(--icon-color, #fff); }

.espt-block-image.is-content-style-solid .espt-img-box-below .espt-img-btn2,
.espt-block-image.is-content-style-gradient .espt-img-box-below .espt-img-btn2,
.espt-block-image.is-content-style-accent .espt-img-box-below .espt-img-btn2,
.espt-block-image.is-content-style-glass .espt-img-box-below .espt-img-btn2,
.espt-block-image.is-content-style-outline .espt-img-box-below .espt-img-btn2,
.espt-block-image.is-content-style-blur .espt-img-box-below .espt-img-btn2,
.espt-block-image.is-content-style-bar .espt-img-box-below .espt-img-btn2 { color: var(--btn2-color, #fff); }

/* The light card flips everything back to ink, even over a photo. */
.espt-block-image.is-content-style-light .espt-img-title { color: var(--title-color, var(--bd-ink)); }
.espt-block-image.is-content-style-light .espt-img-desc { color: var(--desc-color, var(--bd-body)); }
.espt-block-image.is-content-style-light .espt-img-subtitle { color: var(--sub-color, var(--accent, var(--bd-primary))); }
.espt-block-image.is-content-style-light .espt-img-content .espt-img-ico { color: var(--icon-color, var(--accent, var(--bd-primary))); }
.espt-block-image.is-content-style-light .espt-img-btn2 { color: var(--btn2-color, var(--accent, var(--bd-primary))); }

.espt-block-image.is-content-style-minimal .espt-img-content .espt-img-title,
.espt-block-image.is-content-style-minimal .espt-img-content .espt-img-subtitle,
.espt-block-image.is-content-style-minimal .espt-img-content .espt-img-desc {
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}

/* ======================================================= design templates */
.espt-block-image .espt-img { --frame-radius: 12px; }

.espt-block-image.is-template-minimal .espt-img { --frame-radius: 0; }
.espt-block-image.is-template-rounded .espt-img { --frame-radius: 22px; }

.espt-block-image.is-template-circle .espt-img { --frame-radius: 50%; }
.espt-block-image.is-template-circle .espt-img-frame { aspect-ratio: 1 / 1; }

.espt-block-image.is-template-frame .espt-img-frame {
	border: 6px solid var(--border-color, #fff);
	box-shadow: 0 0 0 1px var(--bd-line), 0 18px 40px -22px rgba(0, 0, 0, 0.4);
}

.espt-block-image.is-template-shadow .espt-img-frame { box-shadow: 0 26px 50px -24px rgba(0, 0, 0, 0.5); }

.espt-block-image.is-template-card .espt-img {
	--frame-radius: 12px;
	background: var(--bd-box-bg);
	border-radius: 18px;
	box-shadow: 0 20px 44px -24px rgba(0, 0, 0, 0.42);
	padding: 8px;
}

.espt-block-image.is-template-floating .espt-img { --frame-radius: 18px; }
.espt-block-image.is-template-floating .espt-img-frame { box-shadow: 0 30px 55px -22px rgba(0, 0, 0, 0.5); }
.espt-block-image.is-template-floating .espt-img:hover .espt-img-frame { transform: translateY(-6px); }

.espt-block-image.is-template-glass .espt-img {
	--frame-radius: 14px;
	backdrop-filter: blur(14px);
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.34);
	border-radius: 20px;
	padding: 10px;
	-webkit-backdrop-filter: blur(14px);
}

.espt-block-image.is-template-neumorph .espt-img {
	--frame-radius: 16px;
	background: #e6e9ef;
	border-radius: 24px;
	box-shadow: 10px 10px 24px #c3c7cf, -10px -10px 24px #fff;
	padding: 14px;
}

.espt-block-image.is-template-soft .espt-img {
	--frame-radius: 14px;
	background: #f8fafc;
	border-radius: 20px;
	box-shadow: 0 12px 30px -18px rgba(0, 0, 0, 0.3);
	padding: 10px;
}

.espt-block-image.is-template-luxury .espt-img {
	--frame-radius: 3px;
	background: linear-gradient(135deg, #d4af37, #b8860b);
	border-radius: 6px;
	box-shadow: 0 20px 44px -22px rgba(184, 134, 11, 0.6);
	padding: 6px;
}

.espt-block-image.is-template-luxury .espt-img-frame { border: 2px solid #0a0a0a; }

.espt-block-image.is-template-gradient .espt-img {
	--frame-radius: 14px;
	background: linear-gradient(135deg, #ec4899, #8b5cf6, #22d3ee);
	border-radius: 18px;
	padding: 4px;
}

.espt-block-image.is-template-glow .espt-img { --frame-radius: 16px; }

.espt-block-image.is-template-glow .espt-img-frame {
	box-shadow: 0 0 0 1px var(--accent, var(--bd-primary)), 0 0 30px -6px var(--accent, var(--bd-primary));
}

.espt-block-image.is-template-polaroid .espt-img {
	--frame-radius: 2px;
	background: #fff;
	border-radius: 3px;
	box-shadow: 0 16px 36px -20px rgba(0, 0, 0, 0.5);
	padding: 12px 12px 18px;
}

/* The signature tilt lives in the ≥768px block: on a 320px screen the figure
   is nearly the full width, and the bounding box of a rotated element is
   wider than the element — enough to push the page sideways. */

.espt-block-image.is-template-polaroid .espt-img-caption {
	font-size: calc(var(--cap-size, 13px) + 2px);
	font-style: italic;
	margin-top: 14px;
}

.espt-block-image.is-template-magazine .espt-img { --frame-radius: 0; }

.espt-block-image.is-template-magazine .espt-img-title {
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.espt-block-image.is-template-reflection .espt-img::after {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent);
	border-radius: 12px;
	content: "";
	display: block;
	height: 52px;
	margin-top: 2px;
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent);
	-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent);
}

.espt-block-image.is-template-hero .espt-img { --frame-radius: 18px; }
.espt-block-image.is-template-hero .espt-img-frame { box-shadow: 0 24px 48px -26px rgba(2, 6, 23, 0.55); }

.espt-block-image.is-template-product .espt-img {
	--frame-radius: 12px;
	background: var(--bd-box-bg);
	border: 1px solid var(--bd-line);
	border-radius: 16px;
	padding: 12px;
}

.espt-block-image.is-template-product .espt-img-frame { background: #f8fafc; }

.espt-block-image.is-template-team .espt-img { --frame-radius: 18px; }
.espt-block-image.is-template-team .espt-img-frame { box-shadow: 0 16px 36px -22px rgba(15, 23, 42, 0.45); }

.espt-block-image.is-template-portfolio .espt-img { --frame-radius: 10px; }
.espt-block-image.is-template-portfolio .espt-img-frame { box-shadow: 0 10px 26px -18px rgba(15, 23, 42, 0.5); }

.espt-block-image.is-template-instagram .espt-img {
	--frame-radius: 10px;
	background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
	border-radius: 14px;
	padding: 4px;
}

.espt-block-image.is-template-instagram .espt-img-frame { border: 3px solid #fff; }

.espt-block-image.is-template-story .espt-img { --frame-radius: 20px; }
.espt-block-image.is-template-story .espt-img-frame { aspect-ratio: 9 / 16; }

.espt-block-image.is-template-banner .espt-img { --frame-radius: 14px; }
.espt-block-image.is-template-banner .espt-img-frame { aspect-ratio: 21 / 9; }

/* ------------------------------------------------------------------ shape */
/* Declared after the templates so an explicit shape always wins over the
   ratio a template (circle / story / banner) picks for itself. */
.espt-block-image.is-ratio-original .espt-img-frame { aspect-ratio: auto; height: auto; }
.espt-block-image.is-ratio-original .espt-img-el { height: auto; }
.espt-block-image.is-ratio-r1x1 .espt-img-frame { aspect-ratio: 1 / 1; height: auto; }
.espt-block-image.is-ratio-r4x3 .espt-img-frame { aspect-ratio: 4 / 3; height: auto; }
.espt-block-image.is-ratio-r3x2 .espt-img-frame { aspect-ratio: 3 / 2; height: auto; }
.espt-block-image.is-ratio-r16x9 .espt-img-frame { aspect-ratio: 16 / 9; height: auto; }
.espt-block-image.is-ratio-r21x9 .espt-img-frame { aspect-ratio: 21 / 9; height: auto; }
.espt-block-image.is-ratio-r3x4 .espt-img-frame { aspect-ratio: 3 / 4; height: auto; }
.espt-block-image.is-ratio-r2x3 .espt-img-frame { aspect-ratio: 2 / 3; height: auto; }
.espt-block-image.is-ratio-r9x16 .espt-img-frame { aspect-ratio: 9 / 16; height: auto; }

.espt-block-image.is-ratio-custom .espt-img-frame {
	aspect-ratio: auto;
	height: var(--img-height, 320px);
}

/* A 21:9 / 16:9 frame is only ~130–165px tall on a phone — not enough room
   for a title, a line of copy and a button. Give the ultra-wide shapes a
   floor while content sits on top of them; from tablets up the natural
   height is already generous, so the floor lifts again. */
.espt-block-image.is-template-banner .espt-img.has-overlay .espt-img-frame,
.espt-block-image.is-ratio-r21x9 .espt-img.has-overlay .espt-img-frame,
.espt-block-image.is-ratio-r16x9 .espt-img.has-overlay .espt-img-frame { min-height: 210px; }

/* ------------------------------------------------- corner / shadow / border */
.espt-block-image.is-corner-none .espt-img { --frame-radius: 0; }
.espt-block-image.is-corner-small .espt-img { --frame-radius: 6px; }
.espt-block-image.is-corner-medium .espt-img { --frame-radius: 14px; }
.espt-block-image.is-corner-large .espt-img { --frame-radius: 24px; }
.espt-block-image.is-corner-xlarge .espt-img { --frame-radius: 36px; }
.espt-block-image.is-corner-circle .espt-img { --frame-radius: 50%; }

.espt-block-image.is-shadow-none .espt-img,
.espt-block-image.is-shadow-none .espt-img-frame { box-shadow: none; }
.espt-block-image.is-shadow-soft .espt-img-frame { box-shadow: 0 14px 32px -20px rgba(15, 23, 42, 0.5); }
.espt-block-image.is-shadow-strong .espt-img-frame { box-shadow: 0 30px 58px -22px rgba(15, 23, 42, 0.6); }
.espt-block-image.is-shadow-glow .espt-img-frame { box-shadow: 0 0 34px -4px var(--accent, var(--bd-primary)); }

.espt-block-image.is-frame-border-none .espt-img-frame { border: 0; }
.espt-block-image.is-frame-border-hairline .espt-img-frame { border: 1px solid var(--border-color, var(--bd-line)); }
.espt-block-image.is-frame-border-thin .espt-img-frame { border: 2px solid var(--border-color, #fff); }
.espt-block-image.is-frame-border-medium .espt-img-frame { border: 4px solid var(--border-color, #fff); }
.espt-block-image.is-frame-border-thick .espt-img-frame { border: 8px solid var(--border-color, #fff); }

/* ========================================================= hover effects */
.espt-block-image.is-hover-zoom .espt-img-frame:hover .espt-img-el { transform: scale(1.08); }
.espt-block-image.is-hover-zoomout .espt-img-el { transform: scale(1.1); }
.espt-block-image.is-hover-zoomout .espt-img-frame:hover .espt-img-el { transform: scale(1); }
.espt-block-image.is-hover-rotate .espt-img-frame:hover .espt-img-el { transform: scale(1.12) rotate(3deg); }
.espt-block-image.is-hover-kenburns .espt-img-frame:hover .espt-img-el { animation: espt-img-kb 8s ease-out forwards; }

.espt-block-image.is-hover-blur .espt-img-frame:hover .espt-img-el { --f-blur: 3px; }
.espt-block-image.is-hover-bright .espt-img-frame:hover .espt-img-el { --f-bright: 118%; --f-saturate: 112%; }
.espt-block-image.is-hover-gray .espt-img-el { --f-gray: 100%; }
.espt-block-image.is-hover-gray .espt-img-frame:hover .espt-img-el { --f-gray: 0%; }

.espt-block-image.is-hover-float .espt-img:hover .espt-img-frame {
	box-shadow: 0 26px 50px -20px rgba(0, 0, 0, 0.45);
	transform: translateY(-10px);
}

.espt-block-image.is-hover-glow .espt-img:hover .espt-img-frame {
	box-shadow: 0 0 34px -2px var(--accent, var(--bd-primary));
}

.espt-block-image.is-hover-tilt .espt-img-frame {
	transform-style: preserve-3d;
	transition: transform 0.18s ease;
	will-change: transform;
}

.espt-block-image.is-hover-shine .espt-img-frame::after {
	background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 100%);
	content: "";
	height: 100%;
	left: -120%;
	pointer-events: none;
	position: absolute;
	top: 0;
	transform: skewX(-18deg);
	width: 60%;
	z-index: 4;
}

.espt-block-image.is-hover-shine .espt-img-frame:hover::after { animation: espt-img-shine 0.9s ease; }

@keyframes espt-img-kb {
	0% { transform: scale(1); transform-origin: 50% 50%; }
	100% { transform: scale(1.2); transform-origin: 60% 40%; }
}

@keyframes espt-img-shine {
	to { left: 140%; }
}

/* ==================================================== entrance animation */
.espt-block-image .espt-img.is-anim-ready {
	opacity: 0;
	transition:
		opacity var(--anim-speed, 0.6s) ease,
		transform var(--anim-speed, 0.6s) cubic-bezier(0.2, 0.7, 0.3, 1),
		filter var(--anim-speed, 0.6s) ease;
}

.espt-block-image.is-anim-up .espt-img.is-anim-ready { transform: translateY(28px); }
.espt-block-image.is-anim-zoom .espt-img.is-anim-ready { transform: scale(0.92); }
.espt-block-image.is-anim-blur .espt-img.is-anim-ready { filter: blur(12px); }
.espt-block-image.is-anim-flip .espt-img.is-anim-ready { transform: perspective(900px) rotateY(20deg); }

.espt-block-image .espt-img.is-anim-ready.is-inview {
	filter: none;
	opacity: 1;
	transform: none;
}

/* render() prints .is-anim-ready so the photo never flashes in at full
   opacity before the footer script hides it — which means that with
   scripting off (or on paper) nothing would ever add .is-inview. Hand the
   photo back rather than printing an empty box. */
@media print, (scripting: none) {
	.espt-block-image .espt-img.is-anim-ready {
		filter: none;
		opacity: 1;
		transform: none;
	}
}

/* ================================================= lightbox (body portal) */
.espt-block-image.espt-img-portal {
	inset: 0;
	margin: 0;
	max-width: none;
	position: fixed;
	width: auto;
	z-index: 99999;
}

/* The one deliberately unprefixed selector: the lightbox is portalled onto
   <body>, so the scroll lock has to live on <html>. The class name is unique
   to this block and only ever set while a lightbox is open. */
html.espt-img-locked { overflow: hidden; }

.espt-block-image .espt-img-lb {
	align-items: center;
	background: rgba(2, 6, 23, 0.93);
	backdrop-filter: blur(4px);
	display: flex;
	flex-direction: column;
	inset: 0;
	justify-content: center;
	padding: 56px 12px 24px;
	position: absolute;
	-webkit-backdrop-filter: blur(4px);
}

.espt-block-image .espt-img-lb[hidden] { display: none; }

.espt-block-image .espt-img-lb-img {
	animation: espt-img-pop 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.1);
	border-radius: 10px;
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7);
	max-height: 72vh;
	max-width: 100%;
	object-fit: contain;
	width: auto;
}

.espt-block-image .espt-img-lb-cap {
	color: rgba(255, 255, 255, 0.86);
	font-size: 14px;
	line-height: 1.5;
	margin-top: 14px;
	max-width: 640px;
	overflow-wrap: anywhere;
	text-align: center;
}

.espt-block-image .espt-img-lb-cap:empty { display: none; }

.espt-block-image .espt-img-lb-x {
	align-items: center;
	background: rgba(255, 255, 255, 0.16);
	border: 0;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	font-size: 20px;
	height: 40px;
	justify-content: center;
	line-height: 1;
	position: absolute;
	right: 12px;
	top: 12px;
	transition: background 0.2s ease, transform 0.2s ease;
	width: 40px;
}

.espt-block-image .espt-img-lb-x:hover { background: rgba(255, 255, 255, 0.3); transform: scale(1.07); }
.espt-block-image .espt-img-lb-x:focus-visible { outline: 3px solid var(--accent, var(--bd-accent)); outline-offset: 2px; }

@keyframes espt-img-pop {
	from { opacity: 0; transform: scale(0.92); }
	to { opacity: 1; transform: none; }
}

/* ============================================================== tablet + */
@media (min-width: 768px) {
	.espt-block-image .espt-img-btn { padding: 11px 20px; }
	.espt-block-image .espt-img-zi { font-size: 20px; height: 52px; width: 52px; }
	.espt-block-image .espt-img-lb { padding: 24px 40px 32px; }
	.espt-block-image .espt-img-lb-img { max-height: 78vh; }
	.espt-block-image .espt-img-lb-x { right: 20px; top: 20px; }
	.espt-block-image.is-template-polaroid .espt-img { padding: 14px 14px 22px; transform: rotate(-1.5deg); }
	.espt-block-image.is-template-reflection .espt-img::after { height: 60px; }
	.espt-block-image.is-template-banner .espt-img.has-overlay .espt-img-frame,
	.espt-block-image.is-ratio-r21x9 .espt-img.has-overlay .espt-img-frame,
	.espt-block-image.is-ratio-r16x9 .espt-img.has-overlay .espt-img-frame { min-height: 0; }
}

@media (min-width: 1024px) {
	.espt-block-image .espt-img-btn { padding: 12px 22px; }
	.espt-block-image .espt-img-lb-img { max-height: 82vh; }
}

/* ======================================================= reduced motion */
@media (prefers-reduced-motion: reduce) {
	.espt-block-image .espt-img-el,
	.espt-block-image .espt-img-frame,
	.espt-block-image .espt-img-shade,
	.espt-block-image .espt-img-box,
	.espt-block-image .espt-img-zi,
	.espt-block-image .espt-img-btn,
	.espt-block-image .espt-img.is-anim-ready {
		transition: none;
	}

	.espt-block-image.is-hover-kenburns .espt-img-frame:hover .espt-img-el,
	.espt-block-image.is-hover-shine .espt-img-frame:hover::after,
	.espt-block-image .espt-img-lb-img {
		animation: none;
	}

	.espt-block-image .espt-img.is-anim-ready {
		filter: none;
		opacity: 1;
		transform: none;
	}
}