/* /v2/listing: one Ghosla listing. Gallery, facts and the side card reuse search.css (.gal, .d-cols, .facts, .d-card). */
.lp { padding-top: 24px; padding-bottom: 64px; }
.lp-empty { max-width: 560px; margin: 80px auto; text-align: center; }
.lp-empty h1 { font-size: 22px; font-weight: 700; }

.lp-gal { position: relative; grid-template-rows: 200px 200px; }
.lp-gal.n1 { grid-template-columns: 1fr; grid-template-rows: 420px; }
.lp-gal.n2 { grid-template-columns: 1fr 1fr; grid-template-rows: 400px; }
.lp-gal.n3 { grid-template-columns: 2fr 1fr; }
.lp-gal.n4 { grid-template-columns: 2fr 1fr 1fr; }
.lp-gal.n4 .lp-ph:nth-child(4) { grid-column: span 2; }
.lp-gal.n5 { grid-template-columns: 2fr 1fr 1fr; }
.lp-gal.n1 .lp-ph:first-child, .lp-gal.n2 .lp-ph:first-child { grid-row: auto; }
.lp-ph { padding: 0; border: 0; background: var(--bg2); cursor: zoom-in; overflow: hidden; min-height: 0; }
.lp-ph:first-child { grid-row: span 2; }
.lp-ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .15s; }
.lp-ph:hover img { filter: brightness(.92); }
.lp-all { position: absolute; right: 16px; bottom: 16px; height: 36px; padding: 0 16px; border-radius: 20px; border: 0; background: var(--card); color: var(--ink); font: 600 13px var(--font); box-shadow: var(--lift-lg); cursor: pointer; }

.lp-cols { margin-top: 8px; }
.lp-h { margin: 0 0 4px; font-size: 26px; font-weight: 700; }
.lp-sub { margin: 0; }
.lp-meta { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.lp-by { padding: 2px 10px; border-radius: 20px; background: var(--amber); color: var(--on-amber); font-weight: 600; }
.lp-split { margin-top: 0; padding-top: 4px; border-top: 0; }
.lp-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-tags span { padding: 6px 14px; border-radius: 20px; background: var(--bg2); font-size: 13px; }
.lp-review { padding: 16px 18px; border-radius: 18px; background: var(--card); box-shadow: var(--ring); }
.lp-review p { margin: 6px 0 0; }
.lp-stars { color: var(--amber); font-size: 18px; letter-spacing: 2px; }
.lp-stars span { color: var(--line); }
.lp-vids { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.lp-vids video { width: 100%; border-radius: 14px; background: #000; }
.lp-addr { margin: 0 0 10px; }
.lp-map { height: 320px; border-radius: 18px; overflow: hidden; background: var(--bg2); }
.lp-pin { width: 22px; height: 22px; border-radius: 50%; background: var(--pink); border: 3px solid #fff; box-shadow: 0 0 0 10px rgba(233, 30, 99, .18), 0 2px 6px rgba(26, 10, 50, .35); }

.lp-card { top: 96px; }
.lp-side { top: 96px; }
.lp-nego { margin-left: 6px; padding: 2px 10px; border-radius: 20px; background: var(--amber-soft); font-size: 12px; font-weight: 600; vertical-align: middle; }
.lp-fee, .lp-visit, .lp-how { margin: 0; font-size: 14px; }
.lp-visit { color: var(--muted); }
.lp-call { width: 100%; margin-bottom: 8px; }
.lp-stores { display: flex; gap: 8px; margin-top: 10px; }
.lp-stores img { display: block; height: 42px; width: auto; }
#lpContact .fine { margin: 2px 0 0; font-size: 12px; color: var(--muted); }

.lp-view { position: fixed; inset: 0; z-index: 100; background: rgba(10, 4, 20, .94); display: flex; align-items: center; justify-content: center; }
.lp-view[hidden] { display: none; }
.lp-view img { max-width: calc(100vw - 180px); max-height: calc(100vh - 100px); object-fit: contain; border-radius: 8px; }
.lp-x, .lp-nav { position: absolute; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; }
.lp-x { top: 20px; right: 24px; width: 40px; height: 40px; font-size: 16px; }
.lp-nav { top: 50%; width: 48px; height: 48px; margin-top: -24px; font-size: 26px; line-height: 1; }
.lp-prev { left: 24px; }
.lp-next { right: 24px; }
.lp-x:hover, .lp-nav:hover { background: rgba(255, 255, 255, .26); }
.lp-count { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 13px; }
.lp-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.lp-save { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 36px; padding: 0 12px; border: 0; border-radius: 20px; background: none; color: var(--ink); font: 600 14px var(--font); text-decoration: underline; cursor: pointer; }
.lp-save:hover { background: var(--bg2); }
.lp-save svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 2.4; }
.lp-save.is-on svg { fill: var(--pink); stroke: var(--pink); }
.lp-save.is-on span::after { content: "d"; }
.lp-save.is-busy { opacity: .5; }
.lp-how a { color: var(--pink); }
/* phones: swipeable photos, two facts a row, price and contact fixed at the bottom */
@media (max-width: 760px) {
  .lp { padding-top: 0; padding-bottom: 200px; }
  .lp-gal, .lp-gal.n1, .lp-gal.n2, .lp-gal.n3, .lp-gal.n4, .lp-gal.n5 { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    gap: 6px; margin: 0 calc(-1 * var(--gut)) 18px; padding: 0 var(--gut); scroll-padding: 0 var(--gut); border-radius: 0; grid-template-rows: none; }
  .lp-gal::-webkit-scrollbar { display: none; }
  .lp-ph, .lp-gal .lp-ph:first-child { flex: 0 0 88%; aspect-ratio: 4 / 3; scroll-snap-align: start; grid-row: auto; grid-column: auto !important; border-radius: 16px; cursor: pointer; }
  .lp-gal.n1 .lp-ph { flex-basis: 100%; }
  .lp-all { display: none; }
  .lp-h { font-size: 22px; }
  .lp-top { gap: 8px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
  .lp-map { height: 240px; }
  .lp-side { margin-top: 20px; }
  .lp-side .lp-card { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 55; gap: 8px; border-radius: 20px 20px 0 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -8px 30px -12px rgba(26, 10, 50, .35); }
  .lp-card .d-rent { font-size: 17px; }
  .lp-card .lp-visit, .lp-card .fine { display: none; }
  .lp-card #lpContact { display: flex; flex-wrap: wrap; gap: 8px; }
  .lp-card .lp-call { flex: 1 1 auto; width: auto; margin: 0; }
  .lp-card .lp-how { font-size: 13px; color: var(--muted); flex-basis: 100%; }
  .lp-card .lp-stores { margin-top: 0; }
  .lp-card .lp-stores img { height: 38px; }
  .lp-view img { max-width: 100vw; max-height: calc(100dvh - 140px); border-radius: 0; }
  .lp-nav { top: auto; bottom: 18px; margin-top: 0; }
  .lp-prev { left: 16px; } .lp-next { right: 16px; }
  .lp-x { top: 14px; right: 14px; }
}
/* "Where it is" heading with Get directions on the same row */
.lp-where { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lp-where h3 { margin-bottom: 8px; }
.lp-dir { height: 36px; padding: 0 14px; font-size: 13px; flex: none; margin-top: 16px; }
.lp-acts { display: flex; flex: none; gap: 2px; }
.lp-share svg { fill: none; stroke: var(--ink); stroke-width: 2.2; }
.lp-report { display: inline-flex; align-items: center; gap: 10px; margin: 28px 0 0; padding: 10px 0; border: 0; background: none; color: var(--ink); font: 600 14px var(--font); text-decoration: underline; cursor: pointer; }
.lp-report svg { flex: none; }
.lp-edit { width: 100%; margin-top: 12px; }
.lp-rep h2 { margin: 0 0 4px; font-size: 22px; }
.lp-rep > p { margin: 0 0 14px; }
.lp-reasons { display: grid; gap: 8px; margin: 0 0 16px; }
.lp-reason { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--card); box-shadow: var(--ring); cursor: pointer; }
.lp-reason:has(input:checked) { box-shadow: inset 0 0 0 2px var(--amber); }
.lp-reason { position: relative; }
.lp-reason input { position: absolute; opacity: 0; pointer-events: none; }
.lp-reason span::before { content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 10px; vertical-align: -4px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--muted); }
.lp-reason:has(input:checked) span::before { border-color: var(--pink); background: radial-gradient(circle, var(--pink) 0 4px, transparent 4.5px); }
.lp-reason:has(input:focus-visible) { outline: 2px solid var(--pink); outline-offset: 2px; }
.lp-rep .btn:disabled { opacity: .45; cursor: default; }
.lp-amen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; align-items: start; }