/* ── BB Premium: Services / Feature Cards ────────────────────────────────── */

.bbpe-sc { width: 100%; }

.bbpe-sc__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

/* ── Card base ───────────────────────────────────────────────────────────── */
.bbpe-sc__card {
	padding: 32px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.bbpe-sc__card:hover {
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
	transform: translateY(-4px);
}

/* When the card itself is an <a> tag */
a.bbpe-sc__card {
	text-decoration: none;
	color: inherit;
}

/* Body wraps title + description + link */
.bbpe-sc__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

/* ── Icon ─────────────────────────────────────────────────────────────────── */
.bbpe-sc__icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 12px;
	background-color: #ede9fe;
	margin-bottom: 1.25rem;
	flex-shrink: 0;
}

.bbpe-sc__icon {
	font-size: 28px;
	color: #6366f1;
	line-height: 1;
}

.bbpe-sc__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* Image inside the icon box */
.bbpe-sc__icon-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* ── Icon position variants (grid only) ──────────────────────────────────── */

/* Top center */
.bbpe-sc--grid.bbpe-sc--icon-top-center .bbpe-sc__icon-wrap {
	margin-left: auto;
	margin-right: auto;
}

/* Bottom left */
.bbpe-sc--grid.bbpe-sc--icon-bottom .bbpe-sc__icon-wrap {
	order: 2;
	margin-bottom: 0;
	margin-top: 1.25rem;
}
.bbpe-sc--grid.bbpe-sc--icon-bottom .bbpe-sc__body { order: 1; }

/* Bottom center */
.bbpe-sc--grid.bbpe-sc--icon-bottom-center .bbpe-sc__icon-wrap {
	order: 2;
	margin: 1.25rem auto 0;
}
.bbpe-sc--grid.bbpe-sc--icon-bottom-center .bbpe-sc__body { order: 1; }

/* Bottom right */
.bbpe-sc--grid.bbpe-sc--icon-bottom-right .bbpe-sc__icon-wrap {
	order: 2;
	margin: 1.25rem 0 0 auto;
}
.bbpe-sc--grid.bbpe-sc--icon-bottom-right .bbpe-sc__body { order: 1; }

/* Left inline */
.bbpe-sc--grid.bbpe-sc--icon-left .bbpe-sc__card {
	flex-direction: row;
	align-items: flex-start;
	gap: 16px;
}
.bbpe-sc--grid.bbpe-sc--icon-left .bbpe-sc__icon-wrap { margin-bottom: 0; }

/* Right inline */
.bbpe-sc--grid.bbpe-sc--icon-right .bbpe-sc__card {
	flex-direction: row;
	align-items: flex-start;
	gap: 16px;
}
.bbpe-sc--grid.bbpe-sc--icon-right .bbpe-sc__icon-wrap {
	order: 2;
	margin-bottom: 0;
}
.bbpe-sc--grid.bbpe-sc--icon-right .bbpe-sc__body { order: 1; }

/* ── Typography ──────────────────────────────────────────────────────────── */
.bbpe-sc__title {
	font-size: 1.125rem;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 0.5rem;
	line-height: 1.3;
}

.bbpe-sc__description {
	font-size: 0.9375rem;
	color: #64748b;
	line-height: 1.7;
	margin: 0 0 1rem;
}

/* ── Link / Button ───────────────────────────────────────────────────────── */
.bbpe-sc__link {
	font-size: 0.9375rem;
	font-weight: 600;
	color: #6366f1;
	text-decoration: none;
	transition: color 0.2s ease;
	display: inline-block;
	margin-top: auto;
}

a.bbpe-sc__card .bbpe-sc__link,
a.bbpe-sc__card span.bbpe-sc__link {
	pointer-events: none; /* card <a> handles the click */
}

.bbpe-sc__link:hover,
.bbpe-sc__link:focus-visible {
	color: #4f46e5;
	text-decoration: underline;
}

/* Button style for the link */
.bbpe-sc__link--btn {
	display: inline-block;
	background-color: #6366f1;
	color: #fff;
	padding: 0.6rem 1.25rem;
	border-radius: 6px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
	margin-top: auto;
}

.bbpe-sc__link--btn:hover,
.bbpe-sc__link--btn:focus-visible {
	background-color: #4f46e5;
	color: #fff;
	text-decoration: none;
}

/* ── List variant ────────────────────────────────────────────────────────── */
.bbpe-sc--list .bbpe-sc__card {
	flex-direction: row;
	gap: 20px;
	align-items: flex-start;
}

.bbpe-sc--list .bbpe-sc__icon-wrap { margin-bottom: 0; }
.bbpe-sc--list .bbpe-sc__title { margin-bottom: 0.375rem; }

/* ── Minimal variant ─────────────────────────────────────────────────────── */
.bbpe-sc--minimal .bbpe-sc__card {
	border: none;
	border-top: 3px solid #6366f1;
	border-radius: 0;
	background: transparent;
	padding: 24px 0;
}

.bbpe-sc--minimal .bbpe-sc__icon--inline {
	font-size: 1.75rem;
	color: #6366f1;
	display: block;
	margin-bottom: 1rem;
}

/* Image used inline (minimal, no box) */
.bbpe-sc__icon-img--inline {
	width: auto;
	height: 1.75rem;
	object-fit: contain;
	display: block;
	margin-bottom: 1rem;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.bbpe-sc__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.bbpe-sc__grid { grid-template-columns: 1fr; }
}