/* BD Benefits List — .espt-block-bd-benefits-list
   vars from the block: --cols --gap --row-pad --icon-size --title-size
         --sub-size --icon-color --title-color --sub-color
   derived here: --mk (marker box) --mk-top (marker/first-line offset)
         --divider (1px at one column, 0 in a grid) --rowgap
   classes: is-design-{lines|cards|soft|zebra|timeline|dark|minimal}
            is-marker-{icon|number|none} is-icon-style-{plain|bubble|square|solid}
            is-icon-pos-{left|top} is-text-align-* (shared) is-stagger */

.espt-block-bd-benefits-list {
	--mk: var(--icon-size, 20px); /* marker box size (plain) */
	/* offset that centres the marker on the first title line, never negative */
	--mk-top: max(0px, calc((var(--title-size, 15px) * 1.5 - var(--mk)) / 2));
	/* One column = a divider list (rows touch, 1px rule between them).
	   Two or three columns = a real grid, so the rules would dangle at the
	   foot of every column: drop them and separate the cells with the gap
	   instead. Both switch on --cols with pure maths (no :nth-child can
	   count a variable number of columns). */
	--divider: clamp(0px, calc((2 - var(--cols, 1)) * 1px), 1px);
	--rowgap: min(var(--gap, 10px), calc((var(--cols, 1) - 1) * var(--gap, 10px)));
}

.espt-block-bd-benefits-list.is-icon-style-bubble,
.espt-block-bd-benefits-list.is-icon-style-square,
.espt-block-bd-benefits-list.is-icon-style-solid {
	--mk: calc(var(--icon-size, 20px) * 1.8);
}

.espt-block-bd-benefits-list .bdl14-head { margin: 0 0 14px; }
.espt-block-bd-benefits-list .bdl14-head .espt-sub { margin-bottom: 0; }
.espt-block-bd-benefits-list .bdl14-head .espt-title + .espt-sub { margin-top: 4px; }

.espt-block-bd-benefits-list .bdl14-title,
.espt-block-bd-benefits-list .bdl14-sub {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* the heading tag may be a <p>, which must still read as the title */
.espt-block-bd-benefits-list p.bdl14-title { margin: 0 0 8px; }

/* the list */
.espt-block-bd-benefits-list .bdl14 {
	color: var(--bd-ink);
	display: grid;
	gap: var(--rowgap) var(--gap, 10px);
	grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
	list-style: none;
	margin: 0;
	min-width: 0;
}

.espt-block-bd-benefits-list .bdl14-item {
	align-items: flex-start;
	border-bottom: var(--divider) solid var(--bd-line);
	display: flex;
	gap: 11px;
	margin: 0;
	min-width: 0;
	padding: var(--row-pad, 11px) 0;
	transition: background-color 0.2s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.espt-block-bd-benefits-list .bdl14-item:last-child { border-bottom: 0; }

/* marker (icon / number) */
.espt-block-bd-benefits-list .bdl14-i {
	align-items: center;
	color: var(--icon-color, var(--bd-primary));
	display: inline-flex;
	flex: 0 0 auto;
	font-size: var(--icon-size, 20px);
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	height: var(--mk);
	justify-content: center;
	line-height: 1;
	margin-top: var(--mk-top);
	transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
	width: var(--mk);
}

.espt-block-bd-benefits-list .bdl14-i svg {
	height: 1em;
	width: 1em;
}

/* Numbers: a fixed --mk box clips/overlaps at 10+ ("১০", "12"), so the
   marker keeps --mk as a *minimum* and grows into a pill instead. */
.espt-block-bd-benefits-list .bdl14-n {
	font-size: calc(var(--icon-size, 20px) * 0.8);
	min-width: var(--mk);
	padding: 0 0.2em;
	width: auto;
}

.espt-block-bd-benefits-list.is-icon-style-plain .bdl14-n { font-size: var(--icon-size, 20px); }

.espt-block-bd-benefits-list.is-icon-style-bubble .bdl14-i,
.espt-block-bd-benefits-list.is-icon-style-square .bdl14-i,
.espt-block-bd-benefits-list.is-icon-style-solid .bdl14-i {
	background: var(--bd-soft);
	border-radius: 999px; /* = a circle while the box is square, a pill once a number widens it */
	font-size: calc(var(--icon-size, 20px) * 0.82);
}

.espt-block-bd-benefits-list.is-icon-style-square .bdl14-i { border-radius: calc(var(--mk) * 0.28); }

.espt-block-bd-benefits-list.is-icon-style-solid .bdl14-i {
	background: var(--icon-color, var(--bd-primary));
	box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--icon-color, var(--bd-primary)) 60%, transparent);
	color: #fff;
}

.espt-block-bd-benefits-list .bdl14-item:hover .bdl14-i { transform: scale(1.1); }

/* text */
.espt-block-bd-benefits-list .bdl14-t {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	overflow-wrap: anywhere;
}

.espt-block-bd-benefits-list .bdl14-b {
	color: var(--title-color, var(--bd-ink));
	display: block;
	font-size: var(--title-size, 15px);
	font-weight: 700;
	line-height: 1.5;
	transition: color 0.2s ease;
}

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

.espt-block-bd-benefits-list .bdl14-badge {
	background: var(--bd-accent);
	border-radius: 999px;
	color: var(--bd-accent-ink);
	display: inline-block;
	font-size: calc(var(--sub-size, 13px) * 0.82);
	font-style: normal;
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1.3;
	margin-left: 6px;
	padding: 3px 9px;
	max-width: 100%;
	overflow-wrap: anywhere;
	vertical-align: middle;
}

.espt-block-bd-benefits-list .bdl14-item.is-hl .bdl14-b { color: var(--title-color, var(--bd-primary-dark)); }

/* Marker above text. The marker-position control is hidden when the marker is
   "none", but the framework still prints its class from the stored value —
   so a list with no marker must never fall into the centred column layout. */
.espt-block-bd-benefits-list.is-icon-pos-top:not(.is-marker-none) .bdl14-item {
	align-items: center;
	flex-direction: column;
	gap: 8px;
	text-align: center;
}

.espt-block-bd-benefits-list.is-icon-pos-top .bdl14-i { margin-top: 0; }
.espt-block-bd-benefits-list.is-icon-pos-top:not(.is-marker-none) .bdl14-t { align-items: center; }

/* no marker */
.espt-block-bd-benefits-list.is-marker-none .bdl14-item { gap: 0; }

/* ---- designs ---- */

/* cards / soft: outer box becomes transparent, every item is its own box */
.espt-block-bd-benefits-list.is-design-cards .bdl14,
.espt-block-bd-benefits-list.is-design-soft .bdl14,
.espt-block-bd-benefits-list.is-design-minimal .bdl14 {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	gap: var(--gap, 10px);
	padding: 0;
}

/* The <ul> still carries .espt-bd-box, so the shared .bd-hover-* rules would
   lift/glow the (now invisible) container as well as the card under the
   pointer. Each item owns the hover in these designs — mute the wrapper. */
.espt-block-bd-benefits-list.is-design-cards .bdl14:hover,
.espt-block-bd-benefits-list.is-design-soft .bdl14:hover,
.espt-block-bd-benefits-list.is-design-minimal .bdl14:hover {
	box-shadow: none;
	transform: none;
}

.espt-block-bd-benefits-list.is-design-cards .bdl14-item,
.espt-block-bd-benefits-list.is-design-soft .bdl14-item {
	background: var(--bd-box-bg);
	border: 1px solid var(--bd-box-line);
	border-radius: var(--bd-radius);
	padding: var(--bd-pad);
}

.espt-block-bd-benefits-list.is-design-soft .bdl14-item {
	background: var(--bd-soft);
	border-color: var(--bd-soft-line);
}

.espt-block-bd-benefits-list.is-design-soft .bdl14-item.is-hl,
.espt-block-bd-benefits-list.is-design-cards .bdl14-item.is-hl { border-color: var(--bd-primary); }

.bd-shadow-soft.espt-block-bd-benefits-list.is-design-cards .bdl14-item { box-shadow: 0 6px 20px -10px rgba(15, 23, 42, 0.16); }
.bd-shadow-strong.espt-block-bd-benefits-list.is-design-cards .bdl14-item { box-shadow: 0 16px 36px -16px rgba(15, 23, 42, 0.35); }
.bd-hover-lift.espt-block-bd-benefits-list.is-design-cards .bdl14-item:hover,
.bd-hover-lift.espt-block-bd-benefits-list.is-design-soft .bdl14-item:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -14px rgba(15, 23, 42, 0.28); }
.bd-hover-scale.espt-block-bd-benefits-list.is-design-cards .bdl14-item:hover,
.bd-hover-scale.espt-block-bd-benefits-list.is-design-soft .bdl14-item:hover { transform: scale(1.015); }
.bd-hover-glow.espt-block-bd-benefits-list.is-design-cards .bdl14-item:hover,
.bd-hover-glow.espt-block-bd-benefits-list.is-design-soft .bdl14-item:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bd-primary) 30%, transparent); }

/* zebra: boxed, alternating tinted rows, no divider lines */
.espt-block-bd-benefits-list.is-design-zebra .bdl14 { overflow: hidden; }
.espt-block-bd-benefits-list.is-design-zebra .bdl14-item {
	border-bottom: 0;
	border-radius: calc(var(--bd-radius) * 0.5);
	padding: var(--row-pad, 11px) calc(var(--row-pad, 11px) + 4px);
}

.espt-block-bd-benefits-list.is-design-zebra .bdl14-item:nth-child(odd) { background: var(--bd-soft); }
.espt-block-bd-benefits-list.is-design-zebra .bdl14-item.is-hl { background: color-mix(in srgb, var(--bd-primary) 12%, transparent); }
.espt-block-bd-benefits-list.is-design-zebra .bdl14-item:hover { background: color-mix(in srgb, var(--bd-soft) 60%, var(--bd-soft-line)); }

/* timeline: a line runs down through the markers */
.espt-block-bd-benefits-list.is-design-timeline .bdl14-item {
	border-bottom: 0;
	padding: 0 0 calc(var(--row-pad, 11px) * 1.6);
	position: relative;
}

.espt-block-bd-benefits-list.is-design-timeline .bdl14-item:last-child { padding-bottom: 0; }

.espt-block-bd-benefits-list.is-design-timeline .bdl14-item::before {
	background: linear-gradient(180deg, var(--icon-color, var(--bd-primary)), var(--bd-line));
	bottom: 0;
	content: "";
	left: calc(var(--mk) / 2 - 1px);
	opacity: 0.7;
	position: absolute;
	top: calc(var(--mk) + 4px + var(--mk-top));
	/* 2px in one column; 0 as soon as the list is a grid, where the connector
	   would dangle at the foot of every column (same maths as --divider). */
	width: calc(var(--divider) * 2);
}

.espt-block-bd-benefits-list.is-design-timeline .bdl14-item:last-child::before,
.espt-block-bd-benefits-list.is-design-timeline.is-marker-none .bdl14-item::before,
.espt-block-bd-benefits-list.is-design-timeline.is-icon-pos-top .bdl14-item::before { display: none; }

.espt-block-bd-benefits-list.is-design-timeline .bdl14-i { position: relative; z-index: 1; }
.espt-block-bd-benefits-list.is-design-timeline.is-icon-style-plain .bdl14-i {
	background: var(--bd-box-bg);
	border-radius: 999px;
	box-shadow: 0 0 0 4px var(--bd-box-bg);
}

/* dark: deep box, light text */
.espt-block-bd-benefits-list.is-design-dark .bdl14 {
	background: var(--bd-deep);
	border-color: transparent;
	color: #fff;
}

.espt-block-bd-benefits-list.is-design-dark .bdl14-item { border-bottom-color: rgba(255, 255, 255, 0.12); }
.espt-block-bd-benefits-list.is-design-dark .bdl14-b { color: var(--title-color, #fff); }
.espt-block-bd-benefits-list.is-design-dark .bdl14-item.is-hl .bdl14-b { color: var(--title-color, var(--bd-accent)); }
.espt-block-bd-benefits-list.is-design-dark .bdl14-s { color: var(--sub-color, rgba(255, 255, 255, 0.72)); }
.espt-block-bd-benefits-list.is-design-dark .bdl14-i { color: var(--icon-color, var(--bd-accent)); }
.espt-block-bd-benefits-list.is-design-dark.is-icon-style-bubble .bdl14-i,
.espt-block-bd-benefits-list.is-design-dark.is-icon-style-square .bdl14-i { background: rgba(255, 255, 255, 0.1); }
.espt-block-bd-benefits-list.is-design-dark.is-icon-style-solid .bdl14-i { background: var(--icon-color, var(--bd-accent)); color: var(--bd-accent-ink); }

/* minimal: bare list */
.espt-block-bd-benefits-list.is-design-minimal .bdl14-item {
	border-bottom: 0;
	padding: 0;
}

/* ---- staggered reveal (rides on the shared entrance animation) ---- */
.espt-block-bd-benefits-list.is-stagger[data-bd-anim] .bdl14-item {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.5s ease, transform 0.5s ease;
	transition-delay: calc(var(--i, 0) * 90ms + 0.15s);
}

.espt-block-bd-benefits-list.is-stagger[data-bd-anim].is-in .bdl14-item {
	opacity: 1;
	transform: none;
}

/* ---- tablet ---- */
@media (min-width: 768px) {
	.espt-block-bd-benefits-list .bdl14-item { gap: 12px; }
	.espt-block-bd-benefits-list .bdl14-head { margin-bottom: 18px; }
}

/* ---- desktop ---- */
@media (min-width: 1024px) {
	.espt-block-bd-benefits-list .bdl14-item { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.espt-block-bd-benefits-list .bdl14-item,
	.espt-block-bd-benefits-list .bdl14-i,
	.espt-block-bd-benefits-list .bdl14-b { transition: none; }
	.espt-block-bd-benefits-list .bdl14-item:hover .bdl14-i { transform: none; }
	.espt-block-bd-benefits-list.is-stagger[data-bd-anim] .bdl14-item { opacity: 1; transform: none; transition: none; }
}