/* ================================================================
 * utilities.css - Reusable utility classes
 *   .card-base, .gradient-text, .flex-center, .icon-box, .page-wrap
 * Homepage CSS Module
 * ================================================================ */

/* ── Card base (shared card pattern) ──────────────────────── */
.card-base {
  background: var(--bg-white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  transition: transform var(--ease-lg), box-shadow var(--ease-lg);
}
.card-base:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* ── Gradient text ──────────────────────── */
.gradient-text {
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ── Flex center ──────────────────────── */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Icon box (48px circle, accent bg) ──────────────────────── */
.icon-box {
  width: 48px;
  height: 48px;
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,107,0,0.1);
  color: var(--accent);
  flex-shrink: 0;
}

/* ── Page wrap (max-width container) ──────────────────────── */
.page-wrap {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
.page-wrap-sm {
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}
.page-wrap-md {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}