/* BP Product Utilisation widget styles
 *
 * Tunisia product page "UTILISATION / Du produit au sol."
 *
 * Structure (REBUILT — horizontal 3-step on desktop):
 *   .bp-product-utilisation   FULL VIEWPORT WIDTH root.
 *                             Breakout technique (width:100vw +
 *                             margin-inline: calc(50% - 50vw))
 *                             so the decorative background spans
 *                             the entire screen. overflow-x:clip
 *                             prevents horizontal scrollbars.
 *     .bp-pu__bg              absolute, inset:0, z-index:0
 *                             (Elementor image / opacity / size / X / Y)
 *     .bp-pu__inner           max-inline-size 1140px, centered, z-index:1
 *       .bp-pu__header        eyebrow / title / divider / subtitle
 *       .bp-pu__timeline      HORIZONTAL 3-step on desktop:
 *                             ┌──────┐  ┌──────┐  ┌──────┐
 *                             │  ①   │  │  ②   │  │  ③   │
 *                             │ card │  │ card │  │ card │
 *                             └──────┘  └──────┘  └──────┘
 *                             A gold horizontal line runs through
 *                             the 3 markers (::before on timeline).
 *                             On mobile the layout collapses to a
 *                             single vertical column with the
 *                             connector re-oriented to vertical.
 *       .bp-pu__tech-note     Single full-width informational strip
 *                             displayed directly beneath the 3-step
 *                             timeline. Calm explanatory tone.
 *
 * Approved palette ONLY:
 *   #374F37  deep green
 *   #EDDBC3  cream
 *   #B8B25A  olive / gold
 *   #FBF6EC  very light cream (section)
 *   #E4DCCB  border cream
 *   #1F2A1F  dark text
 *   #FFFFFF  white
 *
 * SCOPING:
 *   Every rule is scoped under `.bp-product-utilisation`. No global leaks.
 *   Logical CSS properties so LTR and RTL share the same ruleset.
 */

/* =========================================================
 * ROOT - full-viewport-width via breakout
 * ========================================================= */
.bp-product-utilisation {
	/* ---- Theme tokens (approved palette only) ---- */
	--bp-pu-green:        #374F37;
	--bp-pu-olive:        #B8B25A;
	--bp-pu-cream:        #EDDBC3;
	--bp-pu-white:        #FFFFFF;
	--bp-pu-text:         #1F2A1F;
	--bp-pu-border:       #E4DCCB;
	--bp-pu-card-bg:      #FBF6EC;

	--bp-pu-line-color:   var(--bp-pu-olive);
	--bp-pu-line-width:   1.5px;
	--bp-pu-marker-bg:    #5A5A2A;
	--bp-pu-divider-color: var(--bp-pu-olive);

	--bp-pu-inner-max:    1140px;
	--bp-pu-marker-size:  56px;
	--bp-pu-marker-radius: calc(var(--bp-pu-marker-size) / 2);
	--bp-pu-marker-row:   52px;       /* bottom of marker, top of card */

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

	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	width: 100vw;
	max-inline-size: 100vw;
	margin-inline: calc(50% - 50vw);
	background-color: transparent;
	color: var(--bp-pu-text);
	font-family: var(--bp-pu-font-body);
	padding-block: 56px;
	overflow-x: clip;
}

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

/* =========================================================
 * BACKGROUND LAYER (full viewport width, behind content)
 * ========================================================= */
.bp-product-utilisation .bp-pu__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	display: block;
	overflow: hidden;
}

.bp-product-utilisation .bp-pu__bg--default {
	background: transparent;
	display: flex;
	align-items: stretch;
	justify-content: center;
}

.bp-product-utilisation .bp-pu__bg-svg {
	inline-size: 100%;
	block-size: 100%;
	display: block;
	color: #D9C7A5;
	opacity: 0.7;
}

/* =========================================================
 * INNER - max-width 1140px, centered
 * ========================================================= */
.bp-product-utilisation .bp-pu__inner {
	position: relative;
	z-index: 1;
	inline-size: 100%;
	max-inline-size: var(--bp-pu-inner-max);
	margin-inline: auto;
	padding-inline: clamp(16px, 3vw, 24px);
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* =========================================================
 * HEADER
 * ========================================================= */
.bp-product-utilisation .bp-pu__header {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
	margin-block-end: 36px;
}

.bp-product-utilisation .bp-pu__eyebrow {
	position: relative;
	margin: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	color: var(--bp-pu-green);
	font-family: var(--bp-pu-font-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1.3;
}

.bp-product-utilisation .bp-pu__eyebrow-line {
	inline-size: 44px;
	block-size: 1px;
	background: var(--bp-pu-olive);
	flex: 0 0 auto;
}

.bp-product-utilisation .bp-pu__eyebrow-text {
	white-space: nowrap;
}

.bp-product-utilisation .bp-pu__eyebrow-leaf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 16px;
	block-size: 16px;
	color: var(--bp-pu-olive);
	flex: 0 0 auto;
}

.bp-product-utilisation .bp-pu__eyebrow-mark {
	inline-size: 100%;
	block-size: 100%;
	display: block;
}

.bp-product-utilisation .bp-pu__title {
	margin: 0;
	color: #374F3C;
	font-family: var(--bp-pu-font-display);
	font-weight: 400;
	font-size: clamp(34px, 3.6vw, 46px);
	line-height: 1.1;
	letter-spacing: -0.005em;
	max-inline-size: 980px;
}

.bp-product-utilisation .bp-pu__divider {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-block: 2px;
}

.bp-product-utilisation .bp-pu__divider-line {
	inline-size: 80px;
	block-size: 1px;
	background: var(--bp-pu-divider-color);
	flex: 0 0 auto;
}

.bp-product-utilisation .bp-pu__divider-mark-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 12px;
	block-size: 12px;
	color: var(--bp-pu-divider-color);
	flex: 0 0 auto;
}

.bp-product-utilisation .bp-pu__divider-mark {
	inline-size: 100%;
	block-size: 100%;
	display: block;
}

.bp-product-utilisation .bp-pu__subtitle {
	margin: 0;
	color: var(--bp-pu-text);
	font-family: var(--bp-pu-font-body);
	font-size: 15.5px;
	line-height: 1.55;
	max-inline-size: 720px;
}

/* =========================================================
 * TIMELINE - 3-STEP GRID
 *
 * 3 equal columns of step cards on desktop. The numbered
 * markers and the connecting line live in a SEPARATE
 * structural block below the grid (see CONNECTOR below),
 * so the dashed line is structural — not a per-step hack.
 *
 * On mobile the layout collapses to a single column with
 * padding on the left; a vertical dashed line is drawn on
 * the timeline container and each card gets a CSS-counter
 * marker on the left.
 * ========================================================= */
.bp-product-utilisation .bp-pu__timeline {
	position: relative;
	z-index: 2;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( 3, minmax(0, 1fr) );
	gap: clamp( 20px, 2.6vw, 30px );
	inline-size: 100%;
	counter-reset: bp-pu-step;
}

.bp-product-utilisation .bp-pu__step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	min-inline-size: 0;
}

/* CARD - vertical [IMAGE TOP][TEXT BOTTOM] */
.bp-product-utilisation .bp-pu__card {
	position: relative;
	z-index: 1;
	background: var(--bp-pu-card-bg);
	border: 1px solid var(--bp-pu-border);
	border-radius: 18px;
	padding: 0;
	box-shadow: 0 4px 16px rgba( 31, 42, 31, 0.05 );
	display: flex;
	flex-direction: column;
	overflow: hidden;
	inline-size: 100%;
	counter-increment: bp-pu-step;
}

.bp-product-utilisation .bp-pu__card-image {
	position: relative;
	inline-size: 100%;
	block-size: 260px;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.bp-product-utilisation .bp-pu__card-image img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: 100%;
	max-block-size: 100%;
	object-fit: cover;
	object-position: center;
}

.bp-product-utilisation .bp-pu__card-image--empty {
	display: none;
}

.bp-product-utilisation .bp-pu__card-text {
	padding: 20px 22px 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 auto;
}

.bp-product-utilisation .bp-pu__card-title {
	margin: 0;
	color: var(--bp-pu-green);
	font-family: var(--bp-pu-font-display);
	font-weight: 400;
	font-size: 20px;
	line-height: 1.2;
	letter-spacing: 0;
}

.bp-product-utilisation .bp-pu__card-body {
	margin: 0;
	color: var(--bp-pu-text);
	font-family: var(--bp-pu-font-body);
	font-size: 14px;
	line-height: 1.55;
}

/* =========================================================
 * CONNECTOR - structural row BELOW the cards (desktop)
 *
 *   ┌──────┐  ┌──────┐  ┌──────┐    <- 3 cards (above)
 *      ① ─────── ② ─────── ③       <- dashed olive line + markers
 *
 * The connector is a 3-column grid aligned with the
 * timeline above. The dashed line is drawn on a
 * pseudo-element that spans from the center of the first
 * column to the center of the last column (inset
 * 16.6666% on each side). The 3 numbered markers sit
 * centred in each grid cell so they line up exactly with
 * the card centers. The markers cover the line at their
 * position (z-index 1 > line z-index 0).
 * ========================================================= */
.bp-product-utilisation .bp-pu__connector {
	position: relative;
	z-index: 2;
	margin-block-start: 24px;
	inline-size: 100%;
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	block-size: calc( var(--bp-pu-marker-size) + 12px );
}

.bp-product-utilisation .bp-pu__connector::before {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 16.6666%;
	inset-inline-end: 16.6666%;
	block-size: 0;
	border: 0;
	border-top: var(--bp-pu-line-width) dashed var(--bp-pu-line-color);
	transform: translateY(-50%);
	pointer-events: none;
	z-index: 0;
}

.bp-product-utilisation .bp-pu__marker {
	position: relative;
	z-index: 1;
	justify-self: center;
	align-self: center;
	inline-size: var(--bp-pu-marker-size);
	block-size: var(--bp-pu-marker-size);
	border-radius: 50%;
	background: var(--bp-pu-marker-bg);
	color: var(--bp-pu-white);
	box-shadow: 0 3px 10px rgba( 31, 42, 31, 0.22 );
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Manrope', 'Inter', 'Helvetica Neue', Arial, sans-serif;
	font-weight: 600;
	font-style: normal;
	font-variant-numeric: lining-nums;
	font-size: 22px;
	line-height: 1;
	letter-spacing: 0;
}

/* =========================================================
 * TECHNICAL CLARIFICATION
 * 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-product-utilisation .bp-pu__tech-note {
	position: relative;
	z-index: 2;
	margin-block-start: 32px;
	max-inline-size: 980px;
	margin-inline: auto;
}

/* =========================================================
 * SAFE-AREA INSETS (notched devices)
 * ========================================================= */
@supports (padding: max(0px)) {
	.bp-product-utilisation .bp-pu__inner {
		padding-inline-start: max(clamp(16px, 3vw, 24px), env(safe-area-inset-left));
		padding-inline-end:   max(clamp(16px, 3vw, 24px), env(safe-area-inset-right));
	}
}

/* =========================================================
 * RESPONSIVE - TABLET (1024px and below)
 * Keep horizontal 3-column if width permits; tighten gaps
 * and card radius. Connector still runs horizontally.
 * ========================================================= */
@media (max-width: 1024px) {
	.bp-product-utilisation {
		--bp-pu-marker-size: 50px;
		padding-block: 48px;
	}

	.bp-product-utilisation .bp-pu__card {
		border-radius: 16px;
	}

	.bp-product-utilisation .bp-pu__card-image {
		block-size: 200px;
	}

	.bp-product-utilisation .bp-pu__card-title {
		font-size: 18px;
	}

	.bp-product-utilisation .bp-pu__card-body {
		font-size: 13px;
	}
}

/* =========================================================
 * RESPONSIVE - MOBILE (720px and below)
 * Switch to vertical sequence. The desktop connector block
 * is hidden; a vertical dashed line is drawn on the
 * timeline container (left gutter) and each card gets a
 * CSS-counter marker on its left.
 * ========================================================= */
@media (max-width: 720px) {
	.bp-product-utilisation {
		--bp-pu-marker-size: 48px;
		padding-block: 40px;
	}

	.bp-product-utilisation .bp-pu__header {
		margin-block-end: 24px;
		gap: 8px;
	}

	.bp-product-utilisation .bp-pu__eyebrow-line {
		inline-size: 24px;
	}

	.bp-product-utilisation .bp-pu__title {
		font-size: clamp(26px, 8vw, 34px);
	}

	.bp-product-utilisation .bp-pu__divider-line {
		inline-size: 50px;
	}

	.bp-product-utilisation .bp-pu__subtitle {
		font-size: 14px;
	}

	/* Hide the desktop horizontal connector on mobile. */
	.bp-product-utilisation .bp-pu__connector {
		display: none;
	}

	/* Vertical timeline = 1 column with a left gutter for
	 * markers + connector. */
	.bp-product-utilisation .bp-pu__timeline {
		grid-template-columns: 1fr;
		gap: 20px;
		padding-inline-start: calc( var(--bp-pu-marker-size) + 24px );
	}

	/* Vertical dashed line on the left of the timeline. */
	.bp-product-utilisation .bp-pu__timeline::before {
		content: "";
		position: absolute;
		inset-block-start: var(--bp-pu-marker-radius);
		inset-block-end: var(--bp-pu-marker-radius);
		inset-inline-start: calc( var(--bp-pu-marker-radius) - 1px );
		inset-inline-end: auto;
		block-size: auto;
		inline-size: 0;
		border: 0;
		border-inline-start: var(--bp-pu-line-width) dashed var(--bp-pu-line-color);
		transform: none;
		z-index: 0;
	}

	.bp-product-utilisation .bp-pu__step {
		align-items: stretch;
		text-align: left;
	}

	/* Per-step marker on the left of the card. Comes from
	 * the CSS counter incremented on each card. */
	.bp-product-utilisation .bp-pu__card::before {
		content: counter( bp-pu-step );
		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: calc( -1 * ( var(--bp-pu-marker-size) + 24px ) );
		transform: translate( calc( var(--bp-pu-marker-radius) + 12px - 0.5px ), -50% );
		inline-size: var(--bp-pu-marker-size);
		block-size: var(--bp-pu-marker-size);
		border-radius: 50%;
		background: var(--bp-pu-marker-bg);
		color: var(--bp-pu-white);
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: 'Manrope', 'Inter', 'Helvetica Neue', Arial, sans-serif;
		font-weight: 600;
		font-style: normal;
		font-variant-numeric: lining-nums;
		font-size: calc( var(--bp-pu-marker-size) * 0.4 );
		line-height: 1;
		box-shadow: 0 3px 10px rgba( 31, 42, 31, 0.22 );
		z-index: 2;
	}

	.bp-product-utilisation .bp-pu__card {
		border-radius: 14px;
	}

	.bp-product-utilisation .bp-pu__card-image {
		block-size: 180px;
	}

	.bp-product-utilisation .bp-pu__card-text {
		padding: 16px 18px 20px;
	}

	.bp-product-utilisation .bp-pu__card-title {
		font-size: 17px;
	}

	.bp-product-utilisation .bp-pu__card-body {
		font-size: 12.5px;
	}
}

/* =========================================================
 * RESPONSIVE - SMALL MOBILE (420px and below)
 * ========================================================= */
@media (max-width: 420px) {
	.bp-product-utilisation .bp-pu__eyebrow {
		gap: 8px;
		font-size: 12px;
		letter-spacing: 0.14em;
	}

	.bp-product-utilisation .bp-pu__eyebrow-line {
		inline-size: 18px;
	}

	.bp-product-utilisation .bp-pu__eyebrow-leaf {
		inline-size: 12px;
		block-size: 12px;
	}
}