/* Cabeçalho público: banner decorativo, avatar sobreposto e leitura central. Só tokens (tokens.css). */
.campaign-profile {
  --avatar-size: 7rem;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem clamp(1.25rem, 4vw, 3rem) 2.5rem;
  text-align: center;
  border-bottom: var(--stroke-1) solid color-mix(in srgb, var(--bio-text) 12%, transparent);
}

.campaign-profile[data-with-banner=true] { padding-top: 0; }

.profile-avatar {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--avatar-size);
  height: var(--avatar-size);
  padding: 0.375rem;
  border-radius: 50%;
  background: var(--bio-surface);
  box-shadow: var(--shadow-md);
}

.campaign-profile[data-with-banner=true] .profile-avatar { margin-top: calc(var(--avatar-size) / -2); }

.campaign-profile .campaign-avatar, .avatar-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  aspect-ratio: 1;
}

.avatar-placeholder { display: grid; place-items: center; background: var(--bio-brand); color: var(--bio-on-brand); font-size: 2.25rem; }

.campaign-profile .eyebrow { margin: 1.5rem 0 0.6rem; font-size: 0.65rem; letter-spacing: 0.13em; }

body[data-template] .campaign-profile h1 { max-width: 25ch; margin: 0; font-size: clamp(1.75rem, 4.5vw, 2.65rem); line-height: 1.16; letter-spacing: -0.045em; text-wrap: balance; overflow-wrap: anywhere; }

.campaign-profile .rich-body { width: 100%; max-width: var(--width-reading); margin-top: 1.25rem; }

.campaign-profile .rich-body h2, .campaign-profile .rich-body h3 { text-wrap: balance; }

.campaign-profile .rich-body p { line-height: 1.7; }

.campaign-profile .rich-body ul { text-align: left; max-width: 50ch; margin-inline: auto; }

body[data-template=library] .campaign-profile { max-width: none; }

.campaign-banner img { display: block; }

@media (prefers-reduced-motion: no-preference) {
  .profile-avatar { animation: avatar-arrive 320ms var(--ease-out) backwards; }

  @keyframes avatar-arrive { from { opacity: 0.4; transform: translateY(0.375rem) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
}

/* Breakpoint em em: @media não aceita var() */
@media (max-width: 37.5em) {
  .campaign-profile { --avatar-size: 6rem; padding-inline: 1.25rem; padding-bottom: 1.75rem; }

  .campaign-profile .eyebrow { margin-top: 1.2rem; }

  body[data-template] .campaign-profile h1 { font-size: clamp(1.65rem, 6vw, 2rem); }
}