/* ==========================================================================
   VARAHI BUILDERS — Responsive Rules
   ========================================================================== */

/* ---------- Large desktop refine ---------- */
@media (max-width:1180px){
  .mega-grid{grid-template-columns:1fr 1fr 1fr;}
  .mega-col:nth-child(3){display:none;}
  .why-grid, .service-grid{grid-template-columns:repeat(2,1fr);}
  .project-grid, .blog-grid{grid-template-columns:repeat(2,1fr);}
  .footer-top{grid-template-columns:1.2fr 1fr 1fr;}
  .footer-col.footer-newsletter{grid-column:1/-1; margin-top:10px;}
  .amenity-grid{grid-template-columns:repeat(3,1fr);}
  .team-grid, .value-grid, .award-grid{grid-template-columns:repeat(3,1fr);}
}

/* ---------- Tablet ---------- */
@media (max-width:1024px){
  .topbar-left a span.long{display:none;}
  .main-nav{display:none;}
  .hamburger{display:flex;}
  .nav-phone small{display:none;}
  .nav-phone{padding:8px; }
  .nav-phone strong{display:none;}

  .hero{min-height:86vh;}
  .hero-meta{gap:30px;}
  .stats-grid{grid-template-columns:repeat(2,1fr); row-gap:36px;}
  .stat-item:nth-child(2){border-right:none;}
  .about-grid, .two-col{grid-template-columns:1fr; gap:44px;}
  .about-badge{right:16px;}
  .process-track{grid-template-columns:repeat(5,1fr);}
  .gallery-grid{grid-template-columns:repeat(3,1fr); grid-auto-rows:180px;}
  .form-grid{grid-template-columns:1fr;}
}

/* ---------- Mobile nav trigger visibility ----------
   The drawer/overlay themselves are styled unconditionally in style.css so they
   are always hidden off-canvas regardless of viewport width. Only the toggle
   affordances (hamburger vs. inline menu) are breakpoint-specific. */
@media (max-width:1024px){
  .nav-drawer{padding-top:90px;}
}

/* ---------- Small tablet / large phone ---------- */
@media (max-width:820px){
  .topbar .container{font-size:.72rem;}
  .topbar-left{gap:16px;}
  .why-grid, .service-grid, .project-grid, .blog-grid{grid-template-columns:1fr 1fr;}
  .mega-grid{grid-template-columns:1fr;}
  .mega-col:nth-child(3){display:block;}
  .footer-top{grid-template-columns:1fr 1fr; gap:36px; padding:70px 0 44px;}
  .amenity-grid{grid-template-columns:repeat(2,1fr);}
  .team-grid, .value-grid, .award-grid{grid-template-columns:repeat(2,1fr);}
  .process-track{grid-template-columns:1fr; gap:36px;}
  .process-track::before{display:none;}
  .cta-band{flex-direction:column; text-align:center; align-items:center;}
  .cta-band p{margin-left:auto; margin-right:auto;}
}

/* ---------- Phone ---------- */
@media (max-width:640px){
  :root{--gutter:20px;}
  .topbar-right .topbar-rera{display:none;}
  .site-header .container, .site-header.scrolled .container{height:76px;}
  .brand-mark{width:36px;height:36px;}
  .brand-text strong{font-size:1.05rem;}
  .brand-text span{display:none;}
  .nav-cta{gap:10px;}
  .nav-phone-icon{width:38px;height:38px;}

  .hero{min-height:100vh;}
  .hero-title{font-size:clamp(2rem,9vw,2.6rem);}
  .hero-actions{flex-direction:column; width:100%;}
  .hero-actions .btn{width:100%;}
  .hero-meta{gap:22px; margin-top:44px;}
  .hero-meta div strong{font-size:1.5rem;}
  .hero-dots{display:none;}
  .hero-scroll{display:none;}

  .page-hero{padding:150px 0 60px;}

  .section-pad{padding:64px 0;}
  .section-head{margin-bottom:36px;}

  .stats-grid{grid-template-columns:1fr 1fr; padding:44px 0; gap:30px 14px;}
  .stat-item{border-right:none !important;}

  .why-grid, .service-grid, .project-grid, .blog-grid, .amenity-grid, .team-grid, .value-grid, .award-grid{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:1fr 1fr; grid-auto-rows:140px;}
  .gallery-item.wide{grid-column:span 1;}

  .footer-top{grid-template-columns:1fr; padding:60px 0 34px; gap:34px;}
  .footer-bottom{flex-direction:column; text-align:center;}
  .footer-legal{gap:16px;}

  .float-stack{right:16px; bottom:16px;}
  .float-btn{width:50px;height:50px;}
  .float-btn svg{width:22px;height:22px;}

  .about-badge{position:static; margin-top:20px; width:100%; justify-content:center;}
  .about-art{aspect-ratio:4/3;}

  .filter-bar{gap:8px;}
  .filter-btn{padding:9px 16px; font-size:.8rem;}

  .form-grid{gap:16px;}

  .tab-bar{overflow-x:auto; width:100%; -webkit-overflow-scrolling:touch;}
  .tab-btn{white-space:nowrap;}

  .article-body h2{font-size:1.35rem;}
  .article-body p{font-size:.96rem;}

  .lightbox-arrow{width:40px;height:40px;}
  .lightbox-prev{left:12px;}
  .lightbox-next{right:12px;}
  .lightbox-close{top:16px; right:16px;}
}

@media (max-width:400px){
  .hero-meta{grid-template-columns:1fr 1fr; display:grid;}
}