/* =========================================================
   Michael Prestes Rosa — Bio / link-in-bio page
   Standalone card, reuses tokens + buttons from style.css
   ========================================================= */

.bio-body{
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-7) var(--space-5);
  background:
    radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--accent-bright) 10%, transparent), transparent 70%),
    var(--paper);
}

.bio-page{
  width: 100%;
  max-width: 380px;
  text-align: center;
}

.bio-photo-card{
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(150deg, var(--surface-ink), var(--surface-ink-2));
  box-shadow: var(--shadow-lg);
}
.bio-photo-card picture{ display: block; width: 100%; height: 100%; }
.bio-photo-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.bio-photo-overlay{
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-8) var(--space-5) var(--space-5);
  background: linear-gradient(to top, var(--overlay) 0%, var(--overlay) 25%, transparent 100%);
  text-align: center;
}

.bio-name{
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--on-ink);
}
.bio-role{
  margin-top: var(--space-1);
  font-size: var(--fs-small);
  color: var(--on-ink-soft);
}

.bio-badges{
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.bio-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  border: 1px solid var(--on-ink-border);
  border-radius: 999px;
  padding: 6px 10px;
  font-family: var(--font-label);
  font-size: .6rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--on-ink-soft);
  white-space: nowrap;
}
.bio-badge svg{ width: 12px; height: 12px; stroke: var(--accent-bright); flex-shrink: 0; }

.bio-links{
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

.bio-note{
  margin-top: var(--space-7);
  font-size: .72rem;
  line-height: 1.5;
  color: var(--muted);
}

@media (prefers-color-scheme: dark){
  .bio-body{
    background:
      radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--accent-bright) 16%, transparent), transparent 70%),
      var(--paper);
  }
}

/* A link-in-bio page is meant to be grasped in one glance on a phone —
   at the base spacing scale it slightly overflowed a typical mobile
   viewport, clipping the compliance note. Shrinking the photo card's
   aspect ratio here doesn't crop any more of the photo (the image is
   still taller than the box in both cases, so it's shown in full either
   way) — it just displays that same waist-up framing more compactly. */
@media (max-width: 639px){
  .bio-body{ padding: var(--space-6) var(--space-5); }
  .bio-photo-card{ aspect-ratio: 4 / 5; }
  .bio-links{ gap: var(--space-2); margin-top: var(--space-6); }
  .bio-note{ margin-top: var(--space-6); }
}