/* Listing pages (Projects, Communities, Cities). Builds on project.css, home.css and places.css. */

/* extra room under the hero text only where the search bar overlaps it (Projects page) */
.ls-hero:has(+ .v3-proof) .pl-hero-in{padding-bottom:120px}
.ls-hero{min-height:520px}
.opo-list .v3-proof + .ls-results{padding-top:70px}

/* Results header: title + count on the left, sort / filter on the right */
.ls-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 30px;flex-wrap:wrap;margin-bottom:30px}
.ls-head .mk-h2{margin:0 0 6px}
.ls-count{margin:0;font:400 17px/1.4 Roboto,sans-serif;color:var(--grey)}
.mk .ls-count a{color:var(--gold-d);text-decoration:underline;text-underline-offset:3px}
.ls-sort,.ls-filter{display:flex;flex-wrap:wrap;gap:8px}
.mk .ls-sort a,.ls-filter button,.mk .ls-filter button:hover,.mk .ls-filter button:focus{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:40px;border:1px solid var(--line);background:#fff;color:#000;font:500 15px/1 Roboto,sans-serif;text-decoration:none;cursor:pointer;box-shadow:none}
.mk .ls-sort a:hover,.mk .ls-filter button:hover{border-color:var(--gold)}
.mk .ls-sort a[aria-current="true"],.mk .ls-filter button[aria-pressed="true"]{background:#000;border-color:#000;color:var(--gold)}
.opo-card.is-hidden{display:none}

/* Browse index (dark): columns of links */
.ls-browse-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:30px 36px}
.ls-browse-col{border-top:2px solid var(--gold);padding-top:18px}
.ls-browse-col h3{font:600 19px/1.3 Poppins,sans-serif;text-transform:uppercase;margin:0 0 6px}
.mk .ls-browse-col h3 a{color:#fff;text-decoration:none}
.mk .ls-browse-col h3 a:hover{color:var(--gold)}
.ls-browse-col p{margin:0 0 12px;font:400 15px/1.4 Roboto,sans-serif;color:#cfcfcf}
.ls-browse-col ul{list-style:none;margin:0;padding:0}
.ls-browse-col li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.1);font:400 16px/1.4 Roboto,sans-serif}
.mk .ls-browse-col li a{color:#e9e9e9;text-decoration:none}
.mk .ls-browse-col li a:hover{color:var(--gold)}
.ls-browse-col li span{color:#9a9a9a;font-size:14px;white-space:nowrap}

/* City comparison table (on dark) */
.ls-table-wrap{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.ls-table{width:100%;border-collapse:collapse;font:400 17px/1.4 Roboto,sans-serif;color:#000}
.ls-table th,.ls-table td{padding:16px 22px;text-align:left;border-bottom:1px solid #eee6d6}
.ls-table thead th{background:#f5f0e8;font:600 13px/1.2 Poppins,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:#8f7a45}
.ls-table tbody tr:last-child th,.ls-table tbody tr:last-child td{border-bottom:0}
.ls-table tbody tr:hover{background:#faf8f4}
.mk .ls-table tbody th a{color:#000;font-weight:600;text-decoration:none}
.mk .ls-table tbody th a:hover{color:#8f7a45}

@media (max-width:767px){
 .ls-hero:has(+ .v3-proof) .pl-hero-in{padding-bottom:90px}
 .ls-head{align-items:flex-start}
 .ls-sort,.ls-filter{flex-wrap:nowrap;overflow-x:auto;width:100%;padding-bottom:4px;-webkit-overflow-scrolling:touch}
 .mk .ls-sort a,.ls-filter button{flex:none}
 .ls-table thead{display:none}
 .ls-table,.ls-table tbody,.ls-table tr,.ls-table th,.ls-table td{display:block;width:100%}
 .ls-table tr{border-bottom:1px solid #eee6d6;padding:10px 0}
 .ls-table th,.ls-table td{border:0;padding:6px 18px}
 .ls-table td{display:flex;justify-content:space-between;font-size:15px}
 .ls-table td::before{content:attr(data-label);color:#6b6b66}
}

/* Projects page: browse by city and community, one compact row per city */
.ls-where{background:var(--chip)}
.ls-where-head{display:grid;grid-template-columns:1fr 1fr;gap:20px 60px;align-items:end;margin-bottom:34px}
.ls-where-head .mk-h2{margin:0}
.ls-where-head .mk-p{margin:0}
.ls-rows{background:#fff;border-radius:14px;border:1px solid var(--line);box-shadow:0 24px 50px -34px rgba(60,45,10,.35)}
.ls-row{display:grid;grid-template-columns:300px 1fr;gap:20px 30px;align-items:center;padding:18px 26px;border-top:1px solid #f0ebe0}
.ls-row:first-child{border-top:0}
.mk a.ls-city{display:flex;align-items:center;gap:14px;text-decoration:none;color:#000}
.ls-city img{flex:none;width:56px;height:56px;border-radius:10px;object-fit:cover}
.ls-city b{display:block;font:600 19px/1.2 Poppins,sans-serif;text-transform:uppercase}
.ls-city small{display:block;margin-top:4px;font:400 15px/1.3 Roboto,sans-serif;color:var(--grey)}
.mk a.ls-city:hover b{color:var(--gold-d)}
.ls-pills{display:flex;flex-wrap:wrap;gap:8px}
.mk .ls-pills a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:40px;background:#f7f3ec;border:1px solid transparent;font:500 15px/1 Roboto,sans-serif;color:#000;text-decoration:none;transition:border-color .2s,background .2s}
.mk .ls-pills a:hover{background:#fff;border-color:var(--gold)}
.ls-pills i{font-style:normal;font-size:12px;font-weight:600;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#fff;color:var(--gold-d);display:inline-flex;align-items:center;justify-content:center}
.mk .ls-pills a.ls-all{background:transparent;color:var(--gold-d);padding:0 6px}
.mk .ls-pills a.ls-all:hover{border-color:transparent;text-decoration:underline}
@media (max-width:1024px){.ls-where-head{grid-template-columns:1fr}.ls-row{grid-template-columns:1fr;gap:14px}}
@media (max-width:767px){.ls-row{padding:16px}.ls-city img{width:48px;height:48px}}

/* City table polish */
.ls-table th.n,.ls-table td.n{text-align:center}
.ls-table td.zero{color:#b9b4a8}
.ls-table td.price{font:600 18px/1.2 Poppins,sans-serif;color:#8f7a45;white-space:nowrap}
.ls-table td.price small{font:500 12px Roboto,sans-serif;color:#6b6b66}
.mk .ls-table tbody th a{display:inline-flex;align-items:center;gap:14px}
.ls-table tbody th img{width:44px;height:44px;border-radius:8px;object-fit:cover;flex:none}
.ls-table tbody th span{font:600 17px/1.2 Poppins,sans-serif;text-transform:uppercase}
.ls-table td.go{text-align:right;white-space:nowrap}
.mk .ls-table td.go a{color:#8f7a45;font-weight:500;text-decoration:none}
.mk .ls-table td.go a:hover{text-decoration:underline}
.ls-table tbody td,.ls-table tbody th{vertical-align:middle}
@media (max-width:767px){.ls-table td.n,.ls-table td.price,.ls-table td.go{text-align:left}.ls-table td.go{justify-content:flex-end}.ls-table td.go::before{content:none}.ls-table td.zero{color:#9a9488}}
/* the theme adds cell borders and zebra stripes to every table: keep only the row lines */
.mk .ls-table th,.mk .ls-table td{border-left:0;border-right:0;border-top:0;background:transparent}
.mk .ls-table tbody tr:nth-child(odd)>td,.mk .ls-table tbody tr:nth-child(odd)>th{background:transparent}
.mk .ls-table tbody tr:hover>td,.mk .ls-table tbody tr:hover>th{background:#faf8f4}
.mk .ls-table thead th{background:#f5f0e8}
