/* BP Global Presence widget styles
 *
 * Transparent, non-full-bleed section for the "Présence
 * mondiale" 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.
 * The individual content cards inside the section carry their
 * own background, border and radius; the outer container is
 * intentionally bare.
 *
 * Layout (top → bottom):
 *   1. Centered header: olive eyebrow + small gold divider
 *      (line / leaf symbol / line) + serif title + paragraph,
 *      with two large botanical decorations positioned beside
 *      the heading area (inline-start / inline-end), behind
 *      the content with `pointer-events: none`.
 *   2. Main area: a 76 / 24 grid. The left column is a large
 *      card containing a 30 / 70 copy + world-map image split.
 *      The right column stacks 4 equal-height stat cards
 *      (icon + prefix / value / suffix). Both columns start
 *      and end on the same vertical axis.
 *   3. A 5-column equal-height regions grid (Europe, Afrique,
 *      Moyen-Orient, Asie, Amériques) driven by an Elementor
 *      Repeater (image + title + decorative divider +
 *      description).
 *   4. A full-width mission callout strip inside the 1140px
 *      section (botanical decoration + circular icon +
 *      centered text + botanical decoration).
 *
 * All rules stay under .bp-global-presence. 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-global-presence {
	--bp-gp-max-w:           1140px;
	--bp-gp-fg:              #1F2A1F;
	--bp-gp-muted:           #5C6A5C;
	--bp-gp-eyebrow:         #B8B25A;
	--bp-gp-title:           #1F2A1F;
	--bp-gp-divider:         #B8B25A;
	--bp-gp-header-gap:      40px;

	--bp-gp-botanical-w:     22%;
	--bp-gp-botanical-op:    0.7;

	--bp-gp-main-gap:        14px;
	--bp-gp-main-bg:         #FBF6EC;
	--bp-gp-main-border:     #E4DCCB;
	--bp-gp-main-radius:     16px;
	--bp-gp-main-pad:        24px;
	--bp-gp-main-title:      #1F2A1F;
	--bp-gp-main-body:       #5C6A5C;
	--bp-gp-cta-fg:          #FFFFFF;
	--bp-gp-cta-bg:          #374F37;
	--bp-gp-cta-radius:      999px;

	--bp-gp-stats-gap:       12px;
	--bp-gp-stat-bg:         #FBF6EC;
	--bp-gp-stat-border:     #E4DCCB;
	--bp-gp-stat-radius:     14px;
	--bp-gp-stat-pad:        16px;
	--bp-gp-stat-icon:       44px;
	--bp-gp-stat-value:      #374F37;
	--bp-gp-stat-text:       #5C6A5C;

	--bp-gp-regions-gap:     18px;
	--bp-gp-regions-top:     28px;
	--bp-gp-region-bg:       #FBF6EC;
	--bp-gp-region-border:   #E4DCCB;
	--bp-gp-region-radius:   16px;
	--bp-gp-region-pad:      24px;
	--bp-gp-region-image:    60px;
	--bp-gp-region-title:    #1F2A1F;
	--bp-gp-region-divider:  #B8B25A;
	--bp-gp-region-body:     #5C6A5C;

	--bp-gp-mission-gap:     28px;
	--bp-gp-mission-bg:      #FBF6EC;
	--bp-gp-mission-border:  #E4DCCB;
	--bp-gp-mission-radius:  16px;
	--bp-gp-mission-pad:     18px;
	--bp-gp-mission-text:    #5C6A5C;
	--bp-gp-mission-icon:    48px;
	--bp-gp-mission-decor-w: 14%;
	--bp-gp-mission-decor-op: 0.75;
}

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

	position: relative;
	font-family: var(--bp-gp-font);
	color: var(--bp-gp-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-gp-pad-block-end);
	padding-inline: 0;
	overflow: visible;
}

.bp-global-presence__inner {
	position: relative;
	max-inline-size: var(--bp-gp-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 area. They sit behind the content (z-index 0) and
 * use `pointer-events: none` so they never block
 * interaction. The decorations are clipped to the inner
 * container on desktop via negative `inset-inline` offsets
 * so they appear to "enter" the layout without pushing the
 * 1140px content. */
.bp-global-presence__botanical {
	position: absolute;
	inline-size: var(--bp-gp-botanical-w);
	block-size: auto;
	max-block-size: 50%;
	object-fit: contain;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
	opacity: var(--bp-gp-botanical-op);
	z-index: 0;
}

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

.bp-global-presence__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-global-presence__header {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
	z-index: 2;
}

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

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

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

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

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

.bp-global-presence__description {
	margin: 0;
	font-family: var(--bp-gp-font);
	font-size: 15px;
	line-height: 1.7;
	color: var(--bp-gp-muted);
	max-inline-size: 680px;
}

/* ================== Main area ==================
 * 76 / 24 grid. The left column holds a large card with an
 * internal 30 / 70 copy + map split. The right column holds
 * 4 stacked equal-height stat cards. `align-items: stretch`
 * keeps both columns starting / ending on the same vertical
 * axis. */
.bp-global-presence__main {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 76fr) minmax(0, 24fr);
	column-gap: var(--bp-gp-main-gap);
	align-items: stretch;
	margin-block-start: var(--bp-gp-header-gap);
	z-index: 2;
}

.bp-global-presence__main-card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 30fr) minmax(0, 70fr);
	column-gap: 24px;
	align-items: stretch;
	background-color: var(--bp-gp-main-bg);
	border: 1px solid var(--bp-gp-main-border);
	border-radius: var(--bp-gp-main-radius);
	padding: var(--bp-gp-main-pad);
	min-inline-size: 0;
	min-block-size: 0;
	overflow: hidden;
}

/* ----- Main card — copy column ----- */
.bp-global-presence__main-copy {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-inline-size: 0;
}

.bp-global-presence__main-botanical-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	inline-size: 56px;
	block-size: auto;
}

.bp-global-presence__main-botanical {
	display: block;
	inline-size: 100%;
	block-size: auto;
	max-block-size: 56px;
	object-fit: contain;
}

.bp-global-presence__main-title {
	margin: 0;
	font-family: var(--bp-gp-display);
	font-weight: 400;
	font-size: clamp(20px, 1.8vw, 24px);
	line-height: 1.15;
	letter-spacing: -0.005em;
	color: var(--bp-gp-main-title);
}

.bp-global-presence__main-paragraph {
	margin: 0;
	font-family: var(--bp-gp-font);
	font-size: 13px;
	line-height: 1.65;
	color: var(--bp-gp-main-body);
}

.bp-global-presence__main-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-block-start: 4px;
	padding: 10px 18px;
	font-family: var(--bp-gp-font);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	color: var(--bp-gp-cta-fg);
	background-color: var(--bp-gp-cta-bg);
	border-radius: var(--bp-gp-cta-radius);
	transition: background-color 0.2s ease, transform 0.2s ease;
	align-self: flex-start;
}

.bp-global-presence__main-cta:hover,
.bp-global-presence__main-cta:focus-visible {
	background-color: #374F37;
}

.bp-global-presence__main-cta-arrow {
	display: inline-block;
	transition: transform 0.2s ease;
}

.bp-global-presence__main-cta:hover .bp-global-presence__main-cta-arrow,
.bp-global-presence__main-cta:focus-visible .bp-global-presence__main-cta-arrow {
	transform: translateX(3px);
}

/* ----- Main card — map column -----
 * The map wrapper stretches to the row height (set by the
 * copy column) via `block-size: 100%` + `align-self:
 * stretch`. No `min-block-size` is applied here: the copy
 * column (title + paragraphs + CTA) drives the card
 * height, and the map cell stretches to match it exactly.
 * The image uses `object-fit: cover` + `object-position:
 * center` so the watercolor world map fills the wrapper
 * vertically — the generated asset's cream margins are
 * cropped, not the continents. */
.bp-global-presence__main-map {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 0;
	inline-size: 100%;
	block-size: 100%;
	align-self: stretch;
	min-block-size: 0;
	overflow: hidden;
	background-color: transparent;
	border-radius: calc(var(--bp-gp-main-radius) - 6px);
}

.bp-global-presence__main-map-image {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center;
}

.bp-global-presence__main-map-placeholder {
	inline-size: 100%;
	block-size: 100%;
	background-color: transparent;
}

/* The map decoration "pops out" of the bottom-inline-start
 * of the map area, never blocking interaction. */
.bp-global-presence__main-map-decor {
	position: absolute;
	inset-block-end: clamp(-12px, -1vw, -4px);
	left: clamp(-12px, -1vw, -4px);
	right: auto;
	inline-size: 22%;
	max-inline-size: 110px;
	block-size: auto;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
	opacity: 0.85;
}

/* ================== Stat cards (right column) ==================
 * 4 stacked equal-height cards driven by the Elementor
 * Repeater. The grid track stretches every card to the
 * same block-size. Each card is a horizontal media object:
 * circular icon on the inline-start, text column (prefix +
 * value + suffix) on the inline-end. The text column is
 * `flex-direction: column` + `justify-content: center` so
 * the value and label stay vertically centered beside the
 * icon and never drop underneath it. */
.bp-global-presence__stats {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: var(--bp-gp-stats-gap);
	min-inline-size: 0;
	min-block-size: 0;
}

.bp-global-presence__stat-card {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 14px;
	background-color: var(--bp-gp-stat-bg);
	border: 1px solid var(--bp-gp-stat-border);
	border-radius: var(--bp-gp-stat-radius);
	padding: var(--bp-gp-stat-pad);
	min-inline-size: 0;
	min-block-size: 0;
	transition: border-color 0.2s ease;
}

.bp-global-presence__stat-icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--bp-gp-stat-icon);
	block-size: var(--bp-gp-stat-icon);
	background-color: rgba(184, 178, 90, 0.12);
	border-radius: 999px;
	overflow: hidden;
	flex: 0 0 auto;
}

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

.bp-global-presence__stat-icon-wrap--placeholder {
	background-color: rgba(184, 178, 90, 0.12);
}

.bp-global-presence__stat-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	min-inline-size: 0;
	flex: 1 1 auto;
}

.bp-global-presence__stat-prefix {
	margin: 0;
	font-family: var(--bp-gp-font);
	font-size: 12px;
	line-height: 1.4;
	color: var(--bp-gp-stat-text);
}

.bp-global-presence__stat-value {
	margin: 0;
	font-family: var(--bp-gp-display);
	font-weight: 400;
	font-size: clamp(22px, 2.2vw, 30px);
	line-height: 1.05;
	color: var(--bp-gp-stat-value);
}

.bp-global-presence__stat-suffix {
	margin: 0;
	font-family: var(--bp-gp-font);
	font-size: 12px;
	line-height: 1.45;
	color: var(--bp-gp-stat-text);
}

/* ================== Regions grid ==================
 * 5 equal columns on desktop. The grid track stretches
 * every card to the same block-size so the title, divider
 * and description all align. Each card is a flex column
 * so internal spacing is consistent regardless of
 * description length. */
.bp-global-presence__regions {
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	column-gap: var(--bp-gp-regions-gap);
	row-gap: 18px;
	align-items: stretch;
	margin-block-start: var(--bp-gp-regions-top);
	z-index: 2;
}

/* Neutralize inline/Elementor-generated override that was
 * injecting:
 *   .elementor-17 ...elementor-element-8b9e8ed .bp-global-presence__regions {
 *       margin-block-start: 28px;
 *   }
 * Pin regions margin-top back to the canonical variable so
 * all About-page layouts stay consistent. The explicit page
 * + widget-id chain + !important beats the equal-specificity
 * inline rule via cascade order (this file loads later).
 */
.elementor-17 .elementor-element .bp-global-presence__regions,
.elementor-17 .elementor-element.elementor-element-8b9e8ed .bp-global-presence__regions {
	margin-block-start: 0 !important;
}

.bp-global-presence__region-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	background-color: var(--bp-gp-region-bg);
	border: 1px solid var(--bp-gp-region-border);
	border-radius: var(--bp-gp-region-radius);
	padding: var(--bp-gp-region-pad);
	min-inline-size: 0;
	min-block-size: 0;
	transition: border-color 0.2s ease;
}

.bp-global-presence__region-image-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--bp-gp-region-image);
	block-size: var(--bp-gp-region-image);
	background-color: rgba(55, 79, 55, 0.05);
	border-radius: 999px;
	/* Inner breathing space: the badge stays 60px, the icon
	 * is constrained to ~42px via padding so the continent
	 * shapes (Europe, Afrique, Asie, Amériques) never touch
	 * or crop against the badge edge. Matches the
	 * Moyen-Orient icon treatment. */
	padding: 9px;
	overflow: hidden;
	flex: 0 0 auto;
}

.bp-global-presence__region-image {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	object-position: center;
}

.bp-global-presence__region-image-wrap--placeholder {
	background-color: rgba(55, 79, 55, 0.05);
}

.bp-global-presence__region-title {
	margin: 0;
	font-family: var(--bp-gp-display);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.2;
	color: var(--bp-gp-region-title);
}

.bp-global-presence__region-divider {
	display: block;
	inline-size: 28px;
	block-size: 1px;
	background-color: var(--bp-gp-region-divider);
}

.bp-global-presence__region-body {
	margin: 0;
	font-family: var(--bp-gp-font);
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--bp-gp-region-body);
}

/* ================== 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-global-presence__mission {
	position: relative;
	margin-block-start: var(--bp-gp-mission-gap);
	z-index: 2;
}

/* ================== Tablet ==================
 * Main area stacks (large card on top, 2x2 stats grid
 * below). Regions become 3+2. Mission strip keeps the
 * horizontal layout but tightens spacing. */
@media (max-width: 1024px) {
	.bp-global-presence {
		--bp-gp-pad-block: 56px;
		--bp-gp-pad-block-end: 56px;
		--bp-gp-botanical-w: 18%;
		--bp-gp-regions-gap: 14px;
	}

	.bp-global-presence__main {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--bp-gp-main-gap);
	}

	.bp-global-presence__stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--bp-gp-stats-gap);
		row-gap: var(--bp-gp-stats-gap);
	}

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

	/* Place the 4th + 5th region cards under the first 3. */
	.bp-global-presence__region-card:nth-child(4) {
		grid-column: 1 / span 1;
	}
	.bp-global-presence__region-card:nth-child(5) {
		grid-column: 2 / span 1;
	}
}

/* ================== Mobile ==================
 * Single-column on phones; stats are 1 column; region
 * cards stack. Side botanicals are hidden on phones to
 * avoid overflow and noise. The mission strip stacks:
 * icon on top, text in the middle, decorations last. */
@media (max-width: 768px) {
	.bp-global-presence {
		--bp-gp-pad-block: 48px;
		--bp-gp-pad-block-end: 48px;
		--bp-gp-header-gap: 32px;
		--bp-gp-regions-top: 22px;
		--bp-gp-mission-gap: 22px;
		--bp-gp-region-pad: 22px;
		--bp-gp-main-pad: 22px;
	}

	.bp-global-presence__botanical {
		display: none;
	}

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

	.bp-global-presence__description {
		font-size: 14px;
	}

	.bp-global-presence__main-card {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 18px;
	}

	.bp-global-presence__main-map,
	.bp-global-presence__main-map-placeholder {
		min-block-size: 300px;
	}

	.bp-global-presence__stats {
		grid-template-columns: minmax(0, 1fr);
	}

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

	.bp-global-presence__region-card {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		text-align: start;
		inline-size: 100%;
		max-inline-size: 100%;
		min-inline-size: 0;
	}

	.bp-global-presence__region-card > * {
		inline-size: 100%;
		max-inline-size: 100%;
		min-inline-size: 0;
	}

	.bp-global-presence__region-body {
		max-inline-size: 100%;
	}

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

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

	.bp-global-presence__main-card {
		padding: 18px;
	}

	.bp-global-presence__region-card {
		padding: 18px;
	}
}

/* ================== 430px polish ==================
 * Reduce map height, stats card padding, and region padding
 * so the layout breathes correctly on narrow phones. The
 * 2x stats grid kicks in at >481; below that the stats
 * stack into a single column, which is correct. */
@media (max-width: 430px) {
	.bp-global-presence {
		--bp-gp-main-pad: 18px;
		--bp-gp-region-pad: 18px;
	}

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

	.bp-global-presence__main-card {
		padding: 16px;
	}

	.bp-global-presence__main-map,
	.bp-global-presence__main-map-placeholder {
		min-block-size: 240px;
	}

	.bp-global-presence__main-title {
		font-size: 19px;
	}

	.bp-global-presence__main-paragraph {
		font-size: 12.5px;
	}

	.bp-global-presence__main-cta {
		font-size: 12.5px;
		padding: 9px 16px;
	}

	.bp-global-presence__stat-card {
		padding: 14px;
	}

	.bp-global-presence__stat-icon-wrap {
		inline-size: 38px;
		block-size: 38px;
	}

	.bp-global-presence__stat-value {
		font-size: 22px;
	}

	.bp-global-presence__region-card {
		padding: 16px;
	}

	.bp-global-presence__region-title {
		font-size: 17px;
	}
}

/* ================== 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-global-presence__inner {
		padding-inline: 16px;
	}

	.bp-global-presence__title {
		font-size: 24px;
	}

	.bp-global-presence__description {
		font-size: 13.5px;
	}

	.bp-global-presence__main-card {
		padding: 14px;
	}

	.bp-global-presence__main-map,
	.bp-global-presence__main-map-placeholder {
		min-block-size: 200px;
	}

	.bp-global-presence__main-title {
		font-size: 18px;
	}

	.bp-global-presence__main-paragraph {
		font-size: 12px;
	}

	.bp-global-presence__main-cta {
		font-size: 12px;
		padding: 8px 14px;
	}

	.bp-global-presence__stat-card {
		padding: 12px;
		gap: 12px;
	}

	.bp-global-presence__stat-icon-wrap {
		inline-size: 34px;
		block-size: 34px;
	}

	.bp-global-presence__stat-value {
		font-size: 20px;
	}

	.bp-global-presence__stat-prefix,
	.bp-global-presence__stat-suffix {
		font-size: 11.5px;
	}

	.bp-global-presence__region-card {
		padding: 14px;
	}

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

	.bp-global-presence__region-body {
		font-size: 12px;
	}
}

/* ================== Two-column stats on wider phones ==================
 * On small tablets / wide phones, allow 2 columns on the
 * stats grid so the right column is not a single tall
 * stack while we wait for the desktop layout. */
@media (min-width: 481px) and (max-width: 768px) {
	.bp-global-presence__stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ================== 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-global-presence__title,
[dir="rtl"] .bp-global-presence__title,
[lang="ar"] .bp-global-presence__main-title,
[dir="rtl"] .bp-global-presence__main-title,
[lang="ar"] .bp-global-presence__region-title,
[dir="rtl"] .bp-global-presence__region-title,
[lang="ar"] .bp-global-presence__stat-value,
[dir="rtl"] .bp-global-presence__stat-value {
	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-global-presence,
.elementor-widget.elementor-widget-bp-global-presence,
.elementor .elementor-widget-bp-global-presence,
.e-con.e-parent:has(> .elementor-widget-bp-global-presence),
.elementor-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-bp-global-presence),
.elementor .elementor-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-bp-global-presence) {
	--container-default-padding-top:    0px;
	--container-default-padding-bottom: 0px;
        margin-block: 0;
}

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

/* ============== GLOBAL PRESENCE — 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 Global Presence widget root. */
@media ( max-width: 480px ) {
	.bp-global-presence__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-global-presence__main,
	.bp-global-presence__main-card,
	.bp-global-presence__main-copy,
	.bp-global-presence__main-map,
	.bp-global-presence__stats,
	.bp-global-presence__stat-card,
	.bp-global-presence__regions,
	.bp-global-presence__region-card,
	.bp-global-presence__mission,
	.bp-global-presence__header,
	.bp-global-presence__title,
	.bp-global-presence__description {
		inline-size: 100% !important;
		max-inline-size: none !important;
		min-inline-size: 0 !important;
		flex-basis: auto !important;
	}
	.bp-global-presence__main,
	.bp-global-presence__regions {
		grid-template-columns: 1fr !important;
		gap: 14px !important;
	}
	.bp-global-presence__main-card,
	.bp-global-presence__region-card,
	.bp-global-presence__stat-card {
		padding: 18px !important;
	}
}

/* ============== GLOBAL PRESENCE — ONE-CARD-PER-ROW ENFORCEMENT (≤480px) ==============
 * Belt-and-suspenders fix. The 480px block above already
 * sets `grid-template-columns: 1fr !important`, but
 * Elementor's `.e-con` row-direction flex plus the
 * `flex-direction: row` desktop cascade on the inner
 * still caused region cards to render 2-up on some
 * viewports. This block re-asserts `display: grid` on
 * the cards container, force-flows every card into a
 * single column, and stamps `grid-column: 1 / -1` on
 * every region card so the row never splits. */
@media ( max-width: 480px ) {
	.bp-global-presence__regions {
		display: grid !important;
		grid-template-columns: 1fr !important;
		grid-auto-columns: 1fr !important;
		grid-auto-flow: row !important;
		gap: 16px !important;
		width: 100% !important;
	}
	.bp-global-presence__region-card {
		grid-column: 1 / -1 !important;
		width: 100% !important;
		max-width: none !important;
		min-width: 0 !important;
		margin: 0 !important;
	}
	.bp-global-presence__main {
		display: grid !important;
		grid-template-columns: 1fr !important;
		grid-auto-columns: 1fr !important;
		grid-auto-flow: row !important;
		gap: 16px !important;
		width: 100% !important;
	}
	.bp-global-presence__main > * {
		grid-column: 1 / -1 !important;
		width: 100% !important;
		max-width: none !important;
		min-width: 0 !important;
		margin: 0 !important;
	}
	.bp-global-presence__stats {
		display: grid !important;
		grid-template-columns: 1fr !important;
		grid-auto-columns: 1fr !important;
		grid-auto-flow: row !important;
		gap: 16px !important;
	}
	.bp-global-presence__stat-card {
		grid-column: 1 / -1 !important;
		width: 100% !important;
		max-width: none !important;
		min-width: 0 !important;
		margin: 0 !important;
	}
}