/*
 * StudentLife Reddit
 * Global feed post-card layout.
 *
 * Purpose:
 * - Reddit-style horizontal post card
 * - No left-side vote rail
 * - Vote controls live in the bottom action bar
 * - Featured image remains on the right
 * - Bottom action bar spans the complete card
 *
 * Loaded after the main theme/community CSS.
 */


/* =========================================================
   POST CARD — BASE STRUCTURE
   ========================================================= */

.sl-post-card {

	position: relative;

	width: 100%;
	min-width: 0;

	margin: 0 0 10px;
	padding: 0;

	display: grid;

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

	grid-template-areas:

		"body media"
		"actions actions";

	grid-template-rows:
		minmax(0, 1fr)
		auto;

	overflow: hidden;

	background:
		var(--sl-surface);

	border:
		1px solid
		var(--sl-border);

	border-radius:
		var(--sl-radius);

	color:
		var(--sl-text);

	transition:
		background 0.12s ease,
		border-color 0.12s ease;
}


.sl-post-card:last-child {
	margin-bottom: 0;
}


.sl-post-card:hover {

	background:
		var(--sl-surface-hover);

	border-color:
		#3a4650;
}


/* =========================================================
   NO MEDIA
   ========================================================= */

.sl-post-card--no-media {

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

	grid-template-areas:

		"body"
		"actions";
}


/* =========================================================
   POST BODY
   ========================================================= */

.sl-post-card__body {

	grid-area:
		body;

	min-width: 0;

	min-height:
		170px;

	display:
		flex;

	flex-direction:
		column;
}


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

.sl-post-card__topline {

	min-width: 0;

	padding:
		14px 15px 5px;

	display:
		flex;

	align-items:
		center;

	justify-content:
		space-between;

	gap:
		10px;
}


.sl-post-community {

	min-width: 0;

	display:
		flex;

	align-items:
		center;

	gap:
		7px;

	color:
		var(--sl-muted);

	font-size:
		10px;

	line-height:
		1.2;

	white-space:
		nowrap;
}


.sl-community-avatar {

	width:
		28px;

	height:
		28px;

	flex:
		0 0 28px;

	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	border-radius:
		50%;

	background:
		var(--sl-orange);

	color:
		#fff;

	font-size:
		10px;

	font-weight:
		900;
}


.sl-post-community__name {

	min-width:
		0;

	overflow:
		hidden;

	color:
		var(--sl-text);

	font-weight:
		800;

	text-overflow:
		ellipsis;
}


.sl-post-community__name:hover {

	color:
		var(--sl-blue-hover, #2f7aff);

	text-decoration:
		underline;
}


.sl-post-dot {
	color:
		var(--sl-muted-dark);
}


.sl-post-time {

	color:
		var(--sl-muted);
}


/* =========================================================
   POST MORE BUTTON
   ========================================================= */

.sl-post-more {

	width:
		30px;

	height:
		30px;

	flex:
		0 0 30px;

	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	padding:
		0;

	border:
		0;

	border-radius:
		50%;

	background:
		transparent;

	color:
		var(--sl-muted);

	cursor:
		pointer;

	font-size:
		13px;

	line-height:
		1;

	letter-spacing:
		2px;
}


.sl-post-more:hover {

	background:
		var(--sl-surface-hover);

	color:
		var(--sl-text);
}


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

.sl-post-card__title-row {

	min-width:
		0;

	padding:
		0 15px;
}


.sl-post-title,
.sl-post-card__title {

	margin:
		0 0 7px;

	color:
		var(--sl-text);

	font-size:
		17px;

	font-weight:
		800;

	line-height:
		1.32;

	letter-spacing:
		-0.015em;

	word-break:
		break-word;
}


.sl-post-title a,
.sl-post-card__title a {

	color:
		inherit;

	text-decoration:
		none;
}


.sl-post-title a:hover,
.sl-post-card__title a:hover {

	color:
		var(--sl-blue-hover, #2f7aff);

	text-decoration:
		none;
}


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

.sl-post-excerpt {

	padding:
		0 15px 12px;

	color:
		var(--sl-text-soft, #b8c0c7);

	font-size:
		12px;

	line-height:
		1.55;

	word-break:
		break-word;
}


.sl-post-excerpt p {
	margin: 0;
}


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

.sl-post-media {

	grid-area:
		media;

	width:
		100%;

	height:
		100%;

	min-width:
		0;

	min-height:
		170px;

	padding:
		12px 12px 12px 0;

	display:
		block;

	overflow:
		hidden;
}


.sl-post-media img {

	width:
		100%;

	height:
		100%;

	min-width:
		0;

	min-height:
		145px;

	display:
		block;

	object-fit:
		cover;

	border-radius:
		8px;

	background:
		#0d1216;
}


/* =========================================================
   BOTTOM ACTION BAR
   ========================================================= */

.sl-post-card .sl-post-actions {

	grid-area:
		actions;

	min-width:
		0;

	min-height:
		40px;

	margin:
		0;

	padding:
		4px 9px;

	display:
		flex;

	align-items:
		center;

	gap:
		5px;

	overflow-x:
		auto;

	scrollbar-width:
		none;

	background:
		#1a2126;

	border-top:
		1px solid
		var(--sl-border-soft, #20282f);
}


.sl-post-card .sl-post-actions::-webkit-scrollbar {
	display:
		none;
}


/* =========================================================
   INLINE VOTING
   ========================================================= */

.sl-post-vote-inline {

	min-height:
		30px;

	flex:
		0 0 auto;

	display:
		inline-flex;

	align-items:
		center;

	gap:
		0;

	border-radius:
		7px;

	background:
		#293238;

	overflow:
		hidden;
}


.sl-post-vote-inline .sl-vote-button {

	width:
		30px;

	height:
		30px;

	min-width:
		30px;

	padding:
		0;

	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	border:
		0;

	border-radius:
		0;

	background:
		transparent;

	color:
		#d4dbe0;

	cursor:
		pointer;

	font-size:
		17px;

	font-weight:
		900;

	line-height:
		1;
}


.sl-post-vote-inline .sl-vote-button:hover {

	background:
		#354047;

	color:
		var(--sl-orange);
}


.sl-post-vote-inline .sl-vote-button--down:hover {

	color:
		#8aa7ff;
}


.sl-post-vote-inline .sl-vote-button.is-active,
.sl-post-vote-inline .sl-vote-button.sl-vote-selected {

	background:
		#354047;

	color:
		var(--sl-orange);
}


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

	color:
		#8aa7ff;
}


.sl-post-vote-inline .sl-vote-count {

	min-width:
		28px;

	height:
		30px;

	display:
		inline-flex;

	align-items:
		center;

	justify-content:
		center;

	padding:
		0 2px;

	color:
		#f3f5f7;

	font-size:
		11px;

	font-weight:
		800;

	line-height:
		1;
}


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

.sl-post-card .sl-post-action {

	min-height:
		30px;

	padding:
		0 10px;

	flex:
		0 0 auto;

	display:
		inline-flex;

	align-items:
		center;

	justify-content:
		center;

	gap:
		5px;

	border:
		0;

	border-radius:
		7px;

	background:
		#293238;

	color:
		#d4dbe0;

	font-size:
		11px;

	font-weight:
		700;

	line-height:
		1;

	text-decoration:
		none;

	cursor:
		pointer;
}


.sl-post-card .sl-post-action:hover {

	background:
		#354047;

	color:
		#fff;

	text-decoration:
		none;
}


.sl-post-card .sl-post-action__icon {

	font-size:
		13px;

	line-height:
		1;
}


.sl-post-card .sl-post-action__label {
	display:
		inline;
}


/* =========================================================
   LOADING / VOTING STATE
   ========================================================= */

.sl-post-card.is-voting
.sl-post-vote-inline .sl-vote-button {

	cursor:
		wait;

	opacity:
		0.65;
}


/* =========================================================
   LEGACY VOTE RAIL — NEVER SHOW ON FEED CARDS
   ========================================================= */

.sl-post-card .sl-post-vote-rail {
	display:
		none !important;
}


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

.sl-feed.is-compact .sl-post-card {

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


.sl-feed.is-compact .sl-post-card__body {
	min-height:
		135px;
}


.sl-feed.is-compact .sl-post-media {

	min-height:
		135px;

	padding-top:
		9px;

	padding-bottom:
		9px;
}


.sl-feed.is-compact .sl-post-media img {
	min-height:
		110px;
}


.sl-feed.is-compact .sl-post-title,
.sl-feed.is-compact .sl-post-card__title {

	font-size:
		14px;
}


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

@media (max-width: 1180px) {

	.sl-post-card {

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

	.sl-post-card--no-media {

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

}


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

@media (max-width: 900px) {

	.sl-post-card {

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

	.sl-post-card--no-media {

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

	.sl-post-media {

		padding-right:
			9px;
	}

	.sl-post-media img {

		min-height:
			125px;
	}

}


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

@media (max-width: 700px) {

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

		width:
			100%;

		display:
			grid;

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

		grid-template-areas:

			"body"
			"media"
			"actions";

		grid-template-rows:
			auto
			auto
			auto;

		margin-bottom:
			8px;

		border-radius:
			8px;
	}


	.sl-post-card--no-media {

		grid-template-areas:

			"body"
			"actions";
	}


	.sl-post-card__body {

		width:
			100%;

		min-height:
			0;
	}


	.sl-post-card__topline {

		padding:
			10px 10px 5px;
	}


	.sl-post-community {

		font-size:
			10px;
	}


	.sl-community-avatar {

		width:
			25px;

		height:
			25px;

		flex-basis:
			25px;
	}


	.sl-post-card__title-row {

		padding:
			0 10px;
	}


	.sl-post-title,
	.sl-post-card__title {

		font-size:
			15px;

		line-height:
			1.32;
	}


	.sl-post-excerpt {

		padding:
			0 10px 10px;

		font-size:
			11px;

		line-height:
			1.5;
	}


	.sl-post-media {

		width:
			100%;

		height:
			auto;

		min-height:
			0;

		padding:
			0 10px 8px;
	}


	.sl-post-media img {

		width:
			100%;

		height:
			auto;

		min-height:
			0;

		max-height:
			460px;

		aspect-ratio:
			16 / 10;

		object-fit:
			cover;

		border-radius:
			7px;
	}


	.sl-post-card .sl-post-actions {

		min-height:
			38px;

		padding:
			4px 7px;
	}


	.sl-post-card .sl-post-action {

		min-height:
			29px;

		padding:
			0 8px;

		font-size:
			10px;
	}


	.sl-post-vote-inline {

		min-height:
			29px;
	}


	.sl-post-vote-inline .sl-vote-button {

		width:
			29px;

		height:
			29px;

		min-width:
			29px;
	}


	.sl-post-vote-inline .sl-vote-count {

		height:
			29px;

		min-width:
			25px;
	}

}


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

@media (max-width: 480px) {

	.sl-post-card .sl-post-action__label {

		display:
			none;
	}


	.sl-post-card .sl-post-action {

		width:
			34px;

		padding:
			0;
	}


	.sl-post-vote-inline .sl-vote-button {

		width:
			28px;

		min-width:
			28px;
	}


	.sl-post-vote-inline .sl-vote-count {

		min-width:
			24px;
	}

}
/* =========================================================
   SINGLE POST — SHARED REDDIT ACTION BAR
   ========================================================= */

/*
 * The single-post page now uses the same action-bar markup
 * as the feed post card.
 *
 * Keep these rules scoped to the single layout so nothing
 * outside the individual post page is changed.
 */

.sl-layout--single .sl-single-post__actions.sl-post-actions {

	width: 100%;

	min-width: 0;

	min-height: 42px;

	margin: 0;

	padding: 5px 9px;

	display: flex;

	align-items: center;

	gap: 5px;

	overflow-x: auto;

	scrollbar-width: none;

	background: #1a2126;

	border-top: 1px solid var(--sl-border-soft, #20282f);
}


.sl-layout--single .sl-single-post__actions.sl-post-actions::-webkit-scrollbar {
	display: none;
}


/* ---------------------------------------------------------
   INLINE VOTE CONTROL
   --------------------------------------------------------- */

.sl-layout--single .sl-single-post__actions .sl-post-vote-inline {

	min-height: 30px;

	flex: 0 0 auto;

	display: inline-flex;

	align-items: center;

	gap: 0;

	border-radius: 7px;

	background: #293238;

	overflow: hidden;
}


.sl-layout--single .sl-single-post__actions .sl-vote-button {

	width: 30px;

	height: 30px;

	min-width: 30px;

	padding: 0;

	display: flex;

	align-items: center;

	justify-content: center;

	border: 0;

	border-radius: 0;

	background: transparent;

	color: #d4dbe0;

	cursor: pointer;

	font-size: 17px;

	font-weight: 900;

	line-height: 1;
}


.sl-layout--single .sl-single-post__actions .sl-vote-button:hover {

	background: #354047;

	color: var(--sl-orange);
}


.sl-layout--single
.sl-single-post__actions
.sl-vote-button--down:hover {

	color: #8aa7ff;
}


.sl-layout--single
.sl-single-post__actions
.sl-vote-button.is-active {

	background: #354047;

	color: var(--sl-orange);
}


.sl-layout--single
.sl-single-post__actions
.sl-vote-button--down.is-active {

	color: #8aa7ff;
}


.sl-layout--single .sl-single-post__actions .sl-vote-count {

	min-width: 28px;

	height: 30px;

	display: inline-flex;

	align-items: center;

	justify-content: center;

	padding: 0 2px;

	color: #f3f5f7;

	font-size: 11px;

	font-weight: 800;

	line-height: 1;
}


/* ---------------------------------------------------------
   COMMENTS / SHARE / SAVE / MORE
   --------------------------------------------------------- */

.sl-layout--single .sl-single-post__actions .sl-post-action {

	min-height: 30px;

	padding: 0 10px;

	flex: 0 0 auto;

	display: inline-flex;

	align-items: center;

	justify-content: center;

	gap: 5px;

	border: 0;

	border-radius: 7px;

	background: #293238;

	color: #d4dbe0;

	font-size: 11px;

	font-weight: 700;

	line-height: 1;

	text-decoration: none;

	cursor: pointer;
}


.sl-layout--single .sl-single-post__actions .sl-post-action:hover {

	background: #354047;

	color: #fff;

	text-decoration: none;
}


.sl-layout--single
.sl-single-post__actions
.sl-post-action__icon {

	font-size: 13px;

	line-height: 1;
}


.sl-layout--single
.sl-single-post__actions
.sl-post-action__label {

	display: inline;
}


/* ---------------------------------------------------------
   SINGLE POST ACTION BAR — MOBILE
   --------------------------------------------------------- */

@media (max-width: 600px) {

	.sl-layout--single .sl-single-post__actions.sl-post-actions {

		padding-left: 7px;

		padding-right: 7px;

		gap: 4px;
	}


	.sl-layout--single
	.sl-single-post__actions
	.sl-post-action {

		padding-left: 8px;

		padding-right: 8px;
	}

}
/* =========================================================
   AJAX LOAD MORE
   ========================================================= */

.sl-load-more-wrap {

	width: 100%;

	margin: 18px 0 8px;

	display: flex;

	justify-content: center;

	align-items: center;
}


.sl-load-more-button {

	min-width: 170px;

	min-height: 42px;

	padding: 0 24px;

	display: inline-flex;

	align-items: center;

	justify-content: center;

	gap: 8px;

	border: 1px solid var(--sl-border);

	border-radius: 999px;

	background: var(--sl-surface);

	color: var(--sl-text);

	font-family: inherit;

	font-size: 13px;

	font-weight: 700;

	line-height: 1;

	cursor: pointer;

	transition:
		background 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease,
		transform 0.15s ease;
}


.sl-load-more-button:hover:not(:disabled) {

	background: var(--sl-surface-hover);

	border-color: var(--sl-accent);

	color: var(--sl-accent);

	transform: translateY(-1px);
}


.sl-load-more-button:active:not(:disabled) {

	transform: translateY(0);
}


.sl-load-more-button:disabled {

	cursor: default;

	opacity: 0.65;
}


.sl-load-more-button.is-loading {

	cursor: wait;

	opacity: 0.75;
}


.sl-load-more-button.is-loading::after {

	content: '';

	width: 13px;

	height: 13px;

	border: 2px solid currentColor;

	border-right-color: transparent;

	border-radius: 50%;

	animation:
		sl-load-more-spin 0.7s linear infinite;
}


.sl-load-more-button.is-complete {

	min-width: 190px;

	background: transparent;

	border-color: transparent;

	color: var(--sl-muted);

	opacity: 1;
}


.sl-load-more__complete {

	display: inline-flex;

	align-items: center;

	justify-content: center;
}


@keyframes sl-load-more-spin {

	to {
		transform: rotate(360deg);
	}

}


@media (max-width: 600px) {

	.sl-load-more-wrap {

		margin-top: 14px;

		margin-bottom: 6px;
	}


	.sl-load-more-button {

		width: 100%;

		min-width: 0;

		max-width: 100%;

		min-height: 44px;
	}

}