/* ============================================================
   MOBILE HARDENING
   Fixes horizontal overflow and tightens layout on phones.
   Tested at 320 / 360 / 390 / 414 / 768 px.
   ============================================================ */

/* --- 1. Global safety net: never let the page scroll sideways --- */
html,body{max-width:100%;overflow-x:clip}

/* --- 2. THE ROOT CAUSE of most grid overflow ---
   Grid and flex items default to `min-width:auto`, which refuses to
   shrink below the intrinsic width of their content. A single-column
   grid then sizes itself to its widest child instead of the container.
   Setting min-width:0 lets them compress. Do not remove this. */
.book-grid > *,
.det-body > *,
.contact-grid > *,
.exp > *,
.about-intro > *,
.amen-row > *,
.blog-feat > *,
.off-card > *,
.footer-grid > *,
.apt-grid > *,
.blog-grid > *,
.why-grid > *,
.val-grid > *,
.team-grid > *,
.stats > *{min-width:0}

/* Media inside any grid/flex child must not force width */
.book-grid img,.det-body img,.contact-grid img,.exp img,
.about-intro img,.amen-row img,.blog-feat img,.off-card img{max-width:100%;height:auto}

/* --- 3. Long words / URLs / emails must wrap, not push --- */
p,li,h1,h2,h3,h4,a,span,td,th,label,blockquote{overflow-wrap:break-word}
.prose a,.legal a,.footer-contact li{word-break:break-word}

/* --- 4. Inputs & selects: prevent iOS zoom-on-focus + overflow --- */
input,select,textarea,button{max-width:100%;font-size:16px}

@media(max-width:860px){
  /* iOS zooms in when an input's font-size < 16px. Keep labels small,
     but never the field itself. */
  .search-field select,.search-field input,
  .bc-field input,.bc-field select,
  .bk-field input,.bk-field select,
  .cf-field input,.cf-field textarea,
  .news-form input,.filter-sort select{font-size:16px}
}

/* ============================================================
   <= 860px  — tablets and large phones
   ============================================================ */
@media(max-width:860px){

  /* Book Now: stack the flow, shrink the step tracker */
  .book-grid{grid-template-columns:1fr!important;gap:32px}
  .book-panel{padding:24px 20px}
  .book-steps{gap:6px;margin-bottom:26px}
  .bstep small{font-size:.58rem;letter-spacing:.06em}
  .bstep span{width:26px;height:26px;font-size:.78rem}
  .bk-row{flex-direction:column;gap:0}
  .summary-card{position:static}

  /* Apartment details */
  .det-body{grid-template-columns:1fr!important;gap:36px}
  .det-gallery{height:auto;grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .det-gallery .g-main{grid-column:1/3;height:240px}
  .det-gallery a:not(.g-main){height:130px}
  .det-facts{gap:18px 22px}
  .det-fact svg{width:22px;height:22px}
  .amen-grid{grid-template-columns:1fr}
  .book-card{position:static;padding:24px 20px}
  .bc-row{flex-direction:column;gap:0}
  .map-embed{height:260px}
  .rev-item{gap:12px}

  /* Contact */
  .contact-form{padding:26px 20px}
  .cf-row{flex-direction:column;gap:0}
  .map-full iframe{height:300px}

  /* Blog */
  .blog-feat .fb{padding:26px 20px}
  .prose{padding:0}

  /* Offers */
  .off-card{grid-template-columns:1fr}
  .off-media img{min-height:190px}
  .off-body{padding:24px 20px}

  /* Amenities */
  .amen-row{gap:28px;margin-bottom:56px}

  /* Gallery */
  .gal-grid{columns:2;column-gap:10px}
  .gal-cell{margin-bottom:10px}
}

/* ============================================================
   <= 620px  — phones
   ============================================================ */
@media(max-width:620px){
  .container,.wrap-narrow{padding:0 18px}
  .pad{padding:64px 0}
  .pad-sm{padding:48px 0}

  /* Type scales down so headings don't crowd */
  .section-head{margin-bottom:40px}
  .section-head h2{font-size:clamp(1.9rem,7.5vw,2.4rem)}
  .eyebrow{font-size:.62rem;letter-spacing:.3em}
  .eyebrow::before,.eyebrow.center::after{width:22px}

  /* Hero */
  .hero{min-height:92vh}
  .hero-inner{padding-top:104px}
  .hero h1{font-size:clamp(2.3rem,10vw,3.2rem)}
  .hero p{font-size:1.02rem}
  .hero-cta{gap:12px}
  .hero-cta .btn{width:100%;justify-content:center}
  .hero-scroll{display:none}

  .page-hero{min-height:auto;padding:128px 0 64px}
  .page-hero h1{font-size:clamp(2rem,8.5vw,2.9rem)}
  .page-hero p{font-size:1rem}

  /* Buttons: comfortable tap targets (>=44px) */
  .btn{padding:15px 26px;font-size:.76rem;min-height:46px}
  .btn-sm{padding:13px 20px;min-height:42px}

  /* Search bar under the hero */
  .search-bar{margin-top:-30px}
  .search-inner{padding:10px;gap:0;border-radius:18px}
  .search-field{padding:12px 14px;border-right:none;border-bottom:1px solid var(--line)}
  .search-btn{width:100%;margin-top:8px}

  /* Stats: 2x2 */
  .stats{grid-template-columns:1fr 1fr;gap:30px 16px}
  .stat b{font-size:2.5rem}
  .stat span{font-size:.68rem;letter-spacing:.1em}

  /* Apartment cards */
  .apt-body{padding:20px 18px 24px}
  .apt-body h3{font-size:1.4rem}
  .apt-specs{gap:12px;padding:12px 0}
  .apt-spec{font-size:.76rem}
  .apt-price b{font-size:1.6rem}

  /* Filter panel */
  .filter-panel{padding:16px}
  .filter-row{gap:8px}
  .filter-chip{padding:8px 15px;font-size:.75rem}
  .filter-sort{width:100%;justify-content:space-between}

  /* Why-choose cards */
  .why-card{padding:28px 22px}
  .why-card h3{font-size:1.35rem}

  /* Experience split */
  .exp-media .badge{right:12px;bottom:-18px;padding:18px 22px}
  .exp-media .badge b{font-size:2rem}
  .exp-list li{font-size:.92rem}

  /* Testimonials */
  .tslide blockquote{font-size:1.25rem;line-height:1.45}
  .tslide .who img{width:48px;height:48px}
  .tarrow{width:42px;height:42px}

  /* Instagram strip */
  .ig-grid{grid-template-columns:repeat(3,1fr);gap:8px}

  /* Newsletter */
  .news-form{flex-direction:column;gap:10px}
  .news-form input,.news-form .btn{width:100%}

  /* Details page */
  .det-wrap{padding-top:104px}
  .det-head{gap:12px}
  .det-gallery{gap:8px}
  .det-gallery .g-main{height:200px}
  .det-gallery a:not(.g-main){height:105px}
  .g-more{font-size:1.1rem}
  .det-section h2{font-size:1.6rem}

  /* Book page */
  .book-steps{gap:4px}
  .bstep small{font-size:.52rem}
  .pay-methods{gap:8px}
  .pay-chip{padding:10px 13px;font-size:.78rem}

  /* Blog */
  .blog-feat .fm img{min-height:210px}
  .blog-body{padding:20px 18px}
  .blog-body h3{font-size:1.25rem}
  .prose h2{font-size:1.55rem;margin:38px 0 14px}
  .prose p{font-size:.98rem}
  .prose blockquote{font-size:1.15rem;padding-left:18px}
  .post-cta{padding:26px 20px}

  /* Legal */
  .legal h2{font-size:1.35rem}

  /* FAQ */
  .faq-q{padding:18px 20px;font-size:1.15rem;gap:14px}
  .faq-a p{padding:0 20px 20px}

  /* Gallery */
  .gal-grid{columns:1}
  .lightbox{padding:16px}

  /* Footer */
  .site-footer{padding:64px 0 26px}
  .footer-brand img{height:70px}
  .footer-col h4{font-size:1.25rem;margin-bottom:16px}

  /* WhatsApp button clear of the thumb zone */
  .wa-float{right:16px;bottom:16px;width:52px;height:52px}
  .wa-float svg{width:26px;height:26px}
}

/* ============================================================
   <= 380px  — iPhone SE and similar
   ============================================================ */
@media(max-width:380px){
  .container,.wrap-narrow{padding:0 14px}
  .brand img{height:44px}
  .brand-txt b{font-size:1.15rem;letter-spacing:.12em}
  .brand-txt small{font-size:.5rem;letter-spacing:.3em}

  .hero h1{font-size:2.1rem}
  .page-hero h1{font-size:1.9rem}

  /* Step tracker: labels would collide, so hide them */
  .bstep small{display:none}
  .bstep{padding-bottom:10px}

  .det-gallery{grid-template-columns:1fr}
  .det-gallery .g-main{grid-column:1;height:190px}
  .det-gallery a:not(.g-main){height:120px}

  .det-facts{gap:14px 18px}
  .det-fact b{font-size:1.2rem}
  .det-fact span{font-size:.66rem}

  .stats{gap:24px 12px}
  .stat b{font-size:2.1rem}

  .ig-grid{grid-template-columns:repeat(2,1fr)}
  .pay-chip{padding:9px 11px;font-size:.72rem}
  .filter-chip{padding:7px 13px;font-size:.72rem}
}

/* --- Landscape phones: don't let a 100vh hero eat the screen --- */
@media(max-height:520px) and (orientation:landscape){
  .hero{min-height:auto;padding:120px 0 60px}
  .page-hero{min-height:auto;padding:110px 0 50px}
  .nav{padding:24px;gap:16px}
  .nav a{font-size:.95rem}
}

/* ============================================================
   TAP TARGETS
   Apple HIG and Material both specify a 44x44px minimum.
   Applied via padding so the visual design is unchanged.
   ============================================================ */
@media(max-width:860px){

  /* Hamburger — the most-tapped control on mobile */
  .menu-toggle{padding:12px;margin:-12px -8px -12px 0}

  /* Mobile drawer links: generous vertical hit area */
  .nav a{
    min-height:44px;
    display:flex;align-items:center;justify-content:center;
    padding:8px 16px;width:100%;
  }
  .nav a.btn{min-height:48px;padding:14px 34px;width:auto;letter-spacing:.14em}

  /* Search bar fields */
  .search-field{min-height:56px;display:flex;flex-direction:column;justify-content:center}
  .search-field select,.search-field input{min-height:30px;padding:4px 0}
  .search-btn{min-height:50px}

  /* Filter + payment chips */
  .filter-chip,.pay-chip{min-height:44px;display:inline-flex;align-items:center}

  /* Carousel dots need a bigger invisible target */
  .tdot{position:relative}
  .tdot::after{content:"";position:absolute;inset:-14px}

  /* Favourite heart on apartment cards */
  .apt-fav{width:44px;height:44px}

  /* Gallery cells and FAQ rows are already large; ensure links inside
     cards clear 44px */
  .apt-card .btn,.blog-more,.off-body .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}

  /* Footer links: spread them out for thumbs */
  .footer-col li{margin-bottom:4px}
  .footer-col a{display:inline-block;padding:9px 0;min-height:40px}
  .socials a{width:46px;height:46px}
}

/* Final tap-target tightening */
@media(max-width:860px){
  .menu-toggle{padding:14px 12px;margin:-14px -8px -14px 0;min-height:48px;min-width:48px}
  .tarrow{width:46px;height:46px}
  /* The <select>/<input> sit inside a 56px .search-field, which is the real
     hit area, but give them full height so the tap lands on the control. */
  .search-field{position:relative}
  .search-field select,.search-field input{min-height:36px}
  /* Breadcrumb links on details page */
  .breadcrumb a{padding:6px 2px;display:inline-block}
}

/* Notched phones: keep fixed elements clear of the safe area */
@supports(padding:max(0px)){
  .site-header .container{
    padding-left:max(18px,env(safe-area-inset-left));
    padding-right:max(18px,env(safe-area-inset-right));
  }
  .wa-float{
    right:max(16px,env(safe-area-inset-right));
    bottom:max(16px,env(safe-area-inset-bottom));
  }
}