/* ============================================================
   JMC — BUSINESS DIRECTORY (front end)

   Loaded only on business profiles, the directory archive and the
   category/region term pages. Kept out of style.css so the 74KB every
   reader already downloads does not grow for pages most of them never visit.

   Inherits the theme's tokens from style.css (--pink, --charcoal, --serif …).
   Local fallbacks are declared so this file still renders correctly if it is
   ever loaded on its own.
============================================================ */
.biz-hero, .biz-arch-hero, .biz-reach, .biz-products, .biz-stories,
.biz-arch-grid, .biz-filters, .biz-arch-empty, .biz-back {
  --b-pink:   var(--pink,   #E91E8C);
  --b-pink-h: var(--pink-h, #C91778);
  --b-pale:   var(--pink-pale, #FDF2F8);
  --b-char:   var(--charcoal, #1A1A2E);
  --b-ink:    var(--dark,  #0F0F0F);
  --b-gray:   var(--gray,  #6B7280);
  --b-line:   rgba(0,0,0,.09);
  --b-serif:  var(--serif, 'Playfair Display', Georgia, serif);
  --b-sans:   var(--sans,  'DM Sans', system-ui, sans-serif);
}

/* ── Profile hero ─────────────────────────────────────────── */
.biz-hero__meta{
  display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; margin-top:16px;
}
.biz-meta{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--b-sans); font-size:.86rem; color:var(--b-gray);
}
.biz-verified{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--b-sans); font-size:.78rem; font-weight:700;
  letter-spacing:.3px; text-transform:uppercase;
  color:#0E8F63; background:#E7F6F0; border:1px solid #BFE6D6;
  padding:4px 11px; border-radius:999px; cursor:help;
}

/* ── Tagline ──────────────────────────────────────────────── */
.biz-tagline{
  font-family:var(--b-serif); font-size:1.32rem; line-height:1.5;
  color:var(--b-ink); margin:0 0 26px; padding-bottom:22px;
  border-bottom:1px solid var(--b-line);
}

/* ── What they do ─────────────────────────────────────────── */
.biz-what{ margin:40px 0; }
.biz-what h2{
  font-family:var(--b-serif); font-size:1.45rem; margin:0 0 20px; color:var(--b-ink);
}
.biz-what__cols{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:28px;
}
.biz-what__col h3{
  font-family:var(--b-sans); font-size:.72rem; font-weight:700;
  letter-spacing:.9px; text-transform:uppercase; color:var(--b-gray);
  margin:0 0 12px;
}
.biz-what__h2nd{ margin-top:22px !important; }
.biz-what__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.biz-what__list li{
  display:flex; align-items:flex-start; gap:9px;
  font-family:var(--b-sans); font-size:.95rem; line-height:1.5; color:var(--b-ink);
}
.biz-what__list li svg{ color:var(--b-pink); margin-top:3px; }
.biz-what__list--plain li{ color:var(--b-gray); }
.biz-what__serves{ margin:0; font-size:.95rem; line-height:1.5; color:var(--b-gray); }

/* ── Reach block ──────────────────────────────────────────── */
.biz-reach{
  margin:44px 0; padding:28px; border-radius:20px;
  background:var(--b-pale); border:1px solid rgba(233,30,140,.16);
}
.biz-reach h2{
  font-family:var(--b-serif); font-size:1.45rem; margin:0 0 6px; color:var(--b-ink);
}
.biz-reach__note{ margin:0 0 18px; font-size:.86rem; color:var(--b-gray); }
.biz-reach__row{ display:flex; flex-wrap:wrap; gap:10px; }

.biz-cta{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--b-sans); font-size:.92rem; font-weight:600; text-decoration:none;
  padding:11px 18px; border-radius:12px;
  background:#fff; color:var(--b-ink); border:1px solid var(--b-line);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.biz-cta:hover{
  transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.08); color:var(--b-ink);
}
.biz-cta:focus-visible{ outline:2px solid var(--b-pink); outline-offset:2px; }
.biz-cta--primary{
  background:var(--b-pink); color:#fff; border-color:var(--b-pink);
  box-shadow:0 6px 20px rgba(233,30,140,.24);
}
.biz-cta--primary:hover{ background:var(--b-pink-h); color:#fff; }

/* ── Products (only once Woo products point at a business) ── */
.biz-products{ margin:44px 0; }
.biz-products h2, .biz-stories h2{
  font-family:var(--b-serif); font-size:1.45rem; margin:0 0 18px; color:var(--b-ink);
}
.biz-prod-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:16px; }
.biz-prod{ text-decoration:none; color:var(--b-ink); display:flex; flex-direction:column; gap:8px; }
.biz-prod__img{
  aspect-ratio:1/1; border-radius:14px; background:var(--b-pale);
  background-size:cover; background-position:center;
  transition:transform .2s ease;
}
.biz-prod:hover .biz-prod__img{ transform:scale(1.02); }
.biz-prod__name{ font-family:var(--b-sans); font-size:.9rem; font-weight:600; line-height:1.35; }
.biz-prod__price{ font-size:.86rem; color:var(--b-pink); font-weight:700; }

/* ── Coverage list ────────────────────────────────────────── */
.biz-stories{ margin:44px 0; }
.biz-stories__list{ display:flex; flex-direction:column; gap:12px; }
.biz-story{
  display:flex; gap:14px; align-items:center; text-decoration:none;
  padding:12px; border:1px solid var(--b-line); border-radius:14px; background:#fff;
  transition:border-color .18s ease, transform .18s ease;
}
.biz-story:hover{ border-color:var(--b-pink); transform:translateX(3px); }
.biz-story__img{
  width:72px; height:56px; flex:0 0 72px; border-radius:10px;
  background:var(--b-pale); background-size:cover; background-position:center;
}
.biz-story__txt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.biz-story__title{
  font-family:var(--b-sans); font-size:.95rem; font-weight:600;
  color:var(--b-ink); line-height:1.35;
}
.biz-story__meta{ font-size:.78rem; color:var(--b-gray); }

.biz-back{ margin:40px 0 10px; }
.biz-back a{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--b-sans); font-weight:600; font-size:.92rem;
  color:var(--b-pink); text-decoration:none;
}
.biz-back a:hover{ text-decoration:underline; }

/* ── Directory archive ────────────────────────────────────── */
.biz-arch-hero{
  background:var(--b-char); color:#fff; padding:56px 0 44px; text-align:center;
}
.biz-arch-hero h1{
  font-family:var(--b-serif); font-size:clamp(1.9rem,4vw,2.8rem);
  margin:14px 0 10px; color:#fff; line-height:1.15;
}
.biz-arch-hero__sub{
  max-width:620px; margin:0 auto; font-size:1rem; line-height:1.6;
  color:rgba(255,255,255,.72);
}

.biz-filters{ border-bottom:1px solid var(--b-line); background:#fff; position:sticky; top:0; z-index:5; }
.biz-filters__row{
  display:flex; gap:8px; padding:14px 0; overflow-x:auto; scrollbar-width:thin;
}
.biz-filters__row--sub{ padding-top:0; padding-bottom:14px; }
.biz-filters__row::-webkit-scrollbar{ height:3px; }
.biz-filters__row::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.16); border-radius:3px; }
.biz-filter{
  flex:0 0 auto; font-family:var(--b-sans); font-size:.85rem; font-weight:600;
  text-decoration:none; color:var(--b-gray);
  padding:8px 15px; border:1px solid var(--b-line); border-radius:999px;
  transition:color .16s ease, border-color .16s ease;
}
.biz-filter:hover{ color:var(--b-pink); border-color:var(--b-pink); }
.biz-filter:focus-visible{ outline:2px solid var(--b-pink); outline-offset:2px; }
.biz-filter.is-on{ background:var(--b-pink); border-color:var(--b-pink); color:#fff; }
.biz-filter--sm{ font-size:.78rem; padding:6px 13px; }

.biz-arch-body{ padding:36px 0 64px; }
.biz-arch-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:22px;
}
.biz-tile{
  display:flex; flex-direction:column; text-decoration:none; color:var(--b-ink);
  border:1px solid var(--b-line); border-radius:18px; overflow:hidden; background:#fff;
  transition:transform .2s ease, box-shadow .2s ease;
}
.biz-tile:hover{ transform:translateY(-4px); box-shadow:0 14px 34px rgba(0,0,0,.10); }
.biz-tile:focus-visible{ outline:2px solid var(--b-pink); outline-offset:3px; }
.biz-tile__img{
  aspect-ratio:16/10; background:var(--b-pale); background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center; color:var(--b-pink);
}
.biz-tile__body{ padding:16px 18px 20px; display:flex; flex-direction:column; gap:7px; }
.biz-tile__cat{
  font-size:.68rem; font-weight:700; letter-spacing:.7px; text-transform:uppercase;
  color:var(--b-pink);
}
.biz-tile__name{
  font-family:var(--b-serif); font-size:1.18rem; font-weight:700; line-height:1.25;
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
}
.biz-tile__tick{ color:#0E8F63; display:inline-flex; }
.biz-tile__where{
  display:flex; align-items:center; gap:5px; font-size:.8rem; color:var(--b-gray);
}
.biz-tile__blurb{ font-size:.88rem; line-height:1.55; color:var(--b-gray); }

.biz-arch-empty{
  text-align:center; padding:70px 20px; color:var(--b-gray);
}
.biz-arch-empty h2{ font-family:var(--b-serif); font-size:1.6rem; color:var(--b-ink); margin:16px 0 8px; }
.biz-arch-empty p{ margin:0 0 22px; }

@media (max-width:640px){
  .biz-reach{ padding:20px; }
  .biz-arch-hero{ padding:40px 0 32px; }
  .biz-filters{ position:static; }
}
@media (prefers-reduced-motion:reduce){
  .biz-cta, .biz-tile, .biz-story, .biz-prod__img{ transition:none; }
  .biz-cta:hover, .biz-tile:hover, .biz-story:hover{ transform:none; }
  .biz-prod:hover .biz-prod__img{ transform:none; }
}