/* =========================================
   PROFILE PAGE
========================================= */

.public-profile-page {
  max-width: 1200px;

  margin:
    20px auto
    60px;
}


/* =========================================
   PROFILE SECTIONS
========================================= */

.public-profile-section {
  padding: 30px;

  margin-bottom: 34px;

  background-color:
    #ffffff;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-large);

  box-shadow:
    var(--shadow-small);

  scroll-margin-top:
    30px;
}


/* =========================================
   SECTION HEADING
========================================= */

.public-profile-section-heading {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding-bottom: 18px;

  margin-bottom: 26px;

  border-bottom:
    1px solid
    #f1d6ad;
}


.public-profile-section-heading
.title {
  margin-bottom: 5px;
}


.public-profile-section-heading
p {
  color:
    var(--muted);

  font-size:
    0.9rem;
}


/* =========================================
   SECTION COUNT
========================================= */

.public-profile-count {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;

  min-width: 44px;

  background-color:
    var(--orange-light);

  color:
    var(--orange-dark);

  border:
    1px solid
    #fed7aa;

  border-radius: 50%;

  font-size:
    0.9rem;

  font-weight: 850;
}


/* =========================================
   EMPTY STATE
========================================= */

.public-profile-empty {
  padding:
    48px 22px;

  text-align: center;

  color:
    var(--muted);

  background:
    linear-gradient(
      135deg,
      #f8fafc,
      #fffaf3
    );

  border:
    1px dashed
    var(--border-dark);

  border-radius:
    var(--radius);
}


.public-profile-empty
.title {
  margin-bottom: 8px;
}


.public-profile-empty
p {
  color:
    var(--muted);
}


/* =========================================
   MOBILE
========================================= */

@media screen and (max-width: 768px) {

  .public-profile-page {
    margin-top: 10px;
  }


  .public-profile-section {
    padding: 20px;
  }


  .public-profile-section-heading {
    align-items:
      flex-start;

    gap: 15px;
  }

}

/* =========================================
   SECTION SCROLL POSITION
========================================= */

#favourites {
  scroll-margin-top:
    90px;
}


#active-listings {
  scroll-margin-top:
    90px;
}


#sold-listings {
  scroll-margin-top:
    90px;
}


#reviews {
  scroll-margin-top:
    90px;
}


/* =========================================
   DESKTOP PROFILE PAGE WIDTH
========================================= */

@media screen and (min-width: 1060px) {

  .public-profile-page {
    width:
      min(
        calc(100% - 48px),
        1400px
      );

    max-width:
      none;

    margin-top:
      14px;

    margin-bottom:
      48px;
  }

}