/* Cards Grid — .espt-block-cards  (port of the plugin's .esp-crd)

   root vars   : --cols --gap --min-height --head-gap
                 --bd-pad --bd-radius  (the card box reuses the shared BD pair,
                 so the "Design preset & box" padding/radius controls drive it)
                 --title-size --desc-size --badge-size --flabel-size
                 --fvalue-size --corner-size --stagger
                 --text-color --accent-color --badge-bg --badge-color
                 --corner-bg --corner-color --divider-color
                 --eyebrow-color --head-color --head-size --sub-color
   per card    : --c1 --c2 --ang --c-ov --c-txt --c-acc --c-badge-bg
                 --c-badge-fg --c-corner-bg --c-corner-fg --i   (inline)
   root classes: is-design-{gradient|glass|overlay|frame|stack|split|soft|outline|minimal}
                 is-hover-{lift|glow|zoom|shine|ring} is-item-anim-{fade|up|zoom|flip}
                 is-badge-shape-{pill|rounded|square|bare} is-title-layout-{stack|inline}
                 is-accent-style-{plain|underline|swipe|highlight}
                 is-corner-pos-{br|bl|tr|tl|none} is-corner-shape-{circle|square|plain}
                 is-text-align-* is-head-align-* is-img-zoom/no-img-zoom
   card classes: .espt-crd-i.is-bg-{gradient|solid|image}[.is-linked]

   The light designs (soft, outline, minimal and the split price panel) derive
   every colour from the card's own --c1 (via --tint / --deep) and ignore the
   white-on-dark per-card overrides, so switching design never breaks contrast.
   Mobile-first: 768px = tablet, 1024px = desktop. */

.espt-block-cards .espt-crd {
	color: var(--bd-body);
	min-width: 0;
}

.espt-block-cards .espt-block-note {
	background: var(--bd-soft);
	border: 1px dashed var(--bd-soft-line);
	border-radius: 10px;
	color: var(--bd-muted);
	font-size: 13px;
	margin: 0;
	padding: 12px 14px;
}

/* ----------------------------------------------------------- heading */

.espt-block-cards .espt-crd-head {
	margin: 0 0 var(--head-gap, 24px);
	max-width: 760px;
	min-width: 0;
	text-align: left;
}

.espt-block-cards.is-head-align-center .espt-crd-head {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.espt-block-cards.is-head-align-right .espt-crd-head {
	margin-left: auto;
	text-align: right;
}

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

.espt-block-cards .espt-crd-htitle {
	color: var(--head-color, var(--bd-ink));
	font-size: var(--head-size, 24px);
	font-weight: 800;
	line-height: 1.22;
	margin: 0;
	overflow-wrap: anywhere;
}

.espt-block-cards .espt-crd-hsub {
	color: var(--sub-color, var(--bd-muted));
	font-size: 15px;
	line-height: 1.6;
	margin: 10px 0 0;
	overflow-wrap: anywhere;
}

/* -------------------------------------------------------------- grid */

.espt-block-cards .espt-crd-grid {
	display: grid;
	gap: var(--gap, 14px);
	grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
	min-width: 0;
}

/* -------------------------------------------------------------- card */

.espt-block-cards .espt-crd-i {
	--tint: var(--c1, var(--bd-primary));
	--deep: color-mix(in srgb, var(--c1, var(--bd-primary)) 78%, #0b1020);
	background-color: var(--c1, var(--bd-deep));
	border-radius: var(--bd-radius, 22px);
	color: var(--c-txt, var(--text-color, #fff));
	display: flex;
	isolation: isolate;
	min-height: var(--min-height, 250px);
	min-width: 0;
	overflow: hidden;
	position: relative;
	text-decoration: none;
	transition: transform 0.28s ease, box-shadow 0.28s ease, filter 0.28s ease;
}

.espt-block-cards .espt-crd-i.is-bg-gradient {
	background-image: linear-gradient(var(--ang, 135deg), var(--c1, #8b3df0), var(--c2, #ec4899));
}

.espt-block-cards .espt-crd-img {
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	transition: transform 0.5s ease;
	width: 100%;
	z-index: 0;
}

.espt-block-cards.is-img-zoom .espt-crd-i:hover .espt-crd-img { transform: scale(1.07); }

.espt-block-cards .espt-crd-ov {
	background: var(--c-ov, transparent);
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

.espt-block-cards .espt-crd-i.is-bg-image .espt-crd-ov {
	background: var(--c-ov, linear-gradient(180deg, rgba(2, 6, 23, 0.2) 0%, rgba(2, 6, 23, 0.72) 100%));
}

.espt-block-cards .espt-crd-in {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	padding: var(--bd-pad, 20px);
	position: relative;
	width: 100%;
	z-index: 2;
}

.espt-block-cards.is-text-align-center .espt-crd-in { text-align: center; }
.espt-block-cards.is-text-align-right .espt-crd-in { text-align: right; }

.espt-block-cards .espt-crd-top { display: block; min-width: 0; }

/* ------------------------------------------------------------- badge */

.espt-block-cards .espt-crd-badge {
	-webkit-backdrop-filter: blur(4px);
	align-items: center;
	backdrop-filter: blur(4px);
	background: var(--c-badge-bg, var(--badge-bg, rgba(255, 255, 255, 0.18)));
	border-radius: 999px;
	color: var(--c-badge-fg, var(--badge-color, currentColor));
	display: inline-flex;
	font-size: var(--badge-size, 13px);
	font-weight: 600;
	gap: 7px;
	line-height: 1.3;
	max-width: 100%;
	min-width: 0;
	overflow-wrap: anywhere;
	padding: 0.5em 1.05em;
	text-align: left;
}

.espt-block-cards .espt-crd-badge .espt-ic { font-size: 1.05em; }
.espt-block-cards .espt-crd-btext { min-width: 0; }

.espt-block-cards.is-badge-shape-rounded .espt-crd-badge { border-radius: 8px; }
.espt-block-cards.is-badge-shape-square .espt-crd-badge { border-radius: 0; }

.espt-block-cards.is-badge-shape-bare .espt-crd-badge {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	background: transparent;
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 0;
	text-transform: uppercase;
}

/* ------------------------------------------------------------- title */

.espt-block-cards .espt-crd-title {
	display: block;
	font-size: var(--title-size, 24px);
	font-weight: 800;
	line-height: 1.15;
	margin: 18px 0 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

.espt-block-cards .espt-crd-top > .espt-crd-title:first-child,
.espt-block-cards .espt-crd-top > .espt-crd-desc:first-child { margin-top: 0; }

.espt-block-cards .espt-crd-tmain { display: block; }

.espt-block-cards .espt-crd-accent {
	color: var(--c-acc, var(--accent-color, currentColor));
	display: block;
}

.espt-block-cards.is-title-layout-inline .espt-crd-tmain,
.espt-block-cards.is-title-layout-inline .espt-crd-accent { display: inline; }
.espt-block-cards.is-title-layout-inline .espt-crd-accent::before { content: " "; }

.espt-block-cards.is-accent-style-underline .espt-crd-accent {
	-webkit-text-decoration: underline;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.espt-block-cards.is-accent-style-swipe .espt-crd-accent {
	background: linear-gradient(currentColor, currentColor) left 100% / 100% 0.18em no-repeat;
	color: var(--c-acc, var(--accent-color, currentColor));
	display: inline-block;
	padding-bottom: 0.12em;
}

.espt-block-cards.is-accent-style-highlight .espt-crd-accent {
	background: color-mix(in srgb, currentColor 18%, transparent);
	border-radius: 8px;
	display: inline-block;
	padding: 0.05em 0.35em;
}

.espt-block-cards .espt-crd-desc {
	display: block;
	font-size: var(--desc-size, 15px);
	line-height: 1.6;
	margin-top: 12px;
	max-width: 42ch;
	min-width: 0;
	opacity: 0.9;
	overflow-wrap: anywhere;
}

.espt-block-cards.is-text-align-center .espt-crd-desc { margin-left: auto; margin-right: auto; }
.espt-block-cards.is-text-align-right .espt-crd-desc { margin-left: auto; }

/* ------------------------------------------------------------ footer */

.espt-block-cards .espt-crd-foot {
	display: block;
	margin-top: auto;
	min-width: 0;
	padding-top: 16px;
}

.espt-block-cards .espt-crd-div {
	background: var(--divider-color, rgba(255, 255, 255, 0.22));
	display: block;
	height: 1px;
	margin-bottom: 14px;
}

.espt-block-cards .espt-crd-flabel {
	display: block;
	font-size: var(--flabel-size, 13px);
	font-weight: 500;
	margin-bottom: 4px;
	opacity: 0.8;
	overflow-wrap: anywhere;
}

.espt-block-cards .espt-crd-fvalue {
	display: block;
	font-size: var(--fvalue-size, 20px);
	font-weight: 800;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.espt-block-cards .espt-crd-fvalue del { font-size: 0.72em; font-weight: 600; opacity: 0.65; }
.espt-block-cards .espt-crd-fvalue ins { text-decoration: none; }

/* ------------------------------------------------------- corner icon */

.espt-block-cards .espt-crd-corner {
	align-items: center;
	background: var(--c-corner-bg, var(--corner-bg, #fff));
	border-radius: 50%;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
	color: var(--c-corner-fg, var(--corner-color, var(--bd-primary)));
	display: inline-flex;
	font-size: calc(var(--corner-size, 48px) * 0.42);
	height: var(--corner-size, 48px);
	justify-content: center;
	position: absolute;
	width: var(--corner-size, 48px);
	z-index: 3;
}

.espt-block-cards.is-corner-pos-br .espt-crd-corner { bottom: calc(var(--bd-pad, 20px) * 0.75); right: calc(var(--bd-pad, 20px) * 0.75); }
.espt-block-cards.is-corner-pos-bl .espt-crd-corner { bottom: calc(var(--bd-pad, 20px) * 0.75); left: calc(var(--bd-pad, 20px) * 0.75); }
.espt-block-cards.is-corner-pos-tr .espt-crd-corner { right: calc(var(--bd-pad, 20px) * 0.75); top: calc(var(--bd-pad, 20px) * 0.75); }
.espt-block-cards.is-corner-pos-tl .espt-crd-corner { left: calc(var(--bd-pad, 20px) * 0.75); top: calc(var(--bd-pad, 20px) * 0.75); }

.espt-block-cards.is-corner-shape-square .espt-crd-corner { border-radius: calc(var(--bd-radius, 22px) * 0.5); }

.espt-block-cards.is-corner-shape-plain .espt-crd-corner {
	background: transparent;
	box-shadow: none;
	color: var(--c-corner-fg, var(--corner-color, currentColor));
	font-size: calc(var(--corner-size, 48px) * 0.6);
	opacity: 0.85;
}

/* ======================================================== 2 — glass */

.espt-block-cards.is-design-glass .espt-crd-in {
	background: rgba(255, 255, 255, 0.14);
	-webkit-backdrop-filter: blur(9px);
	backdrop-filter: blur(9px);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: max(0px, calc(var(--bd-radius, 22px) - 8px));
	margin: 10px;
	padding: calc(var(--bd-pad, 20px) * 0.85);
	width: auto;
}

.espt-block-cards.is-design-glass .espt-crd-badge { background: var(--c-badge-bg, var(--badge-bg, rgba(255, 255, 255, 0.26))); }

/* =============================================== 3 — photo overlay */

.espt-block-cards.is-design-overlay .espt-crd-in { justify-content: flex-end; }
.espt-block-cards.is-design-overlay .espt-crd-foot { margin-top: 0; padding-top: 14px; }
.espt-block-cards.is-design-overlay .espt-crd-i .espt-crd-ov {
	background: var(--c-ov, linear-gradient(180deg, rgba(2, 6, 23, 0) 30%, rgba(2, 6, 23, 0.78) 100%));
}
.espt-block-cards.is-design-overlay .espt-crd-i.is-bg-gradient .espt-crd-ov,
.espt-block-cards.is-design-overlay .espt-crd-i.is-bg-solid .espt-crd-ov {
	background: var(--c-ov, linear-gradient(180deg, rgba(2, 6, 23, 0) 35%, rgba(2, 6, 23, 0.55) 100%));
}

/* ================================================= 4 — inset frame */

.espt-block-cards.is-design-frame .espt-crd-in::before {
	border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
	border-radius: max(0px, calc(var(--bd-radius, 22px) - 10px));
	content: "";
	inset: calc(var(--bd-pad, 20px) * 0.42);
	pointer-events: none;
	position: absolute;
}

.espt-block-cards.is-design-frame .espt-crd-in { padding: calc(var(--bd-pad, 20px) * 1.25); }

/* ============================================ 5 — dark footer band */

.espt-block-cards.is-design-stack .espt-crd-foot {
	background: rgba(0, 0, 0, 0.26);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	margin: 0 calc(var(--bd-pad, 20px) * -1) calc(var(--bd-pad, 20px) * -1);
	padding: calc(var(--bd-pad, 20px) * 0.72) var(--bd-pad, 20px);
}

.espt-block-cards.is-design-stack .espt-crd-div { display: none; }
.espt-block-cards.is-design-stack.is-corner-pos-br .espt-crd-corner { bottom: calc(var(--bd-pad, 20px) * 0.55); }
.espt-block-cards.is-design-stack.is-corner-pos-bl .espt-crd-corner { bottom: calc(var(--bd-pad, 20px) * 0.55); }

/* ========================================= 6 — colour top + panel */

.espt-block-cards.is-design-split .espt-crd-in { padding: 0; }
.espt-block-cards.is-design-split .espt-crd-top { padding: var(--bd-pad, 20px); }

.espt-block-cards.is-design-split .espt-crd-foot {
	background: var(--bd-box-bg, #fff);
	border-top: 1px solid var(--bd-box-line, var(--bd-line));
	color: var(--bd-ink);
	padding: calc(var(--bd-pad, 20px) * 0.8) var(--bd-pad, 20px);
}

.espt-block-cards.is-design-split .espt-crd-div { display: none; }
.espt-block-cards.is-design-split .espt-crd-flabel { color: var(--bd-muted); opacity: 1; }
.espt-block-cards.is-design-split .espt-crd-fvalue { color: var(--deep); }
.espt-block-cards.is-design-split.is-corner-pos-br .espt-crd-corner,
.espt-block-cards.is-design-split.is-corner-pos-bl .espt-crd-corner { bottom: calc(var(--bd-pad, 20px) * 0.55); }

/* =========================================== 7/8/9 — light designs */

.espt-block-cards.is-design-soft .espt-crd-i,
.espt-block-cards.is-design-outline .espt-crd-i,
.espt-block-cards.is-design-minimal .espt-crd-i {
	background-image: none;
	color: var(--bd-ink);
}

.espt-block-cards.is-design-soft .espt-crd-img,
.espt-block-cards.is-design-outline .espt-crd-img,
.espt-block-cards.is-design-minimal .espt-crd-img,
.espt-block-cards.is-design-soft .espt-crd-ov,
.espt-block-cards.is-design-outline .espt-crd-ov,
.espt-block-cards.is-design-minimal .espt-crd-ov { display: none; }

.espt-block-cards.is-design-soft .espt-crd-i {
	background-color: color-mix(in srgb, var(--tint) 10%, #fff);
	border: 1px solid color-mix(in srgb, var(--tint) 24%, transparent);
}

.espt-block-cards.is-design-outline .espt-crd-i {
	background-color: var(--bd-box-bg, #fff);
	border: 2px solid color-mix(in srgb, var(--tint) 55%, transparent);
}

.espt-block-cards.is-design-minimal .espt-crd-i {
	background-color: transparent;
	border: 0;
	border-left: 4px solid var(--tint);
	border-radius: 0;
	min-height: 0;
}

.espt-block-cards.is-design-minimal .espt-crd-in { padding: 2px 0 2px var(--bd-pad, 20px); }

.espt-block-cards.is-design-soft .espt-crd-badge,
.espt-block-cards.is-design-outline .espt-crd-badge,
.espt-block-cards.is-design-minimal .espt-crd-badge {
	background: color-mix(in srgb, var(--tint) 14%, #fff);
	color: var(--deep);
}

.espt-block-cards.is-design-soft.is-badge-shape-bare .espt-crd-badge,
.espt-block-cards.is-design-outline.is-badge-shape-bare .espt-crd-badge,
.espt-block-cards.is-design-minimal.is-badge-shape-bare .espt-crd-badge { background: transparent; }

.espt-block-cards.is-design-soft .espt-crd-accent,
.espt-block-cards.is-design-outline .espt-crd-accent,
.espt-block-cards.is-design-minimal .espt-crd-accent { color: var(--deep); }

.espt-block-cards.is-design-soft .espt-crd-desc,
.espt-block-cards.is-design-outline .espt-crd-desc,
.espt-block-cards.is-design-minimal .espt-crd-desc { color: var(--bd-body); opacity: 1; }

.espt-block-cards.is-design-soft .espt-crd-flabel,
.espt-block-cards.is-design-outline .espt-crd-flabel,
.espt-block-cards.is-design-minimal .espt-crd-flabel { color: var(--bd-muted); opacity: 1; }

.espt-block-cards.is-design-soft .espt-crd-fvalue,
.espt-block-cards.is-design-outline .espt-crd-fvalue,
.espt-block-cards.is-design-minimal .espt-crd-fvalue { color: var(--deep); }

.espt-block-cards.is-design-soft .espt-crd-div,
.espt-block-cards.is-design-outline .espt-crd-div,
.espt-block-cards.is-design-minimal .espt-crd-div { background: color-mix(in srgb, var(--tint) 28%, transparent); }

.espt-block-cards.is-design-soft .espt-crd-corner,
.espt-block-cards.is-design-outline .espt-crd-corner,
.espt-block-cards.is-design-minimal .espt-crd-corner {
	background: var(--tint);
	box-shadow: 0 6px 16px color-mix(in srgb, var(--tint) 30%, transparent);
	color: #fff;
}

.espt-block-cards.is-design-minimal .espt-crd-corner { box-shadow: none; }

.espt-block-cards.is-design-soft.is-corner-shape-plain .espt-crd-corner,
.espt-block-cards.is-design-outline.is-corner-shape-plain .espt-crd-corner,
.espt-block-cards.is-design-minimal.is-corner-shape-plain .espt-crd-corner {
	background: transparent;
	box-shadow: none;
	color: var(--tint);
}

/* ------------------------------- keep the text clear of the corner icon
   Declared AFTER the designs: several of them (stack, split, minimal) reset
   .espt-crd-foot / .espt-crd-top with a `padding` shorthand at the same
   specificity, so these have to come later to survive. */

.espt-block-cards.is-corner-pos-br .espt-crd-foot { padding-right: calc(var(--corner-size, 48px) + 10px); }
.espt-block-cards.is-corner-pos-bl .espt-crd-foot { padding-left: calc(var(--corner-size, 48px) + 10px); }
.espt-block-cards.is-corner-pos-tr .espt-crd-badge { max-width: calc(100% - var(--corner-size, 48px) - 10px); }
.espt-block-cards.is-corner-pos-tl .espt-crd-top { padding-left: calc(var(--corner-size, 48px) + 10px); }

/* Centred text stays centred: reserve the same room on both sides. */
.espt-block-cards.is-text-align-center.is-corner-pos-br .espt-crd-foot,
.espt-block-cards.is-text-align-center.is-corner-pos-bl .espt-crd-foot {
	padding-left: calc(var(--corner-size, 48px) + 10px);
	padding-right: calc(var(--corner-size, 48px) + 10px);
}

.espt-block-cards.is-text-align-center.is-corner-pos-tl .espt-crd-top {
	padding-left: calc(var(--corner-size, 48px) + 10px);
	padding-right: calc(var(--corner-size, 48px) + 10px);
}

/* The split design paints a white panel that runs to the card edge, so its
   own footer padding has to be re-stated at a higher specificity. */
.espt-block-cards.is-design-split.is-corner-pos-br .espt-crd-foot { padding-right: calc(var(--corner-size, 48px) + 14px); }
.espt-block-cards.is-design-split.is-corner-pos-bl .espt-crd-foot { padding-left: calc(var(--corner-size, 48px) + 14px); }

/* ------------------------------------------------- shadow & hover */

.bd-shadow-soft.espt-block-cards .espt-crd-i { box-shadow: 0 10px 30px -18px rgba(15, 23, 42, 0.45); }
.bd-shadow-strong.espt-block-cards .espt-crd-i { box-shadow: 0 22px 46px -20px rgba(15, 23, 42, 0.55); }
.bd-shadow-soft.espt-block-cards.is-design-minimal .espt-crd-i,
.bd-shadow-strong.espt-block-cards.is-design-minimal .espt-crd-i { box-shadow: none; }

/* the shared "Design preset & box" hover, mapped onto the cards (the widget's
   own Hover effect below wins when both are set) */
.bd-hover-lift.espt-block-cards .espt-crd-i:hover {
	box-shadow: 0 18px 36px -14px rgba(15, 23, 42, 0.3);
	transform: translateY(-4px);
}

.bd-hover-scale.espt-block-cards .espt-crd-i:hover { transform: scale(1.015); }

.bd-hover-glow.espt-block-cards .espt-crd-i:hover {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--bd-primary) 30%, transparent), 0 14px 30px -12px rgba(15, 23, 42, 0.25);
}

.espt-block-cards.is-hover-lift .espt-crd-i:hover {
	box-shadow: 0 26px 54px -22px rgba(17, 24, 39, 0.5);
	transform: translateY(-6px);
}

.espt-block-cards.is-hover-glow .espt-crd-i:hover {
	box-shadow: 0 20px 46px -14px color-mix(in srgb, var(--tint) 55%, transparent);
}

.espt-block-cards.is-hover-zoom .espt-crd-i:hover { transform: scale(1.025); }

.espt-block-cards.is-hover-ring .espt-crd-i:hover {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--tint) 45%, transparent);
}

.espt-block-cards.is-hover-shine .espt-crd-i::after {
	background: linear-gradient(115deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.32) 50%, rgba(255, 255, 255, 0) 62%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	transform: translateX(-120%);
	transition: transform 0.75s ease;
	z-index: 4;
}

.espt-block-cards.is-hover-shine .espt-crd-i:hover::after { transform: translateX(120%); }

.espt-block-cards .espt-crd-i.is-linked:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--tint) 70%, #fff);
	outline-offset: 3px;
}

/* ------------------------------------------- staggered entrance
   assets/js/blocks/cards.js adds .is-ready (so the cards stay visible when
   the script never runs) and .is-inview once the section scrolls in. */

.espt-block-cards.is-item-anim-fade .espt-crd.is-ready .espt-crd-anim,
.espt-block-cards.is-item-anim-up .espt-crd.is-ready .espt-crd-anim,
.espt-block-cards.is-item-anim-zoom .espt-crd.is-ready .espt-crd-anim,
.espt-block-cards.is-item-anim-flip .espt-crd.is-ready .espt-crd-anim {
	opacity: 0;
	will-change: opacity, transform;
}

.espt-block-cards.is-item-anim-up .espt-crd.is-ready .espt-crd-anim { transform: translateY(26px); }
.espt-block-cards.is-item-anim-zoom .espt-crd.is-ready .espt-crd-anim { transform: scale(0.92); }
.espt-block-cards.is-item-anim-flip .espt-crd.is-ready .espt-crd-anim { transform: perspective(900px) rotateX(14deg); }

.espt-block-cards .espt-crd.is-ready.is-inview .espt-crd-anim {
	opacity: 1;
	transform: none;
	/* box-shadow stays in the list: this rule out-specifies the card's own
	   transition, and without it the hover shadow would snap. */
	transition: opacity 0.55s ease, transform 0.55s ease, box-shadow 0.28s ease;
	transition-delay: calc(var(--i, 0) * var(--stagger, 80ms));
	will-change: auto;
}

/* --------------------------------------------------------- tablet */

@media (min-width: 768px) {
	.espt-block-cards .espt-crd-eyebrow { font-size: 13.5px; }
	.espt-block-cards .espt-crd-hsub { font-size: 16px; }
	.espt-block-cards .espt-crd-title { margin-top: 22px; }
	.espt-block-cards .espt-crd-desc { margin-top: 14px; }
	.espt-block-cards .espt-crd-foot { padding-top: 18px; }
}

/* -------------------------------------------------------- desktop */

@media (min-width: 1024px) {
	.espt-block-cards .espt-crd-badge { padding: 0.55em 1.15em; }
	.espt-block-cards .espt-crd-desc { margin-top: 15px; }
	.espt-block-cards .espt-crd-hsub { margin-top: 12px; }
}

/* ------------------------------------------- very narrow phones */

@media (max-width: 359.98px) {
	/* declared on the card so the corner AND the footer padding calc agree */
	.espt-block-cards .espt-crd-i { --corner-size: 38px; }
	.espt-block-cards .espt-crd-in { padding: calc(var(--bd-pad, 20px) * 0.8); }
	.espt-block-cards .espt-crd-title { font-size: calc(var(--title-size, 24px) * 0.88); }
}

@media (prefers-reduced-motion: reduce) {
	.espt-block-cards .espt-crd-i,
	.espt-block-cards .espt-crd-img { transition: none; }
	.espt-block-cards.is-hover-lift .espt-crd-i:hover,
	.espt-block-cards.is-hover-zoom .espt-crd-i:hover,
	.bd-hover-lift.espt-block-cards .espt-crd-i:hover,
	.bd-hover-scale.espt-block-cards .espt-crd-i:hover { transform: none; }
	.espt-block-cards.is-img-zoom .espt-crd-i:hover .espt-crd-img { transform: none; }
	.espt-block-cards.is-hover-shine .espt-crd-i::after,
	.espt-block-cards.is-hover-shine .espt-crd-i:hover::after { display: none; }
	.espt-block-cards.is-item-anim-fade .espt-crd.is-ready .espt-crd-anim,
	.espt-block-cards.is-item-anim-up .espt-crd.is-ready .espt-crd-anim,
	.espt-block-cards.is-item-anim-zoom .espt-crd.is-ready .espt-crd-anim,
	.espt-block-cards.is-item-anim-flip .espt-crd.is-ready .espt-crd-anim {
		opacity: 1;
		transform: none;
		transition: none;
	}
}