/* .page-article *******************************/

.page-article {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0 auto;
	margin-top: 40px;
	max-width: 1390px;
	position: relative;

	> .main {
	}

	> .sidebar {
		padding: 0 20px;
	}

	section {

		.header {
			border-bottom: 1px solid #ccc;
			display: flex;
			flex-direction: column;
			margin-bottom: 20px;
			padding-bottom: 10px;

			h3 {
			}

			.nav {

				a, button {
					color: #222;
					text-decoration: none;

					&:hover {
						color: #222;
						text-decoration: underline;
					}
				}

				span {
					margin: 0 10px;
				}
			}
		}
	}
}

@media (min-width: 1000px) {

	.page-article {
		flex-direction: row;

		> .main {
			width: 1069px;
		}

		> .sidebar {
			border-left: 1px solid #ccc;
			padding: 0;
			padding-left: 20px;
			width: 321px;
		}

		section {

			.header {
				align-items: flex-end;
				flex-direction: row;
				justify-content: space-between;

				h3 {
				}

				.nav {

					a, button {

						&:hover {
						}
					}

					span {
					}
				}
			}
		}
	}
}

/* .page-article section.header *******************************/

.page-article section.header {
	padding: 20px 20px 0 20px;

	.wrapper {

		.section {
			margin-bottom: 10px;

			a {
				color: #c6503d;
				font-size: 0.8rem;
				text-decoration: none;
				text-transform: uppercase;

				&:hover {
					text-decoration: underline;
				}
			}
		}

		h1 {
			font-family: var(--font-callout);
			font-size: 1.8rem;
			font-weight: 800;
			margin-bottom: 5px;
		}

		h2 {
			font-size: 1.0rem;
			font-weight: 500;
			color: #666;
			margin-bottom: 20px;
		}

		.creator {
			align-items: center;
			display: flex;
			gap: 5px;
			margin-bottom: 20px;

			> span {
				margin-left: 10px;
			}

			button {
				align-items: center;
				background-color: transparent;
				border: 0;
				color: #222;
				display: flex;
				gap: 10px;
				padding: 0;
				text-decoration: none;

				u {
					color: var(--color-link);
				}

				&:hover u {
					text-decoration: none;
				}

				&.author {

					img {
						border-radius: 20px;
						height: 40px;
						width: auto;
					}
				}

				&.tip {
					gap: 0;

					img {
						height: 20px;
						width: auto;
					}
				}
			}
		}
	}

	.meta {
		align-items: flex-start;
		border-top: 1px solid #ddd;
		display: flex;
		flex-direction: column;
		gap: 10px;
		justify-content: space-between;
		padding: 10px 0;

		.left {
			align-items: flex-start;
			display: flex;
			gap: 10px;
			justify-content: space-between;
			width: 100%;

			.read {
				align-items: center;
				display: flex;
				gap: 6px;
				font-weight: 600;

				img {
					height: 16px;
					width: auto;
				}
			}

			button {
				align-items: center;
				background: transparent;
				border: 0;
				color: #333;
				display: flex;
				gap: 10px;
				padding: 0;

				img {
					height: 16px;
					opacity: 0.8;
					width: auto;
				}

				&.listen-expand {

					img {
						height: 24px;
					}
				}
			}
		}

		.right {
			align-items: flex-start;
			border-top: 1px solid #ccc;
			display: none;
			flex-direction: column;
			gap: 10px;
			padding-top: 10px;
			width: 100%;

			.type {
				align-items: center;
				display: flex;
				font-size: 1rem;
				gap: 5px;

				img {
					height: 20px;
					width: 20px;
				}
			}

			.accuracy {
				align-items: center;
				display: flex;
				font-size: 1rem;
				gap: 5px;

				img {
					height: 20px;
					width: 20px;
				}
			}

			.sentiment {
				align-items: center;
				display: flex;
				font-size: 1rem;
				gap: 5px;

				.icon {
					border: 1px solid #000;
					border-radius: 20px;
					display: inline-block;
					height: 16px;
					width: 16px;

					&.left-2 { background-color: #003366; }
					&.left-1 { background-color: #7f99b2; }
					&.neutral { background-color: #fff; }
					&.right-1 { background-color: #e0838b; }
					&.right-2 { background-color: #c20817; }
				}
			}

			button {
				align-items: center;
				background: transparent;
				border: 0;
				color: #333;
				display: none;
				gap: 10px;
				padding: 0;

				img {
					height: 16px;
					opacity: 0.8;
					width: auto;
				}
			}
		}
	}
}

@media (min-width: 1000px) {

	.page-article section.header {
		padding: 0;

		.wrapper {

			.section {

				a {

					&:hover {
					}
				}
			}

			h1 {
				font-size: 2.3rem;
			}

			h2 {
				font-size: 1.4rem;
			}

			.author {

				&:hover u {
				}

				img {
				}
			}
		}

		.meta {
			align-items: center;
			display: flex;
			flex-direction: row;
			gap: 20px;

			.left {
				align-items: center;
				flex-direction: row;
				width: auto;

				.read {

					img {
					}
				}

				button {
					display: none;
				}
			}

			.right {
				align-items: center;
				border-top: 0;
				display: flex;
				flex-direction: row;
				gap: 20px;
				padding-top: 0;
				width: auto;

				.type {

					img {
					}
				}

				.sentiment {

					.icon {
					}
				}

				button {
					display: flex;

					img {
					}
				}
			}
		}
	}
}

/* .page-article section.hero *******************************/

.page-article section.hero {
	overflow: hidden;

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

@media (min-width: 1000px) {

	.page-article section.hero {
		height: 500px;

		img {
		}
	}
}

/* .page-article section.note *******************************/

.page-article section.note {
	border-bottom: 1px solid #ccc;
	color: #666;
	font-size: 0.8rem;
	margin-bottom: 20px;
	padding: 20px;

	span {
		font-weight: 800;
	}
}

@media (min-width: 1000px) {

	.page-article section.note {
		padding: 20px 0;

		span {
		}
	}
}

/* .page-article section.copy *******************************/

.page-article section.copy {
	padding: 0 20px;
}

@media (min-width: 1000px) {

	.page-article section.copy {
		padding: 0;
	}
}

/* .page-article section.slides *******************************/

.page-article section.slides {
}

@media (min-width: 1000px) {

	.page-article section.slides {
	}
}

/* .page-article section.sources *******************************/

.page-article section.sources {
	margin-bottom: 40px;
	padding: 0 20px;
}

@media (min-width: 1000px) {

	.page-article section.sources {
		padding: 0;
	}
}

/* .page-article section.tags *******************************/

.page-article section.tags {
}

@media (min-width: 1000px) {

	.page-article section.tags {
	}
}

/* .page-article section.related *******************************/

.page-article section.related {
	margin-bottom: 40px;
	padding: 0 20px;

	.articles {
		display: flex;
		flex-direction: column;
		gap: 40px;
		margin-bottom: 40px;

		.article {
		}
	}
}

@media (min-width: 1000px) {

	.page-article section.related {
		padding: 0;

		.articles {
			flex-direction: row;

			.article {
				width: calc((100% - 80px) / 3);
			}
		}
	}
}

/* .page-article section.comments *******************************/

.page-article section.comments {
}

@media (min-width: 1000px) {

	.page-article section.comments {
	}
}