/* ===========================================================
   RewardRace — Browse Integrations (rrBI)
   Category-grouped integration directory:
     - Centered pill badge + section heading
     - Vertical stack of categories, each with a tinted icon tile,
       a title/description and a "View all" link
     - 3-up grid of integration cards carrying real brand logos
   Pulls colour tokens, type weights, the tinted icon tile and card
   shadows from the "How It Works" widget; the pill badge mirrors
   the "Integrations Hero" widget so the page reads as one system.
   =========================================================== */

.rrBI {
	--rrbi-section-bg:  #FFFFFF;
	--rrbi-heading:     var(--rr-heading);
	--rrbi-text:        var(--rr-text);
	--rrbi-muted:       var(--rr-muted);
	--rrbi-subtle:      var(--rr-subtle);
	--rrbi-accent:      var(--rr-brand);
	--rrbi-accent-tint: var(--rr-brand-tint);

	--rrbi-card-bg:     #FFFFFF;
	--rrbi-card-border: var(--rr-border);
	--rrbi-card-shadow: 0 1px 2px rgba(11, 10, 20, .04), 0 6px 18px rgba(11, 10, 20, .04);
	--rrbi-card-shadow-hover: 0 4px 14px rgba(87, 63, 211, .12), 0 12px 32px rgba(11, 10, 20, .08);

	/* Badge — white→lavender wash + hairline purple border.
	   1:1 with the Integrations Hero badge. */
	--rrbi-badge-bg:     linear-gradient(135deg, rgba(255, 255, 255, .85) 0%, rgba(238, 234, 251, .85) 100%);
	--rrbi-badge-border: rgba(87, 63, 211, .15);
	--rrbi-badge-color:  #573FD3;
	--rrbi-badge-icon:   #573FD3;
	--rrbi-badge-shadow: 0 1px 2px rgba(11, 10, 20, .04);

	/* "Connected" pill — soft green. */
	--rrbi-ok-bg:    #E5F5EC;
	--rrbi-ok-color: #1A9E5E;

	position: relative;
	font-family: var(--rr-font-sans);
	color: var(--rrbi-text);
	background: var(--rrbi-section-bg);
	box-sizing: border-box;
	border-top: 0 !important;
	overflow: hidden;
}
.rrBI *, .rrBI *::before, .rrBI *::after { box-sizing: border-box; }

/* ----- Dark mode — mirrors how-it-works.css dark tokens. ----- */
.rrBI--dark,
html[data-theme="dark"] .rrBI--auto {
	--rrbi-section-bg:  #0A0912;
	--rrbi-card-bg:     #14122A;
	--rrbi-card-border: rgba(255, 255, 255, .08);
	--rrbi-card-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
	--rrbi-card-shadow-hover: 0 6px 22px rgba(139, 115, 255, .22), 0 18px 38px rgba(0, 0, 0, .45);
	--rrbi-accent:      #8B73FF;
	--rrbi-accent-tint: rgba(139, 115, 255, .18);

	--rrbi-badge-bg:     linear-gradient(135deg, rgba(255, 255, 255, .08) 0%, rgba(139, 115, 255, .14) 100%);
	--rrbi-badge-border: rgba(255, 255, 255, .12);
	--rrbi-badge-color:  #C9BCFF;
	--rrbi-badge-icon:   #B8A6FF;
	--rrbi-badge-shadow: 0 1px 2px rgba(0, 0, 0, .35);

	--rrbi-ok-bg:    rgba(31, 170, 110, .18);
	--rrbi-ok-color: #4FD89B;
}

/* ===========================================================
   Layout
   =========================================================== */
.rrBI__wrap {
	max-width: var(--rr-container);
	margin: 0 auto;
	padding: clamp(3rem, 6vw, 5.5rem) clamp(1.25rem, 3vw, 2.5rem);
	position: relative;
	z-index: 1;
}

/* ===========================================================
   Header
   =========================================================== */
.rrBI__head {
	margin: 0 auto var(--rr-space-12);
	max-width: var(--rr-head-max-width);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.rrBI .rrBI__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 15px 7px 13px;
	background: var(--rrbi-badge-bg);
	border: 1px solid var(--rrbi-badge-border);
	border-radius: var(--rr-radius-pill);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--rrbi-badge-color);
	margin-bottom: clamp(1.25rem, 2.2vw, 1.75rem);
	box-shadow: var(--rrbi-badge-shadow);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	line-height: 1;
}
.rrBI__badge-icon {
	display: inline-flex;
	width: 14px;
	height: 14px;
	align-items: center;
	justify-content: center;
	color: var(--rrbi-badge-icon);
	flex-shrink: 0;
	line-height: 0;
}
.rrBI__badge-icon svg { display: block; }
.rrBI__badge-text { font: inherit; color: inherit; line-height: 1; }

.rrBI .rrBI__title {
	font-size: var(--rr-fs-h2);
	font-weight: 800;
	letter-spacing: -.022em;
	line-height: var(--rr-lh-snug);
	margin: 0;
	color: var(--rrbi-heading);
	text-wrap: balance;
}
.rrBI__titleLead { color: inherit; }
.rrBI .rrBI__titleAccent {
	color: var(--rrbi-accent) !important;
	font-weight: 800;
	font-style: normal !important;
}

/* ===========================================================
   Category stack
   =========================================================== */
.rrBI__cats {
	display: flex;
	flex-direction: column;
	gap: clamp(2.25rem, 4vw, 3.5rem);
	max-width: 1160px;
	margin: 0 auto;
}

.rrBI__cat {
	display: flex;
	flex-direction: column;
	gap: var(--rr-space-5);
}

/* ----- Category header row ----- */
.rrBI__catHead {
	display: flex;
	align-items: center;
	gap: var(--rr-space-4);
}

.rrBI__catIcon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--rr-radius-md);
	background: var(--rrbi-accent-tint);
	color: var(--rrbi-accent);
	flex-shrink: 0;
}
.rrBI__catIcon svg { width: 22px; height: 22px; display: block; }

.rrBI__catText {
	min-width: 0;
	flex: 1;
}
.rrBI .rrBI__catTitle {
	font-size: 1.1875rem;
	font-weight: 700;
	letter-spacing: -.012em;
	line-height: var(--rr-lh-snug);
	margin: 0;
	color: var(--rrbi-heading);
}
.rrBI .rrBI__catDesc {
	font-size: .9375rem;
	line-height: var(--rr-lh-normal);
	margin: 3px 0 0;
	color: var(--rrbi-muted);
	font-weight: 400;
}

/* ----- "View all" link ----- */
.rrBI .rrBI__viewAll {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	flex-shrink: 0;
	margin-left: auto;
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--rrbi-accent);
	text-decoration: none;
	white-space: nowrap;
	transition: gap var(--rr-dur-base) var(--rr-ease-out),
	            color var(--rr-dur-fast) var(--rr-ease-out);
}
.rrBI__viewAll-arrow {
	display: inline-flex;
	width: 14px;
	height: 14px;
	align-items: center;
	justify-content: center;
}
.rrBI__viewAll-arrow svg { display: block; }
.rrBI .rrBI__viewAll:hover {
	color: var(--rr-brand-hover, var(--rrbi-accent));
	gap: 9px;
}

/* ===========================================================
   Integration grid + cards
   =========================================================== */
.rrBI__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 1.8vw, 1.5rem);
}

.rrBI__card {
	background: var(--rrbi-card-bg);
	border: 1px solid var(--rrbi-card-border);
	border-radius: var(--rr-radius-lg);
	padding: clamp(1.25rem, 1.9vw, 1.625rem);
	box-shadow: var(--rrbi-card-shadow);
	display: flex;
	flex-direction: column;
	gap: clamp(1rem, 1.6vw, 1.375rem);
	min-width: 0;
	transition:
		transform var(--rr-dur-base) var(--rr-ease-out),
		box-shadow var(--rr-dur-base) var(--rr-ease-out),
		border-color var(--rr-dur-base) var(--rr-ease-out);
}
.rrBI__card:hover {
	transform: translateY(-3px);
	box-shadow: var(--rrbi-card-shadow-hover);
	border-color: color-mix(in srgb, var(--rrbi-accent) 24%, var(--rrbi-card-border));
}

/* ----- Card main: logo (left) + name & description (right) ----- */
.rrBI__cardMain {
	display: flex;
	align-items: flex-start;
	gap: var(--rr-space-4);
}

.rrBI__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	flex-shrink: 0;
	transition: transform var(--rr-dur-base) var(--rr-ease-spring);
}
.rrBI__logo svg {
	width: 44px;
	height: 44px;
	display: block;
}
.rrBI__logo-img {
	width: 44px;
	height: 44px;
	object-fit: contain;
	display: block;
}
.rrBI__card:hover .rrBI__logo { transform: scale(1.05); }

.rrBI__cardText {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding-top: 1px;
}
.rrBI .rrBI__name {
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -.012em;
	line-height: var(--rr-lh-snug);
	margin: 0;
	color: var(--rrbi-heading);
}
.rrBI .rrBI__desc {
	font-size: .9375rem;
	line-height: var(--rr-lh-normal);
	margin: 0;
	color: var(--rrbi-muted);
	font-weight: 400;
}

/* ----- Card action — pinned to the card foot for equal heights ----- */
.rrBI__action {
	margin-top: auto;
}

/* "Connect" — brand-purple text link with a trailing arrow. */
.rrBI .rrBI__connect {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--rrbi-accent);
	text-decoration: none;
	white-space: nowrap;
	transition: gap var(--rr-dur-base) var(--rr-ease-out),
	            color var(--rr-dur-fast) var(--rr-ease-out);
}
.rrBI__connect-arrow {
	display: inline-flex;
	width: 14px;
	height: 14px;
	align-items: center;
	justify-content: center;
}
.rrBI__connect-arrow svg { display: block; }
.rrBI .rrBI__connect:hover {
	color: var(--rr-brand-hover, var(--rrbi-accent));
	gap: 9px;
}

/* "Connected" — soft green pill with a check mark. */
.rrBI__connected {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px 6px 10px;
	border-radius: var(--rr-radius-pill);
	background: var(--rrbi-ok-bg);
	color: var(--rrbi-ok-color);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: -.005em;
	line-height: 1;
	white-space: nowrap;
}
.rrBI__connected-icon {
	display: inline-flex;
	width: 13px;
	height: 13px;
	align-items: center;
	justify-content: center;
}
.rrBI__connected-icon svg { display: block; }
.rrBI__connected-text { line-height: 1; }

/* ===========================================================
   Responsive
   =========================================================== */

/* Tablet — drop to 2 columns. */
@media (max-width: 960px) {
	.rrBI__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobile — single column, stacked category header. */
@media (max-width: 640px) {
	.rrBI__wrap {
		padding: clamp(2.5rem, 8vw, 4rem) clamp(1rem, 5vw, 1.5rem);
	}
	.rrBI__head { margin-bottom: var(--rr-space-8); }
	.rrBI .rrBI__title {
		font-size: clamp(1.625rem, 5.5vw, 2.25rem);
	}
	.rrBI__grid { grid-template-columns: 1fr; }

	/* Keep the icon + text together, move "View all" onto its own line. */
	.rrBI__catHead { flex-wrap: wrap; }
	.rrBI__catText { flex: 1 1 calc(100% - 60px); }
	.rrBI .rrBI__viewAll {
		margin-left: 60px;
		margin-top: 2px;
	}
}

@media (max-width: 380px) {
	.rrBI__catIcon { width: 40px; height: 40px; }
	.rrBI__catIcon svg { width: 20px; height: 20px; }
	.rrBI .rrBI__viewAll { margin-left: 56px; }
}

/* ===========================================================
   Reduced motion
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
	.rrBI__card,
	.rrBI__logo,
	.rrBI .rrBI__connect,
	.rrBI .rrBI__viewAll { transition: none; }
	.rrBI__card:hover { transform: none; }
	.rrBI__card:hover .rrBI__logo { transform: none; }
}