/* =========================================================================
   /clearance-sale/ - the item cards and the ask form's heading.
   The cards are generated from .claude/clearance/items.py; this file only
   styles them. Square photos, because parts photos come in every shape and
   a square crop keeps the rows level.
   ========================================================================= */

.sale-hero__btns { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-7); }

.sale-grid {
  display: grid; gap: var(--sp-6); margin-top: var(--sp-9);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}
.sale-card {
  display: grid; grid-template-rows: auto 1fr; overflow: hidden;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--surface-raised); box-shadow: var(--shadow-sm);
  scroll-margin-top: calc(var(--header-h) + 12px + var(--sp-6));
}
.sale-card__media { position: relative; aspect-ratio: 1; background: var(--surface-sunken); }
.sale-card__media img { width: 100%; height: 100%; object-fit: cover; }
.sale-card__ph {
  display: grid; place-content: center; justify-items: center; gap: var(--sp-2); height: 100%;
  font: var(--text-caption); color: var(--text-tertiary);
}
/* Condition sits on the photo, top left, as a plain label rather than the brand chip. */
.sale-card__cond {
  position: absolute; inset-block-start: var(--sp-4); inset-inline-start: var(--sp-4);
  height: 24px; background: var(--surface-raised); color: var(--text-primary); box-shadow: var(--shadow-xs);
}
/* A column, so the buttons sit on each card's floor however long the blurb runs. */
.sale-card__body { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--card-pad); }
.sale-card__body h3 { font: var(--text-h4); }
.sale-card__body > p:not(.sale-card__price) { font: var(--text-body-sm); color: var(--text-secondary); }
.sale-card__price { margin-top: var(--sp-2); font: var(--text-h3); color: var(--text-primary); }
.sale-card__price--ask { font: var(--text-label); color: var(--text-accent); }
.sale-card__btns { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: auto; padding-top: var(--sp-2); }
.sale-card__btns .btn { flex: 1 1 auto; }

.sale-ask__title { margin-top: var(--sp-3); font: var(--text-display-md); letter-spacing: var(--ls-display); text-wrap: balance; }