/* ==================================================

	Post

================================================== */

.post {
	display: flex;
	flex-direction: column;

	padding-block: 12px 9.5px;

	overflow: hidden;
}

.post--byline {
	padding-top: 9.5px;
	padding-bottom: 7.5px;
}

/* -------------------------------------
	=Byline
------------------------------------- */

.post__byline {
	display: flex;
	align-items: center;

	padding-inline: 13px;
	padding-bottom: 7px;
}

.post__byline-avatar {
	flex: 0 0 var(--avatar-w-sm);

	width:  var(--avatar-w-sm);
	height: var(--avatar-w-sm);

	border-radius: 50%;
	object-fit: cover;
}

.post__byline-text {
	margin-left: 10px;

	font-size:      var(--text-byline);
	letter-spacing: 0.22px;
}

.post__byline-name {
	font-weight: var(--font-weight-bold);
}

/* -------------------------------------
	=Header
------------------------------------- */

.post__header {
	position: relative;
	display: flex;
	align-items: flex-start;

	padding-inline: 16.5px;
}

/* @related =hr */
.card__rule + .post__header {
	margin-top: 13px;
}

.post__avatar {
	flex: 0 0 var(--avatar-w);

	width:  var(--avatar-w);
	height: var(--avatar-w);

	border-radius: 50%;
	object-fit: cover;
}

.post__identity {
	margin-top: 1.5px;
	margin-left: 8px;
}

.post__author {
	font-size:   var(--text-post-author);
	font-weight: var(--font-weight-bold);
	line-height: 1.2;
	white-space: nowrap;
}

.post__meta {
	margin-top: 1px;

	font-size:   var(--text-meta);
	line-height: 1.2;
	color:       var(--color-fg-secondary);
	white-space: nowrap;
}

.post__time {
	margin-top: 2.5px;

	font-size:   var(--text-timestamp);
	font-weight: var(--font-weight-bold);
	line-height: 1.25;
	color:       var(--color-fg-muted);
}

.post__menu {
	position: absolute;
	top: -13px;
	right: 19px;

	font-size:      20px;
	font-weight:    var(--font-weight-bold);
	line-height:    1.2;
	letter-spacing: 2px;
	color:          var(--color-fg-muted);
}

/* -------------------------------------
	=Body copy
------------------------------------- */

.post__body {
	padding-left: 15px;
	padding-right: 12.5px;
	margin-top: 14px;

	font-size:   var(--text-body);
	font-weight: var(--font-weight-medium);
	line-height: 1.25;
}

/* -------------------------------------
	=Media
------------------------------------- */

.post__media {
	position: relative;

	margin-top: 14px;
}

.post__media-image {
	width: 100%;
	height: auto; /* img height attr would pin the box and defeat aspect-ratio */

	object-fit: contain;
}

.object-fit-cover {
	object-fit: cover;
}

.object-fit-contain {
	object-fit: contain;
}

.object-top-left {
	object-position: top left;
}
.object-top {
	object-position: top;
}
.object-top-right {
	object-position: top right;
}
.object-left {
	object-position: left;
}
.object-center {
	object-position: center;
}
.object-right {
	object-position: right;
}
.object-bottom-left {
	object-position: bottom left;
}
.object-bottom {
	object-position: bottom;
}
.object-bottom-right {
	object-position: bottom right;
}

.post__media--video .post__media-image,
.post__media--link .post__media-image {
	aspect-ratio: 505.5 / 282.5;
}

.post__play {
	position: absolute;
	top: 50%;
	left: 50%;

	width:  40px;
	height: 40px;

	transform: translate(-50%, -50%);
	opacity: .5;
}

.post__media:focus-within .post__play,
.post__media:focus-visible .post__play,
.post__media:hover .post__play {
	opacity: .52;
}

.post__play-glyph {
	position: absolute;
	top:  calc(50% + 0px);
	left: calc(50% + 1px);

	width:  21px;
	height: 18px;

	transform: translate(-50%, -50%);

	opacity: .8;
	transition: .05s opacity ease-out;
}

.post__media:focus-within .post__play-glyph,
.post__media:focus-visible .post__play-glyph,
.post__media:hover .post__play-glyph {
	opacity: .82;
}

/* -------------------------------------
	=Stats
------------------------------------- */

.post__stats {
	display: flex;
	justify-content: space-between;

	padding-inline: 12.5px;
	margin-top: 8.5px;

	font-size:   var(--text-body);
	font-weight: var(--font-weight-medium);
	line-height: 1.25;
	color:       var(--color-fg-muted);
}

.post__rule {
	margin-top: 8px;
}

/* -------------------------------------
	Per-variant corrections
------------------------------------- */

.post--text {
	padding-bottom: 15px;
}

.post--text .post__stats {
	margin-top: 18.5px;
}

/* -------------------------------------
	=Mobile

	Card heights are load-bearing: posters and scoops are placed by px down the page, so every gap and line-height is pinned to the artboard.
------------------------------------- */

@media ( max-width: 1076px ) {

	.post {
		padding-block: 12px 9.25px;
		padding-inline: 0;
	}

	.post--byline {
		padding-top: 9.25px;
		padding-bottom: 8px;
	}

	.post--text {
		padding-bottom: 13px;
	}

	.post__byline {
		padding-inline: 13px;
	}

	.card__rule + .post__header {
		margin-top: 12.5px;
	}

	.post__header {
		padding-inline: 16px;
	}

	.post__identity {
		margin-top: 4.5px;
	}

	.post__author {
		font-size:   12px;
		line-height: 1.25;
	}

	.post__meta {
		margin-top: 0;

		font-size:   8px;
		line-height: 1.25;
	}

	.post__time {
		margin-top: 1.25px;
	}

	.post__menu {
		right: 12.5px;
	}

	.post__body {
		margin-top: 15.5px;
		padding-left: 15px;
		padding-right: 9.5px;

		font-size:   11px;
		line-height: 1.182; /* 13/11 - four lines of body copy have to measure 52px */
	}

	.post--byline .post__body {
		margin-top: 14px;
	}

	.post__media {
		margin-top: 13.75px;
		margin-inline: 0;
	}

	.post__media--video .post__media-image {
		aspect-ratio: 375 / 196;
		object-position: 50% 29%;
	}

	.post__media--link .post__media-image {
		aspect-ratio: 375 / 195.5;
	}

	.post__stats {
		margin-top: 10px;
		padding-left: 12.5px;
		padding-right: 9.5px;

		font-size:   10px;
		line-height: 1.2;
	}

	.post--text .post__stats {
		margin-top: 19.75px;
	}

	.post__rule {
		margin-top: 11px;
		margin-right: 9.5px;
	}

}

/* -------------------------------------
	=Milestones

	CSS can't compare dates, so later-than pairs are spelled out.

	@match milestone_dates (partial) - known milestone values, spelled out wherever they're consumed
------------- */

html[data-milestone="8-27"] .post[data-publish="9-2"],
html[data-milestone="8-27"] .post[data-publish="9-7"],
html[data-milestone="9-2"] .post[data-publish="9-7"] {
	display: none;
}

.post__time-fake-relative {
	display: none;
}

html[data-milestone="8-27"] .post[data-publish="8-27"] .post__time-absolute,
html[data-milestone="9-2"] .post[data-publish="9-2"] .post__time-absolute,
html[data-milestone="9-7"] .post[data-publish="9-7"] .post__time-absolute {
	display: none;
}

html[data-milestone="8-27"] .post[data-publish="8-27"] .post__time-fake-relative,
html[data-milestone="9-2"] .post[data-publish="9-2"] .post__time-fake-relative,
html[data-milestone="9-7"] .post[data-publish="9-7"] .post__time-fake-relative {
	display: inline;
}