/* Dolomed – Mapbox location map. Replaces the old static map SVG background. */

/* Desktop/laptop: real two-column flex layout (set on the Elementor container itself —
   flex-direction: row, column widths, align-items: stretch), so the map COLUMN
   naturally spans the full height of the row. But a percentage height doesn't reach
   the actual map div through Elementor's own nested wrapper markup
   (.dolomed-map-outer > .elementor-widget-shortcode > .elementor-widget-container >
   .elementor-shortcode > our div), since those middle wrappers default to
   height:auto. Turn the whole chain into a flex column with flex:1 instead, so the
   height flows down without a % chain. */
.dolomed-map-outer,
.dolomed-map-outer .elementor-widget-shortcode,
.dolomed-map-outer .elementor-widget-container,
.dolomed-map-outer .elementor-shortcode {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.dolomed-map-outer .elementor-widget-shortcode,
.dolomed-map-outer .elementor-widget-container,
.dolomed-map-outer .elementor-shortcode {
  flex: 1 1 auto;
  min-height: 0;
}

.dolomed-mapbox-map {
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
  min-height: 280px;
  /* Matches the page/section background so the loading state (before Mapbox
     paints) and the canvas edges blend in instead of flashing a mismatched box. */
  background: #fafafa;
}

/* Desktop only: soft fade on the map's left edge, into the same color as the cards
   column, so the map blends into the cards side instead of cutting off with a hard
   seam. Purely decorative — pointer-events: none keeps drag/click passing through
   to the map underneath. */
@media (min-width: 1025px) {
  /* The cards column must stop shrinking too — see the note below on
     .dolomed-map-outer's flex-shrink: without this, the flex row would try to
     squeeze the CARDS narrower to make room for the map's oversized breakout
     width, instead of letting the map legitimately overflow past the boxed row. */
  .dolomed-cards-outer {
    flex-shrink: 0 !important;
  }

  .dolomed-map-outer {
    position: relative;
    /* The section itself stays "boxed" (this theme's 1110px content width), same as
       every other section on the site — only the map column breaks out of that box
       on its right side, bleeding to the true browser edge like the original design.
       Standard break-out formula: 50vw - 50% is the distance from this element's
       right edge to the viewport's right edge (valid since the boxed section is
       horizontally centered); add it to the width and cancel it out with a
       matching negative margin so the box actually reaches the edge instead of
       just being pushed there. !important because Elementor's own generated CSS
       sets `width` via a custom property at matching specificity. */
    width: calc(62% + (50vw - 50%)) !important;
    margin-right: calc(-1 * (50vw - 50%));
    /* The real reason the previous attempt didn't visibly change anything:
       Elementor's containers default to flex-shrink: 1, which was silently
       shrinking this element's width right back down to fit inside the boxed
       flex row before paint — the `width` was being computed correctly and
       then squashed. Freeze it so the expanded width actually holds and the
       row is allowed to overflow past the boxed .e-con-inner (which has no
       overflow:hidden, so nothing clips it). */
    flex-shrink: 0 !important;
  }

  .dolomed-map-outer::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 160px;
    background: linear-gradient(
      to right,
      #fafafa 0%,
      rgba(250, 250, 250, 0.95) 15%,
      rgba(250, 250, 250, 0.7) 40%,
      rgba(250, 250, 250, 0.35) 65%,
      rgba(250, 250, 250, 0) 100%
    );
    z-index: 2;
    pointer-events: none;
  }
}

/* Tablet/mobile: Elementor stacks the columns (flex-direction: column), so nothing
   makes the map column match the cards column's height automatically anymore.
   dolomed-mapbox-map.js measures the cards column and sets this element's height
   inline to match — this is just the fallback before that JS runs. */
@media (max-width: 1024px) {
  .dolomed-map-outer {
    height: 320px;
  }
}

@media (max-width: 767px) {
  .dolomed-map-outer {
    height: 350px !important;
  }
}

.dolomed-map-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 260px;
  padding: 16px;
  text-align: center;
  color: #4c4262;
  font-size: 14px;
  background: #fafafa;
}

/* Custom pin marker */
.dolomed-map-marker {
  width: 84px;
  height: 59px;
  cursor: pointer;
  transform-origin: 51% 42%;
  transition: transform 0.15s ease;
}

.dolomed-map-marker:hover {
  transform: scale(1.08);
}

.dolomed-map-marker svg {
  display: block;
}

/* Popup */
.mapboxgl-popup .mapboxgl-popup-content {
  padding: 12px 14px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(87, 61, 143, 0.18);
  font-family: "Libre Franklin", sans-serif;
}

.dolomed-map-popup {
  font-size: 13px;
  line-height: 1.5;
  color: #4c4262;
}

.dolomed-map-popup strong {
  display: block;
  margin-bottom: 2px;
  color: #573d8f;
  font-size: 14px;
}

/* Keep zoom control minimal and on brand */
.dolomed-mapbox-map .mapboxgl-ctrl-group {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.dolomed-mapbox-map .mapboxgl-ctrl-group button + button {
  border-top: 1px solid #eee;
}

/* Location cards — rendered by the [dolomed_location_cards] shortcode, reading the
   same ACF data as the map pins. Styling matches the cards' original Elementor look. */
.dolomed-location-cards {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.dolomed-location-card {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 16px;
  box-shadow: 0px 15px 80px 0px rgba(0, 0, 0, 0.0392156862745098);
  padding: 20px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dolomed-location-card:hover,
.dolomed-location-card:focus-visible {
  border-color: #e678af;
}

.dolomed-location-card:focus-visible {
  outline: 2px solid #573d8f;
  outline-offset: 2px;
}

.dolomed-location-card-icon {
  display: block;
  flex: none;
  width: 35px;
  height: 35px;
}

.dolomed-location-card-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.dolomed-location-card-title {
  margin: 0 0 6px;
  font-family: "Libre Franklin", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  color: #573d8f;
}

.dolomed-location-card-address {
  margin: 0;
  font-family: "Libre Franklin", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  color: #4c4262;
}