/*
 * Astra Custom Child
 * Classic Homepage
 */


/* =========================================================
   HOMEPAGE
   ========================================================= */

.custom-homepage {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: #ffffff;
}

.custom-homepage .custom-container {
	width: calc(100% - 40px) !important;
	max-width: 1100px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.homepage-main-layout {
	display: grid !important;

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

	gap: 30px !important;

	width: 100% !important;

	margin: 0 !important;

	padding-top: 30px !important;
	padding-bottom: 50px !important;

	align-items: start !important;
}

.homepage-content {
	width: 100% !important;
	min-width: 0 !important;
}


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

.homepage-post-list {
	width: 100% !important;
}


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

.homepage-post-item {
	display: grid !important;

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

	gap: 22px !important;

	width: 100% !important;

	margin: 0 0 28px !important;
	padding: 0 0 26px !important;

	border-bottom: 1px solid #e5e5e5 !important;

	align-items: start !important;
}

.homepage-post-item:last-child {
	margin-bottom: 0 !important;
}


/* =========================================================
   THUMBNAIL
   ========================================================= */

.homepage-post-thumbnail {
	width: 250px !important;
	height: 160px !important;

	overflow: hidden;

	background: #eeeeee;

	flex-shrink: 0 !important;
}

.homepage-post-thumbnail a {
	display: block;

	width: 100%;
	height: 100%;
}

.homepage-post-thumbnail img {
	display: block;

	width: 100% !important;
	height: 100% !important;

	object-fit: cover;

	transition: transform 0.2s ease;
}

.homepage-post-thumbnail a:hover img {
	transform: scale(1.03);
}

.homepage-post-placeholder {
	display: flex;

	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;

	background: #eeeeee;
}

.homepage-post-placeholder span {
	color: #999999;

	font-size: 13px;
}


/* =========================================================
   POST CONTENT
   ========================================================= */

.homepage-post-content {
	width: 100% !important;
	min-width: 0 !important;
}


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

.homepage-post-title {
	margin: 0 0 9px !important;
	padding: 0 !important;

	font-size: 25px !important;
	font-weight: 700 !important;

	line-height: 1.3 !important;
}

.homepage-post-title a {
	color: #1769aa !important;

	text-decoration: none;
}

.homepage-post-title a:hover {
	color: #0b4f82 !important;

	text-decoration: underline;
}


/* =========================================================
   META
   ========================================================= */

.homepage-post-meta {
	display: flex;

	align-items: center;

	flex-wrap: wrap;

	gap: 6px;

	margin: 0 0 10px !important;

	color: #888888;

	font-size: 12px !important;

	line-height: 1.5;
}

.homepage-meta-icon {
	margin-right: 1px;

	color: #aaaaaa;

	font-size: 8px;
}

.homepage-meta-separator {
	color: #cccccc;
}

.homepage-meta-text {
	color: #888888;
}

.homepage-post-category {
	color: #1769aa;

	text-decoration: none;
}

.homepage-post-category:hover {
	text-decoration: underline;
}


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

.homepage-post-excerpt {
	color: #555555;

	font-size: 14px !important;

	line-height: 1.65 !important;
}

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

.homepage-comment-link {
	margin-left: 7px;

	color: #79a95b;

	font-size: 12px !important;

	text-decoration: none;
}

.homepage-comment-link:hover {
	text-decoration: underline;
}


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

.homepage-pagination {
	margin-top: 30px !important;

	padding-top: 18px !important;

	text-align: left;

	border-top: 1px solid #e5e5e5;
}

.homepage-pagination .page-numbers {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	min-width: 34px !important;
	height: 34px !important;

	margin-right: 5px;

	padding: 0 10px;

	color: #444444;

	background: #ffffff;

	border: 1px solid #d8d8d8;

	font-size: 12px !important;

	line-height: 1;

	text-decoration: none;
}

.homepage-pagination .page-numbers:hover,
.homepage-pagination .page-numbers.current {
	color: #ffffff;

	background: #3b82c4;

	border-color: #3b82c4;
}


/* =========================================================
   NO POSTS
   ========================================================= */

.homepage-no-posts {
	padding: 35px;

	text-align: center;

	border: 1px solid #eeeeee;
}

.homepage-no-posts h2 {
	margin: 0 0 10px;

	font-size: 24px;
}

.homepage-no-posts p {
	margin: 0;

	font-size: 14px;
}


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

@media (max-width: 1000px) {

	.custom-homepage .custom-container {
		width: calc(100% - 30px) !important;

		max-width: 920px !important;
	}

	.homepage-main-layout {
		grid-template-columns: minmax(0, 1fr) 245px !important;

		gap: 24px !important;
	}

	.homepage-post-item {
		grid-template-columns: 220px minmax(0, 1fr) !important;

		gap: 18px !important;
	}

	.homepage-post-thumbnail {
		width: 220px !important;

		height: 145px !important;
	}

	.homepage-post-title {
		font-size: 22px !important;
	}

	.homepage-post-meta {
		font-size: 11px !important;
	}

	.homepage-post-excerpt {
		font-size: 13px !important;
	}

}


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

@media (max-width: 768px) {

	.custom-homepage .custom-container {
		width: calc(100% - 24px) !important;

		max-width: 650px !important;
	}

	.homepage-main-layout {
		display: block !important;

		padding-top: 22px !important;

		padding-bottom: 35px !important;
	}

	.homepage-post-item {
		grid-template-columns: 165px minmax(0, 1fr) !important;

		gap: 15px !important;

		margin-bottom: 24px !important;

		padding-bottom: 22px !important;
	}

	.homepage-post-thumbnail {
		width: 165px !important;

		height: 120px !important;
	}

	.homepage-post-title {
		font-size: 19px !important;

		line-height: 1.35 !important;
	}

	.homepage-post-meta {
		font-size: 10px !important;

		margin-bottom: 7px !important;
	}

	.homepage-post-excerpt {
		font-size: 12px !important;

		line-height: 1.55 !important;
	}

	.homepage-comment-link {
		font-size: 10px !important;
	}

}


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

@media (max-width: 600px) {

	.homepage-post-item {
		grid-template-columns: 145px minmax(0, 1fr) !important;

		gap: 13px !important;
	}

	.homepage-post-thumbnail {
		width: 145px !important;

		height: 105px !important;
	}

	.homepage-post-title {
		font-size: 18px !important;

		line-height: 1.35 !important;
	}

	.homepage-post-meta {
		font-size: 9px !important;
	}

	.homepage-post-excerpt {
		font-size: 11px !important;

		line-height: 1.55 !important;
	}

	.homepage-comment-link {
		font-size: 9px !important;
	}

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 400px) {

	.custom-homepage .custom-container {
		width: calc(100% - 16px) !important;
	}

	.homepage-post-item {
		grid-template-columns: 130px minmax(0, 1fr) !important;

		gap: 11px !important;
	}

	.homepage-post-thumbnail {
		width: 130px !important;

		height: 95px !important;
	}

	.homepage-post-title {
		font-size: 17px !important;
	}

	.homepage-post-meta {
		font-size: 9px !important;
	}

	.homepage-post-excerpt {
		font-size: 10px !important;
	}

	.homepage-comment-link {
		font-size: 9px !important;
	}

}