@import "../root";
@import "../modules/functions";

.single-article {
	margin: 0 auto;
	max-width: 1120px;
	width: 90%;

	// Make sure video is in 16:9 format and responsive
	> #video {
		margin-bottom: 1rem;
		padding-bottom: 56.25%;
		position: relative;
		width: 100%;

		> iframe,
		> .play {
			height: 100%;
			position: absolute;
			width: 100%;
		}

		> iframe {
			z-index: 1;
		}

		> .play {
			display: none;
			z-index: 2;

			> img {
				background-size: cover;
				height: 100%;
				width: 100%;
			}

			> .icon {
				@include Align(absolute);

				cursor: pointer;
				height: 3rem;
				transition: all .5s ease;
				width: 3rem;

				&:hover {
					height: 3.75rem;
					width: 3.75rem;
				}
			}

			@media only screen and (min-width: 1024px) {
				display: block;
			}
		}

		&.-active {
			> .play { display: none; }
		}
	}

	> .thumbnail {
		height: 100%;
		margin-top: 32px;
		width: 100%;

		+ .title {
			margin-top: 56px;
		}
	}

	> .title {
		color: var(--black);
		margin: 80px auto 56px;
		max-width: 768px;
		position: relative;
		width: 100%;

		> em {
			font-style: italic;
		}

		&::before {
			background-color: var(--yellow);
			content: "";
			display: block;
			height: 100%;
			left: -16px;
			position: absolute;
			width: 2px;
		}
	}

	> .content {
		margin: 0 auto 24px;
		max-width: 560px;
		position: relative;
		width: 100%;

		em { font-style: italic; }
		a {
			background-color: var(--yellow);
			color: var(--black);
			font-size: 14px;
			letter-spacing: 2px;
			margin-bottom: 8px;
			padding: 2px 4px;
			text-decoration: none;
			transition: color .3s ease;
		}

		> p {
			color: var(--black);
			font-size: 14px;
			letter-spacing: .8px;
			margin-bottom: 32px;

			> .ingress {
				font-size: 16px;
				font-weight: 700;
				letter-spacing: 1px;

				@media only screen and (min-width: 768px) {
					font-size: 18px;
					letter-spacing: 2px;
				}
			}

			> img {
				height: 100%;
				width: 100%;
			}
			@media only screen and (min-width: 768px) {
				font-size: 16px;
				letter-spacing: 2px;
			}
		}

		> figure {
			height: auto;
			margin-bottom: 32px;
			max-width: 100%;

			> img {
				height: auto;
				width: 100%;
			}

			> figcaption {
				border-left: 4px solid var(--yellow);
				font-size: .75em;
				font-style: italic;
				letter-spacing: 1px;
				margin-top: 8px;
				padding-left: 8px;
			}
		}

		> p,
		> figure {
			&.alignleft,
			> .alignleft {
				float: left;
				margin-bottom: 16px;
				margin-left: 0;
				margin-right: 16px;
				max-width: 65%;
				position: relative;

				@media only screen and (min-width: 768px) {
					margin-left: -140px;
				}
			}

			&.alignright,
			> .alignright {
				float: right;
				margin-bottom: 16px;
				margin-left: 16px;
				margin-right: 0;
				max-width: 65%;
				position: relative;

				@media only screen and (min-width: 768px) {
					margin-right: -140px;
				}
			}
		}

		> .more {
			border-top: 4px solid var(--mint);
			padding-top: 24px;

			> p,
			> h3 {
				color: lighten($black, 25%);
				font-size: 14px;
				letter-spacing: 2px;
				margin-bottom: 8px;
			}

			> h3 {
				margin-bottom: 8px;
			}

			> p {
				margin-bottom: 16px;
			}
		}

		> .outro {
			border-bottom: 2px solid var(--mint);
			clear: both;
			height: 64px;
			margin-top: 24px;
		}

		@media only screen and (min-width: 1024px) {
			margin-bottom: 80px;
		}
	}
}

//	                       /$$     /$$           /$$                                         /$$
//	                      | $$    |__/          | $$                                        | $$
//	  /$$$$$$   /$$$$$$  /$$$$$$   /$$  /$$$$$$$| $$  /$$$$$$           /$$$$$$  /$$   /$$ /$$$$$$    /$$$$$$   /$$$$$$
//	 |____  $$ /$$__  $$|_  $$_/  | $$ /$$_____/| $$ /$$__  $$ /$$$$$$ /$$__  $$| $$  | $$|_  $$_/   /$$__  $$ /$$__  $$
//	  /$$$$$$$| $$  \__/  | $$    | $$| $$      | $$| $$$$$$$$|______/| $$  \ $$| $$  | $$  | $$    | $$  \__/| $$  \ $$
//	 /$$__  $$| $$        | $$ /$$| $$| $$      | $$| $$_____/        | $$  | $$| $$  | $$  | $$ /$$| $$      | $$  | $$
//	|  $$$$$$$| $$        |  $$$$/| $$|  $$$$$$$| $$|  $$$$$$$        |  $$$$$$/|  $$$$$$/  |  $$$$/| $$      |  $$$$$$/
//	 \_______/|__/         \___/  |__/ \_______/|__/ \_______/         \______/  \______/    \___/  |__/       \______/
.article-outro {
	flex-wrap: wrap;
	margin: 0 auto 64px;
	max-width: 560px;
	position: relative;
	width: 90%;

	> .tags,
	> .related {
		width: 100%;
	}

	> .tags {
		margin-bottom: 52px;

		> .tag {
			background-color: var(--yellow);
			display: inline-block;
			font-size: 14px;
			letter-spacing: 2px;
			margin-bottom: 8px;
			margin-right: 8px;
			padding: 2px 4px;
			transition: color .3s ease;

			&:hover {
				background: var(--mint);
			}

			&:last-child {
				margin-right: 0;
			}
		}
	}

	> .author {
		letter-spacing: 2px;
		margin: 0 25% 16px;
		padding-bottom: 1.5em;
		position: relative;
		text-align: center;
		width: 100%;

		> p { margin-bottom: 0; }

		> .name {
			display: block;
			font-weight: bold;
			width: 100%;
		}

		> .title {
			font-style: italic;
		}

		&::after {
			@include xAlign(absolute);

			background-color: var(--yellow);
			bottom: 0;
			content: "";
			display: block;
			height: 2px;
			width: 100px;
		}
	}

	> .share {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		text-align: center;
		width: 100%;

		> .title {
			font-style: italic;
			font-weight: bold;
			letter-spacing: 2px;
			margin-bottom: 1em;
			width: 100%;
		}

		> a {
			margin-right: 8px;

			> svg {
				background-color: var(--mint);
				border-radius: 50%;
				fill: var(--black);
				height: 48px;
				padding: 8px;
				transition: all .3s ease;
				width: 48px;

				&:hover {
					background-color: var(--black);
					fill: var(--mint);
				}
			}

			&:last-child { margin-right: 0; }

			@media only screen and (min-width: 768px) {
				margin-right: 16px;
			}
		}
	}

	@media only screen and (min-width: 1024px) {
		margin-bottom: 80px;
	}
}

//	                       /$$     /$$           /$$                   /$$            /$$$$$$
//	                      | $$    |__/          | $$                  |__/           /$$__  $$
//	  /$$$$$$   /$$$$$$  /$$$$$$   /$$  /$$$$$$$| $$  /$$$$$$          /$$ /$$$$$$$ | $$  \__//$$$$$$
//	 |____  $$ /$$__  $$|_  $$_/  | $$ /$$_____/| $$ /$$__  $$ /$$$$$$| $$| $$__  $$| $$$$   /$$__  $$
//	  /$$$$$$$| $$  \__/  | $$    | $$| $$      | $$| $$$$$$$$|______/| $$| $$  \ $$| $$_/  | $$  \ $$
//	 /$$__  $$| $$        | $$ /$$| $$| $$      | $$| $$_____/        | $$| $$  | $$| $$    | $$  | $$
//	|  $$$$$$$| $$        |  $$$$/| $$|  $$$$$$$| $$|  $$$$$$$        | $$| $$  | $$| $$    |  $$$$$$/
//	 \_______/|__/         \___/  |__/ \_______/|__/ \_______/        |__/|__/  |__/|__/     \______/
.article-info {
	display: flex;
	font-size: .813em;
	line-height: 16px;
	margin-bottom: 32px;
	top: 0;

	> .author {
		letter-spacing: 2px;
		margin-bottom: 16px;
		width: 50%;

		> .name {
			display: block;
			font-weight: bold;
			width: 100%;
		}

		> .title {
			font-style: italic;
		}

		@media only screen and (min-width: 1024px) {
			width: 100%;
		}
	}

	> .reading {
		align-items: flex-end;
		display: flex;
		flex-direction: column;
		font-size: 10px;
		font-style: italic;
		letter-spacing: 1.5px;
		margin-left: auto;
		position: relative;
		text-align: right;
		width: 64px;

		&::before {
			background: var(--yellow);
			content: "";
			display: none;
			height: 2px;
			position: absolute;
			right: 0;
			top: 0;
			width: 80px;

			@media only screen and (min-width: 1024px) {
				display: block;
			}
		}

		@media only screen and (min-width: 1024px) {
			margin-bottom: 40px;
			padding-top: 16px;
		}
	}

	> .tags {
		display: none;
		flex-wrap: wrap;
		justify-content: flex-end;
		width: 180px;

		> .tag {
			background-color: var(--yellow);
			color: var(--black);
			font-size: 14px;
			letter-spacing: 2px;
			margin-bottom: 8px;
			margin-right: 8px;
			padding: 2px 4px;
			text-decoration: none;
			transition: color .3s ease;

			&:hover {
				background: var(--mint);
			}
		}

		@media only screen and (min-width: 1024px) {
			display: flex;
		}
	}

	@media only screen and (min-width: 1024px) {
		align-items: flex-end;
		flex-direction: column;
		max-width: calc(280px - 24px);
		position: absolute;
		right: calc(100% + 24px);
		text-align: right;
	}
}

//	                     /$$             /$$                     /$$                              /$$     /$$           /$$
//	                    | $$            | $$                    | $$                             | $$    |__/          | $$
//	  /$$$$$$   /$$$$$$ | $$  /$$$$$$  /$$$$$$    /$$$$$$   /$$$$$$$         /$$$$$$   /$$$$$$  /$$$$$$   /$$  /$$$$$$$| $$  /$$$$$$   /$$$$$$$
//	 /$$__  $$ /$$__  $$| $$ |____  $$|_  $$_/   /$$__  $$ /$$__  $$ /$$$$$$|____  $$ /$$__  $$|_  $$_/  | $$ /$$_____/| $$ /$$__  $$ /$$_____/
//	| $$  \__/| $$$$$$$$| $$  /$$$$$$$  | $$    | $$$$$$$$| $$  | $$|______/ /$$$$$$$| $$  \__/  | $$    | $$| $$      | $$| $$$$$$$$|  $$$$$$
//	| $$      | $$_____/| $$ /$$__  $$  | $$ /$$| $$_____/| $$  | $$        /$$__  $$| $$        | $$ /$$| $$| $$      | $$| $$_____/ \____  $$
//	| $$      |  $$$$$$$| $$|  $$$$$$$  |  $$$$/|  $$$$$$$|  $$$$$$$       |  $$$$$$$| $$        |  $$$$/| $$|  $$$$$$$| $$|  $$$$$$$ /$$$$$$$/
//	|__/       \_______/|__/ \_______/   \___/   \_______/ \_______/        \_______/|__/         \___/  |__/ \_______/|__/ \_______/|_______/
@import "../components/article-list";
@import "../components/article-card";

.related-articles {
	flex-wrap: wrap;
	margin: 0 auto 80px;
	max-width: 560px;
	padding: 0;
	position: relative;
	width: 90%;

	> .title {
		font-size: 18px;
		letter-spacing: 2px;
		margin: 0;
		text-align: left;
		text-transform: none;
		width: 100%;

		@media only screen and (min-width: 768px) {
			grid-column: auto / span 2;
		}
	}

	@media only screen and (min-width: 768px) {
		grid-template-columns: repeat(2, 1fr);
		padding: 0;
	}

	@media only screen and (min-width: 1024px) {
		grid-template-columns: repeat(2, 1fr);
		padding: 0;
	}
}