/* LABEL: PILOT-READY
 *
 * css/community-profile-hero.css
 *
 * 2026-05-28 — Luke caught: the profile tile at the top of the
 * Community rail was rendering unstyled (no matching CSS rule
 * existed anywhere in the codebase). He showed a Gemini-style
 * reference: dark background, circular avatar, bold name, small
 * gray subtitle, gear icon on the right, compact one-line layout.
 *
 * This file is the home for those styles. Loaded after builder.css
 * so the --nav-bg / --nav-text / --amber tokens are in scope.
 *
 * Surfaces:
 *   .community-profile-hero          — the outer <a> tile
 *   .community-profile-hero--guest   — signed-out variant
 *   .community-profile-hero__main    — main click area (avatar + text)
 *   .community-profile-hero__avatar  — circular avatar (img or initial)
 *   .community-profile-hero__text    — name + subtitle column
 *   .community-profile-hero__title   — bold name line
 *   .community-profile-hero__sub     — subtitle (role / handle / CTA)
 *   .community-profile-hero__settings — gear icon button on the right
 *   .community-profile-hero__claim-link — inline "Pick URL" CTA
 *                                          (handle-less users)
 *
 * Design tokens — match the Gemini reference (image #53):
 *   - Background: dark navy gradient (uses --nav-bg as base; ramps
 *     toward black at the bottom so the tile feels grounded)
 *   - Text: cream/light tokens (--nav-text) for body, white-90 for
 *     the bold title
 *   - Accent: amber on hover/focus rings only (no decorative amber
 *     fills — keeps the chrome calm)
 *   - Radius: rounded-xl for the tile, rounded-full for avatar +
 *     gear button (matches the Gemini visual rhythm)
 */

.community-profile-hero {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  margin: 0.5rem;
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    var(--nav-bg, #1A1A2E) 0%,
    #0F0F1F 100%
  );
  color: var(--nav-text, #F5EDE0);
  text-decoration: none;
  transition: background 160ms ease, transform 80ms ease, box-shadow 160ms ease;
  /* Hairline border so the tile reads as a tile against the rail. */
  border: 1px solid rgba(232, 168, 56, 0.12);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
.community-profile-hero:hover {
  background: linear-gradient(
    180deg,
    #232342 0%,
    #14142a 100%
  );
  border-color: rgba(232, 168, 56, 0.32);
}
.community-profile-hero:focus-visible {
  outline: 2px solid var(--amber, #E8A838);
  outline-offset: 2px;
}

/* Inner click area (avatar + text). Keeps the gear button as a
   separate hit target — the user can tap the body to go to their
   profile OR the gear for settings without ambiguity. */
.community-profile-hero__main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

/* Avatar — circular, sized to match the Gemini reference (~40px). */
.community-profile-hero__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--nav-text, #F5EDE0);
  border: 1.5px solid rgba(232, 168, 56, 0.35);
}
.community-profile-hero__avatar--placeholder {
  background: rgba(255, 255, 255, 0.06);
  font-size: 1.4rem;
  font-weight: 400;
  opacity: 0.85;
}

/* Text column — title + subtitle stacked tight. */
.community-profile-hero__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.community-profile-hero__title {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #FFFFFF;
  letter-spacing: -0.01em;
}
.community-profile-hero__sub {
  font-size: 0.78rem;
  line-height: 1.2;
  margin-top: 2px;
  color: rgba(245, 237, 224, 0.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.community-profile-hero__sub--cta-claim {
  color: var(--amber, #E8A838);
}
.community-profile-hero__claim-link {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}
.community-profile-hero__claim-link:hover {
  text-decoration: underline;
}

/* Settings gear — replaces the old pencil. Matches the Gemini
   reference where the right-side affordance is a small circular
   icon button. */
.community-profile-hero__settings,
.community-profile-hero__edit {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--nav-text, #F5EDE0);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 1.05rem;
  flex-shrink: 0;
  transition: background 120ms ease, transform 80ms ease;
}
.community-profile-hero__settings:hover,
.community-profile-hero__edit:hover {
  background: rgba(232, 168, 56, 0.22);
  transform: rotate(15deg);
}
.community-profile-hero__settings:active,
.community-profile-hero__edit:active {
  transform: scale(0.94);
}
.community-profile-hero__settings:focus-visible,
.community-profile-hero__edit:focus-visible {
  outline: 2px solid var(--amber, #E8A838);
  outline-offset: 2px;
}

/* Guest variant — same shell, slightly muted so the sign-in CTA
   reads as inviting rather than urgent. */
.community-profile-hero--guest .community-profile-hero__title {
  color: #FFFFFF;
}
.community-profile-hero--guest .community-profile-hero__sub {
  color: rgba(245, 237, 224, 0.55);
}

/* Hide the legacy "→" indicator inside the main click area — the
   gear is now the explicit affordance and a redundant arrow looks
   cluttered against the Gemini-style minimal layout. */
.community-profile-hero__cta {
  display: none;
}