Front article: O-Ton

@use "sass:math";
@use "../../../scss/variables" as v;
@use "../../../scss/mixins" as m;
@use "../../../scss/grid" as g;

.o-front-article {
	max-width: 651px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	@include m.fluid-grid-item-props(padding);

	&__cat-title {
		@include m.media(v.$DESKTOP) {
			margin-bottom: 8px;
		}
	}

	&__quote {
		position: absolute;
		@include m.fluid-grid-item-props(top right);

		svg {
			fill: v.$color-primary-super-light;
			height: 29px;
			width: 40px;

			@include m.high-contrast {
				fill: v.$color-grey-3;
			}

			@include m.media(v.$DESKTOP) {
				height: 39px;
				width: 56px;
			}
		}
	}

	&__articles {
		display: flex;
		flex-wrap: wrap;
		flex-grow: 1;
	}

	&--mm &__articles {
		@include m.media(v.$MOBILE) {
			padding: 12px 0;
		}
	}

	&__article {
		margin-top: 22px;
		width: 100%;
	}

	&--double &__article {
		@include m.media(v.$MOBILE) {
			&:first-child {
				border-bottom: solid 1px v.$color-grey-2;
				padding-bottom: 20px;
			}
		}

		@include m.media(v.$DESKTOP) {
			width: calc(50% - 16px);

			&:first-of-type {
				margin-right: 16px;
			}

			&:last-of-type {
				margin-left: 16px;
			}

			.m-front-article__title {
				font-size: 1rem;
			}
		}
	}

	&--mm {
		position: relative;
		background: v.$color-grey-1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		min-height: 80%;

		@include m.media(v.$MOBILE) {
			margin-top: 41px;
			margin-bottom: 41px;
		}
	}

	&__cta {
		margin-top: 16px;
		border-top: 1px solid v.$color-grey-2;
		display: flex;
		flex-direction: column-reverse;

		@include m.media(v.$DESKTOP) {
			flex-direction: row;
			align-items: center;
			padding-top: 20px;
		}
	}

	&__cta-label {
		margin: 16px 0;
		line-height: 1.4em;

		@include m.media(v.$DESKTOP) {
			margin-left: 40px;
		}
	}

	&__mm {
		display: flex;
		width: 100%;
		align-items: flex-end;
		justify-content: space-between;
	}

	&__author-image {
		width: 100px;
		height: 100px;
		transform: rotate(-5deg);
		transform-origin: bottom right;
		margin-left: 20px;

		@include m.media(480px) {
			margin-top: -27px;
		}
	}

	&__meta {
		flex-grow: 1;
		border-top: solid 1px v.$color-grey-2;
		margin-top: 12px;
		font-size: 0.875rem; // 14/16
	}

	&__date {
		display: block;
		margin: 12px 0 8px;

		@include m.media(v.$DESKTOP) {
			margin-bottom: 0;
			display: inline-block;
		}
	}

	&__author {
		@include m.clean-link;
		& {
			display: inline-block;
			font-weight: bold;
		}

		@include m.media(v.$DESKTOP) {
			margin-left: 28px;
			position: relative;

			&::before, &:hover::before {
				content: "\25A0";
				color: v.$color-secondary;
				position: absolute;
				left: -19px;
				transform: translateY(-0.1em) rotate(-5deg);
				font-size: 0.9em;
				-webkit-text-size-adjust: 50%;
			}
		}
	}
}