/*!
 * Trevi Tools — style komponentów
 * Kolory i typografia 1:1 z brandbooka Trevi Apartments.
 * Wszystkie kolory marki siedzą w bloku :root poniżej — zmiana w jednym miejscu
 * przechodzi przez całą stronę.
 */
/* ==========================================================================
   TREVI DESIGN SYSTEM  —  tokeny 1:1 z brandbooka
   Antracyt #2e394b · Brąz #c5a48d · Szary #939598 · Biel #ffffff
   Font: Hanken Grotesk (brandbook 3.1). Logo: Milky (tylko znak, jako SVG).
   ========================================================================== */
:root{
  /* --- kolory bazowe z brandbooka --- */
  --ink:#2e394b;
  --sand:#c5a48d;
  --grey:#939598;        /* brandbook 2.2 — dopisek logo, elementy dekoracyjne */
  --grey-text:#696c71;   /* wariant dostępny (WCAG AA) do mikrotekstu na jasnym tle */
  --white:#ffffff;

  /* --- tony pochodne (wyprowadzone z bazy, nie nowe kolory) --- */
  --ink-900:#1e2733;
  --ink-800:#232c3a;
  --ink-600:#41506a;
  --ink-400:#5d6b85;
  --sand-700:#7d6249;
  --sand-600:#b08e75;
  --sand-300:#dcc6b3;
  --sand-200:#ecdfd3;
  --sand-100:#f5ece4;
  --cream:#faf7f4;
  --line:#e7ddd4;
  --line-soft:#f0e9e2;

  /* --- role --- */
  --bg:var(--white);
  --text:var(--ink);
  --text-soft:#4a5567;
  --text-muted:#6f7a8b;

  /* --- typografia --- */
  --font-display:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-body:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  /* --- rytm --- */
  --wrap:1400px;
  --wrap-narrow:820px;
  --gutter:clamp(20px,4vw,56px);
  --sect:clamp(64px,9vw,130px);
  --r-s:6px; --r-m:12px; --r-l:20px; --r-xl:28px;
  --shadow-s:0 1px 2px rgba(46,57,75,.06),0 4px 16px rgba(46,57,75,.05);
  --shadow-m:0 2px 6px rgba(46,57,75,.06),0 18px 44px rgba(46,57,75,.10);
  --shadow-l:0 30px 70px rgba(46,57,75,.16);
  --ease:cubic-bezier(.22,.61,.36,1);
  --header-h:76px;
}
*,*::before,*::after{box-sizing:border-box}
/* UWAGA: nie wolno tu wpisywać scroll-behavior:smooth. Chrome stosuje to także
   do kółka myszy — jedno pstryknięcie startuje animację i strona pełznie
   (autoscroll środkowym przyciskiem działa wtedy normalnie, bo go to nie dotyczy).
   Płynne dojście do kotwic robi trevi.js przy kliknięciu w odnośnik. */
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:17px;line-height:1.72;font-weight:350;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--sand-700);outline-offset:3px;border-radius:4px}
::selection{background:var(--sand-200);color:var(--ink)}

/* ---------- typografia ---------- */
h1,h2,h3,h4{margin:0;font-family:var(--font-display);color:var(--ink);font-weight:300;letter-spacing:-.02em;line-height:1.08}
h1{font-size:clamp(2.5rem,5.4vw,4.9rem)}
h2{font-size:clamp(1.9rem,3.4vw,3.05rem)}
h3{font-size:clamp(1.15rem,1.6vw,1.5rem);font-weight:500;letter-spacing:-.01em;line-height:1.25}
h4{font-size:1.02rem;font-weight:600;letter-spacing:0;line-height:1.4}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
.lede{font-size:clamp(1.06rem,1.5vw,1.32rem);line-height:1.65;color:var(--ink-600);font-weight:330}
.body-txt{color:var(--ink-600)}
.body-txt p{max-width:68ch}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sand-700);margin:0 0 22px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--sand)}
.eyebrow.no-rule::before{display:none}
.on-dark .eyebrow{color:var(--sand)}
.on-dark .eyebrow::before{background:var(--sand)}
.on-dark,.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:var(--white)}
.on-dark .lede,.on-dark .body-txt{color:rgba(255,255,255,.76)}
.serif-accent{font-style:italic;font-weight:300}

/* ---------- layout ---------- */

/* Atrybut hidden musi wygrywać z display ustawionym w regule autorskiej —
   inaczej ukryta zakładka lokalizacji i tak się wyświetla. */
[hidden]{display:none!important}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow{width:100%;max-width:var(--wrap-narrow);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--sect)}
.section.tight{padding-block:clamp(48px,6vw,88px)}
.bg-cream{background:var(--cream)}
.bg-sand{background:var(--sand-100)}
.bg-ink{background:var(--ink);color:var(--white)}
.grid{display:grid;gap:clamp(20px,2.4vw,34px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.sect-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:clamp(34px,4vw,60px)}
.sect-head .txt{max-width:660px}
.sect-head h2+p{margin-top:18px}
.hr{height:1px;background:var(--line);border:0;margin:0}

/* ---------- przyciski ---------- */
.btn{
  --btn-bg:var(--ink);--btn-fg:var(--white);--btn-bd:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border:1px solid var(--btn-bd);background:var(--btn-bg);color:var(--btn-fg);
  font-size:.87rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  border-radius:999px;cursor:pointer;transition:all .4s var(--ease);position:relative;overflow:hidden;
}
.btn:hover{--btn-bg:var(--ink-900);--btn-bd:var(--ink-900);transform:translateY(-2px);box-shadow:var(--shadow-m)}
.btn .ar{transition:transform .4s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.btn-sand{--btn-bg:var(--sand);--btn-fg:var(--ink);--btn-bd:var(--sand)}
.btn-sand:hover{--btn-bg:var(--sand-600);--btn-bd:var(--sand-600);--btn-fg:var(--ink)}
.btn-ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--line)}
.btn-ghost:hover{--btn-bg:var(--ink);--btn-fg:var(--white);--btn-bd:var(--ink)}
.on-dark .btn-ghost{--btn-fg:var(--white);--btn-bd:rgba(255,255,255,.32)}
.on-dark .btn-ghost:hover{--btn-bg:var(--white);--btn-fg:var(--ink);--btn-bd:var(--white)}
.btn-sm{padding:11px 22px;font-size:.78rem}
.btn-lg{padding:18px 38px;font-size:.9rem}
.link-arrow{
  display:inline-flex;align-items:center;gap:9px;font-size:.83rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  padding-bottom:5px;border-bottom:1px solid var(--sand);transition:.35s var(--ease);
}
.link-arrow:hover{gap:15px;border-color:var(--ink)}
.on-dark .link-arrow{color:var(--white)}

/* ---------- media ---------- */
.ph{position:relative;overflow:hidden;background:var(--sand-100)}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.ph.r{border-radius:var(--r-l)}
a:hover>.ph img,.hov:hover .ph img{transform:scale(1.055)}
.ratio-43{aspect-ratio:4/3}
.ratio-32{aspect-ratio:3/2}
.ratio-11{aspect-ratio:1/1}
.ratio-45{aspect-ratio:4/5}
.ratio-169{aspect-ratio:16/9}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:fixed;inset:0 0 auto;z-index:900;height:var(--header-h);
  display:flex;align-items:center;transition:background .45s var(--ease),box-shadow .45s var(--ease),height .45s var(--ease);
}
.site-header .wrap{display:flex;align-items:center;gap:clamp(14px,1.6vw,26px);max-width:1400px}
.site-header.solid{background:rgba(255,255,255,.975);box-shadow:0 1px 0 var(--line-soft)}
/* --- LOGO: jeden <symbol>, trzy zestawienia kolorystyczne z brandbooka --- */
@property --lg-word{syntax:"<color>";inherits:true;initial-value:#2e394b}
@property --lg-mark{syntax:"<color>";inherits:true;initial-value:#c5a48d}
.trevi-logo{height:32px;width:auto;aspect-ratio:81.9414/21.8483;display:block;--lg-word:var(--ink);--lg-mark:var(--sand);transition:--lg-word .45s var(--ease)}
.lockup{display:inline-block}
.lockup-sub{                                   /* brandbook 1.3 — dopisek 30% wysokości, wyśrodkowany do napisu */
  display:block;margin-left:31.7%;text-align:center;text-indent:.3em;
  font-size:8px;font-weight:600;line-height:1;letter-spacing:.3em;text-transform:uppercase;
  color:var(--grey-text);margin-top:4px;transition:color .45s var(--ease);white-space:nowrap;
}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.site-header:not(.solid) .trevi-logo{--lg-word:#ffffff}       /* 2.1 wariant 2: biało-brązowe na ciemnym */
.site-header:not(.solid) .lockup-sub{color:rgba(255,255,255,.66)}
.nav{display:flex;align-items:center;gap:clamp(12px,1.35vw,22px);margin-left:auto}
.nav>li{position:relative;list-style:none}
.nav a,.nav button.navlink{
  display:flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;padding:8px 0;
  font-size:.855rem;font-weight:450;letter-spacing:.01em;color:var(--ink);transition:color .3s;
  white-space:nowrap;
}
.site-header:not(.solid) .nav a,.site-header:not(.solid) .nav button.navlink{color:#fff}
.nav a:hover,.nav button.navlink:hover{color:var(--sand-700)}
.site-header:not(.solid) .nav a:hover,.site-header:not(.solid) .nav button.navlink:hover{color:var(--sand)}
.nav a.active{color:var(--sand-700)}
.nav ul{list-style:none;margin:0;padding:0}
.chev{width:9px;height:9px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .3s}
.has-drop:hover .chev{transform:rotate(180deg)}
.drop{
  position:absolute;top:100%;left:50%;transform:translate(-50%,10px);min-width:230px;
  background:#fff;border-radius:var(--r-m);box-shadow:var(--shadow-m);padding:10px;
  opacity:0;visibility:hidden;transition:.34s var(--ease);
}
.has-drop:hover .drop{opacity:1;visibility:visible;transform:translate(-50%,4px)}
.drop a{padding:11px 14px;border-radius:var(--r-s);color:var(--ink)!important;font-size:.86rem}
.drop a:hover{background:var(--cream)}
.drop .d-meta{display:block;font-size:.72rem;color:var(--grey-text);margin-top:2px}
.head-actions{display:flex;align-items:center;gap:14px;flex-shrink:0}
.tel-link{display:flex;align-items:center;gap:8px;font-size:.855rem;font-weight:500;white-space:nowrap}
.site-header:not(.solid) .tel-link{color:#fff}
.lang{display:flex;align-items:center;gap:2px}
.lang button{
  background:none;border:0;cursor:pointer;padding:5px 6px;font-size:.7rem;font-weight:600;
  letter-spacing:.08em;color:var(--grey-text);border-radius:4px;transition:.25s;
}
.lang button[aria-current="true"]{color:var(--ink)}
.site-header:not(.solid) .lang button{color:rgba(255,255,255,.62)}
.site-header:not(.solid) .lang button[aria-current="true"]{color:#fff}
.lang button:hover{background:rgba(197,164,141,.18)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:10px;margin-right:-10px}
.burger span{display:block;width:22px;height:1.5px;background:var(--ink);margin:5px 0;transition:.3s var(--ease)}
.site-header:not(.solid) .burger span{background:#fff}

/* mega menu apartamenty */
.mega{
  position:fixed;top:var(--header-h);left:50%;transform:translate(-50%,14px);width:min(1120px,calc(100vw - 40px));
  background:#fff;border-radius:var(--r-l);box-shadow:var(--shadow-l);padding:26px;
  display:grid;grid-template-columns:1.05fr 1.05fr .9fr;gap:20px;opacity:0;visibility:hidden;
  transition:opacity .34s var(--ease),transform .44s var(--ease),visibility .34s;
}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:translate(-50%,0)}
.mega>*{opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.has-mega:hover .mega>*,.has-mega:focus-within .mega>*{opacity:1;transform:none}
.has-mega:hover .mega>*:nth-child(1){transition-delay:.06s}
.has-mega:hover .mega>*:nth-child(2){transition-delay:.12s}
.has-mega:hover .mega>*:nth-child(3){transition-delay:.18s}
.mega-side{display:flex;flex-direction:column;gap:6px;padding:6px 4px}
.mega-side .ms-h{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--grey-text);padding:6px 12px 10px}
.mega-side a{display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:var(--r-s);font-size:.9rem;color:var(--ink)!important;transition:.28s}
.mega-side a:hover{background:var(--cream);transform:translateX(3px)}
.mega-side a svg{color:var(--sand-700);flex-shrink:0}
.mega-promo{margin-top:auto;background:var(--ink);color:#fff;border-radius:var(--r-m);padding:20px}
.mega-promo b{display:block;font-size:.95rem;margin-bottom:6px}
.mega-promo span{font-size:.8rem;color:rgba(255,255,255,.7);display:block;margin-bottom:14px}
.mega-card{position:relative;border-radius:var(--r-m);overflow:hidden;min-height:230px;display:flex;align-items:flex-end;padding:22px;color:#fff!important}
.mega-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.mega-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(30,39,51,.85),rgba(30,39,51,.12))}
.mega-card:hover img{transform:scale(1.06)}
.mega-card .mc-in{position:relative;z-index:2}
.mega-card .mc-in strong{display:block;font-size:1.5rem;font-weight:300;letter-spacing:-.01em}
.mega-card .mc-in span{font-size:.78rem;opacity:.8;letter-spacing:.04em}

/* ---------- menu mobilne: pełnoekranowa nakładka ---------- */
.burger span{transition:transform .4s var(--ease),opacity .3s var(--ease),background .4s}
.mnav-close{
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.07);
  color:#fff;display:grid;place-items:center;cursor:pointer;transition:.32s var(--ease);margin-right:-6px;
}
.mnav-close:hover{background:var(--sand);border-color:var(--sand);color:var(--ink);transform:rotate(90deg)}
.mnav{
  position:fixed;inset:0;z-index:920;background:var(--ink);color:#fff;display:flex;flex-direction:column;
  overflow-y:auto;overscroll-behavior:contain;
  clip-path:inset(0 0 100% 0);transition:clip-path .62s cubic-bezier(.76,0,.24,1);visibility:hidden;
}
.mnav.on{clip-path:inset(0 0 0 0);visibility:visible}
.mnav-top{display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);height:var(--header-h);flex-shrink:0}
.mnav-top .trevi-logo{--lg-word:#fff;height:28px}
.mnav-scroll{padding:14px var(--gutter) 30px;flex:1}
.mnav-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.12)}
.mnav-list>li{border-bottom:1px solid rgba(255,255,255,.12);opacity:0;transform:translateY(22px)}
.mnav.on .mnav-list>li{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .55s var(--ease);transition-delay:calc(var(--d,0)*65ms + .18s)}
.mnav-list a,.mnav-list button{
  display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
  background:none;border:0;cursor:pointer;padding:19px 0;text-align:left;
  font-family:var(--font-display);font-size:1.6rem;font-weight:300;letter-spacing:-.02em;color:#fff;
}
.mnav-list a:hover,.mnav-list button:hover{color:var(--sand)}
.mnav-list .mn-i{width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.26);display:grid;place-items:center;flex-shrink:0;transition:.35s var(--ease)}
.mnav-list li.open .mn-i{transform:rotate(90deg);background:var(--sand);border-color:var(--sand);color:var(--ink)}
.mnav-sub{list-style:none;margin:0;padding:0;max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.mnav-list li.open .mnav-sub{max-height:460px}
.mnav-sub a{font-family:var(--font-body);font-size:1rem;font-weight:400;letter-spacing:0;padding:13px 0 13px 18px;border-left:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.78)}
.mnav-sub li:last-child a{padding-bottom:22px}
.mnav-loc{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px;opacity:0;transform:translateY(22px)}
.mnav.on .mnav-loc{opacity:1;transform:none;transition:opacity .5s var(--ease) .5s,transform .55s var(--ease) .5s}
.mnav-loc a{position:relative;border-radius:var(--r-m);overflow:hidden;min-height:132px;display:flex;align-items:flex-end;padding:16px;color:#fff}
.mnav-loc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mnav-loc a::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,26,35,.9),rgba(20,26,35,.15))}
.mnav-loc .ml{position:relative;z-index:2}
.mnav-loc .ml strong{display:block;font-size:1.15rem;font-weight:400;letter-spacing:-.01em}
.mnav-loc .ml span{font-size:.74rem;color:rgba(255,255,255,.74)}
.mnav-foot{margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);display:grid;gap:14px;opacity:0}
.mnav.on .mnav-foot{opacity:1;transition:opacity .5s var(--ease) .62s}
.mnav-foot a{display:flex;align-items:center;gap:12px;font-size:.95rem;color:rgba(255,255,255,.82)}
.mnav-foot .lang{gap:6px}
.mnav-foot .lang button{color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.18);padding:7px 12px;border-radius:999px}
.mnav-foot .lang button[aria-current="true"]{color:var(--ink);background:var(--sand);border-color:var(--sand)}
.mnav-cta{margin-top:22px;opacity:0}
.mnav.on .mnav-cta{opacity:1;transition:opacity .5s var(--ease) .7s}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;min-height:min(100svh,880px);display:flex;align-items:flex-end;overflow:hidden}
.hero.compact{min-height:min(72svh,660px)}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;animation:heroZoom 14s var(--ease) forwards}
.hero-slides .hs{position:absolute;inset:0;opacity:0;animation:none;transition:opacity 1.6s var(--ease)}
.hero-slides .hs.on{opacity:1;animation:heroZoom 11s var(--ease) forwards}
.hero-dots{display:flex;gap:8px;margin-top:32px}
.hero-dots button{width:30px;height:3px;border-radius:2px;border:0;padding:0;cursor:pointer;background:rgba(255,255,255,.34);transition:.45s var(--ease)}
.hero-dots button[aria-current="true"]{background:var(--sand);width:52px}
.hero-dots button:hover{background:rgba(255,255,255,.6)}
@keyframes heroZoom{from{transform:scale(1.09)}to{transform:scale(1)}}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(30,39,51,.86) 0%,rgba(30,39,51,.42) 42%,rgba(30,39,51,.30) 100%);
}
.hero-in{position:relative;z-index:3;width:100%;padding-block:clamp(46px,7vw,88px) clamp(38px,5vw,64px)}
.hero h1{color:#fff;max-width:16ch}
.hero .lede{color:rgba(255,255,255,.86);max-width:56ch;margin-top:26px}
.hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.pill{
  display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(8px);
  color:#fff;font-size:.75rem;font-weight:500;letter-spacing:.05em;
}
.pill.stars{background:rgba(197,164,141,.94);border-color:transparent;color:var(--ink);font-weight:600}
.scroll-cue{position:absolute;right:var(--gutter);bottom:38px;z-index:4;display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.7);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase}
.scroll-cue i{display:block;width:1px;height:44px;background:linear-gradient(rgba(255,255,255,.65),transparent);animation:cue 2.2s infinite}
@keyframes cue{0%{opacity:0;transform:scaleY(.2)}40%{opacity:1}100%{opacity:0;transform:scaleY(1)}}

/* ==========================================================================
   WIDGET PROFITROOM  —  struktura pól BEZ ZMIAN, stylowanie wyłącznie CSS
   ========================================================================== */
.pr-shell{position:relative;z-index:6;margin-top:-46px}
.pr-shell.inline{margin-top:0}
.pr-widget{
  background:#fff;border-radius:var(--r-l);box-shadow:var(--shadow-l);
  display:grid;grid-template-columns:1.05fr 1.05fr .85fr .85fr auto;align-items:stretch;
  overflow:hidden;border:1px solid var(--line-soft);
}
.pr-field{padding:18px 24px;border-right:1px solid var(--line-soft);display:flex;flex-direction:column;gap:5px;cursor:pointer;transition:background .3s}
.pr-field:hover{background:var(--cream)}
.pr-field label{font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-text);cursor:pointer}
.pr-field .val{font-size:1rem;font-weight:500;color:var(--ink);display:flex;align-items:center;gap:9px}
.pr-field .val svg{opacity:.5;flex-shrink:0}
.pr-submit{display:flex;align-items:center;padding:12px}
.pr-submit .btn{width:100%;height:100%;border-radius:14px}
.pr-note{
  display:flex;align-items:center;gap:10px;justify-content:center;
  margin-top:14px;font-size:.74rem;color:var(--grey-text);letter-spacing:.03em;
}
.pr-note b{color:var(--sand-700);font-weight:600}

/* ==========================================================================
   PASEK ZAUFANIA
   ========================================================================== */
.trust{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line-soft);border-block:1px solid var(--line-soft)}
.trust>div{background:#fff;padding:30px 24px;text-align:center}
.trust b{display:block;font-size:clamp(1.5rem,2.4vw,2.1rem);font-weight:300;letter-spacing:-.02em;color:var(--ink)}
.trust span{display:block;font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;color:var(--grey-text);margin-top:6px}

/* ==========================================================================
   SPLIT — wybór lokalizacji
   ========================================================================== */
.split{display:flex;min-height:min(78svh,700px);gap:4px}
.split-panel{
  position:relative;flex:1;overflow:hidden;display:flex;align-items:flex-end;
  transition:flex .85s var(--ease);color:#fff;isolation:isolate;
}
.split-panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);z-index:-2}
.split-panel::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(30,39,51,.9),rgba(30,39,51,.28) 60%,rgba(30,39,51,.18));transition:opacity .7s}
.split-panel:hover{flex:1.55}
.split-panel:hover img{transform:scale(1.07)}
.split-in{padding:clamp(30px,4vw,58px);width:100%;max-width:min(620px,100%)}
.split-in .n{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--sand);display:block;margin-bottom:14px}
.split-in h3{font-size:clamp(2rem,3.6vw,3.2rem);font-weight:300;color:#fff;letter-spacing:-.025em}
.split-in .meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin:16px 0 22px;font-size:.85rem;color:rgba(255,255,255,.78)}
.split-in .meta i{font-style:normal;display:flex;align-items:center;gap:7px}
.split-in .txt{font-size:.95rem;color:rgba(255,255,255,.8);max-width:44ch;margin-bottom:26px;opacity:0;max-height:0;overflow:hidden;transition:opacity .5s .1s,max-height .6s var(--ease),margin .6s}
.split-panel:hover .txt{opacity:1;max-height:160px}
.split-cta{display:flex;flex-wrap:wrap;gap:10px}

/* ==========================================================================
   TABY + KARUZELA APARTAMENTÓW
   ========================================================================== */
.tabbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:32px}
.tab{
  position:relative;background:none;border:1px solid var(--line);border-radius:999px;padding:12px 26px;
  cursor:pointer;font-size:.87rem;font-weight:500;letter-spacing:.03em;color:var(--ink-400);
  transition:.35s var(--ease);display:inline-flex;align-items:center;gap:10px;
}
.tab .cnt{font-size:.7rem;padding:2px 8px;border-radius:999px;background:var(--sand-100);color:var(--sand-700);font-weight:600}
.tab:hover{border-color:var(--sand);color:var(--ink)}
.tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.tab[aria-selected="true"] .cnt{background:rgba(255,255,255,.16);color:#fff}
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:30px;padding-top:24px;border-top:1px solid var(--line-soft)}
.filters .flabel{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-text);margin-right:6px}
.chip{
  background:none;border:1px solid var(--line);border-radius:999px;padding:8px 17px;cursor:pointer;
  font-size:.8rem;color:var(--ink-400);transition:.3s var(--ease);
}
.chip:hover{border-color:var(--sand)}
.chip[aria-pressed="true"]{background:var(--sand-100);border-color:var(--sand);color:var(--ink);font-weight:500}
.carousel-wrap{position:relative}
.carousel{
  display:flex;gap:clamp(16px,2vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:12px;margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter);
  scrollbar-width:none;scroll-behavior:smooth;
}
.carousel::-webkit-scrollbar{display:none}
.carousel>*{scroll-snap-align:start;flex:0 0 clamp(280px,31%,400px)}
.car-nav{display:flex;gap:10px;align-items:center}
.car-btn{
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;
  display:grid;place-items:center;transition:.32s var(--ease);flex-shrink:0;
}
.car-btn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.car-btn:disabled{opacity:.3;cursor:default}
.car-btn:disabled:hover{background:#fff;color:inherit;border-color:var(--line)}
.progress{height:2px;background:var(--line);border-radius:2px;flex:1;max-width:200px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--sand-700);width:20%;transition:.3s}

/* ---------- karta apartamentu ---------- */
.apt{display:flex;flex-direction:column;background:#fff;border-radius:var(--r-l);overflow:hidden;transition:.45s var(--ease);border:1px solid var(--line-soft)}
.apt:hover{transform:translateY(-6px);box-shadow:var(--shadow-m);border-color:transparent}
.apt .ph{aspect-ratio:4/3}
.apt-badges{position:absolute;top:14px;left:14px;right:14px;display:flex;gap:7px;z-index:2;flex-wrap:wrap}
.badge{
  font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.94);color:var(--ink);backdrop-filter:blur(6px);
}
.badge.dark{background:rgba(46,57,75,.9);color:#fff}
.badge.sand{background:var(--sand);color:var(--ink)}
.apt-fav{margin-left:auto;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);border:0;display:grid;place-items:center;cursor:pointer;transition:.3s}
.apt-fav:hover{background:#fff;transform:scale(1.08)}
.apt-fav[aria-pressed="true"] svg{fill:var(--sand-700);stroke:var(--sand-700)}
.apt-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.apt-loc{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sand-700);margin-bottom:9px;display:flex;align-items:center;gap:7px}
.apt h3{margin-bottom:14px}
.apt-specs{display:flex;flex-wrap:wrap;gap:7px 16px;font-size:.83rem;color:var(--ink-400);padding-bottom:16px;border-bottom:1px solid var(--line-soft)}
.apt-specs i{font-style:normal;display:flex;align-items:center;gap:6px}
.apt-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-top:16px}
.price{line-height:1.25}
.price .from{display:block;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--grey-text)}
.price .v{font-size:1.42rem;font-weight:400;letter-spacing:-.02em;color:var(--ink)}
.price .u{font-size:.8rem;color:var(--grey-text);font-weight:400}
.price .mo{display:block;font-size:.75rem;color:var(--sand-700);margin-top:3px;font-weight:500}

/* ==========================================================================
   ŚCIEŻKI / USE CASES
   ========================================================================== */
.paths{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line-soft)}
.path{
  position:relative;background:#fff;padding:clamp(28px,3vw,44px) clamp(22px,2.4vw,34px);
  min-height:330px;display:flex;flex-direction:column;overflow:hidden;transition:.5s var(--ease);
}
.path .pimg{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease)}
.path .pimg img{width:100%;height:100%;object-fit:cover}
.path .pimg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(30,39,51,.9),rgba(30,39,51,.5))}
.path>*{position:relative;z-index:2;transition:color .5s}
.path .pnum{font-size:.7rem;letter-spacing:.2em;color:var(--sand-700);margin-bottom:auto}
.path h3{margin-bottom:12px}
.path p{font-size:.9rem;color:var(--ink-400);margin-bottom:20px}
.path .link-arrow{align-self:flex-start;font-size:.75rem}
.path:hover .pimg{opacity:1}
.path:hover h3,.path:hover .link-arrow{color:#fff}
.path:hover p{color:rgba(255,255,255,.8)}
.path:hover .pnum{color:var(--sand)}
.path:hover .link-arrow{border-color:var(--sand)}

/* ==========================================================================
   EDYTORIAL / TREŚĆ
   ========================================================================== */
.editorial{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,90px);align-items:center}
.editorial.rev .ed-media{order:2}
.ed-media{position:relative}
.ed-media .stack{position:absolute;right:-8%;bottom:-12%;width:46%;border-radius:var(--r-m);overflow:hidden;box-shadow:var(--shadow-l);border:6px solid #fff}
.ed-stat{position:absolute;left:-6%;top:12%;background:#fff;border-radius:var(--r-m);padding:20px 26px;box-shadow:var(--shadow-m);text-align:center}
.ed-stat b{display:block;font-size:2rem;font-weight:300;letter-spacing:-.03em;line-height:1}
.ed-stat span{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-text)}
.feature-list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:2px}
.feature-list li{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line-soft)}
.feature-list li:first-child{border-top:1px solid var(--line-soft)}
.feature-list .fi{width:22px;height:22px;flex-shrink:0;margin-top:3px;color:var(--sand-700)}
.feature-list strong{display:block;font-weight:600;font-size:.98rem;margin-bottom:2px}
.feature-list span{font-size:.9rem;color:var(--ink-400)}

/* ---------- kroki ---------- */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,36px)}
.step{position:relative;padding-top:30px;border-top:1px solid var(--line)}
.step::before{
  counter-increment:s;content:"0" counter(s);position:absolute;top:-13px;left:0;background:var(--cream);
  padding-right:14px;font-size:.8rem;font-weight:600;letter-spacing:.16em;color:var(--sand-700);
}
.bg-ink .step{border-color:rgba(255,255,255,.18)}
.bg-ink .step::before{background:var(--ink);color:var(--sand)}
.step h3{margin-bottom:9px;font-size:1.06rem;font-weight:600;letter-spacing:0}
.step p{font-size:.9rem;color:var(--ink-400)}
.bg-ink .step p{color:rgba(255,255,255,.68)}

/* ---------- ikony wyposażenia ---------- */
.amen{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-m);overflow:hidden}
.amen div{background:#fff;padding:20px 22px;display:flex;align-items:center;gap:14px;font-size:.9rem;transition:background .3s;border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.amen div:hover{background:var(--cream)}
.amen svg{width:20px;height:20px;color:var(--sand-700);flex-shrink:0}

/* ==========================================================================
   OPINIE
   ========================================================================== */
.rev-score{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(20px,3vw,46px);padding:30px 0}
.score-big{display:flex;align-items:baseline;gap:12px}
.score-big b{font-size:clamp(3rem,6vw,4.6rem);font-weight:300;letter-spacing:-.04em;line-height:1}
.score-big span{font-size:1rem;color:var(--grey-text)}
.score-bars{display:grid;gap:9px;min-width:min(340px,100%);flex:1;max-width:460px}
.sbar{display:grid;grid-template-columns:110px 1fr 34px;align-items:center;gap:14px;font-size:.83rem}
.sbar .t{color:var(--ink-400)}
.sbar .b{height:4px;background:var(--line);border-radius:4px;overflow:hidden}
.sbar .b i{display:block;height:100%;background:var(--sand)}
.sbar .n{font-weight:600;text-align:right}
.review{background:#fff;border-radius:var(--r-l);padding:30px;border:1px solid var(--line-soft);display:flex;flex-direction:column;height:100%}
.review .stars{color:var(--sand-700);font-size:.9rem;letter-spacing:.18em;margin-bottom:16px}
.review blockquote{margin:0 0 22px;font-size:1rem;line-height:1.7;color:var(--ink-600);font-weight:330;flex:1}
.review .who{display:flex;align-items:center;gap:13px;padding-top:18px;border-top:1px solid var(--line-soft)}
.review .av{width:40px;height:40px;border-radius:50%;background:var(--sand-100);display:grid;place-items:center;font-weight:600;color:var(--sand-700);font-size:.9rem;flex-shrink:0}
.review .who .wh{display:flex;flex-direction:column;min-width:0}
.review .who b{display:block;font-size:.92rem;font-weight:600;line-height:1.3}
.review .who span{font-size:.76rem;color:var(--grey-text)}
.src-tag{display:inline-flex;align-items:center;gap:6px;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-text);margin-left:auto}

/* ==========================================================================
   OKOLICA
   ========================================================================== */
.near{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,28px)}
.near-card{position:relative;border-radius:var(--r-l);overflow:hidden;min-height:290px;display:flex;align-items:flex-end;color:#fff}
.near-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.near-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(30,39,51,.88),rgba(30,39,51,.1) 65%)}
.near-card:hover img{transform:scale(1.06)}
.near-in{position:relative;z-index:2;padding:26px}
.near-in h3{color:#fff;font-size:1.2rem;font-weight:400;margin-bottom:6px;letter-spacing:-.01em}
.near-in span{font-size:.82rem;color:rgba(255,255,255,.75)}
.dist-list{list-style:none;margin:0;padding:0;columns:2;column-gap:clamp(24px,4vw,64px)}
.dist-list li{display:flex;align-items:baseline;gap:12px;padding:13px 0;border-bottom:1px solid var(--line-soft);break-inside:avoid;font-size:.94rem}
.dist-list .dot{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-4px)}
.dist-list b{font-weight:600;white-space:nowrap;color:var(--sand-700)}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{display:grid;gap:0;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:26px 56px 26px 0;position:relative;
  font-size:clamp(1rem,1.35vw,1.16rem);font-weight:500;letter-spacing:-.005em;transition:color .3s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--sand-700)}
.faq summary::after{
  content:"";position:absolute;right:14px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--sand-700);border-bottom:1.5px solid var(--sand-700);
  transform:translateY(-70%) rotate(45deg);transition:transform .35s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.faq .ans{padding:0 clamp(20px,8vw,120px) 30px 0;color:var(--ink-400);font-size:.98rem;line-height:1.75}
.faq .ans p{max-width:74ch}

/* ==========================================================================
   CTA
   ========================================================================== */
.cta-band{position:relative;overflow:hidden;border-radius:var(--r-xl);isolation:isolate}
.cta-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.cta-band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,rgba(30,39,51,.94) 30%,rgba(30,39,51,.6))}
.cta-in{padding:clamp(44px,6vw,88px);max-width:660px}
.cta-in h2{color:#fff;margin-bottom:20px}
.cta-in p{color:rgba(255,255,255,.8);margin-bottom:32px}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px}

/* ==========================================================================
   KARTA APARTAMENTU — galeria + sticky
   ========================================================================== */
.gal{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:start}
.gal-thumbs{display:grid;gap:10px;max-height:calc((100vw - 2*var(--gutter) - 110px)*2/3);overflow-y:auto;scrollbar-width:thin}
.gal-thumbs button{padding:0;border:2px solid transparent;border-radius:var(--r-s);overflow:hidden;cursor:pointer;background:none;transition:.3s;aspect-ratio:1}
.gal-thumbs button img{width:100%;height:100%;object-fit:cover}
.gal-thumbs button[aria-current="true"]{border-color:var(--sand-700)}
.gal-thumbs button:hover{opacity:.85}
.gal-main{position:relative;border-radius:var(--r-l);overflow:hidden;aspect-ratio:3/2;background:var(--sand-100);cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:1000;background:rgba(23,30,40,.97);display:none;align-items:center;justify-content:center;padding:clamp(52px,6vw,80px) clamp(12px,7vw,110px);backdrop-filter:blur(4px)}
.lb.on{display:flex}
.lb-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:var(--r-m)}
.lb-btn{
  position:absolute;width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.09);color:#fff;display:grid;place-items:center;cursor:pointer;transition:.3s;
}
.lb-btn:hover{background:rgba(255,255,255,.22)}
.lb-prev{left:clamp(10px,2vw,34px);top:50%;transform:translateY(-50%)}
.lb-next{right:clamp(10px,2vw,34px);top:50%;transform:translateY(-50%);}
.lb-next svg{transform:rotate(180deg)}
.lb-close{top:clamp(12px,2vw,28px);right:clamp(12px,2vw,28px);width:46px;height:46px}
.lb-cap{
  position:absolute;bottom:clamp(12px,2.4vw,28px);left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.82);font-size:.85rem;text-align:center;max-width:min(70ch,90vw);line-height:1.5;
}
.lb-cap b{display:block;color:var(--sand);font-size:.72rem;letter-spacing:.18em;margin-bottom:6px;font-weight:600}
@media (max-width:620px){.lb{padding:64px 10px 90px}.lb-btn{width:44px;height:44px}}
.gal-main img{width:100%;height:100%;object-fit:cover}
.gal-count{position:absolute;right:16px;bottom:16px;background:rgba(30,39,51,.82);color:#fff;padding:9px 16px;border-radius:999px;font-size:.78rem;backdrop-filter:blur(6px);border:0;cursor:pointer}
.detail-grid{display:grid;grid-template-columns:1fr 380px;gap:clamp(28px,4vw,64px);align-items:stretch}
.sticky-book{position:sticky;top:calc(var(--header-h) + 20px);background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:26px;box-shadow:var(--shadow-s)}
.sticky-book .pr-widget{grid-template-columns:1fr 1fr;box-shadow:none;border:0;border-radius:0}
.sticky-book .pr-field{border:1px solid var(--line-soft);border-radius:var(--r-s);padding:12px 14px;margin-bottom:10px}
.sticky-book .pr-field:nth-child(odd){margin-right:5px}
.sticky-book .pr-submit{grid-column:1/-1;padding:0}
.spec-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-m);overflow:hidden;margin:28px 0}
.spec-bar div{background:#fff;padding:20px 16px;text-align:center;border-right:1px solid var(--line-soft)}
.spec-bar .si{display:block;margin:0 auto 10px;color:var(--sand-700);width:22px;height:22px}
.spec-bar div:last-child{border-right:0}
.spec-bar b{display:block;font-size:1.15rem;font-weight:500}
.spec-bar span{font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;color:var(--grey-text)}
.rules{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,44px)}
.rules h3{font-size:1.06rem;font-weight:600;letter-spacing:0}
.rules ul{list-style:none;margin:14px 0 0;padding:0}
.rules li{display:flex;gap:11px;padding:9px 0;font-size:.93rem;color:var(--ink-600)}
.rules li svg{width:17px;height:17px;color:var(--sand-700);flex-shrink:0;margin-top:4px}

/* ==========================================================================
   FORMULARZ
   ========================================================================== */
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form .full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:.74rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-400)}
.field input,.field select,.field textarea{
  font:inherit;font-size:.95rem;padding:13px 16px;border:1px solid var(--line);border-radius:var(--r-s);
  background:#fff;color:var(--ink);transition:.3s;width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--sand);outline:0;box-shadow:0 0 0 3px rgba(197,164,141,.18)}
.field textarea{min-height:120px;resize:vertical}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:.8rem;color:var(--ink-400);line-height:1.5}
.consent input{width:17px;height:17px;margin-top:2px;accent-color:var(--sand-700);flex-shrink:0}

/* ==========================================================================
   TABELA PORÓWNAWCZA
   ========================================================================== */
.ctable{width:100%;border-collapse:collapse;font-size:.93rem}
.ctable th,.ctable td{padding:17px 20px;text-align:left;border-bottom:1px solid var(--line-soft)}
.ctable thead th{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-text);font-weight:600;border-bottom:1px solid var(--line)}
.ctable tbody th{font-weight:500;color:var(--ink)}
.ctable .yes{color:var(--sand-700);font-weight:600}
.ctable .no{color:var(--grey-text)}
.ctable .hl{background:var(--sand-100)}
.ctable thead .hl{background:var(--sand);color:var(--ink)}

/* ==========================================================================
   BREADCRUMBS / STOPKA
   ========================================================================== */
.crumbs{display:flex;flex-wrap:wrap;gap:9px;align-items:center;font-size:.78rem;color:var(--grey-text);padding-block:20px}
.crumbs a:hover{color:var(--sand-700)}
.crumbs .sep{opacity:.5}
.site-footer{background:var(--ink);color:rgba(255,255,255,.72);padding-block:clamp(56px,7vw,96px) 34px;font-size:.9rem}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(24px,3vw,50px);padding-bottom:52px;border-bottom:1px solid rgba(255,255,255,.13)}
.site-footer h2{color:#fff;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:20px;font-weight:600;line-height:1.3}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.site-footer a:hover{color:var(--sand)}
.foot-brand .lockup{margin-bottom:20px}
.site-footer .trevi-logo{--lg-word:#ffffff;height:34px}
.site-footer .lockup-sub{color:rgba(255,255,255,.6)}
.nap{display:grid;gap:12px;margin-top:20px}
.nap div{display:flex;gap:11px;align-items:flex-start;font-size:.88rem}
.nap svg{width:16px;height:16px;color:var(--sand);flex-shrink:0;margin-top:4px}
.nap b{color:#fff;font-weight:600;display:block;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px}
.foot-bot{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;padding-top:28px;font-size:.8rem;color:rgba(255,255,255,.5)}
.socials{display:flex;gap:10px}
.socials a{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;transition:.3s}
.socials a:hover{background:var(--sand);border-color:var(--sand);color:var(--ink)}

/* ==========================================================================
   PŁYWAJĄCY PASEK REZERWACJI
   ========================================================================== */
.float-book{position:fixed;z-index:880;right:24px;bottom:24px;transform:translateY(170%);transition:transform .55s var(--ease)}
.float-book.on{transform:translateY(0)}
.fb-bar{
  display:flex;align-items:center;gap:14px;background:#fff;border-radius:999px;
  padding:9px 9px 9px 26px;box-shadow:var(--shadow-l);border:1px solid var(--line-soft);
}
.fb-txt{line-height:1.25}
.fb-txt b{display:block;font-size:.9rem;font-weight:600}
.fb-txt span{font-size:.74rem;color:var(--grey-text)}
.fb-sheet{
  position:absolute;bottom:calc(100% + 12px);right:0;width:min(430px,calc(100vw - 32px));
  background:#fff;border-radius:var(--r-l);box-shadow:var(--shadow-l);border:1px solid var(--line-soft);
  padding:20px;opacity:0;visibility:hidden;transform:translateY(14px);transition:.42s var(--ease);
}
.float-book.sheet-open .fb-sheet{opacity:1;visibility:visible;transform:none}
.fb-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.fb-sheet-head strong{font-size:1rem;font-weight:600}
.fb-close{background:none;border:0;cursor:pointer;font-size:1rem;color:var(--grey-text);padding:6px 10px;border-radius:8px;line-height:1}
.fb-close:hover{background:var(--cream);color:var(--ink)}
.fb-sheet .pr-stack{display:grid;grid-template-columns:1fr 1fr;gap:10px;box-shadow:none;border:0;border-radius:0;overflow:visible}
.fb-sheet .pr-field{border:1px solid var(--line);border-radius:var(--r-s);padding:12px 14px;border-right:1px solid var(--line)}
.fb-sheet .pr-submit{grid-column:1/-1;padding:0}
.fb-sheet .pr-submit .btn{width:100%;border-radius:999px;padding:16px 24px}
.float-tel{
  width:48px;height:48px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;
  background:#fff;transition:.3s;flex-shrink:0;
}
.float-tel:hover{background:var(--sand);border-color:var(--sand)}

/* ==========================================================================
   ANIMACJE / DOSTĘPNOŚĆ
   ========================================================================== */
.rv{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rv.in{opacity:1;transform:none}
.skip{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--ink);color:#fff;padding:14px 22px;border-radius:0 0 8px 0}
.skip:focus{left:0}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
}

/* ==========================================================================
   RWD
   ========================================================================== */
@media (max-width:1280px){
  .site-header .wrap{gap:20px}
  .nav{gap:17px}
  .nav a,.nav button.navlink{font-size:.81rem}
  .head-actions{gap:10px}
  .tel-link span{display:none}
  .tel-link{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);justify-content:center}
  .site-header:not(.solid) .tel-link{border-color:rgba(255,255,255,.3)}
}
@media (max-width:1180px){ .head-actions .lang{display:none} }
@media (max-width:1080px){
  .nav,.head-actions .tel-link,.brand .lockup-sub{display:none}
  .burger{display:block}
  .head-actions{margin-left:auto;gap:12px}
  .site-header .wrap{gap:12px}
}
@media (max-width:1100px){
  .g4,.paths,.steps{grid-template-columns:repeat(2,1fr)}
  .trust{grid-template-columns:repeat(3,1fr)}
  .trust>div:nth-child(n+4){grid-column:span 1}
  .foot-top{grid-template-columns:1fr 1fr}
  .detail-grid{grid-template-columns:1fr}
  .sticky-book{position:static}
  .pr-widget{grid-template-columns:1fr 1fr}
  .pr-submit{grid-column:1/-1}
  .mega{grid-template-columns:1fr}
}
@media (max-width:900px){
  :root{--header-h:66px}
  .trevi-logo{height:28px}
  .split{flex-direction:column;min-height:0}
  .split-panel{min-height:400px;flex:none!important}
  .split-panel .txt{opacity:1;max-height:200px}
  .editorial,.g2,.g3,.rules,.form{grid-template-columns:1fr}
  .editorial.rev .ed-media{order:0}
  .ed-media .stack,.ed-stat{display:none}
  .near{grid-template-columns:1fr}
  .dist-list{columns:1}
  .carousel>*{flex-basis:80%}
  .gal{grid-template-columns:1fr}
  .gal-thumbs{grid-auto-flow:column;grid-auto-columns:76px;overflow-x:auto;max-height:none}
  .float-book{left:16px;right:16px;bottom:16px;max-width:calc(100vw - 32px)}
  .fb-bar{justify-content:space-between;padding:9px 9px 9px 20px}
  .fb-bar .btn{flex:1;justify-content:center}
  .fb-sheet{left:0;right:0;width:auto}
}
@media (max-width:620px){
  body{font-size:16px}
  .g4,.paths,.steps,.trust,.pr-widget{grid-template-columns:1fr}
  .trust>div{padding:22px}
  .pr-field{border-right:0;border-bottom:1px solid var(--line-soft)}
  .carousel>*{flex-basis:88%}
  .foot-top{grid-template-columns:1fr}
  .devbar{left:10px;right:10px;bottom:auto;top:calc(var(--header-h) + 10px);flex-wrap:wrap;justify-content:center}
  .fb-txt{display:none}
  .fb-bar{padding:8px 8px 8px 12px;gap:8px}
  .fb-bar .btn{padding:14px 14px;font-size:.74rem;letter-spacing:.04em}
  .float-tel{width:46px;height:46px}
}

/* stany sterowane skryptem: krzyżyk zamiast hamburgera i rozwinięta lista na klik/klawiaturę */
.burger.on span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.has-drop.open .drop{opacity:1;visibility:visible;transform:translate(-50%,4px)}
.has-drop.open .chev{transform:rotate(180deg)}
.mnav-foot .tel-link span{display:inline}
.mnav-foot .tel-link{gap:10px}

/* --- Divi: pełna szerokość treści ---------------------------------------
   Domyślny układ Divi rezerwuje ok. 21% szerokości na pasek boczny i rysuje
   pionową kreskę na granicy. Sekcje Trevi mają własną siatkę i szerokość
   maksymalną, więc pasek tylko je ściska. Klasa trafia na <body> tylko tam,
   gdzie faktycznie ładują się style Trevi. Wyłącznik: Trevi Tools → Ustawienia. */
body.trevi-pelna #sidebar,
body.trevi-pelna .et_pb_widget_area{display:none!important}
body.trevi-pelna #left-area{width:100%!important;padding-right:0!important;float:none!important}
body.trevi-pelna #content-area{width:100%!important}
body.trevi-pelna #main-content .container{width:100%!important;max-width:none!important;padding-left:0!important;padding-right:0!important}
body.trevi-pelna #main-content .container:before{display:none!important}
body.trevi-pelna .et_pb_post{margin-bottom:0}
body.trevi-pelna .entry-content>.trevi{margin-inline:0}

/* ======================================================================
   MODUŁY SEKCJI TREVI
   Zasada: moduł nie ma własnego tła. Tło pojawia się wyłącznie tam,
   gdzie jest treścią (baner, pas CTA) albo tam, gdzie karta bez wypełnienia
   przestaje być kartą — i wtedy da się je wyłączyć przełącznikiem.
   ====================================================================== */

.trevi-mod{background:none}
.trevi-mod > section,
.trevi-mod > div{background:none}

/* Wyjątki od reguły wyżej. Ten reset ma większą wagę niż same klasy
   (`.trevi-mod > div` bije `.cta-band`), więc bez tych trzech linijek pas CTA
   robił się przezroczysty z białym tekstem, a kreski w pasie liczb i ramka
   wyposażenia znikały — tam tło JEST treścią albo buduje siatkę.
   Blok stoi tutaj, a nie na końcu pliku, żeby warianty ciemne i „gołe"
   (dalej w pliku, ta sama waga) nadal wygrywały. */
.trevi-mod > .cta-band{background:var(--ink)}
.trevi-mod > .trust{background:var(--line-soft)}
.trevi-mod > .amen{background:#fff}
.amen--goly{background:none!important;border:0}

/* tekst inny na komputerze i na telefonie */
.tylko-mobile{display:none}
@media (max-width:782px){
  .tylko-desktop{display:none}
  .tylko-mobile{display:inline}
}

/* --- BANERY ---------------------------------------------------------- */
.trevi-mod .hero{position:relative;min-height:var(--hero-h,min(62svh,560px));display:flex;align-items:flex-end;
  overflow:hidden;isolation:isolate}
.trevi-mod .hero-media{position:absolute;inset:0;z-index:-2}
.trevi-mod .hero-media img{width:100%;height:100%;object-fit:cover;display:block}
.trevi-mod .hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(46,57,75,calc(var(--hero-dim,.46)*.55)) 0%,rgba(46,57,75,var(--hero-dim,.46)) 100%)}
.trevi-mod .hero-in{width:100%;padding-block:clamp(34px,5vw,72px);color:#fff}
.trevi-mod .hero h1{color:#fff;font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1.08;margin:0 0 16px;max-width:20ch}
.trevi-mod .hero .lede{color:rgba(255,255,255,.9);max-width:56ch;margin:0 0 22px;font-size:clamp(.98rem,1.5vw,1.14rem)}
.trevi-mod .hero .cta-actions{display:flex;flex-wrap:wrap;gap:12px}

.hero-slides .hero-slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.1s var(--ease)}
.hero-slides .hero-slide.on{opacity:1}
.hero-dots{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;gap:8px;z-index:2}
.hero-dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.42);cursor:pointer;
  transition:.3s var(--ease)}
.hero-dots button[aria-current="true"]{background:#fff;width:24px;border-radius:99px}

.hero-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.hero-badge{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;
  font-size:.76rem;letter-spacing:.02em;line-height:1.3}
.badge--jasna{background:rgba(255,255,255,.16);backdrop-filter:blur(9px);color:#fff;border:1px solid rgba(255,255,255,.24)}
.badge--zlota{background:var(--sand);color:var(--ink);border:1px solid var(--sand)}
@media (max-width:600px){
  .trevi-mod .hero h1{max-width:none}
  .trevi-mod .hero .cta-actions .btn{flex:1 1 100%;justify-content:center}
}

/* --- PAS Z LICZBAMI --------------------------------------------------- */
.trust{display:flex;flex-wrap:wrap;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:var(--r-m,10px);overflow:hidden}
.trust--goly{background:none;border:0;gap:clamp(14px,2.4vw,34px)}
.trust-poz{flex:1 1 calc(100%/6 - 1px);min-width:150px;background:#fff;padding:clamp(16px,2vw,24px) 18px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.trust--goly .trust-poz{background:none;padding:0;min-width:130px}
.trust-ikona{color:var(--sand-700);margin-bottom:4px;display:inline-flex}
.trust-poz b{font-family:var(--font-display);font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:600;color:var(--ink);line-height:1.1}
.trust-poz span{font-size:.8rem;color:var(--grey-text);letter-spacing:.02em}
@media (max-width:700px){.trust-poz{flex:1 1 calc(50% - 1px);min-width:0}}

/* --- LISTA ODLEGŁOŚCI ------------------------------------------------- */
.dist-naglowek{margin:0 0 18px}
.dist-list{columns:var(--dist-kol,2)}
@media (max-width:780px){.dist-list{columns:1}}
.dist-list a{color:var(--ink-400)}
.dist-list a:hover{color:var(--sand-700)}

/* --- WYPOSAŻENIE ------------------------------------------------------ */
.amen{--amen-kol:3;display:grid;grid-template-columns:repeat(var(--amen-kol),1fr)}
.amen--goly > div{border:0!important;padding-left:0}
@media (max-width:860px){.amen{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.amen{grid-template-columns:1fr}}

/* --- KARTY ZE ZDJĘCIEM ------------------------------------------------ */
.karty{--karty-kol:4;display:grid;grid-template-columns:repeat(var(--karty-kol),1fr);gap:clamp(14px,1.8vw,22px)}
.karta{position:relative;display:flex;align-items:flex-end;min-height:clamp(240px,26vw,320px);
  border-radius:var(--r-l,16px);overflow:hidden;isolation:isolate;color:#fff;text-decoration:none;
  background:var(--ink);transition:transform .45s var(--ease)}
a.karta:hover{transform:translateY(-4px)}
.karta-tlo{position:absolute;inset:0;z-index:-2}
.karta-tlo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease)}
a.karta:hover .karta-tlo img{transform:scale(1.06)}
.karta::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(46,57,75,.05) 30%,rgba(46,57,75,.82) 100%)}
.karta-in{padding:clamp(18px,2.2vw,26px);display:flex;flex-direction:column;gap:7px;width:100%}
.karta-nr{font-family:var(--font-display);font-size:.78rem;letter-spacing:.16em;color:var(--sand);opacity:.95}
.karta-tytul{margin:0;color:#fff;font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.25}
.karta-opis{font-size:.88rem;color:rgba(255,255,255,.82);line-height:1.55}
@media (max-width:1000px){.karty{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.karty{grid-template-columns:1fr}}

/* --- KROKI ------------------------------------------------------------ */
.kroki--siatka{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(16px,2vw,28px)}
.krok{display:flex;flex-direction:column;gap:9px}
.krok-ikona{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;
  color:var(--sand-700);flex-shrink:0}
.krok-nr{font-family:var(--font-display);font-size:.74rem;letter-spacing:.16em;color:var(--sand-700)}
.krok-tytul{margin:0;font-size:clamp(1rem,1.4vw,1.18rem)}
.krok-opis{margin:0;color:var(--grey-text);font-size:.92rem;line-height:1.6}

.kroki--karuzela{position:relative}
.kroki-tor{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3*clamp(16px,2vw,28px))/4);
  gap:clamp(16px,2vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-bottom:6px;scrollbar-width:none}
.kroki-tor::-webkit-scrollbar{display:none}
.kroki-tor > .krok{scroll-snap-align:start}
.kroki-nawigacja{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.kroki-nawigacja button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:none;
  cursor:pointer;color:var(--ink);display:grid;place-items:center;transition:.3s var(--ease)}
.kroki-nawigacja button:hover:not(:disabled){background:var(--sand);border-color:var(--sand)}
.kroki-nawigacja button:disabled{opacity:.32;cursor:default}
.kroki-nawigacja .kar-prev svg{transform:rotate(180deg)}
.kroki-nawigacja .kar-next svg{transform:none}
@media (max-width:1000px){.kroki-tor{grid-auto-columns:calc((100% - clamp(16px,2vw,28px))/2)}}
@media (max-width:640px){.kroki-tor{grid-auto-columns:100%}}

/* --- PAS WEZWANIA DO DZIAŁANIA ---------------------------------------- */
.cta-band{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-l,16px);
  padding:clamp(30px,4.5vw,64px) clamp(22px,3.5vw,54px);background:var(--ink)}
.cta-band--bez-zdjecia{background:var(--ink)}
.cta-tlo{position:absolute;inset:0;z-index:-2}
.cta-tlo img{width:100%;height:100%;object-fit:cover;display:block}
.cta-band::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(46,57,75,var(--hero-dim,.62))}
.cta-band--bez-zdjecia::after{display:none}
/* Odstęp wewnętrzny trzyma teraz pas (.cta-band). Zerujemy go tutaj, bo
   starsza reguła wyżej dawała .cta-in własne 44–88 px i oba się sumowały —
   stąd „za dużo paddingu" na telefonie. */
.cta-in{position:relative;max-width:64ch;padding:0}
.cta-in h2,.cta-in h3,.cta-in h4{color:#fff;margin:0 0 12px;font-size:clamp(1.4rem,2.6vw,2.1rem)}
.cta-in p{color:rgba(255,255,255,.86);margin:0 0 22px}
.cta-in .cta-actions{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:600px){.cta-in .cta-actions .btn{flex:1 1 100%;justify-content:center}}

/* --- SAMO MENU (moduł do wstawienia w nagłówku zbudowanym w Divi) ------ */
.trevi-menu .nav{display:flex;align-items:center;gap:clamp(14px,1.7vw,30px);list-style:none;margin:0;padding:0}
.trevi-menu--lewo .nav{justify-content:flex-start}
.trevi-menu--srodek .nav{justify-content:center}
.trevi-menu--prawo .nav{justify-content:flex-end}
.trevi-menu--jasny .nav a,.trevi-menu--jasny .nav button.navlink{color:#fff}
.trevi-menu--jasny .nav a:hover,.trevi-menu--jasny .nav button.navlink:hover{color:var(--sand)}
.trevi-menu-mobilne{display:none}
@media (max-width:1080px){
  .trevi-menu{display:none}
  .trevi-menu-mobilne{display:block}
}

/* --- SKÓRKA NA MODUŁ MENU DIVI ----------------------------------------
   Dodajesz klasę „trevi-menu-divi" w Zaawansowane → Klasa CSS modułu Menu.
   Podpisów pod pozycjami Divi nie wypisuje — te są tylko w [trevi_menu]. */
.trevi-menu-divi .et-menu > li > a{font-family:var(--font-body);font-size:.82rem;letter-spacing:.06em;
  text-transform:none;color:var(--ink);font-weight:500;padding-bottom:0}
.trevi-menu-divi .et-menu > li > a:hover{color:var(--sand-700);opacity:1}
.trevi-menu-divi .et-menu li li a{font-size:.86rem;color:var(--ink-400);padding:11px 20px;width:260px}
.trevi-menu-divi .et-menu li li a:hover{color:var(--sand-700);background:var(--cream,#faf8f6)}
.trevi-menu-divi .nav li ul{border-top:0;border-radius:var(--r-m,10px);box-shadow:0 18px 46px rgba(46,57,75,.14);
  padding:8px 0;background:#fff}
.trevi-menu-divi .et-menu .menu-item-has-children > a:first-child:after{color:var(--sand-700)}

/* ==========================================================================
   FORMULARZE — CONTACT FORM 7
   Contact Form 7 opakowuje każde pole w <span class="wpcf7-form-control-wrap">
   i dokłada własne komunikaty. Ten blok sprowadza jego kod do siatki .form
   z projektu i dokłada trzy warianty tła: kremowy, biały i ciemny.
   ========================================================================== */

/* --- karta formularza (to samo, co w makiecie było stylem inline) --------- */
.trevi-form{padding:clamp(24px,3vw,38px);border-radius:var(--r-l)}
.trevi-form--kremowy{background:var(--cream)}
.trevi-form--bialy{background:#fff;border:1px solid var(--line)}
.trevi-form--ciemny{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}

/* --- porządki po CF7 ------------------------------------------------------ */
.wpcf7 form.wpcf7-form{margin:0}
.trevi-form .wpcf7-form-control-wrap{display:block;width:100%;position:relative}
.trevi-form .wpcf7-form-control-wrap>input,
.trevi-form .wpcf7-form-control-wrap>select,
.trevi-form .wpcf7-form-control-wrap>textarea{display:block}
.wpcf7 .screen-reader-response{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap}
.trevi-form>br{display:none}                       /* gdyby gdzieś przeszedł wpautop */
.trevi-form p:empty{display:none}

/* --- gwiazdka przy polach wymaganych ------------------------------------- */
.trevi-form .field:has(.wpcf7-validates-as-required)>label::after,
.trevi-form .field:has([aria-required="true"])>label::after{content:"*";margin-left:4px;color:var(--sand-700)}

/* --- listy rozwijane: własna strzałka zamiast systemowej ------------------ */
.trevi-form select{
  -webkit-appearance:none;appearance:none;padding-right:42px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6b85' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:17px 17px;
}
.trevi-form input[type=date]{min-height:49px}
.trevi-form textarea{height:128px;min-height:128px}

/* --- zgoda (CF7 dokłada własne <span>, więc flex przenosimy na <label>) --- */
.trevi-form .consent{display:block}
.trevi-form .consent .wpcf7-form-control-wrap,
.trevi-form .consent .wpcf7-acceptance,
.trevi-form .consent .wpcf7-list-item{display:block;margin:0}
.trevi-form .consent label{
  display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  font-size:.8rem;font-weight:400;letter-spacing:normal;text-transform:none;
  color:var(--ink-400);line-height:1.5;
}
.trevi-form .consent input[type=checkbox]{width:17px;height:17px;margin:2px 0 0;accent-color:var(--sand-700);flex-shrink:0}
.trevi-form .consent a{text-decoration:underline;text-underline-offset:2px}
.trevi-form .consent a:hover{color:var(--sand-700)}

/* --- przycisk ------------------------------------------------------------ */
.btn-blok{width:100%}
.trevi-form .wpcf7-submit{font-family:inherit}
.trevi-form .wpcf7-submit:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none}
.trevi-form .wpcf7-spinner{margin:0 0 0 12px;vertical-align:middle}

/* --- błędy walidacji ----------------------------------------------------- */
.trevi-form .wpcf7-form-control-wrap .wpcf7-not-valid-tip,
.trevi-form .wpcf7-not-valid-tip{
  display:block;margin-top:6px;font-size:.76rem;line-height:1.4;font-weight:500;color:#b3261e;
}
.trevi-form input.wpcf7-not-valid,
.trevi-form select.wpcf7-not-valid,
.trevi-form textarea.wpcf7-not-valid{border-color:#b3261e;box-shadow:0 0 0 3px rgba(179,38,30,.12)}
.trevi-form .wpcf7-acceptance.wpcf7-not-valid .wpcf7-list-item-label{color:#b3261e}

/* --- pasek komunikatu pod formularzem ------------------------------------ */
.wpcf7 form.wpcf7-form .wpcf7-response-output{
  margin:18px 0 0;padding:15px 18px;border:1px solid var(--line);border-left-width:3px;
  border-radius:var(--r-s);font-size:.88rem;line-height:1.55;background:var(--cream);color:var(--ink-600);
}
.wpcf7 form.wpcf7-form.sent .wpcf7-response-output{border-color:#2f7d4f;border-left-color:#2f7d4f;background:#f1f8f3;color:#1f5c39}
.wpcf7 form.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7 form.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7 form.wpcf7-form.payment-required .wpcf7-response-output{border-color:#c9962a;border-left-color:#c9962a;background:#fdf7ea;color:#7a5a10}
.wpcf7 form.wpcf7-form.failed .wpcf7-response-output,
.wpcf7 form.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7 form.wpcf7-form.spam .wpcf7-response-output{border-color:#b3261e;border-left-color:#b3261e;background:#fdf2f1;color:#8c1d18}

/* --- pułapka na roboty: niewidoczna, ale nie display:none ---------------- */
.trevi-hp{position:absolute!important;left:-9999px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}

/* ==========================================================================
   WARIANT CIEMNY — formularz na antracytowym tle (wynajem miesięczny)
   ========================================================================== */
.trevi-form--ciemny .field label{color:rgba(255,255,255,.62)}
.trevi-form--ciemny input,
.trevi-form--ciemny select,
.trevi-form--ciemny textarea{
  background-color:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff;color-scheme:dark;
}
.trevi-form--ciemny input::placeholder,
.trevi-form--ciemny textarea::placeholder{color:rgba(255,255,255,.38)}
.trevi-form--ciemny input:focus,
.trevi-form--ciemny select:focus,
.trevi-form--ciemny textarea:focus{border-color:var(--sand);box-shadow:0 0 0 3px rgba(197,164,141,.22)}
.trevi-form--ciemny select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' opacity='.65'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:17px 17px;
}
.trevi-form--ciemny option{background:var(--ink);color:#fff}
.trevi-form--ciemny .consent label{color:rgba(255,255,255,.65)}
.trevi-form--ciemny .consent input[type=checkbox]{accent-color:var(--sand)}
.trevi-form--ciemny .consent a{color:var(--sand)}
.trevi-form--ciemny .field:has(.wpcf7-validates-as-required)>label::after,
.trevi-form--ciemny .field:has([aria-required="true"])>label::after{color:var(--sand)}
.trevi-form--ciemny .wpcf7-form-control-wrap .wpcf7-not-valid-tip,
.trevi-form--ciemny .wpcf7-not-valid-tip{color:#f3b3ad}
.trevi-form--ciemny .wpcf7-acceptance.wpcf7-not-valid .wpcf7-list-item-label{color:#f3b3ad}
.trevi-form--ciemny input.wpcf7-not-valid,
.trevi-form--ciemny select.wpcf7-not-valid,
.trevi-form--ciemny textarea.wpcf7-not-valid{border-color:#e88b83;box-shadow:0 0 0 3px rgba(232,139,131,.16)}
.wpcf7-form:has(.trevi-form--ciemny) .wpcf7-response-output{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.8);
}
.wpcf7-form.sent:has(.trevi-form--ciemny) .wpcf7-response-output{border-color:#7fc79b;background:rgba(127,199,155,.12);color:#cdebd9}
.wpcf7-form.invalid:has(.trevi-form--ciemny) .wpcf7-response-output,
.wpcf7-form.unaccepted:has(.trevi-form--ciemny) .wpcf7-response-output{border-color:#e0be74;background:rgba(224,190,116,.12);color:#f0dcae}

/* --- mobile -------------------------------------------------------------- */
@media (max-width:620px){
  .trevi-form{padding:22px 18px}
  .trevi-form .field input,
  .trevi-form .field select,
  .trevi-form .field textarea{font-size:16px}   /* iOS nie przybliża ekranu przy 16px */
  .trevi-form .field textarea{height:104px;min-height:104px}
}

/* ==========================================================================
   MODUŁY — SCHEMAT KOLORÓW I AKCENT
   Moduły bez własnego tła muszą umieć usiąść w ciemnej sekcji Divi.
   „ciemne" odwraca kolory tekstu i kresek, „dziedzicz" bierze je z rodzica.
   --akcent podmienia brązowy z brandbooka na dowolny inny (ikony, liczby, numery).
   ========================================================================== */
.trevi-mod{--akcent:var(--sand-700)}
.trevi-mod .trust-ikona,
.trevi-mod .amen svg,
.trevi-mod .krok-ikona,
.trevi-mod .krok-nr,
.trevi-mod .dist-list b{color:var(--akcent)}
/* Karty zawsze leżą na zdjęciu z ciemnym gradientem, więc ich nadpis trzyma
   jasny brąz niezależnie od akcentu modułu — ciemny byłby tam nieczytelny. */
.trevi-mod .karta-nr{color:var(--sand)}
.trevi-mod .krok-ikona{border-color:color-mix(in srgb,var(--akcent) 42%,transparent)}
.trevi-mod .kroki-nawigacja button:hover:not(:disabled){background:var(--akcent);border-color:var(--akcent);color:#fff}

/* ---------- na ciemnym tle ---------- */
.trevi-mod--ciemne{--akcent:var(--sand);color:rgba(255,255,255,.8)}
.trevi-mod--ciemne h2,.trevi-mod--ciemne h3,.trevi-mod--ciemne h4,
.trevi-mod--ciemne .krok-tytul,.trevi-mod--ciemne .dist-naglowek{color:#fff}

.trevi-mod--ciemne .trust{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.16)}
.trevi-mod--ciemne .trust--goly{background:none;border:0}
.trevi-mod--ciemne .trust-poz{background:rgba(255,255,255,.05)}
.trevi-mod--ciemne .trust--goly .trust-poz{background:none}
.trevi-mod--ciemne .trust-poz b{color:#fff}
.trevi-mod--ciemne .trust-poz span{color:rgba(255,255,255,.66)}

.trevi-mod--ciemne .amen{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16)}
.trevi-mod--ciemne .amen div{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.86)}
.trevi-mod--ciemne .amen div:hover{background:rgba(255,255,255,.09)}
.trevi-mod--ciemne .amen--goly>div{background:none}

.trevi-mod--ciemne .dist-list li{border-bottom-color:rgba(255,255,255,.16);color:rgba(255,255,255,.86)}
.trevi-mod--ciemne .dist-list .dot{border-bottom-color:rgba(255,255,255,.26)}
.trevi-mod--ciemne .dist-list a{color:rgba(255,255,255,.86)}
.trevi-mod--ciemne .dist-list a:hover{color:var(--sand)}

.trevi-mod--ciemne .krok-opis{color:rgba(255,255,255,.68)}
.trevi-mod--ciemne .krok-ikona{border-color:rgba(255,255,255,.26)}
.trevi-mod--ciemne .kroki-nawigacja button{border-color:rgba(255,255,255,.3);color:#fff}

/* ---------- weź kolor z sekcji Divi ---------- */
.trevi-mod--dziedzicz{color:inherit}
.trevi-mod--dziedzicz h2,.trevi-mod--dziedzicz h3,.trevi-mod--dziedzicz h4,
.trevi-mod--dziedzicz .krok-tytul,.trevi-mod--dziedzicz .dist-naglowek,
.trevi-mod--dziedzicz .trust-poz b,.trevi-mod--dziedzicz .dist-list a{color:inherit}
.trevi-mod--dziedzicz .trust,
.trevi-mod--dziedzicz .amen{background:none;border-color:color-mix(in srgb,currentColor 20%,transparent)}
.trevi-mod--dziedzicz .trust-poz,
.trevi-mod--dziedzicz .amen div{background:none;border-color:color-mix(in srgb,currentColor 18%,transparent)}
.trevi-mod--dziedzicz .amen div{color:inherit}
.trevi-mod--dziedzicz .dist-list li{border-bottom-color:color-mix(in srgb,currentColor 20%,transparent)}
.trevi-mod--dziedzicz .dist-list .dot{border-bottom-color:color-mix(in srgb,currentColor 30%,transparent)}
.trevi-mod--dziedzicz .trust-poz span,
.trevi-mod--dziedzicz .krok-opis{color:color-mix(in srgb,currentColor 70%,transparent)}
.trevi-mod--dziedzicz .krok-ikona,
.trevi-mod--dziedzicz .kroki-nawigacja button{border-color:color-mix(in srgb,currentColor 28%,transparent);color:inherit}

/* ---------- nowe style przycisków ---------- */
.btn-bialy{--btn-bg:#fff;--btn-fg:var(--ink);--btn-bd:#fff}
.btn-bialy:hover{--btn-bg:var(--sand-100);--btn-bd:var(--sand-100);--btn-fg:var(--ink)}
.btn-jasny-obrys{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.5)}
.btn-jasny-obrys:hover{--btn-bg:#fff;--btn-fg:var(--ink);--btn-bd:#fff}
/* styl wpisany w atrybucie wygrywa nad regułą :hover, więc podbijamy samą jasność */
.btn--wlasny:hover{filter:brightness(.93)}

/* ==========================================================================
   MENU — USTAWIENIA Z SHORTCODE'U
   Wszystko, co da się przestawić atrybutem [trevi_menu] i [trevi_menu_mobile],
   wchodzi tu jako zmienna. Brak atrybutu = wartość domyślna, czyli to,
   co było wcześniej.
   ========================================================================== */
.trevi-menu .nav{gap:var(--menu-odstep,clamp(14px,1.7vw,30px))}
.trevi-menu .nav a,
.trevi-menu .nav button.navlink{
  font-size:var(--menu-font,.82rem);
  font-weight:var(--menu-grubosc,600);
  color:var(--menu-kolor,var(--ink));
}
.trevi-menu--jasny .nav a,
.trevi-menu--jasny .nav button.navlink{color:var(--menu-kolor,#fff)}
.trevi-menu .nav a:hover,
.trevi-menu .nav button.navlink:hover{color:var(--menu-kolor-h,var(--sand-700))}
.trevi-menu--jasny .nav a:hover,
.trevi-menu--jasny .nav button.navlink:hover{color:var(--menu-kolor-h,var(--sand))}
.trevi-menu--bez-wersalikow .nav a,
.trevi-menu--bez-wersalikow .nav button.navlink{text-transform:none;letter-spacing:0}
.trevi-menu .drop{background:var(--menu-drop-tlo,#fff)}
.trevi-menu .drop a{color:var(--menu-drop-txt,var(--ink))}
.trevi-menu .drop a:hover{color:var(--menu-kolor-h,var(--sand-700))}

/* --- hamburger --- */
.burger span{background:var(--burger-kolor,var(--ink))}

/* --- pełnoekranowe menu mobilne --- */
.mnav{background:var(--mnav-tlo,var(--ink));color:var(--mnav-kolor,#fff)}
.mnav-list a,.mnav-list button{font-size:var(--mnav-font,1.6rem);color:var(--mnav-kolor,#fff)}
.mnav-list a:hover,.mnav-list button:hover{color:var(--mnav-akcent,var(--sand))}
.mnav-list .mn-i{border-color:color-mix(in srgb,var(--mnav-kolor,#fff) 26%,transparent)}
.mnav-list li.open .mn-i{background:var(--mnav-akcent,var(--sand));border-color:var(--mnav-akcent,var(--sand))}
.mnav-list,.mnav-list>li,.mnav-foot{border-color:color-mix(in srgb,var(--mnav-kolor,#fff) 14%,transparent)}
.mnav-sub a{color:color-mix(in srgb,var(--mnav-kolor,#fff) 78%,transparent);
  border-left-color:color-mix(in srgb,var(--mnav-kolor,#fff) 16%,transparent);
  font-size:calc(var(--mnav-font,1.6rem)*.62)}
.mnav .tel-link{color:var(--mnav-akcent,var(--sand))}

/* ==========================================================================
   KARUZELA KART — STRZAŁKI I KROPKI
   Dokładane przez skrypt do każdego .carousel. Bez skryptu karuzela dalej
   przewija się palcem i kółkiem — kontrolki są dodatkiem, nie warunkiem.
   ========================================================================== */
.kar-nawigacja{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:clamp(18px,2.4vw,28px)}
.kar-nawigacja[hidden]{display:none}
.kar-nawigacja button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:none;
  cursor:pointer;color:var(--ink);display:grid;place-items:center;transition:.3s var(--ease);flex-shrink:0}
.kar-nawigacja button:hover:not(:disabled){background:var(--akcent,var(--sand));border-color:var(--akcent,var(--sand));color:#fff}
.kar-nawigacja button:disabled{opacity:.3;cursor:default}
.kar-nawigacja .kar-prev svg{transform:rotate(180deg)}
.kar-nawigacja .kar-next svg{transform:none}

.kar-kropki{display:flex;align-items:center;gap:8px}
.kar-kropki button{width:8px;height:8px;min-width:8px;padding:0;border-radius:999px;border:0;
  background:var(--line);cursor:pointer;transition:.3s var(--ease)}
.kar-kropki button:hover{background:var(--sand-300)}
.kar-kropki button[aria-selected="true"]{width:26px;background:var(--akcent,var(--sand-700))}

/* na ciemnym tle */
.on-dark .kar-nawigacja button,
.trevi-mod--ciemne .kar-nawigacja button{border-color:rgba(255,255,255,.3);color:#fff}
.on-dark .kar-kropki button,
.trevi-mod--ciemne .kar-kropki button{background:rgba(255,255,255,.28)}
.on-dark .kar-kropki button[aria-selected="true"],
.trevi-mod--ciemne .kar-kropki button[aria-selected="true"]{background:var(--sand)}

@media (max-width:620px){
  .kar-nawigacja{gap:12px}
  .kar-nawigacja button{width:38px;height:38px}
}

/* ==========================================================================
   GŁÓWKA MODUŁÓW POBIERAJĄCYCH TREŚĆ Z BAZY
   Nadtytuł + nagłówek + opis. Wszystkie trzy opcjonalne — pusta główka
   nie zostawia po sobie odstępu, bo w ogóle się nie renderuje.
   ========================================================================== */
.mod-glowka{max-width:720px;margin:0 0 clamp(26px,3.4vw,44px)}
.mod-glowka .eyebrow{margin-bottom:14px}
.mod-tytul{margin:0;font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1.12;letter-spacing:-.02em}
.mod-opis{margin:18px 0 0;font-size:1.02rem;line-height:1.65;color:var(--ink-400)}
.trevi-mod--ciemne .mod-opis{color:rgba(255,255,255,.72)}
.trevi-mod--dziedzicz .mod-opis{color:color-mix(in srgb,currentColor 72%,transparent)}
.trevi-mod .mod-glowka+.karty,
.trevi-mod .mod-glowka+.trevi-block{margin-top:0}
/* przyciski pod listą */
.trevi-mod .karty+.cta-actions,
.trevi-mod .trevi-block+.cta-actions{margin-top:clamp(24px,3vw,38px)}

/* karuzela kart apartamentów w module — ten sam odstęp co siatka */
.trevi-mod--apartamenty .carousel{padding-bottom:4px}

/* ==========================================================================
   FAQ — MODUŁ SEKCJI
   Wygląd listy jest już wyżej (.faq). Tu tylko to, czego wymaga wersja
   z filtrowaniem i wariant na ciemnym tle.
   ========================================================================== */
.trevi-mod--faq .faq{margin-top:0}
.faq-filtry{border-top:0;padding-top:0;margin-bottom:22px}
.faq details[hidden]{display:none}

.trevi-mod--ciemne .faq{border-top-color:rgba(255,255,255,.16)}
.trevi-mod--ciemne .faq details{border-bottom-color:rgba(255,255,255,.16)}
.trevi-mod--ciemne .faq summary{color:#fff}
.trevi-mod--ciemne .faq summary:hover{color:var(--sand)}
.trevi-mod--ciemne .faq summary::after{border-color:rgba(255,255,255,.6)}
.trevi-mod--ciemne .faq .ans{color:rgba(255,255,255,.72)}
.trevi-mod--ciemne .faq .ans a{color:var(--sand)}
.trevi-mod--ciemne .faq-filtry .chip{border-color:rgba(255,255,255,.24);color:rgba(255,255,255,.82);background:none}
.trevi-mod--ciemne .faq-filtry .chip[aria-pressed="true"]{background:rgba(255,255,255,.12);border-color:var(--sand);color:#fff}

.trevi-mod--dziedzicz .faq,
.trevi-mod--dziedzicz .faq details{border-color:color-mix(in srgb,currentColor 20%,transparent)}
.trevi-mod--dziedzicz .faq summary{color:inherit}
.trevi-mod--dziedzicz .faq .ans{color:color-mix(in srgb,currentColor 74%,transparent)}

/* ==========================================================================
   PŁYNNOŚĆ PRZEWIJANIA
   Rozmycie tła (backdrop-filter) jest ładne, ale każda taka warstwa każe
   przeglądarce rozmywać migawkę tła przy każdej klatce przewijania.
   Na telefonach i laptopach ze zintegrowaną grafiką to właśnie od tego
   scroll zaczyna szarpać — dlatego tam rozmycie znika, a plakietki dostają
   zwykłe półprzezroczyste tło. Wygląda praktycznie tak samo.
   ========================================================================== */
@media (max-width:1024px), (pointer:coarse) {
  .badge--jasna,
  .hero-badge,
  .pill,
  .gal-count{backdrop-filter:none}
  .badge--jasna,
  .hero-badge{background:rgba(255,255,255,.24)}
  .pill{background:rgba(255,255,255,.96)}
}

/* Gdy ktoś ma w systemie włączone ograniczenie ruchu, wyłączamy też rozmycia
   i powolne przejścia zdjęć — to ta sama grupa urządzeń, która najbardziej
   cierpi na ciężkich efektach. */
@media (prefers-reduced-motion:reduce){
  .site-header,.badge--jasna,.hero-badge,.pill,.gal-count,.lb{backdrop-filter:none}
  .hero-slides .hs{transition:none}
  .karta-tlo img,a.karta:hover .karta-tlo img{transition:none;transform:none}
}

/* ==========================================================================
   POPRAWKI Z PRZEGLĄDU NA ŻYWO
   Każda reguła odpowiada jednej uwadze z listy. Wszystkie są dopisane na
   końcu arkusza, żeby wygrywały z tym, co jest wyżej, bez podbijania
   specyficzności selektorów motywu.
   ========================================================================== */

/* --- o1. MENU MOBILNE -----------------------------------------------------
   Trzy przyczyny rozjazdu:
   1. Divi wraca punktory listom — nasze `list-style:none` przegrywało
      z jego regułą na `#main-content ul`.
   2. Zwinięte podmenu miało `max-height:0`, ale zachowywało odstępy Divi,
      więc wystawał z niego pasek tekstu.
   3. Telefon w stopce menu dziedziczył `width:38px;height:38px;border-radius:50%`
      z wariantu ikonowego w nagłówku — stąd kółko wokół cyfry i tekst poza ekranem. */
.mnav-list,
.mnav-sub{list-style:none!important;margin:0!important;padding-left:0!important}
.mnav-list>li,
.mnav-sub>li{list-style:none!important;margin:0;padding:0;background:none}
.mnav-list>li::marker,
.mnav-sub>li::marker{content:""}

.mnav-sub{max-height:0;overflow:hidden;visibility:hidden;transition:max-height .45s var(--ease),visibility 0s .45s}
.mnav-list li.open>.mnav-sub{max-height:520px;visibility:visible;transition:max-height .45s var(--ease),visibility 0s}

.mnav-foot .tel-link,
.mnav .tel-link{width:auto!important;height:auto!important;border:0!important;border-radius:0!important;
  justify-content:flex-start!important;white-space:normal}
.mnav-foot .tel-link span{display:inline!important}
.mnav-foot .tel-link svg{width:17px;height:17px;flex-shrink:0}
.mnav-foot{padding-bottom:18px}
/* Ostatnia pozycja menu ma już kreskę, a stopka dokłada swoją — wychodziły
   dwie linie jedna pod drugą. Zostaje ta ze stopki. */
.mnav-list>li:last-child{border-bottom:0}
.mnav-scroll{padding-inline:var(--gutter);box-sizing:border-box}
.mnav .btn{width:100%;justify-content:center}

/* Pływający pasek rezerwacji chował się za menu, ale nadal go było widać.
   Przy otwartym menu po prostu znika. */
body.trevi-menu-otwarte .float-book,
body.trevi-menu-otwarte .sticky-book,
.mnav.on ~ .float-book{display:none!important}

/* --- o2. KARUZELA APARTAMENTÓW NA PEŁNEJ SZEROKOŚCI -----------------------
   Sama karuzela biegnie od krawędzi do krawędzi, ale nagłówek, przełącznik
   lokalizacji i filtry muszą trzymać się marginesu. */
.trevi-mod--pelna .mod-glowka,
.trevi-mod--pelna .tabbar,
.trevi-mod--pelna .filters,
.trevi-mod--pelna .cta-actions{padding-inline:5%}
.trevi-mod--pelna .carousel{padding-inline:5%;scroll-padding-inline:5%}
.trevi-mod--pelna .grid{padding-inline:5%}
.trevi-mod--pelna .kar-nawigacja{padding-inline:5%}

/* --- o3. KROPKI KARUZELI ---------------------------------------------------
   Divi stylizuje każdy `button`, więc kropki puchły do rozmiaru przycisku.
   Zerujemy wszystko, co mogłoby je rozdąć, i na telefonie zamieniamy
   długi rząd kropek na czytelny licznik. */
.kar-kropki button{
  -webkit-appearance:none;appearance:none;
  width:8px!important;height:8px!important;min-width:8px;min-height:8px;
  padding:0!important;margin:0!important;border:0!important;box-shadow:none!important;
  border-radius:999px!important;background:var(--line);cursor:pointer;
  transition:width .3s var(--ease),background .3s var(--ease);flex:0 0 auto;line-height:0;font-size:0;
}
.kar-kropki button[aria-selected="true"]{width:24px!important;background:var(--akcent,var(--sand-700))}
.kar-licznik{font-size:.78rem;letter-spacing:.08em;color:var(--grey-text);min-width:56px;text-align:center;font-variant-numeric:tabular-nums}
.trevi-mod--ciemne .kar-licznik,.on-dark .kar-licznik{color:rgba(255,255,255,.72)}

/* --- o4. OKRUSZKI NA PEŁNEJ SZEROKOŚCI ------------------------------------ */
.trevi-okruszki{width:100%;max-width:none;margin-inline:0;padding-inline:0}
.trevi-okruszki .crumbs{padding-inline:0}

/* --- o6. ZAJAWKI BLOGA: ZDJĘCIE NA GÓRZE, TEKST POD SPODEM ---------------- */
.karty--pod{--karty-kol:3;display:grid;grid-template-columns:repeat(var(--karty-kol),1fr);gap:clamp(18px,2.2vw,28px)}
.karta-pod{display:flex;flex-direction:column;gap:14px;text-decoration:none;color:inherit}
.karta-pod .karta-foto{display:block;overflow:hidden;border-radius:var(--r-l,16px);aspect-ratio:3/2;background:var(--cream)}
.karta-pod .karta-foto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease)}
a.karta-pod:hover .karta-foto img{transform:scale(1.05)}
.karta-pod .karta-nr{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--akcent,var(--sand-700))}
.karta-pod .karta-tytul{margin:0;font-size:clamp(1.02rem,1.5vw,1.22rem);line-height:1.3;color:var(--ink)}
.karta-pod .karta-opis{margin:0;font-size:.92rem;line-height:1.6;color:var(--ink-400)}
a.karta-pod:hover .karta-tytul{color:var(--akcent,var(--sand-700))}
.trevi-mod--ciemne .karta-pod .karta-tytul{color:#fff}
.trevi-mod--ciemne .karta-pod .karta-opis{color:rgba(255,255,255,.72)}
.trevi-mod--dziedzicz .karta-pod .karta-tytul,
.trevi-mod--dziedzicz .karta-pod .karta-opis{color:inherit}
@media (max-width:1000px){.karty--pod{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.karty--pod{grid-template-columns:1fr}}

/* --- o7. PAS CTA NA TELEFONIE ---------------------------------------------
   Na desktopie zostaje jak było; na wąskim ekranie mniej powietrza. */
@media (max-width:780px){
  .trevi-mod--pas_cta .cta-band{padding:26px 20px;border-radius:var(--r-m,12px)}
  .trevi-mod--pas_cta .cta-in h2,
  .trevi-mod--pas_cta .cta-in h3{margin-bottom:10px}
  .trevi-mod--pas_cta .cta-in p{margin-bottom:18px}
  .trevi-mod--pas_cta .cta-actions{gap:10px}
  .trevi-mod--pas_cta .cta-actions .btn{width:100%;justify-content:center}
}

/* --- kroki w układzie pionowej listy (np. „Jak dojechać") ----------------- */
.kroki--lista{display:grid;gap:clamp(18px,2.2vw,26px)}
.kroki--lista .krok{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.kroki--lista .krok-ikona{grid-row:span 3;width:42px;height:42px}
.kroki--lista .krok-nr{grid-column:2}
.kroki--lista .krok-tytul{grid-column:2;margin:0}
.kroki--lista .krok-opis{grid-column:2;margin:0}
@media (max-width:520px){
  .kroki--lista .krok{grid-template-columns:1fr;gap:10px}
  .kroki--lista .krok-ikona{grid-row:auto}
  .kroki--lista .krok-nr,.kroki--lista .krok-tytul,.kroki--lista .krok-opis{grid-column:1}
}

/* ==========================================================================
   ZESPÓŁ
   Dwa układy z jednej listy osób: duże karty ze zdjęciem u góry
   i kompaktowe z okrągłym zdjęciem obok tekstu.
   ========================================================================== */
.zespol{--zespol-kol:3;display:grid;grid-template-columns:repeat(var(--zespol-kol),1fr);gap:clamp(16px,2vw,26px)}

.zespol--karty .osoba{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-l,16px);overflow:hidden;background:#fff}
.zespol--karty .osoba-foto{display:block;aspect-ratio:4/5;background:var(--cream);overflow:hidden}
.zespol--karty .osoba-foto img{width:100%;height:100%;object-fit:cover;display:block}
.zespol--karty .osoba-dane{padding:clamp(18px,2vw,24px);display:grid;gap:7px}

.zespol--kompakt .osoba{display:flex;align-items:center;gap:18px;padding:clamp(16px,2vw,22px);
  border:1px solid var(--line);border-radius:var(--r-l,16px);background:#fff}
.zespol--kompakt .osoba-foto{width:72px;height:72px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--cream)}
.zespol--kompakt .osoba-foto img{width:100%;height:100%;object-fit:cover;display:block}
.zespol--kompakt .osoba-dane{display:grid;gap:5px;min-width:0}
.zespol--kompakt .osoba-kontakt svg{display:none}

.osoba-imie{margin:0;font-size:1.02rem;line-height:1.3;color:var(--ink)}
.osoba-rola{font-size:.86rem;color:var(--akcent,var(--sand-700))}
.osoba-kontakt{display:flex;align-items:center;gap:9px;font-size:.88rem;color:var(--ink-400);min-width:0}
.osoba-kontakt span{overflow-wrap:anywhere}
.osoba-kontakt:hover{color:var(--akcent,var(--sand-700))}
.osoba-kontakt svg{color:var(--akcent,var(--sand-700));flex-shrink:0}

.trevi-mod--ciemne .zespol .osoba{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.trevi-mod--ciemne .osoba-imie{color:#fff}
.trevi-mod--ciemne .osoba-kontakt{color:rgba(255,255,255,.78)}
.trevi-mod--ciemne .osoba-kontakt:hover{color:#fff}
.trevi-mod--dziedzicz .zespol .osoba{background:none;border-color:color-mix(in srgb,currentColor 18%,transparent)}
.trevi-mod--dziedzicz .osoba-imie,.trevi-mod--dziedzicz .osoba-kontakt{color:inherit}

@media (max-width:900px){.zespol{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.zespol{grid-template-columns:1fr}}

/* ==========================================================================
   ZDJĘCIE I TEKST OBOK
   ========================================================================== */
.ed-blok{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3.4vw,54px);align-items:center}
.ed-blok--prawo .ed-foto{order:2}
.ed-foto{border-radius:var(--r-l,16px);overflow:hidden;background:var(--cream)}
.ed-foto img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3}
.ed-tresc .eyebrow{margin-bottom:14px}
.ed-txt{margin-top:18px;font-size:1rem;line-height:1.72;color:var(--ink-400)}
.ed-txt p{margin:0 0 14px}
.ed-txt p:last-child{margin-bottom:0}
.ed-dopisek{margin:18px 0 0;font-size:.8rem;color:var(--grey-text)}
.ed-tresc .cta-actions{margin-top:24px;display:flex;flex-wrap:wrap;gap:12px}
.trevi-mod--ciemne .ed-txt{color:rgba(255,255,255,.76)}
.trevi-mod--ciemne .ed-dopisek{color:rgba(255,255,255,.5)}
.trevi-mod--dziedzicz .ed-txt{color:color-mix(in srgb,currentColor 76%,transparent)}
@media (max-width:860px){
  .ed-blok{grid-template-columns:1fr}
  .ed-blok--prawo .ed-foto{order:0}
}

/* ==========================================================================
   TABELA PORÓWNANIA / CENNIK
   Wyróżniona kolumna dostaje piaskowe tło. Na wąskim ekranie tabela
   przewija się w bok — zgniatanie kolumn zabija czytelność.
   ========================================================================== */
.tabela-przewijana{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabela-przewijana .ctable{min-width:560px}
.ctable .hl{background:var(--sand-100)}
.ctable thead .hl{background:var(--sand-300);color:var(--ink)}
.ctable tbody .hl{font-weight:500;color:var(--ink)}
.tabela-stopka{margin:16px 0 0;font-size:.82rem;line-height:1.6;color:var(--grey-text)}

.trevi-mod--ciemne .ctable th,
.trevi-mod--ciemne .ctable td{border-bottom-color:rgba(255,255,255,.14);color:rgba(255,255,255,.82)}
.trevi-mod--ciemne .ctable thead th{color:rgba(255,255,255,.6);border-bottom-color:rgba(255,255,255,.2)}
.trevi-mod--ciemne .ctable tbody th{color:#fff}
.trevi-mod--ciemne .ctable .hl{background:rgba(197,164,141,.16)}
.trevi-mod--ciemne .ctable thead .hl{background:rgba(197,164,141,.3);color:#fff}
.trevi-mod--ciemne .tabela-stopka{color:rgba(255,255,255,.55)}
@media (max-width:620px){.ctable th,.ctable td{padding:14px 14px;font-size:.88rem}}

/* --- PRZYCISKI REZERWACJI PROFITROOM ---------------------------------------
   Kod odnośnika jest edytowalny w ustawieniach, więc nie da się w nim trzymać
   stylu „inline". Szerokość na 100% robi klasa. */
.btn-pelny{width:100%;justify-content:center}
/* Odnośnik Profitroom prowadzi do #rezerwuj i otwiera okno skryptem. Gdyby
   skrypt się nie wczytał, przeglądarka skoczyłaby na górę strony — kursor
   ma jasno mówić, że to przycisk. */
.trevi a[onclick^="Booking"],
.float-book a[onclick^="Booking"]{cursor:pointer}

/* ==========================================================================
   1.10.0 — poprawki z przeglądu strony testowej (8.10.2026)
   ========================================================================== */

/* --- Kontrast przycisku w stopce menu mobilnego -------------------------
   Reguła .mnav-foot a (0,1,1) bila .btn (0,1,0), więc piaskowy przycisk
   „Sprawdź dostępność" dostawał biały napis: kontrast 2,03:1 zamiast 4,5:1.
   Przycisk ma trzymać własny kolor napisu — reszta linków w stopce menu
   zostaje bez zmian. */
.mnav-foot a.btn { color: var(--btn-fg); }
.mnav-foot a.btn-sand { --btn-fg: var(--ink); }

/* --- Filtry na telefonie: jeden przewijany pasek ------------------------
   Dotąd układały się w trzy rzędy i pierwszy apartament pojawiał się
   dopiero pod nimi. */
@media (max-width: 720px) {
  .filters {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .filters::-webkit-scrollbar { display: none; }
  .filters .flabel { display: none; }
  .filters .chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-height: 40px;           /* palec, nie kursor */
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .filters .chip[data-clear] { margin-left: 0; }
}

/* --- Elementy dotykowe: minimum ok. 40 px ------------------------------
   Kropki slidera i miniatury miały 8–9 px. Powiększamy obszar dotyku,
   nie sam wygląd — kreska zostaje taka, jak była. */
.hero-dots button,
.gal-dots button,
[class*="-dots"] button {
  position: relative;
}
.hero-dots button::after,
.gal-dots button::after,
[class*="-dots"] button::after {
  content: "";
  position: absolute;
  inset: -18px -6px;
}
.hero-dots { gap: 14px; }

/* --- Pas z liczbami na telefonie ---------------------------------------
   Pięć kafelków układało się 2+2+1 i ostatni zostawał sam w rzędzie.
   Nieparzysty ostatni kafelek zajmuje teraz całą szerokość. */
@media (max-width: 720px) {
  .trust { grid-template-columns: repeat(2, 1fr); }
  .trust .trust-poz:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* --- Sekcje na ciemnym tle ---------------------------------------------
   Klasę trevi-mod--ciemne dokłada teraz skrypt, kiedy wykryje ciemne tło
   ustawione w kreatorze. Te reguły domykają to, czego nie obejmował
   dotychczasowy wariant ciemny: numer kroku i opis kroku. */
.trevi-mod--ciemne .krok-nr { color: var(--sand); }
.trevi-mod--ciemne .krok-opis,
.trevi-mod--ciemne .dist-list li span,
.trevi-mod--ciemne p { color: rgba(255, 255, 255, .82); }
.trevi-mod--ciemne .eyebrow { color: var(--sand); }

/* ==========================================================================
   1.11.0 — korekty zgłoszone po przeglądzie strony testowej
   ========================================================================== */

/* --- Ceny „od” w okienku rezerwacji --------------------------------------
   Każda pokazuje się osobno, tylko gdy ktoś ją wpisał w formularzu
   apartamentu. Doba dużym drukiem, miesiąc mniejszym, pod spodem. */
.book-ceny{margin:0 0 16px;display:grid;gap:3px}
.book-cena{
  display:flex;
  align-items:baseline;
  gap:7px;
  margin:0;
  color:var(--ink-400);
  font-size:.9rem;
}
.book-cena b{
  font-family:var(--font-display,inherit);
  font-size:1.75rem;
  font-weight:600;
  line-height:1.1;
  color:var(--ink);
}
.book-cena--mies{font-size:.82rem}
.book-cena--mies b{font-size:1.05rem;font-weight:600;color:var(--ink-400)}

/* --- Galeria apartamentu: duże zdjęcie, miniatury pod spodem -------------
   Jedna kolumna, ta sama kolejność na komputerze i na telefonie.
   Miniatury, które nie mieszczą się w rzędzie, przewijają się w bok. */
.gal{display:block}
.gal .gal-main{margin-bottom:12px}
.gal .gal-thumbs{
  display:flex;
  gap:10px;
  max-height:none;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:6px;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.gal .gal-thumbs::-webkit-scrollbar{display:none}
.gal .gal-thumbs button{
  flex:0 0 clamp(72px,11vw,104px);
  scroll-snap-align:start;
  aspect-ratio:1;
}

/* --- Pasek parametrów na telefonie ---------------------------------------
   Pięć kafelków w siatce dawało nierówne rzędy. Na telefonie jeden pod
   drugim: ikona po lewej, podpis i wartość po prawej. */
@media (max-width:720px){
  .spec-bar{
    grid-template-columns:1fr;
    margin:22px 0;
  }
  .spec-bar div{
    display:grid;
    grid-template-columns:28px 1fr;
    align-items:center;
    gap:14px;
    text-align:left;
    padding:14px 18px;
    border-right:0;
    border-bottom:1px solid var(--line-soft);
  }
  .spec-bar div:last-child{border-bottom:0}
  .spec-bar .si{margin:0;grid-row:span 2;align-self:center}
  .spec-bar b{grid-column:2;font-size:1.05rem;line-height:1.2}
  .spec-bar span:not(.si){grid-column:2;font-size:.78rem}
}

/* --- Karuzela apartamentów na telefonie ----------------------------------
   Jedna karta na środku, sąsiednie poza ekranem. */
@media (max-width:720px){
  .carousel{
    scroll-snap-type:x mandatory;
    /* odstęp równy marginesowi bocznemu — sąsiednia karta wypada wtedy
       dokładnie za krawędzią ekranu, czyli „jedna na środku, reszta ukryta" */
    gap:var(--gutter);
    scroll-padding-inline:var(--gutter);
  }
  .carousel>*{
    /* karta na całą szerokość toru: sąsiednia wypada za krawędź ekranu */
    flex:0 0 100%;
    scroll-snap-align:center;
    scroll-snap-stop:always;
  }
  .trevi-mod--pelna .carousel{padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
}

/* --- Filtry na telefonie: listy rozwijane --------------------------------
   Kafelki zostają w kodzie (sterują stanem), ale chowamy je i pokazujemy
   dwie listy. Bez przewijania w bok. */
.filtry-listy{display:none}

@media (max-width:720px){
  .filters{display:none}
  .filtry-listy{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-bottom:18px;
  }
  .filtry-pole{display:flex;flex-direction:column;gap:6px;min-width:0}
  .filtry-pole > span{
    font-size:.7rem;
    font-weight:600;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--ink-400);
  }
  .filtry-pole select{
    width:100%;
    box-sizing:border-box;
    min-height:46px;
    padding:11px 36px 11px 14px;
    font:inherit;
    font-size:.95rem;
    color:var(--ink);
    background-color:#fff;
    border:1px solid var(--line);
    border-radius:999px;
    -webkit-appearance:none;
    appearance:none;
    background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c5a48d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 13px center;
    background-size:16px;
  }
  .filtry-pole select:focus{
    border-color:var(--sand);
    outline:2px solid transparent;
    outline-offset:2px;
    box-shadow:0 0 0 3px rgba(197,164,141,.22);
  }
}

/* --- Menu mobilne --------------------------------------------------------
   Równa wysokość pozycji, większe logo, mniejszy tekst. */
.mnav-top{min-height:76px;height:auto;padding-block:12px}
.mnav-top .trevi-logo{height:42px}
.mnav-top .lockup-sub{font-size:10px}

.mnav-list > li > a,
.mnav-list > li > button{
  min-height:58px;                 /* każda pozycja tej samej wysokości */
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  box-sizing:border-box;
  padding:0;
  font-size:1.12rem;               /* było sporo większe */
  line-height:1.25;
}
.mnav-sub a{
  min-height:46px;
  display:flex;
  align-items:center;
  font-size:.95rem;
  padding-block:0;
}
.mnav-foot a{min-height:48px;font-size:.9rem}
.mnav-foot .btn{min-height:52px}