/* =====================================================
   responsive-fix.css  -  DLF Magnolia Phase 2
   Load AFTER style.css and custom-overrides.css.
   Fixes mobile/tablet layout. Desktop (above 980px) is
   untouched except where noted.
===================================================== */

/* Desktop + all: keep the fixed bottom bar from hiding the footer text */
body{padding-bottom:58px;}
html{-webkit-text-size-adjust:100%;}
.hero{height:100vh; height:100svh;}

/* Brand and button never wrap onto two lines */
.brand,.nav-cta{white-space:nowrap;}

/* Small laptops / tablets in landscape (981-1200px): header was crowded and wrapped */
@media (min-width:981px) and (max-width:1200px){
  .nav{padding:0 3vw;}
  .brand{font-size:1.15rem; letter-spacing:.08em;}
  .nav-links{gap:1.15rem;}
  .nav-links a{font-size:.66rem; letter-spacing:.08em;}
  .nav-cta{padding:.7rem 1.1rem; font-size:.62rem; letter-spacing:.1em;}
}

/* ---------- Tablet and below ---------- */
@media (max-width:980px){

  /* HERO: content is bottom-aligned, so when it is taller than the screen it
     slid up under the header. Let the hero grow, and reserve space for the header. */
  .hero{
    height:auto;
    min-height:100vh; min-height:100svh;
    padding-top:calc(92px + env(safe-area-inset-top,0px));
    align-items:flex-end;
  }
  .hero-content{padding:0 6vw calc(58px + 1.6rem);}
  .hero-content h1{font-size:clamp(2.2rem,9vw,3.6rem); max-width:14ch;}
  .hero-content .sub{font-size:1rem; margin:1.1rem 0 1.6rem; max-width:36ch;}

  /* Buttons: equal width, stacked, no letter-spacing jump on touch */
  .hero-ctas{flex-direction:column; gap:.8rem; width:100%; max-width:420px;}
  .hero-ctas .btn{width:100%; justify-content:center; text-align:center; padding:1rem 1.2rem; letter-spacing:.16em;}
  .btn:hover,.btn-gold:hover{letter-spacing:.22em;}

  /* Stats strip: tidy 2 x 2 grid instead of a ragged wrapped row */
  .hero-facts{display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:1.8rem; padding-top:0;}
  .hero-facts-highlight{padding:1.1rem 1.1rem !important;}
  .hero-facts div{margin:0; padding:.9rem 0; border-right:none; min-width:0;}
  .hero-facts div:nth-child(odd){padding-right:.9rem; border-right:1px solid rgba(0,0,0,.14) !important;}
  .hero-facts div:nth-child(even){padding-left:1.1rem;}
  .hero-facts div:nth-child(n+3){border-top:1px solid rgba(0,0,0,.14);}
  .hero-facts .n{font-size:1.15rem; line-height:1.2; overflow-wrap:anywhere;}
  .hero-facts .l{font-size:.64rem; letter-spacing:.06em; line-height:1.4;}

  /* The vertical "scroll to discover" text overlapped the stats */
  .scroll-cue{display:none;}

  /* Amenity list: no scroll box inside the page on touch screens */
  .amen-list{max-height:none; overflow:visible; border-left:none; border-top:1px solid rgba(184,155,94,.2);}
  .amen-row{padding:1.2rem 1.4rem;}
  .amen-row:hover,.amen-row.active{padding-left:1.8rem;}
  .amen-caption{left:1.4rem; bottom:1.4rem;}
  .amen-head{margin-bottom:2.6rem;}

  /* Full-bleed banners: grow with their text instead of clipping it */
  .arch{height:auto; min-height:70vh; padding:5rem 6vw;}
  .arch-content{max-width:none;}
  .vt-fullbleed{height:auto; min-height:70vh; padding:5rem 0;}

  /* headings were squeezed to a narrow width and left single words (e.g. a lone "2") on their own line */
  .split h2,.cta-inner h2,.vt-fullbleed .vt-content h2,.intro h2{max-width:none;}
  .foot-grid .btn{margin-top:1rem;}
  .map-frame{padding:6px;}
  .plans-sec{padding:5.5rem 0;}
  .plan-card{padding:2.6rem 1.6rem;}
  footer{padding:3.6rem 0 2rem;}
  .foot-bottom{margin-top:2.4rem;}
}

/* ---------- Phones ---------- */
@media (max-width:600px){
  h2{font-size:clamp(1.7rem,7.4vw,2rem);}
  .pad,.plans-sec{padding:4.2rem 0;}
  .eyebrow{font-size:.66rem; letter-spacing:.24em; margin-bottom:1rem;}

  .nav{padding:0 6vw;}
  .brand{font-size:1.15rem; letter-spacing:.08em;}
  header{padding:1.1rem 0;}
  header.scrolled{padding:.8rem 0;}

  .stat-card{padding:1.6rem 1rem;}
  .stat-card .n{font-size:1.15rem; overflow-wrap:anywhere;}
  .stat-card .l{font-size:.78rem; margin-top:.6rem;}
  .stat-grid{margin-top:2.4rem;}

  .split .imgcol{height:300px;}
  .res-card{padding:1.8rem 1.4rem;}
  .triad{gap:1.2rem 2rem;}
  .arch-content ul{gap:0 1.4rem;}
  .arch-content .huge{font-size:clamp(2.2rem,11vw,3rem);}
  .cta-inner img{height:220px;}
  .landmark-list.landmark-row li{padding:1.2rem 1.2rem;}

  .gal-grid{grid-auto-rows:140px; gap:.6rem; margin-top:2.4rem;}
  .g3,.g6{grid-column:span 1;}

  /* Sticky bottom bar: fits three labels on a small screen */
  .mobile-sticky a,.mobile-sticky button{padding:.85rem .3rem; font-size:.62rem; letter-spacing:.04em; line-height:1.25;}

  /* Enquiry form */
  .modal-overlay{padding:12px; align-items:flex-end;}
  .modal-box{padding:2.2rem 1.5rem 1.8rem; max-height:94vh;}
  .modal-box h3{font-size:1.45rem; padding-right:1.6rem;}
  .field{margin-bottom:1.1rem;}
  .field input,.field select{font-size:16px;}   /* stops iPhone zooming into the field */
}

/* Very small phones */
@media (max-width:360px){
  .hero-content h1{font-size:2rem;}
  .hero-facts .n{font-size:1rem;}
}