﻿/* birds-collections.css — scoped, high-priority styles for /birds page */

/* Keep layout stable when scrollbars appear */
html{ scrollbar-gutter: stable both-edges; }

/* Responsive grid for the chip buttons */
body.birds-index #collections-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap:12px 16px !important;
}

/* If collections.js outputs UL/LI wrappers, swallow them so anchors become grid items */
body.birds-index #collections-grid ul{ margin:0 !important; padding:0 !important; display:contents !important; }
body.birds-index #collections-grid li{ list-style:none !important; display:contents !important; }

/* Green “chip” buttons (works for direct <a> and legacy .tile) */
body.birds-index #collections-grid a,
body.birds-index #collections-grid .tile{
  display:flex !important; align-items:center; justify-content:center;
  min-height:42px !important; padding:10px 14px !important;
  border-radius:9999px !important;
  background:rgba(25,135,84,.12) !important;     /* green tint to match site */
  border:1px solid rgba(25,135,84,.35) !important;
  color:#0f5132 !important; text-decoration:none !important; font-weight:600 !important;
  white-space:nowrap !important;
}
body.birds-index #collections-grid a:hover,
body.birds-index #collections-grid .tile:hover{
  background:rgba(25,135,84,.18) !important;
}

/* Breadcrumbs spacing */
#collections-breadcrumbs{ margin-bottom:10px; }
#collections-breadcrumbs .sep{ margin:0 8px; opacity:.5; }
#collections-breadcrumbs a{ text-decoration:none; }
#collections-breadcrumbs a.current{ pointer-events:none; opacity:.7; }

/* Mobile tweaks */
@media (max-width: 575.98px){
  body.birds-index #collections-grid{
    grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)) !important;
    gap:10px !important;
  }
  body.birds-index #collections-grid a,
  body.birds-index #collections-grid .tile{ padding:12px 16px !important; }
}
#qc-buttons { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 8px }
.qc-btn { padding:8px 12px; border:1px solid #cfcfb3; border-radius:999px; background:#fff; cursor:pointer }
.qc-btn.is-active { background:#e6f7e6; border-color:#7bbf7b }
#qc-results { margin:10px 0 24px }
.qc-grid { display:grid; gap:12px; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)) }
.qc-card { background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden }
.qc-card a { display:block; text-decoration:none; color:inherit }
.qc-thumb { aspect-ratio:16/9; width:100%; object-fit:cover; display:block }
.qc-meta { padding:10px 12px }
.qc-title { font-size:16px; line-height:1.3; margin:0 }
.qc-date { font-size:12px; opacity:.7; margin-top:6px }
/* Hide any legacy list under the buttons on Birds index */
.birds-index #ml-collection-results{ display:none !important; }

