/* Integrations — dark navy card + OEM logo overlay image + deco layers. */

.rw-block-integrations {
	/* Match two-modes section bg for visual continuity. */
	background: #E8E8E9;
}

.rw-block-integrations .card {
	position: relative;
	background: var(--rw-color-primary-blue);
	color: var(--rw-color-white);
	border-radius: var(--rw-radius-lg);
	padding: 4.375rem 3rem;
	overflow: hidden;
	isolation: isolate;
	min-height: 23.75rem;
}

/* Deco layers — behind content, aria-hidden in markup. */
.rw-block-integrations .deco-rect {
	position: absolute;
	inset: 0 auto 0 0;
	width: min(70.625rem, 78%);
	/* Figma 693:7466 — #0B1B4A, one unit above card bg; gives subtle panel behind intro. */
	background: #0B1B4A;
	z-index: 0;
	pointer-events: none;
}

/* Figma 693:7467 — soft radial sheen exported as PNG and placed absolute right. */
.rw-block-integrations .deco-ellipse {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	max-width: 55%;
	height: 100%;
	width: auto;
	object-fit: fill;
	object-position: right center;
	z-index: 0;
	pointer-events: none;
	user-select: none;
}

/* Intro + CTA sit above deco. */
.rw-block-integrations .intro {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 40.375rem;
}
.rw-block-integrations .intro .rw-cta-stack { align-items: center; }
.rw-block-integrations .intro .rw-microcopy { font-size: 12px; }

/* Figma 693:7468-7476 spacing:
   - eyebrow → text-block = 40px
   - H2 → desc = 24px
   - heading-group → CTA = 32px */
.rw-block-integrations .heading-group {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	margin-bottom: var(--rw-space-lg);
}

.rw-block-integrations .text-block {
	display: flex;
	flex-direction: column;
	gap: var(--rw-space-md);
}

.rw-block-integrations h2 {
	font-family: var(--rw-font-text);
	font-weight: 700;
	font-size: var(--rw-h3-size);
	line-height: var(--rw-h3-line);
	letter-spacing: var(--rw-h3-tracking);
	color: var(--rw-color-white);
	margin: 0;
}

/* On-dark eyebrow — white text, mark stays yellow (inherited from global). */
.rw-block-integrations .rw-eyebrow--on-dark {
	color: var(--rw-color-white);
}

.rw-block-integrations .desc {
	font-family: var(--rw-font-text);
	font-size: var(--rw-p1-size);
	line-height: var(--rw-p1-line);
	letter-spacing: var(--rw-p1-tracking);
	opacity: 0.8;
	margin: 0;
}

.rw-block-integrations .cta {
	align-self: flex-start;
}

/* Logo composition — absolute right, full card height. Image exported from
   Figma 693:7477 contains all tiles pre-composited. */
.rw-block-integrations .logos-overlay {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	height: 100%;
	width: auto;
	max-width: 55%;
	object-fit: contain;
	object-position: right center;
	z-index: 1;
	pointer-events: none;
	user-select: none;
}

@media (max-width: 767px) {
	.rw-block-integrations h2 { letter-spacing: -0.026rem; }
	.rw-block-integrations .card {
		padding: 2rem 1.5rem;
	}
	.rw-block-integrations--cta .card {
		padding: 1.5rem;
	}
	.rw-block-integrations .heading-group {
		gap: var(--rw-space-sm);
		margin-bottom: var(--rw-space-md);
	}
	.rw-block-integrations .text-block {
		gap: var(--rw-space-sm);
	}
	.rw-block-integrations .logos-overlay {
		position: static;
		display: block;
		height: auto;
		max-width: 100%;
		margin-top: var(--rw-space-lg);
		opacity: 1;
	}
	.rw-block-integrations .deco-rect { width: 100%; }
	/* Mobile deco-ellipse: bottom-anchored full-width per design spec. */
	.rw-block-integrations .deco-ellipse {
		top: unset;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: auto;
		max-width: none;
		object-fit: cover;
		object-position: center bottom;
	}

	/* === Default variant (mobile) === */
	.rw-block-integrations:not(.rw-block-integrations--cta) .logos-overlay {
		position: relative;
	}
	.rw-block-integrations:not(.rw-block-integrations--cta) .card {
		padding-bottom: 0;
	}

	/* === CTA variant (mobile) ===
	   Intro narrowed; deco-ellipse top-anchored; logos absolute right column. */
	.rw-block-integrations--cta .card {
		min-height: 0;
	}
	.rw-block-integrations--cta .intro {
		max-width: 12.5rem;
		align-items: flex-start;
	}
	.rw-block-integrations--cta .intro .rw-cta-stack { align-items: center; }
	.rw-block-integrations--cta .deco-ellipse {
		top: 0;
		left: 0;
		right: 0;
		bottom: unset;
	}
	.rw-block-integrations--cta .logos-overlay {
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		margin-top: 0;
		object-fit: cover;
	}
}

/* === Modifiers === */
.rw-block-integrations--bg-light { background: #F4F4F4; }

/* CTA stack uses global .rw-cta-stack + .rw-microcopy utilities.
   Keep above-deco z-index so the stack sits over the deco-rect/ellipse. */
.rw-block-integrations .rw-cta-stack {
	position: relative;
	z-index: 2;
}

/* Text-link CTA variant — Figma 1009:11310. */
.rw-block-integrations .cta-link {
	position: relative;
	z-index: 2;
	align-self: flex-start;
	font-family: var(--rw-font-text);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--rw-color-primary-yellow);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
.rw-block-integrations .cta-link:hover {
	color: var(--rw-color-primary-yellow-hover);
	opacity: 1;
}