/* .cards-grid, .card-link — styles for src/lib/expand.mjs's
   `x-cards-grid`, `x-card-link`. Load AFTER tokens.css. See
   public/components/README.md for load order and the split rationale.

   These KEEP their borders: the no-border rule applies to a lone offer in a
   page's flow, and a set of industries is the kind of set cards exist for.

   An explicit 4-column grid with two breakpoints, not auto-fit: an earlier
   version tried repeat(auto-fit, minmax(...)) to fit exactly four cards
   inside a 1080px container, but auto-fit picks its column COUNT from the
   container's own width divided by the minimum, before it knows there are
   only four items to fill it — at some widths that math yields 5 columns
   and orphans the fourth card onto its own row alone, however the minimum
   is wrapped. An explicit count sidesteps the arithmetic instead of
   chasing it: repeat(4, ...) down to 1020px, repeat(2, ...) down to 560px,
   then a single column. Matches design/apricotter-homepage.dc.html's own
   fix for the identical bug. Adding a fifth industry means editing these
   three rules deliberately, which is the point — a card count this grid
   wasn't authored for should never silently reflow into something nobody
   chose.

   align-items: stretch, not start: safe now that no card carries more
   copy than another (auto's old second line of texture — the thing that
   used to make align-items: start necessary, so a shorter card wouldn't
   stretch to match a taller neighbour's extra paragraph — is gone; see
   "The auto texture line was tried and cut" in the design notes). Equal
   height now reads as intentional rather than accidental. */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  align-items: stretch;
}

@media (max-width: 1020px) {
  .cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .cards-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Also worn by a plain, non-link <div> (apricotter.com's Authors/Dentists
   industry cards, alongside auto's own linked card) so all three industry
   cards read at the same size and visual weight — "the asymmetry lives
   inside auto's card as copy, never as a bigger or more prominent card"
   (design/APRICOTTER-HOMEPAGE.md). The hover/focus-visible rule below is
   scoped to `a.card-link` specifically so a non-link card never picks up a
   hover state it doesn't own — plain CSS :hover fires on any hovered
   element, link or not, so an unscoped selector here would have given every
   card the same affordance x-card-link's real anchor is deliberately alone
   in having. */
.card-link {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  background-color: var(--color-surface-page);
  border: var(--border-width-hairline) solid var(--color-border-strong);
  border-radius: var(--radius-default);
  color: var(--color-text-primary);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--easing-standard);
}

a.card-link:hover,
a.card-link:focus-visible {
  background-color: var(--color-surface-hover);
}

a.card-link:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.card-link__name {
  font-family: var(--font-serif);
  font-size: var(--size-500);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-heading);
}

.card-link__blurb {
  font-size: var(--size-400);
  line-height: var(--line-height-body);
  color: var(--color-text-muted);
  text-wrap: pretty;
}

/* Same box the placeholder .media-placeholder--3-2 occupies (3:2, rounded),
   for the three industry cards with a real photo. object-position is a
   crop decision specific to each photo's own composition, not a design
   token — one modifier per card rather than an inline style, matching
   this codebase's no-inline-styles convention. */
.card-link__image {
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-default);
  object-fit: cover;
}

.card-link__image--auto {
  object-position: 62% 50%;
}

.card-link__image--dentists {
  object-position: 45% 50%;
}

.card-link__image--recommerce {
  object-position: 50% 30%;
}