Society article: Default

.m-society-article {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	z-index: 0;
	align-items: stretch;

	&__link {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
	}

	&__figure {
		position: relative;
		width: 100%;
		flex-basis: 100%;
		z-index: -1;

		@include media($sm-breakpoint) {
			width: 50%;
			flex-basis: 50%;
		}

		&::after {
			content: "";
			position: absolute;
			bottom: 0;
			left: 0;
			opacity: 0;
			background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
			@include size(100%, 50%);
			transition: opacity $transition-mid ease-out;
		}
	}

	&__figure-wrap {
		position: relative;
		padding-top: 100%;
		height: 100%;
	}

	&__figure-img {
		@include object-fit(cover, center);
		@include size(100%, 100%);
		position: absolute;
		top: 0;
		left: 0;
	}

	&__inner {
		width: 100%;
		flex-basis: 100%;
		margin-left: calc(#{(100% / $grid-columns)} - #{$grid-gutter-width-xs});
		margin-right: calc(#{(100% / $grid-columns)} - #{$grid-gutter-width-xs});
		@include fluid-props(margin-top, $fluid-min, $sm-breakpoint - 1, -90px, -140px);
		max-height: 100%;

		@include media($sm-breakpoint) {
			width: 50%;
			flex-basis: 50%;
			margin: 2em 0 0 0;
		}

		@include media($md-breakpoint) {
			margin-top: 4em;
		}

	}

	&__wrap {
		@extend .u-t-size--18;
		@include fluid-props(padding-left padding-right, $fluid-min, $sm-breakpoint, 15px, 30px);
		@include fluid-props(padding-top padding-bottom, $fluid-min, $sm-breakpoint, 12px, 30px);
		background-color: $color-black-lighter;
		color: $color-text-negative;

		@include media($sm-breakpoint) {
			padding: 1.25em;
			height: 100%;
			display: flex;
			flex-direction: column;
		}

		@include media($md-breakpoint) {
			padding: 1.5em 1.8em 1.8em;
		}
	}

	&__header {
		flex-grow: 1
	}

	&__title {
		@include fluid-props(font-size, $fluid-min, $fluid-max, 20px, 50px);
		@include fluid-props(line-height, $fluid-min, $fluid-max, 22px, 60px);
		@include fluid-props(margin-bottom, $fluid-min, $fluid-max, 6px, 10px);
		font-family: $font-secondary;
		font-weight: 600;
		z-index: 3;

		&::after {
			@include fluid-props(margin-top margin-bottom, $fluid-min, $fluid-max, 10px, 20px);
			content: "";
			display: block;
			height: 1px;
			background: $color-text;
		}

	}

	&__title-link {
		color: inherit;
		position: relative;
		display: block;
		z-index: 10;
		max-width: 12em;
		transition: color $transition-mid ease;

		@include hover-behaviour {
			color: $color-primary;
		}
	}

	&__meta {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		font-family: $font-highlight;
	}

	&__category {
		@extend .u-t-category-link;
		color: inherit;
		z-index: 3;

		@include media ($sm-breakpoint) {
			order: 1;
		}
	}

	&__date-author {
		@include fluid-props(font-size, $fluid-min, $fluid-max, 8px, 14px);
		@include fluid-props(line-height, $fluid-min, $fluid-max, 12px, 18px);
	}

	&__date {
		@extend .m-highlight-article__date;
		margin-right: 0;
		padding-right: .8em;
		font-weight: $font-weight-bold;

		@include media ($sm-breakpoint) {
			display: none;
		}

		@include media ($md-breakpoint) {
			display: inline-block;
		}

		@include media ($hp-breakpoint) {
			display: none;
		}

		&::after {
			display: none;
		}
	}

	&__author {
		font-weight: $font-weight-bold;
		position: relative;
		padding-left: .5em;
		display: inline-block;

		&::before {
			content: " ";
			position: absolute;
			left: -.3em;
			top: 10%;
			width: 1px;
			height: 80%;
			background-color: $color-primary;
			background-color: white;
		}
	}

	&__author-link {
		@extend .u-t-author-link;
		color: inherit;
		font-weight: $font-weight-normal;
		z-index: 3;
	}


	&__content {
		@include fluid-props(font-size, $fluid-min, $fluid-max, 10px, 18px);
		@include fluid-props(line-height, $fluid-min, $fluid-max, 14px, 27px);
		margin: 1.5em 0;
		flex-grow: 2;
	}


	&__footer {
		margin-top: 2em;
		text-align: center;

		@include media($sm-breakpoint) {
			text-align: right;
			margin-top: 0;
		}
	}

	.a-button {
		z-index: 3;
		border: 0;
	}
}

/**
 * Hover effect
 */
.m-society-article {
	&.is-hover {
		.m-society-article__figure::after {
			opacity: .6;
		}
	}
}

.m-society-article--narrow {

	@include media($hp-breakpoint) {
		flex-wrap: nowrap;
		align-items: center;
	}

	.m-society-article__figure {
		@include media($hp-breakpoint) {
			width: 70%;
			flex-basis: 70%;
		}
	}

	.m-society-article__inner {
		@include media($hp-breakpoint) {
			width: 40%;
			flex-basis: 40%;
			margin-top: 0;
			margin-left: ((100% / $grid-columns) * -1);
		}
	}

	.m-society-article__text {
		padding: 1.25em;
	}

	.m-society-article__title {
		@include fluid-props(font-size, $fluid-min, $fluid-max, 20px, 40px);
		@include fluid-props(line-height, $fluid-min, $fluid-max, 22px, 44px);
	}

	.m-society-article__footer {
		text-align: left;
	}

}