/**
 * meet-the-team.css — Inspire Recovery
 * Page: /about/meet-the-team-lgbtq-rehab/ (ID 517)
 * Foundation: ../main.css
 * Prefix: tm-
 *
 * Design: ONE profile component, ONE grid class.
 * Flex grid auto-centers partial rows (3-person fills; 2-person centers).
 * Identical image dimensions for all 11 staff at every breakpoint.
 * FROZEN 2026-08-26.
 */

/* ─────────────────────────────────────────────────────────────────────────
   HERO — aqua background, centered content, no form
   Matches approved PHP/IOP/OP/Therapies hero palette.
   ───────────────────────────────────────────────────────────────────────── */

.tm-hero {
  background: var(--brand-aqua);
  text-align: center;
}

.tm-hero-inner {
  max-width: 720px;
  margin: 0 auto;
}

.tm-hero .eyebrow {
  color: var(--ink);
  margin-bottom: 14px;
  justify-content: center;
}

.tm-hero h1 {
  font-size: clamp(1.95rem, 3.8vw, 3rem);
  line-height: 1.08;
  margin-bottom: 18px;
}

.tm-hero .lead {
  max-width: 58ch;
  margin: 0 auto 28px;
  color: var(--text-primary);
}

/* ─────────────────────────────────────────────────────────────────────────
   DEPARTMENT SECTIONS — white background, border-top divider
   ───────────────────────────────────────────────────────────────────────── */

.tm-section {
  padding-block: clamp(44px, 6vh, 68px);
  border-top: 1px solid var(--border-light);
}

.tm-section:first-of-type {
  border-top: none;
}

.tm-section-label {
  margin-bottom: clamp(28px, 4vh, 44px);
}

.tm-section-label .eyebrow {
  margin-bottom: 6px;
}

.tm-section-label h2 {
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}

/* ─────────────────────────────────────────────────────────────────────────
   SINGLE GRID — ONE class used for ALL sections.
   Flex wrap + justify-content: center automatically centers partial rows.
   Card width = (container − 2 × gap) ÷ 3  →  identical to a 3-col CSS Grid.
   3 people → fills the row exactly.
   2 people → centered with same card width and gap.
   1 person → centered with same card width.
   ───────────────────────────────────────────────────────────────────────── */

.tm-grid {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 2.8vw, 36px);
  justify-content: center;
}

.tm-grid .tm-profile {
  flex: 0 0 calc((100% - 2 * clamp(24px, 2.8vw, 36px)) / 3);
  min-width: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   PROFILE COMPONENT — identical for all 11 staff members
   ───────────────────────────────────────────────────────────────────────── */

.tm-profile {
  display: flex;
  flex-direction: column;
}

.tm-img {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--surface-soft-blue);
  margin-bottom: 16px;
  flex-shrink: 0;
}

.tm-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
  display: block;
}

.tm-name {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
  margin: 0 0 4px;
}

.tm-title {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--brand-brown);
  margin: 0 0 10px;
}

.tm-desc {
  font-size: clamp(.95rem, 1.2vw, 1.02rem);
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   BIO REVEAL — native <details>/<summary>, no JavaScript
   ───────────────────────────────────────────────────────────────────────── */

.tm-bio {
  margin-top: 14px;
}

.tm-bio summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--brand-brown);
  user-select: none;
  padding: 0;
  background: none;
  border: none;
}

.tm-bio summary::-webkit-details-marker { display: none; }
.tm-bio summary::marker { content: ''; }
.tm-bio summary::after { content: ' +'; }
.tm-bio[open] summary::after { content: ' −'; }
.tm-bio summary:hover { color: var(--ink); }

.tm-bio-text {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-light);
}

.tm-bio-text p {
  font-size: clamp(.93rem, 1.2vw, .99rem);
  color: var(--text-secondary);
  line-height: 1.72;
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   FINAL CTA — brand aqua, dark ink, white buttons
   Mirrors approved .final component palette.
   ───────────────────────────────────────────────────────────────────────── */

.tm-cta {
  background: var(--brand-aqua);
  color: var(--ink);
  text-align: center;
}

.tm-cta .eyebrow {
  color: var(--ink);
  margin-bottom: 14px;
}

.tm-cta .eyebrow::before {
  background: var(--brand-aqua-hover);
}

.tm-cta h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  line-height: 1.15;
  color: var(--ink);
  max-width: 26ch;
  margin: 0 auto 14px;
}

.tm-cta p {
  font-size: clamp(.97rem, 1.3vw, 1.06rem);
  color: var(--ink);
  line-height: 1.65;
  max-width: 52ch;
  margin: 0 auto 28px;
}

.tm-cta .actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.tm-cta .btn {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}

.tm-cta .btn:hover {
  background: #EEF2F1;
  transform: translateY(-1px);
}

.tm-cta .btn.ghost {
  background: transparent;
  color: var(--ink);
  border-color: rgba(22,32,31,.44);
}

.tm-cta .btn.ghost:hover {
  background: rgba(22,32,31,.07);
  transform: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   RESPONSIVE
   ─────────────────────────────────────────────────────────────────────────
   ≤ 768px  →  2-col: item width = (100% − gap) ÷ 2
   ≤ 440px  →  1-col: item width = 100%
   Aspect ratio and all visual tokens remain unchanged.
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .tm-grid .tm-profile {
    flex: 0 0 calc((100% - clamp(24px, 2.8vw, 36px)) / 2);
  }
}

@media (max-width: 440px) {
  .tm-grid .tm-profile {
    flex: 0 0 100%;
  }

  .tm-hero h1 {
    font-size: 1.9rem;
  }
}