/* ==========================================================================
   Card Component
   Base container and content-layout variant.
   All visual values from tokens.css — no hardcoded hex or px radii.
   Reference: docs/source/design-glavnaya/index.html .step-card / .task-card / .prod-card.
   ========================================================================== */

/* ---- Base card container ---- */
.card {
  background-color: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  overflow: hidden;

  /* Desktop padding */
  padding: 24px;
}

/* Mobile padding shrinks at 640 px breakpoint (Decision 10) */
@media (max-width: 640px) {
  .card {
    padding: 16px;
  }
}

/* ---- Content variant — flex column with heading/text/button layout ---- */
.card--content {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* ---- Elevated modifier — stronger shadow for emphasis (nice-to-have F2+) ---- */
.card--elevated {
  box-shadow: var(--shadow-md);
}