/* =========================================================
   HOME AREAS — v173 (2026-10-03). Pairs with the areas part of js/171-home-deck.js. Loaded after 171.
   Flat grid, everything readable without hovering. Order = js/172-area-order.js (Pearl, West Bay, Lusail, Doha, Al Waab).
   Desktop : 6-col grid — first two communities 3 cols wide (tall), the rest 2 cols wide.
   Phones  : 2-col grid — first card full width, the others in pairs.
   Performance: transform/opacity only, one-shot animations, no infinite loops, no backdrop-filter, no layout changes on hover.
   ========================================================= */
.ha-grid{--ha-navy:var(--navy-900,#162D4C);--ha-navy2:var(--navy-950,#0F1F35);--ha-gold:var(--gold-500,#CEA577);--ha-gold2:#F1D9B2;--ha-ease:cubic-bezier(.2,.8,.2,1);
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;}
.ha-card{position:relative;grid-column:span var(--span,2);min-height:255px;border-radius:22px;overflow:hidden;cursor:pointer;isolation:isolate;color:#fff;outline:none;
  background:linear-gradient(135deg,var(--ha-navy2),var(--ha-navy));box-shadow:0 8px 22px rgba(15,31,53,.18);-webkit-tap-highlight-color:transparent;
  display:flex;flex-direction:column;justify-content:flex-end;contain:layout paint;
  transition:transform .35s var(--ha-ease),box-shadow .35s,opacity .6s calc(var(--i,0)*70ms),translate .6s calc(var(--i,0)*70ms) var(--ha-ease);}
.ha-card.ha-lg{min-height:310px;}
.ha-card:focus-visible{box-shadow:0 0 0 3px var(--ha-gold);}
.ha-card:active{transform:scale(.985);}
.ha-grid.ha-pre .ha-card{opacity:0;translate:0 22px;}

.ha-photo{position:absolute;inset:0;z-index:-2;background:linear-gradient(135deg,#1c3a60,#0F1F35);}
.ha-photo>svg{position:absolute;inset:0;width:100%;height:100%;opacity:.5;}
.ha-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none;filter:brightness(.88) saturate(1.05);transition:transform .8s var(--ha-ease);}
.ha-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(8,18,32,.45) 0%,rgba(8,18,32,0) 30%,rgba(8,18,32,.55) 58%,rgba(8,18,32,.93) 100%);}

.ha-top{position:absolute;top:14px;left:16px;right:16px;display:flex;align-items:center;justify-content:space-between;gap:10px;pointer-events:none;}
.ha-rank{font:700 12px/1 var(--font-mono,monospace);letter-spacing:.14em;color:var(--ha-gold2);padding:6px 10px;border-radius:99px;background:rgba(15,31,53,.55);border:1px solid rgba(255,255,255,.18);}
.ha-deal{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:99px;font-size:11px;letter-spacing:.04em;font-weight:800;color:#3d2a0c;background:linear-gradient(135deg,#F7DDA1,#D79B3F);}

.ha-body{padding:0 20px 18px;display:grid;gap:11px;}
.ha-body h3{font-family:var(--font-heading,'Fraunces',serif);font-weight:600;font-size:clamp(24px,2.4vw,30px);line-height:1.05;letter-spacing:-.01em;color:#fff;text-shadow:0 3px 18px rgba(0,0,0,.5);}
.ha-lg .ha-body h3{font-size:clamp(30px,3.4vw,44px);}
.ha-meter{display:flex;align-items:center;gap:10px;}
.ha-bar{flex:1;height:6px;border-radius:6px;background:rgba(255,255,255,.2);overflow:hidden;}
.ha-bar i{display:block;height:100%;width:var(--p,0%);border-radius:6px;background:linear-gradient(90deg,var(--ha-gold),var(--ha-gold2));transform-origin:left;transition:transform 1s .25s var(--ha-ease);}
.ha-grid.ha-pre .ha-bar i{transform:scaleX(0);}
.ha-meter b{font:700 13px/1 var(--font-mono,monospace);color:var(--ha-gold2);min-width:3.2em;text-align:right;}
.ha-stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.ha-stats li{padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);display:grid;gap:3px;min-width:0;}
.ha-stats li b{font:700 18px/1 var(--font-mono,monospace);}
.ha-lg .ha-stats li b{font-size:21px;}
.ha-stats li span{font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ha-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.ha-price{display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap;}
.ha-price small{font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.7;}
.ha-price b{font:700 16px/1 var(--font-mono,monospace);color:var(--ha-gold2);}
.ha-price em{font-style:normal;font-size:11px;opacity:.7;}
.ha-go{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:14px;color:var(--ha-navy2);background:linear-gradient(135deg,var(--ha-gold2),var(--ha-gold));transition:transform .3s var(--ha-ease);}

/* mouse only: a small lift — never changes the card size, so the page never jumps */
@media(hover:hover) and (pointer:fine){
  .ha-card:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(15,31,53,.32),0 0 0 1px rgba(206,165,119,.55);}
  .ha-card:hover .ha-photo img{transform:scale(1.05);}
  .ha-card:hover .ha-go{transform:translateX(3px);}
}

@media(max-width:1100px){.ha-grid{gap:12px}.ha-stats li{padding:7px 8px}.ha-stats li b{font-size:16px}}
@media(max-width:860px){
  .ha-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .ha-card{grid-column:span 1;min-height:215px;border-radius:18px;}
  .ha-card:first-child{grid-column:1/-1;min-height:250px;}
  .ha-card:nth-child(n+2):last-child:nth-child(even){grid-column:1/-1;}   /* never leave a lonely half-width card */
  .ha-card.ha-lg{min-height:215px;}.ha-card.ha-lg:first-child{min-height:250px;}
  .ha-body{padding:0 14px 14px;gap:9px;}
  .ha-body h3,.ha-lg .ha-body h3{font-size:22px;}.ha-card:first-child .ha-body h3{font-size:30px;}
  .ha-top{top:10px;left:12px;right:12px;}
  .ha-stats{gap:6px}.ha-stats li{padding:6px 7px}.ha-stats li b,.ha-lg .ha-stats li b{font-size:15px}.ha-stats li span{font-size:8.5px;letter-spacing:.04em}
  .ha-card:not(:first-child) .ha-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ha-card:not(:first-child) .ha-stats li:nth-child(2){display:none;}   /* half-width cards: Vacant + Units only, so labels never truncate */
  .ha-price small{display:none}.ha-price b{font-size:14px}
  .ha-go{width:34px;height:34px}
}
@media(prefers-reduced-motion:reduce){
  .ha-card,.ha-card *{transition:none!important;animation:none!important;}
  .ha-grid.ha-pre .ha-card{opacity:1;translate:none;}
  .ha-grid.ha-pre .ha-bar i{transform:none;}
}
@media print{.ha-photo img{display:none}}

/* Hot Deals: which area this best-deal card represents */
.dk-d-best{display:inline-flex;align-items:center;gap:6px;margin:2px 0 4px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#8a5a14;}
.dk-d-best i{font-size:11px;color:#D79B3F;}