@import "../../../../themes/recast2025/style.css";

/* Header Blog Widget */
.header-blog {
	padding: var(--margins-base-vert, 100px) var(--margins-base-hori, 100px);
	background: var(--neutrals-white, #ffffff);
}

.header-blog__container {
	max-width: var(--global-maxwidth-maxwidth-m, 1200px);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--gap-base, 56px);
}

/* Breadcrumbs */
.header-blog__breadcrumbs {
	display: flex;
	align-items: center;
	gap: 8px;
}

.header-blog__breadcrumb-link {
	color: var(--interactive-interactive, var(--primary-recast-blue));
	line-height: 100%;
	transition: color 0.3s ease;
	font-weight: 400 !important;
}

.header-blog__breadcrumb-current {
	line-height: 100%;
	color: var(--neutrals-black, #161f5b);
}

/* Main Content */
.header-blog__content {
	display: flex;
	flex-direction: column;
	gap: var(--gap-s, 16px);
}

/* Eyebrow */
.header-blog__eyebrow, .header-blog__eyebrow a {
	color: var(--neutrals-black, #161f5b);
	font-weight: 500;
	text-transform: uppercase;
	padding-bottom: calc(var(--gap-s, 16px) + 4px);
	position: relative;
	letter-spacing: calc(var(--size-heading-xs, 20px) * 0.03);
}
.header-blog__eyebrow a:hover {
	color: var(--primary-recast-blue);
}

.header-blog__eyebrow::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 64px;
	height: 4px;
	background: var(--secondary-orange, #f05928);
}

/* Title */
.header-blog__title {
	margin: 0;
	line-height: 100%;
	color: var(--neutrals-black, #161f5b);
	letter-spacing: calc(var(--size-heading-xl, 72px) * 0.02);
}

/* Description */
.header-blog__description {
	color: var(--neutrals-black, #161f5b);
	font-weight: 300;
	line-height: 100%;
	margin: 0;
}

/* Terms */
.header-blog__terms {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.header-blog__term {
	background: var(--neutrals-grey-1, #e1e9f9);
	color: var(--neutrals-black, #161f5b) !important;
	padding: 4px 6px;
	font-weight: 400 !important;
}

.header-blog__image-meta {
	display: flex;
	flex-direction: column;
	gap: var(--gap-s, 16px);
}

.header-blog__featured-image {
	width: 100%;
	height: auto;
	max-height: initial !important;
	object-fit: cover;
	display: block;
}

/* Post Meta */
.header-blog__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.header-blog__meta-item {
	display: flex;
	align-items: center;
	gap: var(--gap-xs, 8px);
	color: var(--neutrals-black, #161f5b);
}

.header-blog__author-link {
	color: var(--primary-recast-blue, #0372ff);
	text-decoration: none;
	font-weight: 500;
	transition: color 0.3s ease;
}

.header-blog__author-link:hover {
	color: var(--primary-royal-blue, #1f289c);
}

.header-blog__author-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50% !important;
	border: var(--stroke-width, 2px) solid var(--Neutrals-Grey-1, #e1e9f9) !important;
}

.header-blog__meta-item__reading-time {
	gap: 4px;
}

.header-blog__meta-item__reading-time-duration {
	line-height: 100%;
}

@media (max-width: 1024px) {
	.header-blog__breadcrumb-link {
		font-size: var(--size-body-sub) !important;
	}
	.header-blog__breadcrumb-current {
		width: calc(100% - 240px);
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		font-size: var(--size-body-sub) !important;
	}
}

@media (max-width: 600px) {
	
	.header-blog__meta {
		flex-direction: column;
		row-gap: 24px;
	}

	.header-blog__meta-item {
		width: 100%;
	}
}