/* =====================================================================
   listing-page.css
   ---------------------------------------------------------------------
   Listing-detail page styles for jeffreyjkatz.com

   Loads ALONGSIDE /css/modern-responsive1.css. The shared CSS provides
   header / nav / footer / typography; this file adds the listing-specific
   hero row (details on the LEFT, photo slider on the RIGHT) and the
   utility class .vg-nowrap.

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

/* ---------- Hero row ---------- */
.vg-listing-row {
  display: grid;
  grid-template-columns: 350px 481px;
  justify-content: center;
  align-items: start;
  max-width: 850px;
  margin: 0 auto;
  gap: 20px;
}

.vg-listing-details {
  text-align: center;
  padding-top: 30px;
}

.vg-listing-price {
  font: italic 400 2em/1.2 Verdana, sans-serif;
  text-decoration: underline;
  text-align: center;
  margin: 0 0 0.3em 0;
}

.vg-listing-features {
  display: inline-block;
  text-align: left;
  font-family: Arial, sans-serif;
  font-size: 1em;
  padding-left: 1.5em;
  margin: 0.3em 0;
  line-height: 1.8;
}
.vg-listing-features li { margin-bottom: 0.6em; }

.vg-listing-gallery {
  text-align: center;
  position: relative;
}

.vg-listing-cta {
  text-align: center;
  font-size: 1em;
  margin: 1.5em auto;
  max-width: 600px;
}
.vg-listing-cta p { margin: 0.5em 0; }

/* Utility: keep city/state on the same line (e.g. "Boynton Beach, FL") */
.vg-nowrap { white-space: nowrap; }

/* ---------- Responsive ---------- */

@media only screen and (max-width: 890px) {
  /* Match desktop H1->H2 spacing on listing pages (override site-wide
     vg-padd h1 rule in modern-responsive1.css) */
  .vg-padd h1 { margin-bottom: -20px; }

  .vg-listing-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .vg-listing-gallery { order: 1; }                       /* photo first when stacked */
  .vg-listing-details { order: 2; padding-top: 0; }
}

@media only screen and (max-width: 520px) {
  .vg-listing-details { padding-top: 20px; }
  /* Override modern-responsive1.css 370x250 box + 360x240 img cap so the
     slider scales up to ~480 wide and preserves desktop 481:324 aspect
     ratio. */
  .vg-listing-gallery #big_frame_new {
    width: 100%;
    max-width: 480px;
    height: auto;
    aspect-ratio: 481 / 324;
  }
  .vg-listing-gallery #big_frame_new img {
    width: calc(100% - 10px);
    max-width: calc(100% - 10px);
    height: calc(100% - 10px);
  }
}

/* ---------- Price + bullets share aligned left edge ---------- */
/* 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;
}