/* ==========================================================================
   Ubytování Kouty — design system
   Čistý moderní minimalismus
   ========================================================================== */

:root{
  --bg:#ffffff;
  --bg-soft:#f7f6f3;
  --bg-deep:#12181a;
  --ink:#0f1416;
  --ink-2:#3d4649;
  --muted:#7c858a;
  --line:#e6e3dd;
  --line-2:#f0eeea;
  --accent:#20463a;
  --accent-hover:#173328;
  --accent-soft:#eef2ef;
  --gold:#a98b52;

  --r-sm:6px;
  --r-md:12px;
  --r-lg:20px;
  --r-xl:28px;

  --shadow-sm:0 1px 2px rgba(15,20,22,.06), 0 4px 12px rgba(15,20,22,.04);
  --shadow-md:0 2px 4px rgba(15,20,22,.05), 0 12px 32px rgba(15,20,22,.08);
  --shadow-lg:0 30px 80px rgba(15,20,22,.14);

  --font-display:"Instrument Serif", "Times New Roman", Georgia, serif;
  --font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --maxw:1240px;
  --gutter:clamp(20px, 5vw, 56px);
  --section:clamp(72px, 10vw, 140px);

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:90px}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%; display:block}
button,input,select,textarea{font:inherit; color:inherit}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{margin:0; font-weight:400; letter-spacing:-.02em; line-height:1.08}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
ul{margin:0; padding:0; list-style:none}
hr{border:0; border-top:1px solid var(--line); margin:0}

/* ---------- typography scale ---------- */
.display{font-family:var(--font-display); font-weight:400; letter-spacing:-.015em}
h1.display{font-size:clamp(2.9rem, 7.2vw, 5.6rem); line-height:1.02}
h2.display{font-size:clamp(2.1rem, 4.4vw, 3.4rem); line-height:1.08}
h3.display{font-size:clamp(1.45rem, 2.4vw, 2rem); line-height:1.15}

.eyebrow{
  font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); margin:0 0 18px;
}
.eyebrow--light{color:rgba(255,255,255,.72)}
.lead{font-size:clamp(1.05rem, 1.6vw, 1.24rem); line-height:1.62; color:var(--ink-2)}
.muted{color:var(--muted)}
.small{font-size:.9rem}
.tiny{font-size:.8rem}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.wrap--narrow{max-width:820px}
.section{padding-block:var(--section)}
.section--soft{background:var(--bg-soft)}
.section--tight{padding-block:clamp(52px,7vw,86px)}
.stack-sm > * + *{margin-top:12px}
.grid{display:grid; gap:clamp(24px,3.5vw,48px)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:540px){ .grid-4{grid-template-columns:1fr} }

.section-head{max-width:680px; margin-bottom:clamp(40px,5vw,64px)}
.section-head.center{margin-inline:auto; text-align:center}
.section-head p{margin-top:20px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px; border-radius:100px; border:1px solid transparent;
  font-size:.94rem; font-weight:500; letter-spacing:.01em; cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), transform .25s var(--ease);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--accent); color:#fff}
.btn--primary:hover{background:var(--accent-hover)}
.btn--ghost{border-color:var(--line); background:transparent; color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink); background:var(--ink); color:#fff}
.btn--light{background:#fff; color:var(--ink)}
.btn--light:hover{background:#f0efec}
.btn--outline-light{border-color:rgba(255,255,255,.5); color:#fff}
.btn--outline-light:hover{background:#fff; color:var(--ink); border-color:#fff}
.btn--sm{padding:11px 20px; font-size:.86rem}
.btn--block{width:100%}

/* Šipka se při najetí posouvá transformem, NE změnou gapu.
   Změna gapu měnila šířku odkazu o 5 px, což v úzkém řádku způsobilo
   zalomení, karta povyrostla, odkaz utekl kurzoru a celé to blikalo. */
.link-arrow{
  display:inline-flex; align-items:center; gap:9px; font-weight:500; font-size:.95rem;
  color:var(--accent); border-bottom:1px solid transparent; padding-bottom:2px;
  white-space:nowrap;
  transition:border-color .25s var(--ease);
}
.link-arrow:hover{border-color:currentColor}
.link-arrow svg{
  width:16px; height:16px; flex:none;
  transition:transform .25s var(--ease);
}
.link-arrow:hover svg{transform:translateX(5px)}
@media(hover:none){.link-arrow{padding-block:7px}}

/* ---------- header ---------- */
.header{
  position:fixed; inset:0 0 auto; z-index:100;
  transition:background .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.header__inner{
  max-width:var(--maxw); margin-inline:auto; padding:16px var(--gutter);
  display:flex; align-items:center; gap:28px;
}
.logo{display:flex; align-items:center; gap:11px; flex:none; transition:color .35s var(--ease)}
.logo__mark{width:34px; height:34px; flex:none}
.logo__text{display:flex; flex-direction:column; line-height:1.05}
.logo__name{font-family:var(--font-display); font-size:1.22rem; letter-spacing:-.01em}
.logo__sub{font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; opacity:.6}

.nav{display:flex; align-items:center; gap:4px; margin-left:auto}
.nav a{
  position:relative; padding:9px 14px; font-size:.92rem; border-radius:100px;
  transition:opacity .2s var(--ease), background .2s var(--ease);
}
.nav a:hover{opacity:.65}
.nav a[aria-current="page"]::after{
  content:""; position:absolute; left:14px; right:14px; bottom:3px;
  height:1px; background:currentColor; opacity:.5;
}
.header__actions{display:flex; align-items:center; gap:14px; flex:none}
.header__tel{font-size:.92rem; font-variant-numeric:tabular-nums; white-space:nowrap}
.header__tel:hover{opacity:.65}

/* transparent state (over hero) */
.header--over{color:#fff}
.header--over .btn--primary{background:#fff; color:var(--ink)}
.header--over .btn--primary:hover{background:rgba(255,255,255,.86)}
/* solid state */
.header--solid{background:rgba(255,255,255,.92); backdrop-filter:blur(16px); border-bottom-color:var(--line); color:var(--ink)}
.header--hidden{transform:translateY(-100%)}
.header{transition:transform .4s var(--ease), background .35s var(--ease), border-color .35s var(--ease)}

.burger{
  display:none; width:44px; height:44px; border:0; background:transparent; cursor:pointer;
  align-items:center; justify-content:center; border-radius:50%;
}
.burger span{display:block; width:20px; height:1.5px; background:currentColor; position:relative; transition:.3s var(--ease)}
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:20px; height:1.5px; background:currentColor; transition:.3s var(--ease);
}
.burger span::before{top:-6px}
.burger span::after{top:6px}
body.menu-open .burger span{background:transparent}
body.menu-open .burger span::before{top:0; transform:rotate(45deg)}
body.menu-open .burger span::after{top:0; transform:rotate(-45deg)}

@media(max-width:1040px){
  .nav{
    position:fixed; inset:0; background:var(--bg); color:var(--ink);
    flex-direction:column; justify-content:center; gap:6px; margin:0;
    opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s;
  }
  .nav a{font-family:var(--font-display); font-size:2rem; padding:10px 20px}
  body.menu-open .nav{opacity:1; visibility:visible}
  .burger{display:flex; margin-left:auto; z-index:2}
  .header__actions{z-index:2}
  .header__tel{display:none}
}
@media(max-width:600px){
  .header__actions .btn{display:none}
}

/* ---------- hero ---------- */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; color:#fff; overflow:hidden}
.hero--short{min-height:78svh}
.hero__media{position:absolute; inset:0}
.hero__media img{width:100%; height:100%; object-fit:cover; animation:heroZoom 18s var(--ease) forwards}
@keyframes heroZoom{from{transform:scale(1.08)} to{transform:scale(1)}}
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,14,16,.5) 0%, rgba(10,14,16,.15) 32%, rgba(10,14,16,.22) 55%, rgba(10,14,16,.78) 100%);
}
.hero__body{position:relative; width:100%; padding-bottom:clamp(56px,8vw,104px); padding-top:140px}
.hero__title{max-width:15ch; text-shadow:0 2px 40px rgba(0,0,0,.25)}
.hero__sub{max-width:52ch; margin-top:24px; color:rgba(255,255,255,.88); font-size:clamp(1.02rem,1.5vw,1.18rem)}
.hero__cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:38px}
.hero__scroll{
  position:absolute; right:var(--gutter); bottom:clamp(56px,8vw,104px);
  writing-mode:vertical-rl; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.7); display:flex; align-items:center; gap:14px;
}
.hero__scroll::after{content:""; width:1px; height:56px; background:linear-gradient(rgba(255,255,255,.7), transparent)}
@media(max-width:900px){ .hero__scroll{display:none} }

/* facts bar */
.facts{border-bottom:1px solid var(--line)}
.facts__inner{
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  display:grid; grid-template-columns:repeat(4,1fr);
}
.fact{padding:32px 24px 32px 0; border-left:1px solid var(--line); padding-left:28px}
.fact:first-child{border-left:0; padding-left:0}
.fact__k{font-family:var(--font-display); font-size:1.85rem; line-height:1}
.fact__v{font-size:.82rem; color:var(--muted); margin-top:7px; letter-spacing:.02em}
@media(max-width:820px){
  .facts__inner{grid-template-columns:repeat(2,1fr)}
  .fact{padding:22px 16px; border-left:1px solid var(--line); border-top:1px solid var(--line)}
  .fact:nth-child(1),.fact:nth-child(2){border-top:0}
  .fact:nth-child(odd){border-left:0; padding-left:0}
}

/* ---------- intro / split ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,86px); align-items:center}
.split--reverse .split__media{order:2}
.split__media{position:relative}
.split__media img{width:100%; border-radius:var(--r-lg); aspect-ratio:4/5; object-fit:cover}
.split__media--wide img{aspect-ratio:5/4}
.split__badge{
  position:absolute; left:-28px; bottom:34px; background:#fff; border-radius:var(--r-md);
  padding:20px 26px; box-shadow:var(--shadow-md); max-width:230px;
}
.split__badge .fact__k{font-size:1.5rem}
@media(max-width:900px){
  .split{grid-template-columns:1fr}
  .split--reverse .split__media{order:0}
  .split__badge{left:16px; bottom:16px}
}

/* ---------- property cards ---------- */
.props{display:grid; gap:clamp(28px,3vw,40px)}
.prop{
  display:grid; grid-template-columns:1.15fr 1fr; gap:0; overflow:hidden;
  border-radius:var(--r-lg); border:1px solid var(--line); background:#fff;
  transition:box-shadow .4s var(--ease), transform .4s var(--ease);
}
.prop:hover{box-shadow:var(--shadow-md)}
.prop--flip .prop__media{order:2}
.prop__media{position:relative; overflow:hidden; min-height:400px}
.prop__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease)}
.prop:hover .prop__media img{transform:scale(1.045)}
.prop__tag{
  position:absolute; top:20px; left:20px; z-index:2; background:rgba(255,255,255,.94);
  padding:8px 16px; border-radius:100px; font-size:.76rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
}
.prop__body{padding:clamp(30px,4vw,52px); display:flex; flex-direction:column}
.prop__meta{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px}
.chip{
  display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:100px;
  background:var(--bg-soft); font-size:.8rem; color:var(--ink-2); white-space:nowrap;
}
.chip svg{width:14px; height:14px; opacity:.6; flex:none}
.prop__desc{margin-top:16px; color:var(--ink-2)}
.prop__foot{
  margin-top:auto; padding-top:28px; display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
}
.price-from .tiny{color:var(--muted); display:block; margin-bottom:2px}
.price-from strong{font-family:var(--font-display); font-size:1.7rem; font-weight:400; letter-spacing:-.01em}
@media(max-width:900px){
  .prop{grid-template-columns:1fr}
  .prop--flip .prop__media{order:0}
  .prop__media{min-height:280px; aspect-ratio:16/10}
}

/* ---------- feature list ---------- */
.features{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.feature{background:#fff; padding:clamp(26px,3vw,38px)}
.feature__icon{width:26px; height:26px; color:var(--accent); margin-bottom:20px}
.feature h3{font-size:1.06rem; font-weight:500; letter-spacing:-.005em; margin-bottom:9px}
.feature p{font-size:.94rem; color:var(--muted); line-height:1.6}
@media(max-width:900px){ .features{grid-template-columns:repeat(2,1fr)} }
@media(max-width:600px){ .features{grid-template-columns:1fr} }

/* ---------- amenity checklist ---------- */
.amenities{columns:2; column-gap:clamp(28px,4vw,64px)}
.amenities li{
  break-inside:avoid; padding:11px 0 11px 30px; position:relative;
  border-bottom:1px solid var(--line-2); font-size:.96rem; color:var(--ink-2);
}
.amenities li::before{
  content:""; position:absolute; left:2px; top:19px; width:11px; height:6px;
  border-left:1.5px solid var(--accent); border-bottom:1.5px solid var(--accent);
  transform:rotate(-45deg);
}
@media(max-width:700px){ .amenities{columns:1} }

/* ---------- rooms table ---------- */
.rooms{border-top:1px solid var(--line)}
.room{display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:baseline; padding:20px 0; border-bottom:1px solid var(--line)}
.room__floor{font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); min-width:96px}
.room__name{font-size:1rem}
.room__beds{font-size:.9rem; color:var(--muted); white-space:nowrap}
@media(max-width:640px){
  .room{grid-template-columns:1fr auto; gap:6px 16px}
  .room__floor{grid-column:1/-1; min-width:0}
}

/* ---------- gallery ---------- */
.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.gallery__item{
  position:relative; overflow:hidden; border-radius:var(--r-md); cursor:zoom-in;
  background:var(--bg-soft); border:0; padding:0; display:block; aspect-ratio:1;
}
.gallery__item img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease), opacity .3s}
.gallery__item:hover img{transform:scale(1.05)}
.gallery__item--wide{grid-column:span 2; aspect-ratio:2/1}
.gallery__item--tall{grid-row:span 2; aspect-ratio:1/2}
@media(max-width:900px){
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery__item--tall{grid-row:span 1; aspect-ratio:1}
  .gallery__item--wide{grid-column:span 2; aspect-ratio:2/1}
}

/* lightbox */
.lb{
  position:fixed; inset:0; z-index:200; background:rgba(9,12,14,.95);
  display:flex; align-items:center; justify-content:center; padding:clamp(16px,4vw,60px);
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
}
.lb.is-open{opacity:1; visibility:visible}
.lb img{max-width:100%; max-height:100%; object-fit:contain; border-radius:6px}
.lb__btn{
  position:absolute; background:rgba(255,255,255,.1); border:0; color:#fff; cursor:pointer;
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
.lb__btn:hover{background:rgba(255,255,255,.22)}
.lb__btn svg{width:20px; height:20px}
.lb__close{top:20px; right:20px}
.lb__prev{left:20px; top:50%; transform:translateY(-50%)}
.lb__next{right:20px; top:50%; transform:translateY(-50%)}
.lb__count{position:absolute; bottom:22px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.6); font-size:.84rem; font-variant-numeric:tabular-nums}
@media(max-width:600px){ .lb__prev{left:8px} .lb__next{right:8px} .lb__btn{width:44px;height:44px} }

/* ---------- pricing ---------- */
.pricing{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px)}
@media(max-width:900px){ .pricing{grid-template-columns:1fr} }
.price-card{
  border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(26px,3vw,36px);
  background:#fff; display:flex; flex-direction:column;
}
.price-card--hl{background:var(--accent); color:#fff; border-color:var(--accent)}
.price-card--hl .price-card__note,.price-card--hl .price-row span:last-child{color:rgba(255,255,255,.72)}
.price-card--hl .price-row{border-color:rgba(255,255,255,.16)}
.price-card__season{font-size:1.14rem; font-weight:500; letter-spacing:-.01em}
.price-card__dates{font-size:.85rem; color:var(--muted); margin-top:6px}
.price-card--hl .price-card__dates{color:rgba(255,255,255,.7)}
.price-card__main{font-family:var(--font-display); font-size:2.6rem; line-height:1; margin:26px 0 4px}
.price-card__unit{font-size:.86rem; color:var(--muted)}
.price-card--hl .price-card__unit{color:rgba(255,255,255,.72)}
.price-rows{margin-top:26px; border-top:1px solid var(--line)}
.price-card--hl .price-rows{border-color:rgba(255,255,255,.16)}
.price-row{display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--line); font-size:.92rem}
.price-row span:last-child{font-variant-numeric:tabular-nums; white-space:nowrap}
.price-row:last-child{border-bottom:0}

.notes{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(24px,3vw,44px); margin-top:clamp(40px,5vw,64px)}
@media(max-width:800px){ .notes{grid-template-columns:1fr} }
.note-box{background:var(--bg-soft); border-radius:var(--r-lg); padding:clamp(24px,3vw,34px)}
.note-box h3{font-size:1rem; font-weight:500; margin-bottom:16px}
.note-box li{padding:7px 0 7px 24px; position:relative; font-size:.93rem; color:var(--ink-2)}
.note-box li::before{content:""; position:absolute; left:4px; top:16px; width:5px; height:5px; border-radius:50%; background:var(--accent)}
.note-box--warn li::before{background:var(--gold)}

/* ---------- calendar ---------- */
.cal-legend{display:flex; flex-wrap:wrap; gap:22px; margin-bottom:32px; font-size:.88rem; color:var(--ink-2)}
.cal-legend span{display:inline-flex; align-items:center; gap:9px}
.cal-legend i{width:14px; height:14px; border-radius:4px; display:block}
.i-free{background:#eaf5ec; border:1px solid #cfe3d5}
.i-busy{background:#e2574a}
.i-past{background:var(--bg-soft); border:1px solid var(--line-2)}

.cal-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.5vw,34px)}
@media(max-width:960px){ .cal-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:620px){ .cal-grid{grid-template-columns:1fr} }
.month__name{font-size:.95rem; font-weight:500; margin-bottom:14px; text-transform:capitalize}
.month__grid{display:grid; grid-template-columns:repeat(7,1fr); gap:3px}
.month__dow{font-size:.66rem; color:var(--muted); text-align:center; padding-bottom:6px; text-transform:uppercase; letter-spacing:.06em}
.day{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  font-size:.8rem; border-radius:6px; font-variant-numeric:tabular-nums;
  background:#fff; border:1px solid var(--line-2); color:var(--ink-2);
}
.day--empty{background:transparent; border-color:transparent}
.day--past{background:var(--bg-soft); border-color:transparent; color:#c3c8ca}
.day--busy{background:var(--accent); border-color:var(--accent); color:#fff}
.day--edge-in{background:linear-gradient(135deg, #fff 50%, var(--accent) 50%); color:var(--ink-2)}
.day--edge-out{background:linear-gradient(135deg, var(--accent) 50%, #fff 50%); color:var(--ink-2)}

/* ---------- form ---------- */
.form{display:grid; gap:22px}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:22px}
@media(max-width:700px){ .form__row{grid-template-columns:1fr} }
.field label{display:block; font-size:.82rem; font-weight:500; margin-bottom:8px; letter-spacing:.01em}
.field .req{color:var(--gold)}
.field input,.field select,.field textarea{
  width:100%; padding:14px 16px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:#fff; font-size:.96rem; transition:border-color .2s, box-shadow .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
.field textarea{resize:vertical; min-height:130px}
.field__hint{font-size:.8rem; color:var(--muted); margin-top:7px}
.check{display:flex; gap:12px; align-items:flex-start; font-size:.88rem; color:var(--ink-2)}
.check input{width:18px; height:18px; margin-top:2px; flex:none; accent-color:var(--accent)}
.form__note{background:var(--bg-soft); border-radius:var(--r-md); padding:20px 22px; font-size:.9rem; color:var(--ink-2)}

/* ---------- steps ---------- */
.steps{counter-reset:s; display:grid; gap:0}
.step{display:grid; grid-template-columns:auto 1fr; gap:24px; padding:26px 0; border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step::before{
  counter-increment:s; content:counter(s,decimal-leading-zero);
  font-family:var(--font-display); font-size:1.5rem; color:var(--accent); line-height:1;
}
.step h3{font-size:1.05rem; font-weight:500; margin-bottom:7px}
.step p{font-size:.94rem; color:var(--muted)}
.steps--2{grid-template-columns:1fr 1fr; column-gap:48px}
.steps--2 .step:nth-child(2){border-top:1px solid var(--line)}
.steps--2 .step:last-child{border-bottom:1px solid var(--line)}
@media (max-width:820px){.steps--2{grid-template-columns:1fr}}
.step p a{color:var(--accent); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px}
.step p a:hover{text-decoration-thickness:2px}

/* ---------- activity list ---------- */
.acts{border-top:1px solid var(--line)}
.act{
  display:grid; grid-template-columns:56px 1fr auto; gap:24px; align-items:center;
  padding:24px 0; border-bottom:1px solid var(--line);
  transition:padding-left .35s var(--ease);
}
.act:hover{padding-left:10px}
.act__n{font-size:.74rem; color:var(--muted); letter-spacing:.1em}
.act__t{font-size:1.12rem; letter-spacing:-.01em}
.act__d{font-size:.9rem; color:var(--muted); margin-top:4px}
.act__d a{color:var(--accent); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; white-space:nowrap}
.act__d a:hover{text-decoration-thickness:2px}
.act__dist{font-size:.86rem; color:var(--accent); white-space:nowrap; font-variant-numeric:tabular-nums}
@media(max-width:640px){
  .act{grid-template-columns:1fr auto; gap:6px 14px}
  .act__n{display:none}
}

/* ---------- CTA band ---------- */
.cta{position:relative; overflow:hidden; color:#fff; text-align:center}
.cta__media{position:absolute; inset:0}
.cta__media img{width:100%; height:100%; object-fit:cover}
.cta__media::after{content:""; position:absolute; inset:0; background:rgba(10,16,14,.62)}
.cta__body{position:relative; padding-block:clamp(72px,9vw,120px)}
.cta__body p{max-width:46ch; margin-inline:auto; color:rgba(255,255,255,.82); margin-top:20px}
.cta__actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:36px}

/* ---------- contact cards ---------- */
.contact-card{border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(26px,3vw,38px)}
.contact-card h3{font-size:1.15rem; font-weight:500; margin-bottom:4px}
.contact-card .addr{font-size:.9rem; color:var(--muted); margin-bottom:24px}
.contact-line{display:flex; gap:14px; align-items:center; padding:12px 0; border-top:1px solid var(--line-2)}
.contact-line svg{width:17px; height:17px; color:var(--accent); flex:none}
.contact-line a{font-size:.98rem}
.contact-line a:hover{color:var(--accent)}
.map-frame{border:0; width:100%; height:420px; border-radius:var(--r-lg); filter:grayscale(.15)}

/* ---------- footer ---------- */
.footer{background:var(--bg-deep); color:rgba(255,255,255,.7); padding-block:clamp(56px,7vw,84px) 32px}
.footer a:hover{color:#fff}
.footer__grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:clamp(28px,4vw,52px)}
@media(max-width:900px){ .footer__grid{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .footer__grid{grid-template-columns:1fr} }
.footer .logo{color:#fff}
.footer__desc{margin-top:20px; font-size:.92rem; max-width:34ch; line-height:1.6}
.footer h4{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:18px; font-weight:500}
.footer li{font-size:.93rem}
.footer li a{display:inline-block; padding:8px 0}
.footer li:not(:has(a)){padding:8px 0}
@media(hover:none){.footer li a{padding:11px 0}}
.footer__bottom{
  margin-top:clamp(44px,6vw,72px); padding-top:26px; border-top:1px solid rgba(255,255,255,.1);
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:.83rem; color:rgba(255,255,255,.45);
}

.footer__bottom a{color:rgba(255,255,255,.7); text-decoration:underline; text-underline-offset:2px}
.footer__bottom a:hover{color:#fff}
.footer__bottom b{font-weight:500; color:rgba(255,255,255,.6)}
.footer__legal{max-width:760px; text-align:right}
@media(max-width:760px){.footer__legal{text-align:left}}

/* ---------- textová stránka (GDPR apod.) ---------- */
.prose{max-width:720px}
.prose h2{font-size:1.24rem; font-weight:500; letter-spacing:-.01em; margin:44px 0 12px}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--muted); line-height:1.75; margin-bottom:14px}
.prose ul{list-style:none; margin:0 0 18px; padding:0}
.prose li{color:var(--muted); line-height:1.7; padding-left:20px; position:relative; margin-bottom:8px}
.prose li::before{content:""; position:absolute; left:2px; top:.72em; width:5px; height:5px; border-radius:50%; background:var(--accent); opacity:.5}
.prose b{color:var(--ink); font-weight:500}
.prose a{color:var(--accent); text-decoration:underline; text-underline-offset:2px}

/* ---------- utilities / motion ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.is-in{opacity:1; transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none}
}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.skip{position:absolute; left:-9999px; z-index:999; padding:12px 20px; background:var(--accent); color:#fff; border-radius:0 0 8px 0}
.skip:focus{left:0; top:0}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
.header--over :focus-visible{outline-color:#fff}

/* page hero (interior pages) */
.phero{position:relative; padding-top:150px; padding-bottom:clamp(48px,6vw,72px); background:var(--bg-soft)}
.phero__crumb{font-size:.82rem; color:var(--muted); margin-bottom:22px}
.phero__crumb a:hover{color:var(--accent)}
.phero p{margin-top:20px; max-width:56ch}

/* ---------- doladění ---------- */
h1.display + p, h2.display + p, h3.display + p{margin-top:20px}
.hero__title + .hero__sub{margin-top:24px}
.section--soft .note-box{background:#fff; border:1px solid var(--line)}
.day--weekend{color:var(--accent)}
.gallery__item{background:linear-gradient(135deg,#efedea,#e4e1db)}
.prop__media{background:linear-gradient(135deg,#efedea,#e4e1db)}
.split__media img, .cta__media img, .hero__media img{background:linear-gradient(135deg,#efedea,#e4e1db)}
.hero__media::after{
  background:
    linear-gradient(180deg, rgba(10,14,16,.5) 0%, rgba(10,14,16,.15) 32%, rgba(10,14,16,.22) 55%, rgba(10,14,16,.8) 100%),
    linear-gradient(90deg, rgba(10,14,16,.55) 0%, rgba(10,14,16,.18) 45%, transparent 70%);
}

/* ---------- otevřené mobilní menu ----------
   Pozor: backdrop-filter v hlavičce by udělal z hlavičky "rám" pro
   celoobrazovkovou navigaci — v otevřeném menu ho proto vypínáme. */
@media(max-width:1040px){
  body.menu-open .header{
    background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;
    border-bottom-color:transparent; transform:none; color:var(--ink);
  }
  body.menu-open .logo{position:relative; z-index:2}
  body.menu-open .header .btn--primary{background:var(--accent); color:#fff}
  .nav{padding:96px 20px 40px; overflow-y:auto}
}

/* poloviční dny (příjezd / odjezd) — světlejší, ať zůstane číslo čitelné */
.day--edge-in{background:linear-gradient(135deg,#fff 50%,#a7bdb4 50%); border-color:var(--line)}
.day--edge-out{background:linear-gradient(135deg,#a7bdb4 50%,#fff 50%); border-color:var(--line)}
.i-edge{background:linear-gradient(135deg,#eaf5ec 49%,#f6ada4 51%); border:1px solid #e3d8d6}

/* ---------- kalendář obsazenosti (e-chalupy.cz) ---------- */
.echal{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(10px,1.6vw,20px); overflow:hidden;
}
.echal__frame{display:block; width:100%; min-height:340px; border:0; transition:height .25s ease}

/* odkaz na obsazenost v kartě objektu */
.prop__links{display:flex; align-items:center; gap:22px; flex-wrap:wrap}

/* popisek skupiny voleb ve formuláři */
.field-legend{display:block; font-size:.82rem; font-weight:500; letter-spacing:.01em}

/* ---------- reference hostů ---------- */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px)}
@media(max-width:960px){ .quotes{grid-template-columns:1fr} }
.quote{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(24px,3vw,34px); display:flex; flex-direction:column;
}
.section--soft .quote{background:#fff}
.quote__stars{display:flex; gap:3px; margin-bottom:18px; color:#e0a52e}
.quote__stars svg{width:15px; height:15px; flex:none}
.quote p{font-size:1rem; line-height:1.62; color:var(--ink-2)}
.quote__who{margin-top:auto; padding-top:22px; font-size:.85rem; color:var(--muted)}
.quote__who strong{display:block; color:var(--ink); font-weight:500; font-size:.95rem; margin-bottom:2px}

.ratings{display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,52px); margin-top:30px; align-items:flex-start}
.rating{display:flex; align-items:baseline; gap:12px}
.rating b{font-family:var(--font-display); font-weight:400; font-size:1.9rem; line-height:1; color:var(--ink)}
.rating span{font-size:.9rem; color:var(--muted); line-height:1.4}
.rating a{color:var(--accent); border-bottom:1px solid transparent}
.rating a:hover{border-color:currentColor}

/* odkazy na profily v mapách */
.map-links{display:block; margin-top:3px; font-size:.84rem; color:var(--muted)}
.map-links a{color:var(--accent); border-bottom:1px solid transparent}
.map-links a:hover{border-color:currentColor}
.contact-line--stack{align-items:flex-start}
.section-head--wide{max-width:1000px}
.cta__tel{margin-top:24px; font-size:.92rem; color:rgba(255,255,255,.75)}
.cta__tel a{border-bottom:1px solid rgba(255,255,255,.45); font-variant-numeric:tabular-nums}
.cta__tel a:hover{color:#fff; border-color:#fff}