/* Listing page two-column layout (sidebar of filters + main carousel/grid).
   Below 980px the sidebar collapses to a dropdown overlay so the carousel
   stays visible at the top of the viewport. */

.page-layout { display: flex; align-items: flex-start; gap: 1.5rem; }
.sidebar { flex: 0 0 260px; position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
.sidebar .filters { flex-direction: column; padding: 0.7rem; gap: 0.55rem; }
.sidebar .more-grid { flex-direction: column; gap: 0.55rem; }

/* Label-on-top in the sidebar — keeps each group's chip row predictable.
   Tighter padding + smaller font so 3-4 chips reliably fit on one chip-row. */
.sidebar .chip-group { flex-direction: column; align-items: stretch; gap: 0.2rem; }
.sidebar .chip-label { font-size: 0.62rem; }
.sidebar .chip-row { gap: 0.25rem; }
.sidebar .chip { padding: 0.3rem 0.6rem; font-size: 0.78rem; }
.sidebar .breed-group input[type=text] { width: 100%; max-width: none; }

.main-area { flex: 1; min-width: 0; }

@media (max-width: 980px) {
  /* Stack page-layout so the carousel (main-area) takes the full row. The
     sidebar becomes a dropdown overlay anchored to the top of this container
     so the carousel underneath is never pushed down. */
  .page-layout { flex-direction: column; position: relative; min-width: 0; }
  /* In flex-direction:column, `min-width: 0` does NOT constrain children's
     cross-axis (horizontal) size. Without max-width here, the carousel's
     intrinsic min-content (156 cards in a row) bloats main-area to ~55,000px
     and pushes everything off-screen. */
  .main-area { width: 100%; max-width: 100%; min-width: 0; }
  .sidebar {
    display: none;
    position: absolute;
    top: -0.5rem; left: 0; right: 0;
    z-index: 10;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    max-height: 75vh;
    overflow-y: auto;
    width: auto;
    flex: none;
  }
  .sidebar.expanded { display: block; }
  .sidebar .filters { flex-direction: row; padding: 0.85rem; }
  .sidebar .more-grid { flex-direction: row; }

  /* Mobile-default: carousel shows immediately, filters tucked behind a button.
     View + filter toggles + search pill share the right side of the header.
     Only the first toggle in the row takes margin-left:auto so the pair
     stays adjacent; subsequent siblings get the page-header's normal gap. */
  .filter-toggle { display: inline-flex; margin-left: auto; }
  .filter-toggle + .filter-toggle { margin-left: 0; }
  .filter-toggle + .page-search-wrap { margin-left: 0.4rem; }
  /* Desktop-only segmented view switch; the icon .view-toggle takes over here. */
  .view-seg { display: none; }
}

/* "N dogs need volunteer enrichment" callout that sits between the page-header
   and the carousel. Lives in the layout module since it's a layout-level CTA,
   not part of any individual dog's UI. */
.enrichment-cta {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.45rem 0.85rem;
  margin: 0.4rem 0;
  background: var(--accent-soft);
  border: 1px solid #f3c8a8;
  border-radius: 8px;
  color: var(--fg);
  text-decoration: none;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  font-size: 0.85rem;
}
.enrichment-cta:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(194, 65, 12, 0.12);
}
.enrichment-cta .cta-icon { font-size: 1.1rem; line-height: 1; }
.enrichment-cta .cta-text { flex: 1; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline; }
.enrichment-cta .cta-text strong { color: var(--accent); font-size: 0.9rem; }
.enrichment-cta .cta-text small { color: var(--muted); font-size: 0.78rem; }
.enrichment-cta .cta-arrow { color: var(--accent); font-size: 1.1rem; font-weight: 600; }