/* BP Cultures & Applications widget styles
 *
 * Cream section, centered uppercase heading, then a 3-column
 * grid of editorial culture cards. Each card: image (220–250px,
 * object-fit cover), large mixed-case title, short excerpt,
 * subtle arrow CTA. All rules stay under
 * .bp-cultures-applications. Logical properties keep LTR/RTL
 * aligned.
 */

.bp-cultures-applications {
	--bp-ca-bg:           #F8F4ED;
	--bp-ca-fg:           #374F37;
	--bp-ca-muted:        #5C6A5C;
	--bp-ca-card-bg:      #FFFFFF;
	--bp-ca-card-border:  #E4DCCB;
	--bp-ca-radius:       14px;
	--bp-ca-gap:          26px;
	--bp-ca-image-h:      230px;
	--bp-ca-pad-block:    72px;
	--bp-ca-pad-inline:   24px;
	--bp-ca-inner-max:    1140px;
	--bp-ca-font:         var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	--bp-ca-display:      var(--bp-font-display, 'DM Serif Display', Georgia, serif);

	background-color: var(--bp-ca-bg);
	color: var(--bp-ca-fg);
	font-family: var(--bp-ca-font);
	padding-block: var(--bp-ca-pad-block);
	padding-inline: var(--bp-ca-pad-inline);
}

.bp-cultures-applications__inner {
	max-inline-size: var(--bp-ca-inner-max);
	margin-inline: auto;
}

.bp-cultures-applications__head {
	text-align: center;
	margin-block-end: 28px;
}

.bp-cultures-applications__eyebrow {
	margin: 0 0 10px;
	font-family: var(--bp-ca-font);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bp-ca-fg);
}

.bp-cultures-applications__title {
	margin: 0 0 18px;
	padding-block-end: 0;
	font-family: var(--bp-ca-display);
	font-weight: 400;
	font-size: clamp(28px, 3.6vw, 44px);
	line-height: 1.15;
	letter-spacing: 0.01em;
	color: var(--bp-ca-fg);
	text-transform: uppercase;
}

/* ---- Cards grid ----
 * 3 columns on desktop. With 5 items, the 4th and 5th cards
 * naturally fall into cols 1 and 2 of row 2, leaving col 3
 * empty — the visual result is a centered pair, exactly as
 * the spec requires, without per-item width hacks. */
.bp-cultures-applications__cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--bp-ca-gap);
	row-gap: var(--bp-ca-gap);
	align-items: stretch;
}

.bp-cultures-applications__card {
	display: flex;
	flex-direction: column;
	background-color: var(--bp-ca-card-bg);
	border: 1px solid var(--bp-ca-card-border);
	border-radius: var(--bp-ca-radius);
	overflow: hidden;
	min-inline-size: 0;
	box-shadow: 0 4px 14px rgba(31, 42, 31, 0.06);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

a.bp-cultures-applications__card-link:hover,
a.bp-cultures-applications__card-link:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(31, 42, 31, 0.14);
}

.bp-cultures-applications__image {
	block-size: var(--bp-ca-image-h);
	inline-size: 100%;
	overflow: hidden;
	position: relative;
}

.bp-cultures-applications__image img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center;
	pointer-events: none;
}

.bp-cultures-applications__card-link {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	inline-size: 100%;
	block-size: 100%;
	text-decoration: none;
	color: inherit;
}

.bp-cultures-applications__card-link:focus-visible {
	outline: 2px solid var(--bp-ca-fg, #374F37);
	outline-offset: 2px;
}

.bp-cultures-applications__card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	align-items: flex-start;
	text-align: start;
	padding-block: 22px;
	padding-inline: 22px;
	gap: 10px;
}

.bp-cultures-applications__card-title {
	margin: 0;
	font-family: var(--bp-ca-display);
	font-weight: 400;
	font-size: clamp(20px, 1.6vw, 24px);
	line-height: 1.22;
	letter-spacing: 0.005em;
	color: var(--bp-ca-fg);
	text-transform: none;
}

.bp-cultures-applications__card-desc {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--bp-ca-muted);
	/* Clamp to 3 lines so one longer excerpt cannot stretch
	 * the whole row and break equal-height alignment. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bp-cultures-applications__card-cta {
	margin-block-start: auto;
	padding-block-start: 8px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--bp-ca-font);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bp-ca-fg);
}

.bp-cultures-applications__card-arrow {
	display: inline-block;
	transition: transform 0.25s ease;
}

a.bp-cultures-applications__card-link:hover .bp-cultures-applications__card-arrow,
a.bp-cultures-applications__card-link:focus-visible .bp-cultures-applications__card-arrow {
	transform: translateX(4px);
}

/* ---- Tablet ---- */
@media (max-width: 1024px) {
	.bp-cultures-applications {
		--bp-ca-pad-block:  56px;
		--bp-ca-gap:        20px;
		--bp-ca-image-h:    200px;
	}
	.bp-cultures-applications__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.bp-cultures-applications__card-title {
		font-size: 21px;
	}
}

@media (max-width: 860px) {
	.bp-cultures-applications__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---- Mobile ---- */
@media (max-width: 560px) {
	.bp-cultures-applications {
		--bp-ca-pad-block: 48px;
		--bp-ca-gap:       16px;
		--bp-ca-image-h:   200px;
	}
	.bp-cultures-applications__cards {
		grid-template-columns: minmax(0, 1fr);
	}
	.bp-cultures-applications__card {
		max-inline-size: 420px;
		margin-inline: auto;
		inline-size: 100%;
	}
	.bp-cultures-applications__card-body {
		padding: 20px;
	}
	.bp-cultures-applications__card-title {
		font-size: 22px;
	}
}

/* ---- Smooth anchor scroll for in-page jumps from the 8 top cards ----
 * Elementor attaches the page id to <body> as `elementor-page-XX`,
 * not to a `.elementor-21` wrapper, so scope MUST be on body. */
body.elementor-page-21 {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	body.elementor-page-21 {
		scroll-behavior: auto;
	}
}

/* =========================================================
 * MICRO PATCH 0.1.339 — /cultures-applications/ ID21
 *
 * The page-scoped CTA + card-padding + arboriculture-title
 * overrides from 0.1.338 have been MOVED into their own
 * component stylesheets (class-doubled selectors there). This
 * file keeps ONLY the page-scope smooth-scroll behavior so the
 * 8 top cards still jump smoothly to their anchors.
 * ========================================================= */

/* =========================================================
 * MICRO PATCH 0.1.341 — /cultures-applications/ ID21
 *
 * ROOT CAUSE OF 0.1.340 FAILURES:
 * Elementor widget controls compile to selectors of the form
 * `.elementor-widget.elementor-widget-{name} .bp-X` (specificity
 * 0,3,0) and load AFTER the main stylesheets. Class-doubled
 * patches like `.bp-X.bp-X` (0,2,0) and the original component
 * rules (0,1,0) LOSE to the elementor inline CSS.
 *
 * FIX: scope every override to
 *   `body.elementor-page-21 .elementor-widget.elementor-widget-{name} .target`
 * so the selector hits (0,5,0) and outranks every elementor
 * inline rule. `!important` is used ONLY on the properties that
 * elementor's Controls Manager actually emits (color, padding,
 * border-radius, font-size, font-weight, letter-spacing,
 * text-transform, background-color, border-color, box-shadow,
 * min-block-size). Other properties that elementor doesn't
 * touch (text-align, margin-inline, max-inline-size, display)
 * are set WITHOUT !important because the new selector itself
 * wins on specificity.
 *
 * Targets:
 *   .bp-dsp__title                          (center)
 *   .bp-ca__title                           (center + cap)
 *   .bp-ct__cta-link                        (primary CTA)
 *   .bp-cult-cta__btn--primary              (primary CTA)
 *   .bp-cult-cta__btn--whatsapp             (whatsapp CTA)
 *   .bp-dsp__cta-btn--secondary             (whatsapp CTA)
 *   .bp-ca__strip-cta                       (header CTA size)
 * ========================================================= */
body.elementor-page-21 .elementor-widget.elementor-widget-bp-du-semis-production .bp-dsp__title {
	text-align: center !important;
	margin-inline: auto !important;
	display: block !important;
	max-inline-size: 720px !important;
	width: 100% !important;
}

body.elementor-page-21 .elementor-widget.elementor-widget-bp-cultures-arboriculture .bp-ca__title {
	text-align: center !important;
	margin-inline: auto !important;
	max-inline-size: 640px;
}

body.elementor-page-21 .elementor-widget.elementor-widget-bp-cultiver-tunisie .bp-ct__cta-link.bp-ct__cta-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-block-size: 48px;
	padding-block: 12px;
	padding-inline: 26px;
	border: 1px solid transparent;
	border-radius: 999px;
	background-color: #374F37;
	color: #FFFFFF !important;
	font-family: var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	font-weight: 700 !important;
	font-size: 13px !important;
	line-height: 1;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
body.elementor-page-21 .elementor-widget.elementor-widget-bp-cultiver-tunisie .bp-ct__cta-link.bp-ct__cta-link:hover,
body.elementor-page-21 .elementor-widget.elementor-widget-bp-cultiver-tunisie .bp-ct__cta-link.bp-ct__cta-link:focus-visible {
	background-color: #2E422E;
	border-color: #2E422E;
	color: #FFFFFF !important;
	transform: translateY(-1px);
}

body.elementor-page-21 .elementor-widget.elementor-widget-bp-cultures-final-cta .bp-cult-cta__btn--primary.bp-cult-cta__btn--primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-block-size: 48px;
	padding-block: 12px;
	padding-inline: 26px;
	border: 1px solid transparent;
	border-radius: 999px;
	background-color: #374F37 !important;
	color: #FFFFFF !important;
	font-family: var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	font-weight: 700 !important;
	font-size: 13px !important;
	line-height: 1;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
body.elementor-page-21 .elementor-widget.elementor-widget-bp-cultures-final-cta .bp-cult-cta__btn--primary.bp-cult-cta__btn--primary:hover,
body.elementor-page-21 .elementor-widget.elementor-widget-bp-cultures-final-cta .bp-cult-cta__btn--primary.bp-cult-cta__btn--primary:focus-visible {
	background-color: #2E422E;
	border-color: #2E422E;
	color: #FFFFFF !important;
	transform: translateY(-1px);
}
/* The dark-green circular arrow badge on the primary CTA clashes
 * with the new dark-green button fill; hide it so the button
 * reads as a single flat pill, exactly like .bp-final-cta__btn. */
body.elementor-page-21 .elementor-widget.elementor-widget-bp-cultures-final-cta .bp-cult-cta__btn--primary .bp-cult-cta__btn-arrow {
	display: none;
}

body.elementor-page-21 .elementor-widget.elementor-widget-bp-cultures-final-cta .bp-cult-cta__btn--whatsapp.bp-cult-cta__btn--whatsapp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-block-size: 48px;
	padding-block: 12px;
	padding-inline: 26px;
	border: 1px solid transparent;
	border-radius: 999px;
	background-color: #25D366 !important;
	color: #FFFFFF !important;
	border-color: transparent !important;
	box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
	font-family: var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	font-weight: 700;
	font-size: 13px;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
body.elementor-page-21 .elementor-widget.elementor-widget-bp-cultures-final-cta .bp-cult-cta__btn--whatsapp.bp-cult-cta__btn--whatsapp:hover,
body.elementor-page-21 .elementor-widget.elementor-widget-bp-cultures-final-cta .bp-cult-cta__btn--whatsapp.bp-cult-cta__btn--whatsapp:focus-visible {
	background-color: #1DA851;
	border-color: transparent;
	color: #FFFFFF;
	box-shadow: 0 6px 18px rgba(29, 168, 81, 0.45);
	transform: translateY(-1px);
}
body.elementor-page-21 .elementor-widget.elementor-widget-bp-cultures-final-cta .bp-cult-cta__btn--whatsapp .bp-cult-cta__btn-arrow {
	display: none;
}

body.elementor-page-21 .elementor-widget.elementor-widget-bp-du-semis-production .bp-dsp__cta-btn--secondary.bp-dsp__cta-btn--secondary {
	background-color: #25D366 !important;
	color: #FFFFFF !important;
	border-color: transparent !important;
	box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
}
body.elementor-page-21 .elementor-widget.elementor-widget-bp-du-semis-production .bp-dsp__cta-btn--secondary.bp-dsp__cta-btn--secondary:hover,
body.elementor-page-21 .elementor-widget.elementor-widget-bp-du-semis-production .bp-dsp__cta-btn--secondary.bp-dsp__cta-btn--secondary:focus-visible {
	background-color: #1DA851;
	border-color: transparent;
	color: #FFFFFF;
	box-shadow: 0 6px 18px rgba(29, 168, 81, 0.45);
	transform: translateY(-1px);
}

body.elementor-page-21 .elementor-widget.elementor-widget-bp-cultures-arboriculture .bp-ca__strip-cta.bp-ca__strip-cta {
	display: inline-flex;
	grid-template-columns: none;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-block-size: 44px;
	padding-block: 11px;
	padding-inline: 22px;
	border: 0;
	border-radius: 999px;
	background-color: #374F37;
	color: #FFFFFF;
	font-family: var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
body.elementor-page-21 .elementor-widget.elementor-widget-bp-cultures-arboriculture .bp-ca__strip-cta.bp-ca__strip-cta:hover,
body.elementor-page-21 .elementor-widget.elementor-widget-bp-cultures-arboriculture .bp-ca__strip-cta.bp-ca__strip-cta:focus-visible {
	background-color: #2E422E;
	color: #FFFFFF;
	transform: translateY(-1px);
}

/* =========================================================
 * MICRO PATCH 0.1.343 — Page 21 final component fixes
 *
 * Fixes 4, 5, 7, 8 (PHP-level fixes 9–12 already shipped in
 * widget controls). All selectors use exact widget wrapper
 * (`body.elementor-page-21 .elementor-widget.elementor-widget-bp-X`)
 * which beats the {{WRAPPER}}-emitted rules from Elementor.
 * ========================================================= */

/* (4) Arboriculture card title — kill all margin */
body.elementor-page-21 .elementor-widget.elementor-widget-bp-cultures-arboriculture .bp-ca__title {
	margin: 0 !important;
}

/* (5) Arboriculture strip — re-layout so the button sits
 * DIRECTLY UNDER the strip title (not beside it). Hide the
 * decorative separator and the center paragraph row, and let
 * the title row span the full width. The CTA stays in row 2
 * as a single full-width pill, no extra space. */
body.elementor-page-21 .elementor-widget.elementor-widget-bp-cultures-arboriculture .bp-ca__strip {
	grid-template-columns: 1fr !important;
	grid-template-rows: auto auto !important;
	row-gap: 16px !important;
}
body.elementor-page-21 .elementor-widget.elementor-widget-bp-cultures-arboriculture .bp-ca__strip > .bp-ca__strip-sep {
	display: none !important;
}
body.elementor-page-21 .elementor-widget.elementor-widget-bp-cultures-arboriculture .bp-ca__strip-left {
	grid-column: 1 !important;
	grid-row: 1 !important;
}
body.elementor-page-21 .elementor-widget.elementor-widget-bp-cultures-arboriculture .bp-ca__strip-center {
	display: none !important;
}
body.elementor-page-21 .elementor-widget.elementor-widget-bp-cultures-arboriculture .bp-ca__strip-cta {
	grid-column: 1 !important;
	grid-row: 2 !important;
	justify-self: start !important;
}
/* Reduce strip-title just enough so title + button fit cleanly */
body.elementor-page-21 .elementor-widget.elementor-widget-bp-cultures-arboriculture .bp-ca__strip-title {
	font-size: 18px !important;
	line-height: 1.3 !important;
}

/* (7) Maraîchères eyebrow line — remove at the CSS level.
 * Markup cannot be removed without Elementor JSON rewrite, so
 * hide the dedicated line element on this page. */
body.elementor-page-21 .elementor-widget.elementor-widget-bp-cultures-maraicheres .bp-cm__eyebrow-line {
	display: none !important;
}

/* (8) Maraîchères title — copy EXACT styling from .bp-mc__title:
 * color #374F37, display serif, weight 400, 48px, lh 1.1,
 * tracking -0.01em, centered. */
body.elementor-page-21 .elementor-widget.elementor-widget-bp-cultures-maraicheres .bp-cm__title {
	margin: 0 0 18px 0 !important;
	color: var(--bp-mc-green, #374F37) !important;
	font-family: var(--bp-mc-font-display, 'DM Serif Display', Georgia, serif) !important;
	font-weight: 400 !important;
	font-size: 48px !important;
	line-height: 1.1 !important;
	letter-spacing: -0.01em !important;
	text-align: center !important;
}

/* (9) Section spacing — uniform 100px gap between every top-level
 * Elementor container on page 21. Each section gets 50px block
 * padding (top + bottom) so adjacent content sits 100px apart.
 * Hero keeps its 88px internal top padding (header→hero stays
 * tight). CTA gets 100px block-end padding so CTA→footer = 100px.
 */
body.elementor-page-21 .elementor-21 > .e-con {
	padding-block: 50px;
}
body.elementor-page-21 .elementor-21 > .e-con:first-of-type {
	padding-block-start: 0;
}
body.elementor-page-21 .elementor-21 > .e-con:last-of-type {
	padding-block-end: 100px;
}