/*
 * Discover page / faceted recipe browse
 * Liber-style sidebar layout: filter rail left, recipe grid right.
 * Mobile: results first, filter rail hidden behind a toggle button
 * (each group inside is collapsible via SFP's label toggle setting).
*/

.recipes-browse {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  align-items: start;
}

.recipes-sidebar {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.recipes-results {
  min-width: 0;
}

.recipes-sidebar .search-filter-field {
  padding: 18px 0;
  border-bottom: 1px solid #030712;
}

.recipes-sidebar .search-filter-field:first-child {
  padding-top: 0;
}

/* Mobile: results first, filters behind a toggle button.
   Must come after the base .recipes-sidebar rule -- same specificity,
   so source order decides which display value wins. */
.recipes-filter-toggle {
  display: none;
}

@media (max-width: 991.98px) {
  .recipes-filter-toggle {
    display: inline-flex;
    justify-self: start;
  }

  .recipes-sidebar {
    display: none;
  }

  .recipes-browse.filters-open .recipes-sidebar {
    display: flex;
  }
}

@media (min-width: 992px) {
  .recipes-browse {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 50px;
  }

  .recipes-sidebar {
    position: sticky;
    top: 100px;
  }
}

/* Card grid: fewer columns than the full-width layout, since the
   results column is ~280px + gap narrower than the old container */
.recipes-browse .recipes-card { width: 100%; }

@media (min-width: 576px) {
  .recipes-browse .recipes-card { width: 50%; }
}

@media (min-width: 992px) {
  .recipes-browse .recipes-card { width: 33.333%; }
}

@media (min-width: 1400px) {
  .recipes-browse .recipes-card { width: 25%; }
}