/* ============================================================================
   results.css — the Real Results gallery page.
   The .ba stack, pills, lightbox and compare slider all live in base.css
   because the homepage preview uses them too.
   ============================================================================ */

.results-bar{
  position:sticky; top:var(--nav-h); z-index:500;
  background:var(--paper); border-bottom:1px solid var(--line);
  padding-block:1rem;
}
.results-bar-inner{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; }

.results-grid{
  display:grid; gap:clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:768px){
  .results-grid{ grid-template-columns:repeat(2,1fr); }
  /* Series shot much wider than tall get two columns. At one column width the
     studio backdrop dominates and the card reads as empty. */
  .results-grid .ba--wide{ grid-column:span 2; }
}
@media (min-width:1200px){ .results-grid{ grid-template-columns:repeat(3,1fr); } }

.results-empty{
  grid-column:1 / -1;
  padding:clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,4vw,3rem);
  background:var(--paper-2); border-radius:var(--r); text-align:center;
}
.results-empty h3{ margin-bottom:.75rem; }
.results-empty p{ color:var(--muted); max-width:46ch; margin-inline:auto; }
.results-empty-actions{ margin-top:2rem; display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; }

@media (max-width:1023px){
  .results-bar{ top:var(--nav-h-mobile); }
}