/* BP Preuves en images widget styles
 *
 * Résultats page "PREUVES EN IMAGES" section.
 *
 * Layout (full-bleed, state-based carousel):
 *
 *   .bp-pi                       FULL-WIDTH transparent section
 *                                (100vw + margin-inline breakout so
 *                                 bg + decor reach the actual
 *                                 viewport edges).
 *     .bp-pi__bg                 absolute faded agricultural photo
 *     .bp-pi__bg-tint            absolute vertical cream fade
 *                                (no boxed panel)
 *     .bp-pi__decor--*           3 optional botanical decorations,
 *                                anchored to the actual viewport
 *                                edges
 *     .bp-pi__inner              1140px content layer (centered)
 *       .bp-pi__header           eyebrow / serif title / paragraph
 *       .bp-pi__carousel         fixed-height stage with overflow
 *                                visible (cards can peek)
 *         .bp-pi__stage          relative positioning context
 *           .bp-pi__slide        absolute, centered via transform;
 *                                state classes control position
 *             .bp-pi__card       full-cover image + overlay + single
 *                                content wrapper (badge + title +
 *                                subtitle + note)
 *         .bp-pi__arrow          fixed to carousel edges (NOT to
 *                                slides)
 *       .bp-pi__closing          centered decorative heading + CTA
 *
 * Carousel state model (controlled by JS, layout by CSS):
 *   .bp-pi__slide.is-active      centered, wide, sharp, on top
 *   .bp-pi__slide.is-prev        centered - 430px, narrow, blurred
 *   .bp-pi__slide.is-next        centered + 430px, narrow, blurred
 *   .bp-pi__slide.is-far-prev    hidden further left
 *   .bp-pi__slide.is-far-next    hidden further right
 *
 * All positions are relative to the .bp-pi__stage center
 * (left: 50%; top: 50%; transform: translate(-50%,-50%) …).
 * No JS-side translateX math, no flex-basis percentages, no
 * getBoundingClientRect drift.
 *
 * Approved palette ONLY:
 *   #374F37  deep green
 *   #FBF6EC  cream
 *   #B8B25A  olive / gold
 *   #FFFFFF  white
 *   + existing neutrals (#1F2A1F, #5C6A5C, #E4DCCB).
 */

.bp-pi {
	--bp-pi-green:        #374F37;
	--bp-pi-green-2:      #2A3D2A;
	--bp-pi-olive:        #B8B25A;
	--bp-pi-cream:        #FBF6EC;
	--bp-pi-white:        #FFFFFF;
	--bp-pi-text:         #1F2A1F;
	--bp-pi-text-muted:   #5C6A5C;
	--bp-pi-border:       #E4DCCB;

	--bp-pi-inner-max:    1140px;
	--bp-pi-card-radius:  18px;

	/* Carousel geometry (desktop) */
	--bp-pi-stage-h:      480px;
	--bp-pi-active-w:     640px;
	--bp-pi-active-h:     420px;
	--bp-pi-preview-w:    300px;
	--bp-pi-preview-h:    360px;
	--bp-pi-side-offset:  430px;   /* how far prev/next are from center */
	--bp-pi-far-offset:   720px;   /* off-screen for far slides */

	--bp-pi-card-gap:     16px;
	--bp-pi-overlay:      0.85;    /* dark overlay strength on active */

	--bp-pi-font-body:    var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	--bp-pi-font-display: var(--bp-font-display, 'DM Serif Display', Georgia, serif);

	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	/* FULL-BLEED breakout: section extends to actual viewport
	 * edges so background + decor touch the screen. */
	inline-size: 100vw;
	max-inline-size: none;
	margin-inline: calc(50% - 50vw);
	/* No background-color — sits on the page background. */
	background-color: transparent;
	color: var(--bp-pi-text);
	font-family: var(--bp-pi-font-body);
	overflow: hidden;
	padding-block: 62px;
	padding-inline: 0;
}

.bp-pi *,
.bp-pi *::before,
.bp-pi *::after {
	box-sizing: border-box;
}

/* =========================================================
 * FULL-WIDTH BACKGROUND IMAGE + CREAM FADE
 * Children of the full-width section, so they bleed to the
 * viewport edges. Cream tint is a vertical fade — never a
 * rectangular panel.
 * ========================================================= */
.bp-pi__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	opacity: 0.14;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent 0%,
		black 18%,
		black 78%,
		transparent 100%
	);
	        mask-image: linear-gradient(
		to bottom,
		transparent 0%,
		black 18%,
		black 78%,
		transparent 100%
	);
}

.bp-pi__bg-tint {
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		linear-gradient(
			to bottom,
			rgba(251, 246, 236, 0)   0%,
			rgba(251, 246, 236, 0.45) 18%,
			rgba(251, 246, 236, 0.70) 50%,
			rgba(251, 246, 236, 0.55) 82%,
			rgba(251, 246, 236, 0)   100%
		);
	pointer-events: none;
}

/* =========================================================
 * BOTANICAL DECORATIONS
 * Direct children of the full-width .bp-pi section → anchored
 * to the actual viewport edges. The 1140px inner container
 * does NOT contain them.
 * ========================================================= */
.bp-pi__decor {
	--bp-pi-decor-x: 0px;
	--bp-pi-decor-y: 0px;
	--bp-pi-decor-rot: 0deg;

	position: absolute;
	z-index: 1;
	pointer-events: none;
	display: none;
	color: var(--bp-pi-olive);
	inline-size: 220px;
	block-size: auto;
	transform: translate(var(--bp-pi-decor-x), var(--bp-pi-decor-y)) rotate(var(--bp-pi-decor-rot));
	transform-origin: center center;
}

.bp-pi__decor.is-on {
	display: block;
}

.bp-pi__decor-img,
.bp-pi__decor-svg {
	display: block;
	inline-size: 100%;
	block-size: auto;
	object-fit: contain;
	color: currentColor;
}

.bp-pi__decor--upper_right {
	inset-block-start: 40px;
	right: 0;
	left: auto;
}
.bp-pi__decor--lower_left {
	inset-block-end: 40px;
	left: 0;
	right: auto;
}
.bp-pi__decor--lower_right {
	inset-block-end: 40px;
	right: 0;
	left: auto;
}

/* =========================================================
 * INNER WRAPPER (1140px content)
 * ========================================================= */
.bp-pi__inner {
	position: relative;
	z-index: 2;
	inline-size: 100%;
	max-inline-size: var(--bp-pi-inner-max);
	margin-inline: auto;
	padding-inline: 0;
	display: flex;
	flex-direction: column;
	gap: 36px;
}

/* =========================================================
 * HEADER
 * ========================================================= */
.bp-pi__header {
	inline-size: 100%;
	max-inline-size: 760px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	text-align: start;
	margin-block-end: 0;
}

.bp-pi__eyebrow {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--bp-pi-green);
	font-family: var(--bp-pi-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	line-height: 1;
}

.bp-pi__eyebrow-line {
	display: inline-block;
	inline-size: 40px;
	block-size: 1.5px;
	background: var(--bp-pi-olive);
	color: var(--bp-pi-olive);
	opacity: 0.9;
}

.bp-pi__eyebrow-text {
	white-space: nowrap;
}

.bp-pi__header-title,
.bp-pi__header-subtitle {
	/* Reserved for header title/subtitle; the carousel cards
	 * use their own .bp-pi__title class. */
}

.bp-pi__header-title {
	margin: 0;
	max-inline-size: 760px;
	font-family: var(--bp-pi-font-display);
	font-weight: 400;
	font-size: 44px;
	line-height: 1.1;
	letter-spacing: -0.005em;
	color: var(--bp-pi-green);
}

.bp-pi__header-subtitle {
	margin: 0;
	max-inline-size: 620px;
	font-family: var(--bp-pi-font-body);
	font-size: 15px;
	line-height: 1.7;
	color: var(--bp-pi-text);
}

/* =========================================================
 * CAROUSEL — fixed stage + absolutely positioned slides
 *
 * The carousel is a fixed-height container. Inside, the
 * .bp-pi__stage is the positioning context. Every slide is
 * absolutely positioned at the stage's center and uses
 * `transform: translate(-50%, -50%) translateX(...) scale(...)`
 * to animate to its state position. NO flex layout, NO
 * flex-basis percentages, NO getBoundingClientRect math in
 * JS — state classes do everything.
 *
 * The carousel has `overflow: hidden` so far slides (which sit
 * beyond the visible area) are clipped. The active and side
 * cards remain fully visible.
 * ========================================================= */
.bp-pi__carousel {
	position: relative;
	inline-size: 100%;
	block-size: var(--bp-pi-stage-h);
	overflow: hidden;
	/* Reserve a small breathing area so arrows can overlap the
	 * edges without hiding the active card. */
	padding-inline: 56px;
}

.bp-pi__stage {
	position: relative;
	inline-size: 100%;
	block-size: 100%;
}

/* =========================================================
 * SLIDE — the heart of the carousel
 *
 * Base state: absolute, centered (left:50% top:50%), with
 * `translate(-50%, -50%)` already applied. State classes
 * change the additional translateX and scale, plus opacity /
 * blur / z-index. Transitions cover all four so every swap is
 * a smooth animation around a single stable center.
 * ========================================================= */
.bp-pi__slide {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	inline-size: var(--bp-pi-preview-w);
	block-size: var(--bp-pi-preview-h);
	margin: 0;
	z-index: 1;
	opacity: 0;
	filter: blur(3px);
	pointer-events: none;
	/* Base transform: centered. The translateX / scale are
	 * overridden by state classes. */
	transform: translate(-50%, -50%) translateX(0) scale(0.86);
	transform-origin: center center;
	transition:
		transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
		inline-size 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
		block-size 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
		opacity 0.5s ease,
		filter 0.5s ease;
	-webkit-user-drag: none;
	user-drag: none;
}

/* ACTIVE — centered, wide, sharp, on top */
.bp-pi__slide.is-active {
	z-index: 5;
	inline-size: var(--bp-pi-active-w);
	block-size: var(--bp-pi-active-h);
	opacity: 1;
	filter: none;
	transform: translate(-50%, -50%) translateX(0) scale(1);
	pointer-events: auto;
}

/* PREV — tucked behind on the left */
.bp-pi__slide.is-prev {
	z-index: 2;
	opacity: 0.72;
	filter: blur(3px);
	transform: translate(-50%, -50%) translateX(calc(-1 * var(--bp-pi-side-offset))) scale(0.86);
}

/* NEXT — tucked behind on the right */
.bp-pi__slide.is-next {
	z-index: 2;
	opacity: 0.72;
	filter: blur(3px);
	transform: translate(-50%, -50%) translateX(var(--bp-pi-side-offset)) scale(0.86);
}

/* FAR — completely off-screen, no interaction */
.bp-pi__slide.is-far-prev {
	z-index: 1;
	opacity: 0;
	filter: blur(3px);
	transform: translate(-50%, -50%) translateX(calc(-1 * var(--bp-pi-far-offset))) scale(0.8);
}

.bp-pi__slide.is-far-next {
	z-index: 1;
	opacity: 0;
	filter: blur(3px);
	transform: translate(-50%, -50%) translateX(var(--bp-pi-far-offset)) scale(0.8);
}

/* =========================================================
 * CARD
 * Restrained card-level shadow. The previous design stacked
 * three shadow layers per card (up to 80px blur), which
 * combined with the three visible cards (active + prev +
 * next) into a wide grey-green haze that looked like a
 * section-wide glow. Each card now uses ONE tight shadow
 * that stays close to the card silhouette.
 * ========================================================= */
.bp-pi__card {
	position: relative;
	inline-size: 100%;
	block-size: 100%;
	border-radius: var(--bp-pi-card-radius);
	overflow: hidden;
	isolation: isolate;
	color: var(--bp-pi-white);
	font-family: var(--bp-pi-font-body);
	/* Inactive card: subtle, single soft shadow. */
	box-shadow: 0 10px 22px rgba(31, 42, 31, 0.10);
	transition: box-shadow 0.4s ease;
}

.bp-pi__slide.is-active .bp-pi__card {
	/* Active card: slightly stronger but still tight — no
	 * wide blur, no halo. */
	box-shadow: 0 16px 32px rgba(31, 42, 31, 0.14);
}

/* =========================================================
 * MEDIA — image layer
 * Always covers 100% of the card, top to bottom, in BOTH
 * active and inactive states. The .bp-pi__media wrapper is
 * absolutely positioned and fills the card. The .bp-pi__img
 * is absolutely positioned inside it and uses object-fit:
 * cover, so any source aspect ratio fills the entire card
 * surface — no dark-green filler underneath, no separate
 * lower block.
 * ========================================================= */
.bp-pi__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	inline-size: 100%;
	block-size: 100%;
	/* Neutral mid-tone fallback (only visible while the image
	 * is decoding or if the image element renders empty). It
	 * is fully covered by the image as soon as it loads. */
	background-color: #2A3D2A;
}

.bp-pi__img {
	position: absolute !important;
	inset: 0;
	top: 0;
	left: 0;
	display: block;
	inline-size: 100% !important;
	block-size: 100% !important;
	width: 100% !important;
	height: 100% !important;
	max-inline-size: none !important;
	max-block-size: none !important;
	object-fit: cover !important;
	object-position: center !important;
	margin: 0;
	padding: 0;
	border: 0;
	-webkit-user-drag: none;
	user-drag: none;
	pointer-events: none;
	transition: transform 0.6s ease;
}

.bp-pi__slide.is-active .bp-pi__card:hover .bp-pi__img,
.bp-pi__slide.is-active .bp-pi__card:focus-within .bp-pi__img {
	transform: scale(1.03);
}

/* Subtle placeholder when no image is configured. Reads as
 * a calm "image area", not a styled panel. */
.bp-pi__media--empty {
	background:
		radial-gradient(circle at 35% 30%, rgba(184, 178, 90, 0.30), transparent 55%),
		linear-gradient(135deg, #E4DCCB 0%, #C9BFA8 100%);
}

.bp-pi__media--empty::after {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0.10;
	background-image:
		linear-gradient(45deg, rgba(55, 79, 55, 0.25) 25%, transparent 25%),
		linear-gradient(-45deg, rgba(55, 79, 55, 0.25) 25%, transparent 25%);
	background-size: 22px 22px;
}

/* =========================================================
 * OVERLAY — readability gradient ON TOP of the image
 * The overlay is a sibling of the image, not a background of
 * the card, so the image is the bottom layer and this fades
 * the BOTTOM portion only. Inactive slides get a much
 * lighter tint (still image-only — text is hidden by .bp-pi__content).
 * ========================================================= */
.bp-pi__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	/* Bottom-to-top focus: strong dark at the bottom edge,
	 * fading to transparent at 60% from the bottom. The top
	 * 40% of the image is left untouched so the card never
	 * reads as a flat green panel. */
	background:
		linear-gradient(
			to top,
			rgba(20, 45, 28, 0.92) 0%,
			rgba(20, 45, 28, 0.55) 28%,
			rgba(20, 45, 28, 0)    60%
		);
	opacity: 0.18;
	transition: opacity 0.5s ease;
}

.bp-pi__slide.is-active .bp-pi__overlay {
	opacity: 1;
}

/* =========================================================
 * CONTENT — single parent for all card text
 * ONE block. Absolutely positioned at the bottom-left of the
 * card. The badge is in NORMAL FLOW inside this block, so
 * it stacks naturally above the title (no overlap, no
 * manual z-index battle).
 * ========================================================= */
.bp-pi__content {
	position: absolute;
	inset-inline-start: 28px;
	inset-inline-end: 28px;
	inset-block-end: 26px;
	z-index: 5;
	max-inline-size: 80%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	color: var(--bp-pi-white);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition:
		opacity 0.4s ease 0.15s,
		transform 0.4s ease 0.15s,
		visibility 0s linear 0.55s;
	pointer-events: none;
}

.bp-pi__slide.is-active .bp-pi__content {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition:
		opacity 0.4s ease 0.15s,
		transform 0.4s ease 0.15s,
		visibility 0s linear 0s;
	pointer-events: auto;
}

/* When a slide is leaving the active state, hide the text
 * immediately (no fade-out lag) so the user never sees
 * text on a card that's already blurred and shrinking. */
.bp-pi__slide.is-prev .bp-pi__content,
.bp-pi__slide.is-next .bp-pi__content,
.bp-pi__slide.is-far-prev .bp-pi__content,
.bp-pi__slide.is-far-next .bp-pi__content {
	transition:
		opacity 0.15s ease,
		transform 0.15s ease,
		visibility 0s linear 0s;
}

/* LOCATION BADGE — inline, in normal flow */
.bp-pi__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: var(--bp-pi-cream);
	color: var(--bp-pi-green);
	border-radius: 999px;
	font-family: var(--bp-pi-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1;
	white-space: nowrap;
	box-shadow: 0 4px 10px -2px rgba(31, 42, 31, 0.18);
	align-self: flex-start;
}

.bp-pi__badge-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 12px;
	block-size: 12px;
}

.bp-pi__badge-icon i,
.bp-pi__badge-icon svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	color: inherit;
}

.bp-pi__badge-text {
	font-size: 10.5px;
}

/* CARD TITLE */
.bp-pi__title {
	margin: 0;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 12px;
	font-family: var(--bp-pi-font-display);
	font-weight: 400;
	font-size: 28px;
	line-height: 1.18;
	color: var(--bp-pi-white);
	letter-spacing: -0.005em;
	max-inline-size: 100%;
	word-break: break-word;
}

.bp-pi__title-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 30px;
	block-size: 30px;
	flex-shrink: 0;
	color: var(--bp-pi-white);
	opacity: 1;
}

.bp-pi__title-icon i,
.bp-pi__title-icon svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	color: inherit;
}

.bp-pi__title-text {
	display: block;
	flex: 1 1 auto;
	min-inline-size: 0;
}

.bp-pi__subtitle {
	margin: 0;
	font-family: var(--bp-pi-font-body);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.92);
	max-inline-size: 100%;
}

.bp-pi__note {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--bp-pi-font-body);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.78);
}

.bp-pi__note-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 14px;
	block-size: 14px;
}

.bp-pi__note-icon i,
.bp-pi__note-icon svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	color: inherit;
}

/* =========================================================
 * ICON COLORS — scoped to the .bp-pi widget only
 *
 * Two rules:
 *   1. LOCATION PILL ICON → DARK GREEN (#374F37)
 *      (the pill background is cream, the text + pin must
 *       both be the brand dark green)
 *
 *   2. ICONS OVER THE DARK IMAGE / GRADIENT → CREAM (#FBF6EC)
 *      (title/category icon, note/photo icon, anything sitting
 *       directly over the bottom dark overlay)
 *
 * Handles both Font Awesome `<i>` icons and Elementor SVG
 * icons. Uses `color` (which cascades to `fill="currentColor"`
 * and to Font Awesome font rendering). Adds an explicit
 * `fill: currentColor` so SVGs with hardcoded fills pick up
 * the color, while SVGs that explicitly use `fill="none"`
 * (outline-only icons) keep their outline style.
 * ========================================================= */

/* LOCATION PILL — dark green pin */
.bp-pi__badge .bp-pi__badge-icon,
.bp-pi__badge .bp-pi__badge-icon i,
.bp-pi__badge .bp-pi__badge-icon svg,
.bp-pi__badge .bp-pi__badge-icon svg * {
	color: #374F37;
	fill: currentColor;
}

/* TITLE ICON — cream (sits over the dark image) */
.bp-pi__title .bp-pi__title-icon,
.bp-pi__title .bp-pi__title-icon i,
.bp-pi__title .bp-pi__title-icon svg,
.bp-pi__title .bp-pi__title-icon svg * {
	color: #FBF6EC;
	fill: currentColor;
}

/* NOTE / PHOTO ICON — cream (sits over the dark image) */
.bp-pi__note .bp-pi__note-icon,
.bp-pi__note .bp-pi__note-icon i,
.bp-pi__note .bp-pi__note-icon svg,
.bp-pi__note .bp-pi__note-icon svg * {
	color: #FBF6EC;
	fill: currentColor;
}

/* CTA ICON (closing area) — cream on the dark green button */
.bp-pi__cta .bp-pi__cta-icon,
.bp-pi__cta .bp-pi__cta-icon i,
.bp-pi__cta .bp-pi__cta-icon svg,
.bp-pi__cta .bp-pi__cta-icon svg * {
	color: #FBF6EC;
	fill: currentColor;
}

/* Eyebrow leaf SVG (in the section header) — dark green */
.bp-pi__eyebrow svg,
.bp-pi__eyebrow svg * {
	color: #374F37;
	fill: currentColor;
}

/* Preserve fill: none for outline-only SVGs inside the widget */
.bp-pi__badge svg[fill="none"],
.bp-pi__title svg[fill="none"],
.bp-pi__note svg[fill="none"],
.bp-pi__cta svg[fill="none"],
.bp-pi__eyebrow svg[fill="none"] {
	fill: none;
}

/* =========================================================
 * ARROW CONTROLS — fixed to carousel edges
 * Anchored to the .bp-pi__carousel (NOT to any slide). They
 * never move when the active slide changes.
 * ========================================================= */
.bp-pi__arrow {
	position: absolute;
	inset-block-start: 50%;
	z-index: 20;
	inline-size: 48px;
	block-size: 48px;
	border-radius: 50%;
	border: 1px solid rgba(55, 79, 55, 0.18);
	background: var(--bp-pi-white);
	color: var(--bp-pi-green);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow:
		0 1px 2px rgba(31, 42, 31, 0.06),
		0 10px 24px -8px rgba(31, 42, 31, 0.22);
	transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
	transform: translateY(-50%);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.bp-pi__arrow:hover,
.bp-pi__arrow:focus-visible {
	background: var(--bp-pi-green);
	color: var(--bp-pi-cream);
	outline: none;
	box-shadow:
		0 1px 2px rgba(31, 42, 31, 0.08),
		0 14px 28px -8px rgba(55, 79, 55, 0.45);
	transform: translateY(-50%) scale(1.04);
}

.bp-pi__arrow:disabled {
	opacity: 0.3;
	cursor: not-allowed;
	transform: translateY(-50%);
}

.bp-pi__arrow--prev {
	inset-inline-start: 8px;
}

.bp-pi__arrow--next {
	inset-inline-end: 8px;
}

.bp-pi__arrow--next .bp-pi__arrow-icon svg {
	transform: scaleX(-1);
}

.bp-pi__arrow-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 20px;
	block-size: 20px;
}

.bp-pi__arrow-icon svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	color: inherit;
}

/* =========================================================
 * CLOSING — centered statement + CTA
 * No boxed background; sits inside the full-bleed section so
 * the page background and any decor bleed through.
 * ========================================================= */
.bp-pi__closing {
	margin-block-start: 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 18px;
}

.bp-pi__closing-title {
	margin: 0;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	font-family: var(--bp-pi-font-display);
	font-weight: 400;
	font-size: 22px;
	line-height: 1.3;
	color: var(--bp-pi-green);
}

.bp-pi__closing-line {
	display: inline-block;
	inline-size: 60px;
	block-size: 1px;
	background: var(--bp-pi-olive);
	opacity: 0.6;
}

.bp-pi__closing-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 28px;
	block-size: 28px;
	color: var(--bp-pi-olive);
}

.bp-pi__closing-mark svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	color: inherit;
}

.bp-pi__closing-text {
	display: block;
}

.bp-pi__closing-body {
	margin: 0;
	max-inline-size: 640px;
	font-family: var(--bp-pi-font-body);
	font-size: 15px;
	line-height: 1.7;
	color: var(--bp-pi-text);
}

.bp-pi__cta {
	margin-block-start: 8px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	border-radius: 12px;
	background: var(--bp-pi-green);
	color: var(--bp-pi-cream);
	font-family: var(--bp-pi-font-body);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.01em;
	text-decoration: none;
	box-shadow:
		0 1px 2px rgba(31, 42, 31, 0.12),
		0 12px 24px -8px rgba(55, 79, 55, 0.45);
	transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.bp-pi__cta:hover,
.bp-pi__cta:focus-visible {
	transform: translateY(-2px);
	box-shadow:
		0 1px 2px rgba(31, 42, 31, 0.12),
		0 18px 30px -8px rgba(55, 79, 55, 0.55);
	background: var(--bp-pi-green-2);
	outline: none;
}

.bp-pi__cta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 18px;
	block-size: 18px;
}

.bp-pi__cta-icon i,
.bp-pi__cta-icon svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	color: inherit;
}

/* =========================================================
 * RESPONSIVE — TABLET
 * Slightly smaller active + side previews, smaller stage.
 * ========================================================= */
@media (max-width: 1024px) {
	.bp-pi {
		--bp-pi-stage-h:     420px;
		--bp-pi-active-w:    520px;
		--bp-pi-active-h:    360px;
		--bp-pi-preview-w:   240px;
		--bp-pi-preview-h:   300px;
		--bp-pi-side-offset: 360px;
		--bp-pi-far-offset:  600px;
		padding-block: 46px;
	}

	.bp-pi__header-title {
		font-size: 36px;
	}

	.bp-pi__carousel {
		padding-inline: 52px;
	}

	.bp-pi__arrow {
		inline-size: 42px;
		block-size: 42px;
	}

	.bp-pi__inner {
		gap: 28px;
		padding-inline: 20px;
	}

	.bp-pi__title {
		font-size: 22px;
	}

	.bp-pi__decor {
		inline-size: 170px;
	}
	.bp-pi__decor--upper_right {
		inset-block-start: 24px;
		right: 0;
		left: auto;
	}
	.bp-pi__decor--lower_left,
	.bp-pi__decor--lower_right {
		inset-block-end: 24px;
	}
	.bp-pi__decor--lower_left {
		left: 0;
		right: auto;
	}
	.bp-pi__decor--lower_right {
		right: 0;
		left: auto;
	}
}

/* =========================================================
 * RESPONSIVE — MOBILE
 * One main slide at a time (full width), with a small peek
 * of the adjacent card. Side previews are positioned closer
 * to the center and shrunk so they don't push the page wide.
 * ========================================================= */
@media (max-width: 640px) {
	.bp-pi {
		--bp-pi-stage-h:     400px;
		--bp-pi-active-w:    calc(100% - 24px);
		--bp-pi-active-h:    360px;
		--bp-pi-preview-w:   70%;
		--bp-pi-preview-h:   300px;
		--bp-pi-side-offset: 70%;
		--bp-pi-far-offset:  120%;
		padding-block: 38px;
	}

	/* Hide far slides entirely on mobile. */
	.bp-pi__slide.is-far-prev,
	.bp-pi__slide.is-far-next {
		display: none;
	}

	.bp-pi__header-title {
		font-size: 28px;
	}

	.bp-pi__header {
		gap: 10px;
	}

	.bp-pi__carousel {
		padding-inline: 12px;
	}

	.bp-pi__title {
		font-size: 20px;
		gap: 8px;
	}
	.bp-pi__title-icon {
		inline-size: 24px;
		block-size: 24px;
	}
	.bp-pi__content {
		inset-inline-start: 18px;
		inset-inline-end: 18px;
		inset-block-end: 18px;
		gap: 8px;
		max-inline-size: 100%;
	}
	.bp-pi__subtitle {
		font-size: 13px;
	}
	.bp-pi__note {
		font-size: 11px;
	}
	.bp-pi__badge {
		font-size: 10px;
		padding: 5px 10px;
	}

	.bp-pi__arrow {
		inline-size: 40px;
		block-size: 40px;
	}

	.bp-pi__arrow--prev {
		inset-inline-start: 4px;
	}
	.bp-pi__arrow--next {
		inset-inline-end: 4px;
	}

	.bp-pi__decor {
		inline-size: 130px;
	}
	.bp-pi__decor--upper_right {
		inset-block-start: 12px;
		right: 0;
		left: auto;
	}
	.bp-pi__decor--lower_left {
		inset-block-end: 12px;
		left: 0;
		right: auto;
	}
	.bp-pi__decor--lower_right {
		inset-block-end: 12px;
		right: 0;
		left: auto;
	}

	.bp-pi__closing-title {
		font-size: 18px;
	}
	.bp-pi__closing-line {
		inline-size: 40px;
	}
}

/* Narrow-phone gutter scale (authoritative on this widget). */
@media ( max-width: 480px ) {
	.bp-pi__inner {
		padding-inline: 18px;
	}
}

@media ( max-width: 390px ) {
	.bp-pi__inner {
		padding-inline: 18px;
	}
}

@media ( max-width: 360px ) {
	.bp-pi__inner {
		padding-inline: 16px;
	}
}