/* ==========================================================================
   Carafe & Gilt — Browse / category pages
   The full, filterable index over the shared recipe card. Reuses tokens.css,
   card.css and home.css (masthead, .pill, .recipe-grid, footer). This file adds
   the search field, category switcher, dropdown filters, sort control, results
   chrome and pager. Home's curated grid is a separate page and untouched.
   ========================================================================== */

.browse-head {
  padding: var(--sp-6) 0 var(--sp-4);
  text-align: center;
}
.browse-head .cg-kicker { display: block; margin-bottom: var(--sp-2); }
.browse-head h1 {
  font-family: var(--font-display); font-weight: 400; color: var(--display-ink);
  font-size: clamp(2rem, 5vw, 3rem); line-height: 1.05; margin: 0;
}

/* Live search (no submit — filters as you type). */
.browse-search {
  display: block; width: 100%; max-width: 620px; margin: var(--sp-5) auto 0;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text); font-family: var(--font-body); font-size: var(--fs-lg);
  padding: 0.9em 1.1em;
  transition: border-color var(--transition);
}
.browse-search::placeholder { color: var(--text-muted); }
.browse-search:focus { outline: none; border-color: var(--gold); }

/* Category switcher — navigation between category pages (reuses .pill). */
.browse-cats {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-2); margin: var(--sp-5) auto 0;
}

/* ---- Filter + sort toolbar --------------------------------------------- */
.browse-toolbar {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--sp-3);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--sp-4) 0;
  margin-top: var(--sp-5);
}
.browse-dropdowns { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.browse-toolbar-right { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }

/* Dropdown (a trigger button + an absolutely-positioned checkbox/radio panel). */
.dropdown { position: relative; }
.dropdown-trigger {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-caption); text-transform: uppercase; letter-spacing: 0.14em;
  font-size: var(--fs-xs); color: var(--text);
  background: transparent; border: 1px solid var(--border-strong);
  padding: 0.6em 1em; cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.dropdown-trigger:hover { border-color: var(--gold); color: var(--gold); }
.dropdown.open > .dropdown-trigger,
.dropdown.has-selection > .dropdown-trigger { border-color: var(--gold); color: var(--gold); }
.dropdown-caret { font-size: 0.9em; transition: transform var(--transition); }
.dropdown.open .dropdown-caret { transform: rotate(180deg); }

.dropdown-panel {
  position: absolute; z-index: 20; top: calc(100% + 4px); left: 0;
  min-width: 210px; max-height: 320px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border-strong);
  padding: var(--sp-2); display: flex; flex-direction: column; gap: 1px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.30);
}
.dropdown-panel[hidden] { display: none; }
/* Right-aligned controls open toward the left edge so they don't overflow. */
.browse-toolbar-right .dropdown-panel { left: auto; right: 0; }

.dropdown-opt {
  display: flex; align-items: center; gap: 0.6em;
  padding: 0.5em 0.6em; cursor: pointer;
  font-family: var(--font-body); font-size: var(--fs-sm);
  text-transform: none; letter-spacing: normal; color: var(--text);
}
.dropdown-opt:hover { background: var(--surface-2); }
.dropdown-opt input { accent-color: var(--gold); width: 15px; height: 15px; flex: 0 0 auto; margin: 0; }
.dropdown-opt-label { line-height: 1.3; }

.clear-filters {
  font-family: var(--font-caption); text-transform: uppercase; letter-spacing: 0.14em;
  font-size: var(--fs-xs); color: var(--text-muted);
  background: transparent; border: 0; cursor: pointer; padding: 0.4em 0;
  border-bottom: 1px solid var(--border);
}
.clear-filters:hover { color: var(--gold); border-color: var(--gold); }

/* ---- Results chrome ----------------------------------------------------- */
.browse-actions {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-4) 0 var(--sp-5);
}
.result-count {
  font-family: var(--font-caption); text-transform: uppercase; letter-spacing: 0.16em;
  font-size: var(--fs-xs); color: var(--text-muted);
}

.browse-empty {
  padding: var(--sp-6) 0; text-align: center;
  color: var(--text-muted); font-family: var(--font-display); font-style: italic;
  font-size: var(--fs-lg);
}

.browse-grid { padding-bottom: var(--sp-5); }

/* ---- Pager -------------------------------------------------------------- */
.browse-pager {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-4); padding: var(--sp-4) 0 var(--sp-6);
}
.browse-pager[hidden] { display: none; }
.pager-btn {
  font-family: var(--font-caption); text-transform: uppercase; letter-spacing: 0.14em;
  font-size: var(--fs-xs); color: var(--text);
  background: transparent; border: 1px solid var(--border-strong);
  padding: 0.6em 1.1em; cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.pager-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pager-status {
  font-family: var(--font-caption); text-transform: uppercase; letter-spacing: 0.16em;
  font-size: var(--fs-xs); color: var(--text-muted); min-width: 8ch; text-align: center;
}

@media (max-width: 560px) {
  .browse-toolbar { flex-direction: column; align-items: stretch; }
  .browse-dropdowns { justify-content: center; }
  .browse-toolbar-right { justify-content: space-between; }
}