/*
 * 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;
  }
}

/* Spirit filter (SFP field #10 on prod, #8 on staging): custom PNG marker before each spirit name.
   Drop the icons in assets/images/spirits/ named by term slug (see paths
   below). Scoped per-slug so only mapped spirits get an icon box -- an
   unmapped term renders normally with no empty gap. data-option-value is
   SFP v3's per-option slug hook; survives the client-side re-render. */
.search-filter-field--id-10 [data-option-value="champagne"]    .search-filter-input-checkbox__label::before,
.search-filter-field--id-10 [data-option-value="gin"]          .search-filter-input-checkbox__label::before,
.search-filter-field--id-10 [data-option-value="tequilamezcal"] .search-filter-input-checkbox__label::before,
.search-filter-field--id-10 [data-option-value="rum"]          .search-filter-input-checkbox__label::before,
.search-filter-field--id-10 [data-option-value="vodka"]        .search-filter-input-checkbox__label::before,
.search-filter-field--id-10 [data-option-value="zeroproof"]    .search-filter-input-checkbox__label::before,
.search-filter-field--id-10 [data-option-value="whiskey"]      .search-filter-input-checkbox__label::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  vertical-align: -5px;
  background: center / contain no-repeat;
}

.search-filter-field--id-10 [data-option-value="champagne"]     .search-filter-input-checkbox__label::before { background-image: url(images/spirits/champagne-yc.png); }
.search-filter-field--id-10 [data-option-value="gin"]           .search-filter-input-checkbox__label::before { background-image: url(images/spirits/gin.png); }
.search-filter-field--id-10 [data-option-value="tequilamezcal"] .search-filter-input-checkbox__label::before { background-image: url(images/spirits/tequilamezcal.png); }
.search-filter-field--id-10 [data-option-value="rum"]           .search-filter-input-checkbox__label::before { background-image: url(images/spirits/rum.png); }
.search-filter-field--id-10 [data-option-value="vodka"]         .search-filter-input-checkbox__label::before { background-image: url(images/spirits/vodka.png); }
.search-filter-field--id-10 [data-option-value="zeroproof"]     .search-filter-input-checkbox__label::before { background-image: url(images/spirits/zeroproof.png); }
.search-filter-field--id-10 [data-option-value="whiskey"]       .search-filter-input-checkbox__label::before { background-image: url(images/spirits/whiskey.png); }

/* Type filter (SFP field #3): two-column grid so the five options don't
   stack into a tall single column. `order` floats the two headline types
   onto the top row -- Cocktails | Mocktails -- regardless of SFP's own
   term order. data-option-value is SFP v3's per-option slug hook, so this
   survives the client-side re-render on every filter change (no JS). */
.search-filter-field--id-3 .search-filter-input-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 18px;
}

.search-filter-field--id-3 .search-filter-input-checkbox[data-option-value="cocktails"]         { order: 1; }
.search-filter-field--id-3 .search-filter-input-checkbox[data-option-value="mocktails"]         { order: 2; }
.search-filter-field--id-3 .search-filter-input-checkbox[data-option-value="featured"]          { order: 3; }
.search-filter-field--id-3 .search-filter-input-checkbox[data-option-value="foodie"]            { order: 4; }
.search-filter-field--id-3 .search-filter-input-checkbox[data-option-value="coffee-lattes-tea"] { order: 5; }

/* 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%; }
}