/* TDA people pages (Board / Leadership): the parts Elementor controls cannot express.
   The cards are an Elementor Loop (class tda-pcard on the card); this file adds the card's child hover effects,
   the mockup's 1080px two-column switch, and the profile pop-up built by tda-people.js. */

/* card children follow the card hover (Elementor styles the card itself) */
.tda-pcard{min-width:0}
.tda-pcard:hover img{transform:scale(1.03)}
.tda-pcard:hover > :last-child > :last-child,.tda-pcard:focus-visible > :last-child > :last-child{color:#D0202A}
/* mockup switches to two columns at 1080px (Elementor's tablet starts at 1024px) */
@media (max-width:1080px) and (min-width:1025px){
  .tda-people-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* ---------- profile pop-up ---------- */
#tda-profile{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;
  opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s;font-family:Inter,system-ui,sans-serif;line-height:1.6;color:#2E2E2E}
#tda-profile.open{opacity:1;visibility:visible}
#tda-profile[hidden]{display:none}
#tda-profile .modal-veil{position:absolute;inset:0;background:rgba(10,10,12,.72);backdrop-filter:blur(3px)}
#tda-profile .modal-card{position:relative;background:#fff;border-radius:20px;width:min(900px,100%);
  height:min(86vh,780px);display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 40px 100px -30px rgba(16,24,40,.6);
  transform:translateY(14px) scale(.985);transition:transform .3s cubic-bezier(.2,.7,.3,1)}
#tda-profile.open .modal-card{transform:none}
#tda-profile .modal-close{position:absolute;top:14px;right:14px;z-index:3;width:40px;height:40px;border-radius:10px;padding:0;
  border:1px solid #E7E9EC;background:#fff;display:grid;place-items:center;cursor:pointer;color:#2E2E2E;font-size:13.3333px;transition:.2s ease}
#tda-profile .modal-close:focus{background:#fff;color:#2E2E2E} /* beat Hello's pink button:focus */
#tda-profile .modal-close:hover{background:#D0202A;border-color:#D0202A;color:#fff}
#tda-profile .modal-close svg{width:17px;height:17px}
#tda-profile .modal-grid{display:grid;grid-template-columns:300px 1fr;align-items:stretch;flex:1;min-height:0;overflow:hidden}
#tda-profile .modal-photo{background:#fff;border-right:1px solid #F1F2F4;overflow:hidden}
#tda-profile .modal-photo img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
#tda-profile .modal-copy{padding:64px 38px 0;min-width:0;display:flex;flex-direction:column;min-height:0;height:100%}
#tda-profile .role{color:#D0202A;font-weight:700;font-size:14px;margin-bottom:6px}
#tda-profile h2{font-family:'Plus Jakarta Sans','Inter',sans-serif;font-size:27px;font-weight:800;color:#1A1A1A;line-height:1.25;letter-spacing:-.02em;margin:0}
#tda-profile .modal-tags{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0 20px}
#tda-profile .modal-tags[hidden]{display:none}
#tda-profile .modal-tags span{font-size:12px;font-weight:600;color:#5B616E;background:#FAFAFB;border:1px solid #E7E9EC;border-radius:999px;padding:5px 11px}
#tda-profile .modal-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:22px}
#tda-profile .modal-bio{margin-top:20px}
#tda-profile .modal-bio p{color:#5B616E;font-size:15px;margin:0 0 14px}
#tda-profile .modal-bio p:last-child{margin-bottom:0}
#tda-profile .modal-meta{list-style:none;padding:0;display:grid;gap:0;margin:22px 0 0;border-top:1px solid #E7E9EC}
#tda-profile .modal-meta li{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid #F1F2F4;font-size:14px}
#tda-profile .modal-meta b{color:#1A1A1A;font-weight:600}
#tda-profile .modal-meta span{color:#5B616E;min-width:0;overflow-wrap:anywhere}
#tda-profile .modal-mail{display:inline-flex;align-items:center;gap:9px;margin:18px 0 26px;min-height:44px;flex-shrink:0;align-self:flex-start;
  padding:11px 18px;border-radius:8px;background:#D0202A;color:#fff;font-weight:600;font-size:14.5px;text-decoration:none}
#tda-profile .modal-mail:hover{background:#A8161F}
#tda-profile .modal-mail svg{width:16px;height:16px}
#tda-profile .modal-nav{display:flex;gap:10px;align-items:center;padding:16px 38px 26px;flex-shrink:0;border-top:1px solid #E7E9EC}
#tda-profile .modal-nav button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 16px;
  border:1px solid #E7E9EC;border-radius:8px;background:#fff;cursor:pointer;
  font:inherit;font-size:14px;font-weight:600;color:#2E2E2E;transition:.2s ease}
#tda-profile .modal-nav button:hover:not(:disabled),#tda-profile .modal-nav button:focus:not(:disabled){border-color:#1A1A1A;background:#FAFAFB;color:#2E2E2E}
#tda-profile .modal-nav button:disabled{opacity:.4;cursor:not-allowed}
#tda-profile .modal-nav svg{width:14px;height:14px}
#tda-profile .count{margin-left:auto;font-size:13px;color:#6E7480}
#tda-profile :focus-visible{outline:3px solid #D0202A;outline-offset:3px}
body.modal-open{overflow:hidden}

@media (max-width:1080px){
  #tda-profile .modal-grid{grid-template-columns:220px 1fr}
  #tda-profile .modal-copy{padding:64px 28px 0}
  #tda-profile .modal-nav{padding:14px 28px 24px}
}
@media (max-width:760px){
  #tda-profile{padding:0}
  #tda-profile .modal-card{width:100%;height:100%;border-radius:0}
  #tda-profile .modal-grid{grid-template-columns:1fr;overflow-y:auto}
  #tda-profile .modal-photo{flex-shrink:0;min-height:240px}
  #tda-profile .modal-photo img{aspect-ratio:4/5;width:100%;height:auto;max-height:44vh;object-fit:cover;object-position:50% 12%}
  #tda-profile .modal-copy{padding:28px 20px 0;height:auto}
  #tda-profile .modal-scroll{overflow-y:visible;flex:none}
  #tda-profile h2{font-size:23px}
  #tda-profile .modal-meta li{grid-template-columns:1fr;gap:2px}
  #tda-profile .modal-nav{padding:12px 20px 22px;flex-wrap:wrap}
  #tda-profile .count{width:100%;margin:6px 0 0;order:3}
}
@media (max-width:900px) and (max-height:560px){
  #tda-profile .modal-grid{grid-template-columns:38% 1fr}
  #tda-profile .modal-photo{height:100%}
  #tda-profile .modal-photo img{width:100%;height:100%;max-height:none;object-fit:cover;object-position:50% 10%}
  #tda-profile .modal-copy{padding-top:22px}
  #tda-profile .modal-scroll{overflow-y:auto;flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){
  .tda-pcard,#tda-profile,#tda-profile .modal-card{transition:none!important}
  .tda-pcard:hover{transform:none}
}