/* ============================================================================
   about.css — page-specific styles for about.html
   Loads after variables.css and global.css. Do not duplicate shared classes.

   Layout:
     1. HEADER       — centered sparkle pill + two-line gradient h1 + lede
     2. TEAM GRID    — two dark navy founder cards on the cream page
     3. FINAL CTA    — rounded cream panel + Book a call
   ============================================================================ */

/* ============================================================================
   1. HEADER
   ============================================================================ */

.about-team-hero {
  padding-block-start: var(--space-32);
  padding-block-end: var(--space-16);
}

@media (max-width: 767px) {
  .about-team-hero {
    padding-block-start: var(--space-16);
    padding-block-end: var(--space-12);
  }
}

.about-team-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-5);
}

/* Display-scale h1, two-line, second line gets a navy-to-blue gradient
   via background-clip: text. Forced break with <br> in the markup. */
.about-team-hero__h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-display);
  line-height: 1.05;
  color: var(--color-ink);
  max-width: 18ch;
  margin: 0;
}

.about-team-hero__h1-accent {
  color: var(--color-accent);
}

.about-team-hero__lede {
  margin: 0 auto;
  max-width: 60ch;
}

/* ============================================================================
   2. TEAM GRID — dark navy cards on cream page
   ============================================================================ */

.about-team {
  padding-block: var(--space-12) var(--space-8);
}

.team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: stretch;
  perspective: 1000px;
}

@media (max-width: 767px) {
  .team-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .about-team {
    padding-block: var(--space-6) var(--space-6);
  }
}

/* ----------------------------------------------------------------------------
   CARD — three-stop navy gradient (matches the homepage case-card pattern)
   --------------------------------------------------------------------------- */

.team-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  min-height: 520px;
  background: linear-gradient(155deg, #26446c 0%, #1a3454 50%, #102a5f 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xl);
  padding: var(--space-12) var(--space-8);
  color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 12px 32px -12px rgba(15, 23, 42, 0.30);
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
  transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 320ms ease-out,
              border-color 320ms ease-out;
  will-change: transform;
  overflow: hidden;
  isolation: isolate;
}

.team-card:hover {
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-4px);
  border-color: rgba(255, 255, 255, 0.20);
  box-shadow: 0 24px 48px -16px rgba(30, 58, 95, 0.40),
              0 8px 16px -4px rgba(15, 23, 42, 0.22);
}

/* Soft white glow that fades in on hover, sits behind everything */
.team-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 80% at 50% 0%,
              rgba(255, 255, 255, 0.10) 0%,
              transparent 60%);
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
  z-index: -1;
}

.team-card:hover::before {
  opacity: 1;
}

/* Sparkle in top-right corner — fades and rotates in on hover */
.team-card__sparkle {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  display: inline-flex;
  color: rgba(255, 255, 255, 0.85);
  opacity: 0;
  transform: scale(0.7) rotate(-12deg);
  transition: opacity 280ms ease, transform 320ms cubic-bezier(0.34, 1.2, 0.64, 1);
  pointer-events: none;
}

.team-card:hover .team-card__sparkle {
  opacity: 1;
  transform: scale(1) rotate(0);
}

/* ----------------------------------------------------------------------------
   AVATAR — initials shown by default via data-initials attribute.
   When the <img> loads it covers the initials. If the file is missing,
   inline onerror removes the img and only the initials show.
   --------------------------------------------------------------------------- */

.team-card__avatar {
  position: relative;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: 2.75rem;
  letter-spacing: 0.04em;
  overflow: hidden;
  flex-shrink: 0;
  margin-bottom: var(--space-3);
  border: 3px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.45);
  transition: transform 320ms cubic-bezier(0.34, 1.2, 0.64, 1),
              border-color 320ms ease;
}

.team-card__avatar::before {
  content: "";
}

.team-card:hover .team-card__avatar {
  transform: scale(1.05);
  border-color: rgba(255, 255, 255, 0.18);
}

.team-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  border-radius: 50%;
  display: block;
  /* Vignette the photo edges into the avatar background so the studio
     backdrop greys/whites dissolve into the navy card. */
  -webkit-mask-image: radial-gradient(circle at center, #000 58%, transparent 100%);
          mask-image: radial-gradient(circle at center, #000 58%, transparent 100%);
}

/* Patrick's source headshot is framed wider than Nathan's, so his head reads
   smaller and higher in the circle. Lower the focal point and zoom slightly
   so his head matches the size and position of Nathan's avatar without
   clipping the top of his hair. */
.team-card__avatar[data-initials="PR"] .team-card__img {
  object-position: center 8%;
  transform: scale(1.05);
  transform-origin: center top;
}

/* ----------------------------------------------------------------------------
   NAME + ROLE + LOCATION
   --------------------------------------------------------------------------- */

.team-card__name {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: 1.5rem;
  letter-spacing: var(--ls-h1);
  line-height: var(--lh-tight);
  color: #FFFFFF;
  margin: 0;
}

/* Frosted role pill on dark fill. Wraps for long titles like Patrick's
   'Lead AI Automation Specialist and Co-founder' so it doesn't overflow. */
.team-card__role {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.10);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  max-width: 90%;
  text-align: center;
}

.team-card__location {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: rgba(255, 255, 255, 0.60);
  margin-top: var(--space-1);
}

.team-card__pin {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.45);
}

/* ----------------------------------------------------------------------------
   BIO + SKILLS + SOCIALS — all white-tinted on dark
   --------------------------------------------------------------------------- */

.team-card__bio {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: rgba(255, 255, 255, 0.80);
  margin: var(--space-2) 0 0;
  max-width: 38ch;
}

.team-card__skills {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0;
}

.team-card__skills li {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  color: rgba(255, 255, 255, 0.85);
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9999px;
  white-space: nowrap;
  transition: border-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard),
              background-color var(--duration-base) var(--ease-standard);
}

.team-card:hover .team-card__skills li {
  border-color: rgba(255, 255, 255, 0.28);
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.10);
}

.team-card__socials {
  list-style: none;
  display: flex;
  gap: var(--space-2);
  margin: var(--space-5) 0 0;
  padding: 0;
}

.team-card__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: background var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}

.team-card__socials a:hover,
.team-card__socials a:focus-visible {
  background: #FFFFFF;
  color: var(--color-accent);
  border-color: #FFFFFF;
  transform: translateY(-2px);
  outline: none;
}

.team-card__socials a:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

/* ============================================================================
   3. FINAL CTA — stays cream on cream, provides relief after dark cards
   ============================================================================ */

.about-final-cta {
  padding-block: var(--space-8) var(--space-32);
}

.about-cta-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
}

.about-cta-panel__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h1);
  letter-spacing: var(--ls-h1);
  line-height: var(--lh-tight);
  color: var(--color-ink);
  margin: 0;
}

.about-cta-panel__body {
  font-family: var(--font-body);
  font-size: var(--fs-body-lead);
  line-height: var(--lh-body);
  color: var(--color-ink-72);
  max-width: 50ch;
  margin: 0;
}

.about-cta-panel .btn {
  margin-top: var(--space-2);
}

@media (min-width: 768px) {
  .about-cta-panel {
    padding: var(--space-16) var(--space-12);
  }
}

@media (max-width: 767px) {
  .about-final-cta {
    padding-block: var(--space-8) var(--space-16);
  }
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  .team-card,
  .team-card:hover,
  .team-card::before,
  .team-card:hover::before,
  .team-card__sparkle,
  .team-card:hover .team-card__sparkle,
  .team-card__avatar,
  .team-card:hover .team-card__avatar,
  .team-card__skills li,
  .team-card:hover .team-card__skills li,
  .team-card__socials a,
  .team-card__socials a:hover {
    transition: none;
    transform: none;
  }
}