/* =========================
   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;

  }

}

/* Production collection pages */
.category-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.category-card {
  min-height: 112px;
  justify-content: flex-start;
}

.category-card::after {
  content: "Open";
  margin-top: 12px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--qt-primary, #2563eb);
}

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

/* ==================================================
   Production Category / Tool Collection Surface
================================================== */

.page-content > .section:first-child {
  margin-top: 0 !important;
}

.page-content > .section:first-child .section-header {
  position: relative;
  overflow: hidden;
  max-width: none !important;
  padding: clamp(24px, 4vw, 38px);
  border: 1px solid #dfe7f2;
  border-radius: 24px;
  background:
    radial-gradient(520px 220px at 100% 0%, rgba(15, 118, 110, 0.12), transparent 72%),
    radial-gradient(480px 220px at 0% 100%, rgba(37, 99, 235, 0.12), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,251,255,0.9));
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
}

.page-content > .section:first-child .section-header::before {
  content: "Directory";
  display: inline-flex;
  width: fit-content;
  margin-bottom: 12px;
  padding: 6px 10px;
  border: 1px solid #cbe2df;
  border-radius: 999px;
  background: #eefbf8;
  color: #0f5f59;
  font-size: 0.74rem;
  line-height: 1;
  font-weight: 820;
  text-transform: uppercase;
}

.page-content > .section:first-child .section-header h1 {
  max-width: 780px;
  font-size: 2.5rem !important;
  line-height: 1.04 !important;
}

.page-content > .section:first-child .section-header p {
  max-width: 760px;
  color: #5d6b82 !important;
  font-size: clamp(0.98rem, 1.8vw, 1.12rem) !important;
}

.category-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 16px !important;
}

.category-card {
  min-height: 150px !important;
  padding: 18px !important;
  border: 1px solid #dfe7f2 !important;
  border-radius: 16px !important;
  background:
    radial-gradient(260px 130px at 100% 0%, rgba(37, 99, 235, 0.1), transparent 72%),
    #ffffff !important;
  color: #101828 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}

.category-card:hover {
  border-color: #b9cdf8 !important;
  background:
    radial-gradient(260px 130px at 100% 0%, rgba(15, 118, 110, 0.12), transparent 72%),
    #ffffff !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.09) !important;
  transform: translateY(-3px) !important;
}

.category-card::before {
  height: 4px !important;
  opacity: 1 !important;
  background: linear-gradient(90deg, #2563eb, #0f766e) !important;
}

.category-card::after {
  content: "Open tool";
  margin-top: auto;
  padding: 7px 10px;
  border-radius: 999px;
  background: #eaf1ff;
  color: #2563eb;
  font-size: 0.76rem;
  font-weight: 820;
}

.category-card span,
.category-card small {
  color: #5d6b82 !important;
  line-height: 1.55;
}

@media (max-width: 640px) {
  .page-content > .section:first-child .section-header,
  .category-card {
    border-radius: 16px !important;
  }
}