/* ==========================
   Tools Cards
========================== */

.tool-card {
  position: relative;
  isolation: isolate;

  display: flex;
  flex-direction: column;
  gap: var(--space-xs);

  min-height: 15rem;
  padding: var(--space-md);

  border: 1px solid rgba(116, 153, 255, 0.24);
  border-radius: var(--radius-lg);

  background:
    radial-gradient(circle at top left, rgba(116, 153, 255, 0.18), transparent 36%),
    radial-gradient(circle at bottom right, rgba(142, 92, 255, 0.1), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)), var(--color-surface);

  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);

  overflow: hidden;

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.tool-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;

  width: 0.25rem;

  background: var(--gradient-accent-blue);

  opacity: 0.9;
  z-index: -2;
}

.tool-card .accent-fill {
  position: absolute;
  inset: auto auto 0 0;

  width: 0.25rem;
  height: 0%;

  background: var(--gradient-accent-purple);

  transition: height 320ms ease;

  z-index: -1;
}

.tool-card:hover .accent-fill,
.tool-card:focus-within .accent-fill {
  height: 100%;
}

.tool-card:hover::before,
.tool-card:focus-within::before {
  background-size:
    100% 100%,
    100% 100%;
}

.tool-card::after {
  content: "";
  position: absolute;
  inset: 0;

  border-radius: inherit;

  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 28%),
    repeating-radial-gradient(
      circle at 0 0,
      rgba(255, 255, 255, 0.06),
      rgba(255, 255, 255, 0.06) 1px,
      transparent 1px,
      transparent 4px
    );

  background-size:
    100% 100%,
    800px 800px;

  background-position:
    center,
    left -200px top -150px;

  opacity: 0.65;
  pointer-events: none;
  z-index: -1;
}

.tool-card:hover,
.tool-card:focus-within {
  transform: translateY(-0.35rem) scale(1.01);
  border-color: rgba(116, 153, 255, 0.6);

  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.38),
    0 0 42px rgba(116, 153, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.tool-card .status-badge,
.tool-card .eyebrow,
.tool-card h3,
.tool-card p:not(.eyebrow),
.tool-link {
  margin-left: var(--space-xs);
}

.tool-card .status-badge {
  align-self: flex-start;
}

.tool-card h3 {
  margin-top: var(--space-xxs);
  font-size: clamp(1.25rem, 5vw, 1.6rem);
}

.tool-card p:not(.eyebrow) {
  color: var(--color-text-muted);
}

.tool-link {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: fit-content;

  margin-top: auto;
  padding: 0.8rem 1.15rem;

  border: 1px solid rgba(116, 153, 255, 0.22);
  border-radius: var(--radius-pill);

  color: var(--color-text);

  font-weight: 700;
  text-decoration: none;

  background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)), rgba(116, 153, 255, 0.08);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 20px rgba(0, 0, 0, 0.16);

  backdrop-filter: blur(12px);

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.tool-link:hover,
.tool-link:focus {
  transform: translateY(-0.125rem);

  border-color: rgba(145, 190, 255, 0.5);

  background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)), rgba(116, 153, 255, 0.14);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 28px rgba(0, 0, 0, 0.24),
    0 0 24px rgba(116, 153, 255, 0.14);
}

/* Temporary styling - refactor later */
.tools-page .card-layout + .card-layout {
  padding-top: var(--space-xl);
}

/* ==========================
   Desktop
========================== */

@media (min-width: 1024px) {
  .tool-card {
    min-height: 16.5rem;
    padding: var(--space-lg);
  }
}