/*
  App-specific styles only. Load order: vendor/marinos/marinos.css -> this file.

  Before adding a rule here:
    1. Does an existing marin-ui component or class already do this? Use it.
    2. Does a marin-ui token (color, spacing, radius) cover it? Use the token.
    3. Is this a small, genuinely app-specific addition? Add it below.
    4. Would other Marin apps likely need this too? Propose it for marin-ui instead
       of duplicating it here.
*/

/* Directory grid/card base rules aren't in the shared bundle yet — marin-os
   defines the same pair locally (its own inline <style>) for its app
   directory, and this repo's "Brands" directory is the same pattern:
   a grid of cards, one per entry, linking out to that entry's own page. */
.directory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
}

.directory-card {
  display: flex;
  flex-direction: column;
}

/* Each brand card's logo preview — contained, not cropped, since a logo's
   own whitespace/proportions are part of what it's correct to show. */
.brand-card__preview {
  width: 100%;
  max-height: 6rem;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 0.75rem;
}