/* ══ 407Goods directory ══════════════════════════════════════════════════
   Builds on the tokens in /styles.css. */

/* ── Hero ─────────────────────────────────────────────────────────────── */
.gd-hero{background:linear-gradient(180deg,#FFF7EE 0%,#fff 100%); border-bottom:1px solid var(--line); padding:44px 0 40px}
.gd-hero-inner{display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap}
.gd-lockup{height:72px; width:auto; margin-bottom:18px}
.gd-hero h1{font-size:clamp(34px,5vw,52px); font-weight:800; color:var(--navy); letter-spacing:-.035em}
.gd-intro{color:var(--body); font-size:17px; line-height:1.7; max-width:60ch; margin-top:14px}
.gd-stats{display:flex; gap:12px; margin:0}
.gd-stats div{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px 22px; min-width:150px; box-shadow:var(--shadow)}
.gd-stats dt{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.gd-stats dd{margin:2px 0 0; font-size:34px; font-weight:800; color:var(--orange); letter-spacing:-.03em; line-height:1.1}

/* ── Search + neighbourhood chips (shown only once goods.js runs) ──────── */
.gd-tools{position:sticky; top:76px; z-index:20; background:rgba(255,255,255,.96); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line); padding:14px 0}
.gd-tools .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px}
.gd-search{position:relative; flex:0 1 340px}
.gd-search svg{position:absolute; left:13px; top:50%; width:17px; height:17px; transform:translateY(-50%);
  fill:none; stroke:var(--muted); stroke-width:2; stroke-linecap:round}
.gd-search input{width:100%; font:inherit; font-size:14.5px; padding:11px 14px 11px 38px; border:1px solid #C9D6E8;
  border-radius:999px; background:#fff; color:var(--ink)}
.gd-search input:focus{outline:3px solid rgba(31,95,204,.25); border-color:var(--blue)}
.chips{display:flex; gap:8px; overflow-x:auto; flex:1 1 400px; padding:2px; scrollbar-width:thin}
.chip{font:inherit; font-size:13px; font-weight:600; white-space:nowrap; cursor:pointer;
  padding:7px 13px; border-radius:999px; border:1px solid #D5DFEC; background:#fff; color:#41506A; transition:.15s}
.chip span{color:var(--muted); font-weight:500; margin-left:2px}
.chip:hover{border-color:var(--orange); color:var(--orange-d)}
.chip.is-on{background:var(--navy); border-color:var(--navy); color:#fff}
.chip.is-on span{color:#BFD4EA}
.gd-count{font-size:13px; color:var(--muted); flex-basis:100%; margin-top:-2px}

/* ── Neighbourhood sections ───────────────────────────────────────────── */
.gd-directory{padding-top:12px; padding-bottom:64px}
.hood{padding-top:40px; scroll-margin-top:170px}
.hood-head{display:flex; align-items:baseline; gap:14px; border-bottom:2px solid var(--orange); padding-bottom:10px; margin-bottom:22px}
.hood-head h2{font-size:clamp(21px,2.4vw,26px); font-weight:800; color:var(--navy)}
.hood-head p{font-size:13.5px; color:var(--muted)}
.gd-empty{padding:60px 0; text-align:center; color:var(--body)}

/* ── Business cards ───────────────────────────────────────────────────── */
.biz-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px; align-items:start}
.biz{background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); display:flex; flex-direction:column; scroll-margin-top:170px}
.biz:target{outline:3px solid var(--orange); outline-offset:2px}
.biz-media{aspect-ratio:4/3; background:#EEF2F8; overflow:hidden}
/* height:auto lets aspect-ratio + object-fit win over the img height attribute. */
.biz-media img{width:100%; height:100%; object-fit:cover}
.biz-media.is-placeholder{display:grid; place-items:center;
  background:linear-gradient(135deg,#FFE2C2 0%,#FFC58A 45%,#9CC3E6 100%)}
.biz-media.is-placeholder span{font-size:44px; font-weight:800; color:rgba(0,51,90,.55); letter-spacing:-.04em}
.biz-body{padding:18px 20px 20px; display:flex; flex-direction:column; gap:8px; flex:1}
.biz-meta{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--orange-d)}
.biz h3{font-size:20px; font-weight:800; color:var(--ink)}
.biz-owner{font-size:13.5px; color:var(--body); font-weight:500}
.biz-tags{display:flex; flex-wrap:wrap; gap:6px}
.biz-tags li{font-size:12px; font-weight:600; color:var(--navy); background:#EAF2FB; border-radius:999px; padding:3px 10px}
.biz-lede{font-size:14.5px; color:var(--body); line-height:1.65}

.biz-more summary{cursor:pointer; font-size:13.5px; font-weight:700; color:var(--navy); list-style:none; display:inline-flex; align-items:center; gap:6px}
.biz-more summary::-webkit-details-marker{display:none}
.biz-more summary::after{content:"+"; font-size:16px; line-height:1; color:var(--orange)}
.biz-more[open] summary::after{content:"\2013"}
.biz-more summary:hover{color:var(--orange-d)}
.biz-more p{font-size:14.5px; color:var(--body); line-height:1.7; margin-top:10px}
.biz-community{background:#F6F9FE; border:1px solid #E2EAF7; border-radius:10px; padding:10px 12px}
.biz-community b{display:block; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); margin-bottom:2px}
.biz-gallery{display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:12px}
.biz-gallery img{width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; border-radius:10px; background:#EEF2F8}

.biz-addr{font-size:13px; color:var(--muted); margin-top:auto; padding-top:6px}
.biz-links{display:flex; flex-wrap:wrap; gap:6px; padding-top:4px}
.biz-links a{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--navy);
  border:1px solid #D5DFEC; border-radius:8px; padding:6px 10px; transition:.15s}
.biz-links a:hover{border-color:var(--orange); color:var(--orange-d); background:#FFF8F0}
.biz-links svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}

/* ── Call to action ───────────────────────────────────────────────────── */
.gd-cta-inner{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap}
.gd-cta h2{font-size:clamp(22px,2.6vw,28px); font-weight:800; color:var(--navy)}
.gd-cta p{color:var(--body); margin-top:6px; max-width:58ch}

@media (max-width:640px){
  .gd-hero{padding:32px 0 28px}
  .gd-stats{width:100%}
  .gd-stats div{flex:1; min-width:0; padding:12px 16px}
  .gd-stats dd{font-size:28px}
  .gd-search{flex-basis:100%}
  .chips{flex-wrap:nowrap; margin:0 -24px; padding:2px 24px}
  .biz-grid{grid-template-columns:1fr}
  .hood,.biz{scroll-margin-top:150px}
}