/* =========================================
   LISTING PAGE
========================================= */

.listing-page {
  max-width: 1280px;

  margin:
    24px auto
    48px;

  padding:
    0 20px;
}


/* =========================================
   LISTING CARD
========================================= */

.listing-detail-card {
  width: 100%;

  padding: 26px;

  box-sizing:
    border-box;

  background-color:
    #ffffff;

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

  border-radius:
    16px;

  box-shadow:
    0 8px 28px
    rgba(
      15,
      23,
      42,
      0.07
    );
}


/* =========================================
   TWO COLUMN LAYOUT
========================================= */

.listing-detail-columns {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(0, 0.95fr);

  align-items:
    stretch;

  gap:
    34px;

  width:
    100%;
}


/* =========================================
   LEFT COLUMN
========================================= */

.listing-detail-left {
  width:
    100%;

  min-width:
    0;
}


/* =========================================
   RIGHT COLUMN
========================================= */

.listing-detail-right {
  display:
    flex;

  width:
    100%;

  min-width:
    0;
}


.listing-detail-content {
  display:
    flex;

  flex-direction:
    column;

  flex:
    1;

  width:
    100%;

  min-width:
    0;

  min-height:
    100%;

  box-sizing:
    border-box;
}


/* =========================================
   SELLER BOX
========================================= */

.listing-seller-box {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  width:
    100%;

  padding:
    12px 16px;

  margin-bottom:
    14px;

  box-sizing:
    border-box;

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

  border:
    1px solid
    #dce4ed;

  border-radius:
    10px;
}


.listing-seller-info {
  min-width:
    0;
}


.listing-detail-label {
  margin:
    0 0 4px 0;

  color:
    #64748b;

  font-size:
    0.67rem;

  font-weight:
    850;

  text-transform:
    uppercase;

  letter-spacing:
    0.06em;
}


.listing-seller-link {
  display:
    inline-block;

  color:
    var(--blue);

  font-size:
    0.96rem;

  font-weight:
    800;

  text-decoration:
    underline;

  text-decoration-thickness:
    1px;

  text-underline-offset:
    3px;
}


.listing-seller-link:hover {
  color:
    var(--orange-dark);
}


.listing-posted-time {
  flex-shrink:
    0;

  margin:
    0;

  color:
    var(--light-muted);

  font-size:
    0.74rem;

  font-weight:
    500;

  white-space:
    nowrap;
}


/* =========================================
   LISTING HEADING
========================================= */

.listing-heading-area {
  width:
    100%;

  padding:
    4px 0 18px;

  margin-bottom:
    16px;

  box-sizing:
    border-box;

  border-bottom:
    1px solid
    #e7edf3;
}


.listing-detail-category {
  display:
    block;

  margin:
    0 0 8px 0;

  color:
    var(--orange-dark);

  font-size:
    0.72rem;

  font-weight:
    850;

  text-transform:
    uppercase;

  letter-spacing:
    0.065em;
}


.listing-heading-row {
  display:
    flex;

  align-items:
    baseline;

  justify-content:
    flex-start;

  flex-wrap:
    wrap;

  gap:
    14px;

  min-width:
    0;
}


.listing-detail-title {
  min-width:
    0;

  margin:
    0;

  color:
    var(--navy);

  font-size:
    2rem;

  font-weight:
    850;

  line-height:
    1.1;

  overflow-wrap:
    anywhere;
}


.listing-detail-price {
  flex-shrink:
    0;

  margin:
    0;

  color:
    var(--orange-dark);

  font-size:
    1.45rem;

  font-weight:
    900;

  line-height:
    1;

  white-space:
    nowrap;
}


/* =========================================
   MOBILE ITEM ACTIONS
========================================= */

.listing-mobile-item-actions {
  display:
    none;
}


/* =========================================
   STATUS NOTICES
========================================= */

.listing-status-notice,
.listing-detail-notice {
  width:
    100%;

  margin-bottom:
    16px;

  padding:
    11px 13px;

  box-sizing:
    border-box;

  border-radius:
    9px;

  font-size:
    0.85rem;

  font-weight:
    650;

  line-height:
    1.4;
}


/* =========================================
   DETAIL GRID
========================================= */

.listing-detail-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    12px;

  width:
    100%;

  margin-bottom:
    14px;

  box-sizing:
    border-box;
}


.listing-detail-item {
  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  width:
    100%;

  min-width:
    0;

  min-height:
    76px;

  padding:
    13px 15px;

  box-sizing:
    border-box;

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

  border:
    1px solid
    #dce4ed;

  border-radius:
    10px;

  box-shadow:
    0 2px 6px
    rgba(
      15,
      23,
      42,
      0.025
    );
}


.listing-detail-item-wide {
  grid-column:
    span 2;
}


.listing-detail-item
.listing-detail-label {
  margin-bottom:
    6px;
}


.listing-detail-value {
  margin:
    0;

  min-width:
    0;

  color:
    var(--navy);

  font-size:
    0.94rem;

  font-weight:
    750;

  line-height:
    1.35;

  overflow-wrap:
    anywhere;

  word-break:
    break-word;
}


/* =========================================
   STATUS BADGE
========================================= */

.listing-status-badge {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    fit-content;

  max-width:
    100%;

  padding:
    5px 10px;

  box-sizing:
    border-box;

  border-radius:
    999px;

  font-size:
    0.72rem;

  font-weight:
    800;

  line-height:
    1;

  white-space:
    nowrap;
}


.listing-status-badge.active {
  color:
    #166534;

  background-color:
    #dcfce7;

  border:
    1px solid
    #86efac;
}


.listing-status-badge.reserved {
  color:
    #9a3412;

  background-color:
    #fff7ed;

  border:
    1px solid
    #fdba74;
}


.listing-status-badge.sale_agreed {
  color:
    #92400e;

  background-color:
    #fef3c7;

  border:
    1px solid
    #fcd34d;
}


.listing-status-badge.sold {
  color:
    #475569;

  background-color:
    #f1f5f9;

  border:
    1px solid
    #cbd5e1;
}


/* =========================================
   DESCRIPTION
========================================= */

.listing-description-box {
  width:
    100%;

  min-width:
    0;

  padding:
    18px;

  margin-top:
    0;

  margin-bottom:
    18px;

  box-sizing:
    border-box;

  background:
    linear-gradient(
      135deg,
      #fbfcfe,
      #ffffff
    );

  border:
    1px solid
    #e1e7ee;

  border-radius:
    10px;
}


.listing-description-title {
  margin:
    0 0 10px 0;

  color:
    var(--navy);

  font-size:
    1.05rem;

  font-weight:
    800;
}


.listing-description-text {
  margin:
    0;

  color:
    #475569;

  font-size:
    0.92rem;

  line-height:
    1.6;

  white-space:
    pre-line;

  overflow-wrap:
    anywhere;

  word-break:
    break-word;
}


/* =========================================
   TABLET
========================================= */

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

  .listing-page {
    max-width:
      940px;

    padding:
      0 16px;
  }


  .listing-detail-card {
    padding:
      22px;
  }


  .listing-detail-columns {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

    gap:
      24px;
  }


  .listing-detail-title {
    font-size:
      1.75rem;
  }


  .listing-detail-price {
    font-size:
      1.3rem;
  }


  .listing-detail-item {
    min-height:
      72px;
  }

}


/* =========================================
   STACK COLUMNS
========================================= */

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

  .listing-detail-columns {
    grid-template-columns:
      1fr;

    gap:
      22px;
  }


  .listing-detail-right {
    display:
      block;
  }


  .listing-detail-content {
    min-height:
      0;
  }

}


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

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

  .listing-page {
    margin:
      10px auto
      32px;

    padding:
      0 10px;
  }


  .listing-detail-card {
    padding:
      14px;

    border-radius:
      12px;
  }


  .listing-seller-box {
    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      6px;
  }


  .listing-heading-area {
    padding-top:
      0;

    padding-bottom:
      14px;

    margin-bottom:
      14px;
  }


  .listing-heading-row {
    gap:
      10px;
  }


  .listing-detail-title {
    font-size:
      1.5rem;
  }


  .listing-detail-price {
    font-size:
      1.15rem;
  }


  /* message and save */

  .listing-mobile-item-actions {
    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap:
      8px;

    width:
      100%;

    margin-top:
      14px;
  }


  .listing-mobile-item-actions
  .button {
    width:
      100%;

    min-width:
      0;

    min-height:
      42px;

    margin:
      0;

    padding-left:
      10px;

    padding-right:
      10px;

    border-radius:
      8px;

    font-size:
      0.78rem;

    font-weight:
      750;
  }


  /* Save is now a POST form.
     Make the form fill its grid column
     so it keeps the same layout as before. */
  .listing-mobile-favourite-form {
    display:
      flex;

    width:
      100%;

    min-width:
      0;

    margin:
      0;
  }


  .listing-mobile-favourite-form
  .favourite-button {
    width:
      100%;
  }


  /* only stretch a direct button when
     it is genuinely the only action */
  .listing-mobile-item-actions
  > .button:only-child,
  .listing-mobile-item-actions
  > a.button:only-child {
    grid-column:
      1 / -1;
  }


  .listing-detail-grid {
    grid-template-columns:
      1fr;

    gap:
      8px;
  }


  .listing-detail-item {
    min-height:
      64px;
  }


  .listing-detail-item-wide {
    grid-column:
      span 1;
  }


  .listing-description-box {
    padding:
      15px;

    margin-bottom:
      14px;
  }

}


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

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

  .listing-detail-card {
    padding:
      12px;
  }


  .listing-heading-row {
    align-items:
      center;

    gap:
      8px;
  }


  .listing-detail-title {
    font-size:
      1.4rem;
  }


  .listing-detail-price {
    font-size:
      1.1rem;
  }


  .listing-mobile-item-actions {
    gap:
      7px;
  }

}