/* Bezalel — Team page: staff card (photo + name + designation only) that opens a full
   profile in a modal on click. Layout here; open/close logic in js/team-staff.js. */

/* ---------- card face ---------- */
.card-staff{
  appearance:none;-webkit-appearance:none;
  display:block;width:100%;text-align:left;align-self:start;
  font-family:inherit;color:inherit;background:var(--card);cursor:pointer;
}
.card-staff-photo{position:relative;aspect-ratio:1/1;border-radius:16px;overflow:hidden;margin-bottom:16px;background:var(--cream-2);}
.card-staff-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block;transition:transform .5s ease;}
.card-staff:hover .card-staff-photo img,.card-staff:focus-visible .card-staff-photo img{transform:scale(1.06);}
/* Atley's source photo is a wider shot than everyone else's (more background, smaller
   face within frame) — scale it up so his face reads at the same size as the other
   cards instead of looking distant. Hover/focus keeps its own further nudge on top. */
.card-staff[data-staff-open="atley"] .card-staff-photo img{transform:scale(1.6);object-position:50% 100%;}
.card-staff[data-staff-open="atley"]:hover .card-staff-photo img,
.card-staff[data-staff-open="atley"]:focus-visible .card-staff-photo img{transform:scale(1.7);}
.card-staff h3{font-size:17px;margin:0 0 4px;text-align:center;}
/* Fixed to the tallest role line's height (3 lines, e.g. Amritha's) so every card matches
   it regardless of how short its own designation text is — no more uneven card heights
   across the grid. */
.card-staff-role{font-size:13px;line-height:1.4;color:var(--ink-muted);margin:0;text-align:center;min-height:68px;display:flex;align-items:center;justify-content:center;}

/* team grid only — tighter than the sitewide .card default so Sreya's shorter
   photo+name+role content doesn't leave a big blank gap under the row's taller cards */
.team-grid{gap:14px;}
.team-grid .card{padding:18px;}

/* ---------- modal ---------- */
.staff-modal{
  position:fixed;inset:0;z-index:200;
  visibility:hidden;opacity:0;
  transition:opacity .3s ease,visibility 0s linear .3s;
}
.staff-modal.is-open{visibility:visible;opacity:1;transition:opacity .3s ease;}
.staff-modal-backdrop{position:absolute;inset:0;background:rgba(16,42,66,.5);backdrop-filter:blur(3px);}
.staff-modal-panel{
  position:relative;z-index:1;
  margin:6vh auto;max-width:640px;max-height:88vh;overflow-y:auto;
  background:var(--card);border-radius:22px;padding:40px;
  box-shadow:0 30px 70px rgba(16,42,66,.28);
  transform:translateY(16px) scale(.98);opacity:0;
  transition:transform .35s cubic-bezier(.16,.72,.28,1),opacity .35s ease;
}
.staff-modal.is-open .staff-modal-panel{transform:translateY(0) scale(1);opacity:1;}
@media (max-width:640px){
  .staff-modal-panel{margin:0;max-width:none;max-height:100vh;height:100vh;border-radius:0;padding:28px 22px;}
}

.staff-modal-close{
  position:absolute;top:18px;right:18px;
  width:36px;height:36px;border-radius:50%;border:1px solid var(--border);
  background:var(--card);color:var(--navy);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.staff-modal-close svg{width:16px;height:16px;}
.staff-modal-close:hover{background:var(--navy);color:var(--cream);transform:rotate(90deg);}

.staff-modal-head{display:flex;align-items:center;gap:18px;margin-bottom:22px;}
.staff-modal-photo{width:88px;height:88px;border-radius:50%;overflow:hidden;flex-shrink:0;box-shadow:0 6px 16px rgba(16,42,66,.14);}
.staff-modal-photo img{width:100%;height:100%;object-fit:cover;display:block;}
[data-staff-profile="atley"] .staff-modal-photo img{transform:scale(1.6);object-position:50% 100%;}
.staff-modal-photo-placeholder{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--cream-2),#EFE0C4);color:var(--gold);
  border:1.5px dashed var(--cream-muted);box-shadow:none;
}
.staff-modal-photo-placeholder svg{width:44%;height:44%;opacity:.6;}
.staff-modal-head h3{margin:0 0 4px;font-size:22px;}
.staff-modal-role{margin:0;font-size:13.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--gold);font-weight:700;}

.staff-modal-body p{font-size:14.5px;line-height:1.7;color:var(--ink-muted);margin:0 0 16px;}
.staff-modal-body h4{font-size:15px;margin:22px 0 10px;color:var(--navy-deeper);}
.staff-modal-list{list-style:none;margin:0 0 4px;padding:0;display:grid;gap:9px;}
.staff-modal-list li{position:relative;padding-left:20px;font-size:14px;line-height:1.55;color:var(--ink-muted);}
.staff-modal-list li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;background:var(--gold);}

body.staff-modal-open{overflow:hidden;}

@media (prefers-reduced-motion:reduce){
  .card-staff-photo img,.staff-modal,.staff-modal-panel,.staff-modal-close{transition:none !important;}
}