/* =============================================================
   PRODUCTS — the catalogue page.
   Loaded after styles.css + styles-nexus.css, so every colour here
   resolves through the nexus token layer. No raw hex: a value that
   is not a token will not follow the theme.
   ============================================================= */

/* ---------- page hero (compact; no 3D stage) ---------- */
.phero { position: relative; padding-block: clamp(120px, 16vw, 190px) clamp(40px, 6vw, 70px); overflow: hidden; }
.phero__glow {
  position: absolute; inset: -20% -10% auto; height: 640px; pointer-events: none;
  background:
    radial-gradient(50% 60% at 22% 30%, rgba(123, 47, 247, 0.30), transparent 70%),
    radial-gradient(45% 55% at 78% 20%, rgba(0, 245, 255, 0.16), transparent 72%);
  filter: blur(30px);
}
.phero__inner { position: relative; max-width: 860px; }
.phero__title {
  font-family: var(--display); font-weight: 600; margin-top: 0.8rem;
  font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1.02; letter-spacing: -0.03em;
}
.phero__sub {
  margin-top: 1.4rem; color: var(--titanium-dim); font-weight: 300;
  font-size: clamp(1rem, 1.3vw, 1.16rem); max-width: 60ch; line-height: 1.65;
}

/* ---------- filter bar (progressive enhancement — cards show without JS) ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(28px, 4vw, 40px); }
.filters__btn {
  font: inherit; font-size: 0.82rem; font-weight: 500; letter-spacing: 0.02em;
  color: var(--titanium-dim); background: var(--glass); cursor: pointer;
  border: 1px solid var(--hair); border-radius: var(--r-pill);
  padding: 0.5rem 1.05rem; transition: all .35s var(--ease);
}
.filters__btn:hover { color: var(--titanium); border-color: var(--hair-strong); }
.filters__btn[aria-pressed="true"] {
  color: var(--obsidian); background: var(--ice-strong); border-color: var(--ice-strong);
}
.filters__btn i { font-style: normal; opacity: 0.55; margin-left: 0.45em; }

/* ---------- group heading ---------- */
.pgroup { padding-block: clamp(46px, 6vw, 76px) 0; }
.pgroup__head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  padding-bottom: clamp(20px, 2.6vw, 30px); border-bottom: 1px solid var(--hair); }
.pgroup__title { font-family: var(--display); font-weight: 600; letter-spacing: -0.01em;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem); }
.pgroup__note { color: var(--titanium-mut); font-size: 0.88rem; font-weight: 300; max-width: 54ch; }
.pgroup[hidden] { display: none; }

/* ---------- the grid ---------- */
.pgrid {
  display: grid; gap: 14px; margin-top: 22px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* ---------- a product card ---------- */
.prod {
  position: relative; display: flex; flex-direction: column; gap: 0.85rem;
  padding: 1.5rem 1.5rem 1.35rem;
  border: 1px solid var(--hair); background: var(--glass);
  backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
  transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.prod::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,0.05), transparent 42%);
}
.prod:hover { transform: translateY(-5px); border-color: var(--hair-strong); box-shadow: var(--shadow-card); }
.prod[hidden] { display: none; }

.prod__head { display: flex; align-items: center; gap: 0.7rem; position: relative; }
.prod__mark {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border: 1px solid var(--hair-strong); color: var(--ice-strong);
  font-family: var(--display); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em;
}
.prod__name { font-family: var(--display); font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
.prod__desc { color: var(--titanium-dim); font-size: 0.9rem; font-weight: 300; line-height: 1.6; flex: 1; }

.prod__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; padding-top: 0.9rem; border-top: 1px solid var(--hair); position: relative; }
.prod__stack { color: var(--titanium-mut); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; }
.prod__link { color: var(--ice-strong); font-size: 0.8rem; text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.35em; transition: gap .35s var(--ease); }
.prod__link:hover { gap: 0.6em; }
.prod__link[aria-disabled="true"] { color: var(--titanium-mut); pointer-events: none; }

/* ---------- status chip — one colour per state, everywhere ---------- */
.chip {
  margin-left: auto; flex: none; font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.28rem 0.6rem; border: 1px solid currentColor; border-radius: var(--r-pill);
}
.chip--live    { color: #4ade80; }
.chip--build   { color: var(--cyan-2); }
.chip--internal{ color: var(--titanium-mut); }

/* live dot */
.chip--live::before {
  content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; margin-right: 0.45em; vertical-align: 0.12em;
  box-shadow: 0 0 8px currentColor;
}

/* ---------- empty state for a filter that matches nothing ---------- */
.pempty { color: var(--titanium-mut); font-size: 0.92rem; padding-block: 60px; text-align: center; }
.pempty[hidden] { display: none; }

@media (max-width: 640px) {
  .pgrid { grid-template-columns: 1fr; }
}