/* ===================================================================
   woodland — timber-house studio landing
   Palette: deep warm charcoal, warm white, hairline borders.
   Type: Playfair Display (display serif), Manrope (UI/body),
         Comfortaa (logo).
=================================================================== */

:root{
  --bg:        #15100e;
  --bg-2:      #1b1512;
  --panel:     rgba(20,15,13,.46);
  --ink:       #f4efe8;
  --muted:     rgba(244,239,232,.58);
  --faint:     rgba(244,239,232,.34);
  --line:      rgba(244,239,232,.20);
  --line-soft: rgba(244,239,232,.12);
  --radius:    14px;
  --maxw:      1200px;
  --ease:      cubic-bezier(.22,.61,.36,1);
  --serif: "Playfair Display", Georgia, serif;
  --sans:  "Manrope", system-ui, sans-serif;
  --logo:  "Comfortaa", "Manrope", sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; width:100%; height:100%; object-fit:cover; }
a{ color:inherit; text-decoration:none; }
em{ font-style:italic; }

/* ---------- shared buttons ---------- */
.btn-pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 22px; border:1px solid var(--line);
  border-radius:999px; font-size:13px; font-weight:600;
  letter-spacing:.01em; color:var(--ink);
  background:transparent; cursor:pointer;
  transition:background .35s, color .35s, border-color .35s;
}
.btn-pill:hover{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.btn-pill--solid{ background:var(--ink); color:var(--bg); border-color:var(--ink); gap:9px; }
.btn-pill--solid:hover{ background:transparent; color:var(--ink); }

/* ---------- booking link (replaces search) ---------- */
.booking-link{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; color:var(--ink);
  opacity:.9; transition:opacity .3s, transform .3s;
}
.booking-link svg{ opacity:.85; }
.booking-link:hover{ opacity:1; transform:translateY(-1px); }
.booking-link span{ position:relative; }
.booking-link span::after{
  content:""; position:absolute; left:0; bottom:-4px; height:1px; width:0;
  background:var(--ink); transition:width .35s var(--ease);
}
.booking-link:hover span::after{ width:100%; }

/* ===================================================================
   NAV
=================================================================== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; gap:32px;
  padding:26px clamp(20px,5vw,56px);
  transition:background .4s, padding .4s, border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(21,16,14,.82);
  backdrop-filter:blur(14px);
  padding-top:16px; padding-bottom:16px;
  border-color:var(--line-soft);
}
.logo{
  font-family:var(--logo); font-weight:700; font-size:24px;
  letter-spacing:-.01em; color:var(--ink); white-space:nowrap;
}
.nav__links{
  display:flex; gap:30px; margin-left:auto;
  font-size:14px; font-weight:500; color:var(--muted);
}
.nav__links a{ position:relative; transition:color .3s; }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0;
  background:var(--ink); transition:width .35s var(--ease);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ width:100%; }
.nav__right{ display:flex; align-items:center; gap:20px; }
.burger{ display:none; }

/* ===================================================================
   HERO
=================================================================== */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  padding:140px 24px 80px;
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0;
  background:url("img/JEZ.jpg") center/cover no-repeat;
  background-attachment: fixed;
}
.hero__veil{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 30%, rgba(21,16,14,.25), rgba(21,16,14,.72) 70%),
    linear-gradient(180deg, rgba(21,16,14,.55) 0%, rgba(21,16,14,.15) 35%, rgba(21,16,14,.92) 100%);
}
.hero__inner{
  position:relative; z-index:2;
  width:100%; max-width:1080px; text-align:center;
}

/* hero headline — line-by-line clip reveal */
.hero__title{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(30px,5.4vw,62px); line-height:1.12;
  letter-spacing:-.01em;
}
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line > span{
  display:inline-block;
  transform:translateY(110%);
  animation:lineUp 1s var(--ease) forwards;
}
.hero__title .line:nth-child(1) > span{ animation-delay:.15s; }
.hero__title .line:nth-child(2) > span{ animation-delay:.32s; }
.hero__title em{ font-weight:600; }
@keyframes lineUp{ to{ transform:translateY(0); } }

/* tabs */
.tabs{
  display:inline-flex; gap:clamp(20px,4vw,46px);
  margin:36px 0 22px;
  animation:rise .9s .55s both;
}
.tab{
  background:none; border:none; cursor:pointer;
  font-family:var(--sans); font-size:16px; font-weight:500;
  color:var(--faint); padding:6px 2px; position:relative;
  transition:color .3s;
}
.tab:hover{ color:var(--ink); }
.tab.is-active{ color:var(--ink); font-weight:700; }
.tab.is-active::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  bottom:-8px; width:34px; height:2px; background:var(--ink); border-radius:2px;
}

/* filter bar */
.filter{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:10px 18px; justify-content:center;
  max-width:920px; margin:0 auto;
  padding:16px 22px;
  background:var(--panel); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:var(--radius);
  animation:rise .9s .7s both;
}
.filter__field{ display:flex; align-items:center; gap:12px; }
.filter__label{ font-size:13px; color:var(--muted); white-space:nowrap; }
.filter__sep{ width:1px; height:26px; background:var(--line-soft); }

/* custom select */
.select{ position:relative; }
.select__btn{
  display:flex; align-items:center; gap:26px;
  min-width:158px; justify-content:space-between;
  padding:11px 14px; cursor:pointer;
  background:rgba(244,239,232,.05);
  border:1px solid var(--line); border-radius:9px;
  color:var(--ink); font-family:var(--sans); font-size:13px; font-weight:500;
  transition:border-color .3s, background .3s;
}
.select__btn:hover{ border-color:var(--faint); }
.select__btn svg{ transition:transform .3s; opacity:.7; }
.select.is-open .select__btn svg{ transform:rotate(180deg); }
.select__menu{
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:20;
  list-style:none; padding:6px;
  background:#221b17; border:1px solid var(--line); border-radius:10px;
  box-shadow:0 18px 40px rgba(0,0,0,.5);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .25s, transform .25s, visibility .25s;
}
.select.is-open .select__menu{ opacity:1; visibility:visible; transform:none; }
.select__menu li{
  padding:9px 11px; font-size:13px; border-radius:7px; cursor:pointer;
  color:var(--muted); transition:background .2s, color .2s;
}
.select__menu li:hover{ background:rgba(244,239,232,.07); color:var(--ink); }

/* stepper (1 2 3 4 5) */
.stepper{ display:flex; gap:7px; }
.stepper button{
  width:30px; height:30px; border-radius:7px;
  border:1px solid var(--line-soft); background:transparent;
  color:var(--faint); font-family:var(--sans); font-size:13px; font-weight:600;
  cursor:pointer; transition:all .25s;
}
.stepper button:hover{ color:var(--ink); border-color:var(--faint); }
.stepper button.is-active{
  background:var(--ink); color:var(--bg); border-color:var(--ink);
}

/* ===================================================================
   PROJECTS
=================================================================== */
.projects{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(70px,9vw,120px) clamp(20px,5vw,40px);
}
.projects__head{ margin-bottom:46px; }
.eyebrow{
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--faint); margin-bottom:14px;
}
.projects__title{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(28px,4.4vw,48px); line-height:1.1;
}
.projects__title em{ font-weight:500; }

/* scroll reveal helper */
.reveal{ opacity:0; transform:translateY(22px); }
.reveal.is-in{ opacity:1; transform:none; transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.d1.is-in{ transition-delay:.1s; }

.grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:24px;
}
@media (max-width:1000px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid{ grid-template-columns:1fr; } }

/* ---------- listing card (image slider on top + content panel) ---------- */
.card{
  position:relative; display:flex; flex-direction:column;
  border-radius:18px; overflow:hidden; cursor:pointer;
  background:var(--bg-2); border:1px solid var(--line-soft);
  box-shadow:0 16px 40px rgba(0,0,0,.26);
  transition:transform .5s var(--ease), border-color .4s, box-shadow .5s;
  animation:cardIn .6s var(--ease) both; animation-delay:var(--d,0ms);
}
.card:hover{ transform:translateY(-6px); border-color:var(--line); box-shadow:0 30px 66px rgba(0,0,0,.42); }
@keyframes cardIn{
  from{ opacity:0; transform:translateY(28px) scale(.985); }
  to{   opacity:1; transform:none; }
}

/* media area — keeps the sliding photos + parallax */
.card__media{ position:relative; aspect-ratio:3/2; overflow:hidden; cursor:grab; touch-action:pan-y; }
.card__media.is-grabbing{ cursor:grabbing; }
.card__track{
  position:absolute; inset:-7% 0;
  transform:translateY(var(--py,0px)); will-change:transform;
}
.card__photo{ position:absolute; inset:0; opacity:0; transition:opacity .7s var(--ease); }
.card__photo.is-shown{ opacity:1; }
.card__photo img{ transition:transform 1.3s var(--ease); }
.card:hover .card__photo.is-shown img{ transform:scale(1.06); }
.card__media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,0) 36%, rgba(0,0,0,0) 100%);
}

/* guests badge, top-left over media */
.card__badge{
  position:absolute; top:14px; left:14px; z-index:4;
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 12px; border-radius:999px;
  font-size:11.5px; font-weight:600; letter-spacing:.02em; color:var(--ink);
  background:rgba(16,12,10,.5); border:1px solid var(--line-soft); backdrop-filter:blur(6px);
}
.card__badge svg{ opacity:.9; }

/* content panel */
.card__body{
  flex:1; display:flex; flex-direction:column; gap:11px;
  padding:22px clamp(18px,2.4vw,26px) 22px;
}
.card__name{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(21px,2.4vw,27px); line-height:1.14;
}
.card__desc{ color:var(--muted); font-size:14px; line-height:1.62; }
.card__amen{ display:flex; flex-wrap:wrap; gap:8px; margin-top:1px; list-style:none; }
.card__amen li{
  font-size:12px; color:rgba(244,239,232,.8);
  padding:6px 11px; border:1px solid var(--line-soft); border-radius:999px;
  background:rgba(244,239,232,.03);
}
.card__foot{
  margin-top:auto; padding-top:16px; border-top:1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.card__cat{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint);
}
.card__more{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; color:var(--ink);
}
.card__more svg{ transition:transform .3s var(--ease); }
.card:hover .card__more svg{ transform:translateX(4px); }

/* slider arrows (inside media) */
.card__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  color:var(--ink); background:rgba(16,12,10,.4);
  border:1px solid var(--line-soft); cursor:pointer;
  opacity:.9; transition:opacity .35s, background .3s, color .3s;
}
.card__nav:hover{ opacity:1; background:var(--ink); color:var(--bg); }
.card__nav--prev{ left:12px; }
.card__nav--next{ right:12px; }

/* dots (inside media) */
.card__dots{
  position:absolute; left:50%; transform:translateX(-50%); bottom:12px; z-index:4;
  display:flex; gap:6px;
}
.card__dots i{
  width:6px; height:6px; border-radius:50%;
  background:rgba(244,239,232,.5); transition:background .3s, transform .3s;
}
.card__dots i.is-on{ background:var(--ink); transform:scale(1.3); }

.projects__more{ text-align:center; margin-top:44px; }
.btn-ghost{
  padding:14px 30px; border:1px solid var(--line); border-radius:999px;
  background:transparent; color:var(--ink); font-family:var(--sans);
  font-size:14px; font-weight:600; cursor:pointer;
  transition:background .35s, color .35s;
}
.btn-ghost:hover{ background:var(--ink); color:var(--bg); }

/* ===================================================================
   FOOTER
=================================================================== */
.footer{
  background:var(--bg-2); border-top:1px solid var(--line-soft);
  padding:64px clamp(20px,5vw,40px) 28px;
}
.footer__top{
  max-width:var(--maxw); margin:0 auto;
  display:flex; flex-wrap:wrap; gap:48px; justify-content:space-between;
  padding-bottom:44px; border-bottom:1px solid var(--line-soft);
}
.footer__brand{ max-width:340px; }
.footer__brand p{ margin-top:16px; color:var(--muted); font-size:14px; line-height:1.6; }
.footer__cols{ display:flex; gap:64px; flex-wrap:wrap; }
.footer__cols h4{ font-size:13px; letter-spacing:.06em; margin-bottom:16px; }
.footer__cols a, .footer__cols span{
  display:block; color:var(--muted); font-size:14px; margin-bottom:10px;
  transition:color .3s;
}
.footer__cols a:hover{ color:var(--ink); }
.footer__bottom{
  max-width:var(--maxw); margin:22px auto 0;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:13px; color:var(--faint);
}

/* ---------- hero supporting copy (Dorcia) ---------- */
.hero__lead{
  max-width:620px; margin:18px auto 0;
  font-size:clamp(14px,1.6vw,17px); line-height:1.55;
  color:rgba(244,239,232,.82);
  animation:rise .9s .45s both;
}
.hero__dist{
  display:inline-flex; align-items:center; flex-wrap:wrap; justify-content:center;
  gap:14px; margin:18px auto 0;
  font-size:13px; color:var(--muted);
  animation:rise .9s .52s both;
}
.hero__dist b{ color:var(--ink); font-weight:700; }
.hero__dist i{ width:4px; height:4px; border-radius:50%; background:var(--faint); }

.hero__stats{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(28px,7vw,72px); margin:34px auto 0;
  animation:rise .9s .9s both;
}
.hero__stats div{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.hero__stats b{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(24px,3.2vw,34px); line-height:1;
}
.hero__stats span{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint);
}

/* hero Booking CTA under the text */
.hero__cta{ margin-top:26px; animation:rise .9s .4s both; }

/* three category photos (filter selector) */
.hero__gallery{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
  max-width:720px; margin:26px auto 0;
  animation:rise .9s .8s both;
}
.hero__tile{
  position:relative; display:block; width:100%; height:150px; padding:0;
  border-radius:14px; overflow:hidden; cursor:pointer;
  border:1px solid var(--line-soft); background:none; color:inherit; font:inherit;
  transition:transform .4s var(--ease), border-color .4s, box-shadow .4s, opacity .4s, filter .4s;
}
.hero__tile img{ transition:transform 1s var(--ease); }
.hero__tile::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,.62));
}
.hero__tile:hover{ transform:translateY(-3px); }
.hero__tile:hover img{ transform:scale(1.07); }

.hero__tile-cap{
  position:absolute; left:14px; bottom:12px; z-index:2;
  font-family:var(--serif); font-weight:700; font-size:19px;
  color:var(--ink); text-shadow:0 2px 12px rgba(0,0,0,.6);
}
.hero__tile-check{
  position:absolute; top:10px; right:10px; z-index:3;
  width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--ink); color:var(--bg);
  opacity:0; transform:scale(.5);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}

/* selected state */
.hero__tile.is-active{
  border-color:var(--ink);
  box-shadow:0 0 0 2px var(--ink), 0 14px 30px rgba(0,0,0,.4);
  transform:translateY(-3px);
  animation:tilePop .45s var(--ease);
}
.hero__tile.is-active .hero__tile-check{ opacity:1; transform:scale(1); }
.hero__gallery:has(.hero__tile.is-active) .hero__tile:not(.is-active){ opacity:.5; filter:saturate(.85); }
.hero__gallery:has(.hero__tile.is-active) .hero__tile:not(.is-active):hover{ opacity:.85; transform:translateY(-3px); }
@keyframes tilePop{ 0%{ transform:scale(.95); } 55%{ transform:scale(1.03) translateY(-3px); } 100%{ transform:translateY(-3px); } }

/* ---------- offer intro paragraph ---------- */
.offer-lead{
  max-width:760px; margin:18px 0 0;
  font-size:15px; line-height:1.7; color:var(--muted);
}

/* ---------- footer socials ---------- */
.socials{ display:flex; gap:18px; margin-top:18px; }
.socials a{
  font-size:13px; color:var(--muted); position:relative; transition:color .3s;
}
.socials a:hover{ color:var(--ink); }
.socials a::after{
  content:""; position:absolute; left:0; bottom:-4px; height:1px; width:0;
  background:var(--ink); transition:width .35s var(--ease);
}
.socials a:hover::after{ width:100%; }

/* ===================================================================
   ANIMATIONS
=================================================================== */
@keyframes rise{ from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:none;} }

/* ===================================================================
   ATRAKCJE — 3D coverflow carousel
=================================================================== */
.attractions{
  position:relative; overflow:hidden;
  padding:clamp(72px,10vw,128px) 0 clamp(76px,11vw,132px);
  background:#0f0b0a;
}
.att__bg{ position:absolute; inset:0; z-index:0; }
.att__bg-layer{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter:blur(34px) brightness(.45) saturate(1.15);
  transform:scale(1.18);
  opacity:0; transition:opacity .8s var(--ease);
}
.att__bg-layer.is-front{ opacity:1; }
.att__veil{
  position:absolute; inset:0; z-index:0;
  background:radial-gradient(120% 90% at 50% 40%, rgba(15,11,10,.35), rgba(15,11,10,.78));
}

.att__head{ position:relative; z-index:2; text-align:center; max-width:620px; margin:0 auto 8px; padding:0 20px; }
.att__title{ font-family:var(--serif); font-weight:600; font-size:clamp(28px,4.4vw,46px); line-height:1.1; }
.att__title em{ font-weight:500; }
.att__lead{ margin-top:14px; color:rgba(244,239,232,.7); font-size:15px; line-height:1.6; }

.att__stage{
  position:relative; z-index:2;
  height:clamp(400px,50vw,520px);
  margin-top:clamp(44px,6vw,76px);
  perspective:1600px;
}
.att__deck{ position:absolute; inset:0; transform-style:preserve-3d; }

/* coverflow card — positioning layer (smooth slide) */
.cf{
  position:absolute; top:50%; left:50%;
  width:clamp(206px,22vw,286px); height:clamp(330px,37vw,446px);
  cursor:pointer; transform:translate(-50%,-50%);
  transform-style:preserve-3d;
  transition:transform .8s var(--ease), opacity .7s var(--ease);
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
}
/* tilt layer — follows the mouse like a 3D object */
.cf__inner{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  transition:transform .5s var(--ease);
}
/* clipped image frame */
.cf__frame{
  position:absolute; inset:0; border-radius:12px; overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.55);
}
.cf__img{ position:absolute; inset:0; }
.cf__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease); }
.cf.is-active:hover .cf__img img{ transform:scale(1.05); }
.cf__scrim{
  position:absolute; inset:0;
  background:rgba(9,7,6,.52);
  transition:background .6s var(--ease);
}
.cf.is-active .cf__scrim{
  background:linear-gradient(180deg, rgba(0,0,0,.1) 28%, rgba(0,0,0,.6));
}

/* caption — spills beyond the image, floats forward in 3D */
.cf__cap{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%) translateZ(60px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; width:max-content; max-width:190%;
  opacity:0; transition:opacity .55s var(--ease) .15s;
  pointer-events:none;
}
.cf.is-active .cf__cap{ opacity:1; }
.cf__tag{
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.9); padding:5px 12px;
  border:1px solid rgba(255,255,255,.4); border-radius:999px;
  white-space:nowrap; margin-bottom:16px;
  background:rgba(0,0,0,.18);
}
.cf__cap h3{
  font-family:var(--sans); font-weight:800; text-transform:uppercase;
  font-size:clamp(27px,3.6vw,42px); line-height:1.0; letter-spacing:.005em;
  color:#fff; text-shadow:0 4px 26px rgba(0,0,0,.75); white-space:nowrap;
}
.cf__cap .cf__rule{ width:38px; height:2px; background:rgba(255,255,255,.85); margin:14px 0; border-radius:2px; }
.cf__cap p{ font-size:13px; color:rgba(255,255,255,.85); max-width:30ch; line-height:1.5; text-shadow:0 2px 14px rgba(0,0,0,.6); }


/* arrows */
.att__arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:6;
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  color:#fff; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.28);
  transition:background .3s, color .3s, transform .2s;
}
.att__arrow:hover{ background:#fff; color:#141414; }
.att__arrow:active{ transform:translateY(-50%) scale(.92); }
.att__arrow--prev{ left:clamp(10px,4vw,48px); }
.att__arrow--next{ right:clamp(10px,4vw,48px); }

/* dots */
.att__dots{ position:relative; z-index:2; display:flex; justify-content:center; gap:9px; margin-top:clamp(38px,5vw,54px); }
.att__dots button{
  width:8px; height:8px; padding:0; border:none; border-radius:50%;
  background:rgba(255,255,255,.32); cursor:pointer; transition:background .3s, transform .3s;
}
.att__dots button.is-on{ background:#fff; transform:scale(1.35); }

/* ===================================================================
   RESPONSIVE
=================================================================== */
@media (max-width:860px){
  .nav__links{ display:none; }
  .burger{
    display:flex; flex-direction:column; gap:5px; margin-left:auto;
    background:none; border:none; cursor:pointer; padding:8px;
  }
  .burger span{ width:24px; height:2px; background:var(--ink); border-radius:2px; transition:.3s; }

  .nav.is-open{ background:rgba(21,16,14,.96); flex-wrap:wrap; }
  .nav.is-open .nav__links{
    display:flex; flex-direction:column; gap:18px; width:100%;
    margin:18px 0 6px; order:3;
  }

  .filter{ flex-direction:column; align-items:stretch; gap:14px; }
  .filter__sep{ display:none; }
  .filter__field{ justify-content:space-between; }
  .select__btn{ min-width:0; flex:1; }

  .grid{ grid-template-columns:1fr; }

  .att__arrow{ width:40px; height:40px; }
  .att__arrow--prev{ left:6px; }
  .att__arrow--next{ right:6px; }
  .cf{ width:clamp(190px,58vw,240px); height:clamp(300px,88vw,380px); }
  .cf__cap h3{ font-size:clamp(22px,7vw,30px); }
  .att__stage{ height:clamp(360px,92vw,440px); }
}

@media (max-width:480px){
  .tabs{ gap:18px; }
  .tab{ font-size:14px; }
  .card__stats{ font-size:11px; }
  .hero__gallery{ gap:9px; }
  .hero__tile{ height:104px; }
  .hero__tile-cap{ left:10px; bottom:9px; font-size:14px; }
  .hero__tile-check{ width:22px; height:22px; top:7px; right:7px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.001ms !important; }
  .hero__bg{ transform:none; }
  .hero__title .line > span{ transform:none; }
  .card__track{ transform:none !important; }
}

/* ===================================================================
   SUBPAGES — offer detail + contact
=================================================================== */
.subpage{ padding-top:0; }

/* offer hero */
.offer-hero{
  position:relative; overflow:hidden;
  min-height:66vh; display:flex; align-items:flex-end;
  padding:clamp(120px,16vw,168px) clamp(20px,5vw,40px) clamp(40px,6vw,66px);
}
.offer-hero__bg{ position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.05); }
.offer-hero__veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(21,16,14,.55) 0%, rgba(21,16,14,.2) 40%, rgba(21,16,14,.94) 100%);
}
.offer-hero__inner{ position:relative; z-index:2; max-width:1100px; width:100%; margin:0 auto; }
.crumbs{ font-size:13px; color:var(--muted); margin-bottom:16px; }
.crumbs a{ color:var(--muted); transition:color .3s; }
.crumbs a:hover{ color:var(--ink); }
.crumbs span{ margin:0 8px; color:var(--faint); }
.offer-hero h1{ font-family:var(--serif); font-weight:700; font-size:clamp(32px,5.4vw,60px); line-height:1.06; }
.offer-hero .offer-type{ font-family:var(--serif); font-style:italic; font-size:clamp(15px,2vw,19px); color:rgba(244,239,232,.85); margin-top:10px; }
.offer-hero .offer-lead2{ max-width:560px; margin-top:16px; color:rgba(244,239,232,.8); font-size:15px; line-height:1.6; }

/* offer body */
.offer-body{ max-width:1000px; margin:0 auto; padding:clamp(56px,8vw,92px) clamp(20px,5vw,40px) clamp(20px,4vw,40px); }
.offer-block{ margin-bottom:clamp(48px,7vw,80px); }
.offer-block > .eyebrow{ margin-bottom:14px; }
.offer-block h2{ font-family:var(--serif); font-weight:600; font-size:clamp(24px,3.4vw,36px); line-height:1.12; margin-bottom:20px; }
.offer-block h2 em{ font-weight:500; }
.offer-desc p{ color:var(--muted); font-size:15.5px; line-height:1.75; margin-bottom:16px; }
.offer-desc p:last-child{ margin-bottom:0; }

.badges{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.badges span{
  font-size:13px; color:var(--ink); padding:9px 16px;
  border:1px solid var(--line); border-radius:999px; background:rgba(244,239,232,.04);
}

.offer-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.offer-gallery figure{ aspect-ratio:4/3; border-radius:14px; overflow:hidden; border:1px solid var(--line-soft); }
.offer-gallery img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.offer-gallery figure:hover img{ transform:scale(1.06); }

.amen-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px 34px; }
.amen-grid li{ list-style:none; display:flex; align-items:flex-start; gap:11px; color:var(--muted); font-size:15px; line-height:1.5; }
.amen-grid svg{ flex:0 0 auto; margin-top:3px; color:var(--ink); opacity:.85; }

.info-card{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  padding:26px clamp(20px,3vw,32px); border:1px solid var(--line-soft);
  border-radius:16px; background:var(--bg-2);
}
.info-card div h4{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-bottom:8px; }
.info-card div p{ color:var(--ink); font-size:15px; }

.offer-back{ display:inline-flex; align-items:center; gap:8px; margin-top:8px; color:var(--muted); font-size:14px; transition:color .3s; }
.offer-back:hover{ color:var(--ink); }

/* contact page */
.contact-hero{
  padding:clamp(150px,18vw,200px) clamp(20px,5vw,40px) clamp(24px,4vw,40px);
  text-align:center; max-width:760px; margin:0 auto;
}
.contact-hero .eyebrow{ margin-bottom:14px; }
.contact-hero h1{ font-family:var(--serif); font-weight:700; font-size:clamp(32px,5.4vw,58px); line-height:1.06; }
.contact-hero p{ margin-top:16px; color:var(--muted); font-size:15.5px; line-height:1.65; }

.contact-wrap{ max-width:1000px; margin:0 auto; padding:clamp(30px,5vw,54px) clamp(20px,5vw,40px) clamp(60px,9vw,110px); }
.contact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.contact-card{
  padding:28px; border:1px solid var(--line-soft); border-radius:16px; background:var(--bg-2);
}
.contact-card h3{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:16px; }
.contact-card a, .contact-card p{ display:block; color:var(--ink); font-size:16px; margin-bottom:10px; transition:color .3s; }
.contact-card a:hover{ color:var(--muted); }
.contact-card .muted{ color:var(--muted); font-size:14px; }
.contact-socials{ display:flex; gap:16px; margin-top:4px; }
.contact-socials a{ font-size:14px; }

@media (max-width:820px){
  .offer-gallery{ grid-template-columns:1fr; }
  .amen-grid{ grid-template-columns:1fr; }
  .info-card{ grid-template-columns:1fr; gap:18px; }
  .contact-grid{ grid-template-columns:1fr; }
}

/* ===================================================================
   ENHANCEMENTS — Dorcia (awenso.pl)
=================================================================== */

/* ---- primary Booking CTA in nav (always visible, incl. mobile) ---- */
.btn-book{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  padding:11px 20px; border-radius:999px;
  font-size:13px; font-weight:700; letter-spacing:.01em;
  background:var(--ink); color:var(--bg); border:1px solid var(--ink);
  transition:background .35s, color .35s, transform .3s;
}
.btn-book svg{ flex:0 0 auto; }
.btn-book:hover{ background:transparent; color:var(--ink); transform:translateY(-1px); }

/* (offer cards redesigned in the PROJECTS section as listing cards) */

/* ---------------------------------------------------------------
   SUBPAGE — distances / quick facts under the offer hero title
--------------------------------------------------------------- */
.offer-facts{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px;
  margin-top:22px;
}
.offer-facts span{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; color:rgba(244,239,232,.82);
}
.offer-facts b{ color:var(--ink); font-weight:700; }
.offer-facts i{ width:4px; height:4px; border-radius:50%; background:var(--faint); }

/* ---------------------------------------------------------------
   SUBPAGE — booking CTA block inside the body
--------------------------------------------------------------- */
.book-card{
  display:grid; grid-template-columns:1.3fr auto; align-items:center; gap:26px;
  padding:clamp(24px,4vw,38px); border-radius:20px;
  border:1px solid var(--line);
  background:
    radial-gradient(120% 160% at 100% 0%, rgba(244,239,232,.06), rgba(244,239,232,0) 60%),
    var(--bg-2);
  box-shadow:0 22px 60px rgba(0,0,0,.35);
}
.book-card__eyebrow{
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--faint); margin-bottom:12px;
}
.book-card h3{ font-family:var(--serif); font-weight:600; font-size:clamp(22px,3vw,30px); line-height:1.14; }
.book-card h3 em{ font-weight:500; }
.book-card p{ margin-top:12px; color:var(--muted); font-size:15px; line-height:1.65; max-width:44ch; }
.book-card__actions{ display:flex; flex-direction:column; gap:12px; min-width:210px; }
.book-card__actions .btn-pill,
.book-card__actions .btn-book{ width:100%; }
.book-card__phone{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:11px 20px; border-radius:999px; border:1px solid var(--line);
  font-size:13px; font-weight:600; color:var(--ink);
  transition:background .3s, color .3s;
}
.book-card__phone:hover{ background:var(--ink); color:var(--bg); }

/* ---------------------------------------------------------------
   SUBPAGE — final CTA band before footer
--------------------------------------------------------------- */
.cta-band{
  position:relative; overflow:hidden;
  padding:clamp(64px,9vw,104px) clamp(20px,5vw,40px);
  text-align:center; border-top:1px solid var(--line-soft);
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(244,239,232,.05), rgba(244,239,232,0) 60%),
    var(--bg);
}
.cta-band .eyebrow{ margin-bottom:14px; }
.cta-band h2{ font-family:var(--serif); font-weight:600; font-size:clamp(26px,4vw,44px); line-height:1.1; max-width:16ch; margin:0 auto; }
.cta-band h2 em{ font-weight:500; }
.cta-band p{ max-width:52ch; margin:16px auto 0; color:var(--muted); font-size:15px; line-height:1.65; }
.cta-band__actions{ display:inline-flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:30px; }

/* ---------------------------------------------------------------
   LIGHTBOX (gallery) — podgląd zdjęć na całą stronę
--------------------------------------------------------------- */
.offer-gallery figure{ cursor:zoom-in; position:relative; }
.offer-gallery figure::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.35));
  opacity:0; transition:opacity .4s;
}
.offer-gallery figure:hover::after{ opacity:1; }

.lightbox{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center; padding:4vmin;
  background:rgba(10,7,6,.94); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden;
  transition:opacity .35s var(--ease), visibility .35s;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox img{
  max-width:min(1400px,96vw); max-height:92vh;
  width:auto; height:auto; object-fit:contain;
  border-radius:10px; box-shadow:0 30px 90px rgba(0,0,0,.6);
  transform:scale(.97); transition:transform .35s var(--ease);
}
.lightbox.is-open img{ transform:none; }

.lightbox__close,
.lightbox__nav{
  position:absolute; z-index:2; display:grid; place-items:center;
  width:48px; height:48px; border-radius:50%; cursor:pointer;
  color:#fff; background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.28);
  transition:background .3s, color .3s, transform .2s;
}
.lightbox__close:hover,
.lightbox__nav:hover{ background:#fff; color:#141414; }
.lightbox__close{ top:clamp(12px,3vw,26px); right:clamp(12px,3vw,26px); }
.lightbox__nav{ top:50%; transform:translateY(-50%); }
.lightbox__nav--prev{ left:clamp(10px,3vw,32px); }
.lightbox__nav--next{ right:clamp(10px,3vw,32px); }

.lightbox__count{
  position:absolute; left:50%; bottom:clamp(14px,3vw,28px); transform:translateX(-50%);
  font-size:12.5px; letter-spacing:.12em; color:rgba(255,255,255,.75);
}

@media (max-width:640px){
  .lightbox__close, .lightbox__nav{ width:40px; height:40px; }
  .lightbox img{ max-height:82vh; }
}

/* ---------------------------------------------------------------
   COOKIE NOTICE
--------------------------------------------------------------- */
.cookie{
  position:fixed; left:clamp(14px,4vw,26px); right:clamp(14px,4vw,26px); bottom:clamp(14px,4vw,26px);
  z-index:120; max-width:560px; margin:0 auto;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:18px 20px; border-radius:16px;
  background:rgba(27,21,18,.96); border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(0,0,0,.5); backdrop-filter:blur(8px);
  transform:translateY(140%); transition:transform .5s var(--ease);
}
.cookie.is-in{ transform:none; }
.cookie p{ flex:1 1 240px; font-size:13px; line-height:1.55; color:var(--muted); margin:0; }
.cookie p a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
.cookie button{
  padding:10px 20px; border-radius:999px; cursor:pointer;
  font-family:var(--sans); font-size:13px; font-weight:700;
  background:var(--ink); color:var(--bg); border:1px solid var(--ink);
  transition:background .3s, color .3s;
}
.cookie button:hover{ background:transparent; color:var(--ink); }

/* ---------------------------------------------------------------
   AUTHOR BAR — awenso.pl
--------------------------------------------------------------- */
.author-bar{
  background:#0f0b0a; border-top:1px solid var(--line-soft);
  padding:16px clamp(20px,5vw,40px);
}
.author-bar__inner{
  max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:12.5px; color:var(--faint); letter-spacing:.02em;
}
.author-bar a{
  color:var(--muted); font-weight:600; position:relative; transition:color .3s;
}
.author-bar a:hover{ color:var(--ink); }
.author-bar a::after{
  content:""; position:absolute; left:0; bottom:-3px; height:1px; width:0;
  background:var(--ink); transition:width .35s var(--ease);
}
.author-bar a:hover::after{ width:100%; }

/* ---------------------------------------------------------------
   POLICY PAGE (polityka prywatności)
--------------------------------------------------------------- */
.policy{ max-width:820px; margin:0 auto; padding:clamp(40px,7vw,72px) clamp(20px,5vw,40px) clamp(48px,7vw,84px); }
.policy h2{ font-family:var(--serif); font-weight:600; font-size:clamp(20px,2.8vw,27px); line-height:1.2; margin:clamp(30px,4vw,44px) 0 14px; }
.policy h2:first-of-type{ margin-top:8px; }
.policy p, .policy li{ color:var(--muted); font-size:15px; line-height:1.75; }
.policy p{ margin-bottom:14px; }
.policy ul{ margin:0 0 14px; padding-left:20px; }
.policy li{ margin-bottom:8px; }
.policy a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
.policy strong{ color:var(--ink); font-weight:600; }
.policy .note{
  margin-top:34px; padding:18px 20px; border-radius:14px;
  border:1px solid var(--line-soft); background:var(--bg-2);
  font-size:13.5px; color:var(--faint);
}

/* ---------------------------------------------------------------
   RESPONSIVE additions
--------------------------------------------------------------- */
@media (max-width:860px){
  .book-card{ grid-template-columns:1fr; gap:22px; }
  .book-card__actions{ min-width:0; }
}
@media (max-width:480px){
  .booking-link{ display:none; }        /* keep only the strong Booking pill on phones */
  .btn-book{ padding:10px 16px; font-size:12.5px; }
  .nav{ gap:14px; padding-left:16px; padding-right:16px; }
  .card__chip{ font-size:10px; padding:6px 11px; }
}

/* ===================================================================
   SUBPAGE REDESIGN — two-column layout + refined components
=================================================================== */

/* hero facts as a floating glass bar */
.offer-facts{
  display:inline-flex; flex-wrap:wrap; align-items:center; gap:10px 18px;
  margin-top:24px; padding:14px 20px;
  background:rgba(20,15,13,.42); border:1px solid var(--line-soft);
  border-radius:14px; backdrop-filter:blur(8px);
}
.offer-facts span{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:rgba(244,239,232,.86); }
.offer-facts b{ color:var(--ink); font-weight:700; }
.offer-facts i{ width:4px; height:4px; border-radius:50%; background:var(--faint); }

/* body → two columns with a sticky booking aside */
.offer-body{ max-width:1140px; }
.offer-grid{
  display:grid; grid-template-columns:minmax(0,1fr) 344px;
  gap:clamp(28px,4vw,60px); align-items:start;
}
.offer-main > .offer-block:first-child{ margin-top:0; }
.offer-main > .offer-block:last-child{ margin-bottom:0; }
.offer-aside{ position:sticky; top:92px; display:flex; flex-direction:column; gap:18px; }

/* booking card — vertical side variant (reuses .book-card base look) */
.book-card--side{ display:block; padding:26px; border-radius:18px; }
.book-card--side h3{ font-size:clamp(20px,2.6vw,25px); }
.book-card--side p{ font-size:14px; max-width:none; }
.book-card--side .book-card__actions{ margin-top:20px; min-width:0; }

/* small facts list in aside */
.stay-facts{
  border:1px solid var(--line-soft); border-radius:18px; background:var(--bg-2);
  padding:22px 24px;
}
.stay-facts .eyebrow{ margin-bottom:16px; }
.stay-facts dl{ display:grid; grid-template-columns:auto 1fr; gap:13px 16px; margin:0; }
.stay-facts__row{ display:contents; }
.stay-facts dt{ color:var(--muted); font-size:13.5px; }
.stay-facts dd{ color:var(--ink); font-size:13.5px; font-weight:600; text-align:right; margin:0; }

/* refined amenities: neat bordered rows */
.amen-grid{ gap:10px 14px; }
.amen-grid li{
  align-items:center; padding:12px 15px;
  border:1px solid var(--line-soft); border-radius:12px;
  background:rgba(244,239,232,.02); color:rgba(244,239,232,.82);
  transition:border-color .3s, background .3s;
}
.amen-grid li:hover{ border-color:var(--line); background:rgba(244,239,232,.045); }
.amen-grid svg{ margin-top:0; }

/* asymmetric gallery: first image spans full width */
.offer-gallery{ grid-template-columns:repeat(2,1fr); }
.offer-gallery figure{ aspect-ratio:4/3; }
.offer-gallery figure:first-child{ grid-column:1 / -1; aspect-ratio:16/8; }

@media (max-width:980px){
  .offer-grid{ grid-template-columns:1fr; }
  .offer-aside{ display: none;}
}
@media (max-width:820px){
  .offer-gallery{ grid-template-columns:1fr; }
  .offer-gallery figure:first-child{ aspect-ratio:4/3; }
  .amen-grid{ grid-template-columns:1fr; }
  .offer-aside{ display: none;}
}

/* ---------- 3 równe zdjęcia pod listą wyposażenia ---------- */
.offer-gallery--trio{ grid-template-columns:repeat(3,1fr); margin-top:26px; }
.offer-gallery--trio figure{ aspect-ratio:4/3; }
.offer-gallery--trio figure:first-child{ grid-column:auto; aspect-ratio:4/3; }
@media (max-width:820px){
  .offer-gallery--trio{ grid-template-columns:1fr; }
}

/* zdjęcia w galeriach są klikalne (powiększenie) */
.offer-gallery figure{ cursor:zoom-in; }

/* wyśrodkowany napis na przycisku "Zarezerwuj na Booking" */
.btn-book{ justify-content:center; text-align:center; }

/* ---------- galeria główna: 3 zdjęcia + kafelek "+" ---------- */
.offer-gallery--main{ grid-template-columns:repeat(3,1fr); }
.offer-gallery--main figure{ aspect-ratio:4/3; }
/* pierwsze zdjęcie na całą szerokość — duży kadr wprowadzający */
.offer-gallery--main figure:first-child{ grid-column:1 / -1; aspect-ratio:16/8; }

/* zdjęcia 5–6 pojawiają się dopiero po kliknięciu plusa */
.offer-gallery--main figure.is-more{ display:none; }
.offer-gallery--main.is-expanded figure.is-more{
  display:block; animation:galIn .5s var(--ease) both;
}
@keyframes galIn{ from{ opacity:0; transform:translateY(14px) scale(.98); } to{ opacity:1; transform:none; } }

/* kafelek ze zdjęciem przykrytym warstwą + plusem */
.offer-gallery--main figure{ position:relative; }
.offer-gallery--main figure.has-plus img{ filter:brightness(.5) saturate(.9); }

.gal-plus{
  position:absolute; inset:0; z-index:3; width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  cursor:pointer; border:none; background:rgba(16,12,10,.35);
  color:var(--ink); font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.02em;
  transition:background .35s var(--ease);
}
.gal-plus svg{
  padding:9px; border-radius:50%;
  border:1px solid rgba(244,239,232,.5); background:rgba(16,12,10,.3);
  transition:transform .35s var(--ease), background .35s, color .35s;
}
.gal-plus:hover{ background:rgba(16,12,10,.18); }
.gal-plus:hover svg{ transform:scale(1.08) rotate(90deg); background:var(--ink); color:var(--bg); }

@media (max-width:820px){
  .offer-gallery--main{ grid-template-columns:1fr; }
  .offer-gallery--main figure:first-child{ aspect-ratio:4/3; }
}

/* zdjęcia w galeriach są klikalne (powiększenie) */
.offer-gallery figure{ cursor:zoom-in; }
.gal-plus{ cursor:pointer; }

/* ---------- plus/rozwijanie także w galerii pod wyposażeniem ---------- */
.offer-gallery--trio figure{ position:relative; }
.offer-gallery--trio figure.is-more{ display:none; }
.offer-gallery--trio.is-expanded figure.is-more{ display:block; animation:galIn .5s var(--ease) both; }
.offer-gallery--trio figure.has-plus img{ filter:brightness(.5) saturate(.9); }