/* ==========================================================================
   Single Post
   ========================================================================== */

/*
 * Shared prose column — used by the header inner wrapper, the body content
 * div, and the footer inner wrapper so title / body / tags all left-align.
 * Breadcrumb intentionally stays full container width (it's site navigation).
 */
.ac-post-inner,
.ac-single-post__content {
	max-width:     680px;
	margin-inline: auto;
}

/* ── Post header ───────────────────────────────────────────────────────── */
.ac-single-post__header {
	padding-block: var(--ac-space-10) var(--ac-space-8);
}

.ac-single-post__cats {
	display:   flex;
	flex-wrap: wrap;
	gap:       var(--ac-space-2);
	margin-bottom: var(--ac-space-4);
}

.ac-single-post__title {
	font-size:   clamp(1.75rem, 4vw, 2.75rem);
	font-weight: var(--ac-font-weight-bold);
	line-height: 1.2;
	color:       var(--ac-color-text);
	margin:      0 0 var(--ac-space-6);
}

/* ── Post meta row ─────────────────────────────────────────────────────── */
.ac-single-post__meta {
	display:     flex;
	align-items: center;
	flex-wrap:   wrap;
	gap:         var(--ac-space-3);
	font-size:   var(--ac-font-size-sm);
	color:       var(--ac-color-text-muted);
}

.ac-single-post__author {
	display:        flex;
	align-items:    center;
	gap:            var(--ac-space-2);
	font-weight:    var(--ac-font-weight-semibold);
	color:          var(--ac-color-text);
	text-decoration: none;
}

.ac-single-post__author:hover,
.ac-single-post__author:focus-visible {
	color: var(--ac-color-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ac-single-post__avatar {
	width:         40px;
	height:        40px;
	border-radius: 50%;
	object-fit:    cover;
	flex-shrink:   0;
}

.ac-single-post__date,
.ac-single-post__reading-time {
	display:     flex;
	align-items: center;
	gap:         var(--ac-space-1);
}

.ac-single-post__meta-sep {
	color: var(--ac-color-border);
}


/* ── Prose content ─────────────────────────────────────────────────────── */
.ac-single-post__body {
	margin-bottom: var(--ac-space-12);
}

.ac-single-post__content {
	font-size:   var(--ac-font-size-md);
	line-height: var(--ac-line-height-loose, 1.8);
	color:       var(--ac-color-text);
	display:     flow-root;       /* clearfix — contains the floated image */
}

/* ── Featured image — floated inside the prose column ──────────────────── */
.ac-single-post__image {
	float:         right;
	width:         min(300px, 42%);
	max-height:    22rem;           /* cap height so text wraps under */
	margin:        var(--ac-space-1) 0 var(--ac-space-5) var(--ac-space-6);
	border-radius: var(--ac-radius-lg);
	overflow:      hidden;
	box-shadow:    var(--ac-shadow-sm);
}

.ac-single-post__img {
	width:      100%;
	height:     100%;
	max-height: 22rem;
	object-fit: cover;              /* crop to fill the capped height */
	display:    block;
}

.ac-single-post__caption {
	padding:    var(--ac-space-2) var(--ac-space-3);
	font-size:  var(--ac-font-size-sm);
	color:      var(--ac-color-text-muted);
	font-style: italic;
	text-align: center;
	border-top: 1px solid var(--ac-color-border);
	background: var(--ac-color-surface);
}

/* ── Prose typography reset ─────────────────────────────────────────────── */
.ac-single-post__content h2,
.ac-single-post__content h3,
.ac-single-post__content h4 {
	margin-top:    1.75em;
	margin-bottom: .4em;
	font-weight:   var(--ac-font-weight-bold);
	line-height:   1.3;
	color:         var(--ac-color-text);
}

.ac-single-post__content h2 { font-size: var(--ac-font-size-xl); }
.ac-single-post__content h3 { font-size: var(--ac-font-size-lg); }
.ac-single-post__content h4 { font-size: var(--ac-font-size-md); }

.ac-single-post__content p {
	margin-block: 0 1em;
}

.ac-single-post__content a {
	color:                 var(--ac-color-primary);
	text-decoration:       underline;
	text-underline-offset: 2px;
}

.ac-single-post__content a:hover,
.ac-single-post__content a:focus-visible {
	color: var(--ac-color-primary-dark);
}

.ac-single-post__content img {
	max-width:     100%;
	height:        auto;
	border-radius: var(--ac-radius-md);
	display:       block;
	margin-block:  1.5em;
}

.ac-single-post__content blockquote {
	margin:      1.5em 0;
	padding:     var(--ac-space-5) var(--ac-space-6);
	border-left: 4px solid var(--ac-color-primary);
	background:  var(--ac-color-surface);
	border-radius: 0 var(--ac-radius-md) var(--ac-radius-md) 0;
	font-style:  italic;
	color:       var(--ac-color-text-muted);
}

.ac-single-post__content blockquote p { margin: 0; }

.ac-single-post__content ul,
.ac-single-post__content ol {
	padding-left: 1.5em;
	margin-block: 0 1em;
}

.ac-single-post__content li { margin-bottom: .4em; }

.ac-single-post__content pre,
.ac-single-post__content code {
	font-family:    monospace;
	font-size:      .9em;
	background:     var(--ac-color-surface);
	border:         1px solid var(--ac-color-border);
	border-radius:  var(--ac-radius-sm);
}

.ac-single-post__content code  { padding: .15em .4em; }
.ac-single-post__content pre   { padding: var(--ac-space-5); overflow-x: auto; }
.ac-single-post__content pre code { background: none; border: none; padding: 0; }

.ac-single-post__content figure {
	margin-block: 1.5em;
}

.ac-single-post__content figcaption {
	font-size:  var(--ac-font-size-sm);
	color:      var(--ac-color-text-muted);
	font-style: italic;
	margin-top: var(--ac-space-2);
	text-align: center;
}

/* ── Post footer: tags + nav ───────────────────────────────────────────── */
.ac-single-post__footer {
	padding-block: var(--ac-space-8) var(--ac-space-16);
	border-top:    1px solid var(--ac-color-border);
}

/* Tags */
.ac-single-post__tags {
	display:       flex;
	align-items:   center;
	flex-wrap:     wrap;
	gap:           var(--ac-space-2);
	margin-bottom: var(--ac-space-8);
}

.ac-single-post__tags-label {
	display:     flex;
	align-items: center;
	gap:         var(--ac-space-1);
	font-size:   var(--ac-font-size-sm);
	font-weight: var(--ac-font-weight-semibold);
	color:       var(--ac-color-text-muted);
	white-space: nowrap;
}

.ac-single-post__tag-list {
	display:     flex;
	flex-wrap:   wrap;
	gap:         var(--ac-space-2);
	list-style:  none;
	margin:      0;
	padding:     0;
}

.ac-single-post__tag {
	display:         inline-block;
	padding:         var(--ac-space-1) var(--ac-space-3);
	background:      var(--ac-color-surface);
	border:          1px solid var(--ac-color-border);
	border-radius:   var(--ac-radius-pill);
	font-size:       var(--ac-font-size-sm);
	font-weight:     var(--ac-font-weight-medium);
	color:           var(--ac-color-text-muted);
	text-decoration: none;
	transition:      background .15s ease, border-color .15s ease, color .15s ease;
}

.ac-single-post__tag:hover,
.ac-single-post__tag:focus-visible {
	background:   var(--ac-color-primary);
	border-color: var(--ac-color-primary);
	color:        #fff;
}

/* Prev / next navigation */
.ac-single-post__nav {
	display:        grid;
	grid-template-columns: 1fr 1fr;
	gap:            var(--ac-space-4);
}

.ac-single-post__nav-link {
	display:         flex;
	align-items:     center;
	gap:             var(--ac-space-4);
	padding:         var(--ac-space-5) var(--ac-space-6);
	background:      var(--ac-color-surface);
	border:          1px solid var(--ac-color-border);
	border-radius:   var(--ac-radius-lg);
	text-decoration: none;
	color:           var(--ac-color-text);
	transition:      background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.ac-single-post__nav-link:hover,
.ac-single-post__nav-link:focus-visible {
	background:   #fff;
	border-color: var(--ac-color-primary);
	box-shadow:   var(--ac-shadow-sm);
	transform:    translateY(-1px);
}

.ac-single-post__nav-link--next {
	justify-content: flex-end;
	text-align:      right;
	grid-column:     2;
}

.ac-single-post__nav-link--prev {
	grid-column: 1;
}

.ac-single-post__nav-dir {
	font-size:  1.25rem;
	color:      var(--ac-color-primary);
	flex-shrink: 0;
}

.ac-single-post__nav-meta {
	display:        flex;
	flex-direction: column;
	gap:            var(--ac-space-1);
	min-width:      0;
}

.ac-single-post__nav-label {
	font-size:      var(--ac-font-size-xs);
	font-weight:    var(--ac-font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: .06em;
	color:          var(--ac-color-text-muted);
}

.ac-single-post__nav-title {
	font-size:   var(--ac-font-size-sm);
	font-weight: var(--ac-font-weight-semibold);
	overflow:    hidden;
	display:     -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* ── Pagination (multi-page posts) ─────────────────────────────────────── */
.ac-single-post__page-links {
	display:     flex;
	flex-wrap:   wrap;
	align-items: center;
	gap:         var(--ac-space-2);
	margin-top:  var(--ac-space-8);
	padding-top: var(--ac-space-8);
	border-top:  1px solid var(--ac-color-border);
	font-size:   var(--ac-font-size-sm);
}

.ac-single-post__page-links-label {
	font-weight: var(--ac-font-weight-semibold);
	color:       var(--ac-color-text-muted);
}

.ac-single-post__page-links span:not(.ac-single-post__page-links-label),
.ac-single-post__page-links a {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	min-width:       2rem;
	height:          2rem;
	padding:         0 var(--ac-space-2);
	border-radius:   var(--ac-radius-sm);
	font-weight:     var(--ac-font-weight-semibold);
	text-decoration: none;
}

.ac-single-post__page-links a {
	background: var(--ac-color-surface);
	color:      var(--ac-color-primary);
	border:     1px solid var(--ac-color-border);
}

.ac-single-post__page-links a:hover {
	background: var(--ac-color-primary);
	color:      #fff;
}

.ac-single-post__page-links span:not(.ac-single-post__page-links-label) {
	background: var(--ac-color-primary);
	color:      #fff;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media ( max-width: 48em ) {
	/* Un-float image — sits full-width above text on narrow screens */
	.ac-single-post__image {
		float:     none;
		width:     100%;
		min-width: unset;
		margin:    0 0 var(--ac-space-5);
	}

	.ac-single-post__nav {
		grid-template-columns: 1fr;
	}

	.ac-single-post__nav-link--next {
		grid-column: 1;
		justify-content: flex-start;
		text-align:      left;
	}
}

@media ( max-width: 36em ) {
	.ac-single-post__header {
		padding-block: var(--ac-space-6) var(--ac-space-5);
	}

	.ac-single-post__meta {
		gap: var(--ac-space-2);
	}
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media ( prefers-reduced-motion: reduce ) {
	.ac-single-post__nav-link,
	.ac-single-post__tag {
		transition: none;
	}
}