/**
 * Features bento grid.
 *
 * Only the values the design drove from its `narrow` flag live here; the rest
 * of the section keeps the design's own inline styles. The breakpoint is its
 * own `narrow = w < 860`.
 */

.rcbf,
.rcbf *,
.rcbf *::before,
.rcbf *::after {
	box-sizing: border-box;
}

/*
 * Narrow first, matching the design's `narrow` branch: one column, rows sized
 * by content, and no card spanning -- a span never clamps, it creates an
 * implicit second track and overflows the viewport.
 */
.rcbf__grid {
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: auto;
	grid-auto-flow: row dense;
	gap: clamp(14px, 1.6vw, 20px);
}

.rcbf__card {
	display: flex;
	grid-column: auto;
	flex-direction: column;
	gap: 16px;
	padding: 22px;
	border-radius: 16px;
	background: #fff;
	box-shadow: inset 0 0 0 1px #e8e8ed;
	transition: transform 200ms cubic-bezier(0.22, 0.8, 0.28, 1), box-shadow 200ms ease;
}

.rcbf__card:hover {
	transform: translateY(-4px);
	box-shadow:
		inset 0 0 0 1px #c7d2fe,
		0 18px 36px -16px rgba(15, 17, 23, 0.16);
}

.rcbf__card--flag {
	grid-row: auto;
	gap: 20px;
	padding: 26px;
}

.rcbf__brand-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	min-height: 76px;
}

.rcbf__brand-picker {
	display: flex;
	flex: 1 1 100%;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1px;
	padding: 4px;
	border-radius: 8px;
	box-shadow: inset 0 0 0 1px #e8e8ed;
}

.rcbf__brand-divider {
	display: none;
	flex-shrink: 0;
	width: 1px;
	height: 26px;
	background: #e8e8ed;
}

@media (prefers-reduced-motion: reduce) {

	.rcbf__card {
		transition: none;
	}

	.rcbf__card:hover {
		transform: none;
	}
}

/* The switch ---------------------------------------------------------------
 *
 * One breakpoint, at the design's own `narrow = w < 860`.
 */

@media (min-width: 860px) {

	.rcbf__grid {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
		grid-auto-rows: minmax(200px, auto);
	}

	.rcbf__card--flag {
		grid-column: span 2;
		grid-row: span 2;
	}

	.rcbf__card--wide {
		grid-column: span 2;
	}

	.rcbf__brand-row {
		gap: 14px;
	}

	.rcbf__brand-picker {
		flex: 0 0 auto;
		justify-content: flex-start;
	}

	.rcbf__brand-divider {
		display: block;
	}
}