/* Two Modes — centered intro + feature cards with checklist + outlined CTA. */

.rw-block-two-modes {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: #E8E8E9;
}
/* Per-usage background variants. */
.rw-block-two-modes[data-bg-color="f2f2f2"] { background: #F2F2F2; }
.rw-block-two-modes[data-bg-color="white"]  { background: var(--rw-color-white); }
.rw-block-two-modes .rw-container { position: relative; z-index: 2; }

/* Decorative dots — base styles from global .bg-dots. Position per data-attr. */
.rw-block-two-modes[data-bg-dots-position="top-left"]     .bg-dots { left: -7%; top: -12%; z-index: 1; }
.rw-block-two-modes[data-bg-dots-position="top-right"]    .bg-dots { right: -7%; top: -12%; left: auto; z-index: 1; }
.rw-block-two-modes[data-bg-dots-position="bottom-left"]  .bg-dots { left: -7%; bottom: -12%; top: auto; z-index: 1; }
.rw-block-two-modes[data-bg-dots-position="bottom-right"] .bg-dots { right: -7%; bottom: -12%; left: auto; top: auto; z-index: 1; }

.rw-block-two-modes .intro {
	text-align: center;
	max-width: 1154px;
	margin: 0 auto var(--rw-space-2xl, 4.5rem);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--rw-space-md);
}

.rw-block-two-modes .intro h2 {
	font-family: var(--rw-font-text);
	font-weight: 700;
	font-size: var(--rw-h2-size);
	line-height: var(--rw-h2-line);
	letter-spacing: var(--rw-h2-tracking);
	color: var(--rw-color-primary-green);
	margin: 0;
}

.rw-block-two-modes .cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--rw-space-lg);
	align-items: stretch;
}

/* Swiper-wrapper is a <ul> in this block — strip default browser list padding/margin. */
.rw-block-two-modes .swiper-wrapper {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rw-block-two-modes .card {
	position: relative;
	flex: 1 1 0;
	background: var(--rw-color-white);
	border-radius: var(--rw-radius-lg);
	padding: 2rem;
	display: flex;
	flex-direction: column;
	gap: var(--rw-space-lg);
}

/* Image wrapper clips zoom transform so it doesn't bleed past card border-radius. */
.rw-block-two-modes .card .img-wrap {
	overflow: hidden;
	border-radius: var(--rw-radius-xs);
}

.rw-block-two-modes .card .img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform .5s ease;
}

/* Image zoom on whole-card hover. */
.rw-block-two-modes .card:hover .img {
	transform: scale(1.06);
}

.rw-block-two-modes .card .card-eyebrow {
	font-family: var(--rw-font-mono);
	font-weight: 500;
	font-size: var(--rw-caption-size);
	line-height: var(--rw-caption-line);
	letter-spacing: var(--rw-caption-tracking);
	text-transform: uppercase;
	color: var(--rw-color-grey-01);
	margin: 0;
}

.rw-block-two-modes .card h3 {
	font-family: var(--rw-font-text);
	font-weight: 700;
	/* Figma local override: 28px mobile floor → 32px desktop ceiling. */
	font-size: clamp(1.75rem, 0.38vw + 1.65rem, 2rem);
	line-height: clamp(2rem, 0.56vw + 1.85rem, 2.375rem);
	letter-spacing: var(--rw-h3-tracking);
	color: var(--rw-color-primary-green);
	margin: 0;
}

.rw-block-two-modes .card .body {
	font-family: var(--rw-font-text);
	font-size: var(--rw-p2-size);
	line-height: var(--rw-p2-line);
	letter-spacing: var(--rw-p2-tracking);
	color: var(--rw-color-grey-01);
	margin: 0;
}

.rw-block-two-modes .checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.rw-block-two-modes .checklist li {
	display: flex;
	gap: 0.625rem;
	align-items: flex-start;
	font-size: var(--rw-p2-size);
	line-height: var(--rw-p2-line);
	letter-spacing: var(--rw-p2-tracking);
	color: var(--rw-color-grey-01);
}

.rw-block-two-modes .checklist .icon {
	flex-shrink: 0;
	margin-top: 0.3125rem;
	color: var(--rw-color-grey-01);
	display: inline-flex;
}

.rw-block-two-modes .card-cta {
	margin-top: auto;
	width: 100%;
	justify-content: center;
}

/* Stretched-link overlay: pseudo-element positions against .card (which is
   position:relative), inset:0 spans the whole card so any click on the card
   triggers the CTA's anchor. No nested anchors — card stays a <li>. */
.rw-block-two-modes .card-cta::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 3;
}

/* Keep inner content above the overlay so text remains selectable and any
   nested links (none today, but defensive) keep priority. */
.rw-block-two-modes .card > *:not(.card-cta) {
	position: relative;
	z-index: 2;
}

/* Whole-card hover triggers the CTA's filled hover state. Mirrors
   .rw-btn--outline:hover from global-styles.css. */
.rw-block-two-modes .card:hover .card-cta {
	background: var(--rw-color-primary-green);
	color: var(--rw-color-white);
	border-color: var(--rw-color-primary-green);
}

/* Mobile carousel controls — hidden by default, shown only ≤767px. */
.rw-block-two-modes .controls { display: none; }

.rw-block-two-modes .card.swiper-slide {
	height: auto;
}

/* Desktop layout (≥768px): swiper markup is present but Swiper does NOT init.
   Override swiper-bundle.css defaults so the static side-by-side grid still works. */
@media (min-width: 768px) {
	.rw-block-two-modes .cards.swiper { overflow: visible; }
	.rw-block-two-modes .swiper-wrapper {
		display: flex;
		gap: var(--rw-space-lg);
		align-items: stretch;
	}
	.rw-block-two-modes .card.swiper-slide {
		flex: 1 1 0;
		flex-shrink: 1;       /* override swiper-bundle's flex-shrink: 0 */
		width: auto;          /* override swiper inline width */
	}
}

@media (max-width: 767px) {
	.rw-block-two-modes .card .img-wrap { display: none; }
	/* Mobile re-order: controls render above the swiper (flex order). */
	.rw-block-two-modes .cards-wrap {
		position: relative;
		display: flex;
		flex-direction: column;
	}
	.rw-block-two-modes .cards-wrap .controls { order: 0; margin-top: 0; margin-bottom: var(--rw-space-md); }
	.rw-block-two-modes .cards-wrap .cards     { order: 1; }
	.rw-block-two-modes .cards.swiper { overflow: visible; }
	.rw-block-two-modes .swiper-wrapper { display: flex; gap: 0; align-items: stretch; padding: 0; margin: 0; list-style: none; }
	.rw-block-two-modes .intro { gap: 1rem; margin: 0 auto 3.5rem; }
	.rw-block-two-modes .card { padding: 1.5rem; gap: 1rem; }
	.rw-block-two-modes .card h3 { letter-spacing: -0.056rem; }
	.rw-block-two-modes .card-cta { padding: 0.875rem 1.25rem; font-size: 14px; }
	.rw-block-two-modes .card .card-eyebrow { margin-top: 1rem; }
	.rw-block-two-modes .card.swiper-slide {
		flex: 0 0 86%;
	}

	.rw-block-two-modes .controls {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: var(--rw-space-md);
	}
	.rw-block-two-modes .fraction {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		color: var(--rw-color-primary-green);
		font-family: var(--rw-font-mono);
		font-weight: 500;
		font-size: 0.875rem;
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}
	.rw-block-two-modes .fraction .line {
		display: inline-block;
		width: 2.5rem;
		height: 1px;
		background: rgba(70, 75, 80, 0.5);
	}
	.rw-block-two-modes .nav { display: flex; gap: 0.5rem; }
	.rw-block-two-modes .nav-btn {
		width: 2.5rem;
		height: 2.5rem;
		border: 1px solid rgba(70, 75, 80, 0.3);
		border-radius: var(--rw-radius-xs);
		background: transparent;
		color: var(--rw-color-primary-green);
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		transition: border-color 0.2s ease, background 0.2s ease;
	}
	.rw-block-two-modes .nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
}