/* Related Resources Widget */
.related-resources-widget {
	padding: var(--margins-base-vert) var(--margins-base-hori);
	background: var(--neutrals-white);
}

.related-resources-widget__container {
	display: flex;
	max-width: var(--global-maxwidth-maxwidth-m);
	flex-direction: column;
	align-items: flex-start;
	gap: var(--gap-base);
	margin: 0 auto;
	width: 100%;
}

/* Section Header */
.related-resources-widget__header {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: var(--gap-m);
	align-self: stretch;
}

.related-resources-widget__category a {
	font-size: var(--size-body-sub);
	color: var(--neutrals-black);
	font-weight: 400;
	position: relative;
	z-index: 2;
}

.related-resources-widget__date {
	font-size: var(--size-body-sub);
	color: var(--neutrals-black);
	font-weight: 400;
}

.related-resources-widget__title {
	align-self: stretch;
	color: var(--neutrals-black);
	font-family: var(--font-family-headings);
	font-size: var(--size-heading-l);
	font-style: normal;
	font-weight: 500;
	line-height: 100%;
	letter-spacing: .96px;
}

.related-resources-widget__tag-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-xs);
}

.related-resources-widget__tag {
	background: var(--neutrals-grey-1, #e1e9f9);
	color: var(--neutrals-black, #161f5b) !important;
	padding: var(--gap-xs);
	margin-right: var(--gap-xs);
	position: relative;
	z-index: 2;
	white-space: nowrap;
	font-weight: 400 !important;
}

.related-resources-widget__title span {
	color: var(--primary-recast-blue);
}

/* Posts Grid */
.related-resources-widget__grid {
	display: flex;
	align-items: stretch;
	gap: var(--gap-m);
	align-self: stretch;
	flex-wrap: wrap;
}

.related-resources-widget__card {
	display: flex;
	min-width: var(--global-card-minwidth);
	max-width: var(--global-card-maxwidth);
	flex-direction: column;
	align-items: flex-start;
	flex: 1 0 0;
	border: var(--stroke-width) solid var(--neutrals-grey-1);
	background: var(--neutrals-white);
	transition: all .3s ease;
	text-decoration: none;
	color: inherit;
	position: relative;
}

/* Card Image */
.related-resources-widget__image-wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--gap-xs);
	align-self: stretch;
	aspect-ratio: 16/9;
}

.related-resources-widget__image {
	display: flex;
	height: auto;
	justify-content: center;
	align-items: center;
	align-self: stretch;
	aspect-ratio: 16/9;
	overflow: hidden;
}

.related-resources-widget__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.related-resources-widget__image--placeholder {
	background: #f5f5f5;
	display: flex;
	justify-content: center;
	align-items: center;
}

.related-resources-widget__image--placeholder svg {
	width: 211px;
	height: 82px;
}

/* Card Content */
.related-resources-widget__content {
	display: flex;
	padding: var(--margins-s);
	flex-direction: column;
	align-items: flex-start;
	gap: var(--gap-s);
	flex: 1 0 0;
	align-self: stretch;
}

.related-resources-widget__main {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--gap-xs);
	flex: 1 0 0;
	align-self: stretch;
}

.related-resources-widget__card-title {
	color: var(--neutrals-black);
	font-family: var(--font-family-headings);
	font-size: var(--size-heading-xs);
	font-style: normal;
	font-weight: 500;
	line-height: 120%;
	letter-spacing: .6px;
	margin: 0 0 var(--gap-xs) 0;
}

.related-resources-widget__description {
	color: var(--neutrals-black);
	font-family: var(--font-family-body);
	font-size: var(--size-body-sub);
	font-style: normal;
	font-weight: 400;
	line-height: 140%;
	margin: 0;
}

.related-resources__author-link {
	display: flex;
	flex-direction: row;
	gap: var(--gap-xs);
	text-decoration: none;
	position: relative;
	z-index: 10;
}

.related-resources-widget__author {
	display: flex;
	flex-direction: row;
	gap: var(--gap-xs);
	margin-top: var(--gap-s);
}

.related-resources-widget__author-avatar {
	margin-right: 0;
}

.related-resources-widget__author-avatar img {
	border-radius: 50%;
	border: var(--neutrals-grey-1) 2px solid;
	height: 32px;
	width: 32px;
	position: relative;
	top: -6px;
}

.related-resources-widget__author-name {
	font-size: var(--size-body-sub);
	color: var(--neutrals-black);
	font-weight: 400;
}

/* CTA Button */
.related-resources-widget__cta {
	display: flex;
	align-items: flex-start;
	align-self: stretch;
}

.related-resources-widget__button {
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 0;
	border: var(--stroke-width) solid transparent;
	background: var(--primary-royal-blue);
	text-decoration: none;
	color: var(--neutrals-white);
	transition: all .3s ease;
	position: relative;
	overflow: hidden;
}

.related-resources-widget__button::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: var(--primary-recast-blue);
	opacity: .4;
	transition: left .3s ease;
	z-index: 1;
}

.related-resources-widget__button:hover::before {
	left: 0;
}

.related-resources-widget__button-text {
	display: flex;
	height: 40px;
	padding: 3px 14px 0 14px;
	justify-content: center;
	align-items: center;
	gap: var(--gap-xs);
	position: relative;
	z-index: 2;
	color: var(--neutrals-white);
	font-family: var(--font-family-body);
	font-size: var(--size-button-m);
	font-style: normal;
	font-weight: 700;
	line-height: 100%;
	padding-bottom: 3px;
}

/* Responsive Design */

/* Desktop HD */
@media (min-width: 1601px) {
	.related-resources-widget__grid {
		gap: var(--gap-m);
	}
	
	.related-resources-widget__card {
		min-width: var(--global-card-minwidth);
		max-width: var(--global-card-maxwidth);
	}
}

/* Desktop */
@media (min-width: 1201px) and (max-width: 1600px) {
	.related-resources-widget {
		padding: var(--margins-base-vert) var(--margins-l);
	}
	
	.related-resources-widget__container {
		gap: var(--gap-base);
	}
	
	.related-resources-widget__header {
		gap: var(--gap-m);
	}
	
	.related-resources-widget__grid {
		gap: var(--gap-m);
	}
}

/* Tablet */
@media (min-width: 601px) and (max-width: 1200px) {
	.related-resources-widget {
		padding: var(--margins-base-vert) var(--margins-m);
	}
	
	.related-resources-widget__container {
		gap: var(--gap-l);
	}
	
	.related-resources-widget__header {
		gap: var(--gap-m);
	}
	
	.related-resources-widget__grid {
		gap: var(--gap-m);
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		flex-wrap: nowrap;
	}
	
	.related-resources-widget__grid::-webkit-scrollbar {
		display: none;
	}
	
	.related-resources-widget__card {
		flex: 0 0 calc(100% / 2.5);
		max-width: none;
		min-height: 360px;
		scroll-snap-align: start;
	}
	
	.related-resources-widget__image {
		height: auto;
	}
	
	.related-resources-widget__title {
		font-size: var(--size-heading-m);
		letter-spacing: .8px;
	}
	
	.related-resources-widget__card-title {
		font-size: var(--size-heading-xs);
		letter-spacing: .6px;
	}
}

/* Mobile */
@media (max-width: 600px) {
	.related-resources-widget {
		padding: var(--margins-m) var(--margins-s);
	}
	
	.related-resources-widget__container {
		gap: var(--gap-l);
	}
	
	.related-resources-widget__header {
		gap: var(--gap-s);
	}
	
	.related-resources-widget__grid {
		gap: var(--gap-m);
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		flex-wrap: nowrap;
	}
	
	.related-resources-widget__grid::-webkit-scrollbar {
		display: none;
	}
	
	.related-resources-widget__card {
		flex: 0 0 calc(100% / 1.5);
		max-width: none;
		min-height: 360px;
		scroll-snap-align: start;
	}
	
	.related-resources-widget__image {
		height: auto;
	}
	
	.related-resources-widget__content {
		padding: var(--margins-s);
		gap: var(--gap-s);
	}
	
	.related-resources-widget__main {
		gap: var(--gap-xs);
	}
	
	.related-resources-widget__title {
		font-size: var(--size-heading-m);
		letter-spacing: .76px;
	}
	
	.related-resources-widget__card-title {
		font-size: var(--size-button-m);
		letter-spacing: .48px;
	}
}

/* Typography Classes */
.heading-l {
	font-size: var(--size-heading-l);
	font-weight: 400;
	line-height: 100%;
	letter-spacing: .96px;
}

.heading-xs {
	font-size: var(--size-heading-xs);
	font-weight: 500;
	line-height: 100%;
	letter-spacing: .6px;
}

.body-sub {
	font-size: var(--size-body-sub);
	font-weight: 400;
	line-height: 140%;
}

/* Loading State */
.related-resources-widget__card.loading {
	opacity: .7;
	pointer-events: none;
}

.related-resources-widget__card.loading .related-resources-widget__image {
	background: #f0f0f0;
	animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
	0% {
		opacity: 1;
	}
	
	50% {
		opacity: .5;
	}
	
	100% {
		opacity: 1;
	}
}

/* Focus states for accessibility */
.related-resources-widget__button:focus {
	outline: var(--stroke-width) solid var(--primary-recast-blue);
	outline-offset: var(--stroke-width);
}

.related-resources-widget__card:focus-within {
	border-color: var(--primary-recast-blue);
}

.related-resources-widget__card-link {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}