/**
 * Stylesheet: FanFeed
 * Author: Marisa1980
 * Description: Import and display CSS for FanFeed.js
 * Other: This stylesheet can not run on mobile site
**/

/* Main container */
.fan-feed-wrapper {
	background: var(--theme-link-dynamic-color-2);
	padding: 20px 30px;
}

/* Inner content */
.fan-feed {
	margin: 0 auto;
}

.fan-feed h2 {
	color: var(--theme-page-text-color);
	margin-bottom: 10px;
}

/* Grid layout */
.fan-feed-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 20px;
}

/* Sidebar */
.fan-feed-sidebar {
	background: var(--theme-page-dynamic-color-1--inverted);
	border: 1px solid rgba(var(--theme-page-text-color--rgb),.3);
	border-radius: 3px;
	padding: 15px;
	max-height: 300px;
}

.fan-feed-sidebar h3 {
	display: flex;
	background: var(--theme-sticky-nav-background-color);
	color: var(--theme-sticky-nav-text-color);
	padding: 20px 12px;
	margin: -15px;
	border-radius: 3px 3px 0 0;
	font-size: 17px;
	line-height: normal;
	align-items: center;
	max-height: 60px;
}

.fan-feed-sidebar ul {
	display: flex;
	flex-direction: column;
	list-style: none;
	padding: 0;
	margin: 25px 0;
}

.fan-feed-sidebar li {
	position: relative;
	display: flex;
	margin: 12px 0;
	counter-increment: item;
}

.fan-feed-sidebar li:not(:last-child) {
	border-bottom: 1px solid rgba(var(--theme-page-text-color--rgb),.3);
	padding-bottom: 25px;
}

.fan-feed-sidebar li a {
	text-decoration: none;
	color: var(--theme-page-text-color);
	display: flex;
	align-items: center;
	line-height: normal;
}

.fan-feed-sidebar li a:after {
    content: "";
    position: absolute;
    inset: 0;
}

.fan-feed-sidebar li::before {
	content: counter(item);
	display: flex;
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	margin-right: 10px;
	border-radius: 50%;
	background: var(--theme-border-color);
	justify-content: center;
	align-items: center;
	font-weight: bold;
	color: var(--theme-page-text-color);
}

/* Article tile */
.fan-feed-tile {
	position: relative;
	overflow: hidden;
	border-radius: 3px;
	border: 1px solid rgba(var(--theme-page-text-color--rgb),.3);
	text-decoration: none;
	color: #fff;
	max-height: 300px;
}

.fan-feed-tile img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
}

.fan-feed-tile .overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 15px;
	background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.0));
}

.fan-feed-tile h4 {
	padding: 50px 0 0;
	font-size: 16px;
	font-weight: bold;
	color: white;
}

.fan-feed-tile p {
	margin: 5px 0 0;
	font-size: 13px;
	font-weight: bold;
	color: #888;
}

@media screen and (max-width: 1023px) {
	.fan-feed-grid {
		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	}
	
	.fan-feed-tile,
	.fan-feed-sidebar {
		max-height: 220px;
	}

	.fan-feed-sidebar h3 {
		padding: 12px;
	}
	
	.fan-feed-sidebar li {
		margin: 5px 0;
	}

	.fan-feed-sidebar ul {
		margin: 20px 0;
	}

	.fan-feed-sidebar li:not(:last-child) {
		padding-bottom: 10px;
}


@media screen and (max-width: 500px) {
	.fan-feed-grid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}
}