/* ACP Portal — Page Hero component
 *
 * Generalizes the green banner from /portal/uploader/ for any page that
 * needs a "you are here + key numbers at a glance" header. Used by:
 *   - /portal/uploader/         (role-uploader green)
 *   - /portal/content           (default accent blue)
 *   - /portal/access            (default accent blue)
 *
 * Variants come from CSS var overrides on the .acp-hero element via class:
 *   .acp-hero            → default blue
 *   .acp-hero-uploader   → green (inherits via body.role-uploader anyway)
 *
 * The hero auto-stacks vertically on mobile (<640px).
 */
.acp-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  color: #fff;
  /* Default: subscriber portal accent. role-uploader body class overrides. */
  background: linear-gradient(135deg, var(--accent) 0%, #1d4ed8 100%);
  margin-bottom: var(--space-6);
}
body.role-uploader .acp-hero {
  background: var(--topbar-bg-grad, linear-gradient(135deg, #14532d 0%, #166534 100%));
}

.acp-hero-left {
  flex: 1 1 auto;
  min-width: 0;
}
.acp-hero-title {
  font: 600 var(--text-2xl) / 1.2 var(--font-display);
  margin: 0 0 var(--space-2);
  color: #fff;
}
.acp-hero-sub {
  font-size: var(--text-sm);
  line-height: 1.6;
  opacity: 0.9;
  margin: 0;
  max-width: 48em;
}

.acp-hero-stats {
  display: flex;
  gap: var(--space-8);
  flex-shrink: 0;
}
.acp-hero-stat {
  text-align: right;
}
.acp-hero-stat-num {
  font: 600 var(--text-3xl) / 1 var(--font-display);
  display: block;
}
.acp-hero-stat-label {
  font-size: var(--text-xs);
  opacity: 0.85;
  letter-spacing: 0.02em;
}

@media (max-width: 640px) {
  .acp-hero {
    flex-direction: column;
    gap: var(--space-4);
  }
  .acp-hero-stats {
    width: 100%;
    justify-content: space-between;
    gap: var(--space-4);
  }
  .acp-hero-stat {
    text-align: left;
  }
}