/* BD Benefits Grid — .espt-block-bd-benefits-grid
   vars: --cols --gap --heading-size --title-size --sub-size --num-size --accent-width
         --highlight-color --heading-color --title-color --sub-color
         --accent-odd --accent-even --num-color --num-bg
   classes: is-design-{accent|top|soft|outline|dark|minimal}
            is-num-style-{inline|badge|big} is-heading-align-* is-text-align-*
   BD layer: .bd-shadow-* / .bd-hover-* drive the cards (no .espt-bd-box here,
   the cards read --bd-box-bg/--bd-box-line/--bd-radius/--bd-pad themselves). */

.espt-block-bd-benefits-grid .bdg13 {
	color: var(--bd-ink);
	min-width: 0;
}

/* ---------------------------------------------------------------- heading */
.espt-block-bd-benefits-grid .bdg13-h {
	color: var(--heading-color, var(--bd-ink));
	font-size: var(--heading-size, 20px);
	font-weight: 800;
	line-height: 1.3;
	margin: 0 0 16px;
	overflow-wrap: anywhere;
	text-align: center;
}

.espt-block-bd-benefits-grid .bdg13-hl {
	color: var(--highlight-color, var(--bd-danger));
}

.espt-block-bd-benefits-grid.is-heading-align-left .bdg13-h { text-align: left; }
.espt-block-bd-benefits-grid.is-heading-align-right .bdg13-h { text-align: right; }

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

/* ------------------------------------------------------------------- card */
.espt-block-bd-benefits-grid .bdg13-c {
	--acc: var(--accent-odd, var(--bd-primary));
	background: var(--bd-box-bg);
	border: 1px solid var(--bd-box-line);
	border-left: var(--accent-width, 4px) solid var(--acc);
	border-radius: var(--bd-radius);
	min-width: 0;
	overflow-wrap: anywhere;
	padding: calc(var(--bd-pad) * 0.75) var(--bd-pad);
	position: relative;
	text-align: left;
	transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.espt-block-bd-benefits-grid .bdg13-c:nth-child(2n) {
	--acc: var(--accent-even, var(--bd-accent));
}

.espt-block-bd-benefits-grid.is-text-align-center .bdg13-c { text-align: center; }
.espt-block-bd-benefits-grid.is-text-align-right .bdg13-c { text-align: right; }

.espt-block-bd-benefits-grid .bdg13-t {
	color: var(--title-color, var(--bd-ink));
	display: block;
	font-size: var(--title-size, 15px);
	font-weight: 700;
	line-height: 1.5;
	margin: 0 0 3px;
}

.espt-block-bd-benefits-grid .bdg13-s {
	color: var(--sub-color, var(--bd-muted));
	display: block;
	font-size: var(--sub-size, 13px);
	line-height: 1.6;
}

/* ---------------------------------------------------------------- numbers */
.espt-block-bd-benefits-grid .bdg13-n {
	color: var(--num-color, var(--bd-muted));
	font-size: var(--num-size, 15px);
	font-style: normal;
	font-weight: 700;
	margin-right: 0.25em;
}

.espt-block-bd-benefits-grid.is-num-style-badge .bdg13-n {
	background: var(--num-bg, var(--bd-soft));
	border-radius: 50%;
	color: var(--num-color, var(--bd-primary));
	display: inline-grid;
	height: 1.7em;
	line-height: 1;
	margin-right: 0.5em;
	place-items: center;
	vertical-align: middle;
	width: 1.7em;
}

.espt-block-bd-benefits-grid.is-num-style-big .bdg13-n-big {
	color: var(--num-color, var(--acc));
	display: block;
	font-size: calc(var(--num-size, 15px) * 1.9);
	font-weight: 800;
	line-height: 1;
	margin: 0 0 6px;
	opacity: 0.9;
}

/* ------------------------------------------------------------- shadows & hover
   (the BD layer's .bd-shadow-* / .bd-hover-* classes drive the cards) */
.bd-shadow-soft.espt-block-bd-benefits-grid .bdg13-c { box-shadow: 0 6px 20px -12px rgba(15, 23, 42, 0.18); }
.bd-shadow-strong.espt-block-bd-benefits-grid .bdg13-c { box-shadow: 0 14px 32px -16px rgba(15, 23, 42, 0.35); }
.bd-hover-lift.espt-block-bd-benefits-grid .bdg13-c:hover { box-shadow: 0 12px 24px -14px rgba(0, 0, 0, 0.4); transform: translateY(-4px); }
.bd-hover-scale.espt-block-bd-benefits-grid .bdg13-c:hover { transform: scale(1.03); }
.bd-hover-glow.espt-block-bd-benefits-grid .bdg13-c:hover { box-shadow: 0 0 0 2px var(--acc); }

/* ---------------------------------------------------------- staggered reveal
   (root gets data-bd-anim + .is-in from the shared layer)
   `backwards` — never `both`/`forwards`: a filled animation keeps winning the
   cascade after it ends, which would freeze the cards' transform and kill the
   .bd-hover-lift / .bd-hover-scale hover. The pre-state lives on :not(.is-in)
   so nothing is left over once the reveal has run. */
.espt-block-bd-benefits-grid[data-bd-anim]:not(.is-in) .bdg13-c {
	opacity: 0;
	transform: translateY(12px);
}

.espt-block-bd-benefits-grid[data-bd-anim].is-in .bdg13-c {
	animation: bdg13-in 0.5s ease backwards;
	animation-delay: calc(min(var(--i, 0), 8) * 70ms);
}

@keyframes bdg13-in {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- designs */
/* top accent bar */
.espt-block-bd-benefits-grid.is-design-top .bdg13-c {
	border-left: 1px solid var(--bd-box-line);
	border-top: var(--accent-width, 4px) solid var(--acc);
}

/* soft tinted */
.espt-block-bd-benefits-grid.is-design-soft .bdg13-c {
	background: color-mix(in srgb, var(--acc) 9%, var(--bd-box-bg));
	border-color: color-mix(in srgb, var(--acc) 28%, var(--bd-box-line));
	border-left-width: 1px;
}

.espt-block-bd-benefits-grid.is-design-soft.is-num-style-badge .bdg13-n {
	background: var(--num-bg, var(--acc));
	color: var(--num-color, #fff);
}

/* outline — alternating 2px border */
.espt-block-bd-benefits-grid.is-design-outline .bdg13-c {
	background: transparent;
	border: 2px solid var(--acc);
	box-shadow: none;
}

.espt-block-bd-benefits-grid.is-design-outline .bdg13-n { color: var(--num-color, var(--acc)); }

/* dark */
.espt-block-bd-benefits-grid.is-design-dark .bdg13-c {
	background: var(--bd-deep);
	border-color: transparent;
	border-left: var(--accent-width, 4px) solid var(--acc);
}

.espt-block-bd-benefits-grid.is-design-dark .bdg13-t { color: var(--title-color, #fff); }
.espt-block-bd-benefits-grid.is-design-dark .bdg13-s { color: var(--sub-color, rgba(255, 255, 255, 0.72)); }
.espt-block-bd-benefits-grid.is-design-dark .bdg13-n { color: var(--num-color, var(--acc)); }
.espt-block-bd-benefits-grid.is-design-dark.is-num-style-badge .bdg13-n { background: var(--num-bg, rgba(255, 255, 255, 0.12)); }

/* minimal — no boxes, a thin accent rule on the left */
.espt-block-bd-benefits-grid.is-design-minimal .bdg13-c {
	background: transparent;
	border: 0;
	border-left: var(--accent-width, 4px) solid var(--acc);
	border-radius: 0;
	box-shadow: none;
	padding: 4px 0 4px calc(var(--bd-pad) * 0.75);
}

.espt-block-bd-benefits-grid.is-design-minimal.is-text-align-center .bdg13-c,
.espt-block-bd-benefits-grid.is-design-minimal.is-text-align-right .bdg13-c {
	border-left: 0;
	border-top: var(--accent-width, 4px) solid var(--acc);
	padding: 10px 0 4px;
}

.bd-hover-lift.espt-block-bd-benefits-grid.is-design-minimal .bdg13-c:hover,
.bd-hover-glow.espt-block-bd-benefits-grid.is-design-minimal .bdg13-c:hover,
.bd-hover-scale.espt-block-bd-benefits-grid.is-design-minimal .bdg13-c:hover,
.bd-hover-lift.espt-block-bd-benefits-grid.is-design-outline .bdg13-c:hover {
	box-shadow: none;
}

.bd-hover-glow.espt-block-bd-benefits-grid.is-design-outline .bdg13-c:hover {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 30%, transparent);
}

/* borderless cards get a tint instead of a ring, so hover is never a no-op */
.bd-hover-glow.espt-block-bd-benefits-grid.is-design-minimal .bdg13-c:hover {
	background: color-mix(in srgb, var(--acc) 8%, transparent);
}

/* ------------------------------------------------------------ breakpoints */
@media (min-width: 768px) {
	.espt-block-bd-benefits-grid .bdg13-h { margin-bottom: 18px; }
}

@media (min-width: 1024px) {
	.espt-block-bd-benefits-grid .bdg13-h { margin-bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.espt-block-bd-benefits-grid .bdg13-c { transition: none; }
	/* must match the .bd-hover-* specificity (0,4,0) to actually win */
	.bd-hover-lift.espt-block-bd-benefits-grid .bdg13-c:hover,
	.bd-hover-scale.espt-block-bd-benefits-grid .bdg13-c:hover,
	.bd-hover-lift.espt-block-bd-benefits-grid.is-design-minimal .bdg13-c:hover,
	.bd-hover-scale.espt-block-bd-benefits-grid.is-design-minimal .bdg13-c:hover { transform: none; }
	.espt-block-bd-benefits-grid[data-bd-anim]:not(.is-in) .bdg13-c,
	.espt-block-bd-benefits-grid[data-bd-anim].is-in .bdg13-c { animation: none; opacity: 1; transform: none; }
}