/* BP Contact "En Tunisie" V2 widget styles
 *
 * Replaces the previous `bp-contact-global-network` section
 * on the Contact page. Reuses the existing integrated
 * horizontal-progression language of `bp-cultures-scales` and
 * `bp-results-context-guide`: 3 step markers connected by a
 * single gold line, identical palette / typography / radii,
 * no floating cards, no shadow, no new icon system.
 *
 * Desktop layout:
 *
 *   ┌────────────── header text ──────────────┐ ┌─ image ─┐
 *   │ EN TUNISIE                                │ │   ▲     │
 *   │ H2 title                                 │ └─────────┘
 *   │ intro paragraph                          │
 *   └──────────────────────────────────────────┘
 *
 *   [ 01 ] ——— [ 02 ] ——— [ 03 ]
 *   UTILISATION CULTURES & ÉCHELLES DISPONIBILITÉ
 *
 * Mobile layout:
 *   header text full width, optional image moves below as a
 *   thin figure, then the rail collapses to a vertical
 *   progression line on the left with the 3 markers stacked
 *   along it.
 *
 * Palette tokens (identical to bp-cultures-scales / bp-results-context-guide):
 *   --bp-ctn2-green:   #2F4A2F
 *   --bp-ctn2-green-2: #374F37
 *   --bp-ctn2-cream:   #F4EFE3
 *   --bp-ctn2-cream-2: #EFE8D9
 *   --bp-ctn2-sage:    #D9D8C2
 *   --bp-ctn2-gold:    #B8B25A
 *   --bp-ctn2-ink:     #1F2A1F
 */

.bp-contact-tunisia-v2 {
	--bp-ctn2-green:        #2F4A2F;
	--bp-ctn2-green-2:      #374F37;
	--bp-ctn2-cream:        #F4EFE3;
	--bp-ctn2-cream-2:      #EFE8D9;
	--bp-ctn2-sage:         #D9D8C2;
	--bp-ctn2-gold:         #B8B25A;
	--bp-ctn2-ink:          #1F2A1F;
	--bp-ctn2-ink-soft:     rgba(31, 42, 31, 0.72);

	--bp-ctn2-inner-max:    1320px;
	--bp-ctn2-pad-x:        clamp(24px, 5vw, 64px);
	--bp-ctn2-pad-y:        clamp(72px, 8vw, 112px);

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

	position: relative;
	isolation: isolate;
	overflow: hidden;
	inline-size: 100%;
	max-inline-size: none;
	background: var(--bp-ctn2-cream);
	color: var(--bp-ctn2-ink);
	font-family: var(--bp-ctn2-font-body);
}

/* ----- Full-bleed breakout (matches other V2 progression widgets) ----- */
.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 > .bp-contact-tunisia-v2,
.elementor-section .elementor-container {
	width: 100% !important;
	max-width: 100% !important;
}

.elementor-element.bp-contact-tunisia-v2,
.elementor .bp-contact-tunisia-v2,
.e-con.bp-contact-tunisia-v2,
.bp-contact-tunisia-v2 {
	padding: 0;
	margin: 0;
	inline-size: 100%;
	max-inline-size: 100%;
}

.elementor-inner section.elementor-section,
.elementor-inner section.elementor-section > .elementor-container,
.elementor-inner section.elementor-section > .elementor-row,
.elementor-inner section.elementor-section > .elementor-row > .elementor-column,
.elementor-inner section.elementor-section > .elementor-row > .elementor-column > .elementor-widget-wrap {
	width: 100% !important;
	max-width: 100% !important;
	padding-inline: 0 !important;
}

.elementor .elementor-widget.elementor-widget-bp-contact-tunisia-v2,
.elementor-widget.elementor-widget-bp-contact-tunisia-v2 {
	inline-size: 100vw !important;
	max-inline-size: 100vw !important;
	margin-inline-start: calc(50% - 50vw) !important;
	margin-inline-end:   calc(50% - 50vw) !important;
	position: relative;
	z-index: 1;
}

.e-con:has(> .elementor-widget-bp-contact-tunisia-v2),
.e-con:has(> .e-con-inner > .elementor-widget-bp-contact-tunisia-v2),
.e-con-inner:has(> .elementor-widget-bp-contact-tunisia-v2) {
	--container-default-padding-top:    0px !important;
	--container-default-padding-bottom: 0px !important;
	padding-top:    0 !important;
	padding-bottom: 0 !important;
}
.elementor-widget.elementor-widget-bp-contact-tunisia-v2 {
	margin-block-end: 0 !important;
	--kit-widget-spacing: 0px !important;
}

/* ----- Inner container ----- */
.bp-ctn2__inner {
	position: relative;
	z-index: 1;
	inline-size: 100%;
	max-inline-size: var(--bp-ctn2-inner-max);
	margin-inline: auto;
	padding-block:   var(--bp-ctn2-pad-y);
	padding-inline: var(--bp-ctn2-pad-x);
}

/* ----- Header (text + optional image side-by-side) ----- */
.bp-ctn2__header {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 36px;
	margin-block-end: 64px;
	text-align: start;
	align-items: end;
}

.bp-ctn2.has-image .bp-ctn2__header {
	grid-template-columns: minmax(0, 1fr) clamp(220px, 26%, 340px);
	gap: 56px;
}

.bp-ctn2__header-text {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-inline-size: 820px;
}

/* ----- Eyebrow ----- */
.bp-ctn2__eyebrow {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bp-ctn2-green);
	line-height: 1;
}
.bp-ctn2__eyebrow-line {
	display: inline-block;
	inline-size: 40px;
	block-size: 2px;
	background: var(--bp-ctn2-gold);
	border-radius: 1px;
}

/* ----- Title ----- */
.bp-ctn2__title {
	margin: 0;
	font-family: var(--bp-ctn2-font-display);
	font-weight: 400;
	font-size: 50px;
	line-height: 1.06;
	letter-spacing: -0.01em;
	color: #374F3C;
}

/* ----- Intro ----- */
.bp-ctn2__intro {
	margin: 0;
	font-size: 17px;
	line-height: 1.65;
	color: var(--bp-ctn2-ink);
	max-inline-size: 720px;
}

/* ----- Optional image (right of header) ----- */
.bp-ctn2__figure {
	margin: 0;
	inline-size: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 14px;
	overflow: hidden;
	background: var(--bp-ctn2-sage);
	box-shadow: 0 6px 18px rgba(31, 42, 31, 0.08);
	border: 1px solid rgba(31, 42, 31, 0.08);
}
.bp-ctn2__image {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center;
}

/* ----- Rail (the integrated horizontal progression) ----- */
.bp-ctn2__rail {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
	align-items: start;
}

.bp-ctn2__line {
	position: absolute;
	inset-block-start: 38px;
	inset-inline: 12% 12%;
	block-size: 2px;
	background: linear-gradient(
		to right,
		rgba(184, 178, 90, 0.35) 0%,
		rgba(184, 178, 90, 0.85) 45%,
		rgba(184, 178, 90, 1.00) 100%
	);
	border-radius: 2px;
	z-index: 0;
}

.bp-ctn2__step {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding-block-start: 0;
}

/* Marker — restrained gold circular language. Slight size
 * increase from 01 → 03 to anchor the reading direction. */
.bp-ctn2__marker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 70px;
	block-size: 70px;
	border-radius: 999px;
	background: #fff;
	color: var(--bp-ctn2-green-2);
	font-family: var(--bp-ctn2-font-display);
	font-weight: 400;
	border: 2px solid var(--bp-ctn2-gold);
	box-shadow: 0 6px 18px rgba(31, 42, 31, 0.08);
	position: relative;
}
.bp-ctn2__step--1 .bp-ctn2__marker {
	inline-size: 64px;
	block-size: 64px;
	border-width: 1.5px;
}
.bp-ctn2__step--2 .bp-ctn2__marker {
	inline-size: 72px;
	block-size: 72px;
	border-width: 2px;
}
.bp-ctn2__step--3 .bp-ctn2__marker {
	inline-size: 82px;
	block-size: 82px;
	border-width: 2.5px;
	background: var(--bp-ctn2-green-2);
	color: #fff;
	box-shadow: 0 10px 24px rgba(31, 42, 31, 0.16);
}
.bp-ctn2__marker-num {
	font-size: 24px;
	line-height: 1;
	letter-spacing: 0.04em;
}
.bp-ctn2__step--1 .bp-ctn2__marker-num { font-size: 22px; }
.bp-ctn2__step--2 .bp-ctn2__marker-num { font-size: 26px; }
.bp-ctn2__step--3 .bp-ctn2__marker-num { font-size: 30px; }

/* Step body */
.bp-ctn2__step-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.bp-ctn2__step-label {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bp-ctn2-green-2);
}
.bp-ctn2__step-text {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--bp-ctn2-ink-soft);
	max-inline-size: 360px;
}

/* ----- Responsive: Tablet (769-1024) ----- */
@media ( min-width: 769px ) and ( max-width: 1024px ) {
	.bp-ctn2__title    { font-size: 42px; }
	.bp-ctn2__intro     { font-size: 16px; }
	.bp-ctn2__header    { margin-block-end: 44px; gap: 32px; }
	.bp-ctn2.has-image .bp-ctn2__header { grid-template-columns: minmax(0, 1fr) clamp(180px, 32%, 280px); gap: 32px; }

	.bp-ctn2__rail      { gap: 18px; }
	.bp-ctn2__line      { inset-inline: 8% 8%; }
	.bp-ctn2__step--1 .bp-ctn2__marker { inline-size: 56px; block-size: 56px; }
	.bp-ctn2__step--2 .bp-ctn2__marker { inline-size: 62px; block-size: 62px; }
	.bp-ctn2__step--3 .bp-ctn2__marker { inline-size: 70px; block-size: 70px; }
	.bp-ctn2__step-text { font-size: 14px; max-inline-size: 100%; }
}

/* ----- Responsive: Mobile (<= 768) -----
 * Stack vertically with a vertical progression line on
 * the left. The optional image moves below the header text
 * at a constrained width. */
@media ( max-width: 768px ) {
	.bp-ctn2__header {
		grid-template-columns: minmax(0, 1fr);
		margin-block-end: 40px;
		gap: 24px;
	}
	.bp-ctn2.has-image .bp-ctn2__header { gap: 24px; }
	.bp-ctn2__title  { font-size: 32px; }
	.bp-ctn2__intro   { font-size: 15.5px; }

	.bp-ctn2__figure {
		inline-size: 100%;
		max-inline-size: 360px;
		aspect-ratio: 16 / 10;
	}

	.bp-ctn2__rail {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		padding-inline-start: 28px;
	}
	.bp-ctn2__line {
		inset-inline: auto;
		inset-inline-start: 27px;
		inset-block-start: 32px;
		inline-size: 2px;
		block-size: auto;
		bottom: 32px;
		background: linear-gradient(
			to bottom,
			rgba(184, 178, 90, 0.45) 0%,
			rgba(184, 178, 90, 1.00) 100%
		);
	}
	.bp-ctn2__step {
		flex-direction: row;
		gap: 18px;
		align-items: flex-start;
	}
	.bp-ctn2__step--1 .bp-ctn2__marker,
	.bp-ctn2__step--2 .bp-ctn2__marker,
	.bp-ctn2__step--3 .bp-ctn2__marker {
		inline-size: 54px;
		block-size: 54px;
		flex: 0 0 auto;
		border-width: 1.5px;
		background: #fff;
		color: var(--bp-ctn2-green-2);
		box-shadow: 0 4px 12px rgba(31, 42, 31, 0.08);
	}
	.bp-ctn2__step--1 .bp-ctn2__marker-num,
	.bp-ctn2__step--2 .bp-ctn2__marker-num,
	.bp-ctn2__step--3 .bp-ctn2__marker-num { font-size: 20px; }
	.bp-ctn2__step-body { padding-block-start: 8px; }
	.bp-ctn2__step-text { font-size: 14px; max-inline-size: 100%; }
}

/* ----- ≤ 480 ----- */
@media ( max-width: 480px ) {
	.bp-ctn2__inner     { padding-inline: 20px; }
	.bp-ctn2__title     { font-size: 28px; }
	.bp-ctn2__rail      { padding-inline-start: 22px; }
	.bp-ctn2__line      { inset-inline-start: 21px; }
	.bp-ctn2__step--1 .bp-ctn2__marker,
	.bp-ctn2__step--2 .bp-ctn2__marker,
	.bp-ctn2__step--3 .bp-ctn2__marker {
		inline-size: 50px;
		block-size: 50px;
	}
	.bp-ctn2__step--1 .bp-ctn2__marker-num,
	.bp-ctn2__step--2 .bp-ctn2__marker-num,
	.bp-ctn2__step--3 .bp-ctn2__marker-num { font-size: 18px; }
	.bp-ctn2__step-label { font-size: 11.5px; }
}

/* ----- ≤ 360 ----- */
@media ( max-width: 360px ) {
	.bp-ctn2__inner { padding-inline: 16px; }
	.bp-ctn2__title { font-size: 24px; }
}

/* ----- Arabic / RTL ----- */
[lang="ar"] .bp-ctn2__title,
[dir="rtl"] .bp-ctn2__title {
	font-family: var(--bp-font-arabic, 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
}
[dir="rtl"] .bp-ctn2__header { direction: rtl; }
[dir="rtl"] .bp-ctn2__line {
	background: linear-gradient(
		to left,
		rgba(184, 178, 90, 0.35) 0%,
		rgba(184, 178, 90, 0.85) 45%,
		rgba(184, 178, 90, 1.00) 100%
	);
}

/* ----- Reduced motion ----- */
@media ( prefers-reduced-motion: reduce ) {
	.bp-ctn2__marker { transition: none !important; }
	.bp-ctn2 [data-bp-stagger] { animation: none !important; }
}