/* ==========================================================================
   Backgrounds page (Figma 224:3652): hero with showcase strip + grid of background cards.
   Sections are fluid (no max width). The grid, filters and cards come from styles.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero (Figma 592:7833): the shared .page-hero (gradient, framed column, dots on the bottom corners).
   Title box 629px, subtitle 308px; the ribbon sits right under the subtitle (no gap: its band starts 0.26 card
   heights above the cards, which bow up into it, so the visible space is about the Figma's 60px).
   -------------------------------------------------------------------------- */
.page-hero--backgrounds { --title-w: 11.232em; --subtitle-w: 308px; overflow-x: clip; }
.page-hero--backgrounds .page-hero__frame { gap: 0; }
.page-hero--backgrounds .frame-dots::before { display: none; } /* only the two bottom dots */
.page-hero--backgrounds .page-hero__frame { --dot-bottom: -2px; }

/* Ribbon carousel: full bleed (edge to edge of the page, over the framed column's lines). Its height is 1.6 card
   heights (BAND in js/backgrounds-ribbon.js); the card height is 27vw, between 190px and 400px. */
.ribbon {
  position: relative;
  flex-shrink: 0;
  width: 100vw; /* wider than the framed column: the flex centring spreads it to both page edges */
  height: calc(1.6 * clamp(190px, 27vw, 400px));
}
.ribbon__canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.ribbon.is-grabbing .ribbon__canvas { cursor: grabbing; }
.ribbon__canvas:focus { outline: none; }
.ribbon__canvas:focus-visible { outline: 2px solid var(--gray-50); outline-offset: -2px; }

/* --------------------------------------------------------------------------
   Grid: card without text, whole card is the link
   -------------------------------------------------------------------------- */
.library-card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 12px;
}
.library-card__link:focus-visible { outline: 2px solid var(--gray-50); outline-offset: 4px; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */