/* BP Awards & Recognition widget styles
 *
 * Transparent, non-full-bleed section for the "Distinctions &
 * Reconnaissances" 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.
 *   2. Two large botanical decorations positioned beside the
 *      heading/cards area (inline-start / inline-end), behind
 *      the content with `pointer-events: none`.
 *   3. A 5-column equal-height awards grid driven by an
 *      Elementor Repeater (image + title + accent + description).
 *   4. A full-width mission callout strip inside the 1140px
 *      section (botanical icon + intro / highlight text +
 *      optional decorative landscape line-art).
 *
 * All rules stay under .bp-awards-recognition. 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-awards-recognition {
	--bp-ar-max-w:           1140px;
	--bp-ar-fg:              #1F2A1F;
	--bp-ar-muted:           #5C6A5C;
	--bp-ar-eyebrow:         #B8B25A;
	--bp-ar-title:           #374F37;
	--bp-ar-divider:         #B8B25A;
	--bp-ar-card-bg:         #FBF6EC;
	--bp-ar-card-border:     #E4DCCB;
	--bp-ar-card-radius:     16px;
	--bp-ar-card-pad:        28px;
	--bp-ar-card-fg:         #5C6A5C;
	--bp-ar-card-title:      #374F37;
	--bp-ar-card-accent:     #B8B25A;
	--bp-ar-card-divider:    #B8B25A;
	--bp-ar-card-image-h:    92px;
	--bp-ar-card-gap:        18px;
	--bp-ar-mission-bg:      #FBF6EC;
	--bp-ar-mission-border:  #E4DCCB;
	--bp-ar-mission-radius:  16px;
	--bp-ar-mission-pad:     20px;
	--bp-ar-mission-intro:   #5C6A5C;
	--bp-ar-mission-highlight: #374F37;
	--bp-ar-mission-icon:    52px;
	--bp-ar-mission-landscape-w: 22%;
	--bp-ar-botanical-w:     28%;
	--bp-ar-botanical-op:    0.7;
	--bp-ar-header-gap:      44px;
	--bp-ar-mission-gap:     36px;
	--bp-ar-pad-block:       64px;
	--bp-ar-pad-block-end:   var(--bp-ar-pad-block);
	--bp-ar-font:            var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	--bp-ar-display:         var(--bp-font-display, 'DM Serif Display', Georgia, serif);

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

.bp-awards-recognition__inner {
	position: relative;
	max-inline-size: var(--bp-ar-max-w);
	inline-size: 100%;
	margin-inline: auto;
	padding-inline: clamp(20px, 3vw, 32px);
	z-index: 1;
}

/* ================== Side botanicals ==================
 * Two large transparent images positioned beside the header /
 * cards 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-awards-recognition__botanical {
	position: absolute;
	inline-size: var(--bp-ar-botanical-w);
	block-size: auto;
	max-block-size: 60%;
	object-fit: contain;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
	opacity: var(--bp-ar-botanical-op);
	z-index: 0;
}

.bp-awards-recognition__botanical--left {
	inset-block-end: 18%;
	inset-inline-start: clamp(-220px, -10vw, -32px);
}

.bp-awards-recognition__botanical--right {
	inset-block-end: 18%;
	inset-inline-end: clamp(-220px, -10vw, -32px);
}

/* ================== 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-awards-recognition__header {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
	z-index: 2;
}

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

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

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

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

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

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

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

/* Each card uses flex-column to push the body text to the
 * bottom while keeping the title/divider/accent at the top.
 * The fixed image height keeps the visuals aligned across all
 * cards even when the title wraps to 2 lines. */
.bp-awards-recognition__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
	background-color: var(--bp-ar-card-bg);
	border: 1px solid var(--bp-ar-card-border);
	border-radius: var(--bp-ar-card-radius);
	padding: var(--bp-ar-card-pad);
	min-inline-size: 0;
	min-block-size: 0;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.bp-awards-recognition__card-image-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	block-size: var(--bp-ar-card-image-h);
	inline-size: 100%;
	margin-block-end: 4px;
}

.bp-awards-recognition__card-image {
	display: block;
	max-inline-size: 100%;
	max-block-size: 100%;
	object-fit: contain;
}

/* When no image is provided, the placeholder keeps the
 * card height consistent across the row so the title,
 * divider, accent and description still align. */
.bp-awards-recognition__card-image-wrap--placeholder {
	background-color: transparent;
}

.bp-awards-recognition__card-title {
	margin: 0;
	font-family: var(--bp-ar-font);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bp-ar-card-title);
	line-height: 1.25;
}

.bp-awards-recognition__card-divider {
	display: block;
	inline-size: 32px;
	block-size: 1px;
	background-color: var(--bp-ar-card-divider);
}

.bp-awards-recognition__card-accent {
	margin: 0;
	font-family: var(--bp-ar-font);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bp-ar-card-accent);
	line-height: 1.3;
}

.bp-awards-recognition__card-body {
	margin: 0;
	font-family: var(--bp-ar-font);
	font-size: 13px;
	line-height: 1.6;
	color: var(--bp-ar-card-fg);
}

/* ================== Mission strip ==================
 * A full-width (within the 1140px inner) horizontal callout
 * strip with a botanical icon on the inline-start, the
 * intro / highlight text in the centre, and an optional
 * decorative landscape on the inline-end. The highlight line
 * is rendered visually stronger (bolder + dark green) per
 * the reference. */
.bp-awards-recognition__mission {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 18px;
	margin-block-start: var(--bp-ar-mission-gap);
	padding: var(--bp-ar-mission-pad) 24px;
	background-color: var(--bp-ar-mission-bg);
	border: 1px solid var(--bp-ar-mission-border);
	border-radius: var(--bp-ar-mission-radius);
	overflow: hidden;
	z-index: 2;
}

.bp-awards-recognition__mission-icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	inline-size: var(--bp-ar-mission-icon);
	block-size: var(--bp-ar-mission-icon);
}

.bp-awards-recognition__mission-icon {
	display: block;
	max-inline-size: 100%;
	max-block-size: 100%;
	object-fit: contain;
}

.bp-awards-recognition__mission-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-inline-size: 0;
}

.bp-awards-recognition__mission-intro {
	margin: 0;
	font-family: var(--bp-ar-font);
	font-size: 15px;
	line-height: 1.5;
	color: var(--bp-ar-mission-intro);
}

.bp-awards-recognition__mission-highlight {
	margin: 0;
	font-family: var(--bp-ar-font);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.005em;
	color: var(--bp-ar-mission-highlight);
}

.bp-awards-recognition__mission-landscape-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	inline-size: var(--bp-ar-mission-landscape-w);
	max-inline-size: 240px;
}

.bp-awards-recognition__mission-landscape {
	display: block;
	inline-size: 100%;
	block-size: auto;
	max-block-size: 80px;
	object-fit: contain;
	opacity: 0.85;
	pointer-events: none;
}

/* ================== Tablet ==================
 * Three columns on the top row + two centered on the bottom
 * row (3 + 2 layout). Header stays centered. Side botanicals
 * are reduced. Mission strip keeps the same horizontal layout
 * but reduces the icon / landscape widths. */
@media (max-width: 1024px) {
	.bp-awards-recognition {
		--bp-ar-pad-block: 56px;
		--bp-ar-pad-block-end: 56px;
		--bp-ar-botanical-w: 22%;
		--bp-ar-card-gap: 14px;
	}

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

	/* Place the 4th + 5th cards under the first 3 and center
	 * them in a 2-cell sub-row. */
	.bp-awards-recognition__card:nth-child(4) {
		grid-column: 1 / span 1;
		grid-column-start: 1;
	}
	.bp-awards-recognition__card:nth-child(5) {
		grid-column: 2 / span 1;
	}

	.bp-awards-recognition__mission {
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 14px;
	}

	.bp-awards-recognition__mission-landscape-wrap {
		grid-column: 1 / -1;
		justify-content: center;
		max-inline-size: none;
		inline-size: 100%;
		opacity: 0.6;
	}
}

/* ================== Mobile ==================
 * Single-column grid; cards span the full width. Side
 * botanicals are hidden on phones to avoid overflow and
 * noise. Mission strip stacks: icon on top, text in the
 * middle, landscape last. */
@media (max-width: 768px) {
	.bp-awards-recognition {
		--bp-ar-pad-block: 48px;
		--bp-ar-pad-block-end: 48px;
		--bp-ar-header-gap: 32px;
		--bp-ar-mission-gap: 28px;
		--bp-ar-card-pad: 22px;
	}

	.bp-awards-recognition__botanical {
		display: none;
	}

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

	.bp-awards-recognition__description {
		font-size: 14px;
	}

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

	.bp-awards-recognition__card {
		text-align: start;
		align-items: center;
	}

	.bp-awards-recognition__mission {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 12px;
		text-align: start;
	}

	.bp-awards-recognition__mission-icon-wrap {
		inline-size: 40px;
		block-size: 40px;
	}

	.bp-awards-recognition__mission-highlight {
		font-size: 15px;
	}
}

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

	.bp-awards-recognition__card {
		padding: 18px;
	}

	.bp-awards-recognition__card-title {
		font-size: 13px;
	}

	.bp-awards-recognition__mission {
		padding: 16px 18px;
	}
}

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

/* ================== 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-awards-recognition__title,
[dir="rtl"] .bp-awards-recognition__title,
[lang="ar"] .bp-awards-recognition__card-title,
[dir="rtl"] .bp-awards-recognition__card-title,
[lang="ar"] .bp-awards-recognition__mission-highlight,
[dir="rtl"] .bp-awards-recognition__mission-highlight {
	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-awards-recognition,
.elementor-widget.elementor-widget-bp-awards-recognition,
.elementor .elementor-widget-bp-awards-recognition,
.e-con.e-parent:has(> .elementor-widget-bp-awards-recognition),
.elementor-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-bp-awards-recognition),
.elementor .elementor-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-bp-awards-recognition) {
	--container-default-padding-top:    0px;
	--container-default-padding-bottom: 0px;
	margin-block: 0;
}