/* container global */
.container{ max-width: 1280px; margin: 0 auto; padding: 0 16px;}

/* secțiunea din pagina Psihologi */
.psihologi-section{ width: 100%; max-width: 1280px; margin: 24px auto;}

/* === GRILĂ CENTRATĂ 3-2-1 ===
   folosim coloane cu lățime controlată și le centrăm în container */
.grid-psy{
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(280px, 360px)); /* coloană între 280–360px */
  justify-content: center;  /* centrează blocul de coloane în secțiune */
;}

/* 2 coloane pe tabletă */
@media (max-width: 1100px){
  .grid-psy{
    grid-template-columns: repeat(2, minmax(280px, 360px));
    justify-content: center;}
}

/* 1 coloană pe telefon */
@media (max-width: 640px){
  .grid-psy{
    grid-template-columns: minmax(260px, 1fr);
    justify-content: center;}
}

/* cardul ocupă lățimea coloanei */
.psych-card{
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 12px; border-radius: 14px;}
.tile{ display: block; width: 100%;}

.psych-card .avatar{
  flex: 0 0 64px; width: 64px; height: 64px;
  border-radius: 12px; background: #2a2f3a;
  background-position: center; background-size: cover;}
.psych-card .meta{ flex: 1; min-width: 0;}
.psych-card .meta .title{ font-weight: 700;}
.psych-card .meta .sub{ color: var(--mv-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.psych-card .meta .price{ margin-top: 4px; font-weight: 600;}
/* Auth pages: login, register */
.auth-card{
  max-width: 760px;
  margin: 0 auto;
  padding: 22px;}

.auth-title{
  margin: 0 0 14px 0;}

.auth-form .form-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;}

.auth-form .field{
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;}

.auth-form .field label{
  margin: 0;}

.auth-form .field .input{
  width: 100%;
  box-sizing: border-box;}

.auth-form .full{
  grid-column: 1 / -1;}

.auth-form .actions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;}

@media (max-width: 820px){
  .auth-card{
    max-width: 560px;
    padding: 18px;}

  .auth-form .form-grid{
    grid-template-columns: 1fr;}

  .auth-form .actions{
    justify-content: stretch;}

  .auth-form .actions .btn{
    width: 100%;}
}