/* ===========================================================
   Products directory page styles (/products/)
   Compact 3-up card grid following the /docs/ hub shape.
   Each card carries a real product wordmark, a one-line eyebrow,
   a 2-3 sentence summary, and a row of link chips.
   =========================================================== */

/* ── HERO ── */
.prod-hero {
  padding: 100px 0 60px;
  border-bottom: 1px solid var(--border2);
  position: relative; z-index: 1;
}
.prod-hero-inner {
  max-width: 1440px; /* matches .container and the header edge (was 1280, 2026-09-14) */ margin: 0 auto; padding: 0 40px;
}
.prod-hero-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--lavender);
  margin-bottom: 16px; display: flex; align-items: center; gap: 10px;
}
.prod-hero-eyebrow::before {
  content: ''; display: block; width: 20px; height: 1px; background: var(--violet);
}
.prod-hero-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 600; line-height: 1.06;
  letter-spacing: -0.02em; color: var(--text);
  margin-bottom: 16px;
}
.prod-hero-desc {
  font-size: 17px; color: var(--text2);
  line-height: 1.65; max-width: 600px;
}

/* ── SECTION HEADERS + GRID ── */
.prod-grid-section {
  position: relative; z-index: 1;
  padding: 64px 0 100px;
}
.prod-grid-inner {
  max-width: 1440px; margin: 0 auto; padding: 0 40px;
}
.prod-section-label {
  font-size: 13px; font-weight: 600; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--lavender);
  margin: 0 0 28px;
  display: flex; align-items: center; gap: 14px;
}
.prod-section-label::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.prod-section-label + .prod-section-label,
.prod-grid + .prod-section-label { margin-top: 56px; }

.prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

/* ── CARD ── */
.prod-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 26px 22px;
  display: flex; flex-direction: column;
  transition: border-color 0.15s;
}
.prod-card:hover {
  border-color: rgba(120,74,157,0.4);
}

.prod-card-mark {
  height: 30px;
  display: flex; align-items: center;
  margin-bottom: 18px;
}
.prod-card-mark .pwm-svg {
  height: 30px;
  width: auto;
  display: block;
  max-width: 100%;
}

.prod-card-eyebrow {
  font-size: 10px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--lavender);
  margin-bottom: 12px;
}

.prod-card-summary {
  font-size: 14.5px; color: var(--text2);
  line-height: 1.65;
  margin-bottom: 22px;
  flex: 1;
}

.prod-card-info,
.prod-card-actions {
  display: flex; flex-wrap: wrap; gap: 8px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin-top: 16px;
}

/* Two button treatments mirroring .vc-platform-btn from orbit.css.
   Info row gets the secondary look (transparent + lavender border).
   Action row gets the primary look (violet bg, white text). */
.prod-link-info,
.prod-link-action {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Gabarito', sans-serif;
  font-size: 12px; font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  text-decoration: none !important;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.prod-link-info svg,
.prod-link-action svg {
  flex-shrink: 0; display: block;
}

/* Secondary (Overview, Docs) */
.prod-link-info {
  background: transparent;
  color: var(--text2) !important;
  border: 1px solid var(--lavender);
}
.prod-link-info:hover {
  border-color: var(--violet);
  color: var(--text) !important;
}
.prod-link-info:visited { color: var(--text2) !important; }
[data-theme="light"] .prod-link-info { border-color: rgba(107,58,154,0.45); }

/* Primary (Web, macOS, iOS, downloads, etc.) */
.prod-link-action {
  background: var(--violet);
  color: #fff !important;
  border: 1px solid transparent;
}
.prod-link-action:hover {
  background: var(--violet-hover, #6a3d8a);
  color: #fff !important;
}
.prod-link-action:visited { color: #fff !important; }

/* Disabled action (Audit pre-1.0 launch) */
.prod-link-action--disabled,
.prod-link-action--disabled:hover {
  background: transparent;
  color: var(--text3) !important;
  border-color: var(--border2);
  cursor: not-allowed;
  font-style: italic;
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .prod-hero { padding: 72px 0 48px; }
  .prod-hero-inner { padding: 0 20px; }
  .prod-grid-inner { padding: 0 20px; }
  .prod-grid { grid-template-columns: 1fr; gap: 16px; }
  .prod-card { padding: 22px 20px 18px; }
  .prod-section-label + .prod-section-label,
  .prod-grid + .prod-section-label { margin-top: 40px; }
}

/* side padding steps with the header edge (theme.css --gut) */
@media (max-width: 860px) { .prod-hero-inner, .prod-grid-inner { padding: 0 20px; } }
@media (max-width: 480px) { .prod-hero-inner, .prod-grid-inner { padding: 0 16px; } }