/* ht-projects-map 1.2.0: Himalayan Trust projects map.
   UI chrome (chips, buttons, tags, cards, type) uses the site's own classes:
   button / is-secondary / is-small / is-link / is-icon / tag / grid-list5_item /
   grid-list5_content-bottom / heading-style-h6 / text-size-* / text-weight-semibold.
   This file only covers what the site has no class for: the map stage, pins,
   clusters, the programme icon dots and Mapbox's own chrome. Values are taken
   from the published site CSS (radius 6px/8px, picton-blue borders, firefly,
   pampas, the 30 Sep card hover shadow). */
/* "Show on map" scrolls the map root to the top; this keeps the chip rows clear of the fixed menu bar. */
[data-ht-map], .htm__stage { scroll-margin-top: 7rem; }
.htm *, .htm *::before, .htm *::after { box-sizing: border-box; }
.htm {
  position: relative;
  --htm-firefly: var(--_primitives---colors--firefly, #0A1C2B);
  --htm-picton: var(--_primitives---colors--picton-blue, #3CB4E5);
  --htm-pampas: var(--_primitives---colors--pampas, #F1F0EE);
  --htm-border: var(--_primitives---opacity--neutral-darkest-15, rgba(3,9,11,.15));
  --htm-radius: var(--_ui-styles---radius--medium, 8px);
  --htm-shadow-hover: 0 2px 4px #0a1c2b0f, 0 12px 28px #0a1c2b1f;
}

/* ---- stage ---- */
.htm__stage {
  position: relative; overflow: hidden; isolation: isolate;
  border: 1px solid var(--htm-picton);
  border-radius: var(--htm-radius);
  background: var(--htm-pampas);
}
.htm__canvas { position: absolute !important; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .6s ease; }
.htm__stage.is-ready .htm__canvas { opacity: 1; }
.htm--full .htm__stage { height: min(640px, 78vh); }
.htm--current .htm__stage { height: min(540px, 70vh); }
.htm--home .htm__stage { height: min(480px, 64vh); }
.htm--locator .htm__stage { height: 340px; }
.htm__stage.is-failed { height: auto !important; border: 0; background: transparent; }

/* ---- controls: layout only; chips are .button.is-secondary.is-small ---- */
.htm__controls { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-bottom: 1rem; }
.htm__group { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.htm__label { margin-right: .25rem; }
.htm__meta { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.htm__legend { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.htm-chip.button { display: inline-flex; }
.htm-chip:disabled, .htm-chip.is-empty { opacity: .45; cursor: default; pointer-events: none; }
.htm-chip--static.tag { display: inline-flex; padding: .25rem .625rem; }
.htm-chip__icon {
  display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: var(--htm-c); color: #fff; flex: none;
}
.htm-chip__count { opacity: .6; font-variant-numeric: tabular-nums; }

/* ---- pins (map-only; no site equivalent) ---- */
.htm-pin { position: relative; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; --htm-c: #0072B2; }
.htm-pin__face {
  position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--htm-c); color: #fff;
  box-shadow: 0 0 0 2.5px #fff, 0 3px 10px rgba(10,28,43,.35);
  transition: transform .2s, box-shadow .2s;
}
.htm-pin:hover .htm-pin__face, .htm-pin.is-active .htm-pin__face { transform: translateY(-2px) scale(1.08); box-shadow: 0 0 0 2.5px #fff, 0 0 0 4px var(--htm-picton), var(--htm-shadow-hover); }
.htm-pin:focus-visible { outline: none; }
.htm-pin:focus-visible .htm-pin__face { box-shadow: 0 0 0 2.5px #fff, 0 0 0 5px var(--_primitives---colors--picton-blue-dark, #3090B7); }
.htm-pin__count {
  position: absolute; z-index: 2; top: -7px; right: -9px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: var(--htm-firefly); color: #fff; font-size: .75rem; font-weight: 600; line-height: 20px; text-align: center; box-shadow: 0 0 0 2px #fff;
}
.htm-pin[hidden], .htm-pin.is-clustered { display: none; }
.htm-pin--area { width: var(--htm-area, 56px); height: var(--htm-area, 56px); }
.htm-pin__halo {
  position: absolute; inset: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--htm-c) 14%, transparent);
  border: 1.5px dashed color-mix(in srgb, var(--htm-c) 55%, #fff);
}
.htm-pin--area .htm-pin__face { width: 24px; height: 24px; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(10,28,43,.25); }
.htm-pin--faded { width: 14px; height: 14px; cursor: default; pointer-events: none; }
.htm-pin--faded .htm-pin__face { width: 10px; height: 10px; opacity: .5; box-shadow: 0 0 0 1.5px #fff; }
.htm-pin--faded .htm-pin__face svg, .htm-pin--faded .htm-pin__count { display: none; }
.htm-pin--faded.htm-pin--area { width: 36px; height: 36px; }
.htm-pin--faded .htm-pin__halo { opacity: .5; }
.htm-pin--focus .htm-pin__face { width: 40px; height: 40px; }
.htm-pin--focus::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border-radius: 50%; border: 2px solid var(--htm-c); animation: htm-pulse 2.4s ease-out infinite;
}
@keyframes htm-pulse { from { transform: scale(1); opacity: .8; } to { transform: scale(2.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .htm-pin--focus::after { animation: none; opacity: 0; } }

.htm-cluster {
  position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0;
  border-radius: 50%; cursor: pointer; background: var(--htm-ring, var(--htm-firefly));
  box-shadow: 0 3px 12px rgba(10,28,43,.35); transition: transform .2s, box-shadow .2s;
}
.htm-cluster__n {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--htm-firefly); color: #fff; font-size: .8125rem; font-weight: 600; box-shadow: 0 0 0 2px #fff;
}
.htm-cluster:hover { transform: translateY(-2px); box-shadow: var(--htm-shadow-hover); }
.htm-cluster:focus-visible { outline: 2px solid var(--_primitives---colors--picton-blue-dark, #3090B7); outline-offset: 2px; }

/* ---- popup: Mapbox shell reset; the card itself is .grid-list5_item ---- */
.htm .mapboxgl-map { font: inherit; line-height: inherit; color: inherit; }
.htm .mapboxgl-ctrl-attrib { font-size: .75rem; line-height: 1.5; }
.htm-pop .mapboxgl-popup-content { padding: 0; background: none; box-shadow: none; border-radius: var(--htm-radius); }
.htm-pop.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip { border-top-color: var(--htm-picton); }
.htm-pop .mapboxgl-popup-close-button {
  top: .5rem; right: .5rem; z-index: 2; width: 2rem; height: 2rem; border-radius: 6px;
  border: 1px solid var(--htm-border); background: var(--htm-pampas); color: var(--htm-firefly);
  font-size: 1.125rem; line-height: 1; transition: border-color .2s, background-color .2s;
}
.htm-pop .mapboxgl-popup-close-button:hover { border-color: var(--htm-picton); background: var(--htm-pampas); }
.htm-pop__card { box-shadow: var(--htm-shadow-hover); }
.htm-pop__card.grid-list5_item:hover { transform: none; }
.htm-pop__media--icon { display: grid; place-items: center; aspect-ratio: 3 / 1.2; color: var(--htm-c); background: color-mix(in srgb, var(--htm-c) 12%, var(--htm-pampas)); }
.htm-pop__body.grid-list5_content-bottom { padding: 1.25rem; }
.htm-pop__title.heading-style-h6 { margin-bottom: .5rem; font-size: 1.25rem; line-height: 1.3; }
.htm-pop__summary { margin: 0 0 .75rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.htm-pop__meta { margin-bottom: .75rem; align-items: center; }
.htm-pop__eyebrow { margin-bottom: .5rem; }
.htm-pop__list { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow: auto; }
.htm-pop__list li + li { border-top: 1px solid var(--htm-border); }
.htm-pop__row { display: flex; gap: .625rem; align-items: center; padding: .625rem 0; color: inherit; text-decoration: none; }
.htm-pop__row:hover .text-weight-semibold { text-decoration: underline; }
.htm-pop__mini { flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--htm-c); color: #fff; }
.htm-pop__li-text { display: flex; flex-direction: column; gap: .125rem; }
.htm-pop__sel.tag { display: inline-block; margin-left: .375rem; padding: .0625rem .5rem; font-size: .75rem; line-height: 1.5; vertical-align: middle; }
/* popup focused after "Show on map": the ring goes on the card, not the Mapbox shell */
.htm-pop:focus { outline: none; }
.htm-pop:focus-visible .htm-pop__card { outline: 2px solid var(--_primitives---colors--picton-blue-dark, #3090B7); outline-offset: 2px; }

/* ---- Mapbox chrome matched to site buttons ---- */
.htm .mapboxgl-ctrl-group { border-radius: 6px; border: 1px solid var(--htm-border); box-shadow: none; background: var(--htm-pampas); overflow: hidden; }
.htm .mapboxgl-ctrl-group button { transition: background-color .2s; }
.htm .mapboxgl-ctrl-group button:hover { background-color: var(--_primitives---opacity--neutral-darkest-5, rgba(3,9,11,.05)); }
.htm .mapboxgl-cooperative-gesture-screen { background: rgba(10,28,43,.6); }

/* ---- linked cards + data ---- */
.htm-card-hidden { display: none !important; }
.htm-show:disabled { opacity: .45; cursor: default; text-decoration: none; }

/* ---- accessibility ---- */
.htm__sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.htm__fallback { columns: 2 260px; padding-left: 1.2em; margin: 1rem 0 0; }

/* ---- tablet and below: 44px tap targets on the filter chips ---- */
@media (max-width: 991px) {
  .htm-chip.button { min-height: 2.75rem; }
}

/* ---- phone ---- */
@media (max-width: 767px) {
  .htm__controls { flex-direction: column; align-items: stretch; gap: .75rem; }
  /* every chip stays on screen: rows wrap, nothing scrolls sideways */
  .htm__group { flex-wrap: wrap; overflow-x: visible; max-width: 100%; row-gap: .5rem; }
  .htm__label, .htm-chip { flex: none; }
  .htm__meta { margin-left: 0; }
  .htm--full .htm__stage { height: 72vh; max-height: 560px; }
  .htm--home .htm__stage { height: 420px; }
  .htm--locator .htm__stage { height: 280px; }
  .htm-pop__title.heading-style-h6 { font-size: 1.125rem; }
}