/* Penny Brohn - the people grids behind [presa_team].

   The design system already carries the whole .pb-team component: the grid
   (columns from a --cols property), the card frame, the photo panel, the
   name, the role and the .view-bio link with its arrow. None of that is
   restated here. Only two things are missing from it.

   First, the design has no bio modal and its "Read bio" link goes nowhere,
   so a bio is a native disclosure instead: no JavaScript and keyboard
   accessible. That needs the summary marker suppressed and the arrow turned
   when it opens.

   Second, the trustees variant: small round photographs, names and roles
   only, no card frame. The design has this as .trustees-grid on a designed
   page. Its rules double the .pb-team--compact class, because the runtime
   emits every base rule as `.x, .fl-ds-block .x, .fl-ds-page .x` and
   .fl-ds-page .pb-team .person-card .photo-wrap already carries four
   classes. */

/* ---------- Bio, as a disclosure rather than a modal ---------- */

.pb-team .person-bio{margin-top:auto;}
.pb-team .person-bio>summary{list-style:none;cursor:pointer;}
.pb-team .person-bio>summary::-webkit-details-marker{display:none;}
.pb-team .person-bio>summary::after{transition:transform .15s ease;}
.pb-team .person-bio[open]>summary::after{transform:rotate(90deg);}
.pb-team .person-bio .bio{margin-top:12px;}
.pb-team .person-bio .bio p{font-family:'Mackinac',Georgia,serif;font-size:15px;line-height:1.6;color:var(--ds-color-navy,#23375A);margin:0 0 10px;}
.pb-team .person-bio .bio p:last-child{margin-bottom:0;}

/* ---------- Compact: trustees, names and roles only ---------- */

body .pb-team--compact.pb-team--compact .team-grid{gap:28px 24px;}
body .pb-team--compact.pb-team--compact .person-card{background:transparent;border:0;box-shadow:none;padding:0;text-align:center;align-items:center;cursor:default;}
body .pb-team--compact.pb-team--compact .person-card:hover{transform:translateY(-2px);box-shadow:none;border-color:transparent;}
body .pb-team--compact.pb-team--compact .person-card .photo-wrap{width:88px;height:88px;border-radius:50%;aspect-ratio:auto;margin-bottom:10px;overflow:hidden;}
body .pb-team--compact.pb-team--compact .person-card .photo-wrap img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;display:block;}
body .pb-team--compact.pb-team--compact .person-card h3{font-size:15px;line-height:1.25;margin-bottom:2px;}
body .pb-team--compact.pb-team--compact .person-card .role{font-size:13px;line-height:1.35;opacity:.7;margin:0;}

/* ---------- Photographs fill their panel ---------- */

body .pb-team.pb-team .person-card .photo-wrap{overflow:hidden;}
/* Portrait headshots are 900x1600 and the frame is square, so a centred crop
   takes the middle of the body and clips the top of the head. Bias it upward,
   which is where a face sits in a portrait headshot. */
body .pb-team.pb-team .person-card .photo-wrap img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;display:block;}

@media (max-width:560px){
	body .pb-team--compact.pb-team--compact .team-grid{grid-template-columns:repeat(2,1fr);}
}

/* ---------- The bio modal ----------

   The design has a full bio modal (.bio-modal and its card, photo, body and
   close button) as page CSS on Meet the Team; none of it is in the design
   system base, so it is restated here. It is a native <dialog>, so focus
   trapping, Escape and an inert background come from the browser rather than
   from script, and the <details> underneath still works with no JavaScript.

   These rules are retyped per the ruling, unlike the design file: the name is
   a plain heading so it takes Flink ExtraBold, and the bio is running text so
   it takes Mackinac. */

dialog.bio-modal{padding:0;border:0;background:transparent;max-width:min(760px,calc(100vw - 40px));max-height:calc(100vh - 80px);overflow:visible;color:var(--ds-color-navy,#23375A);}
dialog.bio-modal::backdrop{background:rgba(35,55,90,.55);backdrop-filter:blur(4px);}
.bio-modal-card{min-height:340px;position:relative;background:var(--ds-color-white,#FEFEFE);border-radius:18px;overflow:hidden;display:grid;grid-template-columns:280px 1fr;max-height:calc(100vh - 80px);box-shadow:0 30px 80px -20px rgba(35,55,90,.45);}
.bio-modal-photo{background-color:var(--ds-color-buff,#F4EFE9);overflow:hidden;}
.bio-modal-body{padding:36px 36px 32px;display:flex;flex-direction:column;overflow-y:auto;}
.bio-modal-close{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;background:var(--ds-color-white,#FEFEFE);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px -4px rgba(35,55,90,.4);color:var(--ds-color-navy,#23375A);}
.bio-modal-close:hover{color:var(--ds-color-teal,#1E6C82);}
.bio-modal-close svg{width:18px;height:18px;}
.bio-modal-body .eyebrow{font-family:'Flink',system-ui,Arial,sans-serif;font-weight:800;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ds-color-teal,#1E6C82);margin-bottom:10px;}
.bio-modal-body h2{font-family:'Flink',system-ui,Arial,sans-serif;font-weight:800;font-size:26px;line-height:1.14;color:var(--ds-color-navy,#23375A);margin:0 0 4px;}
.bio-modal-body .role{font-family:'Flink',system-ui,Arial,sans-serif;font-weight:700;font-size:14px;color:var(--ds-color-mulberry,#835263);margin:0 0 18px;text-transform:none;letter-spacing:0;}
.bio-modal-body .pb-modal-bio p{font-family:'Mackinac',Georgia,serif;font-weight:500;font-size:16px;line-height:1.65;color:var(--ds-color-navy,#23375A);margin:0 0 12px;}
.bio-modal-body .pb-modal-bio p:last-child{margin-bottom:0;}
.bio-modal-body .pb-modal-bio strong{font-family:'Flink',system-ui,Arial,sans-serif;font-weight:700;}

/* The enhanced trigger is a button, so it needs the link's own look back. */
.pb-team .person-card button.view-bio{margin-top:auto;background:transparent;border:0;padding:0 0 2px;cursor:pointer;text-align:left;}

@media (prefers-reduced-motion:no-preference){
	dialog.bio-modal[open]{animation:pb-bio-in .18s ease-out;}
	@keyframes pb-bio-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
}
@media (max-width:680px){
	.bio-modal-card{grid-template-columns:1fr;min-height:0;max-height:calc(100vh - 40px);}
	.bio-modal-photo{aspect-ratio:3/2;min-height:200px;}
	.bio-modal-body{padding:26px 22px;}
	dialog.bio-modal{max-height:calc(100vh - 40px);}
}

/* Trustees on Governance (audit, 20 October): the photos are 9:16
   portraits, so a square frame cut off the top of some heads. A 4:5
   portrait frame keeps every face, with the focal point high in the frame,
   and no photo needs resizing. */
body.page-id-357 .pb-team .person-card .photo-wrap.photo-wrap{aspect-ratio:4 / 5;}
body.page-id-357 .pb-team .person-card .photo-wrap.photo-wrap img{object-position:50% 18%;}