/* PE A5 — Result Card Information Hierarchy (STAGING ONLY)
   Goal: Image → Price → Title → Location → Facts (no markup changes)
*/

/* Limit scope to results pages only by targeting the known page article wrappers */
article[class*="phase10-"] .phase10-grid,
article[class*="phase10-"] .phase10-results-grid,
article[class*="phase10-"] .phase10-cards,
article[class*="phase10-"] .pe-results-grid,
article[class*="phase10-"] .pe-cards {
  /* no layout changes here; A4 handled density */
}

/* Make each card body a column so we can reorder elements safely */
article[class*="phase10-"] .phase10-card,
article[class*="phase10-"] .pe-card,
article[class*="phase10-"] .wpl_prp_cont,
article[class*="phase10-"] .wpl_listing_container,
article[class*="phase10-"] .property-box,
article[class*="phase10-"] .card {
  /* if these wrappers exist, ensure column layout */
}

article[class*="phase10-"] .phase10-card .content,
article[class*="phase10-"] .pe-card .content,
article[class*="phase10-"] .wpl_prp_cont .wpl_prp_desc,
article[class*="phase10-"] .wpl_listing_container .wpl_prp_desc,
article[class*="phase10-"] .property-box .content,
article[class*="phase10-"] .card .content {
  display: flex;
  flex-direction: column;
}

/* --- PRICE as first textual anchor --- */
/* Many templates print price in a DIV with inline font-weight:700; capture that safely */
article[class*="phase10-"] .wpl_prp_desc div[style*="font-weight:700"],
article[class*="phase10-"] .wpl_prp_desc div[style*="font-weight: 700"],
article[class*="phase10-"] .wpl_prp_desc .price,
article[class*="phase10-"] .wpl_prp_desc .wpl_prp_price,
article[class*="phase10-"] .wpl_prp_desc .pe-price {
  order: 10;              /* above title/location/facts */
  margin-top: 10px !important;
  margin-bottom: 6px !important;
  font-weight: 700 !important;
  line-height: 1.15;
}

/* Slightly stronger price presence (neutral; no color changes) */
article[class*="phase10-"] .wpl_prp_desc div[style*="font-weight:700"],
article[class*="phase10-"] .wpl_prp_desc div[style*="font-weight: 700"],
article[class*="phase10-"] .wpl_prp_desc .price,
article[class*="phase10-"] .wpl_prp_desc .wpl_prp_price,
article[class*="phase10-"] .wpl_prp_desc .pe-price {
  font-size: 18px !important;
}

/* --- TITLE reduced (identifier, not headline) --- */
article[class*="phase10-"] .wpl_prp_desc h2,
article[class*="phase10-"] .wpl_prp_desc h3,
article[class*="phase10-"] .wpl_prp_desc .title,
article[class*="phase10-"] .wpl_prp_desc .wpl_prp_title,
article[class*="phase10-"] .wpl_prp_desc .pe-title {
  order: 20;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.25;
  margin: 0 0 6px 0 !important;
}

/* --- LOCATION subdued (secondary) --- */
article[class*="phase10-"] .wpl_prp_desc .location,
article[class*="phase10-"] .wpl_prp_desc .wpl_prp_location,
article[class*="phase10-"] .wpl_prp_desc .pe-location,
article[class*="phase10-"] .wpl_prp_desc p.location,
article[class*="phase10-"] .wpl_prp_desc p:first-of-type {
  order: 30;
  font-size: 14px !important;
  opacity: 0.8;
  margin: 0 0 10px 0 !important;
}

/* --- FACTS grouped + quiet (beds/baths/size/availability) --- */
article[class*="phase10-"] .wpl_prp_desc .facts,
article[class*="phase10-"] .wpl_prp_desc .wpl_prp_features,
article[class*="phase10-"] .wpl_prp_desc .wpl_prp_meta,
article[class*="phase10-"] .wpl_prp_desc .pe-facts,
article[class*="phase10-"] .wpl_prp_desc p {
  /* Keep paragraphs readable; tighten meta tone only via opacity */
}

article[class*="phase10-"] .wpl_prp_desc .wpl_prp_features,
article[class*="phase10-"] .wpl_prp_desc .wpl_prp_meta,
article[class*="phase10-"] .wpl_prp_desc .facts,
article[class*="phase10-"] .wpl_prp_desc .pe-facts {
  order: 40;
  font-size: 13px !important;
  opacity: 0.75;
  line-height: 1.35;
  margin: 0 !important;
}

/* If availability is its own line, keep it in the same calm group */
article[class*="phase10-"] .wpl_prp_desc .availability,
article[class*="phase10-"] .wpl_prp_desc .wpl_prp_availability,
article[class*="phase10-"] .wpl_prp_desc .pe-availability {
  order: 41;
  font-size: 13px !important;
  opacity: 0.75;
  margin-top: 6px !important;
}

/* Mobile: keep price strong but not oversized */
@media (max-width: 768px) {
  article[class*="phase10-"] .wpl_prp_desc div[style*="font-weight:700"],
  article[class*="phase10-"] .wpl_prp_desc div[style*="font-weight: 700"],
  article[class*="phase10-"] .wpl_prp_desc .price,
  article[class*="phase10-"] .wpl_prp_desc .wpl_prp_price,
  article[class*="phase10-"] .wpl_prp_desc .pe-price {
    font-size: 17px !important;
  }
}