/* ==========================================================================
   Devgun Family Law -- Block: PersonBlock "Team Cards" variant
   Figma: 02-team-lp.png (Team LP 7160:767) + component sheet team card
   7188:576 (Default + Hover). Uniform linked cards: square photo top,
   tinted text panel (--color-bg-card-tint) with name H5 + JobTitle + bio.
   Grid per build spec Section 6: 4-up at lg (992px+), 2-up at md (768px+),
   1-up below. Headshot empty state (Fatima 7160:826): brand icon on a
   tinted panel. Flat cards, --radius-card, no shadow (build spec 5.2).
   Consumes tokens from foundation/tokens.css only -- no raw hex.
   Loaded by templates/App/Elements/PersonBlock_TeamCards.ss.
   ========================================================================== */

.team-cards__intro {
  text-align: center;
  max-width: 62rem;
  margin: 0 auto var(--space-gap);
}

.team-cards__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem; /* 24px card gap per canvas geometry (4 x 334 + 3 x 24 = 1408) */
  max-width: 28rem; /* keep 1-up cards from stretching edge-to-edge */
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .team-cards__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
  }
}

@media (min-width: 992px) {
  .team-cards__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------------ *
 * Card -- the whole card is ONE link to the PersonPage. Resets the
 * foundation link typography (bold/tracked Links style) back to card
 * text; hover is a subtle lift + panel tint shift (7188:574), focus
 * ring comes from the foundation :focus-visible standard.
 * ------------------------------------------------------------------ */

.team-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-card);
  background-color: var(--color-bg-card-tint);
  color: var(--color-text-default);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body2);
  line-height: var(--lh-body2);
  letter-spacing: 0;
  transition: background-color 150ms ease, transform 150ms ease;
}

.team-card:hover,
.team-card:focus-visible {
  text-decoration: none;
  background-color: var(--color-blue-lightest);
  transform: translateY(-4px);
}

.team-card__media {
  width: 100%;
  aspect-ratio: 1 / 1;
}

.team-card__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Empty state (designed Fatima card 7160:826): DARK card panel with the
   two-tone brand mountain -- pixel-sampled off 02-team-lp.png: panel
   #1D2B24 (--color-bg-card-dark), fore ridge #3A5648 (Forest Green), peak
   #5C98A3 (Canopy Blue). Peak-on-Dark-Green is 4.55:1 (UI-graphics AA
   pass, spec pairing #15); the fore ridge is decorative brand art at the
   design's own subtle contrast. Icon spans ~50% of the card width per the
   design (165px mark on a 334px card). Text panel below stays tinted. */
.team-card__media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg-card-dark);
}

.team-card__placeholder-mark {
  width: 50%;
  height: auto;
}

.team-card__mark-fore {
  fill: var(--color-green-forest);
}

.team-card__mark-peak {
  fill: var(--color-blue-canopy);
}

.team-card__panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: clamp(1.25rem, 2vw, 1.75rem);
}

.team-card__name {
  margin: 0;
}

.team-card__jobtitle {
  margin: 0;
  font-size: var(--fs-body2);
  line-height: var(--lh-body2);
  letter-spacing: 0;
  font-weight: var(--fw-medium);
}

.team-card__bio {
  margin: 0;
  font-size: var(--fs-body2);
  line-height: 1.4;
  letter-spacing: 0;
}

.team-cards__cta {
  margin-top: var(--space-gap);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .team-card {
    transition: none;
  }
}

/* ------------------------------------------------------------------ *
 * Team LP page scope -- centered intro (02-team-lp.png / 7138:1260).
 * The Our Team page's standalone content column gets the
 * `detail-content--centered` modifier from Layout/TopLevelPage.ss
 * (URLSegment-scoped hook); the class is page-agnostic but currently
 * only emitted there. Lives in this file because the Team LP is this
 * block's home page and page/detail.css belongs to another workstream.
 * The design's intro measure is ~965px centered within the standalone
 * column; text centers, and the imported copy's own headings center
 * with it. The design's "Meet Your..." grid headline and "Edmonton
 * Legal Counsel" intro heading have NO verbatim source in
 * docs/content/source/15-our-team.md, so they are intentionally NOT
 * rendered (no invented client copy -- flagged for Dave).
 * ------------------------------------------------------------------ */

.detail-content--centered {
  text-align: center;
}