/* ═══════════════════════════════════════════════════════════
   MOLECULE: Card
   Icon + title + description. Used in feature grids,
   solution overviews, market listings.
   ═══════════════════════════════════════════════════════════ */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.card:hover {
  border-color: rgba(37, 99, 235, 0.3);
  box-shadow: var(--shadow-md);
}


/* ── Clickable card (as <a>) ─────────────────────────────── */

a.card {
  text-decoration: none;
  color: inherit;
}

a.card:hover {
  transform: translateY(-2px);
}


/* ── Card internals ──────────────────────────────────────── */

.card__icon {
  margin-bottom: var(--space-5);
}

.card__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-snug);
  color: var(--color-text-1);
  margin-bottom: var(--space-3);
}

.card__subtitle {
  font-size: 0.65em;
  font-weight: var(--weight-medium);
  opacity: 0.7;
  display: block;
}

.card__desc {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-2);
  margin-bottom: var(--space-5);
}

.card__footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-sky);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
}


/* ── Color accent variants (top border = category coding) ── */

.card--sky     { border-top: 2px solid var(--color-sky);     }
.card--violet  { border-top: 2px solid var(--color-violet);  }
.card--amber   { border-top: 2px solid var(--color-amber);   }
.card--emerald { border-top: 2px solid var(--color-emerald); }
.card--blue    { border-top: 2px solid var(--color-blue);    }


/* ── Card grid layout ────────────────────────────────────── */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-6);
}

.card-grid--2col {
  grid-template-columns: repeat(2, 1fr);
}

.card-grid--3col {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
  .card-grid--2col,
  .card-grid--3col {
    grid-template-columns: 1fr;
  }
}