/* The Google local pack as a working device. See widgets/class-bhp-mappack.php.
   Built to the standard of the SERP device already on this page: Google's own chrome and its
   own type colours (#202124 ink, #70757a grey, #1a0dab link, #d93025 red), and a real map. */

.mp{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:clamp(20px,2.4vw,34px);align-items:start;width:100%;
  font-family:Roboto,Arial,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}

/* ---------- Google's chrome ---------- */
.mp-pane{background:#fff;border:1px solid #dadce0;border-radius:14px;
  box-shadow:0 20px 52px rgba(17,29,58,.12);overflow:hidden;min-width:0;
  container-type:inline-size;container-name:mppane}
.mp-gbar{display:flex;align-items:center;gap:18px;padding:14px 20px 10px}
.mp-glogo{font:700 22px/1 "Product Sans",Roboto,Arial,sans-serif;letter-spacing:-.5px;flex:none}
.mp-glogo b{font-weight:700}
.mp-field{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:11px;
  height:40px;padding:0 16px;border:1px solid #dfe1e5;border-radius:999px;
  box-shadow:0 1px 4px rgba(32,33,36,.12)}
.mp-mag{width:17px;height:17px;flex:none;fill:none;stroke:#9aa0a6;stroke-width:2.2;
  stroke-linecap:round}
.mp-q{font-size:15px;color:#202124;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.mp-tabs{display:flex;gap:26px;padding:0 20px;border-bottom:1px solid #ebebeb}
.mp-tabs span{font-size:13.5px;color:#5f6368;padding:0 0 11px;border-bottom:3px solid transparent}
.mp-tabs span.on{color:#1a73e8;border-bottom-color:#1a73e8;font-weight:500}
.mp-count{margin:12px 20px 10px;font-size:12.5px;color:#70757a}

/* ---------- the real map ----------
   A genuine Google Maps embed, the same maps?q=...&output=embed URL the SERP device's map tab
   already uses, which needs no API key. It is given a src only when scrolled to. */
/* Client 2026-09-28: the device ran too tall stacked, so the listings and the map sit beside
   each other. The map stretches to the listings' height rather than keeping an aspect ratio. */
/* stacked by default, map first; side by side only once the PANE itself is wide enough to
   carry two columns. A viewport query cannot answer this: at 1512 the pane is 598px inside a
   50/50 column, and the side-by-side body clipped the third listing there. */
.mp-body{display:grid;grid-template-columns:minmax(0,1fr);
  gap:0;align-items:stretch;margin:0 20px;border:1px solid #dadce0;border-radius:10px;
  overflow:hidden}

.mp-map{position:relative;background:#e8eaed;order:1;
  border-bottom:1px solid #dadce0;aspect-ratio:16/8}
.mp-map iframe{display:block;width:100%;height:100%;border:0;filter:saturate(.92)}
.mp-pin{position:absolute;width:26px;height:34px;transform:translate(-50%,-100%);
  transition:transform .2s;pointer-events:none;z-index:2}
.mp-pin svg{width:100%;height:100%;fill:#d93025;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.mp-pin b{position:absolute;left:0;right:0;top:5px;text-align:center;color:#fff;
  font-size:12px;font-weight:600}
.mp-pin.on{transform:translate(-50%,-100%) scale(1.25)}
.mp-pin.on svg{fill:var(--bhp-gold,#FFB000)}
.mp-pin.on b{color:#202124}
.mp-pin--1{left:46%;top:44%}
.mp-pin--2{left:68%;top:62%}
.mp-pin--3{left:33%;top:70%}

/* ---------- the listings, as Google draws them ---------- */
.mp-list{display:flex!important;flex-direction:column!important;gap:0;
  padding:6px;min-width:0;order:2}
.mp-list>.mp-card+.mp-card{border-top:1px solid #ebebeb}
.mp-list>.mp-card.on+.mp-card,
.mp-list>.mp-card:has(+.mp-card.on){border-top-color:transparent}
.mp-card{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;cursor:pointer;
  padding:12px;margin:0;border:1px solid transparent;border-radius:10px;background:none;
  font:inherit;transition:background .16s,border-color .16s}
.mp-card:hover{background:#f8f9fa}
.mp-card.on{background:rgba(255,176,0,.10);border-color:rgba(255,176,0,.5)}
.mp-card:focus-visible{outline:2px solid #1a73e8;outline-offset:2px}

.mp-row1{display:flex;align-items:center;gap:9px;min-width:0}
.mp-rank{flex:none;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;
  font-size:11.5px;font-weight:600;color:#fff;background:#d93025;transition:background .18s}
.mp-card.on .mp-rank{background:var(--bhp-gold,#FFB000);color:#202124}
.mp-name{font-size:16px;font-weight:500;color:#1a0dab;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-you{flex:none;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:#8A6200;background:rgba(255,176,0,.22);border-radius:4px;padding:2px 6px}

.mp-row2,.mp-row3{display:flex;align-items:center;flex-wrap:wrap;gap:6px;
  font-size:13px;color:#70757a;min-width:0}
.mp-rate{display:inline-flex;align-items:center;gap:5px;color:#202124;border-radius:4px}
.mp-stars{display:inline-flex;gap:1px}
.mp-star{width:13px;height:13px;fill:#dadce0}
.mp-star.on{fill:#fbbc04}
.mp-rate small{color:#70757a}
.mp-cat{border-radius:4px}
.mp-open{color:#188038}
.mp-dotsep{font-style:normal;color:#bdc1c6}
.mp-shots{display:flex;gap:4px;margin:6px 0 2px;border-radius:5px}
.mp-shots i{width:34px;height:24px;border-radius:4px;
  background:linear-gradient(135deg,#e3e7ee,#ccd4e0)}
.mp-fresh{font-size:12.5px;color:#70757a;border-radius:4px}
.mp-acts{display:flex;gap:7px;margin-top:9px;flex-wrap:wrap}
.mp-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:999px;
  border:1px solid #dadce0;font-size:12.5px;font-weight:500;color:#1a73e8;background:#fff}
.mp-btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.mp-card.on .mp-btn--call{background:#1a73e8;border-color:#1a73e8;color:#fff}

.mp-foot{margin:0;padding:11px 20px 14px;font-size:11.5px;color:#9aa0a6;
  border-top:1px solid #ebebeb}

/* ---------- the five signals, as pills ----------
   Client 2026-09-28: "make as a pill, and in some interval it will highlight automatically."
   One pill lights at a time on a 2.4s cycle, and the caption under them follows it. Hovering
   takes over, clicking stops the cycle for good, and it never runs off screen or under
   prefers-reduced-motion. */
.mp-side{min-width:0}
.mp-sidek{margin:0 0 12px;font:600 11px/1.4 var(--bhp-body,Geist),system-ui,sans-serif;
  letter-spacing:.14em;text-transform:uppercase;color:var(--bhp-gold-deep,#8A6200)}
.mp-sig{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.mp-pill{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  padding:9px 15px;border:1px solid var(--bhp-line,#E6E0D2);border-radius:999px;background:#fff;
  font:500 14px/1 var(--bhp-body,Geist),system-ui,sans-serif;color:var(--bhp-navy,#171D3A);
  transition:border-color .22s,background .22s,color .22s,box-shadow .22s}
.mp-dot{flex:none;width:8px;height:8px;border-radius:50%;background:#D8DCE4;
  transition:background .22s,transform .22s}
.mp-pill:hover,.mp-pill:focus-visible{border-color:rgba(255,176,0,.65);outline:none}
.mp-pill.on{background:rgba(255,176,0,.14);border-color:var(--bhp-gold,#FFB000);
  color:var(--bhp-navy,#171D3A);box-shadow:0 2px 10px rgba(255,176,0,.22)}
.mp-pill.on .mp-dot{background:var(--bhp-gold,#FFB000);transform:scale(1.25)}
.mp-signote{margin:14px 0 0;min-height:2.6em;font-size:14px;line-height:1.55;color:#6B7590;
  max-width:36ch}

/* ---------- a signal lights the part of the listing it drives ---------- */
.mp[data-lit="reviews"]   .mp-rate,
.mp[data-lit="category"]  .mp-cat,
.mp[data-lit="photos"]    .mp-shots,
.mp[data-lit="cadence"]   .mp-fresh{box-shadow:0 0 0 4px rgba(255,176,0,.26);
  background:rgba(255,176,0,.2)}
.mp[data-lit="proximity"] .mp-map{box-shadow:inset 0 0 0 3px rgba(255,176,0,.65)}
.mp[data-lit="proximity"] .mp-pin{transform:translate(-50%,-100%) scale(1.2)}
.mp[data-lit="proximity"] .mp-rank{background:var(--bhp-gold,#FFB000);color:#202124}

/* ---------- beside the page copy ----------
   Client 2026-09-28: the device "should come side of this content, not below it", and still be
   full width. The row is full width, the copy takes the left column and the device the right,
   and in that narrower column the signals sit under the pack instead of beside it. */
.mp.mp--col{grid-template-columns:minmax(0,1fr);gap:16px}
.mp.mp--col .mp-signote{max-width:none}
@media (max-width:1024px){ .mp{grid-template-columns:minmax(0,1fr)} }
@media (max-width:520px){
  .mp-gbar{gap:12px;padding:12px 14px 8px}
  .mp-glogo{font-size:19px}
  .mp-tabs{gap:18px;padding:0 14px;overflow-x:auto}
  .mp-count,.mp-foot{margin-left:14px;margin-right:14px}
  .mp-map{margin:0 14px;aspect-ratio:4/3}
  .mp-name{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  .mp-card,.mp-pin,.mp-sigbtn,.mp-rank{transition:none}
  .mp-sigbtn:hover{transform:none}
}

/* ---------- Hello Elementor's bare <button> reset ----------
   Hello styles a naked <button> magenta, rgb(204,51,102), and its stylesheet loads AFTER ours,
   so it wins on every button in this device. The same trap bit the index selector on the PPC
   page; see the note in bhp-csp.css. Every declaration Hello's reset can reach is stated here
   explicitly and scoped through body. */
body .mp .mp-card,
body .mp .mp-pill,
body .mp .mp-sigbtn{-webkit-appearance:none;appearance:none;box-shadow:none;
  border-style:solid;border-width:1px;color:inherit;text-transform:none;letter-spacing:normal;
  text-align:left;align-items:flex-start}
body .mp .mp-card>*{text-align:left}
body .mp .mp-card{border-color:transparent;background-color:transparent}
body .mp .mp-card:hover{border-color:transparent;background-color:#f8f9fa}
body .mp .mp-card.on{border-color:rgba(255,176,0,.5);background-color:rgba(255,176,0,.10)}
body .mp .mp-pill{border-color:var(--bhp-line,#E6E0D2);background-color:#fff;
  text-align:left;align-items:center}
body .mp .mp-pill.on{border-color:var(--bhp-gold,#FFB000);
  background-color:rgba(255,176,0,.14)}



/* ---------- the two-up body ----------
   Appended last on purpose: the base .mp-map and .mp-list rules come later in this file than
   the .mp-body rule, so a container block placed up there lost the `order` to them and the map
   stayed on the left. Same specificity, so source order decides.

   540px is the point at which a listing still reads in the left half: at a 598px pane, which is
   what a 50/50 column gives at 1512, the body is 558 and each half about 275. */
@container mppane (min-width: 540px){
  .mp-body{grid-template-columns:minmax(0,1.04fr) minmax(0,1fr)}
  /* the list sets the height and the map stretches to it: a max-height here just clipped the
     third listing behind a scrollbar nobody could see */
  .mp-map{order:2;border-left:1px solid #dadce0;border-bottom:0;aspect-ratio:auto;height:100%}
  .mp-list{order:1;max-height:none;overflow:visible}
}
/* tighter listing furniture while the pane is narrow, so three listings still fit the half */
@container mppane (max-width: 820px){
  .mp-list{padding:4px}
  .mp-card{padding:9px 10px;gap:2px}
  .mp-name{font-size:15px}
  .mp-row2,.mp-row3{font-size:12.5px;gap:5px}
  .mp-shots i{width:28px;height:20px}
  .mp-fresh{font-size:11.5px}
  .mp-acts{gap:5px;margin-top:7px}
  .mp-btn{padding:5px 10px;font-size:11.5px;gap:5px}
  .mp-btn svg{width:12px;height:12px}
}


/* ---------- the device split across two columns ----------
   Client 2026-09-28: the pills move out from under the pack into the copy column. Each half is
   its own [data-mp] root, so neither should impose the two-column grid the whole device used. */
.mp.mp--pack,.mp.mp--signals{display:block;gap:0}
.mp.mp--signals .mp-sidek{margin-top:0}
.mp.mp--signals .mp-signote{max-width:44ch}