/* =====================================================================
   listing-page-format2.css
   ---------------------------------------------------------------------
   Listing-Detail OLD page overrides (Format 2).
   Loads ALONGSIDE /css/modern-responsive1.css AND /css/listing-page.css
   on listing pages that use the older legacy markup (uppercase .JPG
   images at 414x311 native size, inline slideshow JS replaced by an
   adapter like 6839.js).

   Created: 2026-05-20
   ===================================================================== */

/* ---------- Slider sizing for Format 2 (414x311 native JPGs) ---------- */
/* Desktop only: frame 430x320 with asymmetric padding (more LEFT, less BOTTOM).
   Scoped to min-width: 891px so the ≤890px stack rule in listing-page.css
   wins on narrow viewports (picture on top, details below). */
@media only screen and (min-width: 891px) {
  .vg-listing-row {
    grid-template-columns: 350px 430px;
    margin-top: 1.5em;
  }
  #big_frame_new {
    width: 430px;
    height: 320px;
  }
  #big_frame_new img {
    margin-left: 8px !important;
    margin-top: 5px !important;
  }
}

/* Narrow viewports: keep the same 430px max-width as desktop (so the frame
   doesn't grow bigger when stacked). Also override aspect-ratio to 414:311
   (matches native image; not the 481:324 in listing-page.css's ≤520 rule). */
@media only screen and (max-width: 890px) {
  .vg-listing-gallery #big_frame_new {
    max-width: 430px;
    aspect-ratio: 414 / 311;
  }
}
@media only screen and (max-width: 520px) {
  .vg-listing-gallery #big_frame_new {
    max-width: 430px;
    aspect-ratio: 414 / 311;
  }
}

/* ---------- Price + bullets alignment ---------- */
/* Wraps a short price like "Sold" together with the bullets in one
   inline-block container so they share an aligned left edge. The price
   gets padding-left to align its text with the bullet text. */
.vg-listing-details .vg-listing-detail-block {
  display: inline-block;
  text-align: left;
}
.vg-listing-details .vg-listing-detail-block .vg-listing-price {
  text-align: left;
  padding-left: 1.5em;
}