/* skills-catalog.css
   The Skills Marketplace catalog. Sits between the RELAY reveal and the
   BACKBONE chapter on the homepage. Positions BACKBONE as the first
   product on the shelf, not the brand. Six cards on day one; designed to
   grow with the Year-1 cadence (4 ship-grade + 4 design-grade per the
   Skills Factory doctrine). Reuses existing brand tokens; introduces no
   new design language.
   Apache 2.0 PulsarOS Intelligence Inc. */

.skills-catalog {
  position: relative;
  padding: clamp(80px, 12vw, 160px) 0 clamp(72px, 11vw, 144px);
  background: var(--ink-950);
  border-block: 1px solid color-mix(in oklab, var(--ink-100) 8%, transparent);
}

.skills-catalog__head {
  max-width: var(--container);
  margin: 0 auto clamp(48px, 6vw, 80px);
  padding-inline: var(--gutter);
  display: grid;
  gap: 18px;
  text-align: left;
}
.skills-catalog__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-300);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.skills-catalog__eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--ember);
  box-shadow: 0 0 10px color-mix(in oklab, var(--ember) 60%, transparent);
}
.skills-catalog__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 88px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.018em;
  color: var(--ink-0);
  margin: 0;
  max-width: 22ch;
}
.skills-catalog__lede {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.55;
  color: var(--ink-100);
  max-width: 56ch;
  margin: 0;
}

.skills-catalog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
@media (max-width: 980px) { .skills-catalog__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .skills-catalog__grid { grid-template-columns: 1fr; } }

.skill-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  background: color-mix(in oklab, var(--ink-900) 92%, var(--paper) 4%);
  border: 1px solid color-mix(in oklab, var(--ink-100) 8%, transparent);
  border-radius: 14px;
  padding: 26px 24px 22px;
  transition:
    transform 360ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 240ms linear,
    box-shadow 360ms cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  color: inherit;
  min-height: 220px;
}
.skill-card:hover,
.skill-card:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--ember) 35%, transparent);
  box-shadow:
    0 18px 40px -28px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 color-mix(in oklab, var(--ink-100) 4%, transparent);
}
.skill-card:focus-visible { outline: none; }

.skill-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: start;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-300);
  padding: 4px 9px 4px 7px;
  border: 1px solid color-mix(in oklab, var(--ink-100) 8%, transparent);
  border-radius: 999px;
  background: color-mix(in oklab, var(--ink-100) 3%, transparent);
}
.skill-card__chip[data-status="shipped"] { color: var(--ember); border-color: color-mix(in oklab, var(--ember) 30%, transparent); }
.skill-card__chip[data-status="new"] { color: var(--signal, #6affb0); border-color: color-mix(in oklab, var(--signal, #6affb0) 30%, transparent); }
.skill-card__chip[data-status="preview"] { color: var(--ink-300); }
.skill-card__chip::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 999px;
  background: currentColor;
}

.skill-card__name {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--ink-0);
  margin: 4px 0 4px;
}
.skill-card__tagline {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-100);
  margin: 0;
}
.skill-card__cta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ember);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.skill-card__cta::after {
  content: "→";
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.skill-card:hover .skill-card__cta::after,
.skill-card:focus-visible .skill-card__cta::after {
  transform: translateX(4px);
}

.skills-catalog__foot {
  max-width: var(--container);
  margin: clamp(40px, 5vw, 64px) auto 0;
  padding-inline: var(--gutter);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-300);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.skills-catalog__foot span::before {
  content: "·";
  margin-right: 22px;
  color: color-mix(in oklab, var(--ink-300) 60%, transparent);
}
.skills-catalog__foot span:first-child::before { display: none; }

@media (prefers-reduced-motion: reduce) {
  .skill-card,
  .skill-card__cta::after {
    transition: none;
  }
}