/* ============================================================
   Uganda interactive minimap — shared component + 3 layout contexts
   Requires tokens from main.css (--olive, --cream, --gold, --ink…)
   ============================================================ */

/* ---------- shared copy bits ---------- */
.eyebrow{margin:0 0 16px;font-size:.74rem;font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold);}
.map-title{margin:0 0 18px;font-family:var(--font-display);font-weight:400;
  font-size:clamp(2.1rem,3.6vw,3.4rem);line-height:1.05;letter-spacing:-.01em;color:#fff;}
.map-intro{margin:0 0 34px;max-width:42ch;font-size:1rem;line-height:1.65;color:rgba(246,246,210,.72);}

/* ---------- list ---------- */
.places{list-style:none;margin:0;padding:0;border-top:1px solid rgba(246,246,210,.14);}
.place{display:flex;align-items:baseline;gap:14px;width:100%;text-align:left;
  padding:15px 6px;background:none;border:0;border-bottom:1px solid rgba(246,246,210,.14);
  color:inherit;font-family:inherit;cursor:pointer;
  transition:padding-left .35s var(--ease),background .35s var(--ease);}
.place:hover,.place:focus-visible,.place.is-active{padding-left:16px;background:rgba(246,246,210,.05);outline:none;}
.place__idx{font-size:.72rem;letter-spacing:.12em;color:var(--gold);min-width:24px;font-variant-numeric:tabular-nums;}
.place__name{font-size:1.06rem;color:#fff;}
.place__cat{margin-left:auto;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(246,246,210,.5);white-space:nowrap;}
.place:hover .place__cat,.place.is-active .place__cat{color:var(--gold);}

/* ---------- split layout (text | map) ---------- */
.uga-map--split{display:grid;grid-template-columns:0.85fr 1fr;gap:clamp(32px,5vw,80px);align-items:center;}

/* ---------- map frame + silhouette ---------- */
.map-frame{position:relative;width:100%;max-width:560px;margin-inline:auto;aspect-ratio:1000/1053.2;}
.map-frame svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.uga-shape{fill:url(#ugaFill);stroke:rgba(246,246,210,.45);stroke-width:1.4;
  filter:drop-shadow(0 26px 50px rgba(0,0,0,.45));transition:fill .5s var(--ease);}
.uga-label{font-family:'Inter',system-ui,sans-serif;font-weight:500;font-size:62px;
  letter-spacing:.18em;text-transform:uppercase;
  fill:rgba(246,246,210,.18);pointer-events:none;user-select:none;}
.map-frame.dimmed .uga-shape{fill:url(#ugaFillDim);}

/* ---------- pins ---------- */
.pins{position:absolute;inset:0;z-index:3;}
.pin{position:absolute;transform:translate(-50%,-50%);width:0;height:0;}
.pin__btn{position:absolute;left:0;top:0;transform:translate(-50%,-50%);
  width:34px;height:34px;display:grid;place-items:center;background:none;border:0;padding:0;cursor:pointer;}
.pin__dot{width:11px;height:11px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 4px rgba(194,136,62,.22),0 1px 6px rgba(0,0,0,.5);position:relative;z-index:2;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);}
.pin__ring{position:absolute;width:11px;height:11px;border-radius:50%;border:1.5px solid var(--gold);opacity:0;z-index:1;}
.pin.is-active .pin__dot,.pin__btn:hover .pin__dot,.pin__btn:focus-visible .pin__dot{
  transform:scale(1.45);background:#e2a85a;box-shadow:0 0 0 6px rgba(194,136,62,.30),0 2px 10px rgba(0,0,0,.55);}

@keyframes pulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(3.6);opacity:0}100%{opacity:0}}
.pin__ring{animation:pulse 3.4s var(--ease) infinite;}
.pin:nth-child(2) .pin__ring{animation-delay:.6s}
.pin:nth-child(3) .pin__ring{animation-delay:1.2s}
.pin:nth-child(4) .pin__ring{animation-delay:1.8s}
.pin:nth-child(5) .pin__ring{animation-delay:2.4s}
.pin:nth-child(6) .pin__ring{animation-delay:3s}
.pin:nth-child(7) .pin__ring{animation-delay:.3s}
.pin:nth-child(8) .pin__ring{animation-delay:.9s}
.pin:nth-child(9) .pin__ring{animation-delay:1.5s}
.pin:nth-child(10) .pin__ring{animation-delay:2.1s}
.pin:nth-child(11) .pin__ring{animation-delay:2.7s}
.pin:nth-child(12) .pin__ring{animation-delay:3.3s}

/* ---------- tooltip card ---------- */
/* sharp-cornered rectangle. when there's a photo it's 50/50 (photo|info)
   with the photo bleeding edge-to-edge; without a photo it's a compact pad */
.pin__card{position:absolute;z-index:5;width:212px;padding:14px 16px;border-radius:0;
  background:rgba(28,27,21,.92);backdrop-filter:blur(8px);
  border:1px solid rgba(246,246,210,.16);box-shadow:0 18px 40px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transform:translateY(6px) scale(.97);transform-origin:center bottom;
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;pointer-events:none;
  overflow:hidden;}
.pin.is-active .pin__card{opacity:1;visibility:visible;transform:translateY(0) scale(1);}
.pin[data-side="top"]    .pin__card{left:50%;bottom:26px;transform:translateX(-50%) translateY(6px) scale(.97);}
.pin[data-side="top"].is-active .pin__card{transform:translateX(-50%) translateY(0) scale(1);}
.pin[data-side="bottom"] .pin__card{left:50%;top:26px;transform:translateX(-50%) translateY(-6px) scale(.97);}
.pin[data-side="bottom"].is-active .pin__card{transform:translateX(-50%) translateY(0) scale(1);}
.pin[data-side="right"]  .pin__card{left:26px;top:50%;transform:translateY(-50%) translateX(-6px) scale(.97);}
.pin[data-side="right"].is-active .pin__card{transform:translateY(-50%) translateX(0) scale(1);}
.pin[data-side="left"]   .pin__card{right:26px;top:50%;transform:translateY(-50%) translateX(6px) scale(.97);}
.pin[data-side="left"].is-active .pin__card{transform:translateY(-50%) translateX(0) scale(1);}
.pin__card .c-cat{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);}
.pin__card .c-name{margin:4px 0 0;font-family:var(--font-display);font-size:1.02rem;color:#fff;line-height:1.18;}

/* ----- rectangle layout when the place has a photo -----
   Photo is fixed at 160px (was 140px = 50% of 280px — bumped ~15% wider on request),
   meta stays at 140px → total card width 300px. */
.pin__card.has-thumb{
  width:300px;
  padding:0;                 /* the photo touches the outer edge */
  display:flex;
  align-items:stretch;
}
.pin__card.has-thumb .c-thumb{
  flex:0 0 160px;
  width:160px;
  align-self:stretch;
  object-fit:cover;
  display:block;
  border-radius:0;
  box-shadow:none;
}
.pin__card.has-thumb .c-meta{
  flex:1 1 auto;             /* fills the remaining 140px */
  min-width:0;
  padding:12px 14px;          /* text needs a touch of inset so it doesn't kiss the edge */
  display:flex; flex-direction:column; justify-content:center;
}
.pin__card.has-thumb .c-name{font-size:.95rem;}

/* ----- animal silhouette icons under the name ----- */
.c-icons{display:flex;gap:6px;margin-top:10px;}
.c-icon{
  width:22px; height:22px; display:block;
  /* SVGs are already white silhouette + faint disc, so no filter needed */
}

/* ============================================================
   CONTEXT 1 — map as a section below the hero (index.html)
   ============================================================ */
/* Linear top-to-bottom so the section's TOP EDGE is uniformly #45432f.
   Holding #45432f for the first 110px guarantees the brush and the band
   directly under it are exactly the same colour — no lighter halo. The
   real darker olive only starts ~25% down the section. */
.map-section{background:linear-gradient(180deg, #45432f 0%, #45432f 110px, var(--olive) 30%, var(--olive-2) 100%);}
.map-section .wrap{max-width:1240px;margin:0 auto;padding:clamp(56px,10vh,120px) clamp(20px,4vw,56px);}

/* ============================================================
   BRUSH TOP EDGE
   The brush element sits ABOVE the section (bottom:100%) so it paints
   directly onto the hero video — NOT onto the section's olive bg.
   Without this, pulling the section up with a negative margin just made
   the brush sit on top of olive-on-olive — invisible.
   ============================================================ */
.map-section--brushed{
  position:relative;
  z-index:6;        /* above the hero video + its scrim */
}
/* The PNG carries the brush silhouette; we mask a vertical gradient with it.
   Reference (goexploresafaris) gets visual punch because their next section is
   WHITE — the brush is white and contrasts hard against the dark video.
   Our section is olive; flat olive vanishes into the dark video. Gradient:
     · TOP   → warm tan (#8b7548)  → visible against the dark gorilla video
     · BOTTOM→ var(--olive)         → zero-seam merge into the section beneath
   bottom:100% positions the brush ABOVE the section, so it paints directly
   on the video (not on the section's olive bg). */
.map-section__brush{
  position:absolute;
  left:0;right:0;
  bottom:100%;
  height:78px;
  margin-bottom:-1px;                    /* hides any sub-pixel seam */
  pointer-events:none;
  /* solid #45432f — same colour as the section's top band, so the brush
     reads as a single uniform paint stroke across its whole height */
  background:#45432f;
  -webkit-mask-image:url("../assets/img/brush-edge.png");
          mask-image:url("../assets/img/brush-edge.png");
  -webkit-mask-size:100% 100%;
          mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
  -webkit-mask-position:bottom center;
          mask-position:bottom center;
}

/* Full-viewport variant — used as a section sitting between hero and map3d */
.map-section--full{min-height:100svh;display:flex;align-items:center;}
.map-section--full .wrap{width:100%;padding-top:clamp(40px,8vh,90px);padding-bottom:clamp(40px,8vh,90px);}

/* ============================================================
   CONTEXT 2 — scroll reveal over the video (index2.html)
   ============================================================ */
.reveal{position:relative;height:230vh;}
.reveal__sticky{position:sticky;top:0;height:100svh;overflow:hidden;}
.reveal__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.reveal__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom,rgba(26,24,19,.45),rgba(26,24,19,.30) 40%,rgba(26,24,19,.66));}
.reveal__layer{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:0 clamp(20px,4vw,56px);}
/* hero text: identical to v1 (left-aligned, same widths) but vertically centered */
.reveal__hero{z-index:3;align-items:stretch;text-align:left;color:#fff;will-change:transform,opacity;}
.reveal__hero .hero__content{margin:0 auto;padding-bottom:0;}
.reveal__map{z-index:2;opacity:0;will-change:transform,opacity;}
.reveal__map .wrap{width:100%;max-width:1240px;}
/* reduced-motion / no-JS fallback: stack normally */
.reveal.no-anim{height:auto;}
.reveal.no-anim .reveal__sticky{position:static;height:auto;}
.reveal.no-anim .reveal__video{position:fixed;}
.reveal.no-anim .reveal__layer{position:relative;min-height:100svh;}
.reveal.no-anim .reveal__map{opacity:1;}

/* ============================================================
   CONTEXT 3 — map over video, split (index3.html)
   ============================================================ */
.hero--map{align-items:center;}
.hero--map .hero__content{padding-top:var(--header-h);padding-bottom:0;}
.hero--map .uga-map--split{align-items:center;gap:clamp(28px,4vw,64px);}
.hero--map .map-frame{max-width:425px;} /* ~15% smaller than v1/v2 */
.hero--map .map-title{font-size:clamp(2.3rem,4.4vw,4rem);}
/* translucent silhouette so the gorilla video shows through */
.hero--map .uga-shape{fill-opacity:.55;}
.hero--map .map-frame.dimmed .uga-shape{fill-opacity:.62;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:880px){
  .uga-map--split{grid-template-columns:1fr;gap:36px;}
  .map-frame{max-width:420px;}
  .hero--map{align-items:flex-start;}
  .hero--map .hero__content{padding-top:calc(var(--header-h) + 12px);}
}

@media (prefers-reduced-motion:reduce){
  .pin__ring{display:none;}
}