/* ============================================================
   Attraction Browser — docked split view (list + persistent map)
   Scope: everything lives under .hgab. Mobile-first: full-width
   list with a Map FAB that opens a fullscreen map overlay; at
   >=1024px the map docks as a sticky 45% column beside the list.
   Fonts are px on purpose (site root is 62.5% => rem is unsafe).
   ============================================================ */

.hgab{
  --hgab-accent:#1D9771;
  margin:10px 0 25px;
  box-sizing:border-box;
}
.hgab *,
.hgab *:before,
.hgab *:after{box-sizing:border-box;}

.hgab-head{margin:0 0 12px;}
.hgab-title{margin:0 0 6px;font-size:26px;line-height:1.25;}
.hgab-sub{margin:0;font-size:16px;color:#555;line-height:1.45;}

/* ── Filter chips ──────────────────────────────────────────── */
.hgab-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:14px 0 14px;
}
.hgab-chips:empty{margin:0;}
.hgab-chip{
  -webkit-appearance:none;
  appearance:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1.5px solid #d4d9d6;
  background:#fff;
  color:#333;
  border-radius:999px;
  padding:7px 14px;
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  line-height:1.2;
  cursor:pointer;
  transition:background .12s ease,border-color .12s ease,color .12s ease;
}
.hgab-chip:hover{border-color:var(--hgab-accent);color:var(--hgab-accent);}
.hgab-chip:focus-visible{outline:2px solid var(--hgab-accent);outline-offset:2px;}
.hgab-chip.is-on{
  background:var(--hgab-accent);
  border-color:var(--hgab-accent);
  color:#fff;
}
.hgab-chip .hgab-chip-n{font-weight:400;font-size:13px;opacity:.75;}
.hgab-chip-sep{
  flex:0 0 1px;
  align-self:stretch;
  background:#dfe3e0;
  margin:2px 4px;
}

.hgab-count{margin:0 0 10px;font-size:14px;color:#777;}

/* ── Split layout ──────────────────────────────────────────── */
.hgab-split{display:block;}
.hgab-list{min-width:0;}

/* ── Cards ─────────────────────────────────────────────────── */
.hgab-card{
  display:flex;
  gap:14px;
  background:#fff;
  border:1px solid #e3e7e4;
  border-radius:14px;
  overflow:hidden;
  margin:0 0 12px;
  transition:box-shadow .15s ease,border-color .15s ease,transform .15s ease;
}
.hgab-card.hgab-hidden{display:none;}
.hgab-card:hover,
.hgab-card.is-hot{
  border-color:var(--hgab-accent);
  box-shadow:0 4px 16px rgba(0,0,0,.10);
}
.hgab-card.is-active{border-color:var(--hgab-accent);}
@keyframes hgabFlash{
  0%{box-shadow:0 0 0 3px var(--hgab-accent);}
  100%{box-shadow:0 0 0 3px rgba(0,0,0,0);}
}
.hgab-card.is-flash{animation:hgabFlash 1.1s ease-out;}

/* Thumb — fixed-ratio block, flat corners (the card clips its own radius);
   reset the global img{border-radius:10px} from 04-08-25-v1.css locally. */
.hgab-thumb{
  position:relative;
  flex:0 0 112px;
  min-height:112px;
  overflow:hidden;
  background:#e8eee8;
  display:block;
}
.hgab-thumb img{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  object-fit:cover;
  border-radius:0;
  display:block;
}
.hgab-num{
  position:absolute;
  top:6px;left:6px;
  min-width:24px;height:24px;
  padding:0 4px;
  border-radius:999px;
  background:var(--hgab-accent);
  color:#fff;
  font-size:13px;
  font-weight:700;
  line-height:24px;
  text-align:center;
  box-shadow:0 1px 4px rgba(0,0,0,.3);
}

.hgab-body{flex:1;min-width:0;padding:10px 14px 10px 0;}
.hgab-card .hgab-name{margin:0 0 3px;font-size:18px;line-height:1.3;}
.hgab-card .hgab-name a{color:#222;text-decoration:none;}
.hgab-card .hgab-name a:hover{color:var(--hgab-accent);text-decoration:underline;}
.hgab-card .hgab-meta{
  margin:0 0 5px;
  font-size:14px;
  color:#666;
  line-height:1.4;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0 5px;
}
.hgab-rating{color:#b45309;font-weight:700;}
.hgab-rcount{color:#999;font-size:13px;}
.hgab-dot{color:#bbb;}
.hgab-card .hgab-sum{margin:0;font-size:15px;color:#444;line-height:1.45;}
.hgab-tagrow{margin:7px 0 0;display:flex;flex-wrap:wrap;gap:5px;}
.hgab-tag{
  display:inline-block;
  font-size:13px;
  line-height:1.3;
  padding:2px 9px;
  border-radius:999px;
  background:#eef6f2;
  color:#19604a;
}
.hgab-tag-lg{background:#fff3e0;color:#8a4b08;}
.hgab-tag-fee{background:#fff3e0;color:#8a4b08;}

/* ── Map column ────────────────────────────────────────────── */
/* Mobile default: hidden; opens as a fullscreen overlay from the FAB. */
.hgab-map-col{
  display:none;
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  z-index:999999;
  background:#fff;
  flex-direction:column;
}
.hgab-map-col.is-open{display:flex;}
.hgab-map-head{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 14px;
  border-bottom:1px solid #e3e7e4;
  background:#fff;
}
.hgab-map-head-title{font-size:16px;font-weight:700;color:#222;}
.hgab-map-close{
  -webkit-appearance:none;
  appearance:none;
  border:1.5px solid #d4d9d6;
  background:#fff;
  color:#333;
  border-radius:999px;
  padding:7px 14px;
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
}
.hgab-map-close:hover{border-color:#999;}
.hgab-map{flex:1;min-height:0;width:100%;background:#e8eee8;}

/* Map FAB — mobile only. position:sticky at the end of the list keeps it
   pinned to the viewport bottom while the list is in view, with zero JS
   scroll tracking, and it settles into the flow once you scroll past. */
.hgab-fab-wrap{
  position:-webkit-sticky;
  position:sticky;
  bottom:18px;
  text-align:center;
  pointer-events:none;
  margin:6px 0 0;
}
.hgab-fab{
  -webkit-appearance:none;
  appearance:none;
  pointer-events:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:none;
  background:#222;
  color:#fff;
  border-radius:999px;
  padding:12px 22px;
  font-family:inherit;
  font-size:15px;
  font-weight:700;
  line-height:1.2;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.hgab-fab:hover{background:#000;}
.hgab-fab i{color:var(--hgab-accent);font-size:16px;}

/* ── Numbered pins (Leaflet divIcon) ───────────────────────── */
.hgab-pin{
  width:28px;height:28px;
  border-radius:50%;
  background:var(--hgab-accent,#1D9771);
  border:2px solid #fff;
  box-shadow:0 1px 5px rgba(0,0,0,.4);
  color:#fff;
  font-size:13px;
  font-weight:700;
  line-height:24px;
  text-align:center;
  transition:transform .12s ease;
}
.hgab-pin-wrap{background:none;border:none;}
.hgab-pin-wrap.is-active .hgab-pin,
.hgab-pin-wrap:hover .hgab-pin{
  transform:scale(1.3);
  background:#222;
}

/* ── Scoped Leaflet px overrides ───────────────────────────────
   Leaflet 1.9 sets .leaflet-container{font-size:0.75rem}; the site's
   html{font-size:62.5%} collapses that to 7.5px. Same fix as the
   where-to-stay region maps (PR #3773) — px everywhere, >=13px. */
.hgab .leaflet-container{font-size:13px;font-family:inherit;}
.hgab .leaflet-popup-content-wrapper{border-radius:10px;}
.hgab .leaflet-popup-content{margin:10px 12px;font-size:14px;line-height:1.4;}
.hgab .leaflet-container .leaflet-control-attribution{font-size:11px;}
.hgab .leaflet-bar a{
  width:30px;height:30px;line-height:30px;font-size:18px;
}

/* Popup card — the module sits inside .article-content, whose link rules
   (blue + dashed border-bottom) reach into the Leaflet popup. Prefix with
   .hgab .leaflet-popup-content to outrank them (the .article-content
   specificity trap). */
.hgab-pop{min-width:180px;max-width:230px;}
.hgab-pop-name{margin:0 0 3px;font-size:15px;font-weight:700;line-height:1.3;}
.hgab .leaflet-popup-content .hgab-pop-name a{color:#222;text-decoration:none;border-bottom:none;background:none;}
.hgab .leaflet-popup-content .hgab-pop-name a:hover{color:var(--hgab-accent,#1D9771);}
.hgab-pop-meta{margin:0 0 8px;font-size:13px;color:#666;line-height:1.4;}
.hgab-pop-meta .hgab-rating{font-size:13px;}
.hgab-pop-cta{
  display:inline-block;
  background:var(--hgab-accent,#1D9771);
  color:#fff;
  font-size:13px;
  font-weight:600;
  padding:5px 12px;
  border-radius:999px;
  text-decoration:none;
  line-height:1.3;
}
.hgab .leaflet-popup-content a.hgab-pop-cta{color:#fff;border-bottom:none;text-decoration:none;}
.hgab-pop-cta:hover{opacity:.9;color:#fff;}

/* ── Desktop: docked 55/45 split ───────────────────────────── */
@media (min-width:1024px){
  .hgab-split{
    display:grid;
    grid-template-columns:55fr 45fr;
    gap:20px;
    align-items:start;
  }
  .hgab-fab-wrap{display:none;}
  .hgab-map-col{
    display:flex;
    position:-webkit-sticky;
    position:sticky;
    top:20px;
    bottom:auto;left:auto;right:auto;
    z-index:1;
    height:calc(100vh - 40px);
    max-height:860px;
    border:1px solid #e3e7e4;
    border-radius:14px;
    overflow:hidden;
  }
  .hgab-map-close{display:none;}
  .hgab-card .hgab-thumb{flex-basis:150px;}
}

@media print{.hgab{display:none;}}