/* ==========================================================================
   Template — trip listing
   ==========================================================================
   Loaded on the trip archive and on every trip taxonomy archive. The grid,
   the card and the pagination are global components; this file is the page
   frame and the filter bar.
   ========================================================================== */

.tmg-listing{padding-block:var(--sec-y)}

.tmg-listing__head{
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
  max-width:62ch;
  margin-block-end:var(--s-6);
}
.tmg-listing__title{
  font-family:var(--font-display);
  font-variation-settings:var(--fv-display);
  font-size:var(--fs-h1);
  line-height:var(--lh-heading);
  letter-spacing:var(--ls-display);
  font-weight:400;
}

.tmg-listing__count{
  margin-block:var(--s-5) var(--s-4);
  color:var(--color-text-muted);
}

/* --- Filter bar ---------------------------------------------------------
   A quiet band rather than a card: it is a control surface, and giving it
   the same elevation as a trip card makes it compete with the results.
   ----------------------------------------------------------------------- */

.tmg-filters{
  padding:var(--s-5);
  background:var(--color-surface-sunken);
  border-radius:var(--r-md);
}

.tmg-filters__row{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s-4);
  align-items:end;
}
@media (min-width:640px){
  .tmg-filters__row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
  .tmg-filters__row{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
}

.tmg-filters__field{min-width:0}

/* The control sits on the page ground, not the band, so it reads as a field
   rather than a slab of the same colour. */
.tmg-filters .tmg-select{background-color:var(--color-surface)}

.tmg-filters__actions{
  display:flex;
  align-items:center;
  gap:var(--s-4);
  min-height:48px;
}
.tmg-filters__apply[hidden]{display:none}

.tmg-filters__clear{
  font-size:var(--fs-small);
  color:var(--color-text-muted);
  text-decoration:none;
  border-block-end:1px solid var(--color-border);
  padding-block-end:1px;
  transition:color var(--t-micro) var(--ease),border-color var(--t-micro) var(--ease);
}
.tmg-filters__clear:hover{color:var(--color-text);border-block-end-color:var(--color-accent)}