/* Brame interactive map · component styles (fonts: Onest 500, Rubik 400) */
.u-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* =====================================================================
   Interactive map · .imap
   Positions: Figma frame px in data-x/y/w/h → % via JS
   Motion: one spring curve, compositor-only properties (transform, opacity)
   ===================================================================== */
.imap{
  --imap-card-bg:#fefffa;
  --imap-ink:#282929;
  --imap-teal:#024a4a;
  --imap-teal-05:rgba(2,74,74,.05);
  --imap-teal-06:rgba(2,74,74,.06);
  --imap-dim:rgba(16,30,30,.32);
  --imap-radius:.875rem;
  --imap-card-radius:.625rem;
  --imap-font-body:"Onest",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --imap-font-tag:"Rubik",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --imap-spring:cubic-bezier(.32,.72,0,1);
  --imap-out:cubic-bezier(.4,0,1,1);
  --imap-in:420ms;
  --imap-exit:160ms;
  position:relative;
  color:var(--imap-ink);
  container:imap / inline-size;
}

/* Stage: screenshot + spotlight + hotspots */
.imap_stage{
  position:relative;
  aspect-ratio:16/9;
  border-radius:var(--imap-radius);
  overflow:hidden;
  isolation:isolate;
  background:#f4f4f6;
  box-shadow:0 0 0 1px var(--imap-teal-06),0 1px 2px rgba(2,74,74,.05),0 8px 24px -8px rgba(2,74,74,.10),0 32px 64px -24px rgba(2,74,74,.14);
}
.imap_visual,.imap_visual img{display:block;width:100%;height:100%}
.imap_visual img{object-fit:cover}
/* Hotspots appear only once the screenshot is decoded and painted */
.imap.is-ready .imap_hotspots{opacity:0;visibility:hidden;transition:opacity 400ms var(--imap-spring),visibility 0s linear 400ms}
.imap.is-ready.is-loaded .imap_hotspots{opacity:1;visibility:visible;transition:opacity 400ms var(--imap-spring),visibility 0s}

/* Spotlight: a single element that glides between areas */
.imap_spot{
  position:absolute;z-index:1;
  left:var(--sx,50%);top:var(--sy,50%);width:var(--sw,0%);height:var(--sh,0%);
  border-radius:.5rem;
  box-shadow:0 0 0 2px var(--imap-teal),0 0 0 200vmax var(--imap-dim);
  opacity:0;
  pointer-events:none;
  transition:left var(--imap-in) var(--imap-spring),top var(--imap-in) var(--imap-spring),width var(--imap-in) var(--imap-spring),height var(--imap-in) var(--imap-spring),opacity 260ms ease;
}
.imap_spot.is-on{opacity:1}
.imap_spot.is-instant{transition:opacity 260ms ease}

/* Hotspots */
.imap_hotspots{position:absolute;inset:0;z-index:2;margin:0;padding:0;list-style:none;display:none}
.imap_hotspot{
  position:absolute;
  left:var(--x);top:var(--y);width:var(--w);height:var(--h);
  min-width:24px;min-height:24px;
  margin:0;padding:0;border:0;border-radius:.5rem;
  background:transparent;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.imap_hotspot:focus{outline:none}
.imap_hotspot:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--imap-teal)}

/* Marker: 8px dot inside a 24px hit area (part of the button, so hovering
   or tapping the dot opens the area too) + compositor-only ripple */
.imap_hotspot::before,.imap_hotspot::after{
  content:"";position:absolute;top:0;right:0;border-radius:50%;
}
.imap_hotspot::after{
  width:24px;height:24px;margin:-12px -12px 0 0;
  background:radial-gradient(circle,var(--imap-teal) 0 4px,#fff 4.5px 6.5px,rgba(2,74,74,.18) 7px,transparent 8px);
  transition:transform 300ms var(--imap-spring),opacity 200ms ease;
}
.imap_hotspot::before{
  width:8px;height:8px;margin:-4px -4px 0 0;
  background:var(--imap-teal);opacity:0;transform:scale(1);pointer-events:none;
}
.imap_hotspot[data-dot="bottom"]::after{top:100%;right:50%;margin:-12px -12px 0 0}
.imap_hotspot[data-dot="bottom"]::before{top:100%;right:50%;margin:-4px -4px 0 0}
.imap_hotspot[data-dot="left"]::after{right:auto;left:0;margin:-12px 0 0 -12px}
.imap_hotspot[data-dot="left"]::before{right:auto;left:0;margin:-4px 0 0 -4px}
.imap_hotspot:hover::after{transform:scale(1.3)}
.imap_hotspot.is-active::after{transform:scale(.4);opacity:0}
@media (prefers-reduced-motion:no-preference){
  .imap.is-loaded .imap_hotspot::before{animation:imap-ripple 2.4s var(--imap-spring) var(--delay,0s) 2 both}
}
@keyframes imap-ripple{0%{opacity:.45;transform:scale(1)}70%,100%{opacity:0;transform:scale(3.4)}}

/* Feature list → popovers (wide) or stacked cards (narrow) */
.imap_list{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.75rem}
.imap_item{margin:0}

/* Card */
.imap_card{
  display:grid;
  grid-template-columns:clamp(5.5rem,28%,8.75rem) minmax(0,1fr);
  gap:.9375rem;align-items:start;
  padding:.75rem 1.5rem .75rem .75rem;
  background:var(--imap-card-bg);
  border-radius:var(--imap-card-radius);
  box-shadow:0 0 0 1px var(--imap-teal-06);
}
.imap_card-visual{width:100%;height:auto;aspect-ratio:1;border-radius:.5625rem;display:block}
.imap_card-content{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem;padding-top:.5625rem;min-width:0}
.imap_card-tag{
  margin:0;padding:.1875rem .5rem;
  background:var(--imap-card-bg);
  border:1px solid var(--imap-teal-05);border-radius:.5rem;
  box-shadow:1px 1px 8px var(--imap-teal-06);
  font-family:var(--imap-font-tag);font-weight:400;font-size:.875rem;line-height:1.4;letter-spacing:.01em;
  text-transform:uppercase;
}
.imap_card-text{
  margin:0;
  font-family:var(--imap-font-body);font-weight:500;
  font-size:clamp(.9375rem,.9rem + .15vw,1rem);line-height:1.4;
  text-wrap:pretty;
}

/* Wide component (≥560px) with JS: hotspots on, cards become popovers */
@container imap (min-width:560px){
  .imap.is-ready .imap_hotspots{display:block}
  .imap.is-ready .imap_list{display:block;margin:0}
  .imap.is-ready .imap_item{
    position:absolute;z-index:5;top:0;left:0;
    width:min(29.5625rem,calc(100% - 1rem));
    transform-origin:var(--cx,50%) var(--cy,0);
    transform:translate3d(var(--px,0),var(--py,0),0) scale(.94);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:transform var(--imap-exit) var(--imap-out),opacity var(--imap-exit) var(--imap-out),visibility 0s linear var(--imap-exit);
  }
  .imap.is-ready .imap_item.is-open{
    transform:translate3d(var(--px,0),var(--py,0),0) scale(1);
    opacity:1;visibility:visible;
    transition:transform var(--imap-in) var(--imap-spring),opacity 200ms ease,visibility 0s;
  }
  .imap.is-ready .imap_item.is-instant{transition:none}
  .imap.is-ready .imap_item.is-gliding{transition:transform var(--imap-in) var(--imap-spring),opacity 120ms linear,visibility 0s linear 120ms}
  .imap.is-ready .imap_card{
    box-shadow:0 0 0 1px rgba(2,74,74,.07),0 1px 1px rgba(2,74,74,.04),0 4px 8px -2px rgba(2,74,74,.08),0 16px 32px -8px rgba(2,74,74,.18),0 40px 72px -24px rgba(2,74,74,.22);
  }
  .imap.is-ready .imap_card-visual{transition:transform 520ms var(--imap-spring)}
  /* Caret: points at the exact spot on the area; inner half blends into the card */
  .imap.is-ready .imap_item::after{
    content:"";position:absolute;z-index:1;width:12px;height:12px;
    left:calc(var(--cx,50%) - 6px);top:calc(var(--cy,0px) - 6px);
    background:var(--imap-card-bg);transform:rotate(45deg);border-radius:2px;pointer-events:none;
  }
  .imap.is-ready .imap_item[data-side="bottom"]::after{box-shadow:-1px -1px 0 rgba(2,74,74,.08)}
  .imap.is-ready .imap_item[data-side="top"]::after{box-shadow:1px 1px 0 rgba(2,74,74,.08),2px 2px 4px -1px rgba(2,74,74,.10)}
  .imap.is-ready .imap_item[data-side="right"]::after{box-shadow:-1px 1px 0 rgba(2,74,74,.08)}
  .imap.is-ready .imap_item[data-side="left"]::after{box-shadow:1px -1px 0 rgba(2,74,74,.08)}
  .imap.is-ready .imap_item[data-side="none"]::after{display:none}
  .imap.is-ready .imap_item:not(.is-open) .imap_card-visual{transform:scale(.97)}
}
@media (prefers-reduced-motion:reduce){
  .imap_spot,.imap_spot.is-instant{transition:opacity 150ms linear}
  .imap.is-ready .imap_item,.imap.is-ready .imap_item.is-open,.imap.is-ready .imap_item.is-gliding{transform:translate3d(var(--px,0),var(--py,0),0);transition:opacity 150ms linear,visibility 0s linear 150ms}
  .imap.is-ready .imap_item.is-open{transition:opacity 150ms linear,visibility 0s}
  .imap_hotspot::after,.imap_card-visual,.imap_visual img{transition:none}
}
@media (forced-colors:active){
  .imap_hotspot:focus-visible,.imap_hotspot.is-active{outline:2px solid Highlight;outline-offset:2px}
  .imap_spot{box-shadow:none;border:2px solid Highlight}
}