/* Find Your Claus directory-specific layout.
   Keep these overrides scoped to the directory so shared Base UI cards are unaffected. */

#profiles{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}

#profiles .profile-card{
  grid-template-columns:180px minmax(0,1fr);
  gap:18px;
  align-items:start;
  height:100%;
}

#profiles .profile-card img,
#profiles .profile-card .placeholder{
  width:180px;
  height:225px;
  border-radius:14px;
}

#profiles .profile-card img{
  object-fit:cover;
  object-position:center;
}

#profiles .profile-card .placeholder{
  display:grid;
  place-items:center;
  background:#eee;
  color:#777;
}

#profiles .profile-card h3{
  font-size:21px;
  line-height:1.15;
}

#profiles .profile-card .summary{
  line-height:1.4;
}

/* The individual profile is where a client is making a choice.
   Give the portrait strong visual priority instead of treating it as a thumbnail. */
#modalRoot .modal .profile-card{
  grid-template-columns:300px minmax(0,1fr);
  gap:24px;
  align-items:start;
}

#modalRoot .modal .profile-card img,
#modalRoot .modal .profile-card .placeholder{
  width:300px;
  height:375px;
  border-radius:16px;
}

#modalRoot .modal .profile-card img{
  object-fit:cover;
  object-position:center;
}

#modalRoot .modal .profile-card .placeholder{
  display:grid;
  place-items:center;
  background:#eee;
  color:#777;
}

/* Once two directory columns would squeeze the biography too tightly, return to a single card column
   but keep the larger directory portrait. */
@media(max-width:980px){
  #profiles{grid-template-columns:1fr}
}

@media(max-width:760px){
  #modalRoot .modal .profile-card{
    grid-template-columns:220px minmax(0,1fr);
    gap:18px;
  }

  #modalRoot .modal .profile-card img,
  #modalRoot .modal .profile-card .placeholder{
    width:220px;
    height:275px;
  }
}

@media(max-width:680px){
  #profiles .profile-card{
    grid-template-columns:125px minmax(0,1fr);
    gap:14px;
  }

  #profiles .profile-card img,
  #profiles .profile-card .placeholder{
    width:125px;
    height:156px;
  }
}

@media(max-width:560px){
  #modalRoot .modal .profile-card{
    grid-template-columns:1fr;
  }

  #modalRoot .modal .profile-card img,
  #modalRoot .modal .profile-card .placeholder{
    width:min(100%,280px);
    height:auto;
    aspect-ratio:4/5;
  }
}

@media(max-width:460px){
  #profiles .profile-card{
    grid-template-columns:105px minmax(0,1fr);
  }

  #profiles .profile-card img,
  #profiles .profile-card .placeholder{
    width:105px;
    height:131px;
  }
}