/*
 * Blog Listing — frontend styles.
 *
 * Layout numbers (typography, image sizes, colors, radii) follow the exact
 * spec supplied alongside this build. Grid gap/vertical rhythm not called
 * out by an exact redline (e.g. gap between the 3 grid columns) use the
 * same best-effort convention already established in
 * assets/css/pricing/pricing-plans.css — adjust directly if a pixel
 * redline becomes available.
 *
 * @package Greenova
 */

.blog-listing {
	background-color: #FFFFFF;
	padding-block:     100px;
}

.blog-listing__inner {
	max-width:      1376px;
	margin:         0 auto;
	padding-inline: 24px;
}

.blog-listing__title {
	font-family:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:      68px;
	font-weight:    400;
	line-height:    74.8px;
	letter-spacing: -2.04px;
	color:          #000000;
	text-align:     center;
	margin:         0 0 64px;
}

/* =============================================================================
   Featured Blog
   ============================================================================= */

.blog-featured {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             64px;
	margin-bottom:   56px;
}

.blog-featured__content {
	flex:      1 1 0;
	min-width: 0;
}

.blog-featured__badge {
	display:         inline-flex;
	align-items:     center;
	gap:             6px;
	background:      #2E2E2E;
	color:           #FFFFFF;
	font-family:     'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:       16px;
	line-height:     24px;
	font-weight:     500;
	border-radius:   21.5px;
	padding:         4px 12px;
	margin-bottom:   24px;
}

.blog-featured__title {
	font-family:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:      56px;
	font-weight:    400;
	line-height:    63px;
	letter-spacing: -2px;
	color:          #000000;
	margin:         0 0 24px;
}

.blog-featured__excerpt {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:   18px;
	font-weight: 400;
	line-height: 28px;
	color:       #000000;
	margin:      0 0 24px;
}

.blog-featured__media {
	flex-shrink: 0;
	width:       615px;
	height:      471px;
}

.blog-featured__image {
	display:       block;
	width:         615px;
	height:        471px;
	object-fit:    cover;
	border-radius: 24px;
}

/* =============================================================================
   Meta + Read More — shared between the Featured Blog and every grid card.
   ============================================================================= */

.blog-listing__meta-row {
	display:        flex;
	align-items:    center;
	flex-wrap:      wrap;
	gap:            8px;
	font-family:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:      16px;
	font-weight:    400;
	letter-spacing: 2%;
	text-transform: uppercase;
	color:          #58595B;
}

.blog-listing__meta-sep {
	color: #58595B;
}

.blog-listing__meta-sep--pipe {
	color: #D9DDE8;
}

.blog-listing__read-more {
	display:         inline-flex;
	align-items:     center;
	gap:             6px;
	font-family:     'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:       16px;
	font-weight:     600;
	letter-spacing:  2%;
	text-transform:  uppercase;
	color:           #30AEE4;
	text-decoration: none;
}

.blog-listing__read-more-icon {
	display:    block;
	width:      16px;
	height:     16px;
	object-fit: contain;
	transition: transform 0.2s ease;
}

.blog-listing__read-more:hover {
	color: #219FD6;
}

.blog-listing__read-more:hover .blog-listing__read-more-icon {
	transform: translate(2px, -2px);
}

/*
 * Grid/related cards: "Read More" always sits on its OWN line below the
 * category/read-time row (unlike the Featured Blog block above, which
 * keeps them inline with a "|" separator) — a plain sibling under
 * .blog-card's own flex-column, not nested inside .blog-listing__meta-row.
 * margin-top:auto on the meta row pins it (and the read-more link right
 * after it) to the bottom of the card, so the button lands at the same
 * height across a row of cards regardless of how long each one's own
 * title/excerpt happens to run.
 */
.blog-card .blog-listing__meta-row {
	margin-top: auto;
	padding-top: 8px;
}

.blog-card__read-more {
	margin-top: 8px;
}

/* =============================================================================
   Divider
   ============================================================================= */

.blog-listing__divider {
	border:        none;
	border-top:    1px dashed #B6B9CE;
	margin:        0 0 56px;
}

/* =============================================================================
   Grid
   ============================================================================= */

.blog-grid {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap:            40px;
	row-gap:               56px;
}

.blog-card {
	display: flex;
	flex-direction: column;
}

.blog-card__media {
	display:       block;
	width:         100%;
	aspect-ratio:  432 / 331;
	margin-bottom: 24px;
}

.blog-card__image {
	display:       block;
	width:         100%;
	height:        100%;
	object-fit:    cover;
	border-radius: 24px;
}

.blog-card__title {
	margin: 0 0 12px;
}

.blog-card__title a {
	font-family:     'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:       18px;
	font-weight:     600;
	line-height:     24px;
	color:           #000000;
	text-decoration: none;
}

.blog-card__title a:hover {
	color: #219FD6;
}

.blog-card__excerpt {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:   16px;
	font-weight: 400;
	line-height: 24px;
	color:       #58595B;
	margin:      0 0 16px;
}

/* =============================================================================
   Responsive
   ============================================================================= */

@media ( max-width: 991.98px ) {
	.blog-listing {
		padding-block: 64px;
	}

	.blog-listing__title {
		font-size:      2.5rem;
		line-height:    1.15;
		letter-spacing: -0.03em;
		margin-bottom:  40px;
	}

	.blog-featured {
		flex-direction: column;
		align-items:    stretch;
		gap:            32px;
	}

	.blog-featured__title {
		font-size: 2.5rem;
	}

	.blog-featured__media,
	.blog-featured__image {
		width:  100%;
		height: auto;
		aspect-ratio: 615 / 471;
	}

	.blog-listing__divider {
		margin-bottom: 40px;
	}

	.blog-grid {
		row-gap: 40px;
	}
}

@media ( max-width: 767.98px ) {
	.blog-grid {
		grid-template-columns: 1fr;
	}
}

@media ( max-width: 575.98px ) {
	.blog-listing {
		padding-block: 48px;
	}

	.blog-listing__title {
		font-size:   1.75rem;
		line-height: 1.2;
		margin-bottom: 32px;
	}

	.blog-featured__title {
		font-size: 1.75rem;
	}

	.blog-featured__badge {
		font-size: 12px;
	}

	.blog-featured__excerpt,
	.blog-card__excerpt,
	.blog-listing__meta-row,
	.blog-listing__read-more {
		font-size: 14px;
	}

	.blog-card__title a {
		font-size: 16px;
	}
}