/* ==========================================================================
   CONTENT GRID PAGE CUSTOMIZATION
   Styling for pages with content grid components
   ========================================================================== */

/* Creates gradient text effect for headings */
.geely-gadient .pp-primary-title {
	background: linear-gradient(
		270deg,
		#b31d2f 0.68%,
		#7d4a99 36%,
		#685ab4 51%,
		#2e75d8 66%,
		#94b0e8 82.5%,
		#50bbca 98%
	);
	-webkit-background-clip: text; /* Clips background to text */
	background-clip: text;
	-webkit-text-fill-color: transparent; /* Makes text transparent to show gradient */
	display: inline-block; /* Ensures gradient applies properly */
}

/* Sets font and limits title height in content grid */
.pp-content-post .pp-post-title,
.pp-content-post .pp-post-title a {
	font-family: LINESeedSansTH, Verdana, Arial, sans-serif;
	font-weight: 400;
	font-size: 26px;
	display: -webkit-box;
	-webkit-line-clamp: 2; /* Limits to 2 lines */
	line-clamp: 2; /* Standard property for compatibility */
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 30px !important;
}

/* Styles the "Load More" button in content grid */
.pp-content-grid-load-more a {
	padding-top: 8px !important;
	padding-right: 24px !important;
	padding-bottom: 8px !important;
	padding-left: 24px !important;
	font-size: 14px !important;
	font-family: LINESeedSansTH, Verdana, Arial, sans-serif;
	font-weight: 400;
}

/* ==========================================================================
   POST FILTER STYLING
   Customizes the filtering tabs for content
   ========================================================================== */

/* Sets full width for filter container with bottom margin */
.pp-post-filters-wrapper {
	width: 100%;
	margin: 0px 0px 80px 0px; /* Large bottom margin */
	padding: 0;
}

/* Creates evenly distributed filter tabs with flex layout */
.pp-post-filters {
	display: flex;
	justify-content: space-between; /* Distributes items evenly */
	width: 100%;
	padding: 0;
	margin: 0;
	list-style: none;
}

/* Styles individual filter tabs */
.pp-post-filter {
	flex: 1; /* Each tab takes equal space */
	text-align: center;
	padding: 10px 0;
	cursor: pointer;
	transition: all 0.3s ease; /* Smooth transition */
	border-bottom: 2px solid transparent; /* Transparent border by default */
}

/* Styles active filter tab with gradient border */
.pp-post-filter.pp-filter-active {
	font-size: 20px;
	border: none;
	border-bottom: 2px solid;
	border-image-source: linear-gradient(
		270deg,
		#b31d2f 0.68%,
		#7d4a99 36%,
		#685ab4 51%,
		#2e75d8 66%,
		#94b0e8 82.5%,
		#50bbca 98%
	);
	border-image-slice: 1; /* Ensures gradient applies to entire border */
}

/* Adds light gray bottom border to all filter tabs */
ul.pp-post-filters li {
	border-bottom: 2px solid #eaeaea !important;
	padding-bottom: 20px !important;
}

/* Adjusts filter tabs on mobile devices */
@media (max-width: 768px) {
	.pp-post-filter.pp-filter-active {
		font-size: 14px; /* Smaller font on mobile */
	}

	/* Removes horizontal padding on filter tabs for mobile */
	ul.pp-post-filters li {
		padding-right: 0px !important;
		padding-left: 0px !important;
	}
}