/* =========================================================
   MAGICBRICK — AREA GUIDE PAGE (reusable for every area)
   Pixel-matched to the approved design. Uses theme tokens
   (--navy / --gold / --serif / --sans).
   ========================================================= */

.mb-g-page{background:#fff;}

/* ---------------------------------------------------------
   1) HERO (navy → photo) with breadcrumb on top
   --------------------------------------------------------- */
.mb-g-hero{
  position:relative;background-color:var(--navy);
  background-size:cover;background-position:center right;background-repeat:no-repeat;
  padding:30px 0 56px;overflow:hidden;
}
.mb-g-hero::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,
    var(--navy) 0%,var(--navy) 30%,
    rgba(11,27,61,.95) 42%,rgba(11,27,61,.55) 58%,
    rgba(11,27,61,.18) 76%,rgba(11,27,61,.04) 100%);
}
.mb-g-hero-inner{position:relative;z-index:2;}
.mb-g-crumbs{font-size:.82rem;color:rgba(255,255,255,.7);margin-bottom:26px;}
.mb-g-crumbs a{color:rgba(255,255,255,.7);}
.mb-g-crumbs a:hover{color:var(--gold);}
.mb-g-crumbs span{margin:0 8px;color:rgba(255,255,255,.4);}
.mb-g-hero h1{font-family:var(--serif);color:#fff;font-weight:800;line-height:1.06;font-size:clamp(2.1rem,4.8vw,3.3rem);margin:0 0 12px;letter-spacing:-.5px;}
.mb-g-hero-tag{display:block;color:var(--gold);font-weight:700;font-size:clamp(1.1rem,2vw,1.4rem);margin:0 0 16px;}
.mb-g-hero-sub{color:rgba(255,255,255,.86);font-size:1rem;line-height:1.7;margin:0 0 28px;max-width:470px;}
.mb-g-hero-btn{background:transparent;color:#fff;border:2px solid var(--gold);}
.mb-g-hero-btn:hover{background:var(--gold);color:#fff;border-color:var(--gold);}

/* ---------------------------------------------------------
   2) ABOUT / OVERVIEW
   --------------------------------------------------------- */
.mb-g-about{padding:56px 0 40px;}
.mb-g-eyebrow{display:block;font-size:.72rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);margin-bottom:10px;}
.mb-g-about-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:50px;align-items:start;}
.mb-g-about-left h2{font-family:var(--serif);font-size:clamp(1.6rem,2.8vw,2rem);color:var(--navy);font-weight:800;margin:0 0 16px;}
.mb-g-about-left p{color:var(--gray);font-size:.94rem;line-height:1.75;margin:0 0 14px;}

.mb-g-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:24px;}
.mb-g-fact{text-align:center;padding:6px 14px;border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:8px;}
.mb-g-fact:last-child{border-right:none;}
.mb-g-fact-ic{color:var(--gold);display:flex;align-items:center;justify-content:center;height:32px;}
.mb-g-fact-ic img{height:30px;width:30px;object-fit:contain;}
.mb-g-fact-l{font-size:.82rem;color:var(--gray);font-weight:600;}
.mb-g-fact-v{font-size:.9rem;color:var(--navy);font-weight:700;line-height:1.35;}

/* image collage: 1 big + 2 stacked */
.mb-g-collage{display:grid;grid-template-columns:1.5fr 1fr;grid-template-rows:1fr 1fr;gap:14px;height:340px;}
.mb-g-collage img{width:100%;height:100%;object-fit:cover;border-radius:12px;display:block;}
.mb-g-collage .mb-g-col-1{grid-row:1 / span 2;}

/* ---------------------------------------------------------
   3) THREE COLUMNS (lifestyle / transport / schools)
   --------------------------------------------------------- */
.mb-g-cols{padding:30px 0;border-top:1px solid var(--line);}
.mb-g-cols-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;}
.mb-g-colx{padding:6px 36px;border-right:1px solid var(--line);display:flex;flex-direction:column;}
.mb-g-colx:first-child{padding-left:0;}
.mb-g-colx:last-child{border-right:none;padding-right:0;}
.mb-g-colx-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.mb-g-colx-ic{color:var(--gold);display:flex;}
.mb-g-colx-ic img{height:30px;width:30px;object-fit:contain;}
.mb-g-colx-head h3{font-size:1.18rem;color:var(--navy);font-weight:700;margin:0;}
.mb-g-colx>p{color:var(--gray);font-size:.9rem;line-height:1.65;margin:0 0 16px;}
.mb-g-colx-list{display:flex;flex-direction:column;gap:11px;margin:0 0 20px;flex:1;}
.mb-g-colx-list li{display:flex;align-items:flex-start;gap:10px;font-size:.88rem;color:var(--ink);line-height:1.4;}
.mb-g-colx-list li svg{flex-shrink:0;margin-top:1px;color:var(--gold);}
.mb-g-colx-btn{align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;padding:12px 22px;border:1px solid var(--line);border-radius:6px;font-size:.76rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--navy);background:#fff;transition:all .2s;}
.mb-g-colx-btn:hover{border-color:var(--navy);background:var(--navy);color:#fff;}

/* ---------------------------------------------------------
   4) RENTAL MARKET
   --------------------------------------------------------- */
.mb-g-market{padding:40px 0;border-top:1px solid var(--line);}
.mb-g-market-grid{display:grid;grid-template-columns:1fr 2.5fr;gap:40px;align-items:center;}
.mb-g-market-left h2{font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,1.95rem);color:var(--navy);font-weight:800;margin:0 0 14px;line-height:1.15;}
.mb-g-market-left p{color:var(--gray);font-size:.9rem;line-height:1.65;margin:0 0 20px;}

.mb-g-stats-box{border:1px solid var(--line);border-radius:10px;}
.mb-g-stats-row{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid var(--line);}
.mb-g-stat{text-align:center;padding:22px 14px;border-right:1px solid var(--line);}
.mb-g-stat:last-child{border-right:none;}
.mb-g-stat-ic{color:var(--gold);display:flex;justify-content:center;margin-bottom:12px;height:30px;align-items:center;}
.mb-g-stat-l{font-size:.82rem;color:var(--navy);font-weight:700;line-height:1.3;margin-bottom:10px;}
.mb-g-stat-v{font-size:1.2rem;color:var(--navy);font-weight:800;margin-bottom:6px;}
.mb-g-stat-s{font-size:.74rem;color:var(--gray);}
.mb-g-stat-s.up{color:#1c9d63;}
.mb-g-stats-foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 18px;font-size:.78rem;color:var(--gray);}

/* ---------------------------------------------------------
   5) FEATURED PROPERTIES (API carousel)
   --------------------------------------------------------- */
.mb-g-feat{padding:44px 0 40px;}
.mb-g-feat-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;}
.mb-g-feat-head h2{font-family:var(--serif);font-size:clamp(1.4rem,2.4vw,1.7rem);color:var(--navy);font-weight:800;margin:0;}
.mb-g-feat-all{display:inline-flex;align-items:center;gap:7px;font-size:.76rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--gold);white-space:nowrap;}
.mb-g-feat-all:hover{color:var(--gold-dark);}
.mb-g-carousel-wrap{position:relative;}
.mb-g-carousel{display:grid;grid-auto-flow:column;grid-auto-columns:calc(25% - 18px);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:6px 4px 10px;-ms-overflow-style:none;scrollbar-width:none;}
.mb-g-carousel::-webkit-scrollbar{display:none;}
.mb-g-carousel>*{scroll-snap-align:start;}

.mb-g-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;transition:box-shadow .2s,transform .2s;display:block;}
.mb-g-card:hover{box-shadow:0 12px 30px rgba(0,0,0,.09);transform:translateY(-3px);}
.mb-g-card-img{position:relative;height:170px;}
.mb-g-card-img img{width:100%;height:100%;object-fit:cover;border-radius:12px 12px 0 0;display:block;}
.mb-g-card-new{position:absolute;top:12px;left:12px;background:var(--navy);color:#fff;font-size:.64rem;font-weight:700;letter-spacing:.5px;padding:5px 11px;border-radius:5px;z-index:2;}
.mb-g-card-heart{position:absolute;right:16px;bottom:-18px;width:38px;height:38px;border-radius:50%;background:#fff;box-shadow:0 5px 14px rgba(11,27,61,.16);display:flex;align-items:center;justify-content:center;color:var(--gold);z-index:3;transition:transform .2s,background .2s;}
.mb-g-card-heart:hover{transform:scale(1.08);}
.mb-g-card-body{padding:24px 16px 18px;}
.mb-g-card-body h3{font-size:.92rem;color:var(--navy);font-weight:700;margin:0 0 3px;}
.mb-g-card-addr{font-size:.82rem;color:var(--gray);margin:0 0 10px;}
.mb-g-card-price{font-size:1.05rem;font-weight:800;color:var(--navy);margin:0 0 12px;}
.mb-g-card-meta{display:flex;align-items:center;gap:0;border-top:1px solid var(--line);padding-top:11px;}
.mb-g-card-meta span{display:inline-flex;align-items:center;gap:5px;font-size:.8rem;font-weight:600;color:var(--ink);padding:0 12px;border-right:1px solid var(--line);}
.mb-g-card-meta span:first-child{padding-left:0;}
.mb-g-card-meta span:last-child{border-right:none;}
.mb-g-card-meta svg{color:var(--navy);}
.mb-g-car-btn{position:absolute;top:38%;transform:translateY(-50%);z-index:6;width:42px;height:42px;border-radius:50%;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--navy);box-shadow:0 6px 18px rgba(11,27,61,.14);transition:background .2s,color .2s,opacity .2s;}
.mb-g-car-btn:hover{background:var(--navy);color:#fff;}
.mb-g-car-prev{left:-18px;} .mb-g-car-next{right:-18px;}
.mb-g-car-btn[disabled]{opacity:0;pointer-events:none;}
.mb-g-feat-empty{padding:40px;text-align:center;color:var(--gray);border:1px dashed var(--line);border-radius:12px;}

/* ---------------------------------------------------------
   6) WHY RENT
   --------------------------------------------------------- */
.mb-g-why{padding:8px 0 44px;}
.mb-g-why-box{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:36px 10px;}
.mb-g-why-box h2{text-align:center;font-family:var(--serif);font-size:clamp(1.4rem,2.4vw,1.7rem);color:var(--navy);font-weight:800;margin:0 0 26px;}
.mb-g-why-grid{display:grid;grid-template-columns:repeat(5,1fr);}
.mb-g-why-item{text-align:center;padding:6px 20px;border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:12px;}
.mb-g-why-item:last-child{border-right:none;}
.mb-g-why-ic{color:var(--gold);display:flex;height:38px;align-items:center;}
.mb-g-why-ic img{height:34px;width:34px;object-fit:contain;}
.mb-g-why-item p{font-size:.84rem;color:var(--ink);line-height:1.5;margin:0;}

/* ---------------------------------------------------------
   7) FULL-WIDTH CTA (navy, photo on left)
   --------------------------------------------------------- */
.mb-g-cta{position:relative;background:var(--navy);background-size:cover;background-position:left center;background-repeat:no-repeat;padding:34px 0;}
.mb-g-cta::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,27,61,.45) 0%,rgba(11,27,61,.86) 16%,var(--navy) 30%,var(--navy) 100%);}
.mb-g-cta-inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:30px;padding-left:14%;}
.mb-g-cta-txt h2{font-family:var(--serif);font-size:clamp(1.4rem,2.4vw,1.8rem);color:#fff;font-weight:800;margin:0 0 8px;}
.mb-g-cta-txt p{color:rgba(255,255,255,.78);font-size:.92rem;line-height:1.6;margin:0;}
.mb-g-cta-btns{display:flex;flex-direction:column;gap:12px;flex-shrink:0;}
.mb-g-cta-btns .mb-btn{justify-content:center;white-space:nowrap;}
.mb-g-cta-btn1{background:var(--gold);color:#fff;border-color:var(--gold);}
.mb-g-cta-btn1:hover{background:var(--gold-dark);border-color:var(--gold-dark);}
.mb-g-cta-btn2{background:transparent;color:#fff;border:1.6px solid var(--gold);}
.mb-g-cta-btn2:hover{background:var(--gold);color:#fff;}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:1100px){
  .mb-g-about-grid{gap:34px;}
  .mb-g-carousel{grid-auto-columns:calc(33.333% - 16px);}
  .mb-g-cta-inner{padding-left:0;}
}
@media(max-width:980px){
  .mb-g-hero{background-position:center;}
  .mb-g-hero::before{background:linear-gradient(rgba(11,27,61,.82),rgba(11,27,61,.9));}
  .mb-g-hero-inner{max-width:none;}
  .mb-g-about-grid{grid-template-columns:1fr;gap:30px;}
  .mb-g-collage{height:280px;}
  .mb-g-cols-grid{grid-template-columns:1fr;gap:30px;}
  .mb-g-colx{border-right:none;border-bottom:1px solid var(--line);padding:0 0 24px;}
  .mb-g-colx:last-child{border-bottom:none;}
  .mb-g-market-grid{grid-template-columns:1fr;gap:26px;}
  .mb-g-stats-row{grid-template-columns:repeat(3,1fr);}
  .mb-g-stat:nth-child(3){border-right:none;}
  .mb-g-stat:nth-child(n+4){border-top:1px solid var(--line);}
  .mb-g-carousel{grid-auto-columns:calc(50% - 12px);}
  .mb-g-car-prev{left:6px;} .mb-g-car-next{right:6px;}
  .mb-g-why-grid{grid-template-columns:repeat(3,1fr);gap:26px 0;}
  .mb-g-why-item:nth-child(3){border-right:none;}
  .mb-g-cta::before{background:linear-gradient(rgba(11,27,61,.74),rgba(11,27,61,.9));}
}
@media(max-width:820px){
  .mb-g-facts{grid-template-columns:repeat(2,1fr);gap:24px 0;}
  .mb-g-fact:nth-child(2){border-right:none;}
  .mb-g-cta-inner{flex-direction:column;align-items:flex-start;}
  .mb-g-cta-btns{width:100%;}
}
@media(max-width:600px){
  .mb-g-collage{grid-template-columns:1fr;grid-template-rows:auto;height:auto;}
  .mb-g-collage .mb-g-col-1{grid-row:auto;height:200px;}
  .mb-g-collage img{height:150px;}
  .mb-g-facts{grid-template-columns:1fr;gap:20px;}
  .mb-g-fact{border-right:none;}
  .mb-g-stats-row{grid-template-columns:repeat(2,1fr);}
  .mb-g-stat:nth-child(2){border-right:none;}
  .mb-g-stat:nth-child(n+3){border-top:1px solid var(--line);}
  .mb-g-stat:nth-child(odd):last-child{grid-column:1 / -1;}
  .mb-g-carousel{grid-auto-columns:85%;}
  .mb-g-car-btn{display:none;}
  .mb-g-why-grid{grid-template-columns:1fr;}
  .mb-g-why-item{border-right:none;border-bottom:1px solid var(--line);padding-bottom:22px;}
  .mb-g-why-item:last-child{border-bottom:none;}
  .mb-g-cta-btns .mb-btn{width:100%;}
}