/* Defensive fallback: some page builders (Elementor included) place the
   shortcode inside a flex item that has no flex-grow/width of its own,
   which collapses to min-content (a sliver a few px wide). Force the
   whole chain up to the widget wrapper to actually take the space. */
.elementor-widget-shortcode:has(.acm-app),
.elementor-widget-shortcode:has(.acm-app) .elementor-widget-container,
.elementor-widget-html:has(.acm-app),
.elementor-widget-html:has(.acm-app) .elementor-widget-container {
  width:100%;
  flex:1 1 auto;
  min-width:0;
}

/* .acm-shell is the actual top-level element the shortcode outputs. The
   map (.acm-app) is the only IN-FLOW child, so it -- and the map inside
   it -- gets 100% of the shell's width with nothing sharing/shrinking it.
   The intro text column floats ON TOP of the map as an absolute overlay
   (left side), exactly like .acm-cards-panel already floats on the right
   -- it no longer takes up flex space of its own, which is what was
   shrinking the map below full width before. Deliberately no height set
   here -- it's left to size itself from .acm-app (via its own aspect-
   ratio-driven height in map.js) rather than depending on a percentage-
   resolvable ancestor height, which is what caused height problems before. */
.acm-shell{
  --acm-navy:#13294b;
  --acm-accent:#1fb6c9;
  --acm-accent-soft:#8fe3ec;

  position:relative !important;
  /* Full-bleed breakout: Elementor sections are usually "Boxed" (a centered
     max-width container), so plain width:100% only fills that box, not the
     actual browser window. This classic trick escapes the box regardless
     of how narrow/wide it is: shift right by half the container's own
     width (left:50%), then pull back left by half the VIEWPORT width
     (margin-left:-50vw) -- vw is always relative to the window, not any
     ancestor, so the element's edges land exactly at the screen edges. */
  width:100vw !important;
  left:50% !important;
  right:50% !important;
  margin-left:-50vw !important;
  margin-right:-50vw !important;
  /* Same light-blue tint as .acm-map-wrap's own placeholder background,
     but applied to the whole shell so it reads as one continuous panel
     behind the intro text too, instead of the map's tint stopping at its
     own edge and leaving the page's plain background showing behind the
     text (a white "seam" that doesn't match the mockup). */
  background:#eaf6fb;
  box-sizing:border-box;
}
.acm-shell *{ box-sizing:border-box; }

/* !important on the properties below because Elementor/theme stylesheets
   commonly carry global rules for headings, paragraphs, links and buttons
   (e.g. ".elementor p", ".elementor a") that tie or beat our specificity
   and silently override alignment/background/spacing -- the exact class
   of bug already hit once with ".elementor img{height:auto}" overriding
   the map image. Locking these down here avoids a repeat for the intro
   column and its button. */
.acm-intro{
  position:absolute !important;
  top:0 !important;
  bottom:0 !important;
  left:0 !important;
  width:360px !important;
  max-width:40% !important;
  z-index:6;
  padding:32px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--acm-navy);
}
.acm-intro h2{
  margin:0 0 18px !important;
  font-size:34px;
  font-weight:700;
  line-height:1.15;
}
.acm-intro p{
  margin:0 0 26px !important;
  font-size:15px;
  line-height:1.6;
  color:#54627a;
}
.acm-intro-btn{
  display:inline-block !important;
  align-self:flex-start !important;
  padding:12px 28px !important;
  border:1.5px solid var(--acm-navy) !important;
  border-radius:999px !important;
  background:transparent !important;
  color:var(--acm-navy) !important;
  text-decoration:none !important;
  text-align:center !important;
  font-weight:600;
  font-size:14px;
  transition:background .2s ease, color .2s ease;
}
.acm-intro-btn:hover{ background:var(--acm-navy) !important; color:#fff !important; }

.acm-app{
  position:relative;
  width:100%;
  min-width:0;
  min-height:280px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  box-sizing:border-box;
}
.acm-app *{ box-sizing:border-box; }

/* ---------- map: full-bleed background, fills the whole component ---------- */
.acm-map-wrap{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:16px;
  overflow:hidden;
  background:#eaf6fb; /* shows behind the image in any letterboxed edges */
}
/* Higher specificity than Elementor's global ".elementor img{height:auto}"
   reset (0,1,1), which was silently overriding our height and forcing the
   image to its intrinsic aspect ratio regardless of object-fit. */
.acm-map-wrap .acm-map-img{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:contain;
  object-position:center;
  display:block;
  pointer-events:none;
  user-select:none;
}
.acm-routes{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  overflow:visible;
}
.acm-route-path{
  fill:none;
  stroke:var(--acm-accent);
  stroke-width:2.5;
  stroke-linecap:round;
  opacity:0;
}
.acm-route-path.active{
  opacity:1;
  transition:stroke-dashoffset 3s cubic-bezier(.25,.7,.35,1);
}

.acm-pin{
  position:absolute;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  cursor:pointer;
  z-index:3;
}
.acm-pin .acm-dot{
  position:relative;
  width:9px;height:9px;border-radius:50%;
  background:var(--acm-navy);
  border:2px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,.35);
  transition:background .2s ease, transform .2s ease;
}
.acm-pin .acm-label{
  position:absolute;
  bottom:16px;
  font-size:12px;
  font-weight:600;
  color:var(--acm-navy);
  white-space:nowrap;
  transition:color .2s ease;
}
.acm-pin:hover .acm-dot, .acm-pin.active .acm-dot{
  background:var(--acm-accent);
  transform:scale(1.3);
}
.acm-pin.active .acm-label{ color:var(--acm-accent); }

.acm-pin.acm-port .acm-dot{
  width:11px;height:11px;
  background:var(--acm-navy);
  border-color:var(--acm-accent-soft);
}

/* ---------- cards: floating overlay on top of the map, top-right ---------- */
/* No fixed height here on purpose: top+right+bottom insets stretch this
   panel to fill whatever height .acm-app actually ends up with (which is
   now driven by the map image's own aspect ratio, see map.js). However
   many 170px cards fit in that height show at once; the rest scroll. */
.acm-cards-panel{
  position:absolute;
  top:24px;
  right:24px;
  bottom:24px;
  width:320px;
  max-width:calc(100% - 48px);
  overflow-y:auto;
  padding-right:6px;
  scroll-behavior:smooth;
  z-index:5;
}
.acm-cards-panel::-webkit-scrollbar{ width:6px; }
.acm-cards-panel::-webkit-scrollbar-thumb{ background:#c7d9e6; border-radius:3px; }

.acm-dest-card{
  position:relative;
  height:200px;
  border-radius:100px;
  overflow:hidden;
  margin-bottom:18px;
  cursor:pointer;
  background-size:cover;
  background-position:center;
  background-color:#3a5a86;
  outline:0px solid var(--acm-accent);
  outline-offset:2px;
  transition:outline-width .2s ease, transform .2s ease;
}
.acm-dest-card:hover{ transform:translateY(-2px); }
.acm-dest-card.active{ outline-width:3px; }
.acm-dest-card::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0) 65%);
}
.acm-dest-card .acm-content{
  position:absolute;
  left:22px; bottom:16px;
  z-index:2;
  color:#fff;
}
.acm-dest-card h3{
  margin:0 0 4px;
  font-size:22px;
  font-weight:700;
}
.acm-dest-card a{
  color:#fff;
  font-size:13px;
  text-decoration:underline;
}

/* Below 900px there's not enough room for the cards to float over the
   map and stay readable, so they drop into normal flow underneath it.
   .acm-map-wrap's height is set directly by map.js from the image's own
   aspect ratio (see syncMapHeight()); min-height here is just a fallback
   before the image has loaded. */
@media (max-width: 900px){
  /* Not enough room to float the intro text over a narrow map without
     covering it, so it drops back into normal flow above the map here --
     same idea as the cards panel dropping below the map on mobile. */
  .acm-intro{
    position:relative !important;
    top:auto !important; bottom:auto !important; left:auto !important;
    width:100% !important; max-width:100% !important;
    padding:20px 20px 24px !important;
  }
  .acm-app{ height:auto; }
  .acm-map-wrap{ position:relative; inset:auto; min-height:220px; }
  .acm-cards-panel{
    position:relative;
    top:auto; right:auto; bottom:auto;
    width:100%; max-width:none;
    height:auto; max-height:none;
    overflow-y:visible;
    margin-top:16px;
  }
}