/* BP Cultures Selection widget styles
 *
 * Cultures page "Que cultivez-vous?" section.
 *
 * Layout:
 *   - 1140px centered inner container
 *   - centered header: eyebrow (olive lines) + large serif title + 2-line description
 *   - 4×2 grid of 8 equal cards (desktop)
 *   - each card: photo bg + gradient overlay, white number badge top-left,
 *     dark-green icon badge lower-left, white serif title, white subtitle,
 *     white circular arrow button bottom-right
 *   - bottom olive/gold botanical divider (2 lines + centered mark)
 *
 * Responsive grid:
 *   Desktop  (>1024px): 4 columns × 2 rows
 *   Tablet   (768–1024): 2 columns × 4 rows
 *   Mobile   (<768px):   1 column × 8 rows
 *
 * Approved palette ONLY:
 *   #374F37  deep green
 *   #EDDBC3  cream
 *   #B8B25A  olive / gold
 *   #FFFFFF  white
 *   + existing neutrals (#1F2A1F)
 *
 * Every rule scoped under .bp-cultures-selection.
 * Logical CSS properties for LTR/RTL parity.
 */

.bp-cultures-selection {
	--bp-cs-green:          #374F37;
	--bp-cs-olive:          #B8B25A;
	--bp-cs-cream:          #FBF6EC;
	--bp-cs-white:          #FFFFFF;
	--bp-cs-text:           #1F2A1F;

	--bp-cs-inner-max:      1140px;
	--bp-cs-grid-gap:       18px;

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

	--bp-cs-overlay-color:    #374F37;
	--bp-cs-overlay-top:      0;
	--bp-cs-overlay-bottom:   0.88;

	/* Edge botanical defaults (overridden per-instance via Elementor). */
	--bp-cs-ld_left-w:        320px;
	--bp-cs-ld_left-x:        0px;
	--bp-cs-ld_left-y:        40px;
	--bp-cs-ld_left-rotate:   0deg;
	--bp-cs-ld_left-opacity:  55%;

	--bp-cs-ld_right-w:        320px;
	--bp-cs-ld_right-x:        0px;
	--bp-cs-ld_right-y:        40px;
	--bp-cs-ld_right-rotate:   0deg;
	--bp-cs-ld_right-opacity:  55%;

	/* Full-viewport bleed so edge botanicals sit on the
	 * actual page edges, not the boxed 1140px section. */
	position: relative;
	isolation: isolate;
	overflow-x: clip;
	overflow-y: visible;
	box-sizing: border-box;
	inline-size: 100vw;
	max-inline-size: 100vw;
	margin-inline: calc(50% - 50vw);
	padding-block: 80px 64px;
	padding-inline: 0;
	background: transparent;
	color: var(--bp-cs-text);
	font-family: var(--bp-cs-font-body);
}

.bp-cultures-selection *,
.bp-cultures-selection *::before,
.bp-cultures-selection *::after {
	box-sizing: border-box;
}

/* ---- INNER ---- */
.bp-cultures-selection .bp-cs__inner {
	/* z-index is set on the .bp-cs__inner rule in the
	 * EDGE BOTANICAL DECORATIONS block above (z-index: 1) so
	 * the content always sits above the absolute botanicals.
	 * Keep this rule for layout (max-width, centering, padding). */
	inline-size: 100%;
	max-inline-size: var(--bp-cs-inner-max);
	margin-inline: auto;
	padding-inline: clamp(16px, 3vw, 24px);
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* =========================================================
 * HEADER
 * ========================================================= */
.bp-cultures-selection .bp-cs__header {
	inline-size: 100%;
	margin-inline: auto;
	margin-block-end: 56px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}

.bp-cultures-selection .bp-cs__eyebrow {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 16px;
	color: var(--bp-cs-olive);
	font-family: var(--bp-cs-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.bp-cultures-selection .bp-cs__eyebrow-line {
	display: inline-block;
	inline-size: 40px;
	block-size: 1px;
	background: var(--bp-cs-olive);
	opacity: 0.9;
}

.bp-cultures-selection .bp-cs__eyebrow-text {
	position: relative;
}

.bp-cultures-selection .bp-cs__title {
	margin: 0;
	font-family: var(--bp-cs-font-display);
	font-weight: 400;
	font-size: 56px;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: #374F3C;
}

.bp-cultures-selection .bp-cs__description {
	margin: 0;
	max-inline-size: 720px;
	font-family: var(--bp-cs-font-body);
	font-size: 16px;
	line-height: 1.65;
	color: var(--bp-cs-text);
}

.bp-cultures-selection .bp-cs__description br {
	display: block;
	content: "";
	margin-block: 4px;
}

/* =========================================================
 * EDGE BOTANICAL DECORATIONS
 * Absolute children of `.bp-cultures-selection`. They sit
 * on the LEFT and RIGHT viewport edges, behind the content
 * (z-index below `.bp-cs__inner`). Each one reads its own
 * --bp-cs-ld_*-{w,x,y,rotate,opacity} CSS custom property
 * which is set per-breakpoint from the Elementor controls.
 * ========================================================= */
.bp-cultures-selection .bp-cs__landscape {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	inline-size: var(--bp-cs-w, var(--bp-cs-ld_left-w));
	block-size: auto;
	inset-block-start: var(--bp-cs-y, 40px);
	opacity: var(--bp-cs-o, 55%);
	transform: translate(
		var(--bp-cs-tx, 0px),
		0
	) rotate(var(--bp-cs-r, 0deg));
	transform-origin: center;
	will-change: transform;
}

.bp-cultures-selection .bp-cs__landscape--ld_left {
	--bp-cs-w:  var(--bp-cs-ld_left-w);
	--bp-cs-tx: var(--bp-cs-ld_left-x);
	--bp-cs-y:  var(--bp-cs-ld_left-y);
	--bp-cs-r:  var(--bp-cs-ld_left-rotate);
	--bp-cs-o:  var(--bp-cs-ld_left-opacity);
	left: 0;
	right: auto;
}

.bp-cultures-selection .bp-cs__landscape--ld_right {
	--bp-cs-w:  var(--bp-cs-ld_right-w);
	--bp-cs-tx: var(--bp-cs-ld_right-x);
	--bp-cs-y:  var(--bp-cs-ld_right-y);
	--bp-cs-r:  var(--bp-cs-ld_right-rotate);
	--bp-cs-o:  var(--bp-cs-ld_right-opacity);
	right: 0;
	left: auto;
}

.bp-cultures-selection .bp-cs__landscape img,
.bp-cultures-selection .bp-cs__landscape svg {
	display: block;
	inline-size: 100%;
	block-size: auto;
	color: inherit;
}

/* Lift the inner content above the botanicals. */
.bp-cultures-selection .bp-cs__inner {
	position: relative;
	z-index: 1;
}

/* =========================================================
 * GRID
 * ========================================================= */
.bp-cultures-selection .bp-cs__grid {
	inline-size: 100%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--bp-cs-grid-gap, 18px);
	align-items: stretch;
}

/* =========================================================
 * CARD (shared base)
 * ========================================================= */
.bp-cultures-selection .bp-cs__card {
	position: relative;
	isolation: isolate;
	aspect-ratio: 4 / 4.1;
	border-radius: 8px;
	overflow: hidden;
	background: var(--bp-cs-green);
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.bp-cultures-selection .bp-cs__card-link {
	position: absolute;
	inset: 0;
	display: block;
	z-index: 5;
	color: inherit;
	text-decoration: none;
}

/* ---- Background image ---- */
.bp-cultures-selection .bp-cs__card-bg {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
}

.bp-cultures-selection .bp-cs__card-bg img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	transform: scale(1.01);
}

.bp-cultures-selection .bp-cs__card-bg--empty {
	background: linear-gradient(135deg, #2a3d2a 0%, #374F37 100%);
}

/* ---- Gradient overlay ---- */
.bp-cultures-selection .bp-cs__card-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--bp-cs-overlay-color) calc(var(--bp-cs-overlay-top) * 100%) , transparent) 0%,
		color-mix(in srgb, var(--bp-cs-overlay-color) calc(((var(--bp-cs-overlay-top) + (var(--bp-cs-overlay-bottom) - var(--bp-cs-overlay-top)) * 0.19)) * 100%) , transparent) 38%,
		color-mix(in srgb, var(--bp-cs-overlay-color) calc(((var(--bp-cs-overlay-top) + (var(--bp-cs-overlay-bottom) - var(--bp-cs-overlay-top)) * 0.63)) * 100%) , transparent) 68%,
		color-mix(in srgb, var(--bp-cs-overlay-color) calc(var(--bp-cs-overlay-bottom) * 100%) , transparent) 100%
	);
	pointer-events: none;
}

/* ---- Inner padding container ---- */
/* Deterministic single-row grid that holds ONLY the footer
 * (`.bp-cs__card-lower`). The number badge is taken out of
 * flow and absolutely positioned to the top-right corner
 * (see `.bp-cs__card-number` below). The footer is anchored
 * to the bottom of this grid via `align-self: end`. */
.bp-cultures-selection .bp-cs__card-inner {
	position: relative;
	z-index: 3;
	inline-size: 100%;
	block-size: 100%;
	padding: 20px;
	display: grid;
	grid-template-rows: minmax(0, 1fr);
	min-inline-size: 0;
}

/* ---- Number badge (top-right white circle) ---- */
/* Absolutely positioned to the top-right corner of the card.
 * Removed from grid flow so it doesn't compete with the footer
 * for vertical space. Same `top` / `right` for every card. */
.bp-cultures-selection .bp-cs__card-number {
	position: absolute;
	inset-block-start: 20px;
	right: 20px;
	left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 36px;
	block-size: 36px;
	min-inline-size: 36px;
	min-block-size: 36px;
	aspect-ratio: 1 / 1;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--bp-cs-white);
	color: var(--bp-cs-green);
	font-family: var(--bp-cs-font-body);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: -0.01em;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	z-index: 4;
}

/* ---- Lower content area (the card footer) ---- */
/* Anchored to the BOTTOM of `.bp-cs__card-inner` row 2 via
 * `align-self: end` (the parent grid sets `grid-template-rows:
 * auto minmax(0,1fr)`, so this row's bottom edge is the
 * card-inner's bottom edge minus padding).
 *
 * Inside the footer: 2-column grid
 *   column 1 = text block (icon + title + subtitle) — minmax(0,1fr)
 *   column 2 = arrow button — auto, 44×44, hard-locked
 *
 * `align-items: end` keeps both columns anchored to the bottom
 * of the row. Long titles grow UPWARD inside the textcol;
 * the arrow's Y is determined solely by the row's bottom edge,
 * not by textcol height. */
.bp-cultures-selection .bp-cs__card-lower {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	align-self: end;
	inline-size: 100%;
	gap: 12px;
	min-inline-size: 0;
}

.bp-cultures-selection .bp-cs__card-textcol {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-inline-size: 0;
}

/* ---- Icon badge (top-left, dark-green circle) ---- */
/* Absolutely positioned to the TOP-LEFT corner of the card,
 * on the SAME horizontal CENTER line as the number badge.
 * The number is 36px tall at top: 20px → centerY = 38px.
 * The icon is 52px tall, so its top is offset to 12px so
 * its centerY (12 + 26) matches the number's centerY. */
.bp-cultures-selection .bp-cs__card-icon {
	position: absolute;
	inset-block-start: 12px;
	left: 20px;
	right: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 52px;
	block-size: 52px;
	min-inline-size: 52px;
	min-block-size: 52px;
	aspect-ratio: 1 / 1;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--bp-cs-green);
	color: var(--bp-cs-white);
	box-shadow: 0 2px 10px rgba(0,0,0,0.15);
	z-index: 4;
}

.bp-cultures-selection .bp-cs__card-icon i,
.bp-cultures-selection .bp-cs__card-icon svg {
	display: block;
	inline-size: 25px;
	block-size: 25px;
	color: inherit;
}

/* ---- Title ---- */
.bp-cultures-selection .bp-cs__card-title {
	margin: 0;
	font-family: var(--bp-cs-font-display);
	font-weight: 400;
	font-size: 24px;
	line-height: 1.1;
	letter-spacing: -0.005em;
	color: var(--bp-cs-white);
}

/* ---- Subtitle ---- */
.bp-cultures-selection .bp-cs__card-subtitle {
	margin: 0;
	font-family: var(--bp-cs-font-body);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.35;
	color: rgba(255,255,255,0.85);
}

/* ---- Arrow button (bottom-right white circle) ---- */
/* Hardened circle: width === height, min-width === width,
 * min-height === height, aspect-ratio 1/1, flex-shrink 0.
 * `align-self: end; justify-self: end` pins it to the bottom
 * of its grid cell, which is the bottom of `.bp-cs__card-lower`,
 * which is the bottom of `.bp-cs__card-inner`. So the arrow
 * bottom edge equals the card-inner bottom edge for every card. */
.bp-cultures-selection .bp-cs__card-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: end;
	justify-self: end;
	inline-size: 44px;
	block-size: 44px;
	min-inline-size: 44px;
	min-block-size: 44px;
	aspect-ratio: 1 / 1;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--bp-cs-white);
	color: var(--bp-cs-green);
	text-decoration: none;
	pointer-events: auto;
	cursor: pointer;
	box-shadow: 0 2px 12px rgba(0,0,0,0.12);
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
				background 0.3s ease,
				color 0.3s ease;
}

.bp-cultures-selection .bp-cs__card-arrow i,
.bp-cultures-selection .bp-cs__card-arrow svg {
	display: block;
	inline-size: 18px;
	block-size: 18px;
	color: inherit;
}

/* =========================================================
 * HOVER STATES
 * ========================================================= */
.bp-cultures-selection .bp-cs__card:hover {
	transform: translateY(-2px);
}

.bp-cultures-selection .bp-cs__card:hover .bp-cs__card-bg img {
	transform: scale(1.07);
}

.bp-cultures-selection .bp-cs__card:hover .bp-cs__card-arrow {
	transform: translateX(4px);
}

/* =========================================================
 * BOTTOM DIVIDER (olive/gold lines + botanical mark)
 * ========================================================= */
.bp-cultures-selection .bp-cs__divider {
	margin-block-start: 48px;
	inline-size: 100%;
	max-inline-size: var(--bp-cs-inner-max);
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: 16px;
	padding-inline: clamp(16px, 3vw, 24px);
}

.bp-cultures-selection .bp-cs__divider-line {
	flex: 1;
	block-size: 1px;
	background: var(--bp-cs-olive);
	opacity: 0.7;
}

.bp-cultures-selection .bp-cs__divider-mark {
	flex-shrink: 0;
	inline-size: 32px;
	block-size: 20px;
	color: var(--bp-cs-olive);
	display: block;
}

/* =========================================================
 * TABLET (768px–1024px) — 2 columns
 * ========================================================= */
@media (max-width: 1024px) and (min-width: 768px) {
	.bp-cultures-selection .bp-cs__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.bp-cultures-selection .bp-cs__title {
		font-size: 44px;
	}

	/* Botanicals: reduce size + opacity on tablet so they
	 * never crowd the 2-col grid. */
	.bp-cultures-selection .bp-cs__landscape {
		--bp-cs-w: 200px;
		--bp-cs-o: 35%;
	}
}

/* =========================================================
 * MOBILE (<768px) — 1 column
 * ========================================================= */
@media (max-width: 767px) {
	.bp-cultures-selection {
		padding-block: 56px 40px;
	}

	.bp-cultures-selection .bp-cs__header {
		margin-block-end: 40px;
		gap: 12px;
	}

	.bp-cultures-selection .bp-cs__eyebrow {
		font-size: 11px;
		gap: 10px;
	}

	.bp-cultures-selection .bp-cs__eyebrow-line {
		inline-size: 24px;
	}

	.bp-cultures-selection .bp-cs__title {
		font-size: 36px;
	}

	.bp-cultures-selection .bp-cs__description {
		font-size: 14.5px;
		line-height: 1.6;
	}

	.bp-cultures-selection .bp-cs__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.bp-cultures-selection .bp-cs__card {
		aspect-ratio: 16 / 10;
	}

	.bp-cultures-selection .bp-cs__card-inner {
		padding: 16px;
	}

	.bp-cultures-selection .bp-cs__card-number {
		inline-size: 32px;
		block-size: 32px;
		font-size: 13px;
		inset-block-start: 16px;
		inset-inline-end: 16px;
	}

	.bp-cultures-selection .bp-cs__card-icon {
		inline-size: 44px;
		block-size: 44px;
		inset-block-start: 10px;
		inset-inline-start: 16px;
	}

	.bp-cultures-selection .bp-cs__card-icon i,
	.bp-cultures-selection .bp-cs__card-icon svg {
		inline-size: 21px;
		block-size: 21px;
	}

	.bp-cultures-selection .bp-cs__card-title {
		font-size: 24px;
	}

	.bp-cultures-selection .bp-cs__card-subtitle {
		font-size: 13px;
	}

	.bp-cultures-selection .bp-cs__card-arrow {
		inline-size: 40px;
		block-size: 40px;
	}

	.bp-cultures-selection .bp-cs__card-arrow i,
	.bp-cultures-selection .bp-cs__card-arrow svg {
		inline-size: 16px;
		block-size: 16px;
	}

	.bp-cultures-selection .bp-cs__divider {
		margin-block-start: 36px;
		padding-inline: clamp(12px, 4vw, 20px);
		gap: 12px;
	}

	.bp-cultures-selection .bp-cs__divider-mark {
		inline-size: 26px;
		block-size: 16px;
	}

	/* Botanicals: hide entirely on mobile to keep the
	 * single-column cards clean and avoid edge clutter. */
	.bp-cultures-selection .bp-cs__landscape {
		display: none;
	}
}

/* =========================================================
 * PAGINATION
 * Numbered list rendered under the grid when
 * `?culture_page=N` is in effect. Reuses the existing site
 * palette (#374F37 deep green, #FBF6EC cream, #B8B25A olive)
 * and the same radii/padding rhythm as the cards. No new
 * visual language.
 * ========================================================= */
.bp-cultures-selection .bp-cs__pagination {
	margin-block-start: 40px;
	display: flex;
	justify-content: center;
}

.bp-cultures-selection .bp-cs__pagination-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.bp-cultures-selection .bp-cs__pagination-item {
	display: inline-flex;
}

.bp-cultures-selection .bp-cs__page {
	inline-size: 42px;
	block-size: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--bp-cs-font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--bp-cs-text);
	background: var(--bp-cs-cream);
	border: 1px solid rgba(31, 42, 31, 0.12);
	border-radius: 10px;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.bp-cultures-selection a.bp-cs__page:hover {
	border-color: var(--bp-cs-green);
	color: var(--bp-cs-green);
	transform: translateY(-1px);
}

.bp-cultures-selection .bp-cs__page--active {
	background: var(--bp-cs-green);
	color: var(--bp-cs-white);
	border-color: var(--bp-cs-green);
}

.bp-cultures-selection .bp-cs__page--arrow {
	font-size: 16px;
}

.bp-cultures-selection .bp-cs__page--disabled {
	opacity: 0.4;
	pointer-events: none;
}

.bp-cultures-selection .bp-cs__page--gap {
	background: transparent;
	border-color: transparent;
	pointer-events: none;
	inline-size: 24px;
}

.bp-cultures-selection .bp-cs__empty {
	margin-block-start: 24px;
	text-align: center;
	color: var(--bp-cs-text);
	font-family: var(--bp-cs-font-body);
	font-size: 15px;
	opacity: 0.85;
}

@media (max-width: 480px) {
	.bp-cultures-selection .bp-cs__pagination {
		margin-block-start: 32px;
	}
	.bp-cultures-selection .bp-cs__page {
		inline-size: 38px;
		block-size: 38px;
		font-size: 13px;
		border-radius: 8px;
	}
}

/* =========================================================
 * PAGE-21 DESKTOP CARD HEIGHT OVERRIDE
 *
 * The Elementor-saved `card_aspect` value on page 21 is
 * `4 / 3.2`, which is too shallow for long dynamic culture
 * titles. The saved value lives inside `_elementor_data`
 * and must not be rewritten here, so this stylesheet adds a
 * single, narrowly-scoped final rule that bumps the desktop
 * aspect ratio to `4 / 4.2` without touching the
 * border-radius or any other card style. Tablet/mobile rules
 * are intentionally left to the existing `card_aspect`
 * responsive variants.
 * ========================================================= */
.elementor-21 .bp-cultures-selection .bp-cs__card {
	aspect-ratio: 4 / 4.5 !important;
}