/* ==========================================================================
   hustle&passive — guides library layer
   Loaded after site.css on the guides index only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Filter toolbar
   --------------------------------------------------------------------------
   The chips are real anchors (?topic=…), not buttons, so the filtered views
   are linkable and work with JavaScript off. guides.js upgrades them to
   instant client-side filtering and keeps the URL in step via pushState.
   -------------------------------------------------------------------------- */
.toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 26px; }

.search { flex: 1; min-width: 230px; }
.search input {
  width: 100%; font: 500 14px Inter, sans-serif; padding: 12px 16px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--paper);
}
.search input:focus {
  outline: none; border-color: var(--cta);
  box-shadow: 0 0 0 4px rgba(47, 164, 91, .15);
}

.chip-filter {
  font: 600 13px Inter, sans-serif; padding: 10px 16px;
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--paper); color: var(--muted);
  cursor: pointer; text-decoration: none;
  transition: background .18s, color .18s, border-color .18s;
}
.chip-filter:hover { border-color: var(--ink); color: var(--ink); }
.chip-filter.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* --------------------------------------------------------------------------
   Featured guide
   -------------------------------------------------------------------------- */
.featured {
  display: flex; gap: 20px; align-items: center;
  background: var(--green); color: #EFE9DA;
  border-radius: 18px; padding: 22px 26px; margin-bottom: 28px;
  text-decoration: none; flex-wrap: wrap; transition: transform .2s;
}
.featured:hover { transform: translateY(-4px); box-shadow: var(--sh); }
.f-ic {
  width: 52px; height: 52px; border-radius: 14px;
  background: rgba(255, 255, 255, .1);
  display: grid; place-items: center; font-size: 22px;
  color: var(--gold); flex-shrink: 0;
}
.featured h3 { font-size: 20px; color: #fff; margin: 4px 0 6px; }
.featured p { font-size: 13px; color: #C9D8C9; }
.f-lbl {
  font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mint);
}
.featured .btn { margin-left: auto; }

/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */
.empty {
  background: var(--paper); border: 1px dashed var(--line); border-radius: 16px;
  padding: 28px; text-align: center; color: var(--muted);
  font-size: 14px; margin-top: 20px;
}
.empty a { color: var(--orange); font-weight: 700; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .featured .btn { margin-left: 0; }
}