/* AREA DECK — Community page in the Hot Deals language (2026-10-03). Pairs with js/169-area-deck.js; builds on css/159-hot-deals-pro.css (dh-*). */

/* hero: the community photo, faded into the navy strip */
.ar-hero::before{opacity:1;background:
  linear-gradient(90deg,var(--dh-navy2,#0F1F35) 0%,rgba(15,31,53,.92) 38%,rgba(15,31,53,.55) 100%),
  var(--ar-photo,none) right center/cover no-repeat,
  radial-gradient(420px 140px at 92% -40%,rgba(206,165,119,.30),transparent 70%);}
.ar-hero .dh-slim-in{min-height:76px;}

/* layout strip: the "vacant now" chip reads as the live one */
.dh-chip.ar-vac i{color:#46d38d;opacity:1;}
.dh-layouts{margin-top:14px;}

/* building cards */
.ar-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));}
.ar-media{aspect-ratio:16/9;}
.ar-badge{position:absolute;z-index:2;left:12px;top:12px;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;font-size:11.5px;font-weight:800;letter-spacing:.2px;box-shadow:0 6px 14px rgba(0,0,0,.25);}
.ar-badge.on{background:var(--dh-gold);color:#162D4C;}
.ar-badge.off{background:rgba(15,31,53,.78);color:rgba(255,255,255,.85);backdrop-filter:blur(4px);}
.ar-card .dh-title{align-items:center;}
.ar-card .dh-title h4{font-size:19px;line-height:1.15;}
.ar-card.is-full .dh-media img{filter:saturate(.7);}
.ar-card .dh-actions{padding-top:10px;}
.ar-card .dh-btn-pri{pointer-events:none;}
.ar-card:hover .dh-btn-pri{background:#1F3A5F;transform:translateY(-1px);}
.ar-card:hover .dh-btn-pri i{transform:translateX(3px);}
.ar-card .dh-btn-pri i{transition:transform .2s;}

/* vacancy ring + meter */
.ar-ring{--p:0;flex:none;position:relative;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--dh-green,#1E8E5A) calc(var(--p) * 1%),var(--dh-soft,#F1F3F6) 0);}
.ar-ring::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--dh-card,#fff);}
.ar-ring b{position:relative;font-size:13px;font-weight:800;color:var(--dh-ink,#162D4C);font-variant-numeric:tabular-nums;}
.ar-ring.none b{color:var(--dh-mute,#5F6B7A);}
.ar-meter{height:4px;border-radius:4px;background:var(--dh-soft,#F1F3F6);overflow:hidden;}
.ar-meter i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--dh-gold,#CEA577),var(--dh-gold2,#DDBB94));}
.ar-type{background:var(--dh-soft,#F1F3F6);color:var(--dh-ink,#162D4C);font-weight:700;}
.ar-type i{color:var(--dh-gold,#CEA577);}
.ar-type em{font-style:normal;color:var(--dh-mute,#5F6B7A);font-weight:800;}

/* compact rows */
.ar-row{grid-template-columns:76px minmax(0,1fr) auto auto auto;}
.ar-row.has-vac{border-left:4px solid var(--dh-green,#1E8E5A);}
.ar-row .dh-rpct .ar-ring{width:38px;height:38px;}
.ar-row .dh-rpct>i{color:var(--dh-gold,#CEA577);}

/* the toolbar toggle reads as a pill like the Deals "Filters" button */
.dh-fbtn.active i{color:var(--dh-gold,#CEA577);}
.ar-section .dh-summary{padding-top:14px;}

@media (max-width:760px){
  .ar-grid{grid-template-columns:1fr;}
  .ar-row{grid-template-columns:62px minmax(0,1fr) auto;}
  .ar-row .dh-rprice{display:none;}
  .ar-row .dh-rpct:last-child{display:none;}
  .ar-row .dh-rpct{display:flex;}
  .ar-hero .dh-slim-stats{display:grid;grid-template-columns:repeat(2,1fr);}
  .dh-fbtn span{display:inline;}
}
@media (prefers-reduced-motion:reduce){.ar-card .dh-btn-pri i{transition:none;}}
@media print{.ar-badge{box-shadow:none;}}

/* =========================================================
   v2 — motion + featured cards (same language as Hot Deals)
   ========================================================= */
@property --pp{syntax:'<number>';inherits:false;initial-value:0;}

/* staggered rise-in (cards, rows, picks) */
@keyframes arRise{from{opacity:0;transform:translateY(16px) scale(.985);}to{opacity:1;transform:none;}}
.ar-card,.ar-row,.ar-pick{animation:arRise .55s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 70ms);}
.dh-grid .ar-card:nth-child(n+7){animation:arRise .55s cubic-bezier(.2,.7,.2,1) both;animation-delay:.35s;}

/* ring fills from 0, meter grows, count-ups on the hero */
@keyframes arFill{from{--pp:0;}to{--pp:var(--p);}}
.ar-ring{background:conic-gradient(var(--dh-green,#1E8E5A) calc(var(--pp) * 1%),var(--dh-soft,#F1F3F6) 0);animation:arFill 1s cubic-bezier(.2,.7,.2,1) .25s both;}
@keyframes arGrow{from{transform:scaleX(0);}to{transform:scaleX(1);}}
.ar-meter i{transform-origin:left center;animation:arGrow .9s cubic-bezier(.2,.7,.2,1) .3s both;}
[dir=rtl] .ar-meter i{transform-origin:right center;}

/* hover: lift, photo zoom (already in dh-card), light sweep over the photo, badge pops */
.ar-media::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-120%);transition:transform .8s ease;pointer-events:none;}
.ar-card:hover .ar-media::before{transform:translateX(120%);}
.ar-badge{transition:transform .25s;}
.ar-card:hover .ar-badge{transform:scale(1.06) translateY(-1px);}
.ar-card:not(.is-full)::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:3;background:linear-gradient(90deg,#46d38d,var(--dh-gold,#CEA577));transform-origin:left;animation:arGrow .8s ease .2s both;}
.ar-card:active,.ar-pick:active,.ar-row:active{transform:scale(.99);}

/* featured picks */
.ar-picks{margin-top:14px;}
.ar-pick .dh-pick-top .ar-ring{width:42px;height:42px;background:conic-gradient(#46d38d calc(var(--pp) * 1%),rgba(255,255,255,.18) 0);}
.ar-pick .ar-ring::before{background:rgba(15,31,53,.88);}
.ar-pick .ar-ring b{color:#fff;}
.ar-pick .dh-pick-now small{font-size:12px;font-weight:600;color:rgba(255,255,255,.72);}
.ar-pick .dh-pick-loc i{color:var(--dh-gold,#CEA577);}
.ar-pick.rank-1 .dh-pick-rank i{color:#162D4C;}
.ar-pick:hover .dh-pick-pct{transform:translateY(-2px) scale(1.04);}
.dh-pick-pct{transition:transform .25s;}
.ar-pick.rank-1::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.14) 50%,transparent 60%);background-size:250% 100%;animation:arShine 5s ease-in-out 1.2s infinite;}
@keyframes arShine{0%{background-position:150% 0;}60%,100%{background-position:-60% 0;}}
.ar-pick .dh-pick-bg:empty{background:linear-gradient(135deg,var(--dh-navy2,#0F1F35),#1F3A5F);}

/* pills in the hero slide in (dh-sst already animates) and the live dot pulses (dh-live) */
@media (max-width:760px){.ar-pick,.dh-pick.ar-pick{flex:0 0 82%;}}

@media (prefers-reduced-motion:reduce){
  .ar-card,.ar-row,.ar-pick,.ar-ring,.ar-meter i,.ar-card::after,.ar-pick.rank-1::after{animation:none!important;}
  .ar-ring{--pp:var(--p);}
  .ar-media::before{display:none;}
}
html.bh-bg .ar-card,html.bh-bg .ar-row,html.bh-bg .ar-pick,html.bh-bg .ar-pick.rank-1::after{animation:none!important;}
html.bh-bg .ar-ring{animation:none;--pp:var(--p);}
.ar-picks.n2{grid-template-columns:1.35fr 1fr;}
@media (max-width:1080px){.ar-picks.n2,.ar-picks.n3{grid-template-columns:1fr 1fr;}.ar-picks.n3 .ar-pick.rank-1{grid-column:1/-1;}}
@media (max-width:760px){.ar-picks.n2,.ar-picks.n3{display:flex;}}