/* listing-top — the top of every listing page (homes, land, commercial, rentals). Loaded after every other listing
   stylesheet; same root prefix. Taller photos; the key facts stay just left of Save / Share / Compare, larger and
   centred on the price row (number over label, thin dividers); and on desktop the professional's card sits directly
   beneath the actions, the address under the price and About right after it. */

/* Taller photos: about 12% more of the property in the collage. Phones keep their own swipe layout (reference-layout). */
html[data-aw-theme] body.pm-public main .aw-reference-property .aw-property-gallery-collage{aspect-ratio:976/345}
html[data-aw-theme] body.pm-public main .aw-reference-property.is-land-layout .aw-property-gallery-collage{aspect-ratio:976/330}

/* Key facts: larger numbers over darker labels, evenly divided, so the group carries weight beside the actions. */
html[data-aw-theme] body.pm-public main .aw-reference-property.aw-lp.aw-lpx .aw-lpx-summary .aw-lpx-keyfacts li{gap:3px;padding:0 24px;color:var(--lpx-text);font:500 15.5px/1.2 'Source Sans 3',system-ui,sans-serif}
html[data-aw-theme] body.pm-public main .aw-reference-property.aw-lp.aw-lpx .aw-lpx-summary .aw-lpx-keyfacts li:first-child{padding-left:0}
html[data-aw-theme] body.pm-public main .aw-reference-property.aw-lp.aw-lpx .aw-lpx-summary .aw-lpx-keyfacts li:last-child{padding-right:0}
html[data-aw-theme] body.pm-public main .aw-reference-property.aw-lp.aw-lpx .aw-lpx-summary .aw-lpx-keyfacts strong{font-size:28px;line-height:1.05}

/* Desktop: the summary and column wrappers lend their children to one page grid, so the professional's card starts
   right under the actions while the address and About fill the left. Phones and tablets keep their stacked order. */
@media (min-width:1100px){
 html[data-aw-theme] body.pm-public main .aw-reference-property.aw-lp.aw-lpx{display:grid;grid-template-columns:max-content minmax(0,1fr) var(--lpx-rail);grid-template-areas:"back back back" "gallery gallery gallery" "price facts actions" "place place rail" "main main rail" "lower lower lower" "disc disc disc";column-gap:var(--lpx-rail-gap);align-items:start}
 html[data-aw-theme] body.pm-public main .aw-reference-property.aw-lp.aw-lpx :is(.aw-lpx-summary,.aw-lpx-columns){display:contents}
 html[data-aw-theme] body.pm-public main .aw-reference-property.aw-lp.aw-lpx .aw-lpx-backrow{grid-area:back}
 html[data-aw-theme] body.pm-public main .aw-reference-property.aw-lp.aw-lpx .aw-property-gallery-collage{grid-area:gallery;margin-bottom:20px!important}
 html[data-aw-theme] body.pm-public main .aw-reference-property.aw-lp.aw-lpx .aw-lpx-summary .aw-lpx-price{grid-area:price;align-self:center;margin:4px 0 0}
 html[data-aw-theme] body.pm-public main .aw-reference-property.aw-lp.aw-lpx .aw-lpx-summary .aw-lpx-keyfacts{grid-area:facts;justify-self:end;justify-content:flex-end;align-self:center;margin:4px 4px 0 0!important;padding:0!important;border:0}
 html[data-aw-theme] body.pm-public main .aw-reference-property.aw-lp.aw-lpx .aw-lpx-summary .aw-lpx-actions{grid-area:actions;align-self:center;margin:4px 0 0}
 html[data-aw-theme] body.pm-public main .aw-reference-property.aw-lp.aw-lpx .aw-lpx-summary .aw-lpx-address{grid-area:place;margin-top:8px}
 html[data-aw-theme] body.pm-public main .aw-reference-property.aw-lp.aw-lpx .aw-lpx-main{grid-area:main;margin-top:12px}
 html[data-aw-theme] body.pm-public main .aw-reference-property.aw-lp.aw-lpx .aw-lpx-rail{grid-area:rail;margin-top:16px}
 html[data-aw-theme] body.pm-public main .aw-reference-property.aw-lp.aw-lpx .aw-lpx-lower{grid-area:lower}
 html[data-aw-theme] body.pm-public main .aw-reference-property.aw-lp.aw-lpx .aw-lpx-discovery{grid-area:disc}
}
/* Narrow desktop: long prices keep one row. */
@media (min-width:1100px) and (max-width:1279px){
 html[data-aw-theme] body.pm-public main .aw-reference-property.aw-lp.aw-lpx .aw-lpx-summary .aw-lpx-keyfacts li{padding:0 16px}
 html[data-aw-theme] body.pm-public main .aw-reference-property.aw-lp.aw-lpx .aw-lpx-summary .aw-lpx-keyfacts strong{font-size:24px}
}
/* Phones: the same headline facts, one size down. */
@media (max-width:759px){
 html[data-aw-theme] body.pm-public main .aw-reference-property.aw-lp.aw-lpx .aw-lpx-summary .aw-lpx-keyfacts li{padding:0 16px;font-size:14.5px}
 html[data-aw-theme] body.pm-public main .aw-reference-property.aw-lp.aw-lpx .aw-lpx-summary .aw-lpx-keyfacts strong{font-size:22px}
}

/* A worded key fact (the land type) sits smaller than the numbers beside it and wraps inside its box (Oct 9). */
html[data-aw-theme] body.pm-public main .aw-reference-property.aw-lp.aw-lpx .aw-lpx-summary .aw-lpx-keyfacts>li[data-text] strong{font-size:19px!important;line-height:1.2!important;letter-spacing:0;text-wrap:balance;overflow-wrap:anywhere}
@media(max-width:759px){html[data-aw-theme] body.pm-public main .aw-reference-property.aw-lp.aw-lpx .aw-lpx-summary .aw-lpx-keyfacts>li[data-text] strong{font-size:16px!important}}

/* The status flag (and a Price cut box while one applies) sits on its own row above the price on tablets and desktops
   too (owner, Oct 10); phones place it in their stacked layout (phone-layout.css). */
@media (min-width:760px){
 html[data-aw-theme] body.pm-public main .aw-reference-property.aw-lp.aw-lpx .aw-lpx-summary{grid-template-areas:"flags flags flags" "price facts actions" "place place ."}
 html[data-aw-theme] body.pm-public main .aw-reference-property.aw-lp.aw-lpx .aw-lpx-summary .aw-lpx-flags{grid-area:flags;margin:0 0 4px!important}
}
@media (min-width:760px) and (max-width:1099px){
 html[data-aw-theme] body.pm-public main .aw-reference-property.aw-lp.aw-lpx .aw-lpx-summary{grid-template-areas:"flags" "price" "place" "facts" "actions"}
}
@media (min-width:1100px){
 html[data-aw-theme] body.pm-public main .aw-reference-property.aw-lp.aw-lpx{grid-template-areas:"back back back" "gallery gallery gallery" "flags flags flags" "price facts actions" "place place rail" "main main rail" "lower lower lower" "disc disc disc"}
}

/* Tablets (owner, Oct 13): the summary reads like desktop. Price and address on the left, the key facts on the right of
   the same rows, Save / Share / Compare across the bottom. Phones keep their stacked layout (phone-layout.css). */
@media (min-width:760px) and (max-width:1099px){
 html[data-aw-theme] body.pm-public main .aw-reference-property.aw-lp.aw-lpx .aw-lpx-summary{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"flags flags" "price facts" "place facts" "actions actions";column-gap:28px}
 html[data-aw-theme] body.pm-public main .aw-reference-property.aw-lp.aw-lpx .aw-lpx-summary .aw-lpx-keyfacts{grid-area:facts;justify-self:end;align-self:center;justify-content:flex-end;margin:0!important}
 html[data-aw-theme] body.pm-public main .aw-reference-property.aw-lp.aw-lpx .aw-lpx-summary .aw-lpx-actions{margin:20px 0 0}
}