/* v773 - HOME POLISH. Presentation only, scoped to Home. Loads after css/369 + css/370.
   Review findings (measured in a real browser at 1920 / 1440 / 1024 / 768 / 390 px):
   1. STRETCHED: v771 raised the Home cap from 1500px to 2200px, so on a 1920px screen the logo sat on the far-left edge,
      KPI cards were ~450px wide and the area cards ~900px wide. Home now has its own cap (--hv-max, css/369) and the
      header + footer follow it on Home only, so logo, content and footer share the same two edges.
   2. UNEVEN: "Browse by Area" mixed 2 big cards (927px) with 3 smaller ones (615px) and different heights.
      Now five equal cards (one row on desktop; 3 + 2 centred on iPad), the same height and type size.
   3. Top Savings: the unit title was cut ("ARRS01-B00-F01-...") in the narrow column. The columns are rebalanced
      (Hot Deals 1.6 : Top Savings 1) and the title may wrap to two lines instead of being cut.
   4. PHONE: Hot Deals / Top Savings headings were pushed to the RIGHT edge (css/370 align-items:flex-end inside a column).
      Now title left, "View all" right, one line.
   Roll back: remove the <link> to this file and restore css/369 (--hv-max:var(--bh-page-max)). */

/* ---------- 1. one calm width for Home; header + footer follow it on Home only ---------- */
html body:has(.home-v2) .header-inner{max-width:var(--hv-max)}
html body:has(.home-v2) footer.site .bh-f-inner,
html body:has(.home-v2) footer.site .bh-f-art,
html body:has(.home-v2) footer.site .footer-compact,
html body:has(.home-v2) footer.site .footer-bottom{max-width:var(--hv-max)}
.home-v2 .hero-inner,.home-v2 .hv2-hero-inner{max-width:var(--hv-max)}

/* the search pill is the main action of the page: a little more presence, still centred */
@media (min-width:861px){
  .home-v2 .hero-search-hint{min-width:min(480px,100%);min-height:48px;justify-content:center;box-shadow:0 6px 22px rgba(22,45,76,.08)}
}

/* ---------- 2. Browse by Area: equal cards (iPad + desktop; phones <=640px keep their own 1 + 2x2 layout) ---------- */
@media (min-width:641px){
  .home-v2 .ha-grid{gap:14px}
  .home-v2 .ha-grid .ha-card,
  .home-v2 .ha-grid .ha-card.ha-lg{grid-column:auto;min-height:236px;border-radius:20px}
  .home-v2 .ha-grid .ha-body{padding:0 16px 16px;gap:10px}
  .home-v2 .ha-grid .ha-body h3,
  .home-v2 .ha-grid .ha-lg .ha-body h3{font-size:clamp(24px,2vw,30px)}
  .home-v2 .ha-grid .ha-stats li b,
  .home-v2 .ha-grid .ha-lg .ha-stats li b{font-size:17px}
  .home-v2 .ha-grid .ha-go{width:36px;height:36px}
  /* two stats on narrower cards so no label is ever cut (same rule the phone already uses) */
  .home-v2 .ha-grid .ha-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-v2 .ha-grid .ha-stats li:nth-child(2){display:none}
  .home-v2 .ha-grid .ha-price small{display:none}
}
@media (min-width:1101px){
  .home-v2 .ha-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (min-width:1341px){
  /* the middle label (BUILDINGS) is the longest - give it more room so nothing is ever cut */
  .home-v2 .ha-grid .ha-stats{grid-template-columns:minmax(0,1fr) minmax(0,1.32fr) minmax(0,1fr);gap:7px}
  .home-v2 .ha-grid .ha-stats li{padding:8px 8px}
  .home-v2 .ha-grid .ha-stats li span{font-size:9.5px;letter-spacing:.05em}
  .home-v2 .ha-grid .ha-stats li:nth-child(2){display:grid}
  .home-v2 .ha-grid .ha-price small{display:inline}
}
/* iPad: three per row, the last row centred, every card the same width */
@media (min-width:641px) and (max-width:1100px){
  .home-v2 .ha-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
  .home-v2 .ha-grid .ha-card,
  .home-v2 .ha-grid .ha-card.ha-lg{flex:0 0 calc((100% - 24px)/3);min-width:0}
}
@media (min-width:641px) and (max-width:860px){
  .home-v2 .ha-grid .ha-card,
  .home-v2 .ha-grid .ha-card.ha-lg{min-height:212px}
  .home-v2 .ha-grid .ha-body{padding:0 12px 14px}
  .home-v2 .ha-grid .ha-price b{font-size:14px}
  .home-v2 .ha-grid .ha-go{width:32px;height:32px}
  .home-v2 .ha-grid .ha-top{left:12px;right:12px}
}

/* ---------- 3. Hot Deals | Top Savings: better balance, titles may wrap ---------- */
@media (min-width:1201px){
  .home-v2 .hv2-duo{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
}
.home-v2 .hv2-col-rank .ts-tx{min-width:0}
.home-v2 .hv2-col-rank .ts-tx>b{white-space:normal;overflow:visible;text-overflow:clip;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow-wrap:anywhere;line-height:1.25}

@media (max-width:420px){
  .home-v2 .hv2-col-rank .ts-tx>b{-webkit-line-clamp:3;line-clamp:3}
}

/* ---------- 4. phones: section heads on one line, title left / link right ---------- */
@media (max-width:640px){
  .home-v2 .hv2-duo .section-head{flex-direction:row;flex-wrap:nowrap;align-items:flex-end;justify-content:space-between;min-height:0;gap:10px}
  .home-v2 .hv2-duo .section-head>div:first-child{min-width:0;text-align:left}
  .home-v2 .hv2-duo .link-more{flex:none}
}