/* ============================================================
   Profile detail page
   Page-scoped layout and components for /Profile/{slug?}.
   Tokens come from tokens.css; the two intentional deltas
   (.profile-identity__name 48px and .profile-skill 6px / 8px 6px / 14px)
   are inline by design — see openspec change profile-page-visual D6/D7.
   ============================================================ */

.profile {
  background-color: var(--bone);
}

.profile__inner {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: var(--space-32) var(--margin-mobile) var(--space-96);
}

@media (min-width: 640px) {
  .profile__inner {
    padding-left: var(--margin-tablet);
    padding-right: var(--margin-tablet);
  }
}

@media (min-width: 1024px) {
  .profile__inner {
    padding: var(--space-48) var(--margin-desktop) var(--space-128);
  }
}

/* Mobile bottom-bar clearance — matches the 56px sticky bar + 32px breathing. */
@media (max-width: 639px) {
  .profile {
    padding-bottom: 88px;
  }
}

/* ------------------------------------------------------------
   Zone 1 — back navigation
   ------------------------------------------------------------ */

.profile-backnav {
  display: inline-flex;
  align-items: center;
  margin: 0 0 var(--space-24);
  font-size: var(--fs-body-s);
}

@media (min-width: 1024px) {
  .profile-backnav {
    margin-bottom: var(--space-32);
  }
}

/* ------------------------------------------------------------
   Zone 2 — identity header
   ------------------------------------------------------------ */

.profile-identity {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "avatar text"
    "cta    cta";
  column-gap: var(--space-24);
  row-gap: var(--space-24);
  align-items: start;
  margin-bottom: var(--space-64);
}

@media (min-width: 1024px) {
  .profile-identity {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "avatar text cta";
    column-gap: var(--space-32);
    align-items: center;
  }
}

.profile-identity__avatar {
  grid-area: avatar;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background-color: var(--sand);
  border: 1px solid var(--ink);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 36px;
  line-height: 1;
  flex: 0 0 auto;
}

.profile-identity__text {
  grid-area: text;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  min-width: 0;
}

/*
  Profile name H1 — editorial moment.
  48px / 400 / -0.015em is the change's intentional delta vs --fs-h1 (40px / 600).
  Logged in design.md D6 as a follow-up amendment to introduce --fs-name-display.
  Runtime fallback: change font-family to var(--font-display) (Space Grotesk)
  if Fraunces accents misbehave at this size — see design.md D6 alternative.
*/
.profile-identity__name {
  font-family: var(--font-editorial);
  font-size: 48px;
  font-weight: var(--fw-regular);
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}

.profile-identity__subtitle {
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
  color: var(--neutral-500);
  margin: 0;
}

.profile-identity__status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-8);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--neutral-700);
  margin: 0;
}

.profile-identity__status-segment {
  white-space: nowrap;
}

.profile-identity__status-sep {
  color: var(--chartreuse);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: 1;
}

.profile-identity__cta {
  grid-area: cta;
  display: flex;
  justify-content: flex-start;
}

@media (min-width: 1024px) {
  .profile-identity__cta {
    justify-content: flex-end;
  }
}

@media (max-width: 1023px) {
  .profile-identity__cta {
    display: none;
  }
}

/* ------------------------------------------------------------
   Sticky CTA — desktop scroll-triggered, mobile always-on bar
   ------------------------------------------------------------ */

.profile-sticky-cta {
  position: fixed;
  top: var(--space-24);
  right: var(--space-32);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-150) var(--easing-entry);
}

.profile-sticky-cta--visible {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 639px) {
  .profile-sticky-cta {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    opacity: 1;
    pointer-events: auto;
    background-color: var(--chartreuse);
    display: flex;
    align-items: stretch;
  }

  .profile-sticky-cta__button {
    width: 100%;
    height: 56px;
    border-radius: 0;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .profile-sticky-cta {
    transition: none;
  }
}

/* ------------------------------------------------------------
   Zone 3 — two-column body
   ------------------------------------------------------------ */

.profile-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-48);
}

@media (min-width: 1024px) {
  .profile-body {
    grid-template-columns: minmax(0, var(--max-editorial)) 280px;
    column-gap: var(--space-64);
    row-gap: var(--space-48);
    align-items: start;
  }
}

.profile-body__editorial {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
  min-width: 0;
}

/* ------------------------------------------------------------
   Editorial section partial — heading + body, with empty state
   ------------------------------------------------------------ */

.profile-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.profile-section__heading {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tracking-display);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  margin: 0;
}

.profile-section__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.profile-section__body p {
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
  color: var(--ink);
  margin: 0;
}

.profile-section__empty {
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
  color: var(--neutral-400);
  font-style: italic;
  margin: 0;
}

/* ------------------------------------------------------------
   Skills — grouped non-interactive tags
   ------------------------------------------------------------ */

.profile-skills__group + .profile-skills__group {
  margin-top: var(--space-24);
}

.profile-skills__group-label {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caption-upper);
  font-weight: var(--fw-medium);
  color: var(--neutral-400);
  margin: 0 0 var(--space-12);
}

.profile-skills__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

/*
  .profile-skill — profile-scoped tag.
  Brief spec: 6px radius, 8px / 6px padding, Body S 14px, weight 500.
  Differs from global .tag (4px / 4px 12px / 12px) — see design.md D7.
  Non-interactive: no link, no button, no hover, no pointer cursor.
*/
.profile-skill {
  display: inline-flex;
  align-items: center;
  background-color: var(--sand);
  color: var(--neutral-700);
  border-radius: 6px;
  padding: 8px 6px;
  font-size: var(--fs-body-s);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  cursor: default;
}

/* ------------------------------------------------------------
   Metadata sidebar — definition list
   ------------------------------------------------------------ */

.profile-metadata {
  width: 100%;
}

@media (min-width: 1024px) {
  .profile-metadata {
    width: 280px;
    position: sticky;
    top: calc(var(--header-height) + var(--space-32));
  }
}

.profile-metadata__list {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--space-16);
  margin: 0;
  padding: 0;
}

.profile-metadata__label {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caption-upper);
  font-weight: var(--fw-medium);
  color: var(--neutral-400);
  margin-bottom: var(--space-4);
}

.profile-metadata__value {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-medium);
  color: var(--ink);
  margin: 0;
}

.profile-metadata__label--divided {
  border-top: 1px solid var(--neutral-200);
  padding-top: var(--space-16);
  margin-top: var(--space-16);
}

/* ------------------------------------------------------------
   Zone 4 — closing CTA block (the page's one Ink-fill block)
   ------------------------------------------------------------ */

.profile-closing {
  background-color: var(--ink);
  padding: var(--space-96) var(--margin-mobile);
  text-align: center;
}

@media (min-width: 640px) {
  .profile-closing {
    padding-left: var(--margin-tablet);
    padding-right: var(--margin-tablet);
  }
}

@media (min-width: 1024px) {
  .profile-closing {
    padding: var(--space-128) var(--margin-desktop);
  }
}

.profile-closing__inner {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
}

.profile-closing__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tracking-display);
  font-weight: var(--fw-semibold);
  color: var(--bone);
  margin: 0;
}

.profile-closing__subcopy {
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
  color: var(--neutral-300);
  margin: 0;
  max-width: 48ch;
}