/*! Beitrags-Detailseite */

/* Moved out of the template part verbatim. The selectors still reach for the wrapper the template renders, which is why the editor cannot see them. */

body.post-template-default {
	#page {
		box-sizing: border-box;
		container-type: inline-size;
		container-name: page;
	}
	main.site-main.wrappedContent {
		padding: 0 85px;
	}
	
	.post-detail-head {
		width: 100%;
		max-width: var(--hoou-content-max-width);
		margin: 50px auto;
	}

	/* This wrapper contains the date, the author's name,
	   the headline, and the excerpt. */
	.post-detail-intro-wrapper {
		flex: 1;
		font-size: 16px;
		margin-top: 45px;
	}

	.post-detail-intro-wrapper > p > span {
		font-size: 12px;
	}

	/* post date */
	.post-detail-intro-wrapper > p > span:first-child {
		margin-right: 6px;
	}

	/* author */
	.post-detail-intro-wrapper > p > span:last-child {
		margin-left: 6px;
		text-transform: uppercase;
	}

	.post-detail-body {
		max-width: var(--hoou-content-max-width);
		padding-bottom: 50px;
		margin: auto;
	}

	/* tabular data at bottom */
	.post-detail-summary {
		margin-top: 45px;
	}

	/* previous/next links generated by the_content() */
	.navigation.post-navigation {
		display: none;
	}
	.post-detail-image-wrapper {
		max-width: var(--hoou-content-max-width);
		display: flex;
		justify-content: center;
	}

	.post-detail-image-wrapper-image {
		margin-bottom: 4px;
	}

	.post-detail-image-wrapper-caption-wrapper {
		width: 100%;
		position: relative;
		text-align: right;
	}

	.post-detail-image-wrapper-caption-wrapper div {
		width:100%;
		display: inline-block;
	}

	.post-detail-image-wrapper-caption-wrapper p {
		text-align: right;
		color: #70777d;
		font-family: var(--global-hoou-font-family);
		font-size: 12px;
		font-style: normal;
		font-weight: normal;
		line-height: 18px;
		letter-spacing: 0.06px;
		margin: 0;
	}

	@container page (max-width: 768px) {
		main.site-main.wrappedContent {
			padding: 0;
		}
		.post-detail-intro-wrapper {
			margin-top: 0px!important;
		}
		.post-detail-body,
		.post-detail-intro-wrapper {
			padding: 0 20px;
		}
		.post-detail-image-wrapper-caption-wrapper div {
			padding: 0 5px;
		}
	}

	@container page (min-width: 638px) and (max-width: 768px) {
		.post-detail-body,
		.post-detail-intro-wrapper {
			padding: 0 calc(20px + (85 - 20) * (100cqw - 638px) / (768 - 638));
		}
	}
}