/* ---------------------------------------------------------------------------
   bim. Social fitness app: the case study and the design system behind it.

   The page runs on css/vestiaire.css, which carries the portfolio's design
   language and every shared component. Only two things here are specific to
   bim, because no other case study documents a colour system:

   SWATCHES  the chip colours are bim's own tokens, so each one is written
             inline on its swatch rather than duplicated here as a variable.
             Dark mode tokens are white at a given opacity, so their chips are
             composited over bim's own #212121 card and read correctly on
             either chapter.
   TILES     the icon set and the reversed logo are drawn in white, so they
             need a ground of their own even on the dark chapter.
--------------------------------------------------------------------------- */

.bim-swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); gap: 20px; margin: 38px 0 0; padding: 0; list-style: none; }
.bim-swatches li { border: 1px solid var(--rule-soft); background: var(--surface-2); }
.bim-swatch__chip { display: block; height: 104px; box-shadow: inset 0 0 0 1px var(--rule-soft); }
.bim-swatches strong { display: block; padding: 16px 18px 0; color: var(--text); font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 500; letter-spacing: -.025em; }
.bim-swatches span { display: block; padding: 5px 18px 18px; color: var(--text-4); font-family: 'Space Grotesk', sans-serif; font-size: 14px; letter-spacing: .04em; }
/* Gradient swatches carry two values, so the second line needs room. */
.bim-swatches span b { display: block; font-weight: inherit; }

/* Every group keeps the same gap, including the first, which otherwise sat
   flush against the section's lead paragraph. */
.bim-group { margin-top: 52px; }

.bim-tile { display: grid; place-items: center; max-width: 860px; padding: 44px 34px; border: 1px solid var(--rule-soft); background: #212121; }
.bim-tile--light { background: #f5f6f8; }
.bim-tile img { width: min(100%, 700px); }

.bim-logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-top: 38px; }
.bim-logos figure { margin: 0; }
.bim-logos figcaption { margin-top: 10px; color: var(--text-4); font-size: 14px; }

@media (max-width: 640px) {
  .bim-swatches { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
  .bim-swatch__chip { height: 84px; }
  .bim-tile { padding: 32px 22px; }
}

/* Component specimens are 2x exports, so they are held to their real size
   instead of being stretched to the grid column, which would show a 200pt
   card at 350px. --w carries that real width, per figure. The cap goes on
   the figure rather than on the image: an image set to width:auto collapses
   to nothing while it is still lazy-loading, which it always is inside a
   panel that starts hidden. */
.bim-specs figure { max-width: min(100%, var(--w, 340px)); }
.bim-specs figcaption { max-width: 34ch; }
.bim-tile--logo img { width: min(100%, 290px); }