/* =====================================================================
   Republic of Nature — responsive.css
   Mobile-first breakpoints + sticky mobile CTA bar
   ===================================================================== */

/* ---------- Large laptop ---------- */
@media (max-width:1120px){
  .trust-card{ grid-template-columns:repeat(5,1fr); gap:12px; padding:28px 20px; }
  .stat .num{ font-size:2.1rem; }
  .am-groups{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- Tablet ---------- */
@media (max-width:960px){
  .nav, .header-cta .btn-ghost{ display:none; }
  .nav-toggle{ display:flex; }

  /* Mobile nav drawer */
  .nav.open{
    display:flex; flex-direction:column; gap:0;
    position:fixed; inset:0 0 0 auto; width:min(320px,82vw); z-index:110;
    background:var(--bg); padding:90px 26px 30px; box-shadow:var(--shadow-lg);
    transform:none;
  }
  .nav.open a{ color:var(--ink); font-size:1.1rem; padding:16px 0; border-bottom:1px solid var(--line); }
  body.nav-open{ overflow:hidden; }
  .nav-scrim{ position:fixed; inset:0; z-index:105; background:rgba(20,26,15,.5); backdrop-filter:blur(2px); }

  .hero{ padding-top:110px; }
  .hero-grid{ grid-template-columns:1fr; gap:32px; }
  /* Once the hero is a single column the form was pinned left; centre it. */
  .hero-form{ max-width:480px; margin-inline:auto; width:100%; }

  .story-grid,.res-split,.res-split.reverse,.dev-grid,.enq-grid,.loc-grid{ grid-template-columns:1fr; }
  .res-split.reverse .res-media{ order:0; }
  .story-media{ order:-1; }

  .hl-grid,.testi-grid,.am-feature-grid,.nature-features,.values-grid{ grid-template-columns:1fr 1fr; }
  .loc-cards{ grid-template-columns:1fr 1fr; }
  .masonry{ columns:2 200px; }

  .trust{ margin-top:-40px; }
  /* 3 number-stats share one row; the 2 badges each span full width below.
     (repeat(2,1fr) stranded the 3rd stat with an empty cell beside it.) */
  .trust-card{ grid-template-columns:repeat(3,1fr); gap:20px 12px; }
  .stat + .stat{ border-left:none; }
  .badge-stat{ grid-column:1/-1; border-top:1px solid var(--line); padding-top:18px; }
}

/* ---------- Mobile ---------- */
@media (max-width:600px){
  .wrap{ padding:0 18px; }
  .section{ padding:56px 0; }
  .hero-copy h1{ font-size:clamp(2.3rem,10vw,3.2rem); }
  .hero-actions .btn{ flex:1; justify-content:center; }
  .hero-form{ padding:24px; }

  .hl-grid,.testi-grid,.am-feature-grid,.nature-features,.loc-cards,.values-grid,.tick.two{ grid-template-columns:1fr; }
  .am-groups{ grid-template-columns:1fr; }
  .masonry{ columns:1; }
  .row{ grid-template-columns:1fr; }

  /* Keep the 3-across number row from the tablet rule; just tighten type so
     the three labels sit comfortably at phone width. */
  .trust-card{ grid-template-columns:repeat(3,1fr); gap:16px 6px; padding:22px 10px; }
  .stat{ padding:6px 2px; }
  .stat .num{ font-size:1.5rem; }
  .stat .lbl{ font-size:.64rem; line-height:1.25; }

  /* Story tags: tighten so they wrap cleanly instead of one pill dropping alone. */
  .story-tags{ gap:8px; margin-top:20px; }
  .story-tags span{ font-size:.74rem; padding:.45em .85em; }

  /* Price box spans the column (was a fixed 260px). The value must never wrap:
     the old 56px + no-wrap-off rule broke "₹3.9 Cr*" onto two lines and
     ballooned the box. Fixed, fitting size + hard nowrap prevents that. */
  .price-box{ display:flex; width:100%; min-width:0; padding:16px 20px; align-items:flex-start; }
  .price-value{ font-size:2.6rem; white-space:nowrap; }
  .price-label{ font-size:.66rem; }

  /* Full-width CTA under each collection — "Enquire about Earth Residences"
     no longer fits on one line beside the arrow at 320px. */
  .res-copy .btn-line{ width:100%; justify-content:center; white-space:normal; }

  .foot-grid{ grid-template-columns:1fr 1fr; gap:26px; }
  .foot-brand{ grid-column:1/-1; }

  .float-btn{ right:16px; }
  .float-wa{ bottom:150px; }
  .float-call{ bottom:88px; }

  /* Sticky mobile CTA bar */
  .mobile-cta{
    display:flex; position:fixed; inset:auto 0 0 0; z-index:95;
    background:rgba(251,248,242,.94); backdrop-filter:blur(12px);
    border-top:1px solid var(--line); padding:8px 10px; gap:8px;
    box-shadow:0 -8px 30px -18px rgba(38,48,31,.5);
  }
  .mobile-cta a{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    font-size:.72rem; color:var(--ink-soft); padding:6px 4px; border-radius:12px;
  }
  .mobile-cta a svg{ width:22px; height:22px; }
  .mobile-cta .mc-primary{ background:var(--olive-deep); color:#fff; }
  body{ padding-bottom:72px; }
  .foot-bottom{ margin-bottom:8px; }
}

/* ---------- Landscape phones ---------- */
@media (max-height:520px) and (orientation:landscape){
  .hero{ min-height:auto; padding:100px 0 60px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
}