/* cards.css — Browse / strain card layout, images and perceived-flavour picker. */

/* ══════════════════════════════════════════════════════════
   RESULTS GRID LAYOUT
   ══════════════════════════════════════════════════════════ */
#results { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); 
  gap: 1.5rem; 
  margin-top: 2rem;
}
#browse-results { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); 
  gap: 1.5rem; 
  margin-top: 1rem;
}
/* First card (top match) takes full width */
#results .card.top { 
  grid-column: 1 / -1; 
  max-width: 100%;
}
/* Card images */
.card-image {
  width: calc(100% + 2rem);
  height: 200px;
  background-size: cover;
  background-position: center;
  border-radius: 6px;
  margin: -1.25rem -1rem 1.25rem -1rem;
  background-color: var(--bg3);
  overflow: hidden;
}
.img-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: var(--muted);
  opacity: 1;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
@media (max-width: 768px) {
  #results, #browse-results {
      grid-template-columns: 1fr;
    }
}