/* 05.39. Article */
.article {
	&__content {
		> p {
			&:last-of-type {
				margin-bottom: 0;
			}
		}
	}

	&__tags {
		margin-top: ptr(26);

		a {
			font-size: ptr(14);
			font-weight: 800;
			color: $gray;
			margin-right: ptr(15);

			&:focus,
			&:hover {
				color: $gray;
			}
		}
	}
}

// Masonry style for index, archive and search.
.masonry {
	.article {
		display: inline-block;
		margin-bottom: ptr(30);

		// Header part of masonry box. Featured image and date.
		&__header {
			position: relative;

			+ .article__content {
				border-top-left-radius: 0;
				border-top-right-radius: 0;
				padding: ptr(24) ptr(45) ptr(15);
			}
		}

		&__featured-image {
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;
			mask-image: radial-gradient(circle, #ffffff 100%, #000000 100%);
			transition: all 300ms ease-out;

			&-link {
				display: block;
				border-radius: 4px;
				border-bottom-left-radius: 0;
				border-bottom-right-radius: 0;
				overflow: hidden;
				mask-image: radial-gradient(circle, #ffffff 100%, #000000 100%);
			}

			&:focus,
			&:hover {
				transform: scale(1.1);
			}
		}

		&__date {
			display: inline-block;
			font-size: ptr(12);
			font-weight: bold;
			text-transform: uppercase;
			background-color: #aaaaaa;
			color: #ffffff;
			border-radius: ptr(4);
			padding: ptr(4) ptr(8) ptr(3);
			margin-bottom: ptr(19);

			&--on-image {
				position: absolute;
				background-color: $gray-lightest;
				color: $brand-secondary;
				top: ptr(30);
				left: ptr(30);
				margin-bottom: 0;
			}
		}

		// Content part of masonry box.
		&__content {
			background-color: #f5f5f5;
			border-radius: ptr(4);
			padding: ptr(29) ptr(45) ptr(15);
			font-size: ptr(16);
		}

		&__title {
			font-size: ptr(24);
			margin-top: ptr(5);
			margin-bottom: ptr(11);
			word-wrap: break-word;

			&-link {
				color: $brand-secondary;
			}
		}

		&__meta {
			display: flex;
			justify-content: space-between;
			padding-top: ptr(20);
			margin-top: ptr(20);
			border-top: 1px dashed rgba(0, 0, 0, .1);
		}

		&__author {
			font-size: ptr(14);
			padding-top: ptr(2);

			span {
				font-weight: 800;
			}
		}

		&__categories {
			font-size: ptr(12);
			font-weight: bold;
			text-transform: uppercase;
			text-align: right;

			a {
				display: inline-block;
				background-color: #aaaaaa;
				color: #ffffff;
				border-radius: ptr(4);
				padding: ptr(4) ptr(8);
				margin-left: ptr(2);
				margin-bottom: ptr(5);
				transition: $primary-transition;

				&:focus,
				&:hover {
					background-color: darken(#aaaaaa, 5);
					text-decoration: none;
				}
			}
		}

		// Sticky
		&.sticky {
			.article__header {
				border: 2px solid $brand-secondary;
				border-bottom: 0;
				border-top-left-radius: 4px;
				border-top-right-radius: 4px;

				+ .article__content {
					border-top: 0;
				}
			}

			.article__content {
				border: 2px solid $brand-secondary;
			}
		}
	}
}
