/**
 * Abonnement kaarten — bvdt/pricing-cards
 *
 * Values lifted from the hand-built Kadence version on the home page so the
 * block renders identically: 1.3rem radius, 2rem padding, #e3ddd8 hairline
 * border, #313f4d featured card with #fcf8f1 text, 0 20px 25px -5px shadow
 * and the 1.02 scale that lets the middle card break the row.
 */

.bvdt-pricing {
	position: relative;
}

.bvdt-pricing__track {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: start;
	gap: 2rem;
	/* The featured card scales up and its badge sits above the top edge; both
	   would be clipped without room to grow into. */
	padding: 3rem 0.5rem;
}

/* ── Card ──────────────────────────────────────────────────────────────── */

.bvdt-pricing__card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--global-palette9, #fff);
	border: 1px solid var(--global-palette5, #e3ddd8);
	border-radius: 1.3rem;
	padding: 2rem;
	transition: border-color .25s ease;
}

.bvdt-pricing__card:hover {
	border-color: var(--global-palette2, #cd90a7);
}

.bvdt-pricing__card.is-featured {
	background: var(--global-palette1, #313f4d);
	border-color: transparent;
	color: #fcf8f1;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
	scale: 1.02;
}

.bvdt-pricing__card.is-featured:hover {
	border-color: transparent;
}

/* ── Badge ─────────────────────────────────────────────────────────────── */

/*
 * Pulled up out of the padding box rather than absolutely positioned, the same
 * way the original does it — so the card grows around it and nothing overlaps
 * when the text wraps on a narrow screen.
 */
.bvdt-pricing__badge {
	align-self: flex-start;
	margin-top: -2.7rem;
	margin-bottom: 1.4rem;
	background: var(--global-palette2, #cd90a7);
	color: #fff;
	font-family: "Nunito Sans", sans-serif;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 4px 13px;
	border-radius: 100px;
}

/* ── Text ──────────────────────────────────────────────────────────────── */

.bvdt-pricing__eyebrow {
	color: var(--global-palette2, #cd90a7);
	font-family: "Nunito Sans", sans-serif;
	font-size: 0.72rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	margin: 0 !important;
}

.bvdt-pricing__title {
	font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
	color: var(--global-palette1, #313f4d);
	font-size: 1.88rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin: 0 !important;
}

.is-featured .bvdt-pricing__title {
	color: #fcf8f1;
}

.bvdt-pricing__price {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin: 1.5rem 0 0 !important;
}

.bvdt-pricing__amount {
	font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
	font-size: 3rem;
	font-weight: 300;
	line-height: 1;
	color: var(--global-palette1, #313f4d);
}

.is-featured .bvdt-pricing__amount {
	color: #fcf8f1;
}

.bvdt-pricing__per {
	font-size: 0.875rem;
	color: color-mix(in srgb, var(--ink, #313f4d) 60%, transparent);
}

.is-featured .bvdt-pricing__per {
	color: rgba(252, 248, 241, 0.6);
}

/* ── Features ──────────────────────────────────────────────────────────── */

.bvdt-pricing__features {
	list-style: none;
	margin: 2rem 0 2rem !important;
	padding: 0;
	padding-left: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.bvdt-pricing__features li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	font-size: 0.875rem;
    line-height: 1.42rem;
}

.bvdt-pricing__check {
	display: inline-flex;
	flex-shrink: 0;
	color: var(--global-palette2, #cd90a7);
}

.bvdt-pricing__check svg {
	width: 1rem;
	height: 1rem;
}

/* ── Button ────────────────────────────────────────────────────────────── */

/*
 * margin-top:auto pins the button to the bottom of every card, so a card with
 * two bullets still lines its button up with the one that has four.
 */
.bvdt-pricing__btn {
	/* auto margin pins the button to the bottom, so a card with two bullets
	   still lines its button up with the one that has four. */
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.85em 1.5em 0.85em 1.5em;
	background: var(--global-palette1, #313f4d);
	border-radius: 100px;
	color: #fff;
	font-family: "Nunito Sans", sans-serif;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color .2s ease;
}

.bvdt-pricing__btn:hover,
.bvdt-pricing__btn:focus {
	color: #fff;
	text-decoration: none;
	background: color-mix( in srgb, var(--global-palette1, #313f4d) 88%, #fff );
}

.is-featured .bvdt-pricing__btn {
	background: var(--global-palette2, #cd90a7);
}

.is-featured .bvdt-pricing__btn:hover,
.is-featured .bvdt-pricing__btn:focus {
	background: color-mix( in srgb, var(--global-palette2, #cd90a7) 88%, #fff );
}

.bvdt-pricing__btn svg {
	width: 1rem;
	height: 1rem;
	transition: transform .2s ease;
}

.bvdt-pricing__card:hover .bvdt-pricing__btn svg {
	transform: translateX(3px);
}

/* ── Slider ────────────────────────────────────────────────────────────── */

/*
 * Swiper owns the layout in slider mode, so the grid rules are switched off
 * rather than overridden: .bvdt-pricing__track doubles as .swiper-wrapper and
 * has to stay the flex row Swiper expects.
 */
.bvdt-pricing.is-slider .bvdt-pricing__track {
	display: flex;
	grid-template-columns: none;
	gap: 0;              /* spacing comes from Swiper's spaceBetween */
	padding: 2rem 0;
	align-items: stretch;
}

/* The scaled featured card, its badge and its shadow all live outside the
   card box; .swiper clips to its own bounds, so the room has to be here. */
.bvdt-pricing__swiper {
	padding: 3rem 0.5rem;
}

.bvdt-pricing.is-slider .swiper-slide {
	height: auto;        /* stretch to the tallest card instead of shrink-wrapping */
	display: flex;
}

.bvdt-pricing.is-slider .bvdt-pricing__card {
	width: 100%;
}

/* Swiper's own state classes, renamed in the init so they read like the rest
   of this sheet. */
.bvdt-pricing__nav.is-disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.bvdt-pricing__nav.is-locked {
	display: none;
}

.bvdt-pricing__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--global-palette5, #e3ddd8);
	border-radius: 100px;
	background: #fff;
	color: var(--global-palette1, #313f4d);
	cursor: pointer;
	transition: border-color .2s ease, opacity .2s ease;
}

.bvdt-pricing__nav:hover {
	border-color: var(--global-palette2, #cd90a7);
}

.bvdt-pricing__nav[disabled] {
	opacity: 0.35;
	cursor: default;
}

.bvdt-pricing__nav svg {
	width: 1.1rem;
	height: 1.1rem;
}

.bvdt-pricing__nav.is-prev { left: -1.25rem; }
.bvdt-pricing__nav.is-next { right: -1.25rem; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
	.swiper.bvdt-pricing__swiper.swiper-initialized{
		margin: 0 -1rem;
	}
}
@media (max-width: 1024px) {
	.bvdt-pricing__track {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	/* The scale would push the featured card past the viewport edge once the
	   cards go full width. */
	.bvdt-pricing__card.is-featured {
		scale: 1;
	}

	/* Slider keeps working below 1024px — only the standalone grid collapses
	   to one column. The arrows go, touch takes over. */
	.bvdt-pricing.is-slider .bvdt-pricing__track {
		display: flex;
	}

	.bvdt-pricing__nav.is-prev { left: -1.15rem; }
	.bvdt-pricing__nav.is-next { right: -1.15rem; }
}

.bvdt-pricing-notice {
	padding: 0.75rem 1rem;
	background: var(--muted, #f5f1ec);
	border: 1px dashed var(--global-palette5, #e3ddd8);
	border-radius: 0.5rem;
	font-size: 0.85rem;
}

/* ── Block editor preview ──────────────────────────────────────────────────
 *
 * The preview renders the real front-end markup through ServerSideRender, so
 * it inherits everything above. Only two things need adjusting: the editor
 * canvas is narrower and clips anything hanging outside the block, and the
 * editor's own paragraph/list resets fight the card spacing.
 */

.bvdt-pricing-editor-preview .bvdt-pricing__nav.is-prev { left: 0; }
.bvdt-pricing-editor-preview .bvdt-pricing__nav.is-next { right: 0; }

.bvdt-pricing-editor-preview .bvdt-pricing__features li::before {
	content: none;   /* the editor list reset adds its own marker */
}

/* ServerSideRender wraps the markup in a div of its own; without this the
   preview sits flush against the block toolbar. */
.bvdt-pricing-editor-preview {
	position: relative;
}