Featured Latest Cards

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";

@import "../../resources/scss/partials/post-card";

.block-featured-latest-cards {
	--text-color: #{$primary};
	--border-color: #{$grey-secondary};

	&.theme--dark {
		--text-color: #{$white};

		.overline {
			color: var( --text-color );
		}

		.post-card--featured.post-card--podcast {
			.post-card__title {
				@include margin-top( rem-calc(20) );
				color: var( --text-color );
			}
		}

		.post-card--featured.post-card.post-card--medium-overlap {
			.post-card__meta-row {
				@include bp($lg, true) {
					background-color: #fff;
					padding: rem-calc(12 75 12 12);
					border-radius: rem-calc(16);
				}
			}
		}

		.post-card--small {
			color: var( --text-color );

			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='19.5' stroke='%23F96336'/%3E%3Cg stroke='%23FFFFFF' clip-path='url(%23a)'%3E%3Cpath d='M13.336 19.81h12.87M20.48 14.018l5.726 5.791-5.726 5.792'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M13.336 13.334h14.359v13.333h-14.36z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");

			.post-card__tag,
			.post-card__category {
				color: var( --text-color );
			}

			.post-card__reading-time {
				border-color: var( --text-color );
				background-image: url("data:image/svg+xml,%3Csvg width='14' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23FFFFFF' d='M232 120c0-13.3 10.7-24 24-24s24 10.7 24 24v123.2l85.3 56.8c11 7.4 14 22.3 5.8 33.3-6.5 11-21.4 14-32.4 5.8l-96-64c-6.7-3.6-10.7-11.1-10.7-20V120zM256 0c141.4 0 256 114.6 256 256S397.4 512 256 512 0 397.4 0 256 114.6 0 256 0zM48 256c0 114.9 93.1 208 208 208s208-93.1 208-208S370.9 48 256 48 48 141.1 48 256z'/%3E%3C/svg%3E");
			}
		}
	}

	&:not([class*=pad-top]) {
		@include padding-top( rem-calc( 96 ) );
	}

	&:not([class*=pad-bottom]) {
		@include padding-bottom( rem-calc( 96 ) );
	}

	.heading,
	.content-container {
		color: var( --text-color );
	}

	&__content-row {
		@include margin-bottom( rem-calc(48) );
		align-items: flex-end;

		&.has-content {
			@include margin-bottom( rem-calc(100) );
		}

		.overline {
			margin-bottom: rem-calc(16);
		}

		.heading {
			margin-bottom: 0;
		}

		.content-container {
			margin-top: rem-calc(24);

			@include bp($md) {
				margin-top: 0;
				transform: translate3d(0,50%,0);
			}

			:last-child {
				margin-bottom: 0;
			}
		}
	}

	&__featured-col {
		margin-bottom: 2rem;

		@include bp($md) {
			margin-bottom: 0;
		}

		.post-card {
			height: auto;

			&.post-card--medium-overlap {
				.post-card__meta-row {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='19.5' stroke='%23F96336'/%3E%3Cg stroke='%23000' clip-path='url(%23a)'%3E%3Cpath d='M13.336 19.81h12.87M20.48 14.018l5.726 5.791-5.726 5.792'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M13.336 13.334h14.359v13.333h-14.36z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
					background-repeat: no-repeat;
					background-position: calc(100% - 24px) center;
					background-size: rem-calc(40);
					padding-right: rem-calc(80);
				}
			}
		}
	}

	&__list-col {
		display: flex;
		flex-direction: column;

		.btn {
			@include margin-top( rem-calc(32) );
			margin-right: 0;
			margin-left: auto;
		}
	}

	&__cards-list {
		display: flex;
		flex-direction: column;
		gap: rem-calc(24 0);

		.post-card {
			height: auto;
			border-bottom: 1px solid var(--border-color);
			padding-right: rem-calc(60);
			padding-bottom: rem-calc(32);
			transition: all 0.2s ease-in-out;

			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='19.5' stroke='%23F96336'/%3E%3Cg stroke='%23000' clip-path='url(%23a)'%3E%3Cpath d='M13.336 19.81h12.87M20.48 14.018l5.726 5.791-5.726 5.792'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M13.336 13.334h14.359v13.333h-14.36z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
			background-repeat: no-repeat;
			background-position: right center;
			background-size: rem-calc(40);

			&:first-child {
				padding-top: rem-calc(32);
				border-top: 1px solid var(--border-color);
			}

			&:hover {
				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23F96336' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='19.5' stroke='%23F96336'/%3E%3Cg stroke='%23000' clip-path='url(%23a)'%3E%3Cpath d='M13.336 19.81h12.87M20.48 14.018l5.726 5.791-5.726 5.792'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M13.336 13.334h14.359v13.333h-14.36z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
			}

			.post-card__content-meta-row {
				margin-top: 0;
			}
		}
	}
}