/* Optional layout tweaks */
.person { border-bottom: 2px solid var(--vantage-green); padding-bottom: 10px }
.person__summary { display:flex; align-items:center; gap:1rem; }

/* One button, icon drawn with CSS (no extra SVGs) */
.person__toggle{
  --size: 36px;
  position:relative;
  width:var(--size); height:var(--size);
  border:0; border-radius:999px;
}

.person__toggle::before,
.person__toggle::after{
  content:""; position:absolute; left:50%; top:50%;
  width:60%; height:2px;
  transform-origin:center;
  transition:transform 200ms ease, opacity 200ms ease;
}
.person__toggle::before{ transform:translate(-50%,-50%) rotate(0deg); }   /* — */
.person__toggle::after { transform:translate(-50%,-50%) rotate(90deg); }  /* | */

/* When open, morph + into × */
.person.is-open .person__toggle::before{ transform:translate(-50%,-50%) rotate(45deg); }
.person.is-open .person__toggle::after { transform:translate(-50%,-50%) rotate(-45deg); }

/* Reveal panel with transition (no display:none) */
.person__bio{
  overflow:hidden; max-height:0; opacity:0; visibility:hidden;
  transition:max-height 350ms ease, opacity 250ms ease, visibility 0s linear 350ms;
  /* Add your borders/background to match the design */
}
.person__bio-inner{ padding:1.25rem; }

.person.is-open .person__bio{
  max-height:1000px;  /* bigger than your tallest bio */
  opacity:1; visibility:visible;
  transition:max-height 350ms ease, opacity 250ms ease;
}

/* A11y helper */
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}


/* Grid responsiveness */
.team-grid { display:grid; gap:2rem; grid-template-columns:repeat(3,minmax(0,1fr)); }
.person__header {width: 50%;} 
@media (max-width:1024px){ .team-grid { grid-template-columns:repeat(2,1fr); } .person__header {width: 100%;} }
@media (max-width:767px){  .team-grid { grid-template-columns:1fr; } }

/* Person card */
.person__summary {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
@media (min-width: 768px){
.person__summary { display:flex; align-items:center; gap:1rem; }
}

/* The small plus button centered under each person */
.person__toggle{
  --size:28px;
  display:inline-flex; justify-content:center; align-items:center;
  width:var(--size); height:var(--size); border-radius:999px;
  background: transparent; text-decoration:none; position:relative;
  margin:.875rem auto 0; /* centers under the card */
}

.person__toggle .gb-shape {
    display: none;
}
/* draw + with two bars; we’ll swap to × when active */
.person__toggle::before,
.person__toggle::after{
  content:""; position:absolute; left:50%; top:50%;
  width:60%; height:2px; background:#000000; transform-origin:center;
  transition:transform .2s ease;
}
.person__toggle::before{ transform:translate(-50%,-50%) rotate(0deg); }
.person__toggle::after { transform:translate(-50%,-50%) rotate(90deg); }
/* active person turns plus into × */
.person.is-active .person__toggle::before{ transform:translate(-50%,-50%) rotate(45deg); }
.person.is-active .person__toggle::after { transform:translate(-50%,-50%) rotate(-45deg); }

/* Full-width expander below the grid */
.team__expander{
  position:relative;
  overflow:hidden;
  max-height:0; opacity:0; visibility:hidden;
  transition:max-height .35s ease, opacity .25s ease, visibility 0s linear .35s;
  background:#efeee7; /* light panel bg */
  border-top:2px solid #5b6d3c;
  margin-top:1.25rem;
}
/* “notch” that points at the clicked person; JS sets --notch-x */
.team__expander::before{
  content:"";
  position:absolute; top:-10px; left:var(--notch-x, 50%);
  width:20px; height:20px; border-radius:50%;
  background:#f5f7f2; border:2px solid #5b6d3c;
  transform:translateX(-50%);
}
.team__expander-inner{ padding:1.5rem; }

.team__expander.is-open{
  max-height:1200px; opacity:1; visibility:visible;
  transition:max-height .35s ease, opacity .25s ease;
}

/* Close button inside expander */
.team__close{
  position:absolute; right:.75rem; top:.5rem;
  width:32px; height:32px; border-radius:999px;
  background:#5b6d3c; color:#fff; line-height:32px; text-align:center;
  font-size:18px; text-decoration:none;
}
