/* =========================================================================
   listing.css — the product catalogue.

   The old version of this file was eleven lines, and it showed: a title, a row
   of pills, then forty-eight identical cards in one uninterrupted grid. Past
   the second row the eye stops reading products and starts reading texture.

   Three things fix that, and none of them is decoration:
     - the head splits across the measure instead of stacking in the left third
     - every card in a row ends at the same place, so prices form a column
     - a band interrupts the grid where it starts repeating itself
   ========================================================================= */

/* ---------- Head ----------
   Title and count on the left, standfirst on the right, sharing one baseline.
   A catalogue heading is a label, not an argument, so it does not need the
   full width to itself. */
.listing-head { padding-bottom: clamp(1.6rem, 2.5vw, 2.4rem); }
.listing-head--split {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 5vw, 76px); align-items: end;
}
.listing-head h1 { margin-bottom: 0; }
/* Two of these headings are sentences, not category names. The type scales to
   the copy rather than the copy being cut to fit the type. */
.listing-head__h1--long { font-size: clamp(2rem, 3.4vw, 3rem); }
.listing-head__lead { margin-bottom: 0; max-width: 48ch; }
.listing-count {
  font-family: var(--font-mono); font-size: .74rem; color: var(--faint);
  letter-spacing: .1em; text-transform: uppercase; margin: 1rem 0 0;
}

/* ---------- Category rail ----------
   Quieter than it was: the current one is the only filled chip on the row, so
   "where am I" is answered by one object rather than by eight competing ones. */
.cat-nav {
  display: flex; flex-wrap: wrap; gap: .4rem;
  padding: clamp(1.1rem, 2vw, 1.6rem) 0;
  border-block: 1px solid var(--rule);
}
.cat-nav a {
  /* Sized so all eleven chips land on one line at the container width. One
     orphan chip wrapping onto a row of its own looks like a bug, not a rail. */
  font-size: .82rem; color: var(--dim); padding: .45rem .8rem;
  border: 1px solid var(--rule); border-radius: 999px;
  transition: border-color .3s var(--ease), color .3s var(--ease), background-color .3s var(--ease);
}
.cat-nav a:hover { border-color: var(--rule-lit); color: var(--text); }
.cat-nav a[aria-current="page"] { background: var(--text); color: var(--bg); border-color: var(--text); }
/* Oferte and Second hand are not categories, they are states. They read as a
   different kind of chip rather than being shoved to the far edge, which only
   forced them onto a second row on their own. */
.cat-nav__flag { color: var(--faint); border-style: dashed; }
.cat-nav__flag:hover { border-style: solid; border-color: var(--accent-dk); color: var(--text); }

/* ---------- The grid ----------
   auto-fill on a catalogue leaves a ragged last row at some widths; fixed
   column counts keep every row full and every card the same width. */
.listing-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.2vw, 34px) clamp(18px, 2vw, 30px);
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

/* Rows have to line up. Without a fixed title box, a two-line name and a
   four-line name push their prices to different heights and the row reads as
   broken. Three lines fits every name in this catalogue; the full name is
   still in the link, the tooltip and the page it opens. */
.listing-grid .card__title {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; min-height: calc(3 * 1.35em);
}
.listing-grid .card__media { aspect-ratio: 1 / 1; }

/* ---------- The interruption ----------
   Full width, a different shape, and the only filled button in the grid. */
.help-band {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem); flex-wrap: wrap;
  padding: clamp(1.8rem, 3.2vw, 3rem);
  background: var(--bg-lift);
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px var(--rule);
  margin-block: clamp(.5rem, 1.5vw, 1.4rem);
}
.help-band__text { max-width: 52ch; }
.help-band h2 { font-size: clamp(1.25rem, 2vw, 1.7rem); margin-bottom: .5rem; }
.help-band p { margin: 0; color: var(--dim); font-size: .95rem; }
.help-band__actions { display: flex; gap: .7rem; flex-wrap: wrap; }

@media (max-width: 1180px) { .listing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .listing-head--split { grid-template-columns: 1fr; align-items: start; }
  .listing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The rail scrolls sideways rather than stacking into five rows of pills. */
  .cat-nav {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  }
  .cat-nav::-webkit-scrollbar { display: none; }
  .cat-nav a { white-space: nowrap; }
  .help-band__actions .btn { flex: 1; }
}
@media (max-width: 560px) {
  .listing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .listing-grid .card__title { font-size: .92rem; }
}

/* =========================================================================
   The article grid.

   The card itself is a shared component and lives in base.css, because the
   homepage shows these too. Only the grid is a listing concern.
   ========================================================================= */
.post-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 34px);
  margin-top: clamp(2rem, 4vw, 3.5rem);
}
@media (max-width: 1024px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .post-grid { grid-template-columns: 1fr; } }