/* Brand grid/card — /markalar/ only. No logo assets exist yet, so this is a
   text-only card (name + short description), modeled on .service-card's visual
   language (surface/border/radius/hover lift) but toned down: these cards are
   not links (no per-brand page to send visitors to), so there's no icon badge
   and no focus-visible override — nothing inside is focusable, and the site's
   global :focus-visible rule (base/global.css) already covers every real
   interactive element, so adding a fake tabindex here would just create an
   empty keyboard stop instead of improving accessibility. */

.brand-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 600px) {
  .brand-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .brand-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.brand-card {
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: transform var(--duration-base) var(--ease-premium),
    border-color var(--duration-base) var(--ease-premium);
}

.brand-card:hover {
  transform: translateY(-4px);
  border-color: rgb(47 125 250 / 40%);
}

.brand-card .accent-divider {
  margin-block: var(--space-3);
}

.brand-card__name {
  font-size: var(--fs-md);
  font-weight: 700;
}

.brand-card__desc {
  color: var(--color-text-dim);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

@media (prefers-reduced-motion: reduce) {
  .brand-card:hover {
    transform: none;
  }
}