/* ===========================================================
   RewardRace — Docs Categories v2
   =========================================================== */

.rrDocsCats {
	--rrdc-bg:        var(--rr-bg);
	--rrdc-text:      var(--rr-heading);
	--rrdc-body:      var(--rr-text);
	--rrdc-soft:      var(--rr-muted);
	--rrdc-border:    var(--rr-border);
	--rrdc-card-bg:   var(--rr-bg);
	--rrdc-card-sh:   none;
	--rrdc-pill-bg:   var(--rr-surface);
	--rrdc-icon-bg:   var(--rr-surface);
	--rrdc-accent:    var(--rr-brand);
	--rrdc-cols:      3;

	background: var(--rrdc-bg);
	color: var(--rrdc-body);
	font-family: var(--rr-font-sans);
	box-sizing: border-box;
	padding: var(--rr-space-8) var(--rr-section-x) var(--rr-section-y);
}
.rrDocsCats *, .rrDocsCats *::before, .rrDocsCats *::after { box-sizing: border-box; }

.rrDocsCats--bg-white       { --rrdc-bg: var(--rr-bg); --rrdc-card-bg: var(--rr-surface); }
.rrDocsCats--bg-cream       { --rrdc-bg: var(--rr-surface); --rrdc-card-bg: var(--rr-bg); }
.rrDocsCats--bg-transparent { background: transparent; }

.rrDocsCats__wrap {
	max-width: var(--rr-container);
	margin: 0 auto;
}

.rrDocsCats__grid {
	display: grid;
	grid-template-columns: repeat(var(--rrdc-cols), minmax(0, 1fr));
	gap: var(--rr-space-4);
	align-items: stretch;
}

.rrDocsCats__card {
	background: var(--rrdc-card-bg);
	border: 1px solid var(--rrdc-border);
	border-radius: var(--rr-card-radius);
	padding: var(--rr-space-6);
	display: flex;
	flex-direction: column;
	min-width: 0;
	box-shadow: var(--rrdc-card-sh);
	position: relative;
	overflow: hidden;
	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);
}
.rrDocsCats__card::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: var(--rr-brand-gradient);
	opacity: 0;
	transition: opacity var(--rr-dur-base) var(--rr-ease-out);
}
.rrDocsCats__card:hover {
	border-color: var(--rrdc-accent);
	box-shadow: var(--rr-shadow-lg);
	transform: translateY(-4px);
}
.rrDocsCats__card:hover::before { opacity: 1; }

.rrDocsCats__card--linked { cursor: pointer; }
.rrDocsCats__cardLink {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	text-indent: -9999px;
	overflow: hidden;
	background: transparent;
	-webkit-tap-highlight-color: transparent;
}
.rrDocsCats__cardLink:focus-visible {
	outline: 2px solid var(--rrdc-accent);
	outline-offset: 4px;
}
/* Inner content sits above the stretched link so item links and the
   "Explore more" button keep their own click targets. */
.rrDocsCats__card--linked > .rrDocsCats__head,
.rrDocsCats__card--linked > .rrDocsCats__title,
.rrDocsCats__card--linked > .rrDocsCats__list,
.rrDocsCats__card--linked > .rrDocsCats__explore { position: relative; z-index: 2; }
.rrDocsCats__card--linked > .rrDocsCats__list .rrDocsCats__item { pointer-events: auto; }

.rrDocsCats__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--rr-space-3);
	margin-bottom: var(--rr-space-6);
}

.rrDocsCats__icon {
	--rrdc-icon-size: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--rrdc-icon-size);
	height: var(--rrdc-icon-size);
	border-radius: var(--rr-radius-md);
	background: var(--rrdc-icon-bg);
	color: var(--rrdc-accent);
	overflow: hidden;
	flex-shrink: 0;
	transition: background var(--rr-dur-base) var(--rr-ease-out),
	            color var(--rr-dur-base) var(--rr-ease-out),
	            transform var(--rr-dur-base) var(--rr-ease-spring),
	            box-shadow var(--rr-dur-base) var(--rr-ease-out);
}
.rrDocsCats__card:hover .rrDocsCats__icon {
	background: var(--rr-brand-gradient);
	color: #FFFFFF;
	transform: rotate(-6deg) scale(1.06);
	box-shadow: var(--rr-shadow-brand-sm);
}
.rrDocsCats__icon img { width: 66%; height: 66%; object-fit: contain; display: block; }
.rrDocsCats__icon svg { width: 54%; height: 54%; display: block; }

.rrDocsCats__count {
	display: inline-block;
	padding: 5px 12px;
	background: var(--rrdc-pill-bg);
	border: 1px solid var(--rrdc-border);
	border-radius: var(--rr-radius-pill);
	font-size: var(--rr-fs-2xs);
	font-weight: 700;
	color: var(--rrdc-soft);
	white-space: nowrap;
}

.rrDocsCats__title {
	font-size: var(--rr-fs-h4);
	font-weight: 800;
	letter-spacing: var(--rr-tracking-snug);
	margin: 0 0 var(--rr-space-5);
	color: var(--rrdc-text);
	line-height: var(--rr-lh-snug);
}

.rrDocsCats__list {
	list-style: none;
	margin: 0 0 var(--rr-space-2);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--rr-space-1);
	flex: 1;
}

.rrDocsCats__item {
	display: flex;
	align-items: center;
	gap: var(--rr-space-3);
	font-size: var(--rr-fs-sm);
	line-height: var(--rr-lh-normal);
	color: var(--rrdc-body);
	min-width: 0;
	padding: 8px 10px;
	margin: 0 -10px;
	border-radius: var(--rr-radius-sm);
	cursor: pointer;
	transition: background-color var(--rr-dur-fast) var(--rr-ease-out),
	            color var(--rr-dur-fast) var(--rr-ease-out);
}
.rrDocsCats__item:hover {
	background-color: var(--rr-brand-ghost);
}
.rrDocsCats__item:hover .rrDocsCats__link,
.rrDocsCats__item:hover .rrDocsCats__text,
.rrDocsCats__item:hover .rrDocsCats__bullet {
	color: var(--rrdc-accent);
}
.rrDocsCats__item:hover .rrDocsCats__bullet { background: var(--rrdc-accent); }

.rrDocsCats__bullet {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--rrdc-soft);
	flex-shrink: 0;
	display: inline-block;
	transition: background-color var(--rr-dur-fast) var(--rr-ease-out);
}

.rrDocsCats__text,
.rrDocsCats .rrDocsCats__link,
.rrDocsCats a.rrDocsCats__link {
	flex: 1;
	min-width: 0;
	color: var(--rrdc-body);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	letter-spacing: var(--rr-tracking-snug);
	font-weight: 600;
	transition: color var(--rr-dur-fast) var(--rr-ease-out);
}

.rrDocsCats .rrDocsCats__explore,
.rrDocsCats a.rrDocsCats__explore {
	display: inline-flex;
	align-items: center;
	gap: var(--rr-space-2);
	margin-top: var(--rr-space-4);
	font-size: var(--rr-fs-xs);
	font-weight: 700;
	color: var(--rrdc-accent);
	text-decoration: none;
	transition: gap var(--rr-dur-fast) var(--rr-ease-out);
	letter-spacing: var(--rr-tracking-snug);
}
.rrDocsCats .rrDocsCats__explore::after { content: "→"; transition: transform var(--rr-dur-fast) var(--rr-ease-out); }
.rrDocsCats .rrDocsCats__explore:hover { gap: var(--rr-space-3); }
.rrDocsCats .rrDocsCats__explore:hover::after { transform: translateX(2px); }

@media (max-width: 1024px) {
	.rrDocsCats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rr-space-3); }
	.rrDocsCats__card { padding: var(--rr-space-5); }
}

@media (max-width: 720px) {
	.rrDocsCats { padding: var(--rr-space-6) var(--rr-space-4) var(--rr-space-12); }
	.rrDocsCats__grid { grid-template-columns: 1fr; gap: var(--rr-space-3); }
	.rrDocsCats__head { margin-bottom: var(--rr-space-5); }
	.rrDocsCats__title { font-size: var(--rr-fs-md); margin-bottom: var(--rr-space-4); }
}

@media (max-width: 380px) {
	.rrDocsCats__card { padding: var(--rr-space-5); border-radius: var(--rr-radius-lg); }
	.rrDocsCats__icon { --rrdc-icon-size: 42px; }
	.rrDocsCats__item { font-size: var(--rr-fs-sm); }
}