// Post Styles
.billow {
	header.post-entry-header {
		margin-left: calc( -100vw / 2 + 100% / 2);
		margin-right: calc( -100vw / 2 + 100% / 2);
		max-width: 100vw;
		min-width: 100vw;
		margin-bottom: 1.5em;

		min-height: 28rem;
		height: 28rem;

		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		position: relative;
		width: auto;
		padding: 0;
		border: none;

		.blw-overlay {
			position: absolute;
			max-width: 65rem;
			width: 95%;
			color: $color_white;
			text-align: center;
			z-index: 2;
			top: 50%;
			left: 50%;
			padding: 2.5rem;
			transform: translateX(-50%) translateY(-50%);
			box-sizing: border-box;

			h1.entry-title {
				font-weight: 700;
				color: $color_white;
				text-shadow: 0 0 22px rgba(0, 0, 0, 0.3);
				margin-top: 0;
			}

			.entry-meta {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-wrap: wrap;
				color: $color_white;
				font-size: 0.90rem;
				letter-spacing: .1em;
				text-transform: uppercase;

				span.meta-item {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-wrap: wrap;
					text-shadow: 0 0 22px rgba(0, 0, 0, 0.3);
					color: inherit;
					margin-right: 0.9rem;

					&::before {
						font-family: "Font Awesome 5 Free";
						font-weight: 700;
						font-size: 1rem;
						margin-right: 0.4rem;
					}

					.entry-date,
					a {
						display: inline-block;
						font-weight: inherit;
						font-size: inherit;
						color: inherit !important;
						text-decoration: none;

						&:after {
							content: none;
						}
					}
				}

				span.posted-on {
					&::before {
						content: '\f073';
					}
				}

				span.author {
					&::before {
						content: '\f007';
					}
				}

				span.tag-links {
					&::before {
						content: '\f02e';
					}
				}

				span.category {
					&::before {
						content: '\f02b';
					}
				}
			}
		}

		&.with-thumbnail {
			&:before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				background-color: inherit;
				z-index: 0;
				background: rgba(0, 0, 0, 0.23);
				pointer-events: none;
			}

			.post-thumbnail {
				display: block;
				width: 100%;
				height: 28rem;

				img {
					width: 100%;
					height: 28rem;
					font-family: 'object-fit: cover';
					box-shadow: none;
					will-change: initial;
				}
			}
		}

		&.without-thumbnail {
			min-height: 15rem;
			background-color: $color_grey;
		}
	}

	&.attachment {
		header.post-entry-header {
			margin-left: 0;
			margin-right: 0;
			max-width: 100%;
			min-width: 100%;
			min-height: auto;
			height: auto;
			background-color: transparent;

			.blw-overlay {
				position: relative;
				max-width: 100%;
				width: 100%;
				top: 0;
				left: 0;
				transform: none;

				h1.entry-title {
					text-shadow: none;
					color: $color_text_main;
				}
			}
		}
	}
}

.billow {
	.site-main {
		header.entry-header {
			.post-thumbnail {
				img {
					width: 100%;
					height: 100%;
					max-height: 34rem;
				}
			}
		}
	}
}

@media ( max-width: 42rem ) {
	.billow {
		.site-main {
			header.post-entry-header {
				.blw-overlay {
					max-width: 70rem;
					width: 100%;
					padding: 1.5rem;

					h1.entry-title {
						font-size: 2rem;
					}

					.entry-meta {
						font-size: 0.8rem;
					}
				}
			}
		}
	}
}