/* Rental listing (public page ogloszenie.html and the preview in the app). Uses the app's colour tokens.
   Layout follows the width of the listing itself (container queries), so the preview in the app looks like the page. */
.lst-wrap{container-type:inline-size}
.lst{--r:18px;max-width:1120px;margin:0 auto;display:flex;flex-direction:column;gap:22px;container-type:inline-size}
.lst h2{font-family:var(--font-display);font-size:1.15rem;margin:0 0 10px;letter-spacing:-.01em}
.lst-note{color:var(--muted);font-size:.86rem;margin:6px 0 0}

/* gallery: one big photo and up to four smaller ones; "all photos" opens the viewer */
.lst-gallery{position:relative;display:grid;gap:8px;border-radius:var(--r);overflow:hidden;background:var(--line);aspect-ratio:3/2}
.lst-gallery button{padding:0;border:0;margin:0;background:var(--line);cursor:zoom-in;overflow:hidden;min-height:0}
.lst-gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.lst-gallery button:hover img{transform:scale(1.03)}
.lst-gallery .g1,.lst-gallery .g2,.lst-gallery .g3,.lst-gallery .g4{display:none}
.lst-all{position:absolute;right:12px;bottom:12px;padding:8px 14px!important;border-radius:999px!important;background:rgba(255,255,255,.92)!important;color:#0c1a16;font:600 .86rem var(--font-body);box-shadow:0 4px 16px rgba(0,0,0,.25);cursor:pointer!important}
@container (min-width:700px){
  .lst-gallery{aspect-ratio:auto;height:min(460px,52cqw)}
  .lst-gallery.n2{grid-template-columns:2fr 1fr}
  .lst-gallery.n3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr}
  .lst-gallery.n4,.lst-gallery.n5{grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr}
  .lst-gallery:not(.n1) .g0{grid-row:1/-1}
  .lst-gallery.n2 .g1,.lst-gallery.n3 .g1,.lst-gallery.n3 .g2,.lst-gallery.n4 .g1,.lst-gallery.n4 .g2,.lst-gallery.n4 .g3,
  .lst-gallery.n5 .g1,.lst-gallery.n5 .g2,.lst-gallery.n5 .g3,.lst-gallery.n5 .g4{display:block}
  .lst-gallery.n4 .g3{grid-column:2/-1}
}

/* title */
.lst-head{display:flex;flex-direction:column;gap:6px}
.lst-kicker{margin:0;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.lst-head h1{font-family:var(--font-display);font-size:clamp(1.5rem,4.2cqw,2.3rem);line-height:1.15;margin:0;letter-spacing:-.02em}
.lst-loc{color:var(--muted);margin:0}
.lst-hl{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.lst-hl li{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 70%,transparent);font-size:.9rem;font-weight:500}
.lst-rented{margin:6px 0 0;padding:10px 14px;border-radius:10px;background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--ink)}

/* body: content and the sticky side card */
.lst-body{display:grid;gap:22px}
.lst-side{order:-1} /* narrow: price, calendar and contact right under the title */
@container (min-width:900px){
  .lst-body{grid-template-columns:minmax(0,1fr) 380px;align-items:start;gap:36px}
  .lst-side{order:0;position:sticky;top:16px}
}
.lst-main{display:flex;flex-direction:column;gap:26px;min-width:0}
.lst-main section{padding-bottom:22px;border-bottom:1px solid var(--line)}
.lst-main section:last-child{border-bottom:0}
.lst-desc p{white-space:pre-line;margin:0;font-size:1.02rem;line-height:1.65;text-wrap:pretty;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
@container (min-width:600px){.lst-desc p{text-align:justify}}
.lst-facts{display:grid;grid-template-columns:minmax(150px,max-content) 1fr;gap:8px 18px;margin:0}
.lst-facts dt{color:var(--muted)}
.lst-facts dd{margin:0;font-weight:500}
.lst-extras ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.lst-extras li{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:12px}
.lst-ex-ico{font-size:1.4rem;line-height:1}
.lst-ex-note{display:block;color:var(--muted);font-size:.88em;margin-top:2px}

.lst-card{display:flex;flex-direction:column;gap:14px;padding:20px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:0 10px 40px rgba(0,0,0,.08)}
.lst-price{font-family:var(--font-display);font-size:1.8rem;font-weight:800;margin:0;color:var(--ink);letter-spacing:-.02em}
.lst-price span{font-size:1rem;font-weight:500;color:var(--muted)}
.lst-fee{margin:-10px 0 0;color:var(--muted);font-size:.92rem}
.lst-contact{display:flex;flex-direction:column;gap:12px;padding-top:14px;border-top:1px solid var(--line)}
.lst-card > .lst-contact:first-child,.lst-price + .lst-contact,.lst-fee + .lst-contact{border-top:0;padding-top:0}
.lst-who{display:flex;align-items:center;gap:10px;margin:0;font-weight:600}
.lst-who small{display:block;color:var(--muted);font-weight:400;font-size:.8rem}
.lst-avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);font-weight:700}
.lst-cta{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.lst-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 18px;border-radius:12px;background:var(--accent);color:var(--accent-ink);text-decoration:none;font:600 1rem var(--font-body);border:1px solid var(--accent);cursor:pointer}
.lst-btn:hover{filter:brightness(1.06)}
.lst-btn.ghost{background:transparent;color:var(--accent)}
.lst-btn[disabled]{opacity:.45;cursor:not-allowed;filter:none}
.lst-side .lst-cta .lst-btn{flex:1 1 140px}

/* map: loaded only after a click */
.lst-map-box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:200px;border-radius:14px;margin-bottom:12px;text-align:center;color:var(--muted);font-size:.9rem;padding:16px;
  background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--accent) 6%,transparent) 0 12px,transparent 12px 24px),var(--surface);border:1px solid var(--line)}
.lst-map-box p{margin:0}
.lst-map-box.on{padding:0;border:0;min-height:0}
.lst-map-box iframe{width:100%;height:340px;border:0;border-radius:14px;display:block}

/* booking box */
.bk-h{font-size:1rem!important;margin:0!important}
.bk-dates{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.bk-dates button{padding:9px 12px;border:0;background:transparent;color:var(--ink);text-align:left;font:600 .95rem var(--font-body);cursor:pointer}
.bk-dates button + button{border-left:1px solid var(--line)}
.bk-dates button.on{box-shadow:inset 0 -3px 0 var(--accent)}
.bk-dates small{display:block;font-size:.72rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.bk-cal{position:relative}
.bk-nav{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;pointer-events:none}
.bk-nav button{pointer-events:auto;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:1.2rem;line-height:1;cursor:pointer}
.bk-nav button[disabled]{opacity:.3;cursor:default}
.bk-months{display:grid;gap:18px}
@container (min-width:1100px){.lst-side .bk-months{grid-template-columns:1fr}}
.bk-month{width:100%;border-collapse:collapse;table-layout:fixed}
.bk-month caption{font-weight:700;text-transform:capitalize;padding:6px 0 10px;font-family:var(--font-display)}
.bk-month th{font-size:.72rem;font-weight:600;color:var(--muted);padding-bottom:4px}
.bk-month td{padding:2px 0;text-align:center}
.bk-d{display:inline-grid;place-items:center;width:100%;max-width:40px;aspect-ratio:1;border-radius:10px;border:0;background:transparent;color:var(--ink);font:500 .9rem var(--font-body);cursor:pointer;padding:0}
button.bk-d:hover:not([disabled]){background:color-mix(in srgb,var(--accent) 16%,transparent)}
.bk-d.past{color:var(--muted);opacity:.4;cursor:default}
.bk-d.busy{color:var(--muted);text-decoration:line-through;background:color-mix(in srgb,var(--muted) 12%,transparent)}
.bk-d.in-range{background:color-mix(in srgb,var(--accent) 18%,transparent);border-radius:0}
.bk-d.sel-from,.bk-d.sel-to{background:var(--accent)!important;color:var(--accent-ink);font-weight:700;text-decoration:none}
.bk-month{user-select:none;-webkit-user-select:none}
.bk-d.drag{background:color-mix(in srgb,var(--accent) 45%,transparent)!important;color:var(--ink);border-radius:0;text-decoration:none}
@media (hover:none){.bk-drag-hint{display:none}}
.bk-d.today{box-shadow:inset 0 0 0 1px var(--accent)}
.bk-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:.8rem;color:var(--muted);margin:8px 0 0}
.bk-legend .bk-d{width:14px;height:14px;max-width:14px;border-radius:4px;border:1px solid var(--line);cursor:default}
.bk-hint{min-height:1.2em;margin:0;font-size:.9rem;color:var(--muted)}
.bk-guests{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:500}
.bk-guests select,.bk-form input,.bk-form textarea{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.bk-sum{padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--accent) 9%,transparent)}
.bk-sum p:first-child{display:flex;justify-content:space-between;gap:10px;margin:0}
.bk-sum strong{font-size:1.15rem}
.bk-err{margin:0;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,#e5534b 14%,transparent);font-size:.9rem}
.bk-go{width:100%}
.bk-form{display:flex;flex-direction:column;gap:10px}
.bk-form label{display:flex;flex-direction:column;gap:4px;font-size:.9rem;font-weight:500}
.bk-form label b{color:#e5534b}
.bk-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.bk-big{font-family:var(--font-display);font-size:1.15rem;font-weight:700;margin:0 0 6px}
.bk-done p,.bk-status p{margin:0 0 6px}
.lst-statusbox{padding:18px 20px;border-radius:var(--r);border:1px solid var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
.bk-status.rejected,.bk-status.cancelled{--accent:#c2554d}
.bk-reply{margin-top:10px;padding:12px 14px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.bk-reply small{color:var(--muted)}
.bk-reply p{white-space:pre-line;margin:4px 0 0}

@media (max-width:520px){
  .lst{--r:14px;gap:18px}
  .lst-facts{grid-template-columns:1fr;gap:0}
  .lst-facts dd{margin-bottom:10px}
  .lst-card{padding:16px}
}

/* full-screen photo viewer */
.lst-viewer{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center}
.lst-viewer[hidden]{display:none}
.lst-viewer img{max-width:100%;max-height:100%;object-fit:contain;touch-action:pan-y}
.lst-viewer button{position:absolute;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:28px;line-height:1;width:48px;height:48px;border-radius:50%;cursor:pointer}
.lst-viewer .lv-prev{left:12px;top:50%;transform:translateY(-50%)}
.lst-viewer .lv-next{right:12px;top:50%;transform:translateY(-50%)}
.lst-viewer .lv-close{right:12px;top:12px}
.lst-viewer .lv-count{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:#fff;font-size:14px}