/* Homeschool Town — Trading Post browse + detail (trading-post-roadmap.md step 3).
   Photo-forward marketplace cards and a product-style detail, built on the shared
   tokens/components (.card-grid, .chip, .cat, .btn, .author). */

/* ============ Browse head ============ */
.tp-head__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5);
  margin-top: var(--s-5);
}
.tp-head__hint {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-sm); color: var(--muted); margin: 0; max-width: 42ch; line-height: 1.45;
}
.tp-head__hint svg { color: var(--clay); flex: none; }

/* ============ Browse: filter sidebar + results (filters roadmap 5a) ============ */
/* map-browse.css's 26rem/1fr split, narrowed — a filter rail needs less room than a
   list panel, and the card grid wants the width back. */
.tp-browse {
  display: grid; grid-template-columns: 17rem minmax(0, 1fr);
  gap: var(--s-6) var(--s-7); align-items: start;
}

.tp-sidebar {
  position: sticky; top: calc(4.25rem + var(--s-5));
  max-height: calc(100vh - 4.25rem - var(--s-5) * 2); overflow-y: auto;
}
.tp-sidebar__box {
  background: var(--surface); background-image: var(--grad-surface);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
}
.tp-sidebar__summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  list-style: none; cursor: pointer;
  font-weight: 600; color: var(--ink);
}
.tp-sidebar__summary::-webkit-details-marker { display: none; }
.tp-sidebar__summary-label { display: inline-flex; align-items: center; gap: var(--s-2); }
.tp-sidebar__summary-label svg { color: var(--clay); }
.tp-sidebar__chevron { color: var(--muted); transition: transform var(--dur) var(--ease-out-quart); }
.tp-sidebar__box[open] .tp-sidebar__chevron { transform: rotate(180deg); }

.tp-filter-form { display: flex; flex-direction: column; gap: var(--s-5); margin-top: var(--s-5); }

.tp-facet { border: 0; padding: 0; margin: 0; min-width: 0; }
.tp-facet__label {
  display: block; padding: 0; margin-bottom: var(--s-2);
  font-weight: 600; font-size: var(--t-sm); color: var(--ink); line-height: 1.3;
}
.tp-facet__sub { display: block; font-size: var(--t-xs); color: var(--muted); margin-bottom: var(--s-1); }

.tp-input {
  width: 100%; padding: 0.55rem 0.7rem;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  font-size: var(--t-sm); line-height: 1.4;
  transition: border-color var(--dur-fast) var(--ease-out-quart), box-shadow var(--dur-fast) var(--ease-out-quart);
}
.tp-input::placeholder { color: var(--muted); opacity: 0.8; }
.tp-input:hover { border-color: var(--ink-soft); }
.tp-input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }

.tp-price-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }

.tp-check {
  display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3);
  font-size: var(--t-sm); color: var(--ink-soft); cursor: pointer;
}
.tp-check input { accent-color: var(--primary); width: 1rem; height: 1rem; flex: none; }

/* Category chip-radios — the input is visually hidden but focusable/checkable, the
   sibling .chip carries the look (same active treatment as the old chip links). */
.tp-chip-radio { position: relative; }
.tp-chip-radio input { position: absolute; opacity: 0; pointer-events: none; }
.tp-chip-radio .chip { cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast); }
.tp-chip-radio:hover .chip { border-color: var(--accent); color: var(--ink); background: var(--accent-tint); }
.tp-chip-radio input:checked + .chip { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.tp-chip-radio input:focus-visible + .chip { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Distance controls (adapted from map-browse.css's .filter-near/.filter-distance) */
.filter-near {
  display: inline-flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3);
  padding: 0.4rem 0.8rem; border-radius: var(--r-pill);
  background: none; border: 1px solid var(--border); color: var(--muted);
  font: inherit; font-size: var(--t-sm); cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.filter-near svg { width: 1rem; height: 1rem; }
.filter-near:hover,
.filter-near[aria-pressed="true"] { color: var(--primary); border-color: var(--border-warm); background: var(--clay-tint); }
.filter-near:disabled { opacity: 0.6; cursor: progress; }

.filter-distance {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  font-size: var(--t-sm); color: var(--muted); margin-bottom: var(--s-2);
}
.filter-distance output { color: var(--ink); font-weight: 600; min-width: 2ch; text-align: right; }
.filter-distance input[type="range"] { width: 100%; accent-color: var(--primary); cursor: pointer; }

.tp-form-actions { display: flex; align-items: center; gap: var(--s-4); }

.tp-results { min-width: 0; }
.tp-results__status { margin-bottom: var(--s-5); }

/* Mobile: single column, sidebar becomes a collapsible "Filters" bar above the grid.
   It renders open (SSR can't know the viewport); the 5b JS island closes it on load
   at this width so the grid isn't pushed below a full form. */
@media (max-width: 64rem) {
  .tp-browse { display: block; }
  .tp-sidebar { position: static; max-height: none; overflow: visible; margin-bottom: var(--s-5); }
}

@media (prefers-reduced-motion: reduce) {
  .tp-sidebar__chevron { transition: none; }
}

/* ============ Listing card ============ */
/* stretch (default) so every card in a row takes the row height — uniform grid */
.tp-grid { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }

.listing-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface); background-image: var(--grad-surface);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden; color: var(--ink);
  transition: transform var(--dur) var(--ease-out-quart),
              box-shadow var(--dur) var(--ease-out-quart),
              border-color var(--dur) var(--ease-out-quart);
}
.listing-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-warm); }

/* full-bleed invisible link covering the card */
.listing-card__link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }

.listing-card__media {
  position: relative; flex: none;
  aspect-ratio: 3 / 2; background: var(--clay-tint);
  display: flex; align-items: center; justify-content: center;
}
/* absolute fill so the photo's intrinsic size can never stretch the media box */
.listing-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.listing-card__placeholder { color: var(--clay); font-size: 1.75rem; line-height: 1; opacity: 0.75; }

.listing-card__price {
  position: absolute; left: var(--s-2); bottom: var(--s-2); z-index: 2;
  display: inline-flex; align-items: center;
  padding: 0.28rem 0.55rem; border-radius: var(--r-pill);
  background: var(--primary); color: var(--on-primary);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em;
  box-shadow: var(--shadow-sm);
}
.listing-card__price--free { background: var(--accent); color: var(--on-accent); }

.listing-card__body { display: flex; flex-direction: column; flex: 1; gap: var(--s-2); padding: var(--s-3) var(--s-3) var(--s-3); }
.listing-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-1); }
.listing-card__title {
  font-size: 0.875rem; line-height: 1.2; min-height: 2.4em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;
}
/* single line always — the area label truncates rather than wrapping the row taller */
.listing-card__facts {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 0.35rem var(--s-2);
  margin-top: auto; min-width: 0;
}
.listing-card__facts .chip { flex: none; }
.listing-card__area {
  display: inline-flex; align-items: center; gap: 0.25em;
  font-size: 0.625rem; color: var(--muted); min-width: 0; max-width: 100%;
}
.listing-card__area span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listing-card__area svg { flex: none; color: var(--clay); width: 0.75em; height: 0.75em; }

/* condition chip (shared by card and detail). --soon lives in site.css with the other
   .chip variants — the thread view uses it without loading this sheet. */
.chip--condition { background: var(--surface-bot); color: var(--ink-soft); border-color: var(--border); }

/* ============ Storefront coupon card (step 9) ============ */
/* Built on .listing-card so it's the same grid size — distinct, calmer surface and a
   "Local Business" label, deliberately never louder than a listing. */
.coupon-card {
  background: var(--clay-tint);
  background-image: linear-gradient(165deg, var(--hero-top) 0%, var(--clay-tint) 100%);
  border-color: var(--border-warm);
}
.coupon-card:hover { border-color: var(--clay); }
.coupon-card__body {
  display: flex; flex-direction: column; flex: 1; gap: var(--s-1);
  padding: var(--s-3);
}
.coupon-card__label {
  display: inline-flex; align-items: center; gap: 0.4em; align-self: flex-start;
  padding: 0.2rem 0.6rem; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--border-warm);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.02em; color: var(--primary-hover);
  margin-bottom: 0.1rem;
}
.coupon-card__label svg { flex: none; }
.coupon-card__biz { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.coupon-card__headline {
  display: flex; align-items: flex-start; gap: 0.4em;
  font-family: var(--font-display); font-size: var(--t-sm); font-weight: 700; line-height: 1.25; color: var(--ink);
  margin-top: 0.1rem;
}
.coupon-card__headline svg { flex: none; color: var(--clay); margin-top: 0.15em; }
.coupon-card__details {
  font-size: var(--t-xs); color: var(--ink-soft); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;
}
.coupon-card__cta {
  display: inline-flex; align-items: center; gap: 0.35em; margin-top: auto; padding-top: var(--s-1);
  font-size: var(--t-sm); font-weight: 600; color: var(--primary);
}
.coupon-card__cta svg { flex: none; }
.coupon-card:hover .coupon-card__cta { color: var(--primary-hover); }

/* ============ Show more (Phase 5 pagination) ============ */
.tp-more { display: flex; justify-content: center; margin-top: var(--s-6); }
.tp-more .btn[aria-disabled="true"] { opacity: 0.6; pointer-events: none; }

/* ============ Empty states ============ */
.tp-empty { text-align: center; color: var(--muted); padding: var(--s-6) var(--s-4); }
.tp-empty p { margin-bottom: var(--s-4); }
.tp-empty--page {
  border: 1px dashed var(--border-strong); border-radius: var(--r-xl);
  padding: var(--s-8) var(--s-5); background: var(--surface);
}
.tp-empty__icon { display: inline-flex; color: var(--clay); font-size: 2.5rem; margin-bottom: var(--s-3); }
.tp-empty--page h2 { font-size: var(--t-h2); color: var(--ink); margin-bottom: var(--s-2); }
.tp-empty--page p { max-width: 40ch; margin-inline: auto; margin-bottom: var(--s-5); }

/* ============ Detail ============ */
.tp-detail { padding-block: var(--s-6) var(--s-8); }
.tp-detail .backlink { margin-bottom: var(--s-5); }

.tp-detail__grid { display: grid; gap: var(--s-6); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 56rem) {
  .tp-detail__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s-6) var(--s-7); }
  /* image + its details share the left column; the panel (price, actions, poster)
     spans both rows on the right so the description tucks under the image instead
     of clearing the whole grid. */
  .tp-detail__media { grid-column: 1; grid-row: 1; }
  .tp-detail__panel { grid-column: 2; grid-row: 1 / span 2; }
  .tp-detail__description { grid-column: 1; grid-row: 2; margin-top: 0; }
}

.tp-detail__media {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  background: var(--clay-tint); border: 1px solid var(--border);
}
.tp-detail__img { width: 100%; height: auto; display: block; }
.tp-detail__media--empty { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; }
.tp-detail__placeholder { color: var(--clay); font-size: 4rem; opacity: 0.7; }

.tp-detail__ribbon {
  position: absolute; top: var(--s-4); left: var(--s-4);
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.45rem 0.85rem; border-radius: var(--r-pill);
  background: var(--ink); color: var(--bg);
  font-size: var(--t-sm); font-weight: 600; box-shadow: var(--shadow-md);
}
.tp-detail__ribbon--pending { background: var(--warning); color: var(--ink); }

.tp-detail__panel { display: flex; flex-direction: column; gap: var(--s-4); }
.tp-detail__title { font-size: var(--t-h1); line-height: 1.08; }
.tp-detail__price { font-family: var(--font-display); font-size: var(--t-h1); font-weight: 500; color: var(--primary); line-height: 1; }
.tp-detail__price--free { color: var(--accent); }

.tp-detail__facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.tp-detail__area { display: inline-flex; align-items: center; gap: 0.4em; font-size: var(--t-sm); color: var(--muted); }
.tp-detail__area svg { color: var(--clay); }

.tp-detail__posted { font-size: var(--t-sm); color: var(--muted); }
.tp-detail__note { color: var(--ink-soft); }
.tp-detail__note--warn { color: var(--warning); font-weight: 500; }

.tp-message { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.tp-message .btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.tp-message__hint { font-size: var(--t-sm); color: var(--muted); margin: 0; }

.tp-manage {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5);
  padding: var(--s-4) 0; border-block: 1px solid var(--border);
}

.tp-seller .author {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); text-decoration: none; color: inherit;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.tp-seller .author:hover { border-color: var(--border-warm); background: var(--surface-bot); }
.tp-seller .author__avatar { width: 2.6rem; height: 2.6rem; font-size: 0.9rem; }
.tp-seller .author__kicker { font-size: var(--t-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.tp-seller .author__name { font-weight: 600; color: var(--ink); }
.tp-seller .author:hover .author__name { color: var(--primary); }
.tp-seller .author__base { display: inline-flex; align-items: center; gap: 0.35em; font-size: var(--t-sm); color: var(--muted); }
.tp-seller .author__base svg { color: var(--clay); }

.tp-detail__description { max-width: var(--measure); }
.tp-detail__sub { font-size: var(--t-h3); margin-bottom: var(--s-3); }
.tp-detail__desc-body { color: var(--ink-soft); line-height: 1.7; white-space: pre-line; }
.tp-detail__report { margin-top: var(--s-7); }