/* =============================================================================
   Post Listing — News & Blog
   Used by page-news.php / page-blog.php via template-post-listing.php
   ============================================================================= */

/* ── Hero header ─────────────────────────────────────────────────────────── */
.ac-listing-hero .ac-archive-hero__desc p {
	margin: 0;
	font-size: var(--ac-font-size-md);
}

/* ── Category filter bar ─────────────────────────────────────────────────── */
.ac-listing-filter {
	background:    var(--ac-color-white);
	border-bottom: 1px solid var(--ac-color-border);
	padding-block: var(--ac-space-4);
}

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

.ac-listing-filter__btn {
	display:         inline-flex;
	align-items:     center;
	padding:         var(--ac-space-2) var(--ac-space-4);
	border-radius:   var(--ac-radius-pill);
	border:          1.5px solid var(--ac-color-border);
	font-size:       var(--ac-font-size-sm);
	font-weight:     500;
	color:           var(--ac-color-text-muted);
	text-decoration: none;
	background:      transparent;
	transition:      border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
	white-space:     nowrap;
}

.ac-listing-filter__btn:hover,
.ac-listing-filter__btn:focus-visible {
	border-color: var(--ac-color-primary);
	color:        var(--ac-color-primary);
}

.ac-listing-filter__btn:focus-visible {
	outline:        2px solid var(--ac-color-primary);
	outline-offset: 2px;
}

.ac-listing-filter__btn.is-active {
	background:   var(--ac-color-primary);
	border-color: var(--ac-color-primary);
	color:        #fff;
}

/* ── Body wrapper ────────────────────────────────────────────────────────── */
.ac-listing-body {
	padding-block: var(--ac-space-10) var(--ac-space-16);
}

/* Post count */
.ac-listing-count {
	font-size:     var(--ac-font-size-sm);
	color:         var(--ac-color-text-muted);
	margin-bottom: var(--ac-space-6);
}

/* ── Post grid ───────────────────────────────────────────────────────────── */
.ac-post-grid {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    grid;
	gap:        var(--ac-space-8);
	grid-template-columns: repeat( 3, 1fr );
}

/* Each <li> stretches to fill the grid cell so cards are equal height */
.ac-post-grid > li {
	display: flex;
}

.ac-post-grid > li > .ac-post-card {
	width: 100%;
}

@media ( max-width: 900px ) {
	.ac-post-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 580px ) {
	.ac-post-grid {
		grid-template-columns: 1fr;
	}
}

/* ── Post card ───────────────────────────────────────────────────────────── */
.ac-post-card {
	position:      relative;
	background:    var(--ac-color-white);
	border-radius: var(--ac-radius-card);
	border:        1px solid var(--ac-color-border);
	box-shadow:    var(--ac-shadow-sm);
	overflow:      hidden;
	display:       flex;
	flex-direction: column;
	transition:    box-shadow 0.2s ease, transform 0.2s ease;
}

.ac-post-card:hover {
	box-shadow: var(--ac-shadow-md);
	transform:  translateY( -2px );
}

/* Image */
.ac-post-card__image {
	aspect-ratio: 16 / 9;
	overflow:     hidden;
	flex-shrink:  0;
}

.ac-post-card__image img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	transition: transform 0.35s ease;
	display:    block;
}

.ac-post-card:hover .ac-post-card__image img {
	transform: scale( 1.04 );
}

/* Body */
.ac-post-card__body {
	padding:       var(--ac-space-5) var(--ac-space-6);
	display:       flex;
	flex-direction: column;
	gap:           var(--ac-space-3);
	flex:          1;
}

/* Category badges */
.ac-post-card__cats {
	display:   flex;
	flex-wrap: wrap;
	gap:       var(--ac-space-2);
}

.ac-post-card__cat-badge {
	display:         inline-block;
	padding:         0.2em 0.65em;
	border-radius:   var(--ac-radius-pill);
	background:      color-mix( in srgb, var(--ac-color-primary) 10%, transparent );
	color:           var(--ac-color-primary);
	font-size:       var(--ac-font-size-xs);
	font-weight:     600;
	letter-spacing:  0.04em;
	text-transform:  uppercase;
	text-decoration: none;
	transition:      background 0.15s ease;
}

.ac-post-card__cat-badge:hover,
.ac-post-card__cat-badge:focus-visible {
	background: color-mix( in srgb, var(--ac-color-primary) 18%, transparent );
}

.ac-post-card__cat-badge:focus-visible {
	outline:        2px solid var(--ac-color-primary);
	outline-offset: 2px;
}

/* Title */
.ac-post-card__title {
	font-size:   var(--ac-font-size-md);
	font-weight: var(--ac-font-weight-bold);
	line-height: var(--ac-line-height-tight);
	margin:      0;
	color:       var(--ac-color-text);
}

/* Stretched link — entire card is clickable via the title link */
.ac-post-card__title-link {
	color:           inherit;
	text-decoration: none;
}

.ac-post-card__title-link::after {
	content:  '';
	position: absolute;
	inset:    0;
}

.ac-post-card__title-link:hover {
	color: var(--ac-color-primary);
}

.ac-post-card__title-link:focus-visible {
	/* focus ring on the link itself — reset the stretched overlay and show inline */
	outline:        2px solid var(--ac-color-primary);
	outline-offset: 2px;
	border-radius:  2px;
}

/* Pull footer to bottom */
.ac-post-card__excerpt {
	font-size:   var(--ac-font-size-sm);
	color:       var(--ac-color-text-muted);
	line-height: var(--ac-line-height-loose);
	margin:      0;
	/* clamp to 3 lines */
	display:            -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow:           hidden;
	flex:               1;
}

/* Footer: date + author */
.ac-post-card__footer {
	display:     flex;
	flex-wrap:   wrap;
	gap:         var(--ac-space-3);
	margin-top:  auto;
	padding-top: var(--ac-space-3);
	border-top:  1px solid var(--ac-color-border);
	font-size:   var(--ac-font-size-xs);
	color:       var(--ac-color-text-muted);
}

.ac-post-card__date,
.ac-post-card__author {
	display:     inline-flex;
	align-items: center;
	gap:         var(--ac-space-1);
}

/* Author link needs to be above the stretched card link */
.ac-post-card__author a {
	position:        relative;
	z-index:         1;
	color:           var(--ac-color-text-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-color: transparent;
	transition:      color 0.15s ease, text-decoration-color 0.15s ease;
}

.ac-post-card__author a:hover,
.ac-post-card__author a:focus-visible {
	color:                 var(--ac-color-primary);
	text-decoration-color: var(--ac-color-primary);
}

.ac-post-card__author a:focus-visible {
	outline:        2px solid var(--ac-color-primary);
	outline-offset: 2px;
	border-radius:  2px;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.ac-listing-empty {
	text-align:    center;
	padding-block: var(--ac-space-16);
}

.ac-listing-empty__icon {
	font-size: 3rem;
	color:     var(--ac-color-text-muted);
	opacity:   0.4;
	display:   block;
	margin-bottom: var(--ac-space-4);
}

.ac-listing-empty__title {
	font-size:     var(--ac-font-size-xl);
	font-weight:   var(--ac-font-weight-bold);
	margin-bottom: var(--ac-space-2);
}

.ac-listing-empty__desc {
	color:         var(--ac-color-text-muted);
	margin-bottom: var(--ac-space-6);
}

/* ── Pagination ──────────────────────────────────────────────────────────── */
.ac-listing-pagination {
	margin-top: var(--ac-space-10);
}

/* ── Dark mode ───────────────────────────────────────────────────────────── */
[data-color-mode="dark"] .ac-listing-filter,
[data-color-mode="dark"] .ac-listing-filter {
	background: #0d1b45;
	border-color: var(--ac-color-border);
}

[data-color-mode="dark"] .ac-post-card {
	background:   #0d1b45;
	border-color: var(--ac-color-border);
}

/* Ensure title + body text are readable on dark card background */
[data-color-mode="dark"] .ac-post-card__title,
[data-color-mode="dark"] .ac-post-card__title-link {
	color: #e4eaf6;
}

[data-color-mode="dark"] .ac-post-card__title-link:hover {
	color: #93b4ff;
}

[data-color-mode="dark"] .ac-post-card__excerpt {
	color: #8a9bbf;
}

[data-color-mode="dark"] .ac-post-card__footer {
	color:        #8a9bbf;
	border-color: var(--ac-color-border);
}

[data-color-mode="dark"] .ac-post-card__author a {
	color: #8a9bbf;
}

[data-color-mode="dark"] .ac-post-card__author a:hover {
	color: #93b4ff;
}

[data-color-mode="dark"] .ac-post-card__cat-badge {
	background: rgba( 147, 180, 255, 0.15 );
	color:      #93b4ff;
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media ( prefers-reduced-motion: reduce ) {
	.ac-post-card,
	.ac-post-card__image img {
		transition: none;
	}

	.ac-post-card:hover {
		transform: none;
	}

	.ac-post-card:hover .ac-post-card__image img {
		transform: none;
	}
}