/* ===== Leadership Team ===== */
.about-leadership{ padding:56px 0; }
.text-center{text-align:center;}

.leaders-grid{
  display: flex;
  flex-flow: row;
  gap:48px;
  justify-self: anchor-center;
  align-items:start;
  justify-items:center;
}
.leader-card{text-align:center;max-width: 460px;justify-items: center;}

.leader-photo img{
  display:block; width:100%; height:auto;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}

/* NEW: torna a área da foto “clicável” visualmente */
.leader-photo{ cursor: pointer; } /* NEW */
.leader-photo[tabindex],                            /* NEW: caso tenha tabindex no HTML */
.leader-photo[role="button"]{ cursor: pointer; }    /* NEW */
.leader-photo[tabindex]:focus{                      /* NEW: foco acessível ao abrir com teclado */
  outline: 2px solid #27426B;
  outline-offset: 2px;
}

.leader-meta{margin-top:14px;/* color: #1D5F2B; */}
.leader-name{margin: 30px 0 10px;color: var(--mid-blue, #1D5F2B);text-align: center;/* font-family: Cairo; */font-size: 24px;font-style: normal;font-weight: 700;line-height: normal;}
 
.leader-role{
  opacity:.85;
  margin-bottom:12px;
  color: var(--light-blue, #7AA3CC);
  text-align: center;
  font-family: Cairo;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.leader-meta button {
    /* background-color: #27426B; */
    /* color: #fff; */
}

/* Modal */
.leader-modal-overlay{
  position:fixed; inset:0; display:none;
  align-items:center; justify-content:center;
  background:rgba(0,0,0,.55);
  padding:24px; z-index:1000;
  opacity: 0;                         /* NEW: suave */
  transition: opacity .2s ease;       /* NEW */
}

/* Modo de abrir via classe original */
.leader-modal-overlay.is-open{ 
  display:flex; 
  opacity: 1;                         /* NEW */
}

/* NEW: também abre se usar aria-hidden="false" (compatível com outro JS) */
.leader-modal-overlay[aria-hidden="false"]{
  display:flex;
  opacity:1;
}

.leader-modal{
  background:#fff; color:var(--dark-blue,#172232);
  width:min(1120px, 96vw);
  border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  position:relative; overflow:hidden;

  transform: scale(.98);              /* NEW: animação de zoom-in */
  transition: transform .2s ease;     /* NEW */
}

/* NEW: ao abrir (via classe ou aria), aplica o zoom-in */
.leader-modal-overlay.is-open .leader-modal,
.leader-modal-overlay[aria-hidden="false"] .leader-modal{
  transform: scale(1);
}

.leader-close{
  position:absolute;
  right:10px;
  top:6px;
  width:40px;
  height:40px;
  border:0;
  /* border-radius:50%; */
  background:transparent;
  font-size:28px;
  line-height:40px;
  cursor:pointer;
  color:#5b6b85;
}

.leader-modal-grid{
  display:grid; grid-template-columns: .95fr 1.05fr;
  gap:36px; padding:36px;
}
.leader-modal-photo img{
  display:block; width:100%; height:auto; border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.leader-modal-role{
  font-family: 'montserrat';
  font-size:15px;
  color: var(--mid-blue,#1D5F2B);
  margin:4px 0 14px;
}
.btn-layout .fa-user { margin-right: 6px; vertical-align: -1px; }

.leader-modal-bio p{ margin:0 0 12px; }

/* NEW: impede o scroll do body quando o modal abre */
body.modal-open{ overflow: hidden; }  /* NEW */

/* Responsivo */
@media (max-width:1024px){
  .leaders-grid{display:flex; flex-flow:column;  gap:36px; }
  .leader-modal-grid{ display:flex; flex-flow:column; gap:22px; padding:24px; }
}

 
@media (min-width: 1025px){
  .leader-modal-overlay{
    align-items: center;       
    padding: 48px 32px;      
    overflow-y: auto;         
  }
  .leader-modal{
    width: min(1120px, 90vw);
    max-height: calc(100vh - 96px);   
    overflow: auto;                    
    margin: 0 auto;
  }
  section.about-forward .container-lg {
    padding: 0 80px;
  }
  .leader-modal-grid{
    grid-template-columns: .95fr 1.05fr;
    gap: 32px;
    padding: 32px;
  }
  .leader-modal-photo img{
    max-height: none; /* sem limite no desktop */
    object-fit: contain;
  }
}

/* Mobile/tablet mantém o topo + overlay rolável */
@media (max-width: 1024px){
  .leader-modal-overlay{
    align-items: flex-start;
    padding: 16px 12px;
    overflow-y: auto;
  }
  .leader-modal{
    width: 100%;
    border-radius: 16px;
    max-height: none;
    overflow: visible;
  }
  .leader-modal-grid{
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 18px;
  }
  .leader-modal-photo img{
    max-height: 40dvh;  
    object-fit: contain;
  }
}