/* ============================================================
   HowfenConnect — area page v2.

   Deliberately small. hc-businesses-v2.css already provides .browse,
   .sec-head, .biz-grid, every .card rule, .bf-sort, .results-bar and
   .pagination-wrap, and this page loads it. Only the things that page
   does not have live here: category chips, the map and the closing band.

   hc-areas.css is NOT loaded alongside this — it was written against the
   old card markup and would fight these rules for no gain.
   ============================================================ */

/* ---------- category chips + sort ---------- */
.area2-chips{flex:1 1 auto;min-width:0;display:flex;gap:8px;flex-wrap:wrap;
  align-content:flex-start;padding-top:4px;margin:0 0 22px}

/* visible breadcrumb (the category page keeps one) */
.area2-crumbs{display:flex;justify-content:center;flex-wrap:wrap;gap:9px;
  margin:0 0 10px;font-size:.9rem;font-weight:600}
.area2-crumbs a{color:var(--ink);border-bottom:2px solid var(--accent)}
.area2-crumbs span{opacity:.45}
.area2-crumbs em{font-style:normal;opacity:.7}

.area2-chip{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;
  border:1px solid var(--line);border-radius:999px;background:#fff;
  font-size:.9rem;font-weight:600;color:var(--ink);white-space:nowrap}
.area2-chip b{font-weight:800;color:var(--accent-dark)}
.area2-chip:hover{border-color:var(--accent)}
.area2-chip.is-on{background:var(--accent);border-color:var(--accent);font-weight:800}
.area2-chip.is-on b{color:var(--ink)}

/* ---------- empty state ---------- */
.area2-empty{text-align:center;padding:56px 20px;border:1px dashed var(--line);
  border-radius:20px}
.area2-empty h3{margin:0 0 8px;font-size:1.3rem;font-weight:800;letter-spacing:-.025em}
.area2-empty p{margin:0 0 20px;font-size:1rem}

/* ---------- shared button ---------- */
.area2-cta{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 24px;
  border-radius:999px;background:var(--accent);color:var(--ink);
  font-size:.98rem;font-weight:800}
.area2-cta svg{width:16px;height:16px;flex:none;stroke:var(--ink);fill:none}
.area2-cta:hover{background:var(--ink);color:#fff}
.area2-cta:hover svg{stroke:#fff}
.area2-cta.is-ghost{background:none;border:2px solid var(--ink)}
.area2-cta.is-ghost:hover{background:var(--ink);color:#fff}

/* ---------- map ---------- */
.area2-map{margin-top:56px;border-radius:20px;overflow:hidden;border:1px solid var(--line)}
.area2-map iframe{display:block;width:100%;height:380px;border:0}

/* ---------- closing band ---------- */
.area2-band{margin-top:56px;padding:38px 40px;border-radius:24px;
  background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.area2-band h2{margin:0 0 6px;font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:800;
  letter-spacing:-.03em}
.area2-band p{margin:0;font-size:1rem;opacity:.82;max-width:48ch}
.area2-band-actions{display:flex;gap:12px;flex-wrap:wrap}
.area2-band .area2-cta.is-ghost{border-color:#fff;color:#fff}
.area2-band .area2-cta.is-ghost:hover{background:#fff;color:var(--ink)}
.area2-band .area2-cta.is-ghost:hover svg{stroke:var(--ink)}

/* The old .area2-filter block and its `.bf-sort{width:100%}` lived here. This
   file loads AFTER hc-businesses-v2.css, so that rule outranked the new
   `.bf-sort{width:54px}` on phones and stretched the sort control across the
   screen, squashing the search box. Both are gone: these pages use
   partials/filter-v2 now, which is styled entirely by hc-businesses-v2.css. */

@media (max-width:820px){
  /* chips scroll sideways rather than stacking into a wall of pills */
  /* the shorthand must keep the bottom margin — `margin:0 calc(...)` zeroed it
     and the tag chips ended up sitting right on top of the results */
  .area2-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -ms-overflow-style:none;margin:0 calc(50% - 50vw) 24px;padding:4px 20px 0;width:100vw}
  .area2-chips::-webkit-scrollbar{display:none}

  .area2-map{margin-top:48px}
  .area2-map iframe{height:260px}

  .area2-band{margin-top:48px;padding:28px 22px;text-align:center;
    justify-content:center}
  .area2-band-actions{width:100%;flex-direction:column}
  .area2-cta{justify-content:center;width:100%}
}