/* v1.4.36 — slightly larger role typography/cards, same width; raise school photo crop. */

@media (min-width:981px){
  /* Width remains exactly as v1.4.34/v1.4.35. */
  .ef-access,
  .ef-access-head,
  .ef-role-list,
  .ef-role{
    width:276px!important;
    max-width:276px!important;
  }

  /* Role text is slightly larger; card height follows while keeping width unchanged. */
  .ef-role{
    height:64px!important;
    min-height:64px!important;
    grid-template-columns:44px minmax(0,1fr) 14px!important;
    padding:8px 13px 8px 8px!important;
  }
  .ef-role-icon{
    width:44px!important;
    height:44px!important;
  }
  .ef-role-icon svg{
    width:22px!important;
    height:22px!important;
  }
  .ef-role-name{
    font-size:1.58rem!important;
    line-height:1!important;
  }

  /* Pull the photo upward without changing the X crop from v1.4.35. */
  body.guardrail-landing{
    background-position:center center,center center,center center,100% 45%!important;
  }
}

@media (min-width:1500px){
  body.guardrail-landing{
    background-position:center center,center center,center center,100% 44%!important;
  }
}

/* Short laptop: preserve no-scroll behavior while still increasing role readability. */
@media (min-width:981px) and (max-height:760px){
  .ef-access,
  .ef-access-head,
  .ef-role-list,
  .ef-role{
    width:260px!important;
    max-width:260px!important;
  }
  .ef-role{
    height:58px!important;
    min-height:58px!important;
    grid-template-columns:40px minmax(0,1fr) 13px!important;
    padding:7px 12px 7px 7px!important;
  }
  .ef-role-icon{
    width:40px!important;
    height:40px!important;
  }
  .ef-role-icon svg{
    width:20px!important;
    height:20px!important;
  }
  .ef-role-name{
    font-size:1.42rem!important;
  }
  body.guardrail-landing{
    background-position:center center,center center,center center,100% 40%!important;
  }
}

@media (min-width:981px) and (max-height:680px){
  .ef-access,
  .ef-access-head,
  .ef-role-list,
  .ef-role{
    width:248px!important;
    max-width:248px!important;
  }
  .ef-role{
    height:55px!important;
    min-height:55px!important;
  }
  .ef-role-name{
    font-size:1.34rem!important;
  }
}

/* Tablet/phone keep the established responsive layout. */
@media (max-width:980px){
  .ef-role-name{font-size:1.15rem!important;}
}