/* =========================================================================
   Custom Classifieds UK: Listings archive / browse redesign
   Per design_handoff_listings_archive + STYLE-GUIDE.md.
   The dark search band reuses the front-page .cc-fp-search styles (loaded
   site-wide); this file adds the archive toolbar, legend, grid, cards,
   collapsible mobile search and the infinite-scroll rows.
   ========================================================================= */

.cc-archive {
	--gold: #a59055;
	--gold-hover: #c9b47a;
	--gold-hover-dark: #8a7743;
	--ink: #171610;
	--page: #f6f4ef;
	--card: #fff;
	--hair: #e2ded4;
	--body: #5c584e;
	--muted: #8a857a;
	--dark: #171610;
	--dark-field: #26241e;
	--dark-text: #f0ede6;
	--dark-muted: #8d8a83;
	/* alias used by the reused front-page search band (.cc-fp-search*) */
	--dark-muted-b: #8d8a83;
	--tint: #faf7ef;

	background: var(--page);
	color: var(--ink);
	font-family: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	line-height: 1.5;
}
.cc-archive *,
.cc-archive *::before,
.cc-archive *::after { box-sizing: border-box; }
.cc-archive a { text-decoration: none; color: var(--gold); }
.cc-archive ::selection { background: var(--gold); color: #000; }

/* ===================== SEARCH BAND (collapsible on mobile) ===================== */
.cc-arc-refine {
	display: none; /* desktop: hidden, form always visible */
	width: 100%;
	align-items: center;
	background: var(--dark-field);
	border: 0;
	cursor: pointer;
	padding: 14px 16px;
	color: var(--dark-text);
}
.cc-arc-refine-title {
	font-family: 'Bebas Neue', 'bebas-neue', sans-serif;
	font-size: 20px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}
.cc-arc-refine-label {
	margin-left: auto;
	font-size: 13px;
	font-weight: 700;
	color: var(--gold);
}

/* ===================== TOOLBAR ===================== */
.cc-arc-toolbar {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 26px 56px 0;
}
.cc-arc-h1 {
	font-family: 'Bebas Neue', 'bebas-neue', sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	font-size: 40px;
	margin: 0;
	color: var(--ink);
}
.cc-arc-count { font-size: 14px; color: var(--muted); }
.cc-arc-sort {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 10px;
}
.cc-arc-sort-label { font-size: 13px; color: var(--muted); }
.cc-arc-sort select {
	background: #fff;
	border: 1px solid var(--hair);
	border-radius: 0;
	padding: 10px 34px 10px 16px;
	font-family: 'Barlow', sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'><path d='M1 1l4 4 4-4' stroke='%238a857a' stroke-width='1.5' fill='none'/></svg>");
	background-repeat: no-repeat;
	background-position: right 14px center;
}
.cc-arc-sort select:focus { outline: none; border-color: var(--gold); }

/* ===================== LEGEND ===================== */
.cc-arc-legend {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 14px 56px 0;
	font-size: 13px;
	color: var(--muted);
}
.cc-arc-tier {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--muted);
	cursor: pointer;
	padding: 4px 2px;
	border: 0;
	background: none;
	transition: color .12s ease;
}
.cc-arc-tier:hover { color: var(--ink); }
.cc-arc-tier.is-active { color: var(--ink); font-weight: 600; }
.cc-arc-swatch { display: inline-block; width: 12px; height: 12px; box-sizing: border-box; }
.cc-arc-swatch--featured { background: var(--tint); border: 2px solid var(--gold); }
.cc-arc-swatch--standard { background: #fff; border: 1px solid var(--hair); }
.cc-arc-tier.is-active .cc-arc-swatch--featured { background: var(--gold); }
.cc-arc-tier.is-active .cc-arc-swatch--standard { background: var(--ink); border-color: var(--ink); }

/* ===================== GRID + CARDS ===================== */
.cc-arc-gridwrap { padding: 22px 56px 50px; }
.cc-arc-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}
.cc-arc-card {
	display: flex;
	flex-direction: column;
	color: var(--ink);
	background: #fff;
	border: 1px solid var(--hair);
}
.cc-arc-card--featured { background: var(--tint); border: 2px solid var(--gold); }
.cc-arc-card:hover { border-color: var(--gold); }
.cc-arc-card-img {
	display: block;
	height: 200px;
	background-size: cover;
	background-position: center;
	background-color: #ddd7cc;
	flex: 0 0 auto;
}
.cc-arc-card-body {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
}
.cc-arc-card-meta {
	font-size: 11px;
	letter-spacing: 2px;
	color: var(--gold);
	font-weight: 700;
	text-transform: uppercase;
}
.cc-arc-card-title {
	font-family: 'Bebas Neue', 'bebas-neue', sans-serif;
	font-size: 21px;
	line-height: 1.05;
	color: var(--ink);
	text-transform: uppercase;
}
.cc-arc-card:hover .cc-arc-card-title { color: var(--gold); }
.cc-arc-card-foot {
	display: flex;
	align-items: baseline;
	margin-top: auto;
	padding-top: 6px;
}
.cc-arc-card-price { font-size: 19px; font-weight: 700; color: var(--ink); }
.cc-arc-card-price .price { color: var(--ink); }
.cc-arc-card-loc { margin-left: auto; font-size: 12px; color: var(--muted); text-align: right; }
.cc-arc-card-seller { color: var(--muted); cursor: pointer; }
.cc-arc-card-seller:hover { color: var(--gold); }

/* Empty state */
.cc-arc-empty {
	padding: 40px 0;
	text-align: center;
	color: var(--muted);
	font-size: 16px;
}

/* ===================== INFINITE SCROLL ROWS ===================== */
.cc-arc-sentinel { height: 1px; }
.cc-arc-status {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	margin-top: 40px;
	padding: 18px 0;
	color: var(--muted);
	font-size: 13px;
	letter-spacing: 2px;
	font-weight: 600;
	text-transform: uppercase;
}
.cc-arc-status[hidden] { display: none; }
.cc-arc-status .cc-arc-sq { display: inline-block; width: 8px; height: 8px; background: var(--gold); }
.cc-arc-end a { margin-left: 8px; font-weight: 600; }

/* SEO fallback pagination (hidden visually, present for crawlers/no-JS) */
.cc-arc-seo-nav { position: absolute; left: -9999px; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1200px) {
	.cc-arc-toolbar, .cc-arc-legend, .cc-arc-gridwrap { padding-left: 32px; padding-right: 32px; }
	.cc-arc-grid { grid-template-columns: repeat(3, 1fr); }
}

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

@media (max-width: 767px) {
	/* Collapsible search: dark band with REFINE SEARCH toggle, form hidden
	   until opened. The band reuses .cc-fp-search but with mobile padding. */
	.cc-archive .cc-fp-search { padding: 16px 20px; }
	.cc-arc-refine { display: flex; }
	.cc-arc-searchform { display: none; margin-top: 10px; }
	.cc-arc-searchband.is-open .cc-arc-searchform { display: block; }

	.cc-arc-toolbar {
		flex-wrap: wrap;
		align-items: baseline;
		gap: 10px;
		padding: 22px 16px 0;
	}
	.cc-arc-h1 { font-size: 32px; }
	.cc-arc-count { font-size: 13px; }
	.cc-arc-sort { margin-left: auto; gap: 6px; }
	.cc-arc-sort-label { display: none; }
	.cc-arc-sort select { padding: 8px 30px 8px 12px; font-size: 13px; }

	.cc-arc-legend { padding: 12px 16px 0; flex-wrap: wrap; }

	.cc-arc-gridwrap { padding: 16px 16px 40px; }
	.cc-arc-grid { grid-template-columns: 1fr; gap: 14px; }
	.cc-arc-card-title { font-size: 22px; }
}