/**
 * Edmonton City Homes: Listing Archive styles
 * assets/css/archive-listing.css
 *
 * Scoped styling for the listing archive template (archive-listing.php).
 * Every selector starts with .listing-archive so nothing leaks into other
 * templates. Loaded conditionally from functions.php via
 * is_post_type_archive('listing').
 *
 * Card conventions follow communities-hub.css: radius-lg corners, shadow-sm
 * at rest, small hover lift to shadow-md, accent-soft focus ring. The photo
 * is an img element with object-fit rather than an inline background image.
 * All colours and spacing come from tokens.css; nothing new is invented.
 *
 * Layout is mobile first: single column at phone width (tested to 375px),
 * with the grid widening via auto-fill at larger viewports.
 */


/* ============================================================
   1. CONTAINER
   Wide directory container matching the communities hub.
   ============================================================ */

.listing-archive {
	max-width: var(--container-wide);
	margin-inline: auto;
	padding-inline: var(--space-3);
	color: var(--color-ink);
	font-family: var(--font-body);
	background-color: var(--color-surface);
}

@media (min-width: 640px) {
	.listing-archive {
		padding-inline: var(--space-4);
	}
}

@media (min-width: 900px) {
	.listing-archive {
		padding-inline: var(--space-6);
	}
}


/* ============================================================
   2. HERO: page heading and intro
   Centred opening, matching the communities hub hero rhythm.
   ============================================================ */

.listing-archive__hero {
	padding-top: var(--space-7);
	padding-bottom: var(--space-6);
	text-align: center;
}

@media (min-width: 640px) {
	.listing-archive__hero {
		padding-top: var(--space-8);
		padding-bottom: var(--space-7);
	}
}

.listing-archive__title {
	margin: 0 0 var(--space-4);
	font-family: var(--font-display);
	/* Override --text-3xl's 3rem minimum so the title does not dominate
	   small viewports; same approach as the communities hub title. */
	font-size: clamp(2rem, 7vw, 3.5rem);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-tight);
	color: var(--color-ink-strong);
	letter-spacing: -0.01em;
}

.listing-archive__intro {
	max-width: 60ch;
	margin: 0 auto;
	font-size: var(--text-lg);
	line-height: var(--leading-relaxed);
	color: var(--color-ink-soft);
}


/* ============================================================
   3. SECTIONS
   Equal-weight blocks with a hairline border separating the
   first section from the hero, as on the communities hub.
   ============================================================ */

.listing-archive__section {
	padding-top: var(--space-7);
	padding-bottom: var(--space-7);
}

@media (min-width: 640px) {
	.listing-archive__section {
		padding-top: var(--space-8);
		padding-bottom: var(--space-8);
	}
}

.listing-archive__section--current {
	border-top: 1px solid var(--color-border);
}

.listing-archive__section-title {
	margin: 0 0 var(--space-6);
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-tight);
	color: var(--color-ink-strong);
	text-align: center;
	letter-spacing: -0.005em;
}

/* The Recently Sold heading is an anchor target; leave room for the
   sticky site header when it is linked to directly. */
#recently-sold {
	scroll-margin-top: var(--space-8);
}


/* ============================================================
   4. GRID
   Single column at phone width; auto-fill widens it as space
   allows, following the communities hub grid convention.
   ============================================================ */

.listing-archive__grid {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.listing-archive__grid {
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	}
}


/* ============================================================
   5. CARD
   Photo on top, details below. Rest state is a subtle lift;
   hover lifts a little more, per the communities hub cards.
   ============================================================ */

.listing-archive__card {
	display: block;
	overflow: hidden;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	box-shadow: var(--shadow-sm);
	text-decoration: none;
	color: inherit;
	transition:
		transform var(--duration-base) var(--ease-snappy),
		box-shadow var(--duration-base) var(--ease-snappy);
}

.listing-archive__card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.listing-archive__card:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 4px var(--color-accent-soft),
		var(--shadow-md);
}

/* --- Photo --- */

.listing-archive__card-media {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 3;
	background: var(--color-surface-sunken); /* Placeholder when a listing has no photo. */
	overflow: hidden;
}

.listing-archive__card-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Status badge, overlaid on the photo --- */

.listing-archive__card-badge {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-full);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.listing-archive__card-badge--pending {
	background: var(--color-warning);
	color: var(--color-ink-strong);
}

.listing-archive__card-badge--sold {
	background: var(--color-danger);
	color: var(--color-ink-inverse);
}

/* --- Details --- */

.listing-archive__card-body {
	padding: var(--space-4);
}

.listing-archive__card-address {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-snug);
	color: var(--color-ink-strong);
}

.listing-archive__card-city {
	margin: var(--space-1) 0 0;
	font-size: var(--text-sm);
	color: var(--color-ink-soft);
}

.listing-archive__card-price {
	margin: var(--space-3) 0 0;
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-tight);
	color: var(--color-ink-strong);
}

/* Specs read as one line: "4 bed · 2.5 bath · 1,642 sq ft". */

.listing-archive__card-specs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-2);
	margin: var(--space-3) 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--text-sm);
	color: var(--color-ink-soft);
}

.listing-archive__card-specs li + li::before {
	content: "\00B7"; /* Middle dot separator. */
	margin-right: var(--space-2);
	color: var(--color-ink-faint);
}


/* ============================================================
   6. EMPTY STATE
   A single centred line inviting contact; no empty grid.
   ============================================================ */

.listing-archive__empty {
	max-width: 60ch;
	margin: 0 auto;
	text-align: center;
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	color: var(--color-ink-soft);
}

.listing-archive__empty-link {
	color: var(--color-accent);
	font-weight: var(--weight-medium);
	text-decoration: none;
}

.listing-archive__empty-link:hover {
	color: var(--color-accent-hover);
	text-decoration: underline;
}

.listing-archive__empty-link:focus-visible {
	outline: none;
	box-shadow: var(--shadow-focus);
	border-radius: var(--radius-sm);
}


/* ============================================================
   7. ACCESSIBILITY AND MOTION
   Same conventions as the communities hub: honour reduced
   motion, and guarantee keyboard focus is never invisible.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

	.listing-archive *,
	.listing-archive *::before,
	.listing-archive *::after {
		transition: none !important;
		transform: none !important;
	}
}

.listing-archive *:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}