/* ============================================
   Single Post Header Styles
   ============================================ */

/* Header Wrapper */
.single-post-header {
	margin-bottom: 0;
}

/* Featured Image - Full Width */
.single-post-header__featured-image {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	margin-bottom: 40px;
}

.single-post-header__featured-image img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	max-height: 600px;
}

/* Header Content Container */
.single-post-header__content {
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 40px;
}

/* Last Update Date */
.single-post-header__meta {
	margin-bottom: 20px;
}

.single-post-header__last-update {
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	color: rgba(44, 83, 48, 0.96);
	margin: 0;
}

.single-post-header__last-update time {
	font-weight: 600;
}

/* Title */
.single-post-header__title {
	font-size: 48px;
	font-weight: 600;
	line-height: 60px;
	letter-spacing: -0.96px;
	color: #101828;
	margin: 0 0 30px;
}

/* Authors Section Container */
.single-post-header__authors-section {
	display: flex;
	align-items: flex-start;
	gap: 80px;
	margin-bottom: 60px;
}

/* Authors Block */
.single-post-header__authors {
	flex-shrink: 0;
	min-width: 250px;
}

/* Reviewer Block */
.single-post-header__reviewer {
	flex-shrink: 0;
}

/* Label (Written By / Medically Reviewed By) */
.single-post-header__label {
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	color: #101828;
	margin: 0;
}

/* Author List */
.single-post-header__author-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Individual Author */
.single-post-header__author {
	display: flex;
	align-items: center;
	gap: 12px;
}

.single-post-header__author-avatar {
	flex-shrink: 0;
}

.single-post-header__author-avatar img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
}

.single-post-header__author-info {
	flex: 1;
}

.single-post-header__author-name {
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: #475467;
	margin: 0;
}

/* Reviewer Content */
.single-post-header__reviewer-content {
	display: flex;
	align-items: center;
	gap: 12px;
}

.single-post-header__reviewer-avatar {
	flex-shrink: 0;
}

.single-post-header__reviewer-avatar img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
}

.single-post-header__reviewer-info {
	flex: 1;
}

.single-post-header__reviewer-name {
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: #475467;
	margin: 0;
}

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

/* Tablet (991px and below) */
@media (max-width: 991px) {
	.single-post-header__content {
		padding: 0 24px;
	}

	.single-post-header__title {
		font-size: 50px;
	}

	.single-post-header__authors-section {
		gap: 32px;
		margin-bottom: 48px;
	}
}

/* Mobile (576px and below) */
@media (max-width: 576px) {
	.single-post-header {
		margin-bottom: 40px;
	}

	.single-post-header__content {
		padding: 0 20px;
	}

	.single-post-header__featured-image {
		margin-bottom: 24px;
	}

	.single-post-header__meta {
		margin-bottom: 16px;
	}

	.single-post-header__last-update {
		font-size: 14px;
	}

	.single-post-header__title {
		font-size: 35px;
		margin-bottom: 32px;
	}

	.single-post-header__authors-section {
		flex-direction: column;
		gap: 24px;
		margin-bottom: 40px;
	}

	.single-post-header__authors,
	.single-post-header__reviewer {
		min-width: 100%;
	}

	.single-post-header__label {
		font-size: 14px;
		margin-bottom: 12px;
	}

	.single-post-header__author-avatar img,
	.single-post-header__reviewer-avatar img {
		width: 48px;
		height: 48px;
	}

	.single-post-header__author-name,
	.single-post-header__reviewer-name {
		font-size: 16px;
	}
}
