/*
 * Blog Details — frontend styles.
 *
 * Additive to assets/css/blog/blog-listing.css, which already supplies
 * .blog-listing__inner, .blog-featured*, .blog-listing__meta-row*,
 * .blog-listing__divider, and .blog-grid/.blog-card — all reused as-is here
 * per this build's requirement. This file only covers what's new to the
 * Blog Details page. Entry-content typography colors/sizes are a
 * best-effort match (no exact redline supplied for body copy) — adjust
 * directly if one becomes available.
 *
 * @package Greenova
 */

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

/* =============================================================================
   Back to Blogs
   ============================================================================= */

.blog-details__back {
	display:         inline-flex;
	align-items:     center;
	gap:             8px;
	font-family:     'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:       16px;
	font-weight:     600;
	line-height:     20px;
	letter-spacing:  2%;
	text-transform:  uppercase;
	color:           #2E2E2E;
	text-decoration: none;
	margin-bottom:   32px;
}

.blog-details__back-icon {
	display: block;
	width:   16px;
	height:  16px;
}

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

/* .blog-featured (badge/title/meta/image) reused as-is from blog-listing.css. */

.blog-details .blog-featured {
	margin-bottom: 0;
}

/* =============================================================================
   Entry content — WordPress editor output.
   ============================================================================= */

.blog-details__content {
	max-width:     840px;
	margin:        56px 0;
	font-family:   'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:     16px;
	font-weight:   400;
	line-height:   26px;
	color:         #3A3D42;
}

.blog-details__content > *:first-child {
	margin-top: 0;
}

.blog-details__content > *:last-child {
	margin-bottom: 0;
}

.blog-details__content p {
	margin: 0 0 20px;
}

.blog-details__content h2 {
	font-size:      24px;
	font-weight:    600;
	line-height:    32px;
	letter-spacing: -0.01em;
	color:          #000000;
	margin:         40px 0 16px;
}

.blog-details__content h3 {
	font-size:      20px;
	font-weight:    600;
	line-height:    28px;
	color:          #000000;
	margin:         32px 0 14px;
}

.blog-details__content h4 {
	font-size:   18px;
	font-weight: 600;
	line-height: 26px;
	color:       #000000;
	margin:      24px 0 12px;
}

.blog-details__content ul,
.blog-details__content ol {
	margin:      0 0 20px;
	padding-left: 24px;
}

.blog-details__content li {
	margin-bottom: 8px;
}

.blog-details__content li:last-child {
	margin-bottom: 0;
}

.blog-details__content a {
	color:           #219FD6;
	text-decoration: underline;
}

.blog-details__content a:hover {
	color: #1276a3;
}

.blog-details__content blockquote {
	border-left:  3px solid #7FB04F;
	padding-left: 20px;
	margin:       28px 0;
	font-style:   italic;
	color:        #58595B;
}

.blog-details__content blockquote p:last-child {
	margin-bottom: 0;
}

.blog-details__content img {
	display:       block;
	max-width:     100%;
	height:        auto;
	border-radius: 16px;
	margin:        28px 0;
}

.blog-details__content figure {
	margin: 28px 0;
}

.blog-details__content figcaption {
	font-size: 14px;
	color:     #58595B;
	margin-top: 8px;
	text-align: center;
}

/* =============================================================================
   Author section
   ============================================================================= */

.blog-author {
	display:       flex;
	align-items:   center;
	gap:           16px;
	max-width:     840px;
	margin:        0 0 56px;
}

.blog-author__photo {
	flex-shrink:   0;
	width:         56px;
	height:        56px;
	border-radius: 50%;
	object-fit:    cover;
}

.blog-author__info {
	display:        flex;
	flex-direction: column;
	gap:            2px;
}

.blog-author__name {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:   16px;
	font-weight: 600;
	color:       #000000;
}

.blog-author__designation {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:   14px;
	font-weight: 500;
	color:       #219FD6;
}

/* =============================================================================
   Related Blogs
   ============================================================================= */

.blog-details__section-heading {
	font-family:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:      32px;
	font-weight:    600;
	line-height:    1.2;
	letter-spacing: -0.02em;
	color:          #000000;
	text-align:     center;
	margin:         56px 0 40px;
}

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

@media ( max-width: 991.98px ) {
	.blog-details {
		padding-block: 48px 72px;
	}

	.blog-details__content {
		margin: 40px auto;
	}

	.blog-details__section-heading {
		font-size: 1.75rem;
		margin:    40px 0 32px;
	}
}

@media ( max-width: 575.98px ) {
	.blog-details__back {
		font-size:     14px;
		margin-bottom: 24px;
	}

	.blog-details__content {
		font-size:   15px;
		line-height: 24px;
	}

	.blog-details__content h2 {
		font-size: 20px;
	}

	.blog-details__content h3 {
		font-size: 18px;
	}

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