/* BP Commitments widget styles
 *
 * Transparent, non-full-bleed section for the "Nos engagements"
 * block of the "À propos" page. The whole section is capped at
 * `max-inline-size: 1140px` and centered with
 * `margin-inline: auto`, so it sits on the existing page
 * background without an outer card, border, shadow or radius.
 * Individual commitment cards and the bottom mission strip
 * carry their own background, border and radius; the outer
 * container is intentionally bare.
 *
 * Desktop visual hierarchy (top → bottom):
 *
 *          HEADER
 *
 *   [ 01 ] [ CENTRAL VISUAL ] [ 02 ]
 *
 *   [ 03 ] [ 04 ] [ 05 ] [ 06 ]
 *
 *   [        BOTTOM MISSION STRIP          ]
 *
 * Top row is a 3-column grid (25 / 50 / 25) on desktop with
 * the commitment cards on the inline-start / inline-end and
 * the central landscape visual in the middle. The lower row
 * is a 4-column equal grid. The bottom strip is a single
 * horizontal callout inside the 1140px section.
 *
 * All rules stay under .bp-commitments. Logical properties
 * (margin-inline, padding-inline, inset-inline, text-align:
 * start/end) keep LTR/RTL aligned without a separate RTL
 * file. No JS, no jQuery, no Bootstrap, no Swiper, no GSAP.
 * The reveal-on-scroll entrance language is inherited from
 * the shared `bp-reveal.css` stylesheet via the
 * `data-bp-reveal` / `data-bp-stagger` attributes the widget
 * already emits.
 */

/* ================== Section root ================== */
.bp-commitments {
	--bp-cm-max-w:           1140px;
	--bp-cm-fg:              #1F2A1F;
	--bp-cm-muted:           #5C6A5C;
	--bp-cm-eyebrow:         #B8B25A;
	--bp-cm-title:           #374F37;
	--bp-cm-divider:         #B8B25A;
	--bp-cm-card-bg:         #FBF6EC;
	--bp-cm-card-border:     #E4DCCB;
	--bp-cm-card-radius:     14px;
	--bp-cm-card-pad:        24px;
	--bp-cm-card-fg:         #5C6A5C;
	--bp-cm-card-title:      #374F37;
	--bp-cm-card-number:     #B8B25A;
	--bp-cm-card-divider:    #B8B25A;
	--bp-cm-icon-size:       64px;
	--bp-cm-icon-bg:         #FBF6EC;
	--bp-cm-icon-border:     #E4DCCB;
	--bp-cm-icon-radius:     50%;
	--bp-cm-top-row-gap:     18px;
	--bp-cm-lower-row-gap:   18px;
	--bp-cm-rows-gap:        18px;
	--bp-cm-center-radius:   16px;
	--bp-cm-center-min-h:    380px;
	--bp-cm-center-icon:     88px;
	--bp-cm-center-text:     #1F2A1F;
	--bp-cm-mission-bg:      #FBF6EC;
	--bp-cm-mission-border:  #E4DCCB;
	--bp-cm-mission-radius:  14px;
	--bp-cm-mission-pad:     18px;
	--bp-cm-mission-text:    #1F2A1F;
	--bp-cm-mission-icon:    48px;
	--bp-cm-mission-deco-w:  18%;
	--bp-cm-mission-gap:     32px;
	--bp-cm-botanical-w:     24%;
	--bp-cm-botanical-op:    0.75;
}

.bp-commitments {
	--bp-cm-pad-block:       64px;
	--bp-cm-pad-block-end:   var(--bp-cm-pad-block);
	--bp-cm-font:            var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	--bp-cm-display:         var(--bp-font-display, 'DM Serif Display', Georgia, serif);

	position: relative;
	font-family: var(--bp-cm-font);
	color: var(--bp-cm-fg);

	/* Transparent section: no background, no border, no shadow,
	 * no outer radius. The page background shows through. */
	background: transparent;
	border: 0;
	box-shadow: none;
	padding-block-start: 0;
	padding-block-end:   var(--bp-cm-pad-block-end);
	padding-inline: 0;
	overflow: visible;
}

.bp-commitments__inner {
	position: relative;
	max-inline-size: var(--bp-cm-max-w);
	inline-size: 100%;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 18px;
	z-index: 1;
}

/* ================== Side botanicals ==================
 * Two large transparent images positioned beside the header.
 * They sit behind the content (z-index 0) and use
 * `pointer-events: none` so they never block interaction.
 * Negative `inset-inline` offsets let them "enter" the
 * layout without pushing the 1140px content. */
.bp-commitments__botanical {
	position: absolute;
	inline-size: var(--bp-cm-botanical-w);
	block-size: auto;
	max-block-size: 55%;
	object-fit: contain;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
	opacity: var(--bp-cm-botanical-op);
	z-index: 0;
}

.bp-commitments__botanical--left {
	inset-block-start: 6%;
	/* Physical anchor: same FR side in /ar/ (no RTL mirror). */
	left: clamp(-220px, -10vw, -32px);
	right: auto;
}

.bp-commitments__botanical--right {
	inset-block-start: 6%;
	right: clamp(-220px, -10vw, -32px);
	left: auto;
}

/* ================== Header ==================
 * Centered eyebrow + small decorative divider (line / leaf
 * symbol / line) + serif title + paragraph. The eyebrow uses
 * the olive accent color, the title uses the deep display
 * family. The paragraph is centered with a constrained
 * readable width. */
.bp-commitments__header {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
	z-index: 2;
}

.bp-commitments__eyebrow {
	margin: 0;
	font-family: var(--bp-cm-font);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bp-cm-eyebrow);
	line-height: 1.3;
}

.bp-commitments__divider {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-block: 4px 2px;
}

.bp-commitments__divider-line {
	inline-size: 44px;
	block-size: 1px;
	background-color: var(--bp-cm-divider);
}

.bp-commitments__divider-leaf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	line-height: 1;
	color: var(--bp-cm-divider);
	transform: translateY(-1px);
}

.bp-commitments__title {
	margin: 0;
	font-family: var(--bp-cm-display);
	font-weight: 400;
	font-size: clamp(30px, 4vw, 46px);
	line-height: 1.08;
	letter-spacing: -0.005em;
	color: var(--bp-cm-title) !important;
	max-inline-size: 22ch;
}

.bp-commitments__description {
	margin: 0;
	font-family: var(--bp-cm-font);
	font-size: 15px;
	line-height: 1.7;
	color: var(--bp-cm-muted);
	max-inline-size: 720px;
}

/* ================== Top row ==================
 * 3-column desktop grid: 25 / 50 / 25 with the central
 * feature visual in the middle. The row height is determined
 * by the natural content of cards 01 / 02 (they use
 * `align-self: start` below), then the center item stretches
 * into that resulting row height via the grid's
 * `align-items: stretch` + its own `align-self: stretch`.
 * No fixed height, no `min-height`, no `grid-template-rows`,
 * no `aspect-ratio` is set here. */
.bp-commitments__top {
	position: relative;
	display: grid;
	grid-template-columns: 25fr 50fr 25fr;
	grid-auto-rows: auto;
	column-gap: var(--bp-cm-top-row-gap);
	row-gap: 18px;
	align-items: stretch;
	block-size: auto;
	min-block-size: 0;
	margin-block-start: 18px;
	z-index: 2;
}

/* About page (elementor-17) explicit widget override for
 * .bp-commitments__top: force top margin back to 18px even
 * if inline Elementor widget settings inject a different
 * value. */
.elementor-17 .elementor-element.elementor-element-4ca146c .bp-commitments__top,
.elementor-17 .elementor-element .bp-commitments__top {
	margin-block-start: 18px !important;
}

/* Side cards in the top row (01, 02) are CONTENT-DRIVEN.
 * They do NOT stretch to match the center, they do NOT use
 * `block-size: 100%` or `min-block-size`, and they do NOT
 * rely on `flex-grow` / `justify-content: space-between` /
 * `margin-block-start: auto` to push the description away
 * from the bottom. Their natural content (icon + title +
 * number + divider + description + padding) is the row
 * height. The center then stretches into that exact row
 * height. */
.bp-commitments__top > .bp-commitments__card {
	block-size: auto;
	min-block-size: 0;
	align-self: start;
}

/* ================== Lower row ==================
 * 4 equal columns on desktop. Stretching ensures every card
 * shares the same block-size so the title, number, divider
 * and description all align across the row. */
.bp-commitments__lower {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: var(--bp-cm-lower-row-gap);
	row-gap: 18px;
	align-items: stretch;
	margin-block-start: var(--bp-cm-rows-gap);
	z-index: 2;
}

/* About page (elementor-17) widget override for
 * .bp-commitments__lower: remove any inline/widget-set top
 * margin so it stays at 0. */
.elementor-17 .elementor-element.elementor-element-4ca146c .bp-commitments__lower,
.elementor-17 .elementor-element .bp-commitments__lower {
	margin-block-start: 0 !important;
}

/* ================== Commitment cards ==================
 * Each card is a flex column: head (icon + title) at the
 * top, then number, then a thin divider with a small leaf
 * symbol, then the description text. The icon badge is a
 * circular, cream-colored container. The number is rendered
 * large in pale gold to evoke the reference. */
.bp-commitments__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	text-align: start;
	gap: 10px;
	background-color: var(--bp-cm-card-bg);
	border: 1px solid var(--bp-cm-card-border);
	border-radius: var(--bp-cm-card-radius);
	padding: var(--bp-cm-card-pad);
	min-inline-size: 0;
	min-block-size: 0;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.bp-commitments__card-head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 14px;
}

.bp-commitments__card-icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	inline-size: var(--bp-cm-icon-size);
	block-size: var(--bp-cm-icon-size);
	background-color: var(--bp-cm-icon-bg);
	border: 1px solid var(--bp-cm-icon-border);
	border-radius: var(--bp-cm-icon-radius);
	overflow: hidden;
}

.bp-commitments__card-icon {
	display: block;
	max-inline-size: 60%;
	max-block-size: 60%;
	object-fit: contain;
}

.bp-commitments__card-title {
	margin: 0;
	font-family: var(--bp-cm-display);
	font-weight: 400;
	font-size: 17px;
	line-height: 1.2;
	color: var(--bp-cm-card-title);
	min-inline-size: 0;
	max-inline-size: 100%;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
}

.bp-commitments__number {
	margin: 0;
	font-family: var(--bp-cm-display);
	font-weight: 400;
	font-size: clamp(32px, 3.2vw, 40px);
	line-height: 1;
	color: var(--bp-cm-card-number);
	letter-spacing: -0.005em;
	flex: 0 0 auto;
}

/* Number + decorative divider on the SAME ROW.
 * The number sits to the inline-start; a thin 1px gold line
 * with a small leaf ornament in the middle extends to the
 * inline-end, matching the reference layout:
 *   [ 01 ]  -------- leaf --------
 * The divider itself is TRANSPARENT (no background fill, no
 * colored rectangle); the line is drawn by `::before` /
 * `::after` pseudo-elements so it stays 1px thin regardless
 * of the divider's block-size. */
.bp-commitments__number-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	margin-block-start: 6px;
}

.bp-commitments__divider {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	flex: 1 1 auto;
	min-inline-size: 0;
	block-size: 18px;
	background-color: transparent;
	border: 0;
	position: relative;
}

.bp-commitments__divider::before,
.bp-commitments__divider::after {
	content: "";
	flex: 1 1 auto;
	block-size: 1px;
	background-color: var(--bp-cm-card-divider);
}

.bp-commitments__divider-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	inline-size: 18px;
	block-size: 18px;
	font-size: 11px;
	line-height: 1;
	color: var(--bp-cm-card-divider);
	transform: translateY(-1px);
}

.bp-commitments__card-body {
	margin: 0;
	font-family: var(--bp-cm-font);
	font-size: 14px;
	line-height: 1.65;
	color: var(--bp-cm-card-fg);
}

/* ================== Central feature visual ==================
 * The middle column of the top row. The wrapper has NO
 * forced `block-size: 100%` and NO `min-block-size` on
 * desktop; it receives its height purely from the grid's
 * `align-items: stretch` + its own `align-self: stretch`.
 * The grid row is sized by the side cards 01 / 02
 * (content-driven, `align-self: start`), so the center
 * stretches into that exact row height. Every child inside
 * `.bp-commitments__center` is `position: absolute` so the
 * wrapper's intrinsic height is 0 — it cannot inflate the
 * row. The landscape `<img>` therefore covers the wrapper
 * 100% with no cream gap underneath. */
.bp-commitments__center {
	position: relative;
	inline-size: 100%;
	block-size: auto;
	min-block-size: 0;
	align-self: stretch;
	border-radius: var(--bp-cm-center-radius);
	overflow: hidden;
	background-color: var(--bp-cm-card-bg);
	isolation: isolate;
}

/* The actual landscape <img>. It is absolutely positioned
 * with `inset: 0` so it covers the full wrapper, and uses
 * `object-fit: cover` to crop the photo cleanly. The
 * `max-inline-size` / `max-block-size` are explicitly reset
 * to `none` so no inherited or default constraint can ever
 * clip the image below 100% of the wrapper. */
.bp-commitments__center-image {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	max-block-size: none;
	object-fit: cover;
	object-position: center;
	display: block;
	z-index: 0;
}

.bp-commitments__center-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: clamp(20px, 3vw, 36px);
	text-align: center;
}

/* Center icon badge: BORDER ONLY, clearly visible Barbary
 * dark-green ring, transparent inside (no cream / no white
 * fill, no shadow). The landscape image shows through the
 * ring; the icon itself stays dark green. */
.bp-commitments__center-icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--bp-cm-center-icon);
	block-size: var(--bp-cm-center-icon);
	background-color: transparent;
	border: 1.5px solid #1F2A1F;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: none;
}

.bp-commitments__center-icon {
	display: block;
	max-inline-size: 60%;
	max-block-size: 60%;
	object-fit: contain;
}

.bp-commitments__center-text {
	margin: 0;
	font-family: var(--bp-cm-display);
	font-size: clamp(18px, 1.7vw, 22px);
	line-height: 1.35;
	color: #1F2A1F;
	font-weight: 600;
	max-inline-size: 36ch;
	opacity: 1;
	text-shadow: 0 1px 2px rgba( 251, 246, 236, 0.55 );
}

/* Subtle localized scrim behind the icon + text only.
 * Keeps the rest of the landscape image untouched while
 * giving the text sufficient contrast against the busy
 * mid-tones of the photo. Drawn as a radial gradient via
 * `::before` on the overlay, fading to transparent. */
.bp-commitments__center-overlay::before {
	content: "";
	position: absolute;
	inset: 8% 12% 8% 12%;
	background: radial-gradient(
		ellipse at center,
		rgba( 251, 246, 236, 0.55 ) 0%,
		rgba( 251, 246, 236, 0.30 ) 45%,
		rgba( 251, 246, 236, 0.00 ) 80%
	);
	z-index: -1;
	pointer-events: none;
}

/* ================== Mission strip ==================
 * Visual shell provided by the site-wide `.bp-info-strip`
 * utility (see `assets/css/elementor/bp-info-strip.css`).
 * The variant class is preserved as a structural hook only. */
.bp-commitments__mission {
	position: relative;
	margin-block-start: var(--bp-cm-mission-gap);
	z-index: 2;
}

/* ================== Tablet ==================
 * Top row keeps the 3-column composition on tablet but
 * reduces gaps. Lower row stays at 4 equal cards. The
 * mission strip keeps the same horizontal layout but
 * reduces the decoration widths. */
@media (max-width: 1024px) {
	.bp-commitments {
		--bp-cm-pad-block: 56px;
		--bp-cm-pad-block-end: 56px;
		--bp-cm-botanical-w: 20%;
		--bp-cm-top-row-gap: 14px;
		--bp-cm-lower-row-gap: 14px;
		--bp-cm-center-min-h: 320px;
	}

	.bp-commitments__top {
		grid-template-columns: 1fr 1.6fr 1fr;
	}

	.bp-commitments__lower {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 14px;
	}
}

/* ================== Mobile ==================
 * Single-column stack. The top row becomes: card 01 →
 * central visual → card 02. Lower row stacks 4 cards
 * full-width. The mission strip stacks: left decoration →
 * icon → statement → right decoration. Side botanicals
 * are hidden on phones to avoid overflow. */
@media (max-width: 768px) {
	.bp-commitments {
		--bp-cm-pad-block: 48px;
		--bp-cm-pad-block-end: 48px;
		--bp-cm-top-row-gap: 14px;
		--bp-cm-lower-row-gap: 14px;
		--bp-cm-center-min-h: 260px;
		--bp-cm-mission-gap: 24px;
		--bp-cm-card-pad: 20px;
	}

	.bp-commitments__botanical {
		display: none;
	}

	.bp-commitments__title {
		font-size: clamp(26px, 7vw, 34px);
		max-inline-size: 100%;
	}

	.bp-commitments__description {
		font-size: 14px;
	}

	.bp-commitments__top {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 14px;
		margin-block-start: 32px;
	}

	.bp-commitments__center {
		order: -1; /* central visual stays prominent above the side cards on mobile */
		min-block-size: 240px; /* sensible stacked height on mobile so the image does not collapse */
	}

	.bp-commitments__lower {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 14px;
	}

	.bp-commitments__mission {
		/* Mobile sizing owned by .bp-info-strip responsive block. */
	}
}

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

	.bp-commitments__card {
		padding: 18px;
	}

	.bp-commitments__card-title {
		font-size: 16px;
	}
}

/* ================== 430px polish ==================
 * Reduce central visual, mission icon, and card icon
 * sizes. Tighten gutters on the lower row. */
@media (max-width: 430px) {
	.bp-commitments {
		--bp-cm-card-pad: 18px;
		--bp-cm-icon-size: 56px;
		--bp-cm-mission-pad: 16px;
		--bp-cm-mission-gap: 20px;
	}

	.bp-commitments__title {
		font-size: clamp(24px, 7vw, 30px);
	}

	.bp-commitments__center {
		min-block-size: 220px;
	}

	.bp-commitments__center-icon-wrap {
		inline-size: 72px;
		block-size: 72px;
	}

	.bp-commitments__center-text {
		font-size: 17px;
	}

	.bp-commitments__card-title {
		font-size: 15px;
	}

	.bp-commitments__number {
		font-size: 28px;
	}
}

/* ================== 375px polish ==================
 * Absolute floor. 16px gutter, smallest readable scales.
 * Botanicals stay hidden (FR + AR share the same DOM, only
 * the image URL swaps via PHP). */
@media (max-width: 375px) {
	.bp-commitments__inner {
		padding-inline: 16px;
	}

	.bp-commitments__title {
		font-size: 24px;
	}

	.bp-commitments__description {
		font-size: 13.5px;
	}

	.bp-commitments__card {
		padding: 16px;
	}

	.bp-commitments__card-head {
		gap: 12px;
	}

	.bp-commitments__card-icon-wrap {
		inline-size: 48px;
		block-size: 48px;
	}

	.bp-commitments__card-title {
		font-size: 14.5px;
	}

	.bp-commitments__number {
		font-size: 24px;
	}

	.bp-commitments__card-body {
		font-size: 13px;
	}

	.bp-commitments__center {
		min-block-size: 200px;
	}

	.bp-commitments__center-icon-wrap {
		inline-size: 64px;
		block-size: 64px;
	}

	.bp-commitments__center-text {
		font-size: 16px;
	}
}

/* ================== 2-column on wider phones ==================
 * On small tablets / wide phones, allow 2 columns on the
 * lower row so the cards do not stack to a single tall
 * column while we wait for the desktop 4-up. */
@media (min-width: 481px) and (max-width: 768px) {
	.bp-commitments__lower {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ================== Mobile cards full-width ==================
 * Force every card in the commitments block to fill the
 * full mobile width. The 768px rule already stacks the
 * top, lower and mission rows into a single column, but
 * the mission strip still has `justify-items: center`
 * which can leave narrow content. This block forces
 * inline-size 100% on every card, its head and its
 * mission wrapper, and stretches the mission content to
 * the full row width so no element can exceed the
 * viewport. */
@media (max-width: 768px) {
	.bp-commitments__card,
	.bp-commitments__center,
	.bp-commitments__mission {
		inline-size: 100%;
		max-inline-size: 100%;
		min-inline-size: 0;
	}

	.bp-commitments__card-title,
	.bp-commitments__card-body,
	.bp-commitments__number,
	.bp-commitments__mission-statement {
		max-inline-size: 100%;
	}
}

/* ================== Arabic / RTL ==================
 * The display headline falls back to the Arabic family
 * instead of inheriting the Latin display family. The layout
 * already mirrors via logical properties. */
[lang="ar"] .bp-commitments__title,
[dir="rtl"] .bp-commitments__title,
[lang="ar"] .bp-commitments__card-title,
[dir="rtl"] .bp-commitments__card-title,
[lang="ar"] .bp-commitments__center-text,
[dir="rtl"] .bp-commitments__center-text,
[lang="ar"] .bp-commitments__mission-statement,
[dir="rtl"] .bp-commitments__mission-statement {
	font-family: var(--bp-font-arabic, 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif);
	font-weight: 700;
	letter-spacing: 0;
}

/* ================== Reduced motion ==================
 * The shared `bp-reveal.css` already neutralises the
 * reveal-on-scroll animation under `prefers-reduced-motion:
 * reduce`, so no widget-specific override is needed here. */

/* ================== Elementor wrapper spacing ==================
 * Elementor's `.e-con` / `.elementor-section` add a default
 * 10px padding on every side, which produces a visible blank
 * strip above this section when it follows another widget.
 * We zero that default padding on the wrappers that hold this
 * widget so the section sits flush against the previous one.
 * The widget's own `padding-block-start` token stays in
 * control of any intentional top spacing; the wrapper padding
 * is purely the Elementor default and is removed
 * unconditionally. */
.elementor .elementor-widget.elementor-widget-bp-commitments,
.elementor-widget.elementor-widget-bp-commitments,
.elementor .elementor-widget.elementor-widget-bp-commitments,
.e-con.e-parent:has(> .elementor-widget-bp-commitments),
.elementor-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-bp-commitments),
.elementor .elementor-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-bp-commitments) {
	--container-default-padding-top:    0px;
	--container-default-padding-bottom: 0px;
        margin-block: 0;
}

/* ============== PAGE 17 / ABOUT: HIDE ABSOLUTE BOTANICALS ==============
 * The large absolute-positioned side botanicals (and the
 * mission strip decoration) bleed past the section edges
 * on mobile and inflate the page width past 100% at 390px.
 * Hide them on small phones so the commitments cards fill
 * the viewport. Scoped strictly to the BP Commitments
 * widget root. */
@media ( max-width: 480px ) {
	.bp-commitments__botanical--left,
	.bp-commitments__botanical--right {
		display: none !important;
	}
	.bp-commitments__mission-decoration,
	.bp-commitments__mission-decoration-wrap {
		display: none !important;
	}
}

/* ============== COMMITMENTS — HOMEPAGE PATTERN (≤480px) ==============
 * Mirrors the homepage cards layout: 1 column, 18px gutters,
 * `calc(100% - 36px)` inner, every child stretches to the
 * full available width with no desktop min-widths. Scoped
 * to the BP Commitments widget root. */
@media ( max-width: 480px ) {
	.bp-commitments__inner {
		inline-size: calc(100% - 36px) !important;
		max-inline-size: none !important;
		min-inline-size: 0 !important;
		margin-inline: auto !important;
		padding-inline: 0 !important;
	}
	.bp-commitments__grid,
	.bp-commitments__cards,
	.bp-commitments__center,
	.bp-commitments__mission {
		grid-template-columns: 1fr !important;
		flex-direction: column !important;
		gap: 14px !important;
	}
	.bp-commitments__card,
	.bp-commitments__mission,
	.bp-commitments__header,
	.bp-commitments__title,
	.bp-commitments__description {
		inline-size: 100% !important;
		max-inline-size: none !important;
		min-inline-size: 0 !important;
		flex-basis: auto !important;
	}
	.bp-commitments__card {
		padding: 18px !important;
	}
}