/* ==========================================================================
   Blog Listing -- post cards
   --------------------------------------------------------------------------
   Card layout for template-parts/archive.php (blog home, category, tag,
   author and date archives).

     image (rounded)
     CATEGORY  ·  14 Feb 2017
     Title
     Excerpt
     ----------------------------------------
     (avatar) Author name          Read More ->

   The cards use their own .blog-card-* classes so the older .blog-post-*
   rules in adluge-system.css no longer apply to them. The header, search,
   category filter and pagination are untouched.

   Colours and type follow the design tokens in adluge-system.css
   (#101F45 navy, #5A9B2B green, #E7EAEF borders, Plus Jakarta Sans).
   ========================================================================== */

.blog-grid-section{
	background: #fff !important;
}
.blog-grid-section .blog-post-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 56px 36px;
}

.blog-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	font-family: "Plus Jakarta Sans", sans-serif;
}

/* ---------- Image ---------- */

.blog-card-thumb {
	display: block;
	aspect-ratio: 16 / 8.4;
	overflow: hidden;
	border-radius: 14px;
	background: #E4E5E8;
}

.blog-card-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	transition: transform .5s ease;
}

.blog-card-thumb:hover img {
	transform: scale(1.04);
}

/* ---------- Category + date ---------- */

.blog-card-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 24px 0 12px;
	font-size: 13px;
	line-height: 1.4;
}

.blog-card-cat {
	color: #5A9B2B;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
}

.blog-card-cat:hover {
	color: #4A8322;
	text-decoration: none;
}

.blog-card-dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #C5CAD2;
}

.blog-card-date {
	color: #98A0AC;
	font-weight: 400;
}

/* ---------- Title + excerpt ---------- */

.blog-card-title {
	margin: 0 0 14px;
	padding: 0;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 21px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -.01em;
	color: #101F45;
}

.blog-card-title a {
	color: inherit;
	text-decoration: none;
	transition: color .2s ease;
}

.blog-card-title a:hover {
	color: #5A9B2B;
	text-decoration: none;
}

.blog-card-excerpt {
	flex: 1 1 auto;
	margin: 0 0 18px;
	padding: 0;
	color: #5A6472;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.65;
}

/* ---------- Footer: author + read more ---------- */

.blog-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 16px;
	border-top: 1px solid #E7EAEF;
}

.blog-card-author {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	color: #101F45;
	text-decoration: none;
}

.blog-card-author:hover {
	text-decoration: none;
}

.blog-card-avatar {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	overflow: hidden;
	border: 1px solid #D5D9E0;
	border-radius: 50%;
	background: #F3F4F6;
}

.blog-card-avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.blog-card-author-name {
	overflow: hidden;
	font-size: 15px;
	font-weight: 500;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.blog-card-author:hover .blog-card-author-name {
	color: #5A9B2B;
}

.blog-card-readmore {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 8px;
	color: #101F45;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}

.blog-card-readmore svg {
	color: #5A9B2B;
	transition: transform .2s ease;
}

.blog-card-readmore:hover {
	color: #101F45;
	text-decoration: none;
}

.blog-card-readmore:hover svg {
	transform: translateX(4px);
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
	.blog-grid-section .blog-post-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 48px 28px;
	}
}

@media (max-width: 640px) {
	.blog-grid-section .blog-post-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 44px;
	}

	.blog-card-title {
		font-size: 20px;
	}

	.blog-card-excerpt {
		font-size: 15px;
	}
}