[data-component-id="kackaamin:interactive_map"] {
  container-name: mapfull;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-width: 1312px;
  margin: auto;
  background: var(--color-driftwood);
  border-radius: 16px;
  overflow: hidden;

  /* ---- BASE (mobile): map-col is a drag-to-pan viewport, detail is a bottom sheet ---- */

  & .interactive-map__body {
    flex: 1;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  /* list-col is the bottom sheet on mobile: partially off-screen, driftwood bg */
  & .interactive-map__list-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: var(--color-driftwood);
    padding: 10px 20px 8px 20px;
    width: 100%;
    position: absolute;
    bottom: 0;
    max-height: 75dvh;
    overflow-y: auto;
    z-index: 1;
    border-radius: 20px 20px 0 0;
    box-shadow: 0px -8px 12px 6px rgba(0, 0, 0, 0.15), 0px -4px 4px rgba(0, 0, 0, 0.3);
  }

  & .mobile-deco {
    display: block;
    align-self: center;
    width: 48px;
    height: 3px;
    background: var(--color-disabled);
  }

  & .interactive-map__title {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    color: var(--color-forest);
    text-align: center;
    font-family: 'Laila', sans-serif;
    padding: 24px 0 0 0;
    transition: padding 300ms ease;
    cursor: pointer;

    & .interactive-map__title-lead {
      font-size: 40px;
      font-weight: 700;
      color: var(--color-cedar);
    }

    & .interactive-map__title-tail {
      font-size: 32px;
    }
  }

  &.is-groups-open .interactive-map__title {
    padding: 24px 0 40px 0;
  }

  /* Groups wrapper: collapsed on mobile; max-height is driven by Alpine's
     x-effect on the element (see interactive_map.twig). Desktop overrides
     with !important since the JS setter puts max-height as inline style. */
  & .interactive-map__groups {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-height: 0;
    overflow: auto;
    transition: max-height 300ms ease;
  }

  /* Mobile-only top bar: back button (closes dialog) + search input.
     Positioned above the map-col on mobile; hidden on desktop. */
  & .map__mobile-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 40px 20px 24px 20px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;

    &>button {
      background: var(--color-driftwood);
      border-radius: 50%;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--color-forest);
      flex-shrink: 0;
    }

    & .interactive-map__search.mobile {
      display: flex;
      flex: 1;
      margin: 0;
    }
  }

  & .interactive-map__search {
    /* hidden below 900px; re-enabled to flex in the desktop block */
    display: none;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    background: var(--color-driftwood);
    border: 1px solid var(--color-forest);
    border-radius: 4px;
    color: var(--color-forest);
    margin: 4px 0;

    & input {
      flex: 1;
      min-width: 0;
      background: transparent;
      border: 0;
      outline: none;
      color: var(--color-forest);
      font: inherit;
    }

    & input::-webkit-search-cancel-button {
      -webkit-appearance: none;
      appearance: none;
      width: 14px;
      height: 14px;
      background: currentColor;
      -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18.3 5.71 12 12l6.3 6.29-1.41 1.42L10.59 13.4l-6.3 6.31-1.41-1.42L9.17 12l-6.29-6.29 1.41-1.42L10.59 10.6l6.3-6.31z'/></svg>") no-repeat center / contain;
      mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18.3 5.71 12 12l6.3 6.29-1.41 1.42L10.59 13.4l-6.3 6.31-1.41-1.42L9.17 12l-6.29-6.29 1.41-1.42L10.59 10.6l6.3-6.31z'/></svg>") no-repeat center / contain;
      cursor: pointer;
      flex-shrink: 0;
    }

    & svg {
      flex-shrink: 0;
    }
  }

  & .interactive-map__group {
    &>summary {
      list-style: none;
      cursor: pointer;
      background: var(--color-forest);
      color: var(--color-driftwood);
      padding: 6px 8px;
      border-radius: 10px 0;
      display: flex;
      align-items: center;
      gap: 8px;

      & svg {
        width: 15px;
        height: 15px;
        transition: transform 0.15s;
      }

      &::-webkit-details-marker {
        display: none;
      }
    }

    &:not([open])>summary svg {
      transform: rotate(-90deg);
    }

    & ul {
      list-style: none;
      padding: 0;
      margin: 8px 0 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
      max-width: 200px;
      border-left: 1px solid var(--color-neutral);
      margin-left: 15px;
    }
  }

  & .interactive-map__group:not(:has(li:not([style*="display: none"]))) {
    display: none;
  }

  & .interactive-map__item {
    padding: 8px;
    color: var(--color-forest);
    cursor: pointer;
    border-radius: 20px 0;
    font-weight: 400;
    margin-left: 8px;
  }

  & .interactive-map__item[data-active="true"] {
    background: var(--color-light-cedar);
    color: var(--color-forest);
    font-weight: 500;
  }

  & .interactive-map__map-col {
    height: 100%;
    display: block;
    overflow: auto;
    touch-action: pan-x pan-y;
    scrollbar-width: none;
    position: relative;
    bottom: 0;
  }

  & .interactive-map__map-col::-webkit-scrollbar {
    display: none;
  }

  /* canvas bleeds off-screen to enable panning */
  & .interactive-map__canvas {
    container-name: mapcanvas;
    container-type: inline-size;
    width: auto;
    aspect-ratio: 868/657;
    position: relative;
    border: 0;
    border-radius: 0;
    overflow: hidden;

    &>img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  & .interactive-map__content {
    position: absolute;
    inset: 0;

    & .map-pin {
      position: absolute;
      top: var(--pin-top, 50%);
      left: var(--pin-left, 50%);
      cursor: pointer;
      width: 4.26cqw;
      height: 5.3cqw;

      & .map-pin__shape {
        width: 100%;
        height: 100%;
        background: var(--color-forest);

        --pin-mask: url("/themes/custom/kackaamin/images/assets/map-pin-mask.svg");
        -webkit-mask-image: var(--pin-mask);
        mask-image: var(--pin-mask);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;

        display: flex;
        justify-content: center;
        padding-top: 3px;

        & img,
        & span {
          width: 3.45cqw;
          height: 3.45cqw;
          object-fit: cover;
        }
      }
    }

    & .map-pin[data-active="true"] {
      width: 59px;
      height: 73px;

      & .map-pin__shape {
        background: var(--color-cedar);

        & img,
        & span {
          width: 48px;
          height: 48px;
        }
      }
    }

    & .pin-1 {
      --pin-top: 66.93%;
      --pin-left: 11.56%;
    }

    & .pin-2 {
      --pin-top: 48.51%;
      --pin-left: 27.76%;
    }

    & .pin-3 {
      --pin-top: 79.24%;
      --pin-left: 33.95%;
    }

    & .pin-4 {
      --pin-top: 56.47%;
      --pin-left: 51.15%;
    }

    & .pin-5 {
      --pin-top: 70.32%;
      --pin-left: 58.18%;
    }

    & .pin-6 {
      --pin-top: 19.72%;
      --pin-left: 61.69%;
    }

    & .pin-7 {
      --pin-top: 50.16%;
      --pin-left: 76.46%;
    }

    & .pin-8 {
      --pin-top: 62.64%;
      --pin-left: 90.40%;
    }

    & .pin-9 {
      --pin-top: 41.49%;
      --pin-left: 92.47%;
    }
  }

  /* detail = fixed bottom sheet so it doesn't scroll with the map.
     Collapsed to max-height 0 and expanded to its scrollHeight, mirroring
     .interactive-map__groups. x-effect writes the measured height into
     --detail-h (see interactive_map.twig); we read it here so desktop can
     override max-height without needing !important. Pinned to the viewport
     bottom, so it grows upward; overflow:hidden clips content while collapsing. */
  & .interactive-map__detail {
    position: fixed;
    inset: auto 0 0 0;
    width: 100%;
    max-width: none;
    height: auto;
    max-height: var(--detail-h, 0px);
    overflow: hidden;
    transition: max-height 300ms ease, box-shadow 300ms ease;
    background: var(--color-driftwood);
    padding: 0;
    z-index: 30;
    border-radius: 20px;
    box-shadow: 0px -8px 12px 6px rgba(0, 0, 0, 0.15), 0px -4px 4px rgba(0, 0, 0, 0.3);

    & .interactive-map__detail-content {
      display: flex;
      flex-direction: column;
      gap: 10px;
      background: var(--color-border-lightest);
      overflow-y: auto;
      border-radius: 16px 16px 0 0;
      padding: 10px 20px 8px 20px;
      width: 100%;
      height: auto;
      max-height: 70dvh;

      & img {
        border-radius: 40px 0;
        aspect-ratio: 353/196;
        object-fit: cover;
      }
    }

    & .interactive-map__detail-close {
      background: transparent;
      border: 0;
      cursor: pointer;
      color: var(--color-forest);
      width: fit-content;
    }

    & .map__detail-mobile-actions {
      gap: 10px;
      display: flex;
      align-items: center;
    }

    & .map__detail-mobile-actions button.mobile {
      border-radius: 100%;
      width: 24px;
      height: 24px;
      background: color-mix(in srgb, var(--color-mist) 30%, transparent);
    }

    /* flex column so children can be reordered via `order` (landscape swaps
       the title ahead of the banner). Default DOM order is preserved. */
    & .interactive-map__detail-item {
      display: flex;
      flex-direction: column;
    }

    & .interactive-map__detail-banner {
      margin-bottom: 20px;
      overflow: hidden;

      & img {
        width: 100%;
        height: auto;
        display: block;
      }
    }

    & .interactive-map__detail-title {
      & h5 {
        color: var(--color-black);
      }
      font-weight: 700;
      display: flex;
      justify-content: space-between;
    }

    & .interactive-map__detail-body {
      & .text-format-basic-html {
        color: var(--color-forest);
      }
      font-size: 14px;
      margin: 4px 0 24px 0;
    }

    & .interactive-map__detail-links {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 20px;

      & .btn {
        width: 100%;
      }
    }
  }

  /* close button stays reachable over the panning map */
  & .interactive-map__minimize {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 40;
    width: 36px;
    height: 36px;
    background: var(--color-driftwood);
    border: 1px solid var(--color-forest);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-forest);
    display: none;
  }

  /* ---- Tablet+: column borders and constrained detail image aspect ---- */
  @media (min-width: 768px) {
    & .interactive-map__detail {
      & .interactive-map__detail-content {
        & img {
          aspect-ratio: 230/198;
        }
      }

      border-right: 3px solid var(--color-forest);
    }

    &.is-detail-open .interactive-map__list-col {
      border-right: none;
    }
  }

  &:not(.is-detail-open) .interactive-map__detail {
    box-shadow: none;
  }

  /* ---- Desktop: two-column grid, static list, absolute-overlay detail ----
     "Desktop" = wide AND (tall OR a mouse). The height/pointer clause keeps
     landscape phones (wide but short + touch, e.g. Pixel ~915x412) out of the
     desktop layout so they get the mobile bottom-sheet layout instead, while
     mouse desktops (pointer: fine) and tall landscape tablets stay on desktop. */
  @media (min-width: 901px) and ((min-height: 601px) or (pointer: fine)) {
    & .interactive-map__body {
      display: grid;
      grid-template-columns: minmax(240px, 260px) 1fr;
      width: auto;
      height: auto;
    }

    & .interactive-map__list-col {
      overflow-y: auto;
      padding: 24px 20px;
      position: static;
      width: auto;
      height: auto;
      max-height: none;
      background: transparent;
      bottom: auto;
      z-index: auto;
      border-radius: 0 0 0 0;
      box-shadow: none;
    }

    & .mobile-deco {
      display: none;
    }

    & .map__mobile-nav {
      display: none;
    }

    & .interactive-map__detail {
      & .map__detail-mobile-actions {
        display: none;
      }
    }


    & .interactive-map__search {
      display: flex;
    }

    & .interactive-map__search.mobile {
      display: none;
    }

    & .interactive-map__title,
    &.is-groups-open .interactive-map__title {
      padding: 0;
      cursor: default;
    }

    & .interactive-map__title {
      & .interactive-map__title-lead {
        color: var(--color-ember);
      }
    }

    /* !important overrides the inline max-height set by x-effect on mobile. */
    & .interactive-map__groups {
      max-height: none !important;
      overflow: visible;
    }

    & .interactive-map__map-col {
      display: flex;
      position: relative;
      height: auto;
      overflow: hidden;
      touch-action: auto;
    }

    & .interactive-map__canvas {
      width: 100%;
      border-radius: 0 13.23px 13.23px 0;
      border: 3px solid var(--color-forest);
    }

    & .interactive-map__detail {
      position: absolute;
      inset: auto;
      top: 0;
      left: 0;
      width: 32%;
      height: 100%;
      /* Reads `none` instead of the --detail-h var: the mobile grow/collapse
         animation doesn't apply to the side panel. No inline max-height is set
         (x-effect only writes the custom property), so this plainly wins. */
      max-height: none;
      max-width: 282px;
      padding: 20px 20px 20px 0;
      z-index: 20;
      box-shadow: 0 8px 12px 6px rgba(0, 0, 0, 0.15);
      border-radius: 0;


      & .interactive-map__detail-content {
        height: 100%;
        max-height: none;
        border-radius: 20px;
        padding: 16px;
        padding-bottom: 8px;
      }
    }

    /* The outer wrapper no longer toggles display (it stays in flow so mobile
       can animate its height), so hide the whole side panel when nothing is
       active. is-detail-open is set on the root by Alpine (active !== null). */
    &:not(.is-detail-open) .interactive-map__detail {
      display: none;
    }

    & .interactive-map__minimize {
      position: absolute;
      top: auto;
      bottom: 16px;
      right: 16px;
      z-index: 15;
      display: flex;
    }
  }

  /* ---- Mobile media queries ----
     These live INSIDE the component scope on purpose: nesting resolves `&` to
     [data-component-id], so their selectors match the base rules' specificity
     and win by source order (they come last) without needing !important. */

  /* Below desktop (portrait or landscape): show the title above the banner
     (banner still follows). Desktop keeps the DOM order. The second condition
     covers landscape phones that are wider than 900px (matches the landscape
     query below). */
  @media (max-width: 900px),
  (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {
    & .interactive-map__detail-title {
      order: -1;
      margin-bottom: 10px;
      margin-top: 14px;
    }

    & .interactive-map__detail-close:not(.mobile) {
      display: none;
    }
  }

  @media (max-width: 900px) and (orientation: portrait) {
    & .interactive-map__canvas {
      height: 100dvh;
      width: calc(100dvh * 868 / 657);
    }
  }

  /* Landscape phones: short viewport + touch, regardless of width (a landscape
     Pixel is ~915px wide, past the 900px cutoff). pointer:coarse excludes short
     wide desktop windows, which stay on the desktop layout. */
  @media (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {

    & .interactive-map__search.mobile {
      max-width: 297px;
    }

    & .interactive-map__canvas {
      width: 100dvw;
      height: calc(100dvw * 657 / 868);
    }

    & .interactive-map__list-col,
    & .interactive-map__detail {
      max-width: 420px;
      max-height: 90dvh;
      z-index: 10;
      border-right: none;
      left: 20px;
      border-radius: 16px 16px 0 0;
    }
    & .interactive-map__list-col {
      box-shadow: 0px -8px 12px 6px rgba(0, 0, 0, 0.15), 0px -4px 4px rgba(0, 0, 0, 0.3);
    }

    & .interactive-map__detail {
      max-height: min(var(--detail-h, 0px), 90dvh);

      & .interactive-map__detail-content {
        max-height: 90dvh;
      }
    }

    & .interactive-map__list-col {
      gap: 0;
    }

    /* Also targets the is-groups-open state so this padding beats the
       &.is-groups-open .interactive-map__title rule (0,3,0) without !important. */
    & .interactive-map__title,
    &.is-groups-open .interactive-map__title {
      flex-direction: row;
      padding: 16px 0;
      font-size: 32px;
      white-space: nowrap;
      align-items: center;
      gap: 4px;
      margin-bottom: -5px;

      & .interactive-map__title-tail {
        font-size: 24px;
      }
    }

    & .interactive-map__detail[data-side="left"] {
      left: 20px;
      right: auto;
    }

    & .interactive-map__detail[data-side="right"] {
      left: auto;
      right: 20px;
    }

  }
}

[x-cloak] {
  display: none !important;
}


/* ---- Shared shell used by interactive_map_inline and interactive_map_inline_large ----
   Mobile teaser card + fullscreen dialog. Left un-scoped so any wrapper SDC that
   renders the same markup picks these up (both wrappers always include
   kackaamin:interactive_map, which loads this stylesheet). */

.map__mobile-cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 64px;
  padding: 24px 20px;
  border-radius: 40px 0;
  border: 3px solid var(--color-forest);
  width: 100%;
  height: 416px;
  background-color: var(--color-driftwood);
  background-image: url(../../images/assets/map-cover.png);
  background-position: center center;
  background-size: cover;

  & .interactive-map__title {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    color: var(--color-forest);
    text-align: center;
    font-family: 'Laila', sans-serif;

    & .interactive-map__title-lead {
      font-size: 36px;
      font-weight: 700;
      color: var(--color-ember);
    }

    & .interactive-map__title-tail {
      font-size: 32px;
    }
  }

  & .btn {
    display: flex;
    align-items: center;
    gap: 12px;
  }
}

#map-fullscreen-dialog {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  border-radius: 0;
  padding: 0;
  border: none;
  margin: auto;
  container-name: fs-dialog;

  &::backdrop {
    background: rgba(0, 0, 0, 0.5);
  }

  & .modal-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    border-radius: 0;
  }

  & .modal-content {
    flex: 1;
    overflow: auto;
  }
}

@media (min-width: 901px) and ((min-height: 601px) or (pointer: fine)) {
  #map-fullscreen-dialog {
    width: 90vw;
    max-width: 1312px;
    height: auto;
    max-height: 787px;
    aspect-ratio: 1312/787;
    border-radius: 16px;

    & .modal-box {
      border-radius: 16px;
    }
  }
}