/*
 * about-team.css — Toro Legal Marketing
 *
 * /about/ — "Our Leadership Team" grid (the #team anchor the hero CTA
 * points at). Built from Figma node 513:7058.
 *
 *   Cream section, centred title + intro, 3-column card grid.
 *   Each card: white, rounded, a cream headshot tile with a soft coral
 *   glow behind the cutout photo, then name (serif) + role.
 *
 * The coral glow is a CSS radial-gradient, NOT a baked raster
 * (asset-pipeline rule: soft glows are CSS). Uses the brand accent
 * stops (#FF9239 / #FF007C) the heading-accent gradient already uses.
 *
 * Headshot tile is 300px tall (Figma); the photo sits centred over the
 * glow. Cards without a photo show the placeholder glyph on the glow.
 */

.tlm-about-team {
  background: var(--color-cream);
  padding-block: var(--space-3xl);
  /* #team is the hero "Meet the team" CTA target; clear the sticky
     navbar on the anchor jump (site convention, matches blog-single +
     service-page-subnav). Mobile navbar is shorter (compact ~97px) so
     152px overshoots and leaves a big gap; tighten on mobile, restore
     the desktop value at 1024px. */
  scroll-margin-top: 123px;
}

.tlm-about-team__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

/* --- Intro --- */

.tlm-about-team__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}

.tlm-about-team__heading {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: var(--text-h2-mobile);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-navy);
  text-wrap: balance;
}

.tlm-about-team__lead {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-navy-muted);
}

/* --- Card grid --- */

.tlm-about-team__grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.tlm-about-team__card {
  display: flex;
}

.tlm-about-team__card-inner {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--color-white);
  border-radius: var(--radius-lg);
}

/* Linkable card (profile exists) — whole card is the click target.
   Opt out of the global link underline; shadow + name-underline on hover. */
a.tlm-about-team__card-inner {
  color: inherit;
  text-decoration: none;
  transition: box-shadow 200ms ease;
}

@media (hover: hover) {
  a.tlm-about-team__card-inner:hover {
    /* Suppress the global prose-link hover underline on the card itself
       (the name underlines instead). This selector (1 class + 1 type)
       outweighs base's `a:not(:where(...))`, so it wins without editing
       the locked base.css opt-out list. */
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-button-hover);
  }

  a.tlm-about-team__card-inner:hover .tlm-about-team__name {
    text-decoration: underline;
  }
}

/* --- Headshot tile with coral glow --- */

.tlm-about-team__photo {
  position: relative;
  height: 300px;
  border-radius: var(--radius-sm);
  background-color: var(--color-cream);
  overflow: hidden;
}

/* Soft coral glow behind the cutout — low-centred radial, brand stops,
   fading to transparent. Replaces the Figma's blurred raster blob. */
.tlm-about-team__photo::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10%;
  width: 78%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(
    circle at center,
    #ff007c 0%,
    #ff9239 38%,
    rgba(255, 146, 57, 0) 68%
  );
  opacity: 0.55;
  filter: blur(8px);
  pointer-events: none;
}

.tlm-about-team__photo-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  /* Fill the tile and crop rather than letterbox: object-fit:contain
     left a big gap above the head on portrait headshots. Cover from the
     top keeps faces high in the frame. */
  object-fit: cover;
  object-position: center top;
}

/* Placeholder glyph for cards without a photo yet — sits on the glow. */
.tlm-about-team__photo-placeholder {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-navy-faint);
}

.tlm-about-team__photo-placeholder svg {
  width: 56px;
  height: 56px;
}

/* --- Name + role --- */

.tlm-about-team__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  text-align: center;
}

.tlm-about-team__name {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: var(--text-h2-mobile);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-navy);
}

.tlm-about-team__role {
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--color-navy);
}

/* --- Tablet --- */

@media (min-width: 768px) {
  .tlm-about-team__lead {
    font-size: var(--text-lg);
  }

  .tlm-about-team__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Desktop --- */

@media (min-width: 1024px) {
  .tlm-about-team {
    padding-block: var(--space-4xl);
    /* Desktop sticky navbar is taller; restore the full clearance. */
    scroll-margin-top: 152px;
  }

  .tlm-about-team__inner {
    gap: var(--space-4xl);
  }

  .tlm-about-team__heading {
    font-size: var(--text-h2);
  }

  .tlm-about-team__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    row-gap: var(--space-xl);
  }
}