/*
 * Listings in the redesign (phase 6, 2026-10-30; listing.php): a blog
 * category, the whole blog, a test section, the catalogue of all tests.
 * Source: design/projects/archive/proto/archive.html, DESIGN.md "Archive".
 * The cards themselves are css/card.css. Scoped to .ax so the old bare
 * h1/h2/p rules of style.css stay out.
 */

.ax {padding: 0 16px 56px; font-family: var(--sans); color: var(--graphite); font-size: 17px; line-height: 1.55;}
.ax *, .ax *::before, .ax *::after {box-sizing: border-box;}
.ax h1, .ax h2, .ax p, .ax figure {margin: 0; padding: 0; text-align: left;}
.ax :focus-visible {outline: 2px solid var(--form); outline-offset: 3px; border-radius: 4px;}

/* Head: H1, the count in mono, the description; the cover desktop only. */
.ax-head {display: grid; gap: 14px; padding: 16px 0 0;}
.ax-head h1 {font-size: 32px; line-height: 1.08; font-weight: 700; letter-spacing: -.03em; color: var(--graphite); text-wrap: balance;}
.ax-head .ax-count {margin-top: -4px; font: 500 14px/1.2 var(--mono); color: var(--form);}
.ax-desc {max-width: 34em; font-size: 17px; line-height: 1.55;}
.ax-desc p + p {margin-top: .8em;}
.ax-cover {display: none;}
.ax-cover img {display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; background: var(--field);}

/* Neighbours: a row of labels, the current one filled; sideways on a phone. */
.ax-nav {display: flex; gap: 8px; margin: 22px -16px 0; padding: 0 16px 4px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);}
.ax-nav::-webkit-scrollbar {display: none;}
.ax-nav a {flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--rule); border-radius: 999px; color: var(--graphite); font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap;}
.ax-nav a:hover {border-color: var(--form); color: var(--form-deep);}
.ax-nav a[aria-current] {background: var(--graphite); border-color: var(--graphite); color: #fff;}

/* Cards */
.ax .cards {display: grid; gap: 18px; margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--rule);}
.ax.no-cat .art-card .cat {display: none;}
/* Tests: on a phone the description too - "Enneagram Quiz" and "Enneagram
   Test" cannot be told apart by their names. */
.ax.is-tests .art-card .d {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px;}

/* Page numbers: circles, the current one filled in graphite. */
.ax .pages {display: flex; align-items: center; justify-content: center; gap: 6px; margin: 40px 0 0;}
.ax .pages a, .ax .pages span {display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--form); color: var(--form-deep); font: 500 14px/1 var(--mono); text-decoration: none;}
.ax .pages a:hover {background: var(--field);}
.ax .pages span[aria-current] {background: var(--graphite); border-color: var(--graphite); color: #fff;}
.ax .pages .gap {border: 0; width: 20px; color: var(--graphite-2);}
.ax .pages .arr {border-color: var(--rule); color: var(--graphite);}
.ax .pages .arr i {width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--ch-arrow); mask: var(--ch-arrow);}
.ax .pages .arr.prev i {transform: scaleX(-1);}
.ax .pages .arr.is-off {opacity: .35;}
/* A phone shows first, current, last (wikigrowth_pager): seven circles fit. */
@media (max-width: 767px) {.ax .pages .d-only, .ax .pages .gap-d {display: none;}}
@media (min-width: 768px) {.ax .pages .gap-m {display: none;}}

@media (min-width: 1280px) {
	/* The head has its own top padding; the crumbs' gap meant for article pages goes. */
	.wg-v2 .breadcrumbs:has(+ .ax) {margin-bottom: 0;}
	.ax {width: min(1280px, 100% - 48px); margin: 0 auto; padding: 0 0 80px; font-size: 18px;}
	.ax-head {grid-template-columns: minmax(0, 1fr) 300px; column-gap: 64px; align-items: center; padding-top: 22px;}
	.ax-head > :not(.ax-cover) {grid-column: 1;}
	.ax-head h1 {font-size: 48px; line-height: 1.05;}
	.ax-cover {display: block; grid-column: 2; grid-row: 1 / span 4;}
	.ax-nav {flex-wrap: wrap; margin: 28px 0 0; padding: 0; overflow: visible; -webkit-mask-image: none; mask-image: none;}
	.ax .cards {grid-template-columns: repeat(3, 1fr); gap: 40px 32px; margin-top: 32px; padding-top: 32px;}
	.ax.is-tests .art-card .d {font-size: 14.5px;}
	.ax .pages {margin-top: 56px; gap: 8px;}
}