/* CGS Core: People cards and modal. The card values match the Divi Blurb
   cards they replace, measured on prod 2026-09-24 (plan Task 2.4): a white
   card, 10px radius, soft shadow, photo edge to edge inside a 10px pad.
   Team photos are 5:7 and NAC photos are square, so the shape is per group. */
.cgs-people{margin:0 auto;max-width:1080px}
.cgs-people-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:30px;row-gap:30px;margin:0!important;padding:0!important;list-style:none!important}
@media (max-width:980px){.cgs-people-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.cgs-people-grid{grid-template-columns:minmax(0,1fr)}}
.cgs-people-grid li{margin:0!important;padding:0!important;list-style:none!important}
.cgs-people-team .cgs-people-grid{row-gap:50px}
.cgs-people-nac .cgs-people-grid{row-gap:25px}
@media (max-width:480px){.cgs-people .cgs-people-grid{row-gap:30px}}
.cgs-person{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;box-sizing:border-box;width:100%;height:100%;margin:0;padding:10px 10px 15px;border:0;border-radius:10px;background:#fff;box-shadow:0 2px 18px 0 #dee2e6;cursor:pointer;text-align:center;font:inherit;color:inherit;transition:transform 120ms ease-out}
.cgs-people-team .cgs-person{min-height:500px}
.cgs-people-nac .cgs-person{min-height:420px}
.cgs-person-photo{display:block;width:100%;height:auto;object-fit:cover;border-radius:0}
.cgs-people-team .cgs-person-photo{aspect-ratio:5/7}
.cgs-people-nac .cgs-person-photo{aspect-ratio:1/1}
.cgs-person:hover{transform:translateY(-2px)}
.cgs-person-name{display:block;margin-top:30px;padding-bottom:10px;font:700 20px/26px Montserrat,Arial,sans-serif;color:#343a40}
.cgs-person-role{display:block;margin-top:0;font:500 16px/27.2px "Roboto Flex",Arial,sans-serif;color:rgba(52,58,64,.85)}
.cgs-person:focus-visible{outline:3px solid #27318B;outline-offset:4px}
.cgs-pm{position:fixed;inset:0;z-index:2147483647;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(13,20,36,.6);opacity:0;transition:opacity 120ms ease-out}
.cgs-pm[hidden]{display:none}
.cgs-pm.is-open{opacity:1}
.cgs-pm-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:32px;width:100%;max-width:880px;max-height:92vh;overflow-y:auto;padding:64px 40px 40px;border-radius:12px;background:#fff;box-shadow:0 12px 40px rgba(0,0,0,.25)}
@media (max-width:680px){.cgs-pm-card{grid-template-columns:minmax(0,1fr);gap:20px;padding:64px 20px 24px}.cgs-pm-media img{max-width:220px;margin:0 auto}}
.cgs-pm-media img{display:block;width:100%;height:auto;border-radius:10px}
.cgs-pm-close{position:absolute;top:12px;right:12px;min-width:44px;min-height:44px;padding:0 14px;border:2px solid #27318B;border-radius:10px;background:#fff;color:#27318B!important;font:700 15px/1 Montserrat,Arial,sans-serif;cursor:pointer}
.cgs-pm-close:focus-visible{outline:3px solid #27318B;outline-offset:3px}
.cgs-pm-name{margin:0 0 4px!important;padding:0!important;font:700 26px/1.2 Montserrat,Arial,sans-serif!important;color:#27318B!important}
.cgs-pm-role{margin:0 0 16px!important;padding:0!important;font:600 16px/1.4 "Roboto Flex",Arial,sans-serif;color:#555}
.cgs-pm-role[hidden]{display:none}
.cgs-pm-bio p{margin:0 0 14px!important;padding:0!important;font:400 16px/1.6 "Roboto Flex",Arial,sans-serif;color:#343a40}
.cgs-pm-bio a{color:#27318B!important;text-decoration:underline}
body.cgs-pm-locked{overflow:hidden!important}
@media (prefers-reduced-motion:reduce){.cgs-pm{transition:none}}
@media (prefers-reduced-motion:reduce){.cgs-person{transition:none}.cgs-person:hover{transform:none}}
/* Board of Directors: a list with the full bio on the page. Desktop values
   match the Divi rows it replaces, measured on prod at 1024px on 2026-09-24:
   a white card, 30px padding, 10px radius, the #dee2e6 shadow, 40px apart,
   and Divi's own 1_4/3_4 split with its 5.5% gutter (156/41/550px there).
   Photos keep their own shape, as the Divi image module did. */
.cgs-people-list{margin:0!important;padding:0!important;list-style:none!important}
.cgs-member{display:grid;grid-template-columns:20.875% 73.625%;grid-template-rows:auto 1fr;column-gap:5.5%;box-sizing:border-box;margin:0 0 40px!important;padding:30px!important;list-style:none!important;border-radius:10px;background:#fff;box-shadow:0 2px 18px 0 #dee2e6}
.cgs-member-photo{grid-column:1;grid-row:1/3;align-self:start;display:block;width:100%;height:auto;border-radius:0}
.cgs-member-head{grid-column:2;grid-row:1}
.cgs-member-bio{grid-column:2;grid-row:2}
.cgs-member-name{margin:0!important;padding:0 0 10px!important;font:700 26px/33.8px Montserrat,Helvetica,Arial,Lucida,sans-serif!important;color:#27318B!important}
.cgs-member-role{margin:0!important;padding:0 0 10px!important;font:300 21px/27.3px "Roboto Flex",Arial,sans-serif!important;color:#27318B!important}
.cgs-member-bio p{margin:0!important;padding:0 0 1em!important;font:500 16px/27.2px "Roboto Flex",Arial,sans-serif;color:rgba(52,58,64,.85)}
.cgs-member-bio p:last-child{padding-bottom:0!important}
.cgs-member-bio a{color:#27318B!important;text-decoration:underline}
/* Phones: the one deliberate change. A 96px photo beside the name instead of
   a full-width one above every bio, which made the page 26,691px tall. */
@media (max-width:767px){.cgs-member{grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto auto;column-gap:16px;padding:20px!important;margin-bottom:24px!important}
.cgs-member-photo{grid-row:1;align-self:center}
.cgs-member-head{align-self:center}
.cgs-member-bio{grid-column:1/-1;grid-row:2;margin-top:16px}
.cgs-member-name{font-size:20px!important;line-height:26px!important}
.cgs-member-role{font-size:17px!important;line-height:23px!important}}