/* =========================================================
   DOCUBOX — Team page
   Loaded after styles.css; relies on its tokens and on the
   shared shell, header and footer rules.
   ========================================================= */

/* ---------- Hero band ---------- */
.team-hero{
  background:#FBBD1A;
  padding:0 24px;
}
.team-hero-shell{
  padding-block:52px 100px;
}
.team-hero h1{
  font-size:64px;
  line-height:80%;
  color:#2DB674;
}
.team-lede{
  max-width:50%;
  margin:24px auto 0 0;
  font-family:'Roboto',sans-serif;
  font-size:24px;
  color:#000000;
}

/* ---------- Grid ---------- */
.team-grid-section{ padding-bottom:128px; }
.team-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  max-width:1200px;
  margin:40px auto;
  padding:0 12px;
}

/* ---------- Card ---------- */
.md-team-card{
  --accent:#2DB674;
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  position:relative;
  transition:transform .25s ease, box-shadow .25s ease;
  min-height:360px;                 /* uniform height */
  display:flex;
  flex-direction:column;
  box-shadow:inset 0 4px 0 var(--accent), 0 2px 10px rgba(0,0,0,.06);
  cursor:pointer;
}
.md-team-card:hover{
  transform:translateY(-2px);
  box-shadow:inset 0 4px 0 var(--accent), 0 8px 24px rgba(0,0,0,.08);
}

/* Top image */
.md-card-top{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:28px 16px 18px;
}
.md-team-photo{
  object-fit:cover;
  background:#f0f0f0;
  border:6px solid #fff;
  transition:transform .25s ease, opacity .25s ease;
}

/* Text block */
.md-card-body{
  padding:18px 18px 26px;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:150px;                 /* keeps the caption areas even */
  transition:opacity .2s ease;
}
.md-card-name{
  margin:0;
  font-size:1.05rem;
  line-height:1.25;
  text-transform:uppercase;
  color:#fff;
  letter-spacing:.3px;
}
.md-card-role{
  margin:0;
  font-size:.95rem;
  font-weight:500;
  color:#fff;
}

/* Accent underline */
.md-card-name::after{
  content:"";
  display:block;
  width:44px;
  height:3px;
  margin:10px auto 0;
  background:var(--accent);
  border-radius:2px;
}

/* Bio overlay (hidden by default) */
.md-card-bio{
  position:absolute;
  inset:auto 0 0 0;                 /* bottom overlay */
  background:#fff;
  border-top:1px solid rgba(0,0,0,.06);
  max-height:0;
  opacity:0;
  transform:translateY(8px);
  transition:max-height .3s ease, opacity .25s ease, transform .25s ease;
  padding:0 18px;
  pointer-events:none;
}
.md-card-bio-scroll{
  padding:16px 0;
  max-height:160px;                 /* scrolls when the bio is long */
  overflow:auto;
  scrollbar-width:thin;
}
.md-card-bio p{
  margin:.4rem 0;
  color:#2d2d2d;
  line-height:1.5;
}

/* Hover / tap reveal */
.md-team-card:hover .md-card-bio,
.md-team-card.is-open .md-card-bio{
  max-height:240px;
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.md-team-card:hover .md-team-photo,
.md-team-card.is-open .md-team-photo{
  transform:translateY(-10px) scale(.92);
  opacity:.85;
}
.md-team-card:hover .md-card-body,
.md-team-card.is-open .md-card-body{
  opacity:0;
}

/* ---------- Breakpoints ---------- */
@media (max-width:1024px){
  .team-grid{ grid-template-columns:repeat(2,1fr); }
  .team-lede{ max-width:100%; }
  .team-hero-shell{ padding-block:44px 80px; }
}
@media (max-width:768px){
  .team-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:520px){
  .team-grid{ grid-template-columns:1fr; }
  .team-hero h1{ font-size:44px; }
  .team-lede{ font-size:19px; }
}