/* =========================
   CATEGORY GRID
========================= */

.category-card-grid {

  display: grid;

  grid-template-columns:
    repeat(auto-fit, minmax(250px, 1fr));

  gap: 1rem;

  align-items: stretch;

}

/* =========================
   CATEGORY CARD
========================= */

.category-card {

  position: relative;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: flex-start;

  min-height: 92px;

  padding:
    20px 22px;

  border-radius: 20px;

  text-decoration: none;

  background:
    #ffffff;

  border:
    1px solid #e2e8f0;

  box-shadow:
    0 1px 2px rgba(15,23,42,0.04),
    0 8px 24px rgba(15,23,42,0.05);

  transition:
    transform 220ms cubic-bezier(.22,1,.36,1),
    box-shadow 220ms cubic-bezier(.22,1,.36,1),
    border-color 180ms ease,
    background-color 180ms ease;

}

/* =========================
   TOP ACCENT LINE
========================= */

.category-card::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 3px;

  background:
    linear-gradient(
      90deg,
      #3b82f6,
      #60a5fa,
      #38bdf8
    );

  opacity: 0;

  transition:
    opacity 180ms ease;

}

/* =========================
   CARD TITLE
========================= */

.category-card {

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    sans-serif;

  font-size: 1rem;

  font-weight: 650;

  line-height: 1.4;

  letter-spacing: -0.015em;

  color:
    #0f172a;

}

/* =========================
   CARD SUBTLE META STYLE
========================= */

.category-card span {

  margin-top: 4px;

  font-size: 0.82rem;

  font-weight: 500;

  color:
    #64748b;

}

/* =========================
   HOVER
========================= */

.category-card:hover {

  transform:
    translateY(-3px);

  border-color:
    #bfdbfe;

  background:
    #ffffff;

  box-shadow:
    0 20px 40px rgba(15,23,42,0.08),
    0 6px 14px rgba(59,130,246,0.08);

}

/* SHOW ACCENT */

.category-card:hover::before {

  opacity: 1;

}

/* =========================
   ACTIVE CARD
========================= */

.category-card.is-active {

  background:
    linear-gradient(
      180deg,
      #2563eb,
      #1d4ed8
    );

  border-color:
    #2563eb;

  box-shadow:
    0 20px 40px rgba(37,99,235,0.22);

  color:
    #ffffff;

}

/* ACTIVE TEXT */

.category-card.is-active span {

  color:
    rgba(255,255,255,0.78);

}

/* ACTIVE ACCENT */

.category-card.is-active::before {

  opacity: 1;

  background:
    rgba(255,255,255,0.92);

}

/* =========================
   FOCUS
========================= */

.category-card:focus-visible {

  outline:
    2px solid #60a5fa;

  outline-offset:
    3px;

}

/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

  .category-card-grid {

    grid-template-columns:
      1fr;

  }

  .category-card {

    min-height: 80px;

    padding:
      18px 18px;

    border-radius:
      18px;

    font-size:
      0.94rem;

  }

}