/* ======================================================================
   Single post — single.php + template-parts/related-posts.php

   Structure:
   section.page-section.single-content
       .pad
           .container
               .columns-wrap
                   article.col-main
                       .featured-image
                           img
                       h1
                       .post-meta
                           time.date
                           ul.post-categories > li > a
                       (the_content)
                   aside.col-aside.related-posts           (posts only)
                       h2.related-title [> a]
                       ul.related-list
                           li > a
                               span.date
                               span.title
                       a.btn.btn-secondary
   ====================================================================== */


/* ----------------------------------------------------------------------
   Base — mobile first: the aside stacks under the article
   ---------------------------------------------------------------------- */

.single-content .columns-wrap {
	display: flex;
	flex-direction: column;
	gap: calc(var(--padding-content) * 2);
}

/* Grid/flex children default to min-width:auto — wide content (galleries,
   embeds, long words) would otherwise push the column past its track */
.single-content .col-main,
.single-content .col-aside {
	min-width: 0;
}

.single-content .featured-image {
	margin-bottom: 1.5em;
}

/* Height cap for portrait images — at full column width they end up taller
   than the viewport and push the title off screen. Scaled down, never
   cropped (it is often artwork), and small old images are not upscaled. */
.single-content .featured-image img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: min(75vh, 720px);
	border-radius: var(--border-radius);
}


/* ----------------------------------------------------------------------
   Post meta — same treatment as .meta in the post listing items
   ---------------------------------------------------------------------- */

.single-content .post-meta {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: .25em 1.5em;
	margin: .5em 0 2em;
	font-size: .8em;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.single-content .post-categories {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: .25em 1em;
}

.single-content .post-categories li {
	margin: 0;
	padding: 0;
}

.single-content .post-categories a {
	color: var(--ctx-fg-muted);
	text-decoration: none;
}

.single-content .post-categories a:hover {
	color: inherit;
	text-decoration: underline;
}


/* ----------------------------------------------------------------------
   Related posts
   ---------------------------------------------------------------------- */

.related-posts .related-title {
	margin: 0 0 .5em;
	font-size: 22px;   /* h3 size — an h2 for the outline, not for the eye */
	line-height: 1.25;
}

.related-posts .related-title a {
	color: inherit;
	text-decoration: none;
}

.related-posts .related-title a:hover {
	text-decoration: underline;
}

.related-posts .related-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--ctx-border-subtle);
}

.related-posts .related-list li {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--ctx-border-subtle);
}

.related-posts .related-list a {
	display: flex;
	flex-flow: column;
	gap: .15em;
	padding: .9em 0;
	color: inherit;
	text-decoration: none;
}

.related-posts .related-list .date {
	font-size: .8em;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--ctx-fg-muted);
}

.related-posts .related-list .title {
	font-weight: var(--font-weight-semibold);
	line-height: 1.35;
	text-wrap: pretty;
}

.related-posts .related-list a:hover .title {
	text-decoration: underline;
}


/* ----------------------------------------------------------------------
   Desktop — 8 + 4 (66 + 33), same grid as standard_content .cols_8_4
   ---------------------------------------------------------------------- */

@media screen and (min-width: 1024px) {

	.single-content .columns-wrap {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		gap: var(--gap-columns);
		align-items: start;
	}

	.single-content .col-main  { grid-column: span 8; }
	.single-content .col-aside { grid-column: span 4; }

}