/*
 * StudentLife Reddit — Category / Community Archive
 *
 * Purpose:
 * - Reddit-style community archive
 * - TagDiv-style 1/4 + 3/4 outer structure
 * - Full-width community banner/header
 * - 2/3 archive feed + 1/3 sticky right sidebar
 * - Dark StudentLife visual system
 *
 * Loaded after style.css on category archives.
 */


/* =========================================================
   CATEGORY THEME VARIABLES
   ========================================================= */

body.category {

	--sl-category-bg: var(--sl-bg, #0b0f12);
	--sl-category-surface: var(--sl-surface, #11171b);
	--sl-category-surface-soft: var(--sl-bg-soft, #0e1418);

	--sl-category-surface-raised: var(--sl-surface-raised, #171e23);
	--sl-category-surface-hover: var(--sl-surface-hover, #1b242b);

	--sl-category-border: var(--sl-border, #29323a);
	--sl-category-border-soft: var(--sl-border-soft, #20282f);

	--sl-category-text: var(--sl-text, #f4f7fa);
	--sl-category-text-soft: var(--sl-text-soft, #c5cdd4);

	--sl-category-muted: var(--sl-muted, #8b98a4);
	--sl-category-muted-dark: var(--sl-muted-dark, #66727d);

	--sl-category-blue: var(--sl-blue, #0a63ff);
	--sl-category-blue-hover: var(--sl-blue-hover, #2f7aff);
	--sl-category-blue-soft: var(--sl-blue-soft, rgba(10, 99, 255, 0.16));

	--sl-category-green: var(--sl-green, #16b364);

	background: var(--sl-category-bg) !important;
	color: var(--sl-category-text) !important;
}


/* =========================================================
   PAGE BACKGROUND
   ========================================================= */

body.category,
body.category .sl-site,
body.category .sl-page-shell {

	background: var(--sl-category-bg) !important;
	color: var(--sl-category-text) !important;
}


/* =========================================================
   HEADER
   ========================================================= */

body.category .sl-header {

	background:
		var(--sl-category-bg) !important;

	border-bottom:
		1px solid
		var(--sl-category-border) !important;

	box-shadow: none !important;
}

body.category .sl-brand {

	color:
		var(--sl-category-text) !important;
}

body.category .sl-brand-icon {

	background:
		var(--sl-category-blue) !important;

	color: #fff !important;
}

body.category .sl-search {

	background:
		var(--sl-category-surface) !important;

	border:
		1px solid
		var(--sl-category-border) !important;

	box-shadow: none !important;
}

body.category .sl-search input {

	background: transparent !important;

	color:
		var(--sl-category-text) !important;
}

body.category .sl-search input::placeholder {

	color:
		var(--sl-category-muted) !important;
}

body.category .sl-search-icon,
body.category .sl-header-icon {

	color:
		var(--sl-category-muted) !important;
}

body.category .sl-header-icon:hover,
body.category .sl-user-button:hover {

	background:
		var(--sl-category-surface-hover) !important;

	color:
		var(--sl-category-text) !important;
}

body.category .sl-user-button {

	color:
		var(--sl-category-text) !important;
}

body.category .sl-header-create {

	min-height: 38px;

	padding-inline: 17px;

	background:
		var(--sl-category-blue) !important;

	border:
		1px solid
		var(--sl-category-blue) !important;

	border-radius: 9px;

	color: #fff !important;
}

body.category .sl-header-create:hover {

	background:
		var(--sl-category-blue-hover) !important;

	color: #fff !important;
}


/* =========================================================
   CATEGORY OUTER GRID
   =========================================================

   TagDiv-inspired structure:

   1/4 = sticky left navigation

   3/4 = category area

       full width
       ┌───────────────────────────────┐
       │      COMMUNITY BANNER         │
       └───────────────────────────────┘

       2/3                    1/3
       ┌──────────────────┬────────────┐
       │ ARCHIVE FEED     │ RIGHT RAIL │
       │                  │  STICKY    │
       └──────────────────┴────────────┘
   ========================================================= */

.sl-layout--category {

	width:
		min(
			calc(100% - 20px),
			1344px
		) !important;

	margin-inline:
		auto !important;

	grid-template-columns:
		260px
		minmax(0, 1fr)
		300px !important;

	gap:
		10px !important;

	background:
		transparent !important;
}


/* =========================================================
   LEFT SIDEBAR POSITION
   ========================================================= */

.sl-layout--category > .sl-sidebar {

	width:
		auto !important;

	left:
		max(
			10px,
			calc((100vw - 1344px) / 2)
		) !important;
}


/* =========================================================
   CATEGORY CONTENT
   ========================================================= */

.sl-category-content {

	grid-column:
		2 / 4;

	grid-row:
		1;

	min-width:
		0;

	width:
		100%;

	padding:
		20px 0 60px;

	background:
		transparent;
}


/* =========================================================
   COMMUNITY BANNER — FULL WIDTH
   ========================================================= */

.sl-category-content >
.sl-category-community-hero {

	width:
		100% !important;

	margin:
		0 0 10px !important;
}


/* =========================================================
   LOWER CATEGORY ROW
   ========================================================= */

.sl-category-lower-row {

	display:
		grid;

	grid-template-columns:
		minmax(0, 2fr)
		minmax(260px, 1fr);

	align-items:
		start;

	gap:
		10px;

	min-width:
		0;

	width:
		100%;
}


/* =========================================================
   MAIN ARCHIVE FEED
   ========================================================= */

.sl-category-lower-row >
.sl-main-content--category {

	grid-column:
		1;

	min-width:
		0;

	width:
		100%;

	padding:
		0 !important;

	margin:
		0 !important;
}


/* =========================================================
   RIGHT SIDEBAR — STICKY
   ========================================================= */

.sl-category-lower-row >
.sl-category-right-sidebar {

	grid-column:
		2;

	grid-row:
		1;

	position:
		sticky !important;

	top:
		calc(
			var(--sl-shell-header-top, 0px)
			+
			var(--sl-header-height, 64px)
			+
			14px
		) !important;

	align-self:
		start;

	width:
		100% !important;

	height:
		auto !important;

	max-height:
		calc(
			100vh
			-
			var(--sl-shell-header-top, 0px)
			-
			var(--sl-header-height, 64px)
			-
			28px
		);

	overflow-x:
		hidden !important;

	overflow-y:
		auto !important;

	margin:
		0 !important;

	padding:
		0 0 30px !important;

	z-index:
		20 !important;

	scrollbar-width:
		thin;

	scrollbar-color:
		var(--sl-category-border)
		transparent;
}

.sl-category-lower-row >
.sl-category-right-sidebar::-webkit-scrollbar {

	width:
		6px;
}

.sl-category-lower-row >
.sl-category-right-sidebar::-webkit-scrollbar-track {

	background:
		transparent;
}

.sl-category-lower-row >
.sl-category-right-sidebar::-webkit-scrollbar-thumb {

	background:
		var(--sl-category-border);

	border-radius:
		10px;
}

.sl-category-lower-row >
.sl-category-right-sidebar::-webkit-scrollbar-thumb:hover {

	background:
		var(--sl-category-muted-dark);
}


.sl-category-lower-row >
.sl-category-right-sidebar
.sl-community-panel {

	width:
		100%;
}


/* =========================================================
   LEFT CATEGORY SIDEBAR
   ========================================================= */

.sl-category-sidebar {

	padding:
		18px 0 28px !important;

	border-right:
		0 !important;

	background:
		transparent !important;

	color:
		var(--sl-category-text) !important;
}

.sl-category-sidebar .sl-sidebar-inner {

	padding:
		0 10px;
}

.sl-category-nav-heading {

	padding:
		0 12px 9px;

	color:
		var(--sl-category-text) !important;

	font-size:
		12px;

	font-weight:
		800;
}

.sl-category-nav-heading--section {

	padding-top:
		0;
}

.sl-category-sidebar .sl-sidebar-item {

	min-height:
		43px;

	padding-inline:
		12px;

	border-radius:
		9px;

	color:
		var(--sl-category-text-soft) !important;

	font-size:
		13px;

	font-weight:
		600;
}

.sl-category-sidebar .sl-sidebar-item:hover {

	background:
		var(--sl-category-surface-hover) !important;

	color:
		var(--sl-category-text) !important;
}

.sl-category-sidebar .sl-sidebar-item.is-active {

	background:
		var(--sl-category-blue-soft) !important;

	color:
		#ffffff !important;
}

.sl-category-sidebar .sl-sidebar-icon {

	color:
		var(--sl-category-muted) !important;
}

.sl-category-sidebar
.sl-sidebar-item.is-active
.sl-sidebar-icon {

	color:
		var(--sl-category-blue-hover) !important;
}

.sl-category-sidebar .sl-sidebar-divider {

	margin:
		13px 12px;

	background:
		var(--sl-category-border-soft) !important;
}

.sl-category-community-item {

	gap:
		10px !important;
}

.sl-category-community-icon {

	width:
		27px;

	height:
		27px;

	flex:
		0 0 27px;

	display:
		inline-flex;

	align-items:
		center;

	justify-content:
		center;

	border-radius:
		50%;

	background:
		var(--sl-category-surface-raised) !important;

	color:
		var(--sl-category-text-soft) !important;

	font-size:
		10px;

	font-weight:
		800;
}

.sl-category-community-item.is-active
.sl-category-community-icon {

	background:
		var(--sl-category-blue) !important;

	color:
		#fff !important;
}

.sl-category-community-name {

	min-width:
		0;

	overflow:
		hidden;

	text-overflow:
		ellipsis;

	white-space:
		nowrap;
}

.sl-category-explore {

	margin-top:
		4px;

	color:
		var(--sl-category-text-soft) !important;
}


/* =========================================================
   COMMUNITY HEADER / BANNER
   ========================================================= */

.sl-category-community-hero {

	width:
		100% !important;

	margin:
		0 0 10px !important;

	background:
		var(--sl-category-surface) !important;

	border:
		1px solid
		var(--sl-category-border) !important;

	border-radius:
		9px;

	overflow:
		hidden;

	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.20);
}


/* =========================================================
   CATEGORY COVER IMAGE
   ========================================================= */

.sl-category-community-hero
.sl-community-cover {

	height:
		142px;

	padding:
		0;

	background-color:
		#101820;

	background-image:
		linear-gradient(
			90deg,
			rgba(3, 18, 38, 0.88),
			rgba(3, 18, 38, 0.20)
		),
		var(--sl-community-banner-image);

	background-position:
		center;

	background-size:
		cover;

	background-repeat:
		no-repeat;

	position:
		relative;
}

.sl-category-community-hero
.sl-community-cover.has-fallback {

	background-image:
		linear-gradient(
			135deg,
			#071a32 0%,
			#103a68 52%,
			#071e3d 100%
		);
}

.sl-category-community-hero
.sl-community-cover__overlay {

	position:
		absolute;

	inset:
		0;

	background:
		linear-gradient(
			90deg,
			rgba(3, 16, 36, 0.70) 0%,
			rgba(3, 16, 36, 0.28) 58%,
			rgba(3, 16, 36, 0.08) 100%
		);

	pointer-events:
		none;
}

.sl-category-community-hero
.sl-community-cover.has-image::after {

	display:
		none;
}


/* =========================================================
   COMMUNITY IDENTITY
   ========================================================= */

.sl-category-community-hero
.sl-community-identity {

	min-height:
		86px;

	padding:
		0 28px;

	gap:
		14px;

	background:
		var(--sl-category-surface) !important;

	border-color:
		var(--sl-category-border) !important;

	color:
		var(--sl-category-text) !important;
}

.sl-category-community-hero
.sl-community-identity__avatar {

	width:
		70px;

	height:
		70px;

	flex-basis:
		70px;

	margin-top:
		-34px;

	border:
		4px solid
		var(--sl-category-surface) !important;

	background:
		var(--sl-category-blue);

	box-shadow:
		0 1px 5px rgba(0, 0, 0, 0.45);

	overflow:
		hidden;
}

.sl-category-community-hero
.sl-community-identity__avatar img {

	width:
		100%;

	height:
		100%;

	object-fit:
		cover;

	display:
		block;
}

.sl-category-community-hero
.sl-community-identity__copy h1 {

	margin:
		0;

	color:
		var(--sl-category-text) !important;

	font-size:
		23px;

	font-weight:
		800;

	line-height:
		1.15;

	letter-spacing:
		-0.025em;
}

.sl-category-community-hero
.sl-community-identity__copy p {

	margin-top:
		5px;

	color:
		var(--sl-category-muted) !important;

	font-size:
		11px;

	line-height:
		1.4;
}

.sl-category-community-hero
.sl-community-identity__copy p span {

	padding-inline:
		4px;

	color:
		var(--sl-category-muted-dark) !important;
}

.sl-category-community-hero
.sl-community-identity__actions {

	gap:
		8px;
}


/* =========================================================
   COMMUNITY ACTION BUTTONS
   ========================================================= */

.sl-category-community-hero
.sl-button--primary {

	min-height:
		38px;

	padding-inline:
		17px;

	border-radius:
		8px;

	background:
		var(--sl-category-blue) !important;

	border-color:
		var(--sl-category-blue) !important;

	color:
		#fff !important;
}

.sl-category-community-hero
.sl-button--primary:hover {

	background:
		var(--sl-category-blue-hover) !important;

	color:
		#fff !important;
}

.sl-category-community-hero
.sl-button--community-join {

	min-height:
		38px;

	padding-inline:
		20px;

	border:
		1px solid
		var(--sl-category-border) !important;

	border-radius:
		8px;

	background:
		var(--sl-category-surface-raised) !important;

	color:
		var(--sl-category-text) !important;

	font-size:
		12px;

	font-weight:
		800;
}

.sl-category-community-hero
.sl-button--community-join:hover {

	background:
		var(--sl-category-surface-hover) !important;

	border-color:
		var(--sl-category-blue) !important;

	color:
		var(--sl-category-text) !important;
}


/* =========================================================
   COMMUNITY DESCRIPTION
   ========================================================= */

.sl-category-community-hero
.sl-community-header__description {

	padding:
		0 28px 16px 112px;

	background:
		var(--sl-category-surface) !important;

	color:
		var(--sl-category-text-soft) !important;

	font-size:
		12px;

	line-height:
		1.55;
}


/* =========================================================
   COMMUNITY TABS
   ========================================================= */

.sl-community-tabs {

	min-height:
		51px;

	padding:
		0 18px;

	display:
		flex;

	align-items:
		stretch;

	gap:
		28px;

	border-top:
		1px solid
		var(--sl-category-border-soft) !important;

	background:
		var(--sl-category-surface) !important;
}

.sl-community-tabs a {

	position:
		relative;

	display:
		inline-flex;

	align-items:
		center;

	justify-content:
		center;

	padding:
		0 2px;

	color:
		var(--sl-category-muted) !important;

	font-size:
		13px;

	font-weight:
		650;
}

.sl-community-tabs a:hover {

	color:
		var(--sl-category-text) !important;
}

.sl-community-tabs a.is-active {

	color:
		var(--sl-category-blue-hover) !important;
}

.sl-community-tabs a.is-active::after {

	content:
		"";

	position:
		absolute;

	left:
		0;

	right:
		0;

	bottom:
		0;

	height:
		3px;

	border-radius:
		3px 3px 0 0;

	background:
		var(--sl-category-blue) !important;
}


/* =========================================================
   MAIN FEED CONTAINER
   ========================================================= */

.sl-category-feed {

	width:
		100%;

	background:
		var(--sl-category-surface) !important;

	border:
		1px solid
		var(--sl-category-border) !important;

	border-radius:
		9px;

	overflow:
		hidden;

	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.18);
}


/* =========================================================
   SORT TOOLBAR
   ========================================================= */

.sl-category-toolbar {

	min-height:
		58px;

	padding:
		10px 14px;

	display:
		flex;

	align-items:
		center;

	justify-content:
		space-between;

	gap:
		12px;

	border-bottom:
		1px solid
		var(--sl-category-border-soft) !important;

	background:
		var(--sl-category-surface) !important;
}

.sl-category-sort {

	display:
		flex;

	align-items:
		center;

	gap:
		4px;

	overflow-x:
		auto;

	scrollbar-width:
		none;
}

.sl-category-sort::-webkit-scrollbar {

	display:
		none;
}

.sl-category-sort a {

	min-height:
		36px;

	padding:
		0 13px;

	display:
		inline-flex;

	align-items:
		center;

	justify-content:
		center;

	border-radius:
		20px;

	color:
		var(--sl-category-text-soft) !important;

	font-size:
		12px;

	font-weight:
		750;

	white-space:
		nowrap;
}

.sl-category-sort a:hover {

	background:
		var(--sl-category-surface-hover) !important;

	color:
		var(--sl-category-text) !important;
}

.sl-category-sort a.is-active {

	background:
		var(--sl-category-blue-soft) !important;

	color:
		#ffffff !important;
}


/* =========================================================
   CARD / COMPACT VIEW
   ========================================================= */

.sl-category-view {

	display:
		flex;

	gap:
		2px;

	flex:
		0 0 auto;
}

.sl-category-view button {

	width:
		34px;

	height:
		34px;

	border:
		0;

	border-radius:
		8px;

	background:
		transparent !important;

	color:
		var(--sl-category-muted) !important;

	font-size:
		16px;

	cursor:
		pointer;
}

.sl-category-view button:hover,
.sl-category-view button.is-active {

	background:
		var(--sl-category-surface-hover) !important;

	color:
		var(--sl-category-text) !important;
}


/* =========================================================
   POST LIST
   ========================================================= */

.sl-category-post-list {

	padding:
		0;

	background:
		var(--sl-category-surface);
}

.sl-category-post-list
.sl-post-card {

	margin:
		0;

	border:
		0;

	border-bottom:
		1px solid
		var(--sl-category-border-soft) !important;

	border-radius:
		0;

	background:
		var(--sl-category-surface) !important;

	box-shadow:
		none;

	color:
		var(--sl-category-text) !important;
}

.sl-category-post-list
.sl-post-card:last-child {

	border-bottom:
		0;
}

.sl-category-post-list
.sl-post-card:hover {

	background:
		var(--sl-category-surface-hover) !important;

	border-bottom-color:
		var(--sl-category-border-soft) !important;
}


/* =========================================================
   VOTE RAIL
   ========================================================= */

.sl-category-post-list
.sl-post-vote-rail {

	background:
		var(--sl-category-bg) !important;

	border-right:
		1px solid
		var(--sl-category-border-soft) !important;
}

.sl-category-post-list
.sl-vote-button {

	color:
		var(--sl-category-muted) !important;
}

.sl-category-post-list
.sl-vote-button:hover {

	background:
		var(--sl-category-surface-hover) !important;

	color:
		var(--sl-category-blue-hover) !important;
}

.sl-category-post-list
.sl-vote-button.is-active,
.sl-category-post-list
.sl-vote-button.sl-vote-selected {

	color:
		var(--sl-category-blue-hover) !important;
}

.sl-category-post-list
.sl-vote-button--down.is-active,
.sl-category-post-list
.sl-vote-button--down.sl-vote-selected {

	color:
		#9b72ff !important;
}

.sl-category-post-list
.sl-vote-count {

	color:
		var(--sl-category-text-soft) !important;
}


/* =========================================================
   POST TOPLINE
   ========================================================= */

.sl-category-post-list
.sl-post-card__topline {

	padding-top:
		14px;
}

.sl-category-post-list
.sl-post-community__name {

	color:
		var(--sl-category-text-soft) !important;
}

.sl-category-post-list
.sl-post-community__name:hover {

	color:
		var(--sl-category-blue-hover) !important;
}

.sl-category-post-list
.sl-post-time,
.sl-category-post-list
.sl-post-dot {

	color:
		var(--sl-category-muted) !important;
}


/* =========================================================
   POST TITLE
   ========================================================= */

.sl-category-post-list
.sl-post-title,
.sl-category-post-list
.sl-post-title a {

	color:
		var(--sl-category-text) !important;

	font-size:
		16px;

	font-weight:
		750;

	line-height:
		1.32;

	letter-spacing:
		-0.01em;
}

.sl-category-post-list
.sl-post-title a:hover {

	color:
		var(--sl-category-blue-hover) !important;
}


/* =========================================================
   POST EXCERPT
   ========================================================= */

.sl-category-post-list
.sl-post-excerpt {

	color:
		var(--sl-category-text-soft) !important;

	font-size:
		12px;

	line-height:
		1.55;
}


/* =========================================================
   POST ACTIONS
   ========================================================= */

.sl-category-post-list
.sl-post-action {

	color:
		var(--sl-category-muted) !important;
}

.sl-category-post-list
.sl-post-action:hover {

	background:
		var(--sl-category-surface-hover) !important;

	color:
		var(--sl-category-text) !important;
}

.sl-category-post-list
.sl-post-more {

	color:
		var(--sl-category-muted) !important;
}

.sl-category-post-list
.sl-post-more:hover {

	background:
		var(--sl-category-surface-hover) !important;

	color:
		var(--sl-category-text) !important;
}


/* =========================================================
   POST MEDIA
   ========================================================= */

.sl-category-post-list
.sl-post-media img {

	background:
		var(--sl-category-bg) !important;
}


/* =========================================================
   COMPACT VIEW
   ========================================================= */

.sl-category-post-list[data-category-feed-view="compact"]
.sl-post-card {

	grid-template-columns:
		54px
		minmax(0, 1fr)
		132px;
}

.sl-category-post-list[data-category-feed-view="compact"]
.sl-post-card--no-media {

	grid-template-columns:
		54px
		minmax(0, 1fr);
}

.sl-category-post-list[data-category-feed-view="compact"]
.sl-post-card__topline {

	padding-top:
		9px;
}

.sl-category-post-list[data-category-feed-view="compact"]
.sl-post-excerpt {

	display:
		none;
}

.sl-category-post-list[data-category-feed-view="compact"]
.sl-post-media {

	padding-top:
		9px;

	padding-bottom:
		9px;
}

.sl-category-post-list[data-category-feed-view="compact"]
.sl-post-media img {

	min-height:
		88px;
}


/* =========================================================
   PAGINATION
   ========================================================= */

.sl-category-pagination {

	padding:
		12px 14px 14px;

	border-top:
		1px solid
		var(--sl-category-border-soft) !important;

	background:
		var(--sl-category-surface) !important;
}

.sl-category-pagination
.sl-pagination,
.sl-category-pagination
.nav-links {

	margin:
		0;

	padding:
		0;

	border:
		0;
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.sl-category-empty {

	margin:
		14px;

	background:
		var(--sl-category-surface) !important;

	border:
		1px solid
		var(--sl-category-border) !important;

	color:
		var(--sl-category-text) !important;
}

.sl-category-empty h2 {

	color:
		var(--sl-category-text) !important;
}

.sl-category-empty p {

	color:
		var(--sl-category-muted) !important;
}


/* =========================================================
   RIGHT SIDEBAR
   ========================================================= */

.sl-category-right-sidebar {

	padding:
		0 0 30px !important;

	color:
		var(--sl-category-text) !important;
}

.sl-category-right-sidebar
.sl-community-panel {

	margin-bottom:
		10px;

	padding:
		16px;

	background:
		var(--sl-category-surface) !important;

	border:
		1px solid
		var(--sl-category-border) !important;

	border-radius:
		9px;

	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.18);

	color:
		var(--sl-category-text) !important;
}

.sl-category-right-sidebar
.sl-community-panel__title {

	margin-bottom:
		11px;

	color:
		var(--sl-category-text) !important;

	font-size:
		13px;

	font-weight:
		800;
}

.sl-category-right-sidebar
.sl-community-panel__description {

	margin:
		0;

	color:
		var(--sl-category-muted) !important;

	font-size:
		11px;

	line-height:
		1.55;
}


/* =========================================================
   RIGHT SIDEBAR STATS
   ========================================================= */

.sl-category-stat-row {

	margin-top:
		14px;

	padding-top:
		13px;

	display:
		grid;

	grid-template-columns:
		1fr
		1fr;

	gap:
		10px;

	border-top:
		1px solid
		var(--sl-category-border-soft) !important;
}

.sl-category-stat-row strong {

	display:
		flex;

	align-items:
		center;

	gap:
		5px;

	color:
		var(--sl-category-text) !important;

	font-size:
		13px;
}

.sl-category-stat-row
span:not(.sl-category-online-dot) {

	display:
		block;

	margin-top:
		2px;

	color:
		var(--sl-category-muted) !important;

	font-size:
		10px;
}

.sl-category-online-dot {

	width:
		8px;

	height:
		8px;

	border-radius:
		50%;

	background:
		var(--sl-category-green) !important;

	display:
		inline-block;
}


/* =========================================================
   JOIN BUTTON — RIGHT RAIL
   ========================================================= */

.sl-category-join-button {

	width:
		100%;

	min-height:
		36px;

	margin-top:
		14px;

	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	border:
		1px solid
		var(--sl-category-blue) !important;

	border-radius:
		18px;

	background:
		transparent !important;

	color:
		var(--sl-category-blue-hover) !important;

	font-size:
		11px;

	font-weight:
		800;

	cursor:
		pointer;
}

.sl-category-join-button:hover {

	background:
		var(--sl-category-blue-soft) !important;

	color:
		#fff !important;
}


/* =========================================================
   COMMUNITY RULES
   ========================================================= */

.sl-category-rule-list {

	margin:
		0;

	padding:
		0;

	list-style:
		none;
}

.sl-category-rule-list li {

	min-height:
		31px;

	display:
		flex;

	align-items:
		center;

	justify-content:
		space-between;

	gap:
		10px;

	border-top:
		1px solid
		var(--sl-category-border-soft) !important;

	color:
		var(--sl-category-text-soft) !important;

	font-size:
		10px;
}

.sl-category-rule-list li:first-child {

	border-top:
		0;
}

.sl-category-rule-list b {

	color:
		var(--sl-category-muted-dark) !important;

	font-size:
		16px;

	font-weight:
		400;
}


/* =========================================================
   TRENDING COMMUNITIES
   ========================================================= */

.sl-category-trending-list {

	display:
		flex;

	flex-direction:
		column;
}

.sl-category-trending-item {

	min-height:
		49px;

	display:
		flex;

	align-items:
		center;

	gap:
		9px;

	border-top:
		1px solid
		var(--sl-category-border-soft) !important;
}

.sl-category-trending-item:first-child {

	border-top:
		0;
}

.sl-category-trending-item:hover
.sl-category-trending-copy strong {

	color:
		var(--sl-category-blue-hover) !important;
}

.sl-category-trending-avatar {

	width:
		31px;

	height:
		31px;

	flex:
		0 0 31px;

	display:
		inline-flex;

	align-items:
		center;

	justify-content:
		center;

	border-radius:
		50%;

	background:
		var(--sl-category-surface-raised) !important;

	color:
		var(--sl-category-text-soft) !important;

	font-size:
		10px;

	font-weight:
		800;
}

.sl-category-trending-copy {

	min-width:
		0;

	flex:
		1;
}

.sl-category-trending-copy strong {

	display:
		block;

	overflow:
		hidden;

	color:
		var(--sl-category-text-soft) !important;

	font-size:
		10px;

	font-weight:
		750;

	text-overflow:
		ellipsis;

	white-space:
		nowrap;
}

.sl-category-trending-copy small {

	display:
		block;

	margin-top:
		2px;

	color:
		var(--sl-category-muted) !important;

	font-size:
		9px;
}

.sl-category-trending-item > b {

	color:
		var(--sl-category-muted-dark) !important;

	font-size:
		16px;

	font-weight:
		400;
}

.sl-category-view-more,
.sl-category-help-link {

	display:
		inline-block;

	margin-top:
		10px;

	color:
		var(--sl-category-blue-hover) !important;

	font-size:
		10px;

	font-weight:
		750;
}

.sl-category-view-more:hover,
.sl-category-help-link:hover {

	text-decoration:
		underline;
}


/* =========================================================
   TYPOGRAPHY POLISH
   ========================================================= */

body.category,
body.category button,
body.category input,
body.category textarea,
body.category select {

	font-family:
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		Helvetica,
		Arial,
		sans-serif;
}

body.category
.sl-category-community-hero,
body.category
.sl-category-feed,
body.category
.sl-category-right-sidebar {

	-webkit-font-smoothing:
		antialiased;

	-moz-osx-font-smoothing:
		grayscale;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1200px) {

	.sl-layout--category {

		width:
			min(
				calc(100% - 20px),
				1040px
			) !important;

		grid-template-columns:
			220px
			minmax(0, 1fr) !important;
	}

	.sl-category-content {

		grid-column:
			2;

		padding-top:
			16px;
	}

	.sl-category-lower-row {

		grid-template-columns:
			minmax(0, 1fr);
	}

	.sl-category-lower-row >
	.sl-category-right-sidebar {

		display:
			none !important;
	}

	.sl-layout--category > .sl-sidebar {

		left:
			max(
				10px,
				calc((100vw - 1040px) / 2)
			) !important;
	}
}


/* =========================================================
   SMALL TABLET
   ========================================================= */

@media (max-width: 900px) {

	.sl-layout--category {

		width:
			min(
				calc(100% - 16px),
				820px
			) !important;

		grid-template-columns:
			190px
			minmax(0, 1fr) !important;
	}

	.sl-category-lower-row {

		grid-template-columns:
			minmax(0, 1fr);
	}

	.sl-category-lower-row >
	.sl-category-right-sidebar {

		display:
			none !important;
	}

	.sl-layout--category > .sl-sidebar {

		left:
			max(
				8px,
				calc((100vw - 820px) / 2)
			) !important;
	}

	.sl-category-community-hero
	.sl-community-identity {

		padding-inline:
			18px;
	}

	.sl-category-community-hero
	.sl-community-header__description {

		padding-left:
			102px;
	}
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

	.sl-layout--category {

		width:
			100% !important;

		display:
			block !important;
	}

	.sl-layout--category > .sl-sidebar {

		display:
			none !important;
	}

	.sl-category-content {

		grid-column:
			1;

		padding:
			10px 8px 70px;
	}

	.sl-category-lower-row {

		grid-template-columns:
			1fr;
	}

	.sl-category-lower-row >
	.sl-category-right-sidebar {

		display:
			none !important;
	}

	.sl-main-content--category {

		padding:
			0 !important;
	}

	.sl-category-community-hero {

		margin-bottom:
			8px !important;

		border-radius:
			7px;
	}

	.sl-category-community-hero
	.sl-community-cover {

		height:
			112px;
	}

	.sl-category-community-hero
	.sl-community-identity {

		min-height:
			112px;

		padding:
			0 14px 12px;

		flex-wrap:
			wrap;

		align-content:
			flex-start;
	}

	.sl-category-community-hero
	.sl-community-identity__avatar {

		width:
			58px;

		height:
			58px;

		flex-basis:
			58px;

		margin-top:
			-25px;
	}

	.sl-category-community-hero
	.sl-community-identity__copy h1 {

		font-size:
			18px;
	}

	.sl-category-community-hero
	.sl-community-identity__actions {

		width:
			100%;

		margin-left:
			72px;

		margin-top:
			-7px;
	}

	.sl-category-community-hero
	.sl-community-header__description {

		padding:
			0 14px 13px;
	}

	.sl-community-tabs {

		gap:
			20px;

		overflow-x:
			auto;
	}

	.sl-category-toolbar {

		min-height:
			58px;

		padding:
			10px;
	}

	.sl-category-sort a {

		min-height:
			34px;

		padding-inline:
			11px;
	}

	.sl-category-post-list
	.sl-post-card,
	.sl-category-post-list
	.sl-post-card--no-media {

		display:
			block;
	}

	.sl-category-post-list
	.sl-post-vote-rail {

		display:
			none;
	}

	.sl-category-post-list
	.sl-post-card__body {

		width:
			100%;
	}

	.sl-category-post-list
	.sl-post-media {

		width:
			100%;

		height:
			auto;

		padding:
			0 12px 12px;
	}

	.sl-category-post-list
	.sl-post-media img {

		width:
			100%;

		height:
			auto;

		min-height:
			0;

		max-height:
			420px;

		aspect-ratio:
			16 / 10;

		object-fit:
			cover;
	}
}


/* =========================================================
   SMALL PHONE
   ========================================================= */

@media (max-width: 480px) {

	.sl-category-content {

		padding-inline:
			5px;
	}

	.sl-category-community-hero
	.sl-community-identity__actions {

		margin-left:
			0;
	}

	.sl-community-tabs {

		padding-inline:
			14px;
	}

	.sl-category-view {

		display:
			none;
	}
}