/* Features Grid — .espt-block-features
   vars: --accent --cols --gap --head-gap --stagger
         --eyebrow-color --eyebrow-size --title-color --title-size
         --sub-color --sub-size --item-title-color --item-title-size
         --desc-color --desc-size --icon-color --icon-bg --icon-size
         --icon-box --icon-radius --cta-radius --cta-bg --cta-color --cta2-color
         --acc (per-card accent, set inline)
         --chip-bg / --chip-ink (per-design chip tint + ink, set on the card)
         --bd-* (shared layer)
   classes: is-design-{card|soft|outline|dark|minimal|gradient|glass|accent}
            is-icon-pos-{top|left} is-text-align-* is-head-align-*
            is-icon-style-{soft|circle|square|outline|gradient|plain}
            is-eyebrow-style-{plain|pill|dash|line} is-item-anim-{fade|up|zoom|flip}
            is-card-hover is-cta-align-* is-cta-full
            is-cta-icon-anim-{slide|rotate|bounce|pulse}
   The .bd-* skin / shadow / hover classes of the shared layer drive the cards. */

/* --acc is the colour everything accents with: the widget's own "Accent
   colour" when set, otherwise the BD skin's primary, and a per-card colour
   overrides it inline on that card. */
.espt-block-features .espt-ft {
	--acc: var(--accent, var(--bd-primary));
	color: var(--bd-body);
	min-width: 0;
}

/* ---------------------------------------------------------------- heading */
.espt-block-features .espt-ft-head {
	margin: 0 0 var(--head-gap, 28px);
	max-width: 720px;
	min-width: 0;
	text-align: left;
}

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

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

.espt-block-features .espt-ft-eyebrow {
	color: var(--eyebrow-color, var(--acc));
	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-features.is-eyebrow-style-pill .espt-ft-eyebrow {
	background: color-mix(in srgb, var(--eyebrow-color, var(--acc)) 12%, transparent);
	border-radius: 999px;
	padding: 5px 14px;
}

.espt-block-features.is-eyebrow-style-dash .espt-ft-eyebrow::before,
.espt-block-features.is-eyebrow-style-dash .espt-ft-eyebrow::after {
	background: currentColor;
	content: "";
	display: inline-block;
	height: 2px;
	opacity: 0.55;
	vertical-align: middle;
	width: 18px;
}

.espt-block-features.is-eyebrow-style-dash .espt-ft-eyebrow::before { margin-right: 8px; }
.espt-block-features.is-eyebrow-style-dash .espt-ft-eyebrow::after { margin-left: 8px; }

.espt-block-features.is-eyebrow-style-line .espt-ft-eyebrow {
	border-bottom: 2px solid color-mix(in srgb, var(--eyebrow-color, var(--acc)) 45%, transparent);
	padding-bottom: 4px;
}

.espt-block-features .espt-ft-title {
	color: var(--title-color, var(--bd-ink));
	font-size: var(--title-size, 24px);
	font-weight: 800;
	line-height: 1.22;
	margin: 0 0 10px;
	overflow-wrap: anywhere;
}

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

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

/* ------------------------------------------------------------------- card */
.espt-block-features .espt-ft-i {
	align-items: flex-start;
	background: var(--bd-box-bg);
	border: 1px solid var(--bd-box-line);
	border-radius: var(--bd-radius, 16px);
	color: inherit;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	overflow-wrap: anywhere;
	padding: var(--bd-pad, 16px);
	position: relative;
	text-align: left;
	text-decoration: none;
	transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.espt-block-features .espt-ft-i:hover,
.espt-block-features .espt-ft-i:focus-visible {
	color: inherit;
	text-decoration: none;
}

/* linked cards are clickable and must show where the keyboard is */
.espt-block-features .espt-ft-i.is-linked {
	cursor: pointer;
}

.espt-block-features .espt-ft-i.is-linked:focus-visible {
	outline: 2px solid var(--acc);
	outline-offset: 3px;
}

.espt-block-features .espt-ft-b {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	width: 100%;
}

.espt-block-features .espt-ft-t {
	color: var(--item-title-color, var(--bd-ink));
	font-size: var(--item-title-size, 17px);
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
	overflow-wrap: anywhere;
}

.espt-block-features .espt-ft-d {
	color: var(--desc-color, var(--bd-muted));
	font-size: var(--desc-size, 15px);
	line-height: 1.65;
	margin: 0;
	overflow-wrap: anywhere;
}

.espt-block-features .espt-ft-more {
	align-items: center;
	color: var(--acc);
	display: inline-flex;
	font-size: calc(var(--desc-size, 15px) * 0.95);
	font-weight: 700;
	gap: 6px;
	margin-top: 4px;
}

.espt-block-features .espt-ft-arrow {
	transition: transform 0.2s ease;
}

.espt-block-features .espt-ft-i:hover .espt-ft-arrow {
	transform: translateX(4px);
}

/* text alignment inside the cards */
.espt-block-features.is-text-align-center .espt-ft-i {
	align-items: center;
	text-align: center;
}

.espt-block-features.is-text-align-center .espt-ft-b { align-items: center; }

.espt-block-features.is-text-align-right .espt-ft-i {
	align-items: flex-end;
	text-align: right;
}

.espt-block-features.is-text-align-right .espt-ft-b { align-items: flex-end; }

/* icon beside the text */
.espt-block-features.is-icon-pos-left .espt-ft-i {
	align-items: flex-start;
	flex-direction: row;
}

.espt-block-features.is-icon-pos-left.is-text-align-center .espt-ft-i,
.espt-block-features.is-icon-pos-left.is-text-align-right .espt-ft-i {
	align-items: center;
}

/* --------------------------------------------------------------- icon chip
   A design preset only feeds --chip-bg (see the designs below); the chip
   *style* rules here set `background` outright and are one class more
   specific, so an outline / gradient / solid / bare chip keeps its look on
   every design instead of being repainted by it. */
.espt-block-features .espt-ft-ic {
	--ic: var(--icon-color, var(--chip-ink, var(--acc)));
	align-items: center;
	background: var(--icon-bg, var(--chip-bg, color-mix(in srgb, var(--acc) 12%, var(--bd-soft))));
	border-radius: var(--icon-radius, 14px);
	color: var(--ic);
	display: inline-flex;
	flex: 0 0 auto;
	font-size: var(--icon-size, 22px);
	height: var(--icon-box, 48px);
	justify-content: center;
	line-height: 1;
	transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease;
	width: var(--icon-box, 48px);
}

/* The icon library is stroke-based (fill="none" on the <svg>), so only the
   box size is set here — never `fill`, which would flood the glyphs. */
.espt-block-features .espt-ft-ic .espt-ic svg {
	height: 1em;
	width: 1em;
}

/* only the image chip clips — an icon larger than its chip must not be cut */
.espt-block-features .espt-ft-ic-img {
	overflow: hidden;
	padding: 0;
}

.espt-block-features .espt-ft-ic-img img {
	border-radius: inherit;
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.espt-block-features.is-icon-style-circle .espt-ft-ic { border-radius: 50%; }

/* solid: the accent fills the chip and the glyph flips to the light ink */
.espt-block-features.is-icon-style-square .espt-ft-ic {
	--ic: var(--icon-color, #fff);
	background: var(--icon-bg, var(--acc));
}

.espt-block-features.is-icon-style-outline .espt-ft-ic {
	background: transparent;
	border: 2px solid color-mix(in srgb, var(--ic) 40%, transparent);
}

.espt-block-features.is-icon-style-gradient .espt-ft-ic {
	--ic: var(--icon-color, #fff);
	background: var(--icon-bg, linear-gradient(135deg, var(--acc), var(--bd-primary-dark)));
}

.espt-block-features.is-icon-style-plain .espt-ft-ic {
	background: none;
	border: 0;
	border-radius: 0;
	height: auto;
	overflow: visible;
	width: auto;
}

.espt-block-features.is-icon-style-plain .espt-ft-ic-img img {
	height: auto;
	max-height: var(--icon-box, 48px);
	width: auto;
}

/* ------------------------------------------------------------ CTA buttons */
.espt-block-features .espt-ft-cta {
	margin-top: 26px;
	min-width: 0;
}

.espt-block-features .espt-ft-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* the transparent border keeps the solid button exactly as tall as the ghost */
.espt-block-features .espt-ft-btn {
	border: 2px solid transparent;
	border-radius: var(--cta-radius, 10px);
	flex: 1 1 100%;
	font-size: 15px;
	max-width: 100%;
	min-width: 0;
	overflow-wrap: anywhere;
	padding: 13px 26px;
	text-align: center;
}

.espt-block-features .espt-ft-btn.has-ico { gap: 10px; }

.espt-block-features .espt-ft-bt { min-width: 0; }

.espt-block-features .espt-ft-btn:focus-visible {
	outline: 2px solid var(--acc);
	outline-offset: 3px;
}

.espt-block-features .espt-ft-btn-1 {
	background: var(--cta-bg, var(--espt-btn-bg, var(--acc)));
	color: var(--cta-color, #fff);
}

.espt-block-features .espt-ft-btn-1:hover,
.espt-block-features .espt-ft-btn-1:focus-visible {
	color: var(--cta-color, #fff);
}

.espt-block-features .espt-ft-btn-2 {
	background: transparent;
	border-color: var(--cta2-color, var(--acc));
	color: var(--cta2-color, var(--acc));
}

.espt-block-features .espt-ft-btn-2:hover,
.espt-block-features .espt-ft-btn-2:focus-visible {
	background: color-mix(in srgb, var(--cta2-color, var(--espt-btn-bg, var(--acc))) 10%, transparent);
	color: var(--cta2-color, var(--acc));
}

.espt-block-features .espt-ft-bi {
	font-size: 1.1em;
	transition: transform 0.2s ease;
}

.espt-block-features.is-cta-icon-anim-slide .espt-ft-btn.is-ico-after:hover .espt-ft-bi { transform: translateX(4px); }
.espt-block-features.is-cta-icon-anim-slide .espt-ft-btn.is-ico-before:hover .espt-ft-bi { transform: translateX(-4px); }
.espt-block-features.is-cta-icon-anim-rotate .espt-ft-btn:hover .espt-ft-bi { transform: rotate(180deg); }
.espt-block-features.is-cta-icon-anim-bounce .espt-ft-bi { animation: espt-ft-bounce 1.4s ease-in-out infinite; }
.espt-block-features.is-cta-icon-anim-pulse .espt-ft-bi { animation: espt-ft-pulse 1.4s ease-in-out infinite; }

@keyframes espt-ft-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-4px); }
}

@keyframes espt-ft-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.16); }
}

.espt-block-features .espt-ft-note {
	color: var(--bd-muted);
	font-size: 13.5px;
	line-height: 1.6;
	margin: 12px 0 0;
	overflow-wrap: anywhere;
}

.espt-block-features.is-cta-align-center .espt-ft-btns { justify-content: center; }
.espt-block-features.is-cta-align-center .espt-ft-note { text-align: center; }
.espt-block-features.is-cta-align-right .espt-ft-btns { justify-content: flex-end; }
.espt-block-features.is-cta-align-right .espt-ft-note { text-align: right; }

/* ---------------------------------------------------------------- designs */
/* 2 — soft tinted */
.espt-block-features.is-design-soft .espt-ft-i {
	--chip-bg: var(--bd-box-bg);
	background: color-mix(in srgb, var(--acc) 7%, var(--bd-box-bg));
	border-color: transparent;
}

/* 3 — outline */
.espt-block-features.is-design-outline .espt-ft-i {
	background: transparent;
	border: 2px solid var(--bd-box-line);
	box-shadow: none;
}

.espt-block-features.is-design-outline .espt-ft-i:hover {
	border-color: var(--acc);
}

/* 4 — dark */
.espt-block-features.is-design-dark .espt-ft-i {
	background: var(--bd-deep);
	border-color: color-mix(in srgb, #fff 10%, transparent);
}

.espt-block-features.is-design-dark .espt-ft-t { color: var(--item-title-color, #f8fafc); }
.espt-block-features.is-design-dark .espt-ft-d { color: var(--desc-color, rgba(255, 255, 255, 0.72)); }

/* On a dark card the accent itself can be near-black (the Noir skin), so the
   chip ink and the "read more" line are lightened towards white. */
.espt-block-features.is-design-dark .espt-ft-i {
	--chip-bg: rgba(255, 255, 255, 0.12);
	--chip-ink: color-mix(in srgb, var(--acc) 55%, #fff);
}

.espt-block-features.is-design-dark .espt-ft-more {
	color: color-mix(in srgb, var(--acc) 55%, #fff);
}

/* 5 — minimal (no box) */
.espt-block-features.is-design-minimal .espt-ft-i {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}

/* 6 — gradient */
.espt-block-features.is-design-gradient .espt-ft-i {
	background: linear-gradient(160deg, color-mix(in srgb, var(--acc) 14%, var(--bd-box-bg)), var(--bd-box-bg) 70%);
	border-color: color-mix(in srgb, var(--acc) 22%, var(--bd-box-line));
}

/* 7 — glass */
.espt-block-features.is-design-glass .espt-ft-i {
	--chip-bg: color-mix(in srgb, var(--acc) 16%, #fff);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	background: color-mix(in srgb, var(--bd-box-bg) 62%, transparent);
	border-color: color-mix(in srgb, #fff 55%, var(--bd-box-line));
}

/* 8 — accent bar */
.espt-block-features.is-design-accent .espt-ft-i {
	border-top: 4px solid var(--acc);
}

.espt-block-features.is-design-accent.is-icon-pos-left .espt-ft-i {
	border-left: 4px solid var(--acc);
	border-top: 1px solid var(--bd-box-line);
}

/* ------------------------------------------------------- shadow & hover
   (driven by the shared layer's .bd-shadow-* / .bd-hover-* root classes) */
.bd-shadow-soft.espt-block-features .espt-ft-i { box-shadow: 0 6px 22px -14px rgba(15, 23, 42, 0.28); }
.bd-shadow-strong.espt-block-features .espt-ft-i { box-shadow: 0 16px 36px -18px rgba(15, 23, 42, 0.45); }

.espt-block-features.is-card-hover .espt-ft-i:hover {
	box-shadow: 0 18px 40px -20px rgba(15, 23, 42, 0.4);
	transform: translateY(-4px);
}

.espt-block-features.is-card-hover .espt-ft-i:hover .espt-ft-ic {
	transform: scale(1.06);
}

.bd-hover-lift.espt-block-features .espt-ft-i:hover {
	box-shadow: 0 18px 40px -20px rgba(15, 23, 42, 0.4);
	transform: translateY(-6px);
}

.bd-hover-scale.espt-block-features .espt-ft-i:hover {
	transform: scale(1.025);
}

.bd-hover-glow.espt-block-features .espt-ft-i:hover {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 28%, transparent), 0 14px 30px -18px rgba(15, 23, 42, 0.3);
}

.espt-block-features.is-design-minimal .espt-ft-i:hover,
.espt-block-features.is-design-minimal.is-card-hover .espt-ft-i:hover,
.bd-shadow-soft.espt-block-features.is-design-minimal .espt-ft-i,
.bd-shadow-strong.espt-block-features.is-design-minimal .espt-ft-i,
.bd-shadow-soft.espt-block-features.is-design-outline .espt-ft-i,
.bd-shadow-strong.espt-block-features.is-design-outline .espt-ft-i,
.espt-block-features.is-design-outline.is-card-hover .espt-ft-i:hover {
	box-shadow: none;
}

/* -------------------------------------------------- staggered entrance
   assets/js/blocks/features.js adds .is-ready (so the content stays visible
   when the script never runs) and then .is-inview once the section scrolls in */
.espt-block-features.is-item-anim-fade .espt-ft.is-ready .espt-ft-anim,
.espt-block-features.is-item-anim-up .espt-ft.is-ready .espt-ft-anim,
.espt-block-features.is-item-anim-zoom .espt-ft.is-ready .espt-ft-anim,
.espt-block-features.is-item-anim-flip .espt-ft.is-ready .espt-ft-anim {
	opacity: 0;
	will-change: opacity, transform;
}

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

.espt-block-features .espt-ft.is-ready.is-inview .espt-ft-anim {
	opacity: 1;
	transform: none;
	transition: opacity 0.55s ease, transform 0.55s ease;
	transition-delay: calc(var(--i, 0) * var(--stagger, 70ms));
	will-change: auto;
}

/* -------------------------------------------------------------- breakpoints
   Phones stack the buttons full width; from the tablet breakpoint they sit
   side by side unless "Full width" is on. */
@media (min-width: 768px) {
	.espt-block-features .espt-ft-i { gap: 16px; }
	.espt-block-features .espt-ft-cta { margin-top: 32px; }

	.espt-block-features .espt-ft-btn {
		flex: 0 0 auto;
		font-size: 15.5px;
	}

	.espt-block-features.is-cta-full .espt-ft-btn {
		flex: 1 1 100%;
	}
}

@media (min-width: 1024px) {
	.espt-block-features .espt-ft-i { gap: 18px; }
	.espt-block-features .espt-ft-cta { margin-top: 36px; }
}

@media (prefers-reduced-motion: reduce) {
	.espt-block-features .espt-ft-i,
	.espt-block-features .espt-ft-ic,
	.espt-block-features .espt-ft-arrow,
	.espt-block-features .espt-ft-bi {
		transition: none;
	}

	/* the class is repeated so this outranks the .bd-hover-* / .is-card-hover rules */
	.espt-block-features.espt-block-features .espt-ft-i:hover,
	.espt-block-features.espt-block-features .espt-ft-i:hover .espt-ft-ic,
	.espt-block-features.espt-block-features .espt-ft-i:hover .espt-ft-arrow,
	.espt-block-features.espt-block-features .espt-ft-btn:hover,
	.espt-block-features.espt-block-features .espt-ft-btn:hover .espt-ft-bi {
		transform: none;
	}

	.espt-block-features .espt-ft-btn { transition: none; }

	.espt-block-features .espt-ft-bi { animation: none; }

	.espt-block-features.is-item-anim-fade .espt-ft.is-ready .espt-ft-anim,
	.espt-block-features.is-item-anim-up .espt-ft.is-ready .espt-ft-anim,
	.espt-block-features.is-item-anim-zoom .espt-ft.is-ready .espt-ft-anim,
	.espt-block-features.is-item-anim-flip .espt-ft.is-ready .espt-ft-anim {
		opacity: 1;
		transform: none;
		transition: none;
	}
}