// ─────────────────────────────────────────────────────────────────────────────
// Component: Surfaces
// File:      src/scss/patterns/_surfaces.scss
//
// Variants:  .panel .panel--overlay .drawer .modal .modal-backdrop .modal-panel
// Tokens:    --bg-surface, --bg-elevated, --bg-overlay, --border-default
//            --shadow-xl, --z-modal, --z-overlay
// Usage:     <div class="modal"><div class="modal-panel">…</div></div>
//
// Notes:     No drop shadows on cards — use border-lift.
//            Modal backdrop is rgba black at 0.6 — intentionally hardcoded.
// ─────────────────────────────────────────────────────────────────────────────

// ── Hero ──────────────────────────────────────────────────────────────────────
// Full-width section with dark gradient background + optional radial glow.
// Usage: <div class="hero hero--human"> ... </div>
.hero {
  position: relative;
  overflow: hidden;
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-base);

  &--human {
    background: linear-gradient(135deg,
      var(--bg-base) 0%,
      color-mix(in srgb, var(--color-accent) 4%, var(--bg-base)) 55%,
      var(--bg-base) 100%
    );
  }

  &--agent {
    background: linear-gradient(135deg,
      var(--bg-base) 0%,
      color-mix(in srgb, var(--color-purple) 5%, var(--bg-base)) 55%,
      var(--bg-base) 100%
    );
  }

  &--org {
    background: linear-gradient(135deg,
      var(--bg-base) 0%,
      color-mix(in srgb, var(--color-warning) 4%, var(--bg-base)) 55%,
      var(--bg-base) 100%
    );
  }

  &--explore {
    background: linear-gradient(135deg, var(--bg-base) 0%, var(--bg-hero-mid) 50%, var(--bg-base) 100%);
  }
}

// Ambient radial glow layer — place as first child: <div class="hero-glow hero-glow--human"></div>
.hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;

  &--human {
    background:
      radial-gradient(ellipse 60% 80% at 78% 40%, color-mix(in srgb, var(--color-accent) 8%, transparent) 0%, transparent 65%),
      radial-gradient(ellipse 35% 55% at 8% 75%,  color-mix(in srgb, var(--color-purple) 5%, transparent) 0%, transparent 60%);
  }

  &--agent {
    background:
      radial-gradient(ellipse 60% 80% at 78% 40%, color-mix(in srgb, var(--color-purple) 10%, transparent) 0%, transparent 65%),
      radial-gradient(ellipse 35% 55% at 8% 75%,  color-mix(in srgb, var(--color-accent)  5%, transparent) 0%, transparent 60%);
  }

  &--org {
    background:
      radial-gradient(ellipse 60% 80% at 78% 40%, color-mix(in srgb, var(--color-warning) 9%, transparent) 0%, transparent 65%),
      radial-gradient(ellipse 35% 55% at 8% 75%,  color-mix(in srgb, var(--color-success) 5%, transparent) 0%, transparent 60%);
  }

  &--explore {
    background:
      radial-gradient(ellipse 60% 80% at 70% 50%, color-mix(in srgb, var(--color-accent) 6%, transparent) 0%, transparent 70%),
      radial-gradient(ellipse 40% 60% at 10% 80%, color-mix(in srgb, var(--color-purple) 5%, transparent) 0%, transparent 60%);
  }
}

// Inner content row — max-width container inside a hero
.hero-inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-8) 0 var(--space-5);
  max-width: 1200px;
  margin: 0 auto;

  @media (max-width: 768px) {
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6) 0 var(--space-4);
  }

  // Centered variant — for full-width content like explore search
  &--center {
    max-width: 760px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-8) 0 var(--space-6);
  }
}

// Hero left content column — natural width, capped so it doesn't blow out
.hero__content {
  max-width: 560px;
  min-width: 0;

  h1 {
    font-size: clamp(28px, 5vw, 44px);
    font-weight: 300;
    color: var(--color-accent);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 var(--space-4);
  }
}

// Hero action buttons row
.hero__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

// Hero stats column — e.g. stat pills in MCP hero
.hero__stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex-shrink: 0;
  margin-left: auto;
}

// Hero subtitle — descriptive text below the h1
.hero__sub {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 520px;
  margin: 0 0 var(--space-4);
}

// Bottom metadata strip inside a hero
.hero-strip {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  max-width: 1200px;
  margin: 0 auto;
  font-size: var(--text-xs);
}

// Hero eyebrow — row above display name in hero
.hero-eyebrow { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); flex-wrap: wrap; }

// Hero strip items — metadata within .hero-strip
.strip-item  { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.strip-label { color: var(--text-muted); font-size: 11px; }
.strip-val   { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }
.strip-val--mono { word-break: break-all; overflow-wrap: anywhere; }

// Stacked strip — vertical layout for profile identity strip
.hero-strip--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2) 0;
}
.strip-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  min-width: 0;
}
.strip-sep   { color: var(--border-default); user-select: none; font-size: 14px; line-height: 1; }
.strip-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
  border-radius: 4px;
  padding: 1px 6px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.panel--overlay {
  background: var(--bg-overlay);
}

// Modal
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);

  &.is-open {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: var(--z-overlay);
}

.modal-panel {
  position: relative;
  z-index: var(--z-modal);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  padding: var(--space-6);
  max-width: 560px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.modal-footer {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-default);
}

// Comment blocks
.comment-block {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-base);
  overflow: hidden;
  margin-bottom: var(--space-3);
}

.comment-header-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-default);
  font-size: 13px;
}

.comment-body-text {
  padding: var(--space-3);
  font-size: 13px;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}