@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════
   KLETNO — podstrona: Noclegi
   Układ: przewijalna lista kart (lewa) + przyklejona mapa (prawa,
   do krawędzi, na pełną wysokość ekranu). Na mobile — jedna kolumna.
   Style TYLKO dla tej podstrony (wspólne: css/style.css)
   ═══════════════════════════════════════════════════════════════ */

.stay-section{ background:var(--cream); }

/* ── NAGŁÓWEK + FILTR (pełna szerokość z gutterem) ─────────── */
.stay-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px 32px;
  padding:clamp(54px,8vh,92px) clamp(22px,5vw,68px) clamp(30px,4vh,46px); }
.stay-head__title{ font-family:var(--serif); font-weight:400; font-size:clamp(2.1rem,4.6vw,3.4rem); color:var(--ink);
  line-height:1.04; letter-spacing:-0.01em; margin-top:.25em; max-width:16ch; }
.stay-head__title em{ font-style:italic; color:var(--moss); }

.stay-filter{ display:inline-flex; flex-wrap:wrap; gap:4px; padding:5px; border-radius:999px; background:var(--cream-deep); border:1px solid var(--line); }
.stay-filter button{ border:none; background:transparent; border-radius:999px; padding:9px 16px; font-family:var(--sans);
  font-size:12.5px; font-weight:500; color:var(--ink-soft); display:inline-flex; align-items:center; gap:7px; cursor:pointer; white-space:nowrap;
  transition:background .4s var(--spring), color .4s var(--spring), box-shadow .4s var(--spring); }
.stay-filter button i{ font-size:15px; }
.stay-filter button .sup{ font-size:10px; font-weight:600; opacity:.55; }
.stay-filter button:hover{ color:var(--ink); }
.stay-filter button.is-active{ background:var(--ink); color:var(--cream); box-shadow:0 6px 18px rgba(19,28,22,.22); }
.stay-filter button.is-active .sup{ opacity:.85; }

/* ── SPLIT: LISTA + MAPA ───────────────────────────────────── */
.stay-split{ display:grid; grid-template-columns:minmax(0,1fr) clamp(400px,44vw,780px); align-items:start; }
.stay-main{ padding:0 clamp(26px,3.5vw,52px) clamp(64px,9vh,120px) clamp(22px,5vw,68px); min-width:0; }
.stay-list{ display:flex; flex-direction:column; gap:clamp(18px,2.4vw,28px); }

/* kolumna mapy — przyklejona, pełna wysokość, do krawędzi przeglądarki */
.stay-mapcol{ position:sticky; top:0; height:100vh; min-width:0; }
.stay-mapcol #map{ width:100%; height:100%; border-radius:0; }
.stay-mapcol .leaflet-top{ top:84px; }
.map-legend{ position:absolute; left:16px; bottom:16px; z-index:600; display:flex; flex-wrap:wrap; gap:6px 15px;
  background:rgba(251,248,241,.93); backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:12px; padding:10px 14px; box-shadow:var(--shadow-sm); }
.map-legend span{ display:inline-flex; align-items:center; gap:7px; font-size:11.5px; color:var(--ink-soft); }
.map-legend .dot{ width:10px; height:10px; border-radius:50%; }

/* numerowany pin */
.pin__n{ display:block; transform:rotate(45deg); color:#fff; font-family:var(--serif); font-weight:600; font-size:12px; line-height:1; }

/* ── KARTA OBIEKTU (podwójna obwódka) ──────────────────────── */
.stay{ background:var(--cream-deep); border:1px solid var(--line); border-radius:24px; padding:7px;
  transition:transform .55s var(--spring), box-shadow .55s var(--spring), border-color .4s ease; }
.stay:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.stay.is-active{ border-color:var(--moss); box-shadow:0 0 0 1px var(--moss), var(--shadow-lg); }
.stay__core{ background:var(--paper); border-radius:18px; overflow:hidden; display:grid; grid-template-columns:230px minmax(0,1fr); }
.stay__media{ position:relative; overflow:hidden; min-height:224px; background:var(--cream-deep); }
.stay__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--spring); }
.stay:hover .stay__media img{ transform:scale(1.06); }
.stay__index{ position:absolute; top:12px; left:12px; z-index:2; font-family:var(--serif); font-style:italic; font-weight:500; font-size:14px;
  color:var(--cream); background:rgba(19,28,22,.5); backdrop-filter:blur(8px); border:1px solid rgba(251,248,241,.2); border-radius:999px; padding:3px 12px; }
.stay__mapbtn{ position:absolute; left:12px; bottom:12px; z-index:2; display:inline-flex; align-items:center; gap:7px;
  background:rgba(19,28,22,.55); color:var(--cream); backdrop-filter:blur(8px); border:1px solid rgba(251,248,241,.28); border-radius:999px;
  padding:7px 13px; font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.03em; cursor:pointer;
  transition:background .35s var(--spring), transform .35s var(--spring); }
.stay__mapbtn:hover{ background:var(--moss-deep); transform:translateY(-1px); }
.stay__mapbtn i{ font-size:14px; }

.stay__body{ padding:22px 24px 20px; display:flex; flex-direction:column; min-width:0; }
.stay__type{ font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; display:inline-flex; align-items:center; gap:7px; margin-bottom:9px; }
.stay__type::before{ content:''; width:14px; height:1.5px; background:currentColor; border-radius:2px; }
.stay__type--pensjonat{ color:var(--fluoryt); }
.stay__type--agro{ color:var(--moss); }
.stay__type--apart{ color:var(--clay); }
.stay__type--pokoje{ color:#8A6D3B; }
.stay__name{ font-family:var(--serif); font-weight:500; font-size:clamp(1.4rem,1.8vw,1.7rem); color:var(--ink); line-height:1.1; }
.stay__host{ display:block; font-size:12.5px; color:var(--ink-muted); margin-top:4px; }
.stay__meta{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-soft); margin-top:12px; }
.stay__meta i{ font-size:16px; color:var(--moss); flex:0 0 auto; }
.stay__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:auto; padding-top:18px; }
.stay__toggle{ display:inline-flex; align-items:center; gap:10px; font-family:var(--sans); font-size:13px; color:var(--cream);
  background:var(--moss-deep); border:none; border-radius:999px; padding:8px 8px 8px 18px; cursor:pointer; transition:background .3s ease; }
.stay__toggle:hover{ background:var(--ink); }
.stay__toggle .chev{ width:26px; height:26px; border-radius:50%; background:rgba(251,248,241,.16); display:grid; place-items:center; transition:transform .45s var(--spring); }
.stay__toggle .chev i{ font-size:14px; }
.stay.is-open .stay__toggle .chev{ transform:rotate(180deg); }
.stay__pill{ display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-soft); text-decoration:none;
  border:1px solid var(--line); border-radius:999px; padding:9px 16px; transition:background .3s ease, color .3s ease; }
.stay__pill:hover{ background:var(--cream-deep); color:var(--ink); }
.stay__pill i{ font-size:15px; }
.stay__tel{ display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-soft); }
.stay__tel i{ font-size:16px; color:var(--moss); }

/* akordeon z opisem */
.stay__desc{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .6s var(--spring); }
.stay.is-open .stay__desc{ grid-template-rows:1fr; }
.stay__desc-inner{ overflow:hidden; }
.stay__desc-pad{ padding:22px 26px 24px; }
.stay__desc-pad > *:first-child{ margin-top:0; }
.stay__desc-pad p{ font-size:13.5px; color:var(--ink-soft); font-weight:300; line-height:1.68; margin-bottom:.75em; }
.stay__desc-pad h4{ font-family:var(--sans); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--moss); margin:1.1em 0 .45em; }
.stay__desc-pad ul{ margin:0 0 .8em; padding-left:1.15em; }
.stay__desc-pad li{ font-size:13px; color:var(--ink-soft); font-weight:300; line-height:1.55; margin-bottom:.28em; list-style:disc; }
.stay__desc-pad b{ color:var(--ink); font-weight:600; }
.stay__callrow{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.stay__call{ display:inline-flex; align-items:center; gap:11px; background:var(--moss-deep); color:var(--cream); text-decoration:none;
  border-radius:999px; padding:10px 12px 10px 22px; font-size:13.5px; font-weight:500; transition:transform .45s var(--spring), background .3s ease; }
.stay__call:hover{ transform:scale(.98); background:var(--ink); }
.stay__call .orb{ width:30px; height:30px; border-radius:50%; background:rgba(251,248,241,.16); display:grid; place-items:center; }
.stay__call .orb i{ font-size:15px; }

/* ── RESPONSYWNOŚĆ ─────────────────────────────────────────── */
@media (max-width:1200px){
  .stay-split{ grid-template-columns:minmax(0,1fr) clamp(340px,38vw,520px); }
}
@media (max-width:900px){
  .stay-split{ grid-template-columns:1fr; }
  .stay-main{ padding-right:clamp(22px,5vw,68px); }
  .stay-mapcol{ position:static; height:auto; }
  .stay-mapcol #map{ height:62vh; }
  .stay-mapcol .leaflet-top{ top:12px; }
}
@media (max-width:600px){
  .stay__core{ grid-template-columns:1fr; }
  .stay__media{ min-height:0; aspect-ratio:16/10; }
  .stay-head{ flex-direction:column; align-items:flex-start; }
}