/* ==========================================================================
   KAS — RESPONSIVE  ( desktop 1440+ / tablet 768–1439 / mobile <768 )
   ========================================================================== */

/* ---------------- large desktop down ---------------- */
@media (max-width:1400px){
  .rail{grid-template-columns:repeat(4,1fr);gap:16px}
}

/* ---------------- tablet landscape ---------------- */
@media (max-width:1200px){
  :root{--container:100%}
  .nav{gap:17px}
  .nav a{font-size:.66rem}
  .split{grid-template-columns:1fr 320px;gap:22px}
  .split--filters{grid-template-columns:236px 1fr}
  .rcard{grid-template-columns:250px 1fr 208px}
  .hcard{grid-template-columns:280px 1fr}
  .ftr__main{grid-template-columns:1.6fr repeat(3,1fr);row-gap:34px}
  .ftr__main .ftr__col:nth-child(5){grid-column:2}
  .ftr__news{grid-column:3/5}
  .amgrid{grid-template-columns:repeat(4,1fr)}
}

/* ---------------- tablet ---------------- */
@media (max-width:1024px){
  .container{padding-inline:22px}
  .nav,.lang{display:none}
  .burger{display:grid;place-items:center}
  .hdr__right{gap:10px}

  .searchbar{grid-template-columns:1fr 1fr;transform:translateY(26px)}
  .sf{border-right:none;border-bottom:1px solid rgba(194,162,92,.2)}
  .searchbar--solid .sf{border-bottom-color:var(--line)}
  .sf:nth-child(odd){border-right:1px solid rgba(194,162,92,.2)}
  .searchbar--solid .sf:nth-child(odd){border-right-color:var(--line)}
  .searchbar .btn{grid-column:1/-1;border-radius:0 0 var(--r) var(--r);padding-block:15px}

  .split,.split--filters{grid-template-columns:1fr}
  .sticky{position:static}
  .split__side{order:2}
  .split__main{order:1}
  /* on room-detail the booking panel should come first on tablet */
  .split--sidefirst .split__side{order:1}
  .split--sidefirst .split__main{order:2}

  .rcard{grid-template-columns:240px 1fr}
  .rcard__side{grid-column:1/-1;border-left:none;border-top:1px solid var(--line);
    flex-direction:row;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
  .rcard__perks{flex-direction:row;gap:16px}
  .rcard__side .btn{min-width:186px}

  .gal__thumbs{grid-template-columns:repeat(5,1fr)}
  .gal__t:nth-child(6){display:none}
  .dl{grid-template-columns:repeat(2,1fr)}
  .amgrid{grid-template-columns:repeat(3,1fr)}
  .trust__in{justify-content:flex-start;gap:14px 26px}
  .ftr__strip{grid-template-columns:1fr 1fr;gap:18px}
  .hero{min-height:560px}
}

/* ---------------- mobile ---------------- */
@media (max-width:767px){
  body{font-size:14.5px}
  .container{padding-inline:16px}
  :root{--nav-h:62px}

  .hero{min-height:520px}
  .hero__ct p{font-size:.92rem}
  .searchbar{grid-template-columns:1fr;transform:translateY(20px);margin-top:2rem}
  .sf{border-right:none!important;padding:13px 17px}
  .sf:last-of-type{border-bottom:none}
  .gpop{width:calc(100vw - 46px);right:auto;left:0}

  .section{padding-block:2.6rem}
  .section-sub{margin-bottom:2rem}

  .rail{grid-template-columns:repeat(2,1fr);gap:11px}
  .pcard__img{aspect-ratio:4/5}

  /* vertical cards on mobile */
  .hcard,.rcard{grid-template-columns:1fr}
  .hcard__media,.rcard__media{min-height:0;aspect-ratio:16/10;position:relative}
  .hcard__b,.rcard__b{padding:18px}
  .rcard__side{padding:18px;flex-direction:column;align-items:stretch}
  .rcard__side .btn{width:100%}
  .rcard__perks{flex-direction:column;gap:6px}
  .rcard__specs{grid-template-columns:1fr 1fr;gap:6px 12px}
  .hcard__ft{flex-direction:column;align-items:stretch;gap:14px}
  .hcard__ft .btn{width:100%}
  .price{text-align:left}

  .gal__thumbs{grid-template-columns:repeat(4,1fr);gap:7px}
  .gal__t:nth-child(5),.gal__t:nth-child(6){display:none}
  .gal__main{aspect-ratio:4/3}
  .gal__nav{width:36px;height:36px}


  .card{padding:20px 18px}
  .dl,.dl--2{grid-template-columns:1fr;gap:14px}
  .amgrid{grid-template-columns:repeat(2,1fr)}
  .pays{grid-template-columns:1fr}
  .trust--pad .trust__in{flex-direction:column;gap:18px}
  .trust--pad .trust__i{min-width:0}

  .ftr__strip{grid-template-columns:1fr;gap:15px}
  .ftr__main{grid-template-columns:1fr 1fr;gap:26px}
  .ftr__brand,.ftr__news{grid-column:1/-1}
  .ftr__btm{flex-direction:column;gap:10px}

  .modal__b{padding:24px 22px}
  .modal__ft{padding:0 22px 24px;flex-direction:column-reverse}
  .toasts{left:14px;right:14px;bottom:88px}
  .toast{max-width:none}
  .chat{right:14px;bottom:14px;padding:11px 17px;font-size:.75rem}
  .totop{right:14px;bottom:68px}

  /* sticky bottom booking CTA */
  .mobile-cta{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:850;
    background:var(--surface);border-top:1px solid var(--line);
    padding:11px 16px;gap:14px;align-items:center;
    box-shadow:0 -4px 22px rgba(34,31,26,.1);
  }
  .mobile-cta .price__v{font-size:1.32rem}
  .mobile-cta .btn{flex:1;padding-block:13px}
  body.has-mcta{padding-bottom:74px}
  body.has-mcta .chat{bottom:80px}
  body.has-mcta .totop{bottom:134px}
  body.has-mcta .toasts{bottom:152px}
}

@media (max-width:400px){
  .rail{grid-template-columns:1fr}
  .rcard__specs{grid-template-columns:1fr}
  .gal__thumbs{grid-template-columns:repeat(3,1fr)}
  .gal__t:nth-child(4){display:none}
}

/* ---------------- mobile drawer ---------------- */
.drawer{
  position:fixed;inset:0;z-index:1100;background:var(--black);
  transform:translateX(100%);transition:transform .38s var(--ease);
  display:flex;flex-direction:column;overflow-y:auto;
}
.drawer.open{transform:none}
.drawer__hd{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid rgba(194,162,92,.16);flex-shrink:0}
.drawer__hd button{color:var(--ivory);padding:8px}
.drawer nav{display:flex;flex-direction:column;padding:14px 20px}
.drawer nav a{
  padding:15px 0;border-bottom:1px solid rgba(255,255,255,.06);color:var(--tx-inv-2);
  font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;font-weight:500;
  display:flex;align-items:center;justify-content:space-between;
}
.drawer nav a:hover,.drawer nav a.is-active{color:var(--gold-lt)}
.drawer__ft{padding:22px 20px 30px;margin-top:auto;display:flex;flex-direction:column;gap:11px}

/* ---------------- print (booking confirmation) ---------------- */
@media print{
  .hdr,.ftr,.chat,.totop,.steps,.mobile-cta,.toasts,.noprint{display:none!important}
  body{background:#fff;font-size:11pt;padding:0}
  .section{padding-block:0}
  .card,.panel{border:1px solid #ccc;box-shadow:none;break-inside:avoid;page-break-inside:avoid}
  .split{grid-template-columns:1fr 300px}
  a{text-decoration:none;color:#000}
  .btn{display:none!important}
  .panel__hd{background:#eee!important;color:#000!important}
  .panel__hd h4{color:#000!important}
}

/* ---- stepper ----
   Five labelled steps stop fitting well below 1024px, so compact from 900px
   and let the row scroll instead of pushing the page wider. */
@media (max-width:900px){
  .steps__in{padding-block:14px;overflow-x:auto;scrollbar-width:none}
  .steps__in::-webkit-scrollbar{display:none}
  .step__t{display:none}
  .step.is-on .step__t{display:block}
  .step__line{margin-inline:9px;min-width:14px}
}

/* ---- summary bar collapse ---- */
@media (max-width:1024px){
  .searchbar--sum{grid-template-columns:1fr 1fr}
  .searchbar--sum .btn{grid-column:1/-1}
}
@media (max-width:767px){
  .searchbar--sum{grid-template-columns:1fr}
  body{max-width:100%}
  .searchbar .btn{white-space:normal}
}

/* ---- contact ---- */
@media (max-width:1180px){ .hdr__tel span{display:none} .hdr__tel{padding:7px 9px} }
@media (max-width:1024px){ .hdr__tel{display:inline-flex} }
@media (max-width:767px){
  .ct-channels{grid-template-columns:1fr}
  .ct-fab{right:14px;bottom:14px}
  .ct-fab__btn{padding:11px 17px;font-size:.75rem}
  .ct-fab__label{display:none}
  .ct-fab__menu{min-width:min(248px,calc(100vw - 44px))}
  /* never cover the sticky booking CTA / price */
  body.has-mcta .ct-fab{bottom:80px}
}

/* ---- header crowding ----
   The header now carries the official phone. Below 520px the Sign in / Join
   button is dropped (the drawer still offers it) so the phone and the burger
   both stay inside the viewport. */
@media (max-width:520px){
  .hdr__right > .btn--gold{display:none}
  .hdr__in{gap:12px}
  .hdr__right{gap:8px}
  .logo__sub{letter-spacing:.26em}
}
@media (max-width:360px){
  .hdr__tel{display:none}
}