/* HOME — final design polish (2026-10-03)
   Fixes found in a full top-to-bottom review of the visitor Home preview (it also benefits the signed-in Home,
   which shares the same markup). Loaded after app.bundle.min.css, so it wins over 01 / 02 / 08 / 129 / 130 / 153 / 155.

   1. Header, content and footer now share ONE grid (same left/right edge, also on very wide screens).
   2. Stat cards: icon | number over label — no more "VACANT NOW" wrapping on one tile only; no overflow on tablets.
   3. Section titles are left-aligned on phones (a flex-end rule from 130 pushed them to the right).
   4. Area cards never leave an empty cell (tablet) or a lonely half-width card (phone).
   5. Hot Deals teaser: the "+N more" call-to-action is a tile inside the grid, so the row is full instead of half empty.
   6. Live strip is the same width as everything else; section rhythm is even.
   7. Price chip says "From", the quick-jump chips show they scroll, footer nav no longer wraps on tablets.
   8. Keyboard focus is visible on every tappable card. */
:root{--hv-max:1500px;--hv-gut:28px;}
@media(max-width:640px){:root{--hv-gut:12px;}}

/* 1 — one grid for header / content / footer */
.pv-bar{padding-inline:max(var(--hv-gut),calc((100% - var(--hv-max))/2 + var(--hv-gut)));}
body:has(.home-v2) footer.site .bh-f-inner,
body:has(.home-v2) footer.site .bh-f-art{max-width:var(--hv-max);}
body:has(.home-v2) footer.site .bh-f-inner{padding-inline:var(--hv-gut);}

/* 2 — stat cards */
.home-v2 .hero h1,.home-v2 .hero-heading{text-wrap:balance;}
.pv-inv-sub{text-wrap:pretty;}
@media(min-width:641px){
  .home-v2 .ticker{max-width:900px;grid-template-columns:repeat(4,minmax(0,1fr));}
  .home-v2 .ticker .t-item{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"i n" "i l";column-gap:12px;row-gap:2px;align-items:center;padding:14px 16px;}
  .home-v2 .ticker .t-icon{grid-area:i;}
  .home-v2 .ticker .t-num{grid-area:n;align-self:end;}
  .home-v2 .ticker .t-label{grid-area:l;align-self:start;margin:0;white-space:nowrap;}
}
@media(min-width:641px) and (max-width:820px){.home-v2 .ticker{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* 3 — section titles on phones */
@media(max-width:640px){.home-v2 .section-head{align-items:flex-start;}}

/* 4 — area cards */
@media(min-width:641px) and (max-width:1280px){
  .home-v2 .areas-grid{display:flex;flex-wrap:wrap;gap:14px;}
  .home-v2 .areas-grid>.area-card{flex:1 1 calc((100% - 28px)/3 - .5px);min-width:0;}
}
@media(min-width:641px) and (max-width:760px){.home-v2 .areas-grid>.area-card{flex-basis:calc((100% - 14px)/2 - .5px);}}
@media(max-width:640px){.home-v2 .areas-grid>.area-card:last-child:nth-child(odd){grid-column:1/-1;}}
/* the round occupancy badge sits bottom-right: keep the chips clear of it */
/* chips wrap inside the space left of the occupancy ring, so they can never run underneath it */
.home-v2 .area-card .body .text{min-width:0;flex:1 1 auto;}
.home-v2 .area-card .stat-row{max-width:calc(100% - 48px);row-gap:5px;column-gap:5px;}
@media(max-width:640px){.home-v2 .area-card .stat-row{max-width:calc(100% - 44px);}}
.home-v2 .area-card .stat-row>*{font-size:min(1em,10.5px);}
}
/* the price is the cheapest unit in the area — say so */
.home-v2 .area-card .stat-row .area-price-chip::before{content:"From";margin-right:4px;font-size:.9em;font-weight:500;color:rgba(255,255,255,.72);}

/* 5 — Hot Deals teaser: the call-to-action joins the grid */
.pv-root .hv2-col-deals .hv2-deal-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
@media(max-width:1100px){.pv-root .hv2-col-deals .hv2-deal-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:640px){.pv-root .hv2-col-deals .hv2-deal-grid{grid-template-columns:minmax(0,1fr);}}
.pv-root .pv-deals-more.pv-more-tile{margin:0;}
@media(min-width:1101px){
  .pv-root .pv-deals-more.pv-more-tile{grid-column:span var(--pv-span,2);flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:14px;padding:28px 24px;}
  .pv-root .pv-more-tile .pv-more-ico{width:52px;height:52px;border-radius:15px;font-size:19px;}
  .pv-root .pv-more-tile p{flex:none;max-width:340px;font-size:14px;}
  .pv-root .pv-more-tile .pv-inv-cta{flex:none;}
}
@media(min-width:641px) and (max-width:1100px){
  .pv-root .pv-deals-more.pv-more-tile{grid-column:span var(--pv-span2,2);}
  .pv-root .pv-deals-more.pv-more-tile[data-odd="1"]{flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:14px;padding:24px 20px;}
  .pv-root .pv-more-tile[data-odd="1"] p{flex:none;}
  .pv-root .pv-more-tile[data-odd="1"] .pv-inv-cta{flex:none;}
}
@media(max-width:640px){.pv-root .pv-deals-more.pv-more-tile{grid-column:1/-1;}}

/* toolkit: 3 + 2 on tablets without an empty cell */
@media(min-width:641px) and (max-width:1000px){
  .pv-tools-grid{grid-template-columns:repeat(6,minmax(0,1fr));}
  .pv-tools-grid .pv-tool{grid-column:span 2;}
  .pv-tools-grid .pv-tool:nth-child(n+4){grid-column:span 3;}
}

/* 6 — live strip + rhythm */
.pv-root .pv-pulse{max-width:none;margin:0;}
.pv-root>.pv-pulse-sec{padding-top:6px;}
.pv-root>.pv-tools{padding-top:20px;}

/* 7 — quick-jump chips on phones: show that the row scrolls */
@media(max-width:640px){
  .hv2-jumps-row{scroll-snap-type:x proximity;padding-inline:2px 36px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);}
  .hv2-jump{scroll-snap-align:start;}
}
/* footer links stay on one tidy row on tablets */
@media(min-width:600px) and (max-width:1000px){
  body:has(.home-v2) footer.site .bh-f-main{grid-template-columns:minmax(0,1fr) auto;}
  body:has(.home-v2) footer.site .bh-f-links{grid-column:1/-1;grid-row:2;justify-content:flex-start;margin-inline:-12px;}
}

/* 8 — keyboard focus on tappable cards (the preview adds tabindex to them) */
.pv-root [data-pv-go]:focus-visible{outline:2px solid var(--gold-500,#CEA577);outline-offset:3px;}
.pv-root .area-card[data-pv-go]:focus-visible,.pv-root .t-item[data-pv-go]:focus-visible,.pv-root .pv-tool:focus-visible{border-radius:14px;}

/* ===== TOP SAVINGS (replaces "Most Requested") ===== */
.ts-live{display:inline-block;width:7px;height:7px;margin-inline-end:7px;border-radius:50%;background:#12a15b;vertical-align:1px;animation:tsPulse 1.8s infinite}
@keyframes tsPulse{0%{box-shadow:0 0 0 0 rgba(18,161,91,.55)}70%{box-shadow:0 0 0 7px rgba(18,161,91,0)}100%{box-shadow:0 0 0 0 rgba(18,161,91,0)}}
.ts-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ts-row{position:relative;overflow:hidden;display:grid;grid-template-columns:34px minmax(0,1fr) auto;grid-template-areas:"rk tx val" "rk save val";column-gap:12px;row-gap:2px;align-items:center;padding:12px 14px 14px;
  background:var(--surface,#fff);border:1px solid var(--line,#E3E7EC);border-radius:14px;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;animation:tsIn .5s ease both;animation-delay:calc(var(--i,0)*70ms)}
.ts-row:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(22,45,76,.10);border-color:#d3b98f}
@keyframes tsIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ts-rk{grid-area:rk;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-heading,inherit);font-weight:800;font-size:13px;color:#fff;background:#8b97a8}
.ts-gold .ts-rk{background:linear-gradient(145deg,#f3d58f,#c8923a);color:#4a3210;box-shadow:0 2px 8px rgba(200,146,58,.45)}
.ts-silver .ts-rk{background:linear-gradient(145deg,#eef1f5,#a9b3c1);color:#33404f}
.ts-bronze .ts-rk{background:linear-gradient(145deg,#e8b48a,#b4713f);color:#3f2210}
.ts-gold{background:linear-gradient(135deg,#fffaf0,var(--surface,#fff) 60%);border-color:#e6cf9f}
.ts-tx{grid-area:tx;min-width:0}
.ts-tx b{display:block;font-family:var(--font-heading,inherit);font-weight:800;font-size:13px;line-height:1.25;color:var(--ink,#162D4C);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ts-tx small{display:block;margin-top:2px;font-size:11px;color:var(--muted,#5F6B7A);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ts-save{grid-area:save;font-size:10.5px;font-weight:700;color:#0b7a43}
.ts-val{grid-area:val;display:grid;justify-items:end;gap:1px;text-align:end}
.ts-pct{font-style:normal;font-weight:800;font-size:12px;line-height:1;padding:5px 9px;border-radius:99px;background:#E4F6EC;color:#0b7a43;margin-bottom:3px}
.ts-gold .ts-pct{background:#162D4C;color:#CEA577}
.ts-val b{font:800 14px/1.1 var(--font-mono,ui-monospace,Menlo,monospace);color:var(--ink,#162D4C);white-space:nowrap}
.ts-val s{font-size:10.5px;color:var(--muted,#8A94A3)}
.ts-bar{position:absolute;inset-inline-start:0;bottom:0;height:3px;width:calc(var(--w,50)*1%);border-radius:0 3px 3px 0;background:linear-gradient(90deg,#CEA577,#12a15b);transform-origin:left;animation:tsGrow .9s .2s ease both}
@keyframes tsGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ts-row:focus-visible{outline:2px solid var(--gold-500,#CEA577);outline-offset:2px}
/* visitor preview: three podium cards side by side, full width */
.ts-wide .ts-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media(max-width:900px){.ts-wide .ts-list{grid-template-columns:minmax(0,1fr)}}
.ts-wide{padding-top:8px}
@media(prefers-reduced-motion:reduce){.ts-row,.ts-bar,.ts-live{animation:none}.ts-row{transition:none}}
