/* ============================================================================
 * Shared Gigs browse grid — public + client Browse Gigs
 * Card layout matches the public /gigs page (easy to scan: image, title, tag, price).
 * Soft Neutral tokens with legacy fallbacks.
 * ========================================================================== */

.gg-browse{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.gg-browse__toolbar{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.gg-browse__toolbar-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
}
.gg-browse__toolbar-row .gg-search{
  flex:1 1 220px;
  max-width:320px;
  min-width:180px;
}
.gg-browse__toolbar-row .gg-browse__meta-text{
  margin-left:auto;
  white-space:nowrap;
}
.gg-browse__toolbar-row .gg-browse__orders{
  flex:0 0 auto;
  white-space:nowrap;
}

.gg-search input{
  width:100%;
  background:var(--surface,var(--surface-primary,var(--rev-bg-primary)));
  border:1px solid var(--border-hairline,var(--border-color,var(--border-secondary)));
  border-radius:var(--r-pill,var(--radius-lg,12px));
  padding:0.75rem 1.15rem;
  font-size:0.9rem;
  color:var(--ink,var(--text-primary));
  height:auto;
  min-height:42px;
}
.gg-search input:focus{
  outline:none;
  border-color:var(--accent,var(--primary));
  box-shadow:var(--focus-ring,0 0 0 3px rgba(var(--primary-rgb,243,91,37),0.15));
}
.gg-search input::placeholder{color:var(--ink-muted,var(--text-muted))}

.gg-browse .chip-row,
.gg-browse .gg-chips{
  display:flex;
  gap:0.6rem;
  overflow-x:auto;
  padding-bottom:0.35rem;
  margin:0 0 0.25rem;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.gg-browse .chip-row::-webkit-scrollbar,
.gg-browse .gg-chips::-webkit-scrollbar{display:none}

/* Match public Store filter chips (Soft Neutral pills) */
.gg-browse .chip-row .chip,
.gg-browse .gg-chips .chip,
.gg-browse button.chip{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:auto;
  min-height:0;
  padding:0.55rem 1.1rem;
  font-family:inherit;
  font-size:0.85rem;
  font-weight:600;
  line-height:1.2;
  cursor:pointer;
  white-space:nowrap;
  border-radius:var(--r-pill,9999px);
  background:var(--surface,var(--surface-primary,#fff));
  color:var(--ink,var(--text-primary));
  border:1px solid var(--border-hairline,var(--border-color,rgba(0,0,0,.08)));
  box-shadow:none;
  text-decoration:none;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.gg-browse .chip-row .chip:hover,
.gg-browse .gg-chips .chip:hover,
.gg-browse button.chip:hover{
  background:var(--surface-sunken,var(--bg-secondary,#f5f5f5));
  color:var(--ink-strong,var(--text-primary));
  border-color:var(--border-strong,var(--border-hairline));
}
.gg-browse .chip-row .chip.active,
.gg-browse .gg-chips .chip.active,
.gg-browse button.chip.active{
  background:var(--ink-strong,var(--secondary,#181818));
  border-color:var(--ink-strong,var(--secondary,#181818));
  color:var(--canvas,var(--ink-on-solid,#fff));
}
.gg-browse .chip-row .chip.active i,
.gg-browse .gg-chips .chip.active i,
.gg-browse button.chip.active i{color:inherit}
.gg-browse .chip-row .chip i,
.gg-browse .gg-chips .chip i{
  font-size:0.85rem;
  line-height:1;
}

.gg-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.25rem;
}
.gg-card{
  background:var(--surface,var(--surface-primary,var(--rev-bg-primary)));
  border:1px solid var(--border-hairline,var(--border-color,var(--border-secondary)));
  border-radius:var(--r-card,var(--radius-xl,16px));
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
  transition:border-color .15s ease,box-shadow .15s ease;
  box-shadow:var(--shadow-soft,var(--shadow-sm));
}
.gg-card:hover{
  border-color:var(--border-strong,var(--border-hover-color,var(--border-primary)));
  box-shadow:var(--shadow-soft,var(--shadow-md));
  color:inherit;
  text-decoration:none;
  transform:none;
}
.gg-card__image{
  position:relative;
  aspect-ratio:16/10;
  background:var(--surface-sunken,var(--surface-secondary,var(--rev-bg-secondary)));
  overflow:hidden;
}
.gg-card__image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.gg-card__placeholder{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--accent,var(--primary));
  font-size:32px;
}
.gg-card__video-badge{
  position:absolute;
  left:10px;
  bottom:10px;
  background:rgba(0,0,0,.65);
  color:#fff;
  font-size:.7rem;
  font-weight:600;
  padding:3px 8px;
  border-radius:999px;
}
.gg-card__body{
  padding:1.2rem 1.25rem 1.25rem;
  display:flex;
  flex-direction:column;
  gap:0.55rem;
  flex:1;
}
.gg-card__title{
  font-size:1.05rem;
  font-weight:700;
  margin:0;
  color:var(--ink-strong,var(--text-primary));
  line-height:1.35;
}
.gg-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  align-self:flex-start;
  background:var(--accent-soft,rgba(var(--primary-rgb,243,91,37),0.1));
  color:var(--accent,var(--primary));
  font-size:0.75rem;
  font-weight:600;
  padding:0.3rem 0.75rem;
  border-radius:var(--r-pill,var(--radius-md,8px));
}
.gg-card__footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:auto;
  padding-top:0.45rem;
  gap:8px;
}
.gg-price{
  font-size:0.85rem;
  color:var(--ink-muted,var(--text-muted));
}
.gg-price strong{
  color:var(--ink-strong,var(--text-primary));
  font-size:1rem;
}
.gg-card__footer > .fa-arrow-right,
.gg-card__footer > i.fa-arrow-right{
  color:var(--accent,var(--primary));
  flex-shrink:0;
}

.gg-empty{
  text-align:center;
  padding:3rem 1rem;
  color:var(--ink-muted,var(--text-secondary));
}
.gg-empty i{
  font-size:2.25rem;
  color:var(--accent,var(--primary));
  margin-bottom:0.75rem;
  display:block;
}
.gg-empty h5{
  color:var(--ink-strong,var(--text-primary));
  margin-bottom:0.35rem;
}
.gg-empty-hidden{display:none !important}

.gg-browse__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:4px;
}
.gg-browse__meta-text{
  font-size:12.5px;
  color:var(--ink-muted,var(--text-muted));
}
/* My Orders uses shared Soft Neutral .btn.btn-sm.btn-primary; keep layout only */
.gg-browse__orders.btn{
  text-decoration:none;
}
.gg-browse__orders.btn:hover{
  opacity:1;
}

@media (max-width:991px){
  .gg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .gg-grid{grid-template-columns:1fr}
  .gg-browse__toolbar-row .gg-search{
    flex:1 1 100%;
    max-width:none;
  }
  .gg-browse__toolbar-row .gg-browse__meta-text{
    margin-left:0;
    order:3;
    width:100%;
  }
}