/* ══════════════════════════════════════════════════════════════
   PROMO PAGE — design variant A
   Layered on top of styles.css. Colors only from design tokens.
   Variant A prefix: .pa-
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   VARIANT A — Asset Hub (split hero + preview-led kit cards)
   ══════════════════════════════════════════════════════════════ */

.pa-hero {
  position: relative;
  padding: calc(var(--header-h) + 72px) 0 48px;
  overflow: hidden;
}
.pa-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(55% 80% at 20% 0%, rgba(86, 45, 191, 0.32) 0%, rgba(16, 10, 41, 0) 70%);
  pointer-events: none;
}

.pa-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

.pa-hero__title {
  font-size: clamp(32px, 4.4vw, 48px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.8px;
  color: var(--text-white);
  margin-bottom: 18px;
}

.pa-hero__subtitle {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-caption);
  max-width: 540px;
  margin-bottom: 30px;
}
/* No trailing gap when the copy is the last thing in the hero column */
.pa-hero__subtitle:last-child { margin-bottom: 0; }

/* Same key visual the home and Commission heroes use */
.pa-hero__art { display: flex; justify-content: center; }

/* ── Kit cards ── */
.pa-kits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}

.pa-kit {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-modal);
  background: var(--surface-1);
  border: 1px solid var(--glass-stroke);
  backdrop-filter: blur(var(--surface-blur));
  -webkit-backdrop-filter: blur(var(--surface-blur));
  box-shadow: var(--shadow-4);
  overflow: hidden;
}

/* The preview stands in for the icon — showing the asset beats labelling it.
   A fixed height is what keeps the three card titles on one line across the grid. */
.pa-kit__preview {
  position: relative;
  height: 192px;
  overflow: hidden;
  /* Shows through while the artwork loads */
  background: var(--surface-2);
  border-bottom: 1px solid rgba(105, 65, 204, 0.22);
}
.pa-kit__img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The kit artwork is dark at the bottom edge already — this carries it into the
   card body so the seam does not read as a hard line */
.pa-kit__preview::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 10, 41, 0) 55%, rgba(16, 10, 41, 0.55) 100%);
}

.pa-kit__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 24px 24px;
  flex: 1;
}
.pa-kit__title { font-size: 20px; font-weight: 700; color: var(--text-white); }
.pa-kit__text  { font-size: 14px; line-height: 1.6; color: var(--text-caption); flex: 1; }
.pa-kit__body .btn { margin-top: 6px; align-self: flex-start; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .pa-hero__grid { grid-template-columns: 1fr; gap: 44px; }
  .pa-hero__subtitle { max-width: none; }
  .pa-kits { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .pa-hero { padding-top: calc(var(--header-h) + 64px); }
  .pa-kits { grid-template-columns: 1fr; max-width: 480px; }
}