/* =========================================================
   PUSHPANJALI VILLA — RESPONSIVE
   Every override lives here, keyed to the 5 target widths.
   Nothing in variables/components/layout should need an
   inline media query once this file is loaded after them.
   ========================================================= */

/* ---------- ≤1440px : large desktop (default is already this) ---------- */
@media (max-width:1440px){
  .container-xl{max-width:1180px;}
}

/* ---------- ≤1024px : tablet landscape / small laptop ---------- */
@media (max-width:1024px){
  .hero-content h1{font-size:3.2rem;}
  .section{padding:80px 0;}
  .masonry-grid{grid-auto-rows:130px;}
  .exp-card{height:400px;}
  .final-cta h2{font-size:2.3rem;}
  .pv-masonry{column-count:3;}
  .pv-spec-grid{grid-template-columns:repeat(2,1fr);}
  .pv-journey-item{flex:1 1 30%;}
  .room-editorial-img{height:340px;}
}

/* ---------- ≤991px : the burger button appears at this width (matches Bootstrap's d-lg-none on the button) — nav-links must hide at the exact same point or both render at once on tablets ---------- */
@media (max-width:991px){
  .pv-nav-links{display:none;}
  .pv-burger{display:block;}
}

/* ---------- ≤768px : tablet portrait ---------- */
@media (max-width:768px){
  .pv-navbar{min-height:84px;padding:8px 0;}
  .pv-navbar.scrolled{min-height:72px;}
  .pv-logo-mark{height:66px;}
  .pv-navbar.scrolled .pv-logo-mark{height:60px;}

  .section{padding:64px 0;}
  .section-tight{padding:48px 0;}
  .section-head h2{font-size:2rem;}

  .hero-content h1{font-size:2.5rem;}
  .hero-content p.lead{font-size:1rem;}
  .hero-stats{flex-wrap:wrap;gap:20px 0;}
  .hero-stats .stat{flex:0 0 50%;}

  .masonry-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:130px;}
  .masonry-grid a:nth-child(1){grid-column:span 2;grid-row:span 2;}
  .masonry-grid a:nth-child(4){grid-row:span 2;}

  .final-cta{padding:80px 0;}
  .final-cta h2{font-size:1.9rem;}

  .pv-sticky-mobile{display:block;}
  body{padding-bottom:58px;}

  .pv-timeline{padding-left:26px;}
  .pv-timeline .tl-item::before{left:-33px;}

  .pv-spec-grid{grid-template-columns:repeat(2,1fr);}
  .room-editorial-block{padding:40px 0;}
  .room-editorial-img{height:280px;}
  .pv-compare-table{font-size:.78rem;}
  .pv-compare-table th,.pv-compare-table td{padding:10px 12px;}
  .pv-masonry{column-count:2;column-gap:10px;}
  .pv-masonry .pv-masonry-item{margin-bottom:10px;}
}

/* ---------- ≤375px : small phones ---------- */
@media (max-width:375px){
  .hero-content h1{font-size:2.1rem;}
  .section-head h2{font-size:1.7rem;}
  .btn-luxury-primary,.btn-luxury-outline,.btn-luxury-dark{padding:14px 24px;font-size:.78rem;}
  .hero-ctas{gap:10px;}
  .counter-box .num{font-size:2.2rem;}
  .container-xl{padding:0 18px;}
}

/* ---------- ≤320px : smallest supported ---------- */
@media (max-width:320px){
  .hero-content h1{font-size:1.85rem;}
  .eyebrow{font-size:.68rem;letter-spacing:2px;}
  .final-cta h2{font-size:1.5rem;}
}