/* ==========================================================================
   DESIGN 2 — "BAGICHA MODERN"
   App-first. Emerald + marigold, bento hero, glass cards, snap rails.
   Signature: bento hero grid + horizontal snap rails that feel like a
   native hotel app on a phone.
   ========================================================================== */

.t-modern .btn{box-shadow:0 10px 24px -14px rgba(6,37,27,.8)}
.t-modern .card,.t-modern .tile{border-radius:var(--r-lg)}

/* ---------- Bento hero ---------- */
.bento{padding-top:clamp(1.2rem,.6rem + 1.6vw,2rem)}
.bento__grid{
  display:grid; gap:12px;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:minmax(120px,auto);
}
@media (max-width:900px){ .bento__grid{grid-template-columns:repeat(2,1fr)} }

.bcell{border-radius:var(--r-xl); overflow:hidden; position:relative; display:flex; box-shadow:var(--shadow-s)}
.bcell img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease)}
.bcell:hover img{transform:scale(1.06)}

/* main cell */
.bcell--main{grid-column:span 3; grid-row:span 3; min-height:min(64svh,520px); color:#fff; align-items:flex-end; padding:clamp(1.3rem,1rem + 2vw,2.6rem)}
@media (max-width:900px){ .bcell--main{grid-column:span 2; grid-row:span 2; min-height:66svh} }
.bcell--main::after{content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(6,37,27,.94) 8%,rgba(6,37,27,.35) 55%,rgba(6,37,27,.5) 100%)}
.bcell__c{position:relative; z-index:2; width:100%}
.bcell--main h1{font-size:var(--t-4xl); color:#fff; letter-spacing:-.03em; max-width:14ch; margin-bottom:.5rem; font-weight:600}
.bcell--main h1 span{color:var(--accent-500)}
.bcell--main p{color:rgba(255,255,255,.78); max-width:44ch; font-size:var(--t-lg)}
.bpill{
  display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .9rem; border-radius:var(--r-pill);
  background:rgba(255,255,255,.14); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.24);
  color:#fff; font-family:var(--f-alt); font-size:.7rem; font-weight:600; letter-spacing:.04em; margin-bottom:1rem;
}
.bpill i{color:var(--accent-500)}
.bcell__cta{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.4rem}

/* side cells */
.bcell--stat{
  background:var(--brand-700); color:#fff; flex-direction:column; justify-content:center;
  padding:1.2rem; gap:.2rem; grid-row:span 1;
}
.bcell--stat b{font-family:var(--f-alt); font-size:2rem; font-weight:700; color:var(--accent-500); line-height:1}
.bcell--stat span{font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.65); font-family:var(--f-alt); font-weight:600}
.bcell--photo{grid-row:span 1; min-height:130px}
.bcell--photo::after{content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(6,37,27,.7),transparent 60%)}
.bcell__lab{
  position:relative; z-index:2; align-self:flex-end; padding:.9rem 1rem; color:#fff;
  font-family:var(--f-alt); font-weight:600; font-size:.84rem;
}
.bcell--live{
  background:var(--accent-500); color:var(--brand-900); flex-direction:column; justify-content:center;
  padding:1.2rem; gap:.15rem;
}
.bcell--live b{font-family:var(--f-alt); font-size:1.6rem; font-weight:700; line-height:1}
.bcell--live span{font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; opacity:.75}
.bcell--live i{font-size:1.1rem; margin-bottom:.3rem}

/* quick actions rail (app feel) */
.quick{display:flex; gap:.6rem; overflow-x:auto; padding:1rem 0 .3rem; scroll-snap-type:x mandatory; scrollbar-width:none}
.quick::-webkit-scrollbar{display:none}
.quick a{
  scroll-snap-align:start; flex:0 0 auto; display:grid; justify-items:center; gap:.5rem;
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg);
  padding:.9rem 1rem; min-width:96px; transition:transform .3s var(--ease), border-color .3s;
}
.quick a:hover{transform:translateY(-5px); border-color:var(--brand-500)}
.quick i{width:40px; height:40px; border-radius:14px; display:grid; place-items:center; background:var(--soft-2); color:var(--brand-500); font-size:1rem}
.quick span{font-family:var(--f-alt); font-size:.7rem; font-weight:600; color:var(--ink-70); text-align:center}

/* ---------- Snap rail (rooms / dishes) ---------- */
.rail{display:flex; gap:14px; overflow-x:auto; padding-bottom:1rem; scroll-snap-type:x mandatory; scrollbar-width:none; margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter)}
.rail::-webkit-scrollbar{display:none}
.rail > *{scroll-snap-align:start; flex:0 0 clamp(240px,74vw,320px)}
@media (min-width:992px){ .rail > *{flex:0 0 330px} }
.rail-head{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.2rem}
.rail-nav{display:flex; gap:.4rem}
.rail-nav button{width:40px; height:40px; border-radius:50%; border:1px solid var(--hairline); display:grid; place-items:center; color:var(--brand-700); background:var(--surface); transition:.25s}
.rail-nav button:hover{background:var(--brand-700); color:#fff; border-color:var(--brand-700)}
@media (max-width:767px){ .rail-nav{display:none} }

/* room card, app style */
.mcard{background:var(--surface); border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--hairline); box-shadow:var(--shadow-s); display:flex; flex-direction:column; height:100%; transition:transform .4s var(--ease), box-shadow .4s var(--ease)}
.mcard:hover{transform:translateY(-6px); box-shadow:var(--shadow-l)}
.mcard__media{position:relative; aspect-ratio:16/11; overflow:hidden}
.mcard__media img{width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease)}
.mcard:hover .mcard__media img{transform:scale(1.07)}
.mcard__fav{position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.85); backdrop-filter:blur(8px); display:grid; place-items:center; color:var(--brand-700); font-size:.85rem}
.mcard__fav.is-on{color:#E14B4B}
.mcard__rate{
  position:absolute; left:12px; bottom:12px; display:flex; align-items:center; gap:.35rem;
  background:rgba(255,255,255,.9); backdrop-filter:blur(8px); border-radius:var(--r-pill);
  padding:.3rem .6rem; font-family:var(--f-alt); font-size:.7rem; font-weight:700; color:var(--brand-900);
}
.mcard__rate i{color:#F5A623; font-size:.65rem}
.mcard__body{padding:1.1rem; display:flex; flex-direction:column; gap:.55rem; flex:1}
.mcard__body h4{margin:0; font-size:var(--t-lg); color:var(--brand-900); font-weight:600}
.mcard__meta{display:flex; flex-wrap:wrap; gap:.35rem}
.mcard__meta li{font-size:.68rem; font-family:var(--f-alt); font-weight:600; color:var(--brand-500); background:var(--soft-2); padding:.25rem .6rem; border-radius:var(--r-pill)}
.mcard__foot{margin-top:auto; padding-top:.9rem; display:flex; align-items:center; justify-content:space-between; gap:.6rem; border-top:1px solid var(--hairline)}
.mcard__price{font-family:var(--f-alt); font-weight:700; font-size:1.2rem; color:var(--brand-900); line-height:1.1}
.mcard__price small{display:block; font-size:.62rem; font-weight:500; color:var(--ink-40)}

/* ---------- Split feature ---------- */
.msplit{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,1rem + 3vw,3.5rem); align-items:center}
@media (max-width:900px){ .msplit{grid-template-columns:1fr} }
.msplit__art{position:relative; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-l)}
.msplit__art img{aspect-ratio:4/3.4; object-fit:cover; width:100%}
.msplit__float{
  position:absolute; left:14px; bottom:14px; right:14px; background:rgba(255,255,255,.86);
  backdrop-filter:blur(16px); border-radius:var(--r-lg); padding:.9rem 1.1rem;
  display:flex; align-items:center; gap:.9rem; box-shadow:var(--shadow-m);
}
.msplit__float i{width:42px; height:42px; border-radius:14px; display:grid; place-items:center; background:var(--brand-500); color:#fff; flex-shrink:0}
.msplit__float b{display:block; font-family:var(--f-alt); font-size:.9rem; color:var(--brand-900)}
.msplit__float span{font-size:.72rem; color:var(--ink-55)}
.checks li{display:flex; gap:.7rem; align-items:flex-start; padding:.5rem 0; font-size:var(--t-base); color:var(--ink-70)}
.checks i{color:var(--brand-500); margin-top:.3rem}

/* ---------- Facility chips grid ---------- */
.chips{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.7rem}
.chip{
  display:flex; align-items:center; gap:.7rem; padding:.85rem 1rem; border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--hairline); font-family:var(--f-alt);
  font-size:.82rem; font-weight:600; color:var(--ink-70); transition:.3s var(--ease);
}
.chip:hover{background:var(--brand-700); color:#fff; transform:translateY(-4px)}
.chip i{color:var(--accent-500); font-size:.95rem}
.chip:hover i{color:var(--accent-300)}

/* ---------- Story gallery (app style) ---------- */
.stories{display:flex; gap:.8rem; overflow-x:auto; padding-bottom:.6rem; scrollbar-width:none; scroll-snap-type:x mandatory; margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter)}
.stories::-webkit-scrollbar{display:none}
.story{flex:0 0 auto; scroll-snap-align:start; width:132px; display:grid; gap:.5rem; justify-items:center}
.story__ring{width:132px; height:190px; border-radius:22px; overflow:hidden; position:relative; box-shadow:var(--shadow-m); border:2px solid transparent; background:linear-gradient(var(--surface),var(--surface)) padding-box, linear-gradient(140deg,var(--accent-500),var(--brand-500)) border-box}
.story__ring img{width:100%; height:100%; object-fit:cover}
.story span{font-family:var(--f-alt); font-size:.72rem; font-weight:600; color:var(--ink-70)}

/* ---------- Offer / plan cards ---------- */
.plan{background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-xl); padding:1.5rem; display:flex; flex-direction:column; gap:.7rem; height:100%; position:relative; overflow:hidden}
.plan--hot{background:var(--brand-700); color:#fff; border-color:var(--brand-700)}
.plan--hot h4,.plan--hot .plan__price{color:#fff}
.plan--hot .plan__list li{color:rgba(255,255,255,.78)}
.plan__flag{position:absolute; top:0; right:0; background:var(--accent-500); color:var(--brand-900); font-family:var(--f-alt); font-size:.62rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:.35rem .8rem; border-bottom-left-radius:var(--r-md)}
.plan h4{margin:0; font-size:var(--t-lg); color:var(--brand-900)}
.plan__price{font-family:var(--f-alt); font-size:1.9rem; font-weight:700; color:var(--brand-900); line-height:1}
.plan__price small{font-size:.7rem; font-weight:500; color:var(--ink-40)}
.plan--hot .plan__price small{color:rgba(255,255,255,.6)}
.plan__list{display:grid; gap:.5rem; margin-top:.3rem}
.plan__list li{display:flex; gap:.6rem; font-size:var(--t-sm); color:var(--ink-55)}
.plan__list i{color:var(--accent-500); margin-top:.3rem; font-size:.75rem}
.plan .btn{margin-top:auto}

/* ---------- Reviews strip ---------- */
.rev-score{display:flex; align-items:center; gap:1.2rem; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-xl); padding:1.2rem 1.4rem; flex-wrap:wrap}
.rev-score__n{font-family:var(--f-alt); font-size:2.6rem; font-weight:700; color:var(--brand-900); line-height:1}
.rev-score__bars{flex:1; min-width:200px; display:grid; gap:.35rem}
.rev-bar{display:flex; align-items:center; gap:.6rem; font-size:.7rem; font-family:var(--f-alt); color:var(--ink-55)}
.rev-bar span:first-child{width:64px}
.rev-bar u{flex:1; height:6px; border-radius:6px; background:var(--soft-2); text-decoration:none; overflow:hidden}
.rev-bar u b{display:block; height:100%; border-radius:6px; background:var(--brand-500)}

/* map + contact */
.mcontact{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:900px){ .mcontact{grid-template-columns:1fr} }
.mcontact__card{background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-xl); padding:clamp(1.2rem,.8rem + 1.6vw,2rem)}