/* ==========================================================================
   Team profile page — Profile Hero, Profile Bio, Profile Detail, Personal
   Note. Webflow code component styles (each renders inside its own Shadow
   DOM; all load this file).

   Same conventions as faq.css: the Figma frame is the source of truth, a
   Webflow variable is used only where its value matches Figma, every
   variable has the Figma value as fallback, ALL values live in the token
   block below.
   ========================================================================== */

:host {
  display: block;

  /* ===== Webflow variables (value matches Figma) ===== */

  --pf-font-primary:   var(--fonts--primary, "Bitter");
  --pf-font-secondary: var(--fonts--secondary, "Inter");

  --pf-navy:        var(--colors--equity-blue, #132c3a);   /* Figma Brand-Navy / Text-Primary */
  --pf-slate:       var(--colors--market-slate, #3c6e82);  /* Figma Brand-Teal / Text-Secondary */
  --pf-light-blue:  var(--colors--trust-blue, #7fcada);    /* Figma Brand-Light-Blue       */
  --pf-tint-blue:   var(--colors--soft-trust, #d4f2fa);    /* Figma Brand-Light-Blue-Tint  */
  --pf-orange:      var(--colors--dividend-gold, #ff971e); /* Figma Brand-Orange           */
  --pf-orange-tint: var(--colors--light-dividend, #ffe8c7);/* Figma Brand-Orange-Tint      */
  --pf-off-white:   var(--colors--clear-ledger, #f5f7fb);  /* Figma Neutral-Off-white / Text-Inverse */
  --pf-white:       var(--colors--white, #ffffff);

  --pf-pad-x:     var(--spacing--horizontal-padding, 5rem); /* 80px */
  --pf-max-width: var(--spacing--max-width, 1440px);

  /* ===== Fixed Figma values (no matching variable) ===== */

  --pf-navy-deep: #0a2635;        /* Brand-Navy-Deep (no site variable, as in cta-form.css) */

  --pf-pad-x-tablet: 2rem;        /* 32px sides at 991px and below (as the other modules) */
  --pf-pad-y:        6rem;        /* 96px (Hero, Bio)    */
  --pf-pad-y-note:   5.5rem;      /* 88px (Personal note) */
  --pf-col-gap:      5rem;        /* 80px between columns */

  /* Eyebrows: Inter 14px / 700 / 164%, uppercase */
  --pf-eyebrow-size: 0.875rem;
  --pf-eyebrow-lh:   164%;

  /* Hero */
  --pf-hero-gap:      2rem;       /* 32px eyebrow → name → tagline → location */
  --pf-name-gap:      0.5rem;     /* 8px name → role */
  --pf-name-size:     4rem;       /* 64px / 700 / 113% */
  --pf-name-lh:       113%;
  --pf-role-size:     1.125rem;   /* 18px / 600 / 150% */
  --pf-tagline-size:  2rem;       /* 32px / 400 / 125% */
  --pf-tagline-lh:    125%;
  --pf-meta-size:     1rem;       /* 16px / 300 / 150% */
  --pf-photo:         32.5rem;    /* 520px square */
  --pf-photo-radius:  1.5rem;     /* 24px */

  /* Bio */
  --pf-main-w:        51.25rem;   /* 820px */
  --pf-side-w:        23.75rem;   /* 380px */
  --pf-block-gap:     2.5rem;     /* 40px lead → button, rule padding */
  --pf-bio-gap:       1.25rem;    /* 20px eyebrow → text */
  --pf-lead-size:     2rem;       /* 32px / 400 / 125% */
  --pf-lead-lh:       125%;
  --pf-text-size:     1.125rem;   /* 18px / 300 / 150% */
  --pf-text-lh:       150%;

  /* Sidebar + Profile Detail */
  --pf-side-pad:      2rem 1.75rem; /* 32 28 */
  --pf-side-gap:      1.5rem;     /* 24px between details */
  --pf-side-radius:   1rem;       /* 16px */
  --pf-detail-gap:    0.75rem;    /* 12px icon → text */
  --pf-detail-text-gap: 0.25rem;  /* 4px label → value */
  --pf-icon-wrap:     2.25rem;    /* 36px circle */
  --pf-icon:          1rem;       /* 16px */
  --pf-label-size:    0.75rem;    /* 12px / 700 / 167%, 1.68px tracking, uppercase */
  --pf-label-lh:      167%;
  --pf-label-ls:      0.105rem;   /* 1.68px */

  /* Personal note */
  --pf-note-icon:     5rem;       /* 80px */
  --pf-note-gap:      1rem;       /* 16px */
  --pf-note-size:     1.625rem;   /* 26px / 400 / 150% */
  --pf-note-lh:       150%;

  /* Scroll-in animation (not in Figma) */
  --pf-reveal-shift: 1.5rem;      /* text rises 24px as it fades in */
  --pf-reveal-time:  0.7s;
  --pf-reveal-step:  90ms;        /* each line starts this much after the one before */
  --pf-reveal-ease:  cubic-bezier(0.22, 1, 0.36, 1);
  --pf-side-delay:   200ms;       /* sidebar card follows the bio text */

  /* Derived */
  --pf-border: color-mix(in srgb, var(--pf-slate) 10%, transparent); /* = rgba(60,110,130,.10) */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ---------- Shared section frame ---------- */

/* Container query anchored inside the Shadow DOM (see faq.css for why) */
.pf-section {
  container: pf / inline-size;
  padding-inline: var(--pf-pad-x);
}

/* Webflow's tablet breakpoint (viewport, so it lines up with the rest of the site) */
@media (max-width: 991px) {
  .pf-section {
    padding-inline: var(--pf-pad-x-tablet);
  }
}

.pf-inner {
  display: flex;
  gap: var(--pf-col-gap);
  width: 100%;
  max-width: var(--pf-max-width);
  margin-inline: auto;
  padding-block: var(--pf-pad-y);
}

.pf-eyebrow {
  margin: 0;
  font-family: var(--pf-font-secondary), system-ui, sans-serif;
  font-size: var(--pf-eyebrow-size);
  font-weight: 700;
  line-height: var(--pf-eyebrow-lh);
  text-transform: uppercase;
}

.pf-text {
  margin: 0;
  white-space: pre-line;          /* keeps line breaks typed in the field */
}

/* ==========================================================================
   Profile Hero
   ========================================================================== */

.pf-hero {
  /* Recolours a Breadcrumb dropped into the eyebrow slot (inherits through it) */
  --breadcrumb-color: var(--pf-orange);
  --breadcrumb-hover: var(--pf-off-white);
  background: var(--pf-navy-deep);
  color: var(--pf-off-white);
}

.pf-hero .pf-inner {
  align-items: center;
}

.pf-hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pf-hero-gap);
  flex: 1 1 0;
  min-width: 0;
}

/* Eyebrow slot: a plain Text Block gets the Figma eyebrow (orange) */
.pf-hero-eyebrow {
  color: var(--pf-orange);
}

.pf-name-block {
  display: flex;
  flex-direction: column;
  gap: var(--pf-name-gap);
  align-self: stretch;
}

.pf-name {
  margin: 0;
  color: var(--pf-off-white);
  font-family: var(--pf-font-primary), Georgia, serif;
  font-size: var(--pf-name-size);
  font-weight: 700;
  line-height: var(--pf-name-lh);
}

.pf-role {
  color: var(--pf-light-blue);
  font-family: var(--pf-font-secondary), system-ui, sans-serif;
  font-size: var(--pf-role-size);
  font-weight: 600;
  line-height: 150%;
}

.pf-tagline {
  color: var(--pf-off-white);
  font-family: var(--pf-font-primary), Georgia, serif;
  font-size: var(--pf-tagline-size);
  font-weight: 400;
  line-height: var(--pf-tagline-lh);
}

.pf-location {
  display: flex;
  align-items: center;
  gap: 0.5rem;                    /* 8px */
  margin: 0;
  color: var(--pf-tint-blue);
  font-family: var(--pf-font-secondary), system-ui, sans-serif;
  font-size: var(--pf-meta-size);
  font-weight: 300;
  line-height: 150%;
}

.pf-location-icon {
  display: flex;
  flex: none;
  width: var(--pf-icon);
  height: var(--pf-icon);
  color: var(--pf-light-blue);
}

.pf-location-icon svg,
.pf-detail-icon svg,
.pf-note-icon svg {
  width: 100%;
  height: 100%;
}

.pf-photo {
  flex: none;
  width: var(--pf-photo);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--pf-photo-radius);
  background: color-mix(in srgb, var(--pf-off-white) 8%, transparent);
}

.pf-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   Profile Bio (+ sidebar)
   ========================================================================== */

.pf-bio {
  background: var(--pf-white);
  color: var(--pf-navy);
}

.pf-bio-bg--off-white   { background: var(--pf-off-white); }
.pf-bio-bg--transparent { background: transparent; }

.pf-bio .pf-inner {
  align-items: flex-start;
}

/* 820 : 380, the Figma split, so both columns shrink together */
.pf-main {
  display: flex;
  flex-direction: column;
  flex: 820 1 0;
  min-width: 0;
}

.pf-side {
  flex: 380 1 0;
  min-width: 0;
  max-width: var(--pf-side-w);
}

.pf-lead-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pf-block-gap);
  padding-bottom: var(--pf-block-gap);
}

.pf-lead-block:last-child {
  padding-bottom: 0;
}

.pf-group {
  display: flex;
  flex-direction: column;
  gap: var(--pf-bio-gap);
  align-self: stretch;
}

.pf-bio .pf-eyebrow {
  color: var(--pf-slate);
}

.pf-lead {
  color: var(--pf-navy);
  font-family: var(--pf-font-primary), Georgia, serif;
  font-size: var(--pf-lead-size);
  font-weight: 400;
  line-height: var(--pf-lead-lh);
}

/* Buttons slot: whatever is dropped in sits in a row */
.pf-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.pf-actions ::slotted(*) {
  display: contents;
}

.pf-more {
  padding-top: var(--pf-block-gap);
  border-top: 1px solid var(--pf-border);
}

.pf-more-text {
  color: var(--pf-navy);
  font-family: var(--pf-font-secondary), system-ui, sans-serif;
  font-size: var(--pf-text-size);
  font-weight: 300;
  line-height: var(--pf-text-lh);
}

/* Sidebar card: Profile Detail components go in its slot */
.pf-side-card {
  display: flex;
  flex-direction: column;
  gap: var(--pf-side-gap);
  padding: var(--pf-side-pad);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-side-radius);
  background: var(--pf-off-white);
}

/* Webflow wraps slot content in its own element. display: contents lets the
   details inside it become the card's items (so the 24px gap applies). */
.pf-side-card ::slotted(*) {
  display: contents;
}

/* ==========================================================================
   Profile Detail (one sidebar item)
   ========================================================================== */

.pf-detail {
  display: flex;
  align-items: flex-start;
  gap: var(--pf-detail-gap);
}

.pf-detail-icon {
  display: flex;
  flex: none;
  justify-content: center;
  align-items: center;
  width: var(--pf-icon-wrap);
  height: var(--pf-icon-wrap);
  padding: calc((var(--pf-icon-wrap) - var(--pf-icon)) / 2);
  border-radius: 999px;
  background: var(--pf-navy);
  color: var(--pf-light-blue);
}

/* Uploaded custom icon, fitted into the same 16px box as the built-ins */
.pf-detail-custom {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* "Light blue": the icon's shape, filled with the icon colour (uses the image
   as a mask; Webflow's asset CDN allows this, it sends CORS headers) */
.pf-detail-custom--tint {
  background: currentColor;
  -webkit-mask: var(--pf-icon-url) center / contain no-repeat;
  mask: var(--pf-icon-url) center / contain no-repeat;
}

.pf-detail-text {
  display: flex;
  flex-direction: column;
  gap: var(--pf-detail-text-gap);
  flex: 1 1 0;
  min-width: 0;
}

.pf-detail-label {
  margin: 0;
  color: var(--pf-slate);
  font-family: var(--pf-font-secondary), system-ui, sans-serif;
  font-size: var(--pf-label-size);
  font-weight: 700;
  line-height: var(--pf-label-lh);
  letter-spacing: var(--pf-label-ls);
  text-transform: uppercase;
}

.pf-detail-value {
  color: var(--pf-navy);
  font-family: var(--pf-font-secondary), system-ui, sans-serif;
  font-size: var(--pf-meta-size);
  font-weight: 300;
  line-height: 150%;
  overflow-wrap: break-word;
}

/* ==========================================================================
   Personal Note
   ========================================================================== */

.pf-note {
  background: var(--pf-orange-tint);
  color: var(--pf-navy);
}

.pf-note .pf-inner {
  align-items: flex-start;
  padding-block: var(--pf-pad-y-note);
}

.pf-note-icon {
  display: flex;
  flex: none;
  width: var(--pf-note-icon);
  height: var(--pf-note-icon);
  color: var(--pf-orange);
}

.pf-note-content {
  display: flex;
  flex-direction: column;
  gap: var(--pf-note-gap);
  flex: 1 1 0;
  min-width: 0;
}

.pf-note .pf-eyebrow {
  color: var(--pf-navy-deep);
}

.pf-note-text {
  color: var(--pf-navy);
  font-family: var(--pf-font-primary), Georgia, serif;
  font-size: var(--pf-note-size);
  font-weight: 400;
  line-height: var(--pf-note-lh);
}

/* ==========================================================================
   Scroll-in animation. Classes come from useReveal (shared/reveal.ts): a
   section is .is-hidden until it scrolls into view, then .is-shown. With
   "Animate on scroll" off or reduced motion, neither class is set and
   everything simply shows.
   ========================================================================== */

/* Text lines rise in one after another (--i = order, set in the components) */
.pf-section.is-hidden .pf-anim {
  opacity: 0;
  transform: translateY(var(--pf-reveal-shift));
}

.pf-section.is-shown .pf-anim {
  --_d: calc(var(--i, 0) * var(--pf-reveal-step));
  opacity: 1;
  transform: none;
  transition:
    opacity var(--pf-reveal-time) ease var(--_d),
    transform var(--pf-reveal-time) var(--pf-reveal-ease) var(--_d);
}

/* Hero photo: fades in while the picture settles from a slight zoom */
.pf-hero.is-hidden .pf-photo {
  opacity: 0;
}

.pf-hero.is-hidden .pf-photo img {
  transform: scale(1.08);
}

.pf-hero.is-shown .pf-photo {
  opacity: 1;
  transition: opacity 0.8s ease 0.15s;
}

.pf-hero.is-shown .pf-photo img {
  transform: none;
  transition: transform 1.4s var(--pf-reveal-ease) 0.15s;
}

/* Bio sidebar card slides in from the right */
.pf-bio.is-hidden .pf-side {
  opacity: 0;
  transform: translateX(var(--pf-reveal-shift));
}

.pf-bio.is-shown .pf-side {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--pf-reveal-time) ease var(--pf-side-delay),
    transform var(--pf-reveal-time) var(--pf-reveal-ease) var(--pf-side-delay);
}

/* Profile Details: each one slides in after the card, top to bottom
   (--pf-order = its place in the sidebar, set by ProfileDetail.tsx) */
.pf-detail.is-hidden {
  opacity: 0;
  transform: translateX(-0.5rem);
}

.pf-detail.is-shown {
  --_d: calc(var(--pf-side-delay) + 150ms + var(--pf-order, 0) * 80ms);
  opacity: 1;
  transform: none;
  transition:
    opacity 0.5s ease var(--_d),
    transform 0.6s var(--pf-reveal-ease) var(--_d);
}

.pf-detail.is-hidden .pf-detail-icon {
  transform: scale(0.6);
}

.pf-detail.is-shown .pf-detail-icon {
  transform: none;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) var(--_d);
}

/* Personal note: the lightbulb switches on (pops in with a small overshoot) */
.pf-note.is-hidden .pf-note-icon {
  opacity: 0;
  transform: scale(0.6) rotate(-12deg);
}

.pf-note.is-shown .pf-note-icon {
  animation: pf-bulb-on 1.1s var(--pf-reveal-ease) both;
}

@keyframes pf-bulb-on {
  0%   { opacity: 0; transform: scale(0.6) rotate(-12deg); }
  45%  { opacity: 1; transform: scale(1.08) rotate(3deg); }
  100% { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pf-section .pf-anim,
  .pf-photo,
  .pf-photo img,
  .pf-side,
  .pf-detail,
  .pf-detail-icon,
  .pf-note-icon {
    transition: none !important;
    animation: none !important;
  }
}

/* ==========================================================================
   Responsive. Container widths exclude the section's side padding (80px, or
   32px at 991px and below), so 900px ≈ a 1060px-wide screen, with room for
   a 15px scrollbar at 1100px.
   ========================================================================== */

/* Small laptops: hero photo and type step down so the text column keeps room */
@container pf (max-width: 1100px) {
  .pf-inner {
    --pf-col-gap:   3rem;
    --pf-photo:     24rem;
    --pf-name-size: 3.25rem;      /* 52px */
  }
}

/* Bio stacks a little sooner: below this the 380px sidebar would squeeze
   under ~290px (about a 1160px-wide screen) */
@container pf (max-width: 1000px) {
  .pf-section.pf-bio .pf-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .pf-bio .pf-side {
    max-width: none;
  }
}

@container pf (max-width: 900px) {
  /* .pf-section prefix: beats the per-section align-items rules above */
  .pf-section .pf-inner {
    flex-direction: column;
    align-items: stretch;
  }

  /* Hero: photo first, above the name, at its own width */
  .pf-photo {
    order: -1;
    align-self: flex-start;
    width: min(100%, 22rem);
  }

  .pf-side {
    max-width: none;
  }
}

@container pf (max-width: 767px) {
  .pf-inner,
  .pf-note .pf-inner {
    --pf-col-gap: 2.5rem;
    padding-block: 4rem;
  }

  .pf-inner {
    --pf-name-size:    2.5rem;    /* 40px */
    --pf-tagline-size: 1.5rem;    /* 24px */
    --pf-lead-size:    1.5rem;    /* 24px */
    --pf-note-size:    1.25rem;   /* 20px */
    --pf-text-size:    1rem;
    --pf-note-icon:    3.5rem;    /* 56px */
    --pf-hero-gap:     1.5rem;
  }
}

@container pf (max-width: 479px) {
  .pf-inner {
    --pf-name-size: 2.125rem;     /* 34px */
    --pf-side-pad:  1.5rem 1.25rem;
  }
}