/**
 * Toba Market — Cards
 * ONE listing-card component with variants (default/compact/featured/
 * horizontal), per docs/PHASE_6_COMPONENTS.md. Never duplicate this
 * markup per page — every page includes the same rendered partial.
 */

.tts-market-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--tts-space-4);
}

/* ---- Homepage showcase carousel (Featured / Trending-Latest) ----
   A horizontal scroll strip, NOT the paginated multi-row grid above —
   looks right whether it holds 1 listing or 20, unlike a fixed-column
   grid that leaves a large empty gap when there's only one item. */
.tts-market-carousel {
	display: flex;
	gap: var(--tts-space-4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 4px; /* room for the scrollbar without clipping card shadows */
}
.tts-market-carousel__item {
	flex: 0 0 auto;
	width: 220px;
	scroll-snap-align: start;
}
@media (min-width: 640px) {
	.tts-market-carousel__item { width: 260px; }
}
/* Thin, unobtrusive scrollbar where supported — never required to see it, just a hint that more content is scrollable. */
.tts-market-carousel::-webkit-scrollbar { height: 6px; }
.tts-market-carousel::-webkit-scrollbar-thumb { background: var(--tts-border-strong, #ccc); border-radius: 3px; }

/* ---- Listing card ---- */
.tts-market-card {
	background: var(--tts-surface);
	border: 1px solid var(--tts-border);
	border-radius: var(--tts-radius-md);
	overflow: hidden;
	box-shadow: var(--tts-shadow-sm);
	transition: box-shadow var(--tts-transition-fast);
	position: relative;
}
.tts-market-card:hover { box-shadow: var(--tts-shadow-md); }

.tts-market-card__link { text-decoration: none; color: inherit; display: block; }
.tts-market-card__link:hover { text-decoration: none; color: inherit; }

.tts-market-card__image {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--tts-background);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.tts-market-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tts-market-card__no-image { color: var(--tts-text-muted); font-size: var(--tts-font-size-sm); }
.tts-market-card .tts-market-badge--featured { position: absolute; top: var(--tts-space-2); left: var(--tts-space-2); }
.tts-market-card .tts-market-badge--urgent { position: absolute; top: var(--tts-space-2); right: var(--tts-space-2); }

.tts-market-card__favorite {
	position: absolute;
	top: var(--tts-space-2);
	right: var(--tts-space-2);
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	cursor: pointer;
}

.tts-market-card__body { padding: var(--tts-space-3); }
.tts-market-card__price { font-weight: 700; color: var(--tts-primary); margin: 0 0 var(--tts-space-1); font-size: var(--tts-font-size-lg); }
.tts-market-card__title {
	margin: 0 0 var(--tts-space-1);
	font-size: var(--tts-font-size-sm);
	font-weight: 500;
	color: var(--tts-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.6em;
}
.tts-market-card__meta { font-size: var(--tts-font-size-xs); color: var(--tts-text-muted); margin: 0; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.tts-market-card__seller-badge { font-size: var(--tts-font-size-xs); margin-top: var(--tts-space-1); }

/* Compact variant: used in "related listings" / narrower rails */
.tts-market-card--compact .tts-market-card__body { padding: var(--tts-space-2); }
.tts-market-card--compact .tts-market-card__title { font-size: var(--tts-font-size-xs); min-height: 2.2em; }

/* Horizontal variant: reserved for a future list-view toggle — defined now so it doesn't require new markup later */
.tts-market-card--horizontal { display: flex; }
.tts-market-card--horizontal .tts-market-card__link { display: flex; width: 100%; }
.tts-market-card--horizontal .tts-market-card__image { flex: 0 0 140px; aspect-ratio: 1; }
.tts-market-card--horizontal .tts-market-card__body { flex: 1; }

/* Skeleton placeholder card, shown while AJAX pagination (if ever added) loads */
.tts-market-card--skeleton .tts-market-card__image,
.tts-market-card--skeleton .tts-market-card__title,
.tts-market-card--skeleton .tts-market-card__price { }
.tts-market-card--skeleton .tts-market-skeleton-image { aspect-ratio: 4/3; }
.tts-market-card--skeleton .tts-market-skeleton-line { height: 14px; margin-bottom: 6px; }

/* ---- Category card — redesigned to match OLX's tile style: a
   horizontally-scrolling row on mobile, a wrapped grid on desktop. ---- */
.tts-market-category-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--tts-space-2);
	padding: var(--tts-space-4) var(--tts-space-3);
	background: var(--tts-surface);
	border: 1px solid var(--tts-border);
	border-radius: var(--tts-radius-lg);
	text-align: center;
	text-decoration: none;
	color: var(--tts-text);
	box-shadow: var(--tts-shadow-sm);
	transition: border-color var(--tts-transition-fast), box-shadow var(--tts-transition-fast), transform var(--tts-transition-fast);
}
.tts-market-category-card:hover {
	border-color: var(--tts-primary);
	box-shadow: var(--tts-shadow-md);
	transform: translateY(-2px);
	text-decoration: none;
	color: var(--tts-text);
}
/* Icon sits inside its own soft, rounded backdrop — the "premium" touch that turns a bare emoji into a proper tile icon, matching OLX's icon-in-a-box treatment. */
.tts-market-category-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	font-size: 1.7rem;
	line-height: 1;
	background: var(--tts-primary-light);
	border-radius: var(--tts-radius-md);
}
.tts-market-category-card__name { font-weight: 600; font-size: var(--tts-font-size-sm); }
.tts-market-category-card__count { font-size: var(--tts-font-size-xs); color: var(--tts-text-muted); }

.tts-market-category-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--tts-space-3); }

/* ---- Homepage category tiles — a dedicated design, deliberately
   separate from .tts-market-category-card above (used by the Post Ad
   wizard's picker, which needs every category visible at once, not a
   horizontal strip). Matches OLX's exact reference: the icon sits in
   its own square tile, the label is plain text below it (not wrapped
   together in one shared bordered card), and on mobile it's a
   2-ROW grid that scrolls horizontally as whole columns — not a
   single scrolling row. ---- */
.tts-market-category-tiles {
	display: grid;
	grid-template-rows: repeat(2, auto);
	grid-auto-flow: column;
	grid-auto-columns: 84px;
	gap: 14px 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 6px;
}
.tts-market-category-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: var(--tts-text);
	scroll-snap-align: start;
}
.tts-market-category-tile:hover { text-decoration: none; color: var(--tts-text); }
.tts-market-category-tile__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	font-size: 2.2rem;
	background: var(--tts-surface);
	border: 1px solid var(--tts-border);
	border-radius: var(--tts-radius-lg);
	box-shadow: var(--tts-shadow-sm);
	transition: border-color var(--tts-transition-fast), transform var(--tts-transition-fast);
}
.tts-market-category-tile:hover .tts-market-category-tile__icon {
	border-color: var(--tts-primary);
	transform: translateY(-2px);
}
.tts-market-category-tile__name {
	font-size: 0.8rem;
	font-weight: 500;
	text-align: center;
	max-width: 84px;
	line-height: 1.25;
}
.tts-market-category-tiles::-webkit-scrollbar { height: 6px; }
.tts-market-category-tiles::-webkit-scrollbar-thumb { background: var(--tts-border-strong); border-radius: 3px; }

/* Pill link (used for location links / subcategory chips) */
.tts-market-pill {
	display: inline-block;
	padding: var(--tts-space-2) var(--tts-space-4);
	background: var(--tts-background);
	border: 1px solid var(--tts-border);
	border-radius: var(--tts-radius-pill);
	font-size: var(--tts-font-size-sm);
	color: var(--tts-text);
	text-decoration: none;
}
.tts-market-pill:hover { background: var(--tts-primary); border-color: var(--tts-primary); color: var(--tts-text-inverse); text-decoration: none; }
.tts-market-pill-group { display: flex; flex-wrap: wrap; gap: var(--tts-space-2); }

@media (min-width: 480px) {
	.tts-market-category-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
	.tts-market-grid { grid-template-columns: repeat(3, 1fr); }
	.tts-market-category-grid { grid-template-columns: repeat(4, 1fr); }
	/* Desktop: wraps into a single-row, evenly-spaced grid — matching
	   OLX's own desktop layout, which does not scroll there (only
	   mobile scrolls, per the actual request). */
	.tts-market-category-tiles {
		display: flex;
		flex-wrap: wrap;
		grid-template-rows: none;
		overflow-x: visible;
		padding-bottom: 0;
	}
}
@media (min-width: 1024px) {
	.tts-market-grid { grid-template-columns: repeat(4, 1fr); }
}