/**
 * TPJC Exclusive Listings archive -- extends tpjc-homepage.css, which
 * already defines .tpjc-listings/.tpjc-listing for the homepage's
 * 6-item curated preview. This file only adds what the full 50+ item
 * archive needs on top: a photo wrapper (to host the sold/under-contract
 * ribbon), a price line, and a 4-across grid since this page has room
 * for more than the homepage's 3-column teaser.
 */

.tpjc-listings--full {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tpjc-listing__photowrap {
	position: relative;
}
.tpjc-listing__photowrap .tpjc-listing__ph { margin: 0; }
/* Listing photos come in every shape (16:9 stills, 3:2 and 4:3 camera
   frames). A 3:2 box with the whole photo fitted inside -- never
   cropped -- keeps noses and tails intact; the ice fill reads as a
   mount rather than a gap. */
.tpjc-listing__photowrap .tpjc-listing__ph,
.tpjc-listings--full .tpjc-listing__ph {
	aspect-ratio: 3 / 2;
	object-fit: contain;
	background: var(--ice-2);
	border-radius: 18px;
}

.tpjc-listing__ph--none {
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: 18px;
	background: var(--ice-2);
}

.tpjc-listing__ribbon {
	position: absolute;
	top: 14px;
	left: 14px;
	font-family: var(--disp);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
	background: var(--ink);
	border-radius: 999px;
	padding: 6px 14px;
}
.tpjc-listing__ribbon--contract { background: var(--bronze); }

.tpjc-listing__price {
	display: block;
	font-family: var(--disp);
	font-weight: 500;
	font-size: 14px;
	color: var(--bronze);
	margin-top: 2px;
}

@media (max-width: 1280px) {
	.tpjc-listings--full { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
	.tpjc-listings--full { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.tpjc-listings--full { grid-template-columns: minmax(0, 1fr); }
}