/* Block Heading styles */
.related-articles {
	padding-top: 67px;
	border-top: 1px solid rgb(30%, 30%, 31%, .3);

	.related-articles__wrapper {
		max-width: 1268px;
		margin: 0 auto;
	}

	.related-articles__heading {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 0;
		gap: 8px;
		margin-bottom: 20px;

		.title {
			font-weight: 800;
			font-size: var(--wp--preset--font-size--font-24-px);
			line-height: 133%;
			color: var(--wp--preset--color--secondary);
			margin: 0;
		}

		> a {
			font-weight: 400;
			font-size: var(--wp--preset--font-size--font-16-px);
			line-height: 162%;
			color: var(--wp--preset--color--green);
			display: flex;
			align-items: center;
			transition: all 0.25s;
			text-transform: uppercase;
			text-decoration: none;
			gap: 10px;
		}
	}

	.related-articles__cards {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 40px;
		justify-content: flex-start;
		gap: 18px;
		position: relative;

		&.splide {
			margin-bottom: 0;
		}

		&.related-articles__cards--grid {
			.splide__track {
				display: block;
			}

			.splide__list {
				display: flex;
				flex-wrap: wrap;
				gap: 18px;
			}

			.splide__slide {
				max-width: 100%;

				@media (min-width: 520px) {
					max-width: calc(50% - 9px);
				}

				@media (min-width: 920px) {
					max-width: calc(25% - 14px);
				}
			}
		}
	}

	.splide__track {
		margin-bottom: 0;
	}

	.splide__list {
		display: flex;
	}

	.splide__slide {
		width: 100%;
		flex-shrink: 0;
	}

	/* Cards - Default styles */
	.related-articles__card {
		position: relative;
		max-width: 100%;
		border: 1px solid var(--wp--preset--color--light-gray);
		border-radius: 10px;
		display: flex;
		flex-direction: column;
		height: 100%;

		@media (min-width: 520px) {
			max-width: calc(50% - 9px);
		}

		@media (min-width: 920px) {
			max-width: calc(25% - 14px);
		}

		&.splide__slide {
			@media (min-width: 920px) {
				max-width: calc(25% - 14px);
			}
		}

		.related-articles__card-image {
			width: 100%;
			height: auto;
			overflow: hidden;
			display: flex;
			align-content: center;
			justify-content: center;
			border-radius: 10px 10px 0 0;
			max-height: 160px;
			min-height: 160px;

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				transition: all 0.25s;
				min-height: 160px;
			}
		}

		.related-articles__card-data {
			padding: 12px 16px 20px;
			display: flex;
			flex-direction: column;
			gap: 8px;
			height: 100%;
			border-radius: 0 0 10px 10px;
			transition: .25s;
			border-bottom: 1px solid transparent;
			border-left: 1px solid transparent;
			border-right: 1px solid transparent;

			.categories {
				z-index: 2;

				a {
					font-weight: 400;
					font-size: var(--wp--preset--font-size--font-14-px);
					letter-spacing: 0.02em;
					text-transform: uppercase;
					text-decoration: none;
					color: var(--wp--preset--color--green);

					&:hover {
						text-decoration: underline;
					}
				}
			}

			.title {
				font-size: var(--wp--preset--font-size--font-20-px);
				font-weight: 800;
				line-height: 32px;
				color: var(--wp--preset--color--secondary);
				margin: 0;
			}

			.description {
				font-size: var(--wp--preset--font-size--font-16-px);
				line-height: 24px;
				color: var(--wp--preset--color--black);
				overflow: hidden;
				position: relative;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 4;
				-webkit-box-orient: vertical;
			}
		}

		> a {
			position: absolute;
			height: 100%;
			width: 100%;
			z-index: 2;

			& > span {
				display: none;
			}

			&:hover {
				text-decoration: none !important;
			}
		}
	}
}

.related-articles-wrapper.has-global-padding {
	max-width: 1224px !important;
	@media (min-width: 1250px) {
		padding: 0!important;
	}
}

.align-end {
	align-items: flex-end !important;
}

.thumb-gallery img + img {
	margin-top: 0 !important;
}

/* Splide Navigation Container */
.related-articles .splide__navigation {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
	width: 100%;
}

/* Splide Progress Bar */
.related-articles .splide__progress {
	position: relative;
	width: 100%;
	height: 3px;
	background-color: #e0e0e0;
	border-radius: 1px;
	flex: 1;
}

.related-articles .splide__progress__bar {
	width: 0%;
	height: 100%;
	background-color: var(--wp--preset--color--green);
	border-radius: 1px;
	transition: width 0.3s ease;
}

/* Splide Navigation Arrows */
.related-articles .splide__arrows {
	display: flex;
	justify-content: flex-end;
	gap: 7px;
}

.related-articles .splide__arrow {
	position: static;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.25s;
	transform: none;
	margin: 0;
	padding: 0;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--primary);
	opacity: 1;

	svg {
		width: 14px;
		height: 12px;

		path {
			fill: var(--wp--preset--color--white);
		}
	}

	&.splide__arrow--prev {
		svg {
			transform: rotate(0deg);
		}
	}

	&.splide__arrow--prev, &.splide__arrow--next {
		opacity: 1;

		&:disabled {
			opacity: .3;
			background: var(--wp--preset--color--white);
			color: var(--wp--preset--color--primary);

			svg {
				path {
					fill: var(--wp--preset--color--primary);
				}
			}
		}
	}
}

/* Hide default Splide arrows if custom ones are present */
.related-articles .splide__arrows .splide__arrow:not(.splide__arrow--prev):not(.splide__arrow--next) {
	display: none;
}