/* ==================================================================
   JUSTPIXEL
   SOFTWARE LIBRARY
   ================================================================== */

/* ==================================================================
   HEADER
   ================================================================== */

.jp-library-header {
  max-width: 760px;

  margin-bottom: var(--jp-space-8);
}

/* ==================================================================
   CONTROLS
   ================================================================== */

.jp-library-controls {
  display: flex;
  flex-direction: column;

  gap: var(--jp-space-4);

  margin-bottom: var(--jp-space-8);
}

/* ------------------------------------------------------------------
   SEARCH
   ------------------------------------------------------------------ */

.jp-library-search {
  width: 100%;
}

.jp-library-search-input {
  min-height: 50px;
}

/* ------------------------------------------------------------------
   FILTERS
   ------------------------------------------------------------------ */

.jp-library-filters {
  display: flex;
  flex-wrap: wrap;

  gap: var(--jp-space-2);
}

.jp-library-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.55rem 0.9rem;

  border: 1px solid var(--jp-border);
  border-radius: var(--jp-radius-pill);

  background: var(--jp-surface);

  color: var(--jp-text-muted);

  font: inherit;
  font-size: var(--jp-text-sm);
  font-weight: var(--jp-weight-medium);

  cursor: pointer;

  transition:
    background-color var(--jp-transition-fast),
    border-color var(--jp-transition-fast),
    color var(--jp-transition-fast),
    transform var(--jp-transition-fast);
}

.jp-library-filter:hover {
  background: var(--jp-surface-hover);

  border-color: var(--jp-border-strong);

  color: var(--jp-text);

  transform: translateY(-1px);
}

.jp-library-filter.is-active {
  background: var(--jp-primary);

  border-color: var(--jp-primary);

  color: var(--jp-text-inverse);
}

.jp-library-filter:focus-visible {
  outline: none;

  box-shadow: var(--jp-focus-ring);
}

/* ==================================================================
   LIBRARY GRID
   ================================================================== */

.jp-library-grid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: var(--jp-space-6);
}

/* ==================================================================
   LIBRARY CARD
   ================================================================== */

.jp-library-card {
  display: flex;
  flex-direction: column;

  min-width: 0;
  min-height: 100%;

  overflow: hidden;

  border: 1px solid var(--jp-border);
  border-radius: var(--jp-radius-lg);

  background: var(--jp-surface);

  color: var(--jp-text);

  text-decoration: none;

  box-shadow: var(--jp-shadow-sm);

  transition:
    transform var(--jp-transition),
    border-color var(--jp-transition),
    box-shadow var(--jp-transition),
    background-color var(--jp-transition);
}

.jp-library-card:hover {
  transform: translateY(-4px);

  border-color: var(--jp-border-strong);

  background: var(--jp-surface);

  box-shadow: var(--jp-shadow-hover);

  color: var(--jp-text);

  text-decoration: none;
}

/* ==================================================================
   CARD VISUAL
   ================================================================== */

.jp-library-card-visual {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 170px;

  padding: var(--jp-space-6);

  border-bottom: 1px solid var(--jp-border);

  background: linear-gradient(
    135deg,
    var(--jp-surface-accent),
    var(--jp-surface)
  );
}

/* ------------------------------------------------------------------
   CARD ICON
   ------------------------------------------------------------------ */

.jp-library-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 82px;
  height: 82px;

  border: 1px solid var(--jp-info-border);
  border-radius: var(--jp-radius-lg);

  background: var(--jp-surface);

  color: var(--jp-primary);

  font-size: 2rem;
  font-weight: var(--jp-weight-bold);

  box-shadow: var(--jp-shadow-sm);
}

.jp-library-card-icon-code {
  font-family: var(--jp-font-mono);

  font-size: 1.45rem;
}

/* ==================================================================
   CARD CONTENT
   ================================================================== */

.jp-library-card-content {
  display: flex;
  flex: 1;
  flex-direction: column;

  padding: var(--jp-space-5);
}

/* ------------------------------------------------------------------
   CATEGORY
   ------------------------------------------------------------------ */

.jp-library-card-category {
  margin-bottom: var(--jp-space-2);

  color: var(--jp-primary);

  font-size: var(--jp-text-xs);
  font-weight: var(--jp-weight-bold);

  text-transform: uppercase;

  letter-spacing: 0.08em;
}

/* ------------------------------------------------------------------
   TITLE
   ------------------------------------------------------------------ */

.jp-library-card h2 {
  margin: 0 0 var(--jp-space-3);

  color: var(--jp-text);

  font-size: var(--jp-text-xl);
}

/* ------------------------------------------------------------------
   DESCRIPTION
   ------------------------------------------------------------------ */

.jp-library-card p {
  margin: 0;

  color: var(--jp-text-muted);

  line-height: var(--jp-leading-relaxed);
}

/* ==================================================================
   CARD HEADING ROW
   ================================================================== */

.jp-library-card-heading-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: var(--jp-space-3);
}

/* ==================================================================
   TAGS
   ================================================================== */

.jp-library-card-tags {
  display: flex;
  flex-wrap: wrap;

  gap: var(--jp-space-2);

  margin-top: var(--jp-space-4);
}

/* ==================================================================
   STATUS
   ================================================================== */

.jp-library-status {
  flex-shrink: 0;
}

/* ==================================================================
   CARD FOOTER
   ================================================================== */

.jp-library-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: var(--jp-space-4);

  margin-top: auto;

  padding-top: var(--jp-space-5);

  color: var(--jp-primary);

  font-size: var(--jp-text-sm);
  font-weight: var(--jp-weight-semibold);
}

/* ==================================================================
   DISABLED / COMING SOON
   ================================================================== */

.jp-library-card-disabled {
  cursor: default;

  opacity: 0.66;
}

.jp-library-card-disabled:hover {
  transform: none;

  border-color: var(--jp-border);

  background: var(--jp-surface);

  box-shadow: var(--jp-shadow-sm);
}

/* ==================================================================
   FILTERED CARDS
   ================================================================== */

.jp-library-card[hidden] {
  display: none;
}

/* ==================================================================
   NO RESULTS
   ================================================================== */

.jp-library-no-results {
  padding: var(--jp-space-12) var(--jp-space-6);

  text-align: center;

  border: 1px dashed var(--jp-border-strong);
  border-radius: var(--jp-radius-lg);

  background: var(--jp-surface-soft);
}

.jp-library-no-results h2 {
  margin-bottom: var(--jp-space-2);
}

/* ==================================================================
   TABLET
   ================================================================== */

@media (max-width: 1000px) {
  .jp-library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

@media (max-width: 650px) {
  .jp-library-grid {
    grid-template-columns: 1fr;
  }

  .jp-library-card-visual {
    min-height: 140px;
  }

  .jp-library-filter {
    padding: 0.5rem 0.75rem;
  }
}