/* recommendations#show — page layout: banner grid + browser grid + empty state.
 * The new Figma "work file" dashboard (screen #1). Banner cards, filter rail,
 * toolbar, table/cards live in widgets/recommendations/. */

/* ---- Banner grid ----
 * Mobile & tablet: a single swipable row — cards keep a fixed width and the
 * row scrolls horizontally with snap (Figma mobile #1). At 64rem+ it becomes
 * the 4-up grid. */
.rec-banner {
  display: flex;
  align-items: stretch; /* all cards match the tallest */
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-32);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox — hide the scrollbar, keep the swipe */
  /* Full-bleed both edges — cancel the .app-main gutter so cards slide all the
     way to the screen edges while swiping (nothing clipped early), then use
     padding + scroll-padding to hold a 16px resting gutter. scroll-padding is
     what stops snap from pinning the first card flush against the edge. */
  margin-inline: calc(-1 * var(--spacing-16));
  padding-inline: var(--spacing-16);
  scroll-padding-inline: var(--spacing-16);
  cursor: grab; /* hint the mouse drag-to-scroll (drag-scroll controller) */
}
.rec-banner::-webkit-scrollbar { display: none; } /* WebKit/Blink */
/* While a mouse drag is in progress: grab cursor + suspend snap so the row
   tracks the cursor smoothly, then snaps to the nearest card on release. */
.rec-banner.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}
.rec-banner > .rec-card {
  flex: 0 0 17.5rem; /* Note: Figma card width 280px */
  height: auto; /* let align-items:stretch size the card, not height:100% */
  scroll-snap-align: start;
}
/* Tablet: the dashboard wrapper (.app-main--gutter) widens its side gutter from
   16px to 48px at 48rem, so the full-bleed above must cancel 48px here — the
   -16px would otherwise leave the scroll box inset 32px and clip cards there
   instead of letting them slide to the screen edge like on mobile. */
@media (min-width: 48rem) and (max-width: 63.999rem) {
  .rec-banner {
    margin-inline: calc(-1 * var(--spacing-48));
    padding-inline: var(--spacing-48);
    scroll-padding-inline: var(--spacing-48);
  }
}
@media (min-width: 64rem) {
  .rec-banner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--spacing-16);
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    cursor: auto;
  }
  .rec-banner > .rec-card { flex: none; }
}

/* ---- Browser: filter rail + content ---- */
.rec-browser-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-16);
}
@media (min-width: 64rem) {
  /* Note: bespoke rail width — no design-system column-width token exists. */
  .rec-browser-grid {
    grid-template-columns: 18rem minmax(0, 1fr);
    /* align-items: start so the rail isn't stretched to row height and can
       stick as the results column scrolls past it — the sticky itself lives on
       .rec-rail in widgets/recommendations/rec-rail.css. */
    align-items: start;
  }
}

.rec-browser-main { min-width: 0; }

/* ---- Empty state ---- */
.rec-empty {
  padding: var(--spacing-32);
  text-align: center;
  color: var(--text-tertiary);
  background-color: var(--background-surface-1);
  border-radius: var(--corner-radius-xs);
}

/* Mobile: tighten the card padding from 32 to 24. */
@media (max-width: 47.999rem) {
  .rec-empty { padding: var(--spacing-24); }
}