// ============================================================================
// :: Article-tile
// ============================================================================
.m-article-tile {
	position: relative;

	display: flex;
	flex-direction: column-reverse;

	overflow: hidden;

	pointer-events: auto;

	&::before {
		content: "";

		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 1;

		display: block;
		width: 100%;
		height: 100%;
		overflow: hidden;

		border-radius: 0%;

		transform: translateY(100%) scaleY(0);

		transition: transform 0.5s ease-in-out;
	}

	&::after {
		content: "";

		position: absolute;
		top: 0;
		left: 0;

		display: block;

		width: 100%;
		height: 100%;

		background: $overlay-gradient;
	}

	&:hover {
		cursor: pointer;

		&::before {
			transform: translateY(0%) scaleY(1);
		}

		.m-article-tile__content {

			p {
				opacity: 1;

				transform: translateY(0);

				transition:
					opacity 0.4s ease-in-out 0.3s,
					transform 0.3s ease-in-out 0.3s;
			}
		}
	}

	&:focus-within {
		cursor: pointer;

		&::before {
			transform: translateY(0%) scaleY(1);
		}

		.m-article-tile__content {

			p {
				opacity: 1;

				transform: translateY(0);

				transition:
					opacity 0.4s ease-in-out 0.3s,
					transform 0.3s ease-in-out 0.3s;
			}
		}
	}
}

.m-article-tile__image {
	position: absolute;

	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.m-article-tile__link {
	position: relative;

	display: block;
	width: 100%;
	height: 100%;
	padding: 2rem;

	pointer-events: auto;

	@include respond-at($screen-medium-base) {
		padding: 4rem;
	}

	&:focus:not(:hover) {
		@include outline();
	}
}

.m-article-tile__content {
	position: relative;
	z-index: 3;

	display: block;

	transition: transform 0.4s ease-in-out 0.1s;

	.a-label {
		margin-bottom: 0.5rem;
	}

	> * {
		color: $text-color-white;

		transition: color 0.2s ease-in-out;
	}

	h4 {
		hyphens: auto;
	}

	p {
		position: relative;

		margin-top: 1.5rem;

		font-family: $font-family-roboto;
		font-weight: $font-weight-thin;
		hyphens: auto;

		opacity: 0;

		transform: translateY(1rem);

		transition: opacity 0.4s ease-in-out, transform 0.3s ease-in-out;
	}
}

// ============================================================================
// :: Modifiers
// ============================================================================
%__article-light {

	h4,
	.a-label,
	p {
		color: $text-color-white;
	}
}

.m-article-tile--primary {
	@extend %__article-light;

	&::before {
		background-color: $background-color-primary;
	}
}

.m-article-tile--dark {
	@extend %__article-light;

	&::before {
		background-color: $background-color-grey-extra-dark;
	}
}

.m-article-tile--light {

	&::before {
		background-color: $background-color-grey-light;
	}

	&:hover {

		.m-article-tile__content > * {
			color: $text-color;
		}
	}

	&:focus-within {

		.m-article-tile__content > * {
			color: $text-color;
		}
	}
}

.m-article-tile--white {

	&::before {
		background-color: $background-color-white;
	}

	&:hover {

		.m-article-tile__content > * {
			color: $text-color;
		}
	}

	&:focus-within {

		.m-article-tile__content > * {
			color: $text-color;
		}
	}
}