/**
 * BD Package List — .espt-block-bd-package-list (component .bdk33)
 *
 * Vars set by the spec: --cols --card-min --gap --card-pad --card-radius
 * --icon-size --img-radius --heading-size --subheading-size --title-size
 * --line-size --footer-size --free-offset --free-size --free-radius
 * --free-pad and the colour vars --heading-color --subheading-color
 * --icon-color --frame-bg --card-bg --card-border --title-color --sub-color
 * --footer-color --free-bg --free-color.
 * Classes: is-design-* is-cols-mode-* is-icon-pos-* is-icon-frame-*
 * is-header-align-* is-text-align-* is-footer-align-* is-free-pos-*
 * is-hover-cards / no-hover-cards, plus .is-free on a card that carries the
 * "free" badge and .is-stg / .is-rv added by the script for the reveal.
 * Mobile-first: base = phones, then 768px and 1024px.
 */

.espt-block-bd-package-list .espt-block-note {
	background: var(--bd-soft);
	border-radius: 8px;
	color: var(--bd-muted);
	font-size: 13px;
	margin: 0 0 12px;
	padding: 8px 10px;
}

.espt-block-bd-package-list .bdk33 {
	color: var(--bd-ink);
}

/* ------------------------------------------------------------- header */
.espt-block-bd-package-list .bdk33-hd {
	margin: 0 0 14px;
}

.espt-block-bd-package-list .bdk33-h {
	align-items: center;
	color: var(--heading-color, var(--bd-ink));
	display: flex;
	flex-wrap: wrap;
	font-size: var(--heading-size, 19px);
	font-weight: 800;
	gap: 9px;
	justify-content: flex-start;
	line-height: 1.35;
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
	text-align: left;
}

.espt-block-bd-package-list .bdk33-h .bdk33-hi {
	color: var(--icon-color, var(--bd-primary));
	display: inline-flex;
	flex: 0 0 auto;
	line-height: 0;
}

.espt-block-bd-package-list .bdk33-h .bdk33-hi svg {
	height: 1.05em;
	width: 1.05em;
}

.espt-block-bd-package-list .bdk33-sh {
	color: var(--subheading-color, var(--bd-muted));
	font-size: var(--subheading-size, 14px);
	line-height: 1.65;
	margin: 7px 0 0;
	overflow-wrap: anywhere;
}

.espt-block-bd-package-list .bdk33-sh strong {
	color: var(--bd-ink);
	font-weight: 700;
}

.espt-block-bd-package-list.is-header-align-center .bdk33-h { justify-content: center; text-align: center; }
.espt-block-bd-package-list.is-header-align-center .bdk33-sh { text-align: center; }
.espt-block-bd-package-list.is-header-align-right .bdk33-h { justify-content: flex-end; text-align: right; }
.espt-block-bd-package-list.is-header-align-right .bdk33-sh { text-align: right; }

/* --------------------------------------------------------------- grid */
.espt-block-bd-package-list .bdk33-g {
	display: grid;
	gap: var(--gap, 11px);
	grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.espt-block-bd-package-list.is-cols-mode-auto .bdk33-g {
	grid-template-columns: repeat(auto-fit, minmax(min(var(--card-min, 150px), 100%), 1fr));
}

/* An icon beside the text needs the full width on a phone — two columns would
   leave ~70px for the title. Multi-column comes back at 768px. */
.espt-block-bd-package-list.is-icon-pos-left:not(.is-design-list) .bdk33-g {
	grid-template-columns: minmax(0, 1fr);
}

/* -------------------------------------------------------------- cards */
.espt-block-bd-package-list .bdk33-c {
	background: var(--card-bg, rgba(15, 23, 42, 0.035));
	border: 1px solid var(--card-border, var(--bd-line));
	border-radius: var(--card-radius, 11px);
	min-width: 0;
	overflow-wrap: anywhere;
	padding: var(--card-pad, 13px);
	position: relative;
	text-align: left;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.espt-block-bd-package-list.is-text-align-center .bdk33-c { text-align: center; }
.espt-block-bd-package-list.is-text-align-right .bdk33-c { text-align: right; }

.espt-block-bd-package-list .bdk33-tx {
	display: block;
	min-width: 0;
}

.espt-block-bd-package-list .bdk33-c b {
	color: var(--title-color, var(--bd-ink));
	display: block;
	font-size: var(--title-size, 14px);
	font-weight: 700;
	line-height: 1.45;
}

.espt-block-bd-package-list .bdk33-s {
	color: var(--sub-color, var(--bd-muted));
	display: block;
	font-size: var(--line-size, 12px);
	line-height: 1.5;
	margin-top: 2px;
}

/* -------------------------------------------------------------- icons */
.espt-block-bd-package-list .bdk33-ic {
	align-items: center;
	color: var(--icon-color, var(--bd-primary));
	display: flex;
	font-size: var(--icon-size, 30px);
	font-style: normal;
	justify-content: flex-start;
	line-height: 1;
	margin: 0 0 8px;
}

.espt-block-bd-package-list .bdk33-ic svg {
	height: 1em;
	width: 1em;
}

.espt-block-bd-package-list .bdk33-ic-img img {
	aspect-ratio: 1;
	border-radius: var(--img-radius, 8px);
	display: block;
	height: auto;
	max-width: 100%;
	object-fit: contain;
	width: calc(var(--icon-size, 30px) * 1.35);
}

.espt-block-bd-package-list.is-text-align-center .bdk33-ic { justify-content: center; margin-left: auto; margin-right: auto; }
.espt-block-bd-package-list.is-text-align-right .bdk33-ic { justify-content: flex-end; margin-left: auto; }

/* framed icons (bubble / rounded square) */
.espt-block-bd-package-list.is-icon-frame-circle .bdk33-ic,
.espt-block-bd-package-list.is-icon-frame-square .bdk33-ic {
	aspect-ratio: 1;
	background: var(--frame-bg, var(--bd-soft));
	border-radius: 50%;
	flex: 0 0 auto;
	height: auto;
	justify-content: center;
	max-width: 100%;
	overflow: hidden;
	width: calc(var(--icon-size, 30px) * 1.85);
}

.espt-block-bd-package-list.is-icon-frame-square .bdk33-ic {
	border-radius: calc(var(--card-radius, 11px) * 0.8);
}

.espt-block-bd-package-list.is-icon-frame-circle .bdk33-ic-img img,
.espt-block-bd-package-list.is-icon-frame-square .bdk33-ic-img img {
	align-self: stretch;
	aspect-ratio: auto;
	border-radius: 0;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* icon to the left of the text */
.espt-block-bd-package-list.is-icon-pos-left .bdk33-c {
	align-items: center;
	display: flex;
	gap: 11px;
	text-align: left;
}

.espt-block-bd-package-list.is-icon-pos-left .bdk33-ic {
	flex: 0 0 auto;
	margin: 0;
}

.espt-block-bd-package-list.is-icon-pos-left .bdk33-tx {
	flex: 1 1 auto;
	min-width: 0;
}

/* --------------------------------------------------------- free badge */
.espt-block-bd-package-list .bdk33-fr {
	background: var(--free-bg, var(--bd-danger));
	border-radius: var(--free-radius, 4px);
	color: var(--free-color, #fff);
	font-size: var(--free-size, 11px);
	font-weight: 700;
	left: auto;
	line-height: 1.65;
	max-width: calc(100% - 18px);
	padding: 2px var(--free-pad, 9px);
	position: absolute;
	right: 9px;
	top: var(--free-offset, -8px);
	z-index: 2;
}

.espt-block-bd-package-list.is-free-pos-left .bdk33-fr { left: 9px; right: auto; }
.espt-block-bd-package-list.is-free-pos-center .bdk33-fr { left: 50%; right: auto; transform: translateX(-50%); }

/* ------------------------------------------------------------- footer */
.espt-block-bd-package-list .bdk33-ft {
	color: var(--footer-color, var(--bd-muted));
	font-size: var(--footer-size, 13px);
	line-height: 1.6;
	margin: 14px 0 0;
	overflow-wrap: anywhere;
	text-align: center;
}

.espt-block-bd-package-list .bdk33-ft strong {
	color: var(--bd-primary-dark);
	font-weight: 700;
}

.espt-block-bd-package-list.is-footer-align-left .bdk33-ft { text-align: left; }
.espt-block-bd-package-list.is-footer-align-right .bdk33-ft { text-align: right; }

/* ------------------------------------------------------------ designs */
/* tinted */
.espt-block-bd-package-list.is-design-tinted .bdk33-c {
	background: var(--card-bg, var(--bd-soft));
	border-color: var(--card-border, var(--bd-soft-line));
}

/* outline */
.espt-block-bd-package-list.is-design-outline .bdk33-c {
	background: var(--card-bg, transparent);
	border: 2px solid var(--card-border, var(--bd-line));
}

/* dashed unboxing ticket */
.espt-block-bd-package-list.is-design-ticket .bdk33-c {
	background: var(--card-bg, var(--bd-box-bg));
	border: 2px dashed var(--card-border, var(--bd-soft-line));
}

/* dark */
.espt-block-bd-package-list.is-design-dark .bdk33-c {
	background: var(--card-bg, var(--bd-deep));
	border-color: var(--card-border, transparent);
}

.espt-block-bd-package-list.is-design-dark .bdk33-c b { color: var(--title-color, #fff); }
.espt-block-bd-package-list.is-design-dark .bdk33-s { color: var(--sub-color, rgba(255, 255, 255, 0.72)); }
.espt-block-bd-package-list.is-design-dark .bdk33-ic { color: var(--icon-color, var(--bd-accent)); }
.espt-block-bd-package-list.is-design-dark.is-icon-frame-circle .bdk33-ic,
.espt-block-bd-package-list.is-design-dark.is-icon-frame-square .bdk33-ic { background: var(--frame-bg, rgba(255, 255, 255, 0.12)); }

/* gradient */
.espt-block-bd-package-list.is-design-gradient .bdk33-c {
	background: var(--card-bg, linear-gradient(150deg, var(--bd-primary), var(--bd-primary-dark)));
	border-color: var(--card-border, transparent);
}

.espt-block-bd-package-list.is-design-gradient .bdk33-c b { color: var(--title-color, #fff); }
.espt-block-bd-package-list.is-design-gradient .bdk33-s { color: var(--sub-color, rgba(255, 255, 255, 0.78)); }
.espt-block-bd-package-list.is-design-gradient .bdk33-ic { color: var(--icon-color, #fff); }
.espt-block-bd-package-list.is-design-gradient.is-icon-frame-circle .bdk33-ic,
.espt-block-bd-package-list.is-design-gradient.is-icon-frame-square .bdk33-ic { background: var(--frame-bg, rgba(255, 255, 255, 0.18)); }

/* glass */
.espt-block-bd-package-list.is-design-glass .bdk33-c {
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	background: var(--card-bg, color-mix(in srgb, var(--bd-primary) 8%, rgba(255, 255, 255, 0.6)));
	border-color: var(--card-border, color-mix(in srgb, var(--bd-primary) 18%, rgba(255, 255, 255, 0.75)));
	box-shadow: 0 8px 24px -16px rgba(15, 23, 42, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

/* minimal — no boxes */
.espt-block-bd-package-list.is-design-minimal .bdk33-c {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 6px 0;
}

.espt-block-bd-package-list.is-design-minimal .bdk33-fr { right: 0; }
.espt-block-bd-package-list.is-design-minimal.is-free-pos-left .bdk33-fr { left: 0; }

/* checklist rows */
.espt-block-bd-package-list.is-design-list .bdk33-g {
	grid-template-columns: minmax(0, 1fr);
}

.espt-block-bd-package-list.is-design-list .bdk33-c {
	align-items: center;
	display: flex;
	gap: 12px;
	text-align: left;
}

.espt-block-bd-package-list.is-design-list .bdk33-ic {
	flex: 0 0 auto;
	margin: 0;
}

.espt-block-bd-package-list.is-design-list .bdk33-tx {
	flex: 1 1 auto;
	min-width: 0;
}

.espt-block-bd-package-list.is-design-list .bdk33-fr {
	flex: 0 0 auto;
	left: auto;
	margin-left: auto;
	position: static;
	right: auto;
	top: auto;
	transform: none;
}

/* --------------------------------------------- the "free" item cards */
/* The render marks a card with the badge as .is-free; tint its edge with the
   badge colour so a bonus reads as a bonus even at a glance. */
.espt-block-bd-package-list .bdk33-c.is-free {
	border-color: color-mix(in srgb, var(--free-bg, var(--bd-danger)) 42%, var(--card-border, var(--bd-line)));
}

/* ------------------------------------------------- hover & animations */
.espt-block-bd-package-list.is-hover-cards .bdk33-c:hover {
	border-color: color-mix(in srgb, var(--bd-primary) 45%, var(--card-border, var(--bd-line)));
	box-shadow: 0 12px 26px -16px rgba(15, 23, 42, 0.45);
	transform: translateY(-3px);
}

.espt-block-bd-package-list.is-hover-cards.is-design-minimal .bdk33-c:hover {
	box-shadow: none;
	transform: translateY(-1px);
}

.espt-block-bd-package-list.is-hover-cards .bdk33-c:hover .bdk33-ic-img img {
	transform: scale(1.04);
}

.espt-block-bd-package-list .bdk33-ic-img img {
	transition: transform 0.3s ease;
}

/* staggered reveal — the JS adds .is-stg to the grid, so a card is only
   ever hidden when the script is actually running. */
.espt-block-bd-package-list .bdk33-g.is-stg .bdk33-c {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.espt-block-bd-package-list .bdk33-g.is-stg .bdk33-c.is-rv {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.espt-block-bd-package-list .bdk33-c,
	.espt-block-bd-package-list .bdk33-ic-img img,
	.espt-block-bd-package-list .bdk33-g.is-stg .bdk33-c { transition: none; }
	.espt-block-bd-package-list.is-hover-cards .bdk33-c:hover { transform: none; }
	.espt-block-bd-package-list.is-hover-cards .bdk33-c:hover .bdk33-ic-img img { transform: none; }
	.espt-block-bd-package-list .bdk33-g.is-stg .bdk33-c { opacity: 1; transform: none; }
}

/* -------------------------------------------------------- breakpoints */
@media (min-width: 768px) {
	.espt-block-bd-package-list .bdk33-hd { margin-bottom: 16px; }
	.espt-block-bd-package-list .bdk33-ft { margin-top: 16px; }

	.espt-block-bd-package-list.is-icon-pos-left:not(.is-design-list) .bdk33-g {
		grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
	}

	.espt-block-bd-package-list.is-icon-pos-left.is-cols-mode-auto:not(.is-design-list) .bdk33-g {
		grid-template-columns: repeat(auto-fit, minmax(min(var(--card-min, 150px), 100%), 1fr));
	}
}

@media (min-width: 1024px) {
	.espt-block-bd-package-list.is-design-list .bdk33-c { gap: 14px; }
}