/* redesign-hero-v1 — W-68-1 — Public-profile hero block redesign. */
/*
 * Planning: .archon/queued-builds/WAVE-68-public-profile-redesign.md
 *
 * Targets the redesigned markup in src/views/public/profile.ejs:
 *   .profile__hero            — outer hero section
 *   .profile__hero-portrait   — left/top column carrying the photo
 *   .profile__hero-body       — right/bottom column carrying the copy
 *   .profile__hero-eyebrow    — small "Saadjie" label above the name
 *   .profile__photo           — square or circular avatar
 *   .profile__name            — h1 display name
 *   .profile__welcome         — welcome paragraph (or italic fallback)
 *
 * WHY this is a NEW stylesheet (not another override in the legacy
 * public-profile.css): Phase D of the redesign system replaces the
 * ad-hoc per-surface CSS with focused component stylesheets that sit
 * cleanly on the token + primitive layers (W56–W67). Carving the hero
 * into its own file means a future hero rotation touches ONE file and
 * the W68 audit can grep the redesign-hero-v1 marker without parsing
 * the legacy aggregate.
 *
 * WHY the parent's themeColor is read through a CSS custom property
 * (--profile-theme) stamped on the inline style attribute by profile.ejs
 * (vs. the legacy data-hero-theme attr() approach): attr() for
 * arbitrary values still has spotty browser support outside content;
 * a custom-property forward is universally supported and lets every
 * tinted accent inside the hero (border, glow, eyebrow) read from
 * the same source of truth. The data-hero-theme attribute is left
 * in place as the machine-readable mirror that the W11 tests assert on.
 *
 * WHY a token-only colour palette: ANTI-RAW-VALUE proof-gate (W56)
 * rejects hex / rgba in any non-token file. The one exception in this
 * stylesheet is the inline-stamped --profile-theme which carries the
 * parent's chosen hex — that hex lives in the EJS template (per-render),
 * not in the static CSS, so the gate stays clean.
 *
 * WHY mobile-first stack (portrait on top): 320–414px viewports are
 * the load-bearing target. The hero stacks portrait → eyebrow →
 * name → welcome with centred text; the tablet+ breakpoint pivots
 * to a two-column layout (portrait left, copy right).
 *
 * FLOW: tokens.css → spacing.css → radius-shadow.css → motion.css →
 *       cards.css → profile-hero.css (this file) → page-feature CSS.
 *
 * CONSTRAINT: WCAG 1.4.11 — the hero backdrop tint is layered OVER
 * the brand-light surface, so even when --profile-theme falls back to
 * the legacy #3366aa default the text contrast stays well above 4.5:1.
 * Never push the tint above ~12% alpha or the body copy will fail AA.
 */

/* ---------- Hero section root ---------- */
.profile__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-5);
  background-color: var(--color-brand-lighter);
  /* WHY a hairline border in brand-light + a soft shadow: lifts the
     hero off the page surface (--color-bg) without competing with the
     running-total panel below. Mirrors the .card resting elevation. */
  border: 1px solid var(--color-brand-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-align: center;
  /* WHY position:relative on the section root: the theme-tinted glow
     below uses an ::before pseudo-element pinned to the hero's bounds. */
  position: relative;
  overflow: hidden;
  /* WHY a default --profile-theme: profile.ejs always stamps an inline
     style with the parent's hex, but a defensive default keeps the
     selector painting if a future template forgets the inline forward. */
  --profile-theme: var(--color-brand);
}

/* WHY a tinted glow via ::before (not a flat background-color): a flat
   theme background would force every text-on-theme pairing to clear AA
   against an arbitrary parent-chosen hex. A soft glow keeps the surface
   readable (brand-lighter under text) while still telegraphing the
   parent's chosen accent at the visual edge. */
.profile__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at top right,
      var(--profile-theme) 0%,
      transparent 60%
    );
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}

.profile__hero > * {
  /* Sits the actual content above the tinted glow. */
  position: relative;
  z-index: 1;
}

.profile__hero--placeholder {
  background-color: var(--color-bg-subtle);
  border-color: var(--color-border-subtle);
}

.profile__hero--placeholder::before {
  /* Placeholder hero stays quiet — no theme glow until approval. */
  display: none;
}

/* ---------- Portrait column ---------- */
.profile__hero-portrait {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* WHY a fluid clamp() for the photo: at 320px the photo eats ~40vw so
   the rest of the hero copy still fits; on a 768px tablet the photo
   anchors the left column at a roomier 200px. Avoids a media-query
   ladder for sizing. */
.profile__photo {
  width: clamp(120px, 40vw, 200px);
  height: clamp(120px, 40vw, 200px);
  border-radius: var(--radius-circle);
  background-color: var(--color-bg);
  object-fit: cover;
  /* WHY a token-bound border + a coloured ring via box-shadow that
     reads the parent's theme: a single border colour would force a
     compromise (theme vs. legibility). Stacking a hairline neutral
     border with a soft theme-tinted ring gives a crisp edge AND a
     subtle accent. */
  border: 2px solid var(--color-bg);
  box-shadow:
    0 0 0 4px var(--color-brand-light),
    var(--shadow-md);
}

.profile__photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  background-color: var(--color-bg-subtle);
  text-transform: uppercase;
  line-height: 1;
}

/* ---------- Body column ---------- */
.profile__hero-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
  /* WHY a max-width in ch: keeps the welcome paragraph readable.
     60ch is the established public-reading column upper bound. */
  max-width: 60ch;
}

.profile__hero-eyebrow {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand-dark);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.profile__name {
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
  word-break: break-word;
}

.profile__welcome {
  margin: 0;
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
  color: var(--color-text);
}

.profile__welcome--empty {
  color: var(--color-text-muted);
  font-style: italic;
}

/* ---------- Placeholder copy ---------- */
.profile__placeholder-notice {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
}

.profile__placeholder-meta {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
}

/* ---------- Tablet + desktop pivot ----------
   WHY 640px: the standard sm/md breakpoint. Below this we keep the
   mobile-first stacked layout (portrait → name → welcome, centred).
   At 640px+ the hero pivots to a portrait-left / copy-right layout
   that reads as a brand banner. */
@media (min-width: 640px) {
  .profile__hero {
    flex-direction: row;
    align-items: center;
    text-align: start;
    gap: var(--space-6);
    padding: var(--space-7) var(--space-6);
  }

  .profile__hero-body {
    align-items: flex-start;
  }

  .profile__name {
    font-size: var(--font-size-3xl);
  }
}

/* WHY a second breakpoint at 960px: gives the headline display size
   on desktops without exceeding the container reading column. */
@media (min-width: 960px) {
  .profile__name {
    font-size: var(--font-size-4xl);
  }
}