/* Product Cards — light grey section + 3 product cards (image, title, body,
   download). Mobile = Swiper carousel. Figma 693:434 / 1009:3050. */

.rw-block-product-cards {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--rw-color-bg-mist);
}
.rw-block-product-cards .rw-container { position: relative; z-index: 2; }

.rw-block-product-cards[data-bg-dots-position="top-left"]     .bg-dots { left: -7%; top: -12%; z-index: 1; }
.rw-block-product-cards[data-bg-dots-position="top-right"]    .bg-dots { right: -7%; top: -12%; left: auto; z-index: 1; }
.rw-block-product-cards[data-bg-dots-position="bottom-left"]  .bg-dots { left: -7%; bottom: -12%; top: auto; z-index: 1; }
.rw-block-product-cards[data-bg-dots-position="bottom-right"] .bg-dots { right: -7%; bottom: -12%; left: auto; top: auto; z-index: 1; }

.rw-block-product-cards .intro {
	text-align: center;
	max-width: 70.6875rem;
	margin: 0 auto 3.75rem; /* Figma-exact 60px gap to grid */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--rw-space-sm);
}
.rw-block-product-cards .intro h2 {
	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;
}

/* Cards container — desktop static row, swiper markup overridden via @media min-width. */
.rw-block-product-cards .cards {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Card — white, 10px radius, 24px padding, gap ~21px (Figma 693:447). */
.rw-block-product-cards .card {
	position: relative;
	background: var(--rw-color-white);
	border-radius: var(--rw-radius-lg);
	padding: var(--rw-space-md);
	display: flex;
	flex-direction: column;
	gap: var(--rw-space-md);
	height: 100%;
}

.rw-block-product-cards .img-wrap {
	background: rgba(206, 214, 226, 0.3); /* Figma-exact image well tint */
	border-radius: var(--rw-radius-xs);
	overflow: hidden;
	aspect-ratio: 376 / 382; /* Figma-exact image well */
	display: flex;
	align-items: center;
	justify-content: center;
}
.rw-block-product-cards .img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform .5s ease;
	mix-blend-mode: multiply;
}
.rw-block-product-cards .card:hover .img { transform: scale(1.04); }

.rw-block-product-cards .card .text {
	display: flex;
	flex-direction: column;
	gap: var(--rw-space-sm);
	flex: 1 1 auto;
}

.rw-block-product-cards .card h3 {
	margin: 0;
	font-family: var(--rw-font-text);
	font-weight: 700;
	/* Figma local: 26 mobile floor → 32 desktop ceiling. */
	font-size: clamp(1.625rem, 0.56vw + 1.48rem, 2rem);
	line-height: clamp(1.75rem, 0.75vw + 1.55rem, 2.375rem);
	letter-spacing: var(--rw-h3-tracking);
	color: var(--rw-color-primary-green);
}

.rw-block-product-cards .card .body {
	margin: 0;
	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);
}

/* Download link — outline button style, justify-between (label left / arrow right). */
.rw-block-product-cards .download {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rw-space-sm);
	padding: 0.875rem 1.5rem; /* 14/24 */
	border: 1px solid var(--rw-color-border);
	border-radius: var(--rw-radius-sm);
	background: transparent;
	color: var(--rw-color-primary-green);
	font-family: var(--rw-font-text);
	font-weight: 600;
	font-size: var(--rw-p1-size);
	line-height: 1;
	text-decoration: none;
	margin-top: auto;
	transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease, opacity .35s ease;
}
.rw-block-product-cards .download:hover {
	background: var(--rw-color-primary-green);
	color: var(--rw-color-white);
	border-color: var(--rw-color-primary-green);
	opacity: 1;
}
.rw-block-product-cards .download:focus-visible {
	outline: none;
	box-shadow: var(--rw-state-focus-ring);
}
.rw-block-product-cards .download .icon { display: inline-flex; }

/* Mobile carousel controls — hidden by default, shown only ≤767px. */
.rw-block-product-cards .controls { display: none; }
.rw-block-product-cards .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-product-cards .cards.swiper { overflow: visible; }
	.rw-block-product-cards .swiper-wrapper {
		display: flex;
		gap: var(--rw-space-md);
		align-items: stretch;
		list-style: none;
		padding: 0;
		margin: 0;
	}
	.rw-block-product-cards .card.swiper-slide {
		flex: 1 1 0;
		flex-shrink: 1;
		width: auto;
	}

	/* 2-card layout (Figma 1009:2154): center the row, fix card width to 424px.
	   Scoped to data-count="2" so 1- and 3-card layouts are untouched. */
	.rw-block-product-cards .cards[data-count="2"] .swiper-wrapper {
		justify-content: center;
	}
	.rw-block-product-cards .cards[data-count="2"] .card.swiper-slide {
		flex: 0 1 26.5rem; /* 424px Figma-exact */
	}
}

@media (max-width: 767px) {
	.rw-block-product-cards .cards-wrap { position: relative; }
	.rw-block-product-cards .cards.swiper { overflow: visible; }
	.rw-block-product-cards .swiper-wrapper { display: flex; gap: 0; align-items: stretch; padding: 0; margin: 0; list-style: none; }
	.rw-block-product-cards .intro { margin: 0 auto 3rem; }
	.rw-block-product-cards .card.swiper-slide { flex: 0 0 86%; }

	.rw-block-product-cards .controls {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: var(--rw-space-md);
	}
	.rw-block-product-cards .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-product-cards .fraction .line {
		display: inline-block;
		width: 2.5rem;
		height: 1px;
		background: rgba(70, 75, 80, 0.5);
	}
	.rw-block-product-cards .nav { display: flex; gap: 0.5rem; }
	.rw-block-product-cards .nav-btn {
		width: 2.5rem;
		height: 2.5rem;
		border: 1px solid var(--rw-color-border);
		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-product-cards .nav-btn:hover { background: #0B1A49; border-color: #0B1A49; color: #fff; }
	.rw-block-product-cards .nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
}