/* post-container — single-article shell: full-bleed hero image with an
   overlapping soft-white article card, 700px reading measure, drop cap.
   Also carries .post-details (the dark centered article header), which the
   reference ships as a sibling micro-component of the same page. */

/* ---------------------------------------------------------- post-details */

.post-details {
	background-color: var(--color-soft-black);
	padding: var(--grid-section-gutter) var(--grid-col-gutter);
}

@media screen and (min-width: 768px) {
	.post-details { padding: var(--grid-section-gutter); }
}

.post-details__content {
	color: var(--color-soft-white);
	margin-left: auto;
	margin-right: auto;
	max-width: 1000px;
	text-align: center;
}

.post-details__time {
	align-items: center;
	display: inline-flex;
	gap: 6px;
	margin-top: 10px;
}

.post-details__excerpt { margin-top: 10px; }

@media screen and (min-width: 768px) {
	.post-details__excerpt { margin-top: 15px; }
}

.post-details__excerpt a {
	color: var(--color-brass-1);
	text-decoration: underline;
}

/* -------------------------------------------------------- post-container */

.post-container { border-bottom: 1px solid var(--color-gray-300); }

.post-container__image-wrap {
	height: clamp(300px, calc(64.1025641vw - 69.2307692px), 700px);
	margin: 0;
	position: relative;
}

.post-container__image {
	height: 100%;
	left: 0;
	object-fit: cover;
	position: absolute;
	top: 0;
	width: 100%;
}

.post-container__wrap {
	background-color: var(--color-soft-white);
	border-radius: 0;
	margin: 0 auto var(--typography-spacing);
	max-width: 1000px;
	padding: var(--grid-section-gutter) var(--grid-col-gutter);
	position: relative;
	width: calc(100% - var(--grid-col-gutter) * 2);
}

@media screen and (min-width: 768px) {
	.post-container__wrap {
		padding-left: var(--grid-section-gutter);
		padding-right: var(--grid-section-gutter);
	}
}

/* Article card overlaps the bottom of the hero image. */
.post-container__image-wrap + .post-container__wrap {
	margin-top: calc((50px + var(--grid-section-gutter)) * -1);
}

@media screen and (min-width: 1280px) {
	.post-container__image-wrap + .post-container__wrap {
		margin-top: calc((70px + var(--grid-section-gutter)) * -1);
	}
}

/* Narrow reading measure for flow content inside the card. */
.post-container__wrap > h1,
.post-container__wrap > h2,
.post-container__wrap > h3,
.post-container__wrap > h4,
.post-container__wrap > h5,
.post-container__wrap > h6,
.post-container__wrap > p,
.post-container__wrap > ul,
.post-container__wrap > ol,
.post-container__wrap > blockquote,
.post-container__wrap > figure {
	margin-left: auto;
	margin-right: auto;
	max-width: 700px;
}

/* Drop cap: first letter of the first paragraph of the article body. */
.post-container__wrap > p:first-of-type::first-letter,
.drop-cap::first-letter {
	font-family: var(--heading-font-family);
	font-size: 29px;
	font-style: normal;
	font-weight: var(--font-weight-bold);
	line-height: 1;
	text-transform: uppercase;
}

@media (min-width: 400px) {
	.post-container__wrap > p:first-of-type::first-letter,
	.drop-cap::first-letter { font-size: calc(2.1vw + 20.6px); }
}

@media (min-width: 1400px) {
	.post-container__wrap > p:first-of-type::first-letter,
	.drop-cap::first-letter { font-size: 50px; }
}