/* BP About Root Technology widget styles
 *
 * New isolated widget for the "Une technologie pensee
 * autour de la zone racinaire" section of the A propos
 * page. Cream / parchment background, premium editorial
 * layout: centered header + 3-column grid (step card on
 * the left, dominant root-zone visual in the center, two
 * step cards stacked on the right) + a small bottom strip.
 *
 * Layout (desktop, >= 1100px):
 *   - cream section, padded top / bottom
 *   - inner capped at 1300px and centered
 *   - centered header: eyebrow + gold line/diamond/line
 *     + serif title + intro
 *   - main layout: CSS grid
 *       [ step 01 ] [ root visual ] [ step 02 / 03 stack ]
 *   - bottom strip: green icon + sentence + gold diamond
 *
 * Tablet (769-1099px):
 *   - 2-column layout: visual on top, cards arranged
 *     below in 2 columns (step 01 / step 02-03)
 *   - no connector lines
 *
 * Mobile (<= 768px):
 *   - single column stack: header, step 01, visual,
 *     step 02, step 03, strip
 *   - no connector lines
 *   - reduced title / visual heights
 *
 * Approved palette only:
 *   #374F37  deep green
 *   #B8B25A  olive / gold
 *   #D8C47C  gold border / soft
 *   #FBF6EC  cream background
 *   #F4ECDD  cream soft
 *   #E4DCCB  cream border
 *   #FFFFFF  white
 *   #1F2A1F  text
 *   #5C6A5C  text muted
 *
 * No SVG illustrations. The gold divider under the
 * eyebrow is a flex row of two 1px lines flanking a
 * rotated square built with `::before` borders.
 * Connector lines are simple horizontal CSS rules
 * anchored on the card pseudo-elements.
 */

/* ============================================================
 * SECTION
 * Cream / parchment background, generous padding, centered
 * inner capped at 1300px.
 * ============================================================ */
.bp-about-root-technology {
	--bp-art-bg:           #FBF6EC;
	--bp-art-green:        #374F37;
	--bp-art-olive:        #B8B25A;
	--bp-art-gold:         #D8C47C;
	--bp-art-gold-soft:    #E4DCCB;
	--bp-art-cream-soft:   #F4ECDD;
	--bp-art-card-bg:      #FCF8F0;
	--bp-art-white:        #FFFFFF;
	--bp-art-text:         #1F2A1F;
	--bp-art-text-muted:   #5C6A5C;

	--bp-art-inner-max:    1140px;
	--bp-art-pad-block:    88px;

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

	--bp-art-card-radius:  20px;
	--bp-art-card-border:  var(--bp-art-gold);
	--bp-art-card-pad:     24px;

	--bp-art-step-size:    42px;
	--bp-art-visual-h:     460px;

	/* Layout grid: small column-gap is also the connector target. */
	--bp-art-connector-len: 28px;

	position: relative;
	isolation: isolate;
	overflow: hidden;
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: 100%;
	margin: 0;
	padding-block: var(--bp-art-pad-block);
	padding-inline: 0;
	background-color: var(--bp-art-bg);
	color: var(--bp-art-text);
	font-family: var(--bp-art-font-body);
}

.bp-about-root-technology *,
.bp-about-root-technology *::before,
.bp-about-root-technology *::after {
	box-sizing: border-box;
}

/* Full-bleed: the widget always spans the full width of
 * its Elementor column / page so the inner can use the
 * section background. */
.elementor .elementor-section > .elementor-column > .elementor-widget-wrap,
.elementor .elementor-section > .elementor-column > .elementor-widget-wrap > .elementor-widget,
.elementor .elementor-section > .elementor-column > .elementor-widget-wrap > .elementor-widget > .elementor-widget-container,
.elementor .elementor-section > .elementor-column > .elementor-widget-wrap > .elementor-widget > .bp-about-root-technology,
.elementor-section .elementor-container .elementor-column .elementor-widget-wrap .elementor-widget .bp-about-root-technology {
	inline-size: 100%;
	max-inline-size: 100%;
}

/* ============================================================
 * INNER
 * Centered, capped at 1300px. Holds the header, the
 * 3-column layout and the bottom strip. Header → layout
 * gap is tight; layout → strip is even tighter so the
 * strip reads as part of the diagram.
 * ============================================================ */
.bp-about-root-technology__inner {
	position: relative;
	inline-size: 100%;
	max-inline-size: var(--bp-art-inner-max);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.bp-about-root-technology__header {
	margin-block-end: 46px;
}

.bp-about-root-technology__layout {
	margin-block-end: 28px;
}

/* ============================================================
 * HEADER
 * Centered eyebrow + gold line/diamond/line + serif title
 * + intro. No SVG, all CSS.
 * ============================================================ */
.bp-about-root-technology__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
	max-inline-size: 100%;
}

.bp-about-root-technology__eyebrow {
	margin: 0;
	font-family: var(--bp-art-font-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.20em;
	text-transform: uppercase;
	color: var(--bp-art-green);
	line-height: 1.3;
}

.bp-about-root-technology__divider {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-block: 4px 2px;
}

.bp-about-root-technology__divider-line {
	inline-size: 48px;
	block-size: 1px;
	background-color: var(--bp-art-olive);
}

.bp-about-root-technology__divider-diamond {
	inline-size: 6px;
	block-size: 6px;
	background-color: var(--bp-art-olive);
	transform: rotate(45deg);
	display: inline-block;
}

.bp-about-root-technology__title {
	margin: 0;
	font-family: var(--bp-art-font-display);
	font-weight: 400;
	font-size: clamp(36px, 4.4vw, 56px);
	line-height: 1.05;
	letter-spacing: -0.005em;
	color: #374F3C;
	max-inline-size: 800px;
}

.bp-about-root-technology__intro {
	margin: 0;
	font-family: var(--bp-art-font-body);
	font-size: 17px;
	line-height: 1.55;
	color: var(--bp-art-text-muted);
	max-inline-size: 720px;
}

/* ============================================================
 * MAIN LAYOUT
 * 3-column CSS grid on desktop. The center column is the
 * dominant root-zone visual.
 *
 * The layout creates its own stacking context so the
 * central visual paints at z-index 1, the connector
 * lines / dots paint above it, and the step cards sit
 * on top of everything.
 * ============================================================ */
.bp-about-root-technology__layout {
	position: relative;
	isolation: isolate;
	overflow: visible;
	display: grid;
	grid-template-columns: minmax(230px, 0.85fr) minmax(520px, 2fr) minmax(300px, 1fr);
	column-gap: 28px;
	row-gap: 24px;
	align-items: center;
}

/* ============================================================
 * STEP CARD
 * Cream / bordered rounded card. Holds the step circle,
 * label, title and body copy. The step-01 card sits in
 * the inline-start column. The step-02 / step-03 cards
 * sit in the inline-end column (`.bp-about-root-technology__right`).
 *
 * Padding, title and body sizes are tuned so the two
 * stacked right cards stay close to the central visual
 * height instead of stretching to a 50/50 split.
 * ============================================================ */
.bp-about-root-technology__card {
	position: relative;
	z-index: 5;
	display: flex;
	flex-direction: column;
	gap: 12px;
	background-color: var(--bp-art-card-bg);
	border: 1px solid var(--bp-art-card-border);
	border-radius: var(--bp-art-card-radius);
	padding: var(--bp-art-card-pad);
	min-inline-size: 0;
	transition: border-color 0.2s ease;
}

/* ============================================================
 * STEP 01 - tight meta row + compact title
 *
 * The step-01 card sits in the narrowest column. The meta
 * row (circle + dash + POSITIONNEMENT) must stay on one
 * line without overflowing the card edge, and the title
 * should break naturally into 2 short lines.
 * ============================================================ */
.bp-about-root-technology__card--step-01 {
	padding-inline: 20px;
}

.bp-about-root-technology__card--step-01 .bp-about-root-technology__step-circle {
	inline-size: 38px;
	block-size: 38px;
	font-size: 15px;
}

.bp-about-root-technology__card--step-01 .bp-about-root-technology__card-dash {
	inline-size: 14px;
}

.bp-about-root-technology__card--step-01 .bp-about-root-technology__card-label {
	font-size: 11px;
	letter-spacing: 0.10em;
	min-inline-size: 0;
}

.bp-about-root-technology__card--step-01 .bp-about-root-technology__card-title {
	font-size: clamp(20px, 1.55vw, 23px);
	line-height: 1.15;
}

/* ============================================================
 * CONNECTORS — simple straight horizontal lines
 *
 * Each path is two pieces that meet at the visual's edge
 * with no visible break:
 *
 *   card connector  (in the card, absolute, runs OUT from
 *                    the card edge to the visual edge)
 *   visual-connector (in the figure, absolute, runs FROM
 *                    the visual edge ~18–20% into the visual,
 *                    ending in a dot rendered via ::after)
 *
 * The card connector Y is tuned so the line meets the
 * visual-connector Y at the visual's edge.
 *
 * Stacking:
 *   visual image    (z 1)
 *   inner connectors(z 3)   <-- paints over the photo
 *   cards           (z 5)
 * ============================================================ */

/* ----- Continuous line base -----
 * One single horizontal rule per step, positioned as a
 * direct child of `.bp-about-root-technology__layout`.
 * Each line spans from one anchor (card edge or visual
 * interior) to the other without any break or seam.
 * The endpoint dot is rendered via the `::after`
 * pseudo-element (9px gold circle with a 2px cream
 * border). */
.bp-about-root-technology__line {
	position: absolute;
	block-size: 1px;
	background-color: #D8C47C;
	pointer-events: none;
	z-index: 3;
}

.bp-about-root-technology__line::after {
	content: '';
	position: absolute;
	inline-size: 9px;
	block-size: 9px;
	border-radius: 50%;
	background-color: #D8C47C;
	border: 2px solid #FBF6EC;
	box-sizing: content-box;
}

/* Step 01 (left card): line exits at the inline-end edge
 * of the Step 01 card (right edge of column 1), crosses
 * the 28px gap, and runs 20% into the central visual.
 * Y is the visual vertical center (50%). Dot at RIGHT end. */
.bp-about-root-technology__line--01 {
	inset-block-start: 50%;
	inset-inline-start: 21%;
	inline-size: 12.5%;
}

.bp-about-root-technology__line--01::after {
	inset-block-start: -6px;
	inset-inline-end: -6.5px;
}

/* Step 02 (right card, top): line starts 20% into the
 * central visual from the RIGHT edge, crosses the
 * visual + the 28px gap, ends at the inline-start edge
 * of the Step 02 card (left edge of column 3).
 * Y is 33% of the visual's height. Dot at LEFT end. */
.bp-about-root-technology__line--02 {
	inset-block-start: 33%;
	inset-inline-start: 63%;
	inline-size: 12%;
}

.bp-about-root-technology__line--02::after {
	inset-block-start: -6px;
	inset-inline-start: -6.5px;
}

/* Step 03 (right card, bottom): line starts 18% into the
 * central visual from the RIGHT edge, crosses the
 * visual + the 28px gap, ends at the inline-start edge
 * of the Step 03 card (left edge of column 3).
 * Y is 70% of the visual's height. Dot at LEFT end. */
.bp-about-root-technology__line--03 {
	inset-block-start: 70%;
	inset-inline-start: 64%;
	inline-size: 11%;
}

.bp-about-root-technology__line--03::after {
	inset-block-start: -6px;
	inset-inline-start: -6.5px;
}

/* ============================================================
 * CARD HEADER
 * Compact flex row, single line, no wrap. Circle + gold
 * dash + uppercase label, all in one row.
 * ============================================================ */
.bp-about-root-technology__card-header {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: nowrap;
	white-space: nowrap;
	min-inline-size: 0;
}

.bp-about-root-technology__step-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	inline-size: var(--bp-art-step-size);
	block-size: var(--bp-art-step-size);
	border: 1px solid var(--bp-art-olive);
	border-radius: 50%;
	font-family: var(--bp-art-font-display);
	font-size: 16px;
	font-weight: 400;
	color: var(--bp-art-olive);
	background-color: transparent;
	line-height: 1;
}

.bp-about-root-technology__card-dash {
	flex: 0 0 auto;
	inline-size: 14px;
	block-size: 1px;
	background-color: var(--bp-art-olive);
}

.bp-about-root-technology__card-label {
	font-family: var(--bp-art-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bp-art-olive);
	line-height: 1.3;
}

.bp-about-root-technology__card-title {
	margin: 0;
	font-family: var(--bp-art-font-display);
	font-weight: 400;
	font-size: clamp(20px, 1.65vw, 25px);
	line-height: 1.15;
	color: var(--bp-art-green);
}

.bp-about-root-technology__card-text {
	margin: 0;
	font-family: var(--bp-art-font-body);
	font-size: 15px;
	line-height: 1.5;
	color: var(--bp-art-text-muted);
}

/* ============================================================
 * VISUAL
 * Dominant root-zone image. Real media picked from the
 * Elementor MEDIA control. When empty, a neutral cream
 * placeholder keeps the slot's height stable.
 * ============================================================ */
.bp-about-root-technology__visual {
	position: relative;
	z-index: 1;
	margin: 0;
	inline-size: 100%;
	block-size: var(--bp-art-visual-h);
	max-block-size: 100%;
	border-radius: 22px;
	overflow: hidden;
	background-color: var(--bp-art-cream-soft);
	box-shadow: 0 18px 40px -28px rgba(31, 42, 31, 0.35);
}

.bp-about-root-technology__visual-image {
	display: block;
	position: relative;
	z-index: 1;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center;
}

.bp-about-root-technology__visual-placeholder {
	display: block;
	position: relative;
	z-index: 1;
	inline-size: 100%;
	block-size: 100%;
	background-color: var(--bp-art-cream-soft);
}

/* ============================================================
 * RIGHT COLUMN (step 02 / step 03 stack)
 * Two compact rows. Use natural card heights; the cards
 * are not stretched to a 50/50 split, so the combined
 * stack stays close to the central visual height.
 * ============================================================ */
.bp-about-root-technology__right {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-inline-size: 0;
	align-self: center;
}

/* ============================================================
 * BOTTOM STRIP
 * Full-width inside the inner. Cream / bordered / small
 * green icon on the inline-start, sentence in the center,
 * small gold diamond on the inline-end.
 * ============================================================ */
.bp-about-root-technology__strip {
	/* Visual shell owned by `.bp-info-strip` (shared utility). */
}

.bp-about-root-technology__strip-icon {
	/* Visual shell owned by `.bp-info-strip__icon` (shared utility). */
}

.bp-about-root-technology__strip-icon-svg {
	/* Visual shell owned by `.bp-info-strip__icon svg` (shared utility). */
}

.bp-about-root-technology__strip-text {
	/* Visual shell owned by `.bp-info-strip__text` (shared utility). */
}

.bp-about-root-technology__strip-diamond {
	/* Visual shell owned by `.bp-info-strip__diamond` (shared utility). */
}

/* ============================================================
 * ARABIC / RTL
 * The display headlines fall back to the Arabic family
 * instead of inheriting the Latin display family. The
 * layout already mirrors via logical properties.
 * ============================================================ */
[lang="ar"] .bp-about-root-technology__title,
[dir="rtl"] .bp-about-root-technology__title,
[lang="ar"] .bp-about-root-technology__card-title,
[dir="rtl"] .bp-about-root-technology__card-title,
[lang="ar"] .bp-about-root-technology__strip-text,
[dir="rtl"] .bp-about-root-technology__strip-text {
	font-family: var(--bp-font-arabic, 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif);
	font-weight: 700;
	letter-spacing: 0;
}

/* ============================================================
 * TABLET
 * 769-1099px: 2-column layout. Visual on top, step 01 on
 * the inline-start of a 2-col row below, step 02 + 03
 * stacked on the inline-end. No connector lines.
 * ============================================================ */
@media (max-width: 1099px) {
	.bp-about-root-technology {
		--bp-art-pad-block: 64px;
		--bp-art-visual-h:  420px;
	}

	.bp-about-root-technology__layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 20px;
		row-gap: 20px;
		align-items: stretch;
	}

	.bp-about-root-technology__visual {
		grid-column: 1 / -1;
		order: 1;
	}

	.bp-about-root-technology__card--step-01 {
		grid-column: 1;
		order: 2;
	}

	.bp-about-root-technology__right {
		grid-column: 2;
		order: 3;
		align-self: stretch;
	}

	/* No connectors on tablet. */
	.bp-about-root-technology__line {
		display: none !important;
	}
}

/* ============================================================
 * MOBILE
 * <= 768px: single column stack in the required order.
 * ============================================================ */
@media (max-width: 768px) {
	.bp-about-root-technology {
		--bp-art-pad-block: 52px;
		--bp-art-visual-h:  320px;
	}

	.bp-about-root-technology__header {
		margin-block-end: 32px;
	}

	.bp-about-root-technology__layout {
		margin-block-end: 32px;
	}

	.bp-about-root-technology__title {
		font-size: clamp(32px, 7vw, 40px);
	}

	.bp-about-root-technology__intro {
		font-size: 15px;
	}

	.bp-about-root-technology__layout {
		display: flex;
		flex-direction: column;
		gap: 18px;
	}

	.bp-about-root-technology__header,
	.bp-about-root-technology__card--step-01,
	.bp-about-root-technology__visual,
	.bp-about-root-technology__right,
	.bp-about-root-technology__strip {
		order: initial;
		width: 100%;
		max-inline-size: 100%;
	}

	.bp-about-root-technology__header {
		order: 1;
	}
	.bp-about-root-technology__card--step-01 {
		order: 2;
	}
	.bp-about-root-technology__visual {
		order: 3;
	}
	.bp-about-root-technology__right {
		order: 4;
	}
	.bp-about-root-technology__strip {
		order: 5;
	}

	/* No connectors on mobile. */
	.bp-about-root-technology__line {
		display: none !important;
	}

	/* Mobile strip sizing owned by `.bp-info-strip` shared
	 * utility — the `.bp-about-root-technology__strip*`
	 * hooks stay on the element for ordering only. */
}

/* ============================================================
 * SMALL PHONE
 * Slightly tighter spacing below 430px.
 * ============================================================ */
@media (max-width: 430px) {
	.bp-about-root-technology {
		--bp-art-pad-block: 44px;
		--bp-art-visual-h:  280px;
	}

	.bp-about-root-technology__card {
		padding: 22px;
	}
}