/* =====================================================================
   MODULE STYLES: BROWSE GOATS  (browse/browse.css)
   Page head, filter bar, result line, card grid, empty state and
   loading placeholders. Cards: components/listing-card/.
   ===================================================================== */

/* ---- 1. Page head -------------------------------------------------- */
.bk-browse__head { position: relative; overflow: hidden; padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) var(--bk-space-5); background: var(--bk-milk); border-bottom: 1px solid var(--bk-line); }
.bk-browse__head .bk-spot-field--field { -webkit-mask-image: linear-gradient(to left, #000, transparent 70%); mask-image: linear-gradient(to left, #000, transparent 70%); }
html[dir="rtl"] .bk-browse__head .bk-spot-field--field { -webkit-mask-image: linear-gradient(to right, #000, transparent 70%); mask-image: linear-gradient(to right, #000, transparent 70%); }
.bk-browse__head-inner { position: relative; z-index: 1; display: grid; gap: var(--bk-space-3); justify-items: start; }
.bk-browse__head h1 { font-size: var(--bk-step-3); }
.bk-browse__head p { max-width: 44rem; color: var(--bk-ink-soft); font-size: var(--bk-step-1); }

/* ---- 2. Filter bar ------------------------------------------------- */
.bk-browse { padding-block: var(--bk-space-5) var(--bk-section); }
.bk-browse__filters {
  display: grid; grid-template-columns: 2fr 1fr repeat(2, minmax(140px, 1fr)) auto; gap: var(--bk-space-3); align-items: end;
  padding: var(--bk-space-4); background: var(--bk-milk); border: 1px solid var(--bk-line); border-radius: var(--bk-radius-lg); box-shadow: var(--bk-shadow);
}
.bk-browse__filters [hidden] { display: none; }
.bk-browse__actions { display: flex; align-items: center; gap: var(--bk-space-3); }
select.bk-input { appearance: auto; cursor: pointer; }

/* ---- 3. Result line ------------------------------------------------ */
.bk-browse__bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--bk-space-2); margin: var(--bk-space-5) 0 var(--bk-space-4); }
.bk-browse__bar strong { font-size: var(--bk-step-1); }
.bk-browse__order { color: var(--bk-ink-faint); font-size: var(--bk-step--1); }

/* ---- 4. Card grid + loading placeholders --------------------------- */
.bk-browse__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bk-space-4); }
.bk-browse__skeleton {
  display: grid; gap: 10px; padding-bottom: var(--bk-space-4); overflow: hidden;
  background: var(--bk-milk); border: 1px solid var(--bk-line); border-radius: var(--bk-radius-lg);
}
.bk-browse__skeleton span { aspect-ratio: 4 / 3; background: var(--bk-cream); }
.bk-browse__skeleton i { height: 14px; margin-inline: var(--bk-space-4); border-radius: 6px; background: var(--bk-cream); }
.bk-browse__skeleton i:last-child { width: 45%; }
.bk-browse__skeleton > * { animation: bk-pulse 1.4s ease-in-out infinite; }
@keyframes bk-pulse { 50% { opacity: 0.45; } }

/* ---- 5. Empty / error state ---------------------------------------- */
.bk-browse__state { display: grid; justify-items: center; gap: var(--bk-space-3); padding: var(--bk-space-6) var(--bk-space-4); text-align: center; }
.bk-browse__state[hidden] { display: none; }
.bk-browse__state-symbol { font-size: 64px; }
.bk-browse__state h2 { font-size: var(--bk-step-2); }
.bk-browse__state p { max-width: 34rem; color: var(--bk-ink-soft); }

/* ---- 6. Load more -------------------------------------------------- */
.bk-browse__more { display: grid; place-items: center; margin-top: var(--bk-space-5); }

/* ---- 7. Responsive ------------------------------------------------- */
@media (max-width: 1024px) {
  .bk-browse__grid { grid-template-columns: repeat(2, 1fr); }
  .bk-browse__filters { grid-template-columns: 1fr 1fr; }
  .bk-browse__search { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .bk-browse__grid, .bk-browse__filters { grid-template-columns: 1fr; }
}